/* neoMemorial — estilos que antes iban inline dentro de index.php.
   Se movieron acá para que el navegador los pueda cachear: antes se
   volvían a descargar en cada visita (76 KB por carga). */

        /* Estilos para sección de planes integrada */
        #planes-page {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-primary);
            z-index: 2000;
            overflow-y: auto;
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        #planes-page.active {
            display: block;
            opacity: 1;
            transform: scale(1);
            animation: modalFadeIn 0.35s ease forwards;
        }
        #planes-page.closing {
            animation: modalFadeOut 0.25s ease forwards;
        }
        #main-view.hidden {
            display: none;
        }
        /* header=off: modal de experiencias sin logo ni botón Volver */
        .header-off #project-detail .detail-header,
        .header-off #project-detail .detail-badge,
        .header-off #project-detail .cta-close-btn {
            display: none !important;
        }
        /* header=off: pantalla de carga para evitar estados intermedios */
        html.ho-loading::before {
            content: '';
            position: fixed;
            inset: 0;
            background: var(--bg-primary, #f5f5f5);
            z-index: 99998;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        html.ho-loading::after {
            content: '';
            position: fixed;
            top: 50%;
            left: 50%;
            width: 46px;
            height: 46px;
            margin: -23px 0 0 -23px;
            border: 4px solid rgba(0, 0, 0, 0.12);
            border-top-color: #8B7257;
            border-radius: 50%;
            animation: ho-spin 0.8s linear infinite;
            z-index: 99999;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        html.ho-loading.ho-done::before,
        html.ho-loading.ho-done::after {
            opacity: 0;
            pointer-events: none;
        }
        @keyframes ho-spin { to { transform: rotate(360deg); } }
        #planes-page .pricing-section {
            background: var(--bg-primary);
        }
        /* Funergal 2022 se veía más grande que las demás: lo achico para igualarlo (sin estirar) */
        #exposiciones .event-photo img[src*="funergal2022"] {
            max-height: 78%;
        }
        /* ∞ sin círculo y más grande */
        #planes-page .feature-quantity {
            border: none;
            background: transparent;
            border-radius: 0;
            width: 16px;
            height: 16px;
            font-size: 1.5rem;
            line-height: 1;
        }
        /* Espacio "Mensual"->precio reducido para compensar el aire interno superior
           de la tipografía del precio y que quede visualmente igual al de precio->período */
        #planes-page .pricing-billing {
            margin-bottom: 0.1rem;
        }
        /* Mobile: el blur del overlay del menú debe cubrir también el header */
        .mobile-menu-overlay { z-index: 1002; }
        .mobile-menu { z-index: 1003; }
        /* Nueva estructura de precios: frase bajo el nombre + precio debajo de las features */
        .pricing-tagline { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.35rem; }
        #planes-page .pricing-header { min-height: auto; }
        .pricing-price-block { padding: 1.25rem 1.25rem 0.75rem; text-align: center; border-top: 1px solid var(--border-light); }
        .pricing-price-block .pricing-price { margin-top: -0.4rem; }
        /* Garantía de satisfacción (arriba del botón Consultar) */
        .pricing-guarantee {
            padding: 0.75rem 1.25rem;
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-secondary);
            border-top: 1px solid var(--border-light);
        }
        .pricing-guarantee span { color: var(--accent); font-weight: 600; }
        /* Mobile: ocultar los puntos de paginación del carrusel de planes */
        @media (max-width: 768px) {
            #pricing-dots { display: none !important; }
            /* Header de los modales: Volver a la izquierda y logo a la derecha, en la misma línea */
            .detail-header {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            .detail-header .logo {
                order: 0;
                width: auto;
                justify-content: flex-end;
            }
            .detail-header .back-button {
                align-self: center;
            }
        }
        #planes-page .pricing-footer { border-top: none; }
        /* Header de modales: logo más chico para bajar la altura del header */
        .detail-header .logo-icon img { height: 44px; }
        /* Header global: logo más chico en desktop */
        @media (min-width: 769px) {
            header .logo-icon img { height: 60px; }
        }
        .hero-stats { border-top: none; padding-top: 0; }
        /* Banderas de idioma (header) */
        .lang-switch { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
        .lang-flag { background: none; border: none; padding: 0; cursor: pointer; }
        .lang-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .lang-name { display: none; }
        .lang-select .lang-current { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid rgba(152, 125, 95, 0.35); background: var(--bg-primary); border-radius: 999px; padding: 0.4rem 0.9rem 0.4rem 0.5rem; cursor: pointer; font-family: var(--font-display); line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
        .lang-select .lang-current:hover { border-color: var(--accent); background: rgba(152, 125, 95, 0.05); box-shadow: 0 4px 14px rgba(152, 125, 95, 0.18); }
        .lang-select .lang-current-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex: 0 0 auto; display: block; }
        .lang-select .lang-current-name { font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; }
        .lang-select .lang-caret { color: var(--accent); flex: 0 0 auto; transition: transform 0.25s ease; }
        .lang-select.open .lang-caret { transform: rotate(180deg); }
        .lang-select .lang-flags { display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; flex-direction: column; align-items: stretch; gap: 0.2rem; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 0.5rem; box-shadow: 0 12px 32px rgba(0,0,0,0.14); z-index: 1100; min-width: 190px; max-height: 320px; overflow-y: auto; }
        .lang-select.open .lang-flags { display: flex; }
        .lang-select .lang-flags .lang-flag { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); text-align: left; transition: background 0.2s ease; }
        .lang-select .lang-flags .lang-flag img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex: 0 0 auto; }
        .lang-select .lang-flags .lang-flag .lang-name { display: inline; font-size: 0.9rem; color: var(--text-primary); font-family: var(--font-display); white-space: nowrap; }
        .lang-select .lang-flags .lang-flag:hover { background: rgba(152,125,95,0.10); }
        .lang-select .lang-flags .lang-flag.active { background: rgba(152,125,95,0.16); }
        .mobile-menu-langs .lang-select { width: 210px; align-items: stretch; }
        .mobile-menu-langs .lang-select .lang-current { justify-content: center; }
        #lang-switch-mobile .lang-flags { position: absolute; top: auto; bottom: 100%; left: 0; right: 0; margin-top: 0; margin-bottom: 8px; min-width: 0; width: 100%; max-height: 280px; box-shadow: 0 -10px 28px rgba(0,0,0,0.22); }
        /* Mobile: compactar el bloque de idioma para que entre bien en el header */
        @media (max-width: 768px) {
            header .logo-icon img { height: 44px; }
            #lang-switch .lang-current { padding: 0.25rem 0.45rem; gap: 0.35rem; }
            #lang-switch .lang-current-name { display: none; }
        }
        .demo-when { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
        .demo-when-opt { flex: 1; min-width: 88px; padding: 0.5rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
        .demo-when-opt:hover { border-color: var(--accent); background: rgba(152, 125, 95, 0.15); color: var(--accent-dark); }
        .demo-when-opt.active { background: var(--accent); color: #fff; border-color: var(--accent); }
        .mobile-menu-langs { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.1rem; margin-bottom: 0.85rem; }
        .feat-short { display: none; }
        @media (max-width: 768px) {
            .feat-full { display: none; }
            .feat-short { display: inline; }
            #planes-page .feature-quantity { font-size: 1rem; }
            .hero { padding-top: 1.25rem; }
        }
        /* Planes: nombres, marcador "+" y referencias en dorado */
        /* color de "Plan"/nombre ahora lo maneja .sh-word.negra/.dorada */
        .pricing-features .feature-plus {
            display: inline-flex; align-items: center; justify-content: center;
            width: 16px; height: 16px; flex-shrink: 0;
            color: var(--accent); font-size: 1.4rem; font-weight: 700; line-height: 1;
        }
        .pricing-features .plan-ref { color: var(--accent); font-weight: 600; }
        .pricing-features li strong { color: var(--accent); }
        /* === Rediseño de planes: caja de precio arriba, taglines, flecha y garantía === */
        #planes-page .pricing-card { overflow: visible; }
        #planes-page .pricing-topbox { display: flex; align-items: stretch; margin: 1.25rem auto 0; width: -moz-fit-content; width: fit-content; max-width: calc(100% - 1rem); background: rgba(152, 125, 95, 0.1); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
        #planes-page .pricing-topbox .pricing-name { flex: 0 0 5.8rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: 0.85rem 0.35rem 0.85rem 0.8rem; margin: 0; font-size: 1.75rem; line-height: 1.02; white-space: normal; }
        #planes-page .pricing-topbox .pricing-name span { display: block; }
        #planes-page .pricing-pricebox { position: relative; flex: 0 1 auto; min-width: 7.25rem; height: 6.2rem; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 0.85rem 0.5rem; gap: 0.2rem; box-sizing: border-box; }
        #planes-page .pricing-pricebox::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 62%; background: rgba(152, 125, 95, 0.45); }
        #planes-page .pricing-pricebox .pricing-billing { font-size: 0.7rem; color: var(--text-muted); margin: 0.15rem 0 0; }
        #planes-page .pricing-pricebox .pricing-price { font-size: 3.2rem; line-height: 1; margin: 0; }
        #planes-page .pricing-pricebox .pricing-price .pricing-cur { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); position: absolute; top: 0.7rem; right: 0.35rem; letter-spacing: 0.02em; }
        #planes-page .pricing-pricebox .pricing-period { font-size: 0.7rem; color: var(--text-muted); margin: 0; }
        #planes-page .pricing-tagline { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; color: var(--text-primary); text-align: center; white-space: normal; padding: 0 1.1rem; margin: 0.9rem 0 0.2rem; min-height: 2.9rem; }
        #planes-page .pricing-guarantee-bar { max-width: 1140px; margin: 1.75rem auto 0; background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: var(--radius-md); text-align: center; padding: 0.9rem 1.25rem; font-family: var(--font-display); font-size: 1.02rem; color: var(--text-secondary); }
        #planes-page .pricing-guarantee-bar span:not(.sh-word) { color: var(--accent); font-weight: 600; }

        /* Badge del hero en mobile: deja de ser una fila (icono | 23 | texto),
           porque eso encajonaba el texto en una columna angosta y lo dejaba
           desparejo. Pasa a ser texto corrido centrado, y la pildora se ajusta. */
        @media (max-width: 600px) {
            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                max-width: 18rem;
                border-radius: 18px;
                padding: 0.5rem 1rem;
                font-size: 0.72rem;
                line-height: 1.4;
            }
            .hero-badge svg { flex: 0 0 auto; width: 14px; height: 14px; }
            .hero-badge .years-count { font-weight: 700; }
            .hero-badge .hero-badge-text { text-align: center; text-wrap: balance; }
        }

        .hero-refuerzo {
            font-family: var(--font-display);
            font-size: 1.18rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            text-align: center;
            margin: -0.9rem auto 2rem;
            line-height: 1.5;
        }
        @media (max-width: 600px) { .hero-refuerzo { font-size: 1.02rem; margin: -0.5rem auto 1.6rem; } }

        /* === Selector Mensual / Anual === */
        .billing-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            row-gap: 0.2rem;
            max-width: calc(100% - 2rem);
            gap: 0.35rem;
            width: -moz-fit-content;
            width: fit-content;
            margin: 0 auto 1.75rem;
            padding: 0.3rem;
            background: rgba(152, 125, 95, 0.09);
            border: 1px solid rgba(152, 125, 95, 0.32);
            border-radius: 999px;
            position: relative;
        }
        .billing-opt {
            appearance: none;
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 0.5rem 1.35rem;
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--accent-dark);
            white-space: nowrap;
            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        }
        .billing-opt:hover { background: rgba(152, 125, 95, 0.14); }
        .billing-opt.active {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 2px 8px rgba(152, 125, 95, 0.3);
        }
        .billing-opt:focus { outline: none; }
        .billing-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .billing-save {
            margin-left: 0.5rem;
            padding-right: 0.85rem;
            font-family: var(--font-body);
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        @media (max-width: 600px) {
            .billing-toggle { gap: 0.25rem; padding: 0.25rem; }
            .billing-opt { padding: 0.45rem 0.95rem; font-size: 0.88rem; }
            .billing-save { margin-left: 0.35rem; padding-right: 0.6rem; font-size: 0.68rem; }
        }
        /* Nota: existe una regla previa `.pricing-price span` (pensada para el "USD") que
           achica y agrisa cualquier span dentro del precio; por eso el importe fija aca
           su tamano heredado y su color dorado. */
        #planes-page .pricing-amount {
            font-size: inherit;
            font-weight: inherit;
            color: var(--accent);
        }

        /* === Estilo integrado con lineas divisorias (reemplaza las cajas por reglas) === */
        #planes-page .pricing-card {
            background: #fdfbf8;
            border: 1px solid rgba(152, 125, 95, 0.45);
            border-radius: 20px;
        }
        /* La cabecera deja de ser una caja rellena: queda al aire, separada por una linea dorada */
        #planes-page .pricing-topbox {
            position: relative;
            background: transparent;
            border: none;
            border-radius: 0;
            width: auto;
            max-width: none;
            margin: 1.5rem 1.5rem 0;
            padding-bottom: 1.1rem;
            justify-content: center;
            gap: 2.4rem;
            overflow: visible;
        }
        #planes-page .pricing-topbox::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 1px;
            background: rgba(152, 125, 95, 0.5);
        }
        #planes-page .pricing-topbox .pricing-name {
            flex: 0 1 auto;
            min-width: 0;
            padding: 0.2rem 0.55rem 0.2rem 0;
            font-size: 2rem;
            line-height: 1.05;
        }
        #planes-page .pricing-pricebox {
            /* Ancho fijo real (no solo minimo): el bloque no debe angostarse al pasar
               de 3 a 2 digitos (100 -> 80) NI ensancharse cuando la leyenda pasa de
               "/mes" a "/mes (pago anual)". Si cambia de ancho, al estar todo centrado
               el nombre, la raya y el USD se recorren. */
            flex: 0 0 auto;
            width: 7.6rem;
            min-width: 7.6rem;
            height: auto;
            padding: 0.2rem 0.2rem 0.2rem 0.55rem;
            box-sizing: border-box;
        }
        /* La leyenda puede ocupar dos renglones antes que ensanchar el bloque */
        #planes-page .pricing-pricebox .pricing-billing {
            white-space: normal;
            line-height: 1.2;
            min-height: 1.7rem;
        }
        /* Digitos de ancho uniforme, para que la cifra tampoco baile al cambiar */
        /* La display sirve cifras de estilo antiguo (el 4 baja de la linea base
           y el 8 no, por eso se veian desalineados). lining-nums las iguala en
           altura; tabular-nums mantiene el ancho parejo al cambiar de
           modalidad. */
        #planes-page .pricing-price {
            font-variant-numeric: lining-nums tabular-nums;
            font-feature-settings: "lnum" 1, "tnum" 1;
        }
        #planes-page .pricing-pricebox::before { left: -1.2rem; height: 78%; }
        #planes-page .pricing-pricebox .pricing-price .pricing-cur {
            top: -0.15rem;
            right: -0.1rem;
        }
        /* Linea entre el lema y la lista de items */
        #planes-page .pricing-tagline {
            margin: 1rem 1.5rem 0;
            padding: 0 0 1rem;
            border-bottom: 1px solid rgba(152, 125, 95, 0.2);
        }
        /* Sin lineas divisorias entre items */
        #planes-page .pricing-features ul li { border-bottom: none; }
        /* Pie separado por linea dorada, con adornos a los lados de "3 meses gratis" */
        #planes-page .pricing-footer { border-top: 1px solid rgba(152, 125, 95, 0.5); }
        #planes-page .pricing-promo-3m::before,
        #planes-page .pricing-promo-3m::after {
            content: "\2726";
            display: inline-block;
            font-family: var(--font-body);
            font-size: 0.72rem;
            font-weight: 400;
            color: var(--accent);
            vertical-align: middle;
            opacity: 0.85;
        }
        #planes-page .pricing-promo-3m::before { margin-right: 0.7rem; }
        #planes-page .pricing-promo-3m::after { margin-left: 0.7rem; }

        /* === Responsive del rediseño: misma diagramación, escalada al ancho real de las
           tarjetas en cada corte (320px de base → 280px → 260px → 280px en móvil). Sin esto,
           la cabecera conserva dimensiones de escritorio y el nombre desborda la tarjeta. === */
        @media (max-width: 1200px) {
            #planes-page .pricing-topbox { gap: 1.6rem; }
            #planes-page .pricing-topbox .pricing-name { font-size: 1.7rem; }
            #planes-page .pricing-pricebox { width: 6.8rem; min-width: 6.8rem; }
            #planes-page .pricing-pricebox .pricing-price { font-size: 2.8rem; }
            #planes-page .pricing-pricebox::before { left: -0.8rem; }
        }
        @media (max-width: 1000px) {
            #planes-page .pricing-topbox { gap: 1.2rem; }
            #planes-page .pricing-topbox .pricing-name { font-size: 1.55rem; }
            #planes-page .pricing-pricebox { width: 6.4rem; min-width: 6.4rem; }
            #planes-page .pricing-pricebox .pricing-price { font-size: 2.6rem; }
            #planes-page .pricing-pricebox::before { left: -0.6rem; }
        }
        @media (max-width: 768px) {
            #planes-page .pricing-topbox { margin: 1.25rem 1.25rem 0; gap: 1.4rem; }
            #planes-page .pricing-topbox .pricing-name { font-size: 1.6rem; }
            #planes-page .pricing-pricebox { width: 6.8rem; min-width: 6.8rem; }
            #planes-page .pricing-pricebox .pricing-price { font-size: 2.8rem; }
            #planes-page .pricing-pricebox::before { left: -0.7rem; }
            #planes-page .pricing-tagline { margin: 0.85rem 1.25rem 0; }
            /* Cada item en UNA sola linea, aprovechando el ancho completo de la tarjeta:
               en 280px, el padding lateral del contenedor (20px por lado) mas el de cada
               item (24px por lado) dejaban ~190px de texto y el mas largo necesita ~200px,
               por eso envolvia. Se recuperan esos margenes muertos. */
            #planes-page .pricing-features { padding-left: 1rem; padding-right: 1rem; }
            #planes-page .pricing-features ul li {
                white-space: nowrap;
                padding-left: 4px !important;
                padding-right: 18px !important;
            }
            #planes-page .feature-icons { margin-left: 0.4rem; gap: 0.3rem; }
        }
        @media (max-width: 380px) {
            .billing-opt { padding: 0.4rem 0.8rem; font-size: 0.84rem; }
            .billing-save { margin-left: 0.25rem; padding-right: 0.5rem; }
            #planes-page .pricing-features ul li { font-size: 0.86rem; }
        }
        :root { --accent: #8B7257; --accent-dark: #7e664c; }
        #planes-page .pricing-card [data-i18n="name.inbox_tareas"], #planes-page .pricing-card [data-i18n="name.tareas_push"], #planes-page .pricing-card [data-i18n="name.musica_funcional_salas"], #planes-page .pricing-card [data-i18n="name.nuevas_apps"], #planes-page .pricing-card [data-i18n="name.crm"], #planes-page .pricing-card [data-i18n="name.desarrollos_medida"] { color: var(--accent); }
        #planes-page .pricing-card [data-i18n="name.desarrollos_medida"] strong { color: var(--accent); }
        #expo-swiper { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }
        @media (max-width: 768px) { #expo-swiper { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); } }
        .cem-panel { display: flex; align-items: center; gap: 2.25rem; max-width: 1140px; margin: 2.5rem auto; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem 2.25rem; }
        .cem-panel .cem-text { flex: 0 1 460px; text-align: left; }
        .cem-panel .cem-lockup { margin: 0 0 1.1rem; }
        .cem-panel .cem-pre { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.03em; color: var(--text-secondary); margin: 0 0 0.1rem; }
        .cem-panel .cem-acr { display: flex; align-items: stretch; gap: 0.75rem; }
        .cem-panel .cem-big { font-family: var(--font-display); font-size: 5rem; line-height: 0.72; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
        .cem-panel .cem-expand { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-display); font-size: 1.05rem; line-height: 1; color: var(--text-primary); }
        .cem-panel .cem-expand span { display: block; }
        @media (max-width: 768px) { .cem-panel .cem-big { font-size: 3.6rem; } .cem-panel .cem-expand { font-size: 0.8rem; } .cem-panel .cem-pre { font-size: 0.95rem; } }
        .cem-panel .cem-desc { font-size: 1.05rem; color: var(--text-secondary); margin: 0; line-height: 1.55; }
        .reviews-panel {
            max-width: 720px; margin: 1.5rem auto 2.5rem; background: var(--bg-tertiary);
            border: 1px solid var(--border-light); border-radius: var(--radius-lg);
            padding: 1.5rem 2.25rem; text-align: center;
        }
        .reviews-panel-header { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 0.6rem; }
        .reviews-panel-heading { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
        .reviews-panel-text { font-size: 0.95rem; color: var(--text-secondary); margin: 0 0 0.85rem; line-height: 1.5; }
        .reviews-google-icon { display: block; flex: 0 0 auto; }
        .reviews-panel-cta {
            display: inline-block; padding: 0.7rem 1.5rem; background: var(--accent); color: #fff;
            border-radius: 999px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
            text-decoration: none; transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
        }
        .reviews-panel-cta:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(152, 125, 95, 0.35); }
        @media (max-width: 768px) { .reviews-panel { padding: 1.25rem; margin: 1.25rem auto 2rem; } }
        .cem-panel .cem-photo { position: relative; flex: 1; min-width: 0; max-width: 620px; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
        .cem-panel .cem-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; will-change: opacity; }
        .cem-panel .cem-slide.active { opacity: 1; }
        .cem-panel .cem-cta { display: inline-block; margin-top: 1.35rem; padding: 0.75rem 1.6rem; background: var(--accent); color: #fff; border-radius: 999px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; }
        .cem-panel .cem-cta:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(152, 125, 95, 0.35); }
        @media (max-width: 768px) { .cem-panel { flex-direction: column; padding: 1.25rem; gap: 1.25rem; } .cem-panel .cem-text { flex: none; text-align: left; } .cem-panel .cem-lockup { width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .cem-panel .cem-photo { flex: none; width: 100%; } .cem-panel .cem-title { font-size: 1.3rem; } .cem-panel .cem-desc { font-size: 0.95rem; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .cem-panel .cem-cta { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; } }
        #planes-page .pricing-otros-planes { width: -moz-fit-content; width: fit-content; max-width: calc(100% - 2.5rem); margin: 1.75rem auto 0; padding: 0.55rem 1.2rem; background: rgba(152, 125, 95, 0.12); border: 1px solid rgba(152, 125, 95, 0.42); border-radius: var(--radius-md); text-align: center; font-family: var(--font-display); font-size: 1.02rem; color: var(--text-primary); font-weight: 400; line-height: 1.35; }
        .pricing-otros-planes--conboton {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            text-align: left;
        }
        .pricing-lite-ver-plan {
            flex: 0 0 auto;
            padding: 0.45rem 1.1rem;
            background: transparent;
            border: 1px solid rgba(152, 125, 95, 0.5);
            color: var(--accent-dark);
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }
        .pricing-lite-ver-plan:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .pricing-lite-ver-plan:focus {
            outline: none;
        }
        .pricing-lite-ver-plan:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        @media (max-width: 768px) { .pricing-otros-planes--conboton { flex-direction: column; text-align: center; } }
        /* Dorado solo para los resaltados de las pildoras de descuento y de consulta.
           Antes esta regla alcanzaba a cualquier span, y como el texto de la pildora de
           Plan Lite va dentro de un span con data-i18n, salia todo dorado. */
        #planes-page .pricing-otros-planes--consulta span:not(.sh-word) { color: var(--accent); font-weight: 600; }
        .apps-precio-cartel .shimmer-trigger .sh-word, #planes-page .pricing-otros-planes .shimmer-trigger .sh-word { font-weight: 700; }
        #planes-page .pricing-otros-planes--consulta { margin-top: 0.6rem; }
                .hero-cloud { position: relative; width: 100%; max-width: 660px; height: 185px; margin: 0.75rem auto 0; }
        .hero-cloud .cloud-chip { position: absolute; left: 50%; top: 50%; visibility: hidden; color: var(--text-primary); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; white-space: nowrap; will-change: transform, opacity; backface-visibility: hidden; transform: translate(-50%, -50%); }
        .hero-cloud .cloud-chip.key { color: var(--accent); font-weight: 600; }
        @media (max-width: 768px) { .hero-cloud { max-width: 380px; height: 170px; } .hero-cloud .cloud-chip { font-size: 0.9rem; } }
        #planes-page .swiper-button-next, #planes-page .swiper-button-prev { color: var(--accent); --swiper-navigation-size: 20px; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(152, 125, 95, 0.45); border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
        #planes-page .swiper-button-next:hover, #planes-page .swiper-button-prev:hover { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(152, 125, 95, 0.4); }
        /* Paginación del carrusel de planes: en flujo (arriba del Plan Lite) y dorada como el home */
        #pricing-dots { position: static !important; display: flex; gap: 0.4rem; justify-content: center; margin: 1.6rem 0 0; }
        #pricing-dots .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: rgba(152, 125, 95, 0.3); opacity: 1; margin: 0; transition: all 0.3s ease; }
        #pricing-dots .swiper-pagination-bullet-active { background: #8B7257; width: 22px; border-radius: 4px; }
        /* Carrusel de planes: shell para las flechas + fade lateral (como Últimos Lanzamientos) */
        .pricing-carousel-shell { position: relative; }
        #planes-page #pricing-swiper { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }
        @media (max-width: 768px) { #planes-page #pricing-swiper { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); } }
        #planes-page .swiper-button-disabled { opacity: 0.3; }
        /* Botones: transición suave de un color a otro al hover */
        #planes-page .pricing-promo-3m { display: block; text-align: center; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--accent); letter-spacing: 0.01em; margin: 0 0 0.55rem; }
        #planes-page .pricing-cta {
            background: rgba(152, 125, 95, 0.12);
            color: var(--accent-dark);
            border: 1px solid rgba(152, 125, 95, 0.5);
            transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.35s ease, transform 0.2s ease;
        }
        #planes-page .pricing-cta:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            box-shadow: 0 8px 22px rgba(152, 125, 95, 0.35);
            transform: translateY(-2px);
        }
        nav .nav-cta {
            background: var(--accent);
            transition: background-color 0.45s ease, box-shadow 0.35s ease, transform 0.2s ease;
        }
        nav .nav-cta:hover {
            background: var(--accent-dark);
            box-shadow: 0 6px 18px rgba(152, 125, 95, 0.4);
            transform: translateY(-2px);
        }
        /* Tabs de categoría: transición de color al hover */
        .toggle-btn { transition: background-color 0.35s ease, color 0.35s ease; }
        .toggle-btn:hover { color: var(--accent-dark); background: rgba(152, 125, 95, 0.15); }
        /* Botón Volver: transición de color suave (pasa a dorado) */
        .back-button { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
        /* Modal Agendar Demostración */
        .demo-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 100000; padding: 1rem; }
        .demo-modal-overlay.active { display: flex !important; align-items: center !important; justify-content: center !important; }
        .demo-modal { background: var(--bg-primary); border-radius: var(--radius-lg); width: 100% !important; max-width: 440px !important; max-height: 90vh !important; height: auto !important; position: relative !important; inset: auto !important; top: auto !important; left: auto !important; margin: 0 !important; overflow-y: auto; padding: 1.75rem; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
        .demo-modal h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--text-primary); text-align: center; margin: 0 0 1.25rem; }
        @media (max-width: 768px) {
            .demo-modal-overlay { padding: 1.5rem 1.25rem; }
            .demo-modal { max-width: 100% !important; max-height: 80vh !important; padding: 1.5rem 1.25rem; }
        }
        /* Modal de Reseñas (reutiliza .project-detail / .detail-header / .detail-content) */
        .reviews-modal-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
        .reviews-modal-header h3 {
            font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
            color: var(--text-primary); margin: 0;
        }
        .reviews-modal-subtitle { color: var(--text-secondary); font-size: 0.95rem; margin: 0 0 1.5rem; max-width: 720px; }
        .reviews-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
        }
        .review-card {
            background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md);
            padding: 1.1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .review-card-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
        .review-avatar {
            width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
        }
        .review-name { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); line-height: 1.3; }
        .review-date { font-size: 0.78rem; color: var(--text-muted); }
        .review-stars { display: flex; gap: 2px; margin-bottom: 0.5rem; }
        .review-star { fill: #d9d9d9; }
        .review-star.filled { fill: #FBBC05; }
        .review-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
        @media (max-width: 768px) {
            .reviews-grid { grid-template-columns: 1fr; }
        }
        .demo-field { margin-bottom: 0.85rem; }
        .demo-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.3rem; }
        .demo-field input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; color: var(--text-primary); background: var(--bg-secondary); }
        .demo-field input:focus { outline: none; border-color: var(--accent); }
        .demo-row { display: flex; gap: 0.75rem; }
        .demo-row .demo-field { flex: 1; }
        .demo-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
        .demo-submit { flex: 1; background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 0.8rem; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background-color 0.45s ease, box-shadow 0.35s ease, transform 0.2s ease; }
        .demo-submit:hover { background: var(--accent-dark); box-shadow: 0 8px 22px rgba(152, 125, 95, 0.4); transform: translateY(-2px); }
        .demo-cancel { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); padding: 0.8rem 1.1rem; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
        .demo-cancel:hover { background: rgba(152, 125, 95, 0.15); color: var(--accent-dark); border-color: var(--accent); }
        .demo-cal { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem; background: var(--bg-secondary); }
        .demo-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
        .demo-cal-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); text-transform: capitalize; }
        .demo-cal-nav { background: none; border: 1px solid var(--border); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; color: var(--text-secondary); line-height: 1; }
        .demo-cal-nav:hover { border-color: var(--accent); color: var(--accent); }
        .demo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
        .demo-cal-dow { text-align: center; font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; padding: 0.2rem 0; font-weight: 600; }
        .demo-cal-day { text-align: center; padding: 0.42rem 0; font-size: 0.82rem; border-radius: 6px; cursor: pointer; color: var(--text-primary); border: 1px solid transparent; }
        .demo-cal-day:hover { background: rgba(152,125,95,0.15); }
        .demo-cal-day.empty { cursor: default; }
        .demo-cal-day.disabled { color: var(--text-muted); opacity: 0.35; cursor: not-allowed; }
        .demo-cal-day.selected { background: var(--accent); color: #fff; font-weight: 600; }
        .demo-times { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
        .demo-time { padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; cursor: pointer; background: var(--bg-primary); color: var(--text-primary); }
        .demo-time:hover { border-color: var(--accent); }
        .demo-time.selected { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
        .demo-selected { margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-secondary); text-align: center; min-height: 1.1rem; text-transform: capitalize; }
        .wheel-picker { position: relative; display: flex; align-items: stretch; height: 150px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); overflow: hidden; }
        .wheel-band { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 36px; background: rgba(152,125,95,0.12); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); pointer-events: none; z-index: 1; }
        .wheel-col { flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -ms-overflow-style: none; text-align: center; position: relative; z-index: 2; perspective: 600px; }
        .wheel-col::-webkit-scrollbar { display: none; }
        #wheel-date { flex: 2.4; }
        .wheel-item { height: 36px; line-height: 36px; scroll-snap-align: center; font-size: 0.92rem; color: var(--text-primary); white-space: nowrap; padding: 0 0.2rem; text-transform: capitalize; transform-origin: center center; will-change: transform, opacity; }
        .wheel-pad { height: 57px; }
        .wheel-sep { display: flex; align-items: center; justify-content: center; width: 10px; font-size: 1.1rem; color: var(--text-secondary); z-index: 2; }
        /* Ocultar el tag/badge de las tarjetas de experiencia (Smart/Nuevo/Cementerio/etc.) */
        .project-badge { display: none !important; }
        /* Ocultar el tag de categoría arriba del título dentro del modal de experiencia */
        #project-detail .detail-badge { display: none !important; }
        /* Banner promocional de planes (carrusel, inicio) */
        .apps-precio-cartel { display: block; width: -moz-fit-content; width: fit-content; max-width: calc(100% - 2rem); margin: 1.1rem auto 0; padding: 0.55rem 1.2rem; background: rgba(152, 125, 95, 0.12); border: 1px solid rgba(152, 125, 95, 0.42); color: var(--text-secondary); border-radius: var(--radius-md); font-family: var(--font-display); font-size: 1.02rem; font-weight: 400; text-align: center; line-height: 1.35; }
        .apps-precio-cartel--conboton { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; }
        @media (max-width: 768px) { .apps-precio-cartel--conboton { flex-direction: column; text-align: center; } }
        .apps-precio-cartel .apps-g { color: var(--accent); font-weight: 600; }
        .apps-precio-cartel strong { color: var(--accent); font-weight: 800; }
        .apps-precio-cartel .apps-precio-nota { font-weight: 400; font-size: 0.86em; opacity: 0.85; }
        .apps-precio-cartel.apps-precio-cartel--garantia { margin-top: 0.55rem; }
        @media (max-width: 768px) { .apps-garantia-rest { display: block; } }
        @media (max-width: 768px) { .apps-precio-cartel { font-size: 0.85rem; padding: 0.5rem 1rem; } .apps-precio-cartel .apps-precio-nota { display: block; } }
        @media (max-width: 768px) { #planes-page .pricing-otros-planes { font-size: 0.85rem; padding: 0.5rem 1rem; } }
                .esencial-banner {
            position: relative;
            max-width: 720px;
            margin: 2.5rem auto 0;
            text-align: left;
            padding: 1.5rem 1.75rem;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(152, 125, 95, 0.12), rgba(152, 125, 95, 0.03));
            border: 1px solid rgba(152, 125, 95, 0.35);
        }
        .plan-banner-viewport {
            position: relative;
            display: grid;
        }
        .plan-banner-slide {
            grid-area: 1 / 1;
            align-self: start;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            flex-wrap: wrap;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.9s ease, visibility 0s linear 0.9s;
        }
        .plan-banner-slide.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity 0.9s ease, visibility 0s linear 0s;
        }
        .esencial-banner-content {
            flex: 1;
            min-width: 240px;
        }
        .esencial-banner-badge {
            display: block;
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 0.1rem;
        }
        /* color de "Plan"/nombre ahora lo maneja .sh-word.negra/.dorada, ver index.css */
        .esencial-banner-title {
            font-size: 0.9rem;
            font-weight: 400;
            color: #888;
            line-height: 1.3;
            margin-bottom: 0.6rem;
        }
        .esencial-banner .esencial-banner-text {
            font-size: 0.72rem;
            color: #888;
            line-height: 1.4;
            margin: 0;
            max-width: none;
        }
        .esencial-banner-price {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;
            flex-shrink: 0;
        }
        .esencial-banner-cta {
            margin-top: 0.75rem;
            padding: 0.45rem 1.1rem;
            background: transparent;
            border: 1px solid rgba(152, 125, 95, 0.5);
            color: var(--accent-dark);
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }
        .esencial-banner-cta:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .esencial-banner-price-from {
            font-size: 0.8rem;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0;
        }
        .esencial-banner-price-amount {
            font-family: var(--font-display);
            font-size: 3.5rem;
            font-weight: 600;
            color: #8B7257;
            line-height: 1;
            margin-top: -0.6rem;
            /* La display trae cifras de estilo antiguo (el 4 baja de la linea base y
               el 8 no): lining-nums las iguala en altura; tabular-nums mantiene
               el ancho parejo. */
            font-variant-numeric: lining-nums tabular-nums;
            font-feature-settings: "lnum" 1, "tnum" 1;
        }
        .banner-currency {
            font-size: 0.4em;
            font-weight: 500;
            vertical-align: baseline;
            margin-right: 0.04em;
        }
        .plan-banner-dots {
            display: flex;
            gap: 1.1rem;
            justify-content: center;
            margin-top: 1.1rem;
        }
        .plan-banner-dot {
            position: relative;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: none;
            background: rgba(152, 125, 95, 0.3);
            cursor: pointer;
            padding: 0;
            transition: all 0.3s ease;
        }
        .plan-banner-dot::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 44px; height: 44px;
        }
        .plan-banner-dot.active {
            background: #8B7257;
            width: 22px;
            border-radius: 4px;
        }
        @media (max-width: 600px) {
            .esencial-banner {
                text-align: center;
                padding: 1.5rem;
            }
            .plan-banner-viewport {
                min-height: 10rem;
            }
            .plan-banner-slide {
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
            }
            .esencial-banner-content {
                flex: none;
                min-width: 0;
            }
            .esencial-banner-price {
                align-items: center;
                margin-top: 0.85rem;
            }
        }
        /* Estilos de section-header para planes - centrado */
        #planes-page .pricing-section .section-header {
            text-align: center;
            margin-bottom: 2rem;
            padding: 0 0.5rem;
            display: block;
        }
        #planes-page .pricing-section .section-title-small {
            font-size: 0.8rem;
            font-weight: 600;
            color: #8B7257;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            line-height: 1.1;
            margin-bottom: 0;
        }
        #planes-page .pricing-section .section-header h2 {
            font-family: var(--font-display);
            font-size: 1.75rem;
            font-weight: 500;
            color: #1a1a1a;
            line-height: 1.05;
            margin-top: -0.2rem;
            margin-bottom: 0.25rem;
        }
        #planes-page .pricing-section .section-header p {
            font-size: 0.95rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }
        .plan-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            font-size: 0.75em;
            color: #fff;
            background: #8B7257;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            vertical-align: middle;
            margin-left: 0.5rem;
            font-style: normal;
            font-weight: 600;
        }
        .plan-info-icon:hover {
            background: #7e664c;
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(152, 125, 95, 0.4);
        }
        .pricing-tag-multimarca {
            font-size: 0.7rem;
            color: #8B7257;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 0.25rem;
            font-weight: 500;
        }
        #planes-page .pricing-features ul li {
            position: relative;
            justify-content: center;
            padding-left: 24px !important;
            padding-right: 24px !important;
        }
        /* Al centrar, el espacio reservado del check ya no hace falta como alineador:
           si quedara oculto pero ocupando lugar, correria el texto y no quedaria centrado. */
        #planes-page .pricing-features ul li > svg { display: none; }
        /* El ∞ ahora va dentro de .feature-icons (a la derecha del texto), no a la izquierda */
        #planes-page .feature-icons .feature-quantity {
            width: auto;
            height: auto;
            font-size: 1.15rem;
            line-height: 1;
            color: #8B7257;
            opacity: 0.85;
        }
        /* Tooltips de los iconos de los items de planes */
        .feat-ico {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .feat-ico::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: #fdfbf8;
            color: #7d6a52;
            border: 1px solid rgba(152, 125, 95, 0.55);
            font-family: var(--font-body);
            font-size: 0.72rem;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.01em;
            white-space: nowrap;
            padding: 0.38rem 0.6rem;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(152, 125, 95, 0.20);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
            z-index: 50;
        }
        .feat-ico::before {
            content: "";
            position: absolute;
            bottom: calc(100% + 2px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            border: 6px solid transparent;
            border-top-color: rgba(152, 125, 95, 0.55);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
            z-index: 50;
        }
        .feat-ico:hover::after, .feat-ico:hover::before {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        /* Memorial Live destacado en dorado dentro de la tarjeta del plan */
        #planes-page .pricing-features ul li .feature-destacado { color: var(--accent); font-weight: 600; }
        .feature-icons {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            margin-left: 0.5rem;
        }
        .feature-icons svg {
            width: 13px;
            height: 13px;
            color: #8B7257;
            opacity: 0.85;
        }
        /* El icono de SMS lleva la palabra adentro, asi que es apaisado y necesita
           mas ancho para que el texto se lea (misma altura que el resto). */
        .feature-icons .feat-ico--sms svg { width: 18.5px; }
        .service-info-icon {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            font-size: 0.55em;
            color: #8B7257;
            background: transparent;
            border: 1px solid #8B7257;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            font-style: normal;
            font-weight: 600;
            opacity: 0.6;
        }
        .service-info-icon:hover {
            opacity: 1;
            background: rgba(152, 125, 95, 0.15);
            transform: translateY(-50%) scale(1.1);
        }
        .plan-info-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        .plan-info-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .plan-info-modal {
            background: linear-gradient(145deg, #ffffff 0%, #faf9f7 100%);
            border-radius: 16px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            border: 1px solid rgba(152, 125, 95, 0.3);
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            transform: translateY(20px) scale(0.95);
            transition: all 0.3s ease;
        }
        .plan-info-overlay.active .plan-info-modal {
            transform: translateY(0) scale(1);
        }
        .plan-info-modal.dark {
            background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
            border: 1px solid rgba(152, 125, 95, 0.2);
            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        }
        .plan-info-modal.dark .plan-info-header {
            border-bottom-color: rgba(152, 125, 95, 0.15);
        }
        .plan-info-modal.dark .plan-info-title {
            color: #fff;
        }
        .plan-info-modal.dark .plan-info-close {
            color: rgba(255,255,255,0.5);
        }
        .plan-info-modal.dark .plan-info-close:hover {
            color: #8B7257;
            background: rgba(152, 125, 95, 0.1);
        }
        .plan-info-modal.dark .plan-info-content {
            color: rgba(255,255,255,0.85);
        }
        .plan-info-modal.dark .plan-info-highlight {
            color: #8B7257;
        }
        .plan-info-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(152, 125, 95, 0.25);
        }
        .plan-info-title {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .plan-info-badge {
            font-size: 0.65rem;
            padding: 0.3rem 0.7rem;
            border-radius: 20px;
            font-family: var(--font-body);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, #8B7257 0%, #7e664c 100%);
            color: #fff;
        }
        .plan-info-close {
            background: none;
            border: none;
            color: #8c8c8c;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.2s;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .plan-info-close:hover {
            color: #1a1a1a;
            background: rgba(0,0,0,0.05);
        }
        .plan-info-content {
            color: #5c5c5c;
            font-size: 0.95rem;
            line-height: 1.8;
        }
        .plan-info-highlight {
            color: #7e664c;
            font-weight: 600;
        }


        /* ===== Logo animado del header (glow + entrada + barrido, una sola vez) ===== */
        .header-logo-anim {
            --la-h: 60px;
            --la-w: calc(var(--la-h) * 4.2850);
            position: relative;
            display: block;
            height: var(--la-h);
            width: var(--la-w);
        }
        @media (max-width: 768px) { .header-logo-anim { --la-h: 44px; } }


        .header-logo-anim .logo-stage {
            position: relative;
            height: var(--la-h);
            width: var(--la-w);
            transform-origin: center center;
            animation: laFlyScale 4.0s linear 1 both paused,
                       laFlyFade  4.0s linear 1 both paused;
        }
        @keyframes laFlyScale {
            0%          { transform: scale(0.8); animation-timing-function: cubic-bezier(.17,.89,.32,1); }
            24.75%, 100% { transform: scale(1); }
        }
        @keyframes laFlyFade {
            0%          { opacity: 0; animation-timing-function: cubic-bezier(.3,.7,.4,1); }
            15.75%, 100% { opacity: 1; }
        }

        .header-logo-anim .logo-wipe {
            position: absolute; inset: 0;
            -webkit-mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,0) 72%);
                    mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,0) 72%);
            -webkit-mask-size: 200% 100%;  mask-size: 200% 100%;
            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
            animation: laWipeIn 4.0s linear 1 both paused;
        }
        @keyframes laWipeIn {
            0%          { -webkit-mask-position: 100% 0; mask-position: 100% 0;
                          animation-timing-function: cubic-bezier(.25,.75,.3,1); }
            37.5%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
        }

        .header-logo-anim .logo-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

        .header-logo-anim .logo-shine {
            -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0) 42%, #000 50%, rgba(0,0,0,0) 58%);
                    mask-image: linear-gradient(100deg, rgba(0,0,0,0) 42%, #000 50%, rgba(0,0,0,0) 58%);
            -webkit-mask-size: 300% 100%;  mask-size: 300% 100%;
            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
            opacity: 0;
            animation: laShineSweep 4.0s linear 1 both paused,
                       laShineFade  4.0s linear 1 both paused;
        }
        @keyframes laShineSweep {
            0%, 42.5%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
            85.0%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
        }
        @keyframes laShineFade {
            0%, 41.25%   { opacity: 0; }
            46.25%, 80.0% { opacity: 1; }
            86.25%, 100%  { opacity: 0; }
        }

        .header-logo-anim.ready .logo-stage,
        .header-logo-anim.ready .logo-wipe, .header-logo-anim.ready .logo-shine { animation-play-state: running; }

        /* Variante para el header de los modales (experiencias, etc.) */
        .header-logo-anim--detail { --la-h: 44px; }
        @media (max-width: 768px) { .header-logo-anim--detail { --la-h: 36px; } }

        /* Variante para el logo del footer */
        .header-logo-anim--footer { --la-h: 48px; }
        @media (max-width: 768px) { .header-logo-anim--footer { --la-h: 38px; } }

        /* Variante para el logo del menu mobile */
        .header-logo-anim--mobilemenu { --la-h: 34px; }
        @media (max-width: 380px) { .header-logo-anim--mobilemenu { --la-h: 30px; } }

        /* ===== CSS de las landings de plan (Lite / Lite+), reutilizado dentro del modal ===== */
#landing-modal-content .wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.75rem; }
#landing-modal-content a { text-decoration: none !important; color: inherit; }
#landing-modal-content a.lp-cta-btn { color: #fff !important; }


    /* ---------- Hero ---------- */
    .lp-hero {
        padding: 2.5rem 0 4rem;
    }
    .lp-hero-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 3.5rem;
        align-items: center;
    }
    .lp-eyebrow {
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #7d6a52;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .lp-hero h1 {
        font-family: var(--font-display);
        font-size: clamp(2.3rem, 4vw, 3.4rem);
        font-weight: 600;
        line-height: 1.12;
        margin-bottom: 1.15rem;
    }
    .lp-hero-desc {
        font-size: 1.08rem;
        color: #5c5c5c;
        max-width: 480px;
        margin-bottom: 2rem;
    }
    .lp-hero-price-row {
        display: flex;
        align-items: center;
        gap: 1.75rem;
        flex-wrap: wrap;
        margin-bottom: 1.75rem;
    }
    .lp-plan-name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; }
    .lp-price-inline { display: flex; align-items: baseline; gap: 0.4rem; }
    .lp-price-inline .amount { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; line-height: 1; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
    .lp-price-inline .cur { font-size: 0.7rem; font-weight: 700; color: #8c8c8c; align-self: flex-start; margin-top: 0.3rem; }
    .lp-price-inline .period { font-size: 0.85rem; color: #8c8c8c; max-width: 8.5rem; line-height: 1.25; }
    .lp-promo-tags { display: flex; flex-direction: column; gap: 0.5rem; }
    .lp-promo-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: rgba(152,125,95,0.12);
        color: #7d6a52;
        font-size: 0.8rem;
        font-weight: 700;
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
    }

    .lp-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        background: #8B7257;
        color: #fff;
        padding: 1rem 2.25rem;
        border-radius: 999px;
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 600;
        box-shadow: 0 8px 24px rgba(152,125,95,0.3);
        transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
    .lp-cta-btn:hover { background: #7d6a52; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(152,125,95,0.4); }
    .lp-cta-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
    .lp-cta-sub { font-size: 0.82rem; color: #8c8c8c; margin-top: 0.9rem; }

    .lp-hero-visual { position: relative; }
    .lp-hero-slideshow { position: relative; width: 100%; aspect-ratio: 4/3.1; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.14); }
    .lp-hero-slideshow img {
        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
        opacity: 0; transition: opacity 1s ease;
    }
    .lp-hero-slideshow img.active { opacity: 1; }
    .lp-hero-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
    .lp-hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: background 0.3s ease, width 0.3s ease; }
    .lp-hero-dots span.active { background: #fff; width: 20px; border-radius: 4px; }
    .lp-hero-badge {
        position: absolute;
        left: -1.25rem;
        bottom: -1.25rem;
        background: #fff;
        border-radius: 16px;
        padding: 1rem 1.35rem;
        box-shadow: 0 12px 32px rgba(0,0,0,0.12);
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }
    .lp-hero-badge-icon {
        width: 42px; height: 42px; border-radius: 50%;
        background: rgba(152,125,95,0.14);
        display: flex; align-items: center; justify-content: center;
        color: #7d6a52; flex: 0 0 auto;
    }
    .lp-hero-badge b { display: block; font-family: var(--font-display); font-size: 1.1rem; }
    .lp-hero-badge span { font-size: 0.78rem; color: #8c8c8c; }

    /* ---------- Barra de confianza ---------- */

    /* ---------- Features editoriales (imagen + texto alternado) ---------- */
    .lp-features { padding: 5rem 0; }
    .lp-features-head { text-align: center; max-width: 640px; margin: 0 auto 4rem; }
    .lp-section-title {
        font-family: var(--font-display);
        font-size: clamp(1.9rem, 3.2vw, 2.5rem);
        font-weight: 600;
        margin-bottom: 0.75rem;
    }
    .lp-section-sub { color: #5c5c5c; font-size: 1.02rem; }

    .lp-feature-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
        align-items: center;
        margin-bottom: 5rem;
    }
    .lp-feature-row:last-child { margin-bottom: 0; }
    .lp-feature-row.rev .lp-feature-media { order: 2; }
    .lp-feature-row.rev .lp-feature-copy { order: 1; }
    .lp-feature-media img {
        width: 100%;
        aspect-ratio: 6/4.6;
        object-fit: cover;
        border-radius: 24px;
        box-shadow: 0 16px 40px rgba(0,0,0,0.1);
    }
    .lp-feature-num {
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        color: #8B7257;
        letter-spacing: 0.08em;
        margin-bottom: 0.6rem;
    }
    .lp-feature-copy h3 {
        font-family: var(--font-display);
        font-size: 1.7rem;
        font-weight: 600;
        margin-bottom: 0.85rem;
        line-height: 1.2;
    }
    .lp-feature-copy p { color: #5c5c5c; font-size: 1.02rem; }
    .lp-feature-list { list-style: none; margin-top: 1.1rem; }
    .lp-feature-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: #5c5c5c; margin-bottom: 0.5rem; }
    .lp-feature-list svg { flex: 0 0 auto; margin-top: 3px; color: #8B7257; }

    /* ---------- Reseñas ---------- */
    .lp-reviews {
        padding: 5rem 0;
    }
    .lp-reviews-header { text-align: center; margin-bottom: 3rem; }
    .review-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
    .review-card {
        background: #f5f5f5;
        border: 1px solid #f0eeeb;
        border-radius: 16px;
        padding: 1.5rem 1.6rem;
    }
    .review-card-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.65rem; }
    .review-avatar {
        width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
    }
    .review-name { font-weight: 600; font-size: 0.94rem; color: #1a1a1a; }
    .review-stars { display: flex; gap: 2px; margin-bottom: 0.6rem; }
    .review-star { fill: #FBBC05; width: 15px; height: 15px; }
    .review-text { font-size: 0.88rem; color: #5c5c5c; line-height: 1.55; }

    /* ---------- CTA final ---------- */
    .lp-final-cta {
        text-align: center;
        padding: 5.5rem 1.75rem;
        max-width: 680px;
        margin: 0 auto;
    }
    .lp-final-cta h2 {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.4rem);
        font-weight: 600;
        margin-bottom: 0.85rem;
    }
    .lp-final-cta p { color: #5c5c5c; margin-bottom: 2rem; font-size: 1.05rem; }

    @media (max-width: 860px) {
        .lp-hero-grid { grid-template-columns: 1fr; }
        .lp-hero-visual { order: -1; }
        .lp-hero-badge { left: 1rem; bottom: -1rem; }
        .lp-feature-row, .lp-feature-row.rev { grid-template-columns: 1fr; gap: 1.5rem; }
        .lp-feature-row .lp-feature-media, .lp-feature-row.rev .lp-feature-media { order: 1; }
        .lp-feature-row .lp-feature-copy, .lp-feature-row.rev .lp-feature-copy { order: 2; }
        .review-grid { grid-template-columns: 1fr; }
    }

    

        /* ===== Pantalla de carga inicial ===== */
        #site-loader {
            position: fixed; inset: 0; z-index: 99999;
            display: flex; align-items: center; justify-content: center;
            background: radial-gradient(ellipse at center, #f9f7f3 0%, #EBE5DC 70%);
            transition: opacity 0.6s ease;
        }
        #site-loader.oculto { opacity: 0; pointer-events: none; }
        #site-loader.listo .ld-glow, #site-loader.listo .ld-fly,
        #site-loader.listo .draw-path, #site-loader.listo .logo-shine { animation-play-state: running; }
        html.cargando, body.cargando { overflow: hidden; }
        /* Las animaciones de entrada esperan igual que los brillos:
           si corren detras del loader, para cuando se ve el sitio ya terminaron. */
        body.cargando .animate-in { animation-play-state: paused; }

        #site-loader {
            /* Se controla por ANCHO (que es lo que puede desbordar) y de ahi sale
               la altura. Asi el logo nunca supera el ancho de la pantalla. */
            --ld-w: min(70vw, 88vh);
            --ld-h: calc(var(--ld-w) / 1.8163);
        }
        @media (max-width: 768px) { #site-loader { --ld-w: min(80vw, 50vh); } }
        @media (max-width: 380px) { #site-loader { --ld-w: min(84vw, 48vh); } }

        #site-loader .ld-glow {
            position: absolute;
            width: calc(var(--ld-w) * 1.1); height: calc(var(--ld-w) * 1.1);
            border-radius: 50%;
            background: radial-gradient(circle,
                rgba(152,125,95,0.20) 0%, rgba(152,125,95,0.10) 25%,
                rgba(80,88,107,0.05) 48%, rgba(80,88,107,0) 70%);
            opacity: 0;
            animation: ldGlow 3.1s ease-in-out 1 both paused;
        }
        @keyframes ldGlow {
            0%, 56.7% { opacity: 0; }
            70.0%     { opacity: 1; }
            86.8%     { opacity: 1; }
            90.1%, 100% { opacity: 0; }
        }

        #site-loader .ld-fly {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            transform-origin: center center;
            will-change: transform, opacity;
            animation: ldScale 3.1s linear 1 both paused, ldFade 3.1s linear 1 both paused;
        }
        #site-loader .ld-stage { position: relative; height: var(--ld-h); width: var(--ld-w); }
        @keyframes ldScale {
            0%      { transform: scale(1.9); animation-timing-function: cubic-bezier(.17,.89,.32,1); }
            18.3%   { transform: scale(1); }
            82.6%   { transform: scale(1); animation-timing-function: cubic-bezier(.4,0,.7,.5); }
            100%    { transform: scale(0.6); }
        }
        @keyframes ldFade {
            0%      { opacity: 0; animation-timing-function: cubic-bezier(.3,.7,.4,1); }
            11.7%   { opacity: 1; }
            82.6%   { opacity: 1; }
            90.1%, 100% { opacity: 0; }
        }

        #site-loader .logo-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

        #site-loader .draw-path {
            fill-opacity: 0;
            stroke-width: 0;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: var(--len);
            animation: ldDraw 3.1s linear 1 both paused;
        }
        #site-loader .gray-path { fill: #50586B; stroke: #50586B; }
        #site-loader .gold-path { fill: #80664A; stroke: #80664A; }
        @keyframes ldDraw {
            0%    { stroke-dashoffset: var(--len); fill-opacity: 0; stroke-width: 1.4;
                    animation-timing-function: cubic-bezier(.15,.85,.3,1); }
            18.3% { fill-opacity: 0; }
            25.0% { stroke-dashoffset: 0; stroke-width: 1.4; }
            28.3% { fill-opacity: 1; }
            30.0% { stroke-dashoffset: 0; stroke-width: 0; }
            100%  { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
        }

        #site-loader .logo-shine .draw-path { animation: none; fill-opacity: 1; stroke-width: 0; }
        #site-loader .logo-shine {
            -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0) 42%, #000 50%, rgba(0,0,0,0) 58%);
                    mask-image: linear-gradient(100deg, rgba(0,0,0,0) 42%, #000 50%, rgba(0,0,0,0) 58%);
            -webkit-mask-size: 300% 100%;   mask-size: 300% 100%;
            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
            opacity: 0;
            animation: ldSweep 3.1s linear 1 both paused, ldShineFade 3.1s linear 1 both paused;
        }
        @keyframes ldSweep {
            0%, 30.0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
            72.0%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
        }
        @keyframes ldShineFade {
            0%, 30.0%    { opacity: 0; }
            36.0%, 68.0% { opacity: 1; }
            72.0%, 100%  { opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            #site-loader .ld-glow, #site-loader .ld-fly,
            #site-loader .draw-path, #site-loader .logo-shine { animation: none; }
            #site-loader .draw-path { fill-opacity: 1; stroke-width: 0; }
        }
    

/* Contenido solo para lectores de pantalla (la nube animada del hero se oculta
   del árbol de accesibilidad porque su contraste cambia con la animación). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------------------
   Contraste (WCAG AA 4.5:1 para texto normal)
   El dorado de marca pasó de #987D5F a #8B7257: sobre blanco daba 3.86:1 y
   ahora da 4.52:1. El cambio es de un 7% de luminosidad, imperceptible al ojo.
   Donde el fondo no es blanco hace falta un punto más:
--------------------------------------------------------------------------- */

/* Panel beige #eae7e3: #8B7257 se queda en 3.67:1, #7A644C llega a 4.54:1 */
.apps-precio-cartel .apps-g,
.pricing-lite-ver-plan {
    color: #7A644C;
}

/* Nube del hero sobre #f5f5f5, texto de 16.8px: 4.15:1 -> 5.13:1 */
.hero-cloud .cloud-chip.key {
    color: #7A644C;
}