/* ============================================================================= DKT Store — Landing ANDALAN · INMERSIVA full-screen (Fase 2 · DEC-W070) ----------------------------------------------------------------------------- Reescritura v0.9.x (Opción A · aprobada por Ricardo 2026-06-30): sustituye el primer pase editorial PREP (v0.8.14) por la dirección inmersiva de los 10 mockups aprobados (andalan-sec01..10). MISMA arquitectura que el landing Prudence ya en producción: 10 paneles 100svh con scroll-snap magnético, un solo menú fijo (.dktbar), header/footer globales suprimidos por CSS scopeado. SCAFFOLD (este commit): andamiaje común (suppression + snap + tokens + colores de mundo por sección + menú + panel base + responsive + reduced-motion) y estilos de los stubs de sección. El CSS fino de cada sección se añade al PORTAR su mockup (commits granulares posteriores). AISLAMIENTO: todo bajo body.dkt-brand-andalan (se encola SOLO en la categoría diu-andalan, functions.php). No toca Prudence, el PREP compartido ni el core. Reusa del PREP: tokens --la-* y --dkt-* (landing-base.css + tokens.css), contrato AA de --accent/--la-accent-ink, fuentes (fonts-andalan.css), y el reveal .dkt-reveal/.is-visible (landing.js, ya encolado). ============================================================================= */ /* ============================================================================= 1 · SUPRESIÓN DEL CHROME GLOBAL (espejo de landing-prudence.css §13/§13.5) El header/footer del sitio se ocultan por CSS scopeado — NO se edita inc/header.php / inc/footer.php. La landing trae su propio menú y su footer. ============================================================================= */ body.dkt-brand-andalan .dkt-header, /* header CUSTOM del sitio (inc/header.php) — el que se colaba */ body.dkt-brand-andalan .dkt-announcement-bar, /* v8.1 §1.2 CAUSA RAÍZ: la barra de anuncios del plugin (40px, wp_body_open) empujaba TODO — hero desbordado, cue fuera, anclas corridas. Espejo Prudence. */ body.dkt-brand-andalan #masthead, body.dkt-brand-andalan .site-header, body.dkt-brand-andalan .ast-above-header-wrap, body.dkt-brand-andalan .ast-below-header-wrap { display: none !important; } body.dkt-brand-andalan .dkt-footer { display: none !important; } /* footer DKT propio del tema */ body.dkt-brand-andalan #page, body.dkt-brand-andalan .ast-container, body.dkt-brand-andalan .site-content { padding-top: 0 !important; } /* .ast-container resuelve a flex en Astra → el bloque .dkt-al no se estira; forzamos block. */ body.dkt-brand-andalan .ast-container { display: block !important; max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================================= 2 · MOTOR DE SCROLL v8.1 (brief v8.1 §1.1 · CAUSA RAÍZ verificada en vivo) Prudence usa `y mandatory` (computed en vivo) y por eso SU imán funciona; Andalan quedó en `proximity` → imán imperceptible. v8.1: MANDATORY con el mismo scope. Es seguro porque los paneles miden el snapport exacto (v8) y las secciones más altas que el viewport (#contacto con su footer, #cual en pantallas bajas) permiten scroll libre interno por spec (área de snap mayor que el snapport — Prudence funciona igual). El gate ya NO es punto de snap (v8.1 §4): se atraviesa como transición. En ≤820px se relaja a `proximity` (espejo Prudence línea 723: los mundos apilados crecen más que el viewport y mandatory se siente pegajoso). scroll-snap-stop:always en el panel base evita que un flick fuerte se salte mundos (motor del mockup aprobado). :has() acota a esta landing (sin :has → scroll normal, fail-safe). SIN scroll-padding-top: el offset del menú lo da scroll-margin-top del panel. Reduced-motion: §8 apaga snap y smooth (regla existente). ============================================================================= */ html:has(body.dkt-brand-andalan) { scroll-snap-type: y mandatory; scroll-behavior: smooth; } /* v8.5 §4 — EL IMÁN TERMINA EN MITOS: el JS del motor añade .dkt-al-nosnap al apenas bottom(#respaldo) baja del 92% del viewport (salir de Mitos mata el imán ANTES de que jale de vuelta); se quita al volver a ≥98%. El :has() en el selector es NECESARIO por especificidad: html.dkt-al-nosnap a secas (0,1,1) perdería contra el mandatory de arriba (0,1,2). */ html.dkt-al-nosnap:has(body.dkt-brand-andalan) { scroll-snap-type: none; } @media (max-width: 820px) { html:has(body.dkt-brand-andalan) { scroll-snap-type: y proximity; } } /* ============================================================================= 3 · TOKENS LOCALES + OFFSET DEL MENÚ Mundo Andalan maestro (design doc §1). Reusa el contrato AA del PREP: --accent (#E60073, SOLO fondo de botón) y --la-accent-ink (#C20063, texto). ============================================================================= */ body.dkt-brand-andalan { --al-off: 76px; /* alto del menú fijo (espejo del .dkt-header del Home, v6 §2) → offset de snap + descuento de panel */ --al-ease: cubic-bezier(.16, 1, .3, 1); /* §B2: duplicado a nivel body (el original vive en .dkt-landing--andalan) para reveal/hero/hover fuera de ese scope */ } body.dkt-brand-andalan.admin-bar { --al-off: 108px; } /* + barra admin 32px */ @media screen and (max-width: 820px) { body.dkt-brand-andalan { --al-off: 64px; } /* menú móvil 64px (v6 §2) */ body.dkt-brand-andalan.admin-bar { --al-off: 96px; } /* 64 + admin 32 (franja 783-820) */ } @media screen and (max-width: 782px) { body.dkt-brand-andalan.admin-bar { --al-off: 110px; } /* 64 + barra admin móvil 46px */ } body.dkt-brand-andalan .dkt-landing--andalan { --menu-h: 76px; /* espejo del alto del .dkt-header del Home (v6 §2) */ --al-fucsia: var(--accent, #E60073); /* fucsia líder (fondo de botón / menú) */ --al-fucsia-ink: var(--la-accent-ink, #C20063); /* fucsia AA para texto/enlaces sobre claro */ --al-vino: var(--dkt-vino, #5F0E39); --al-paper: var(--dkt-paper, #FBF4F2); --al-cream: var(--dkt-cream, #F4EBE2); --al-ink: var(--dkt-ink, #33271d); --al-muted: var(--dkt-muted, #7a6a5b); --al-display: var(--la-display, 'Fraunces', Georgia, serif); /* serif editorial (itálica = gesto) */ --al-geo: 'Poppins', system-ui, sans-serif; /* títulos / UI / números */ --al-body: 'Inter', system-ui, sans-serif; /* texto corrido */ --al-magenta: #A50050; /* magenta AA: eyebrows/sublíneas sobre claro */ --al-ease: cubic-bezier(.16, 1, .3, 1); --al-line: var(--dkt-line, #ECD9DE); --al-fs-h2: clamp(1.3rem, 2.4vw, 2rem); /* v6 §4: un punto menos, aire vertical */ --al-sh-1: 0 1px 2px rgba(95, 14, 57, .07); --al-sh-2: 0 14px 36px -14px rgba(95, 14, 57, .28); --al-sh-3: 0 30px 70px -18px rgba(95, 14, 57, .34); } @media (max-width: 820px) { body.dkt-brand-andalan .dkt-landing--andalan { --menu-h: 64px; } } /* --- Colores de "mundo" por LÍNEA, scopeados a la SECCIÓN (design doc §1) ------ --w = vivo (DECORATIVO: barras, glifos, manchas, olas) · --w-ink = oscurecido (texto/botón) · --w-deep = sombra · --w-tint = tinte claro de fondo. Scopeados por id de sección → cero colisión entre mundos (Regla de namespacing). */ body.dkt-brand-andalan #classic { --w: #2E86C9; --w-ink: #155E96; --w-deep: #103F66; --w-tint: #EAF4FC; /* export del editor de Ricardo (2026-07-27): info .78 · tarjeta .6 · empaque .6 */ --al-c1: .78fr; --al-c2: .6fr; --al-c3: .6fr; --al-gapcol: 20px; --al-padv: 30px; --al-packh: 650px; --al-cardw: 330px; --al-vith: 250px; --al-tith: 4.5rem; --al-gapbul: 20px; --al-gapli: 5px; } body.dkt-brand-andalan #comfort { --w: #E0773A; --w-ink: #B5571E; --w-deep: #7E3D12; --w-tint: #FBEFE6; --al-tith: 4rem; } body.dkt-brand-andalan #silverflex { --w: #788490; --w-ink: #4E5862; --w-deep: #333A42; --w-tint: #EFF2F4; } body.dkt-brand-andalan #copperflex { --w: #B5703F; --w-ink: #8A4F26; --w-deep: #5E3415; --w-tint: #F8EEE5; } /* ============================================================================= 4 · CONTENEDOR + PANEL BASE ============================================================================= */ /* v8.2 §1 — CAUSA RAÍZ REAL del imán (verificada en vivo por Cowork): overflow-x:hidden convertía a .dkt-al en SCROLL CONTAINER → capturaba los snap-areas de los paneles y el scroll-snap-type del html nunca les aplicó (ni proximity v6-v8 ni mandatory v8.1). `clip` recorta SIN crear scroll container. Se declara hidden ANTES como fallback: un navegador viejo que no entienda clip conserva hidden (status quo) en vez de caer a visible. */ body.dkt-brand-andalan .dkt-al { width: 100%; background: var(--al-paper); color: var(--al-ink); font-family: var(--al-geo); overflow-x: hidden; overflow-x: clip; } body.dkt-brand-andalan .dkt-al a { text-decoration: none; color: inherit; } body.dkt-brand-andalan .dkt-al *, body.dkt-brand-andalan .dkt-al *::before, body.dkt-brand-andalan .dkt-al *::after { box-sizing: border-box; } /* Panel base v8.1: mide el área de snap (100svh − offset), TODAS las secciones declaran align start (imán espejo Prudence, ahora mandatory) y snap-stop always (cada gesto aterriza en la siguiente sección — sensación Keynote, del motor del mockup aprobado; los saltos de menú van por JS, no les afecta). El Hero llena 100svh (el menú lo solapa). */ body.dkt-brand-andalan .dkt-al-panel { position: relative; min-height: calc(100svh - var(--al-off)); scroll-margin-top: var(--al-off); scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; } body.dkt-brand-andalan #hero { min-height: 100svh; scroll-margin-top: 0; } /* v7 §4.5: logueado, la barra admin empujaba el cue "DESLIZA ↓" bajo el fold (hero 100svh + 32/46px de barra) → se descuenta para que el cue quede SIEMPRE dentro del primer screen, también en la revisión con sesión abierta. */ body.dkt-brand-andalan.admin-bar #hero { min-height: calc(100svh - 32px); } @media screen and (max-width: 782px) { body.dkt-brand-andalan.admin-bar #hero { min-height: calc(100svh - 46px); } } /* ── MOTOR DE DIAPOSITIVA POR PANEL (brief v6 §1 · reemplaza dkt-reveal aquí) ── Root cause verificado en vivo: 41/69 .dkt-reveal nunca disparaban (IO por elemento + unobserve + snap) → pantallas EN BLANCO entre mundos. La landing deja de usar ese contrato (landing.js NO se toca; lo usan otras vistas). Nuevo contrato: el JS del template (IO por PANEL, threshold .35 + sweep inicial + watchdog persistente + :target) añade .is-active al panel — los hijos entran escalonados estilo Keynote SOLO con CSS (opacity/transform). FAIL-VISIBLE triple: (a) el estado oculto existe SOLO bajo html.dkt-js; (b) :target sin .is-active → visible; (c) reduced-motion → todo visible. .is-active NUNCA se remueve (anima una vez por visita). Las animaciones usan fill-mode BACKWARDS (no forwards): al terminar vuelven al estilo natural → los hover-lift (transition) siguen funcionando. */ @keyframes dkt-al-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } @keyframes dkt-al-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes dkt-al-in-fade { from { opacity: 0; } to { opacity: 1; } } /* v7 §1.2 — piezas de la entrada TEATRAL de los mundos (solo transform/opacity → GPU): */ @keyframes dkt-al-in-title { from { opacity: 0; transform: translateX(-32px) rotate(-2deg); } to { opacity: 1; transform: none; } } @keyframes dkt-al-in-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes dkt-al-in-pack { from { opacity: 0; transform: translateY(48px) scale(.94) rotate(1.5deg); } to { opacity: 1; transform: none; } } @keyframes dkt-al-in-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } } /* (v8.3 §3: keyframe dkt-al-wave-in retirado — la ola ya no se anima.) */ /* Estado oculto (solo con JS y solo hasta que el panel se activa). v7: + la ola de los mundos (barrido §1.2) y garantías/pagos/footer (§1.3). */ html.dkt-js body.dkt-brand-andalan .dkt-al-world:not(.is-active) .b, html.dkt-js body.dkt-brand-andalan .dkt-al-world:not(.is-active) .dkt-al-wbullets li, html.dkt-js body.dkt-brand-andalan #como-funciona:not(.is-active) .dkt-al-howto__wrap, html.dkt-js body.dkt-brand-andalan #beneficios:not(.is-active) .dkt-al-benefits__head, html.dkt-js body.dkt-brand-andalan #cual:not(.is-active) .dkt-al-cmp-head, html.dkt-js body.dkt-brand-andalan #cual:not(.is-active) .dkt-al-cards, html.dkt-js body.dkt-brand-andalan #cual:not(.is-active) .dkt-al-cmp-note, html.dkt-js body.dkt-brand-andalan #respaldo:not(.is-active) .dkt-al-combo, html.dkt-js body.dkt-brand-andalan #contacto:not(.is-active) .dkt-al-cta, html.dkt-js body.dkt-brand-andalan #contacto:not(.is-active) .dkt-al-guar, html.dkt-js body.dkt-brand-andalan #contacto:not(.is-active) .dkt-al-pay, html.dkt-js body.dkt-brand-andalan #contacto:not(.is-active) .dkt-al-foot { opacity: 0; } /* Fail-visible (b): salto por ancla con el motor caído → :target pinta igual. */ html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .b, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-wbullets li, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-howto__wrap, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-benefits__head, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-cmp-head, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-cards, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-cmp-note, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-combo, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-cta, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-guar, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-pay, html.dkt-js body.dkt-brand-andalan .dkt-al-panel:target:not(.is-active) .dkt-al-foot { opacity: 1; } /* G2 · entrada TEATRAL del mundo activo (v7 §1.2 · v8.3 §3): la OLA ya NO se anima ni se oculta — fondo+ola pintan al instante al asentar el snap (adiós pantalla vacía) y la coreografía anima SOLO el contenido, con los delays comprimidos −40% (duraciones intactas). Solo opacity/transform → GPU. */ body.dkt-brand-andalan .dkt-al-world.is-active .b-eyebrow { animation: dkt-al-in-title .65s var(--al-ease) backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-title { animation: dkt-al-in-title .65s var(--al-ease) .04s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-tagline { animation: dkt-al-in-rise .55s var(--al-ease) .10s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-silhouette { animation: dkt-al-in-fade .8s var(--al-ease) .15s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-seal { animation: dkt-al-in-pop .55s cubic-bezier(.34, 1.56, .64, 1) .4s backwards; } /* v9: el empaque protagonista entra como pack (subida+escala) y las tarjetas de compra suben en cascada; el chip de línea cierra la coreografía. */ body.dkt-brand-andalan .dkt-al-world.is-active .b-pack { animation: dkt-al-in-pack .8s var(--al-ease) .09s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-buycard1 { animation: dkt-al-in-rise .6s var(--al-ease) .26s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-buycard2 { animation: dkt-al-in-rise .6s var(--al-ease) .36s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-linechip { animation: dkt-al-in-rise .55s var(--al-ease) .5s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li { animation: dkt-al-in-rise .45s var(--al-ease) backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(1) { animation-delay: .14s; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(2) { animation-delay: .20s; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(3) { animation-delay: .26s; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(4) { animation-delay: .32s; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(5) { animation-delay: .38s; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(6) { animation-delay: .44s; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(7) { animation-delay: .50s; } body.dkt-brand-andalan .dkt-al-world.is-active .dkt-al-wbullets li:nth-child(8) { animation-delay: .56s; } /* G1/G3 · entrada por sección (v7 §1.3: G3 también respira — stagger corto entre bloques internos; el hidden-state sigue en el contenedor y los hijos animan con fill BACKWARDS al activarse el panel). */ body.dkt-brand-andalan #como-funciona.is-active .dkt-al-howto__wrap, body.dkt-brand-andalan #beneficios.is-active .dkt-al-benefits__head { animation: dkt-al-in-up .7s var(--al-ease) backwards; } body.dkt-brand-andalan #cual.is-active .dkt-al-cmp-head { animation: dkt-al-in-up .6s var(--al-ease) backwards; } /* v8.1 extra: entrada ESCALONADA de las 4 tarjetas (delays del mockup .c1-.c4; el contenedor solo funde — el movimiento lo ponen las tarjetas). GPU-only. */ body.dkt-brand-andalan #cual.is-active .dkt-al-cards { animation: dkt-al-in-fade .5s var(--al-ease) backwards; } body.dkt-brand-andalan #cual.is-active .dkt-al-ccard { animation: dkt-al-in-up .6s var(--al-ease) .05s backwards; } body.dkt-brand-andalan #cual.is-active .dkt-al-ccard:nth-child(2) { animation-delay: .12s; } body.dkt-brand-andalan #cual.is-active .dkt-al-ccard:nth-child(3) { animation-delay: .19s; } body.dkt-brand-andalan #cual.is-active .dkt-al-ccard:nth-child(4) { animation-delay: .26s; } body.dkt-brand-andalan #cual.is-active .dkt-al-cmp-note { animation: dkt-al-in-fade .6s var(--al-ease) .34s backwards; } body.dkt-brand-andalan #respaldo.is-active .col-l { animation: dkt-al-in-up .65s var(--al-ease) backwards; } body.dkt-brand-andalan #respaldo.is-active .col-r { animation: dkt-al-in-up .65s var(--al-ease) .16s backwards; } body.dkt-brand-andalan #contacto.is-active .dkt-al-cta { animation: dkt-al-in-up .7s var(--al-ease) backwards; } body.dkt-brand-andalan #contacto.is-active .dkt-al-guar { animation: dkt-al-in-up .6s var(--al-ease) .18s backwards; } body.dkt-brand-andalan #contacto.is-active .dkt-al-pay { animation: dkt-al-in-up .6s var(--al-ease) .3s backwards; } body.dkt-brand-andalan #contacto.is-active .dkt-al-foot { animation: dkt-al-in-up .6s var(--al-ease) .42s backwards; } /* Wrap interno reutilizable (ancho de lectura centrado). */ body.dkt-brand-andalan .dkt-al-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); width: 100%; } /* ============================================================================= 5 · MENÚ ÚNICO (.dktbar) — fijo, fucsia, logos blancos + nav + iconos Marcado canónico del preview integrado (andalan-LANDING-preview.html). ============================================================================= */ body.dkt-brand-andalan .dkt-al-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--menu-h); background: var(--al-fucsia); box-shadow: 0 2px 14px -6px rgba(95, 14, 57, .5); } body.dkt-brand-andalan.admin-bar .dkt-al-menu { top: 32px; } @media screen and (max-width: 782px) { body.dkt-brand-andalan.admin-bar .dkt-al-menu { top: 46px; } } body.dkt-brand-andalan .dkt-al-menu__wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; height: 100%; } /* v6 §2: el lockup DKT va al HOME (como Prudence) y el logo Andalan a #hero; SIN separador "›". Tamaño/posición del DKT espejo del Home (barra 76px). */ body.dkt-brand-andalan .dkt-al-menu__brand { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); font-weight: 600; font-size: .95rem; color: #fff; } body.dkt-brand-andalan .dkt-al-menu__brandlink { display: inline-flex; align-items: center; } body.dkt-brand-andalan .dkt-al-menu__dkt { height: 65px; width: auto; } /* v8 §3.1: +25% (52→65) — más presencia en la barra de 76px */ /* v8 §3.2: +26% (27→34) y ALZA ÓPTICA — la hoja del logo deja las letras más abajo dentro de la caja del SVG; el translateY compensa para que el wordmark alinee por las LETRAS con el lockup DKT (transform: no mueve layout). */ body.dkt-brand-andalan .dkt-al-menu__ala { height: 34px; width: auto; transform: translateY(-3px); } @media screen and (max-width: 820px) { body.dkt-brand-andalan .dkt-al-menu__dkt { height: 54px; } /* barra móvil 64px */ body.dkt-brand-andalan .dkt-al-menu__ala { height: 28px; transform: translateY(-2px); } } body.dkt-brand-andalan .dkt-al-menu__nav { display: flex; align-items: center; gap: 3px; margin-left: auto; } body.dkt-brand-andalan .dkt-al-menu__nav > a { font-weight: 500; font-size: .86rem; color: #fff; padding: 8px 13px; border-radius: 999px; transition: background .18s, color .18s; } body.dkt-brand-andalan .dkt-al-menu__nav > a:hover { background: #fff; color: var(--al-fucsia-ink); } body.dkt-brand-andalan .dkt-al-menu__nav > a.is-active { background: rgba(255, 255, 255, .18); } body.dkt-brand-andalan .dkt-al-menu__icons { display: flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .35); } body.dkt-brand-andalan .dkt-al-menu__ic { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; transition: background .15s; } /* !important: Astra pintaba el enlace rgb(42,26,36) (v6 §2.4) */ body.dkt-brand-andalan .dkt-al-menu__ic:hover { background: rgba(255, 255, 255, .16); } body.dkt-brand-andalan .dkt-al-menu__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Badge del carrito: contador REAL vía fragmento WC span.dkt-cart-count (inc/header.php). Se auto-oculta en 0 (atributo [hidden]); el AJAX de WC lo actualiza sin recargar. */ body.dkt-brand-andalan .dkt-al-menu__cart .dkt-cart-count { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; background: #fff; color: var(--al-fucsia-ink); font-weight: 700; font-size: .6rem; border-radius: 999px; display: grid; place-items: center; line-height: 1; } body.dkt-brand-andalan .dkt-al-menu__cart .dkt-cart-count[hidden] { display: none; } /* ── §B3.1 · HAMBURGUESA MÓVIL (≤900px) ────────────────────────────────────── Botón 44×44 táctil a la derecha del wrap (junto a los iconos, que NUNCA se ocultan — comercio) + panel full-width fucsia bajo la barra. Fail-safe sin JS: el botón solo aparece bajo html.dkt-js (clasificadora anti-FOUC del PREP); sin JS no hay botón muerto. En >900px ambos quedan display:none. */ body.dkt-brand-andalan .dkt-al-menu__burger { display: none; flex: none; width: 44px; height: 44px; margin-left: 6px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: background .18s; } body.dkt-brand-andalan .dkt-al-menu__burger:hover { background: rgba(255, 255, 255, .16); } body.dkt-brand-andalan .dkt-al-menu__burger:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } body.dkt-brand-andalan .dkt-al-menu__burger .bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s var(--al-ease), opacity .18s; } body.dkt-brand-andalan .dkt-al-menu__burger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.dkt-brand-andalan .dkt-al-menu__burger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; } body.dkt-brand-andalan .dkt-al-menu__burger[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.dkt-brand-andalan .dkt-al-menu__mnav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--al-fucsia); border-top: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 22px 34px -20px rgba(95, 14, 57, .65); flex-direction: column; padding: 6px 0 10px; max-height: calc(100svh - var(--menu-h, 76px)); overflow-y: auto; } body.dkt-brand-andalan .dkt-al-menu__mnav a { display: flex; align-items: center; min-height: 44px; padding: 4px clamp(20px, 6vw, 32px); color: #fff; font-family: var(--al-geo); font-weight: 600; font-size: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); text-decoration: none; } body.dkt-brand-andalan .dkt-al-menu__mnav a:last-child { border-bottom: 0; } body.dkt-brand-andalan .dkt-al-menu__mnav a:hover { background: rgba(255, 255, 255, .14); } body.dkt-brand-andalan .dkt-al-menu__mnav a.is-active { background: rgba(255, 255, 255, .18); } body.dkt-brand-andalan .dkt-al-menu__mnav a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; } /* ============================================================================= 6 · CSS POR SECCIÓN — se añade debajo al portar cada mockup (sec01..10). Cada bloque scopeado a body.dkt-brand-andalan #. Los IDs posicionales del mockup se convierten en clases scopeadas por sección (p. ej. #classic .box1). ============================================================================= */ /* (Los bloques de sección se insertan aquí, en orden de sección.) */ /* ───────────── Átomos compartidos (eyebrow · botones · cue · subrayado) ───────────── */ body.dkt-brand-andalan .dkt-al-eyebrow { font-family: var(--al-geo); font-weight: 600; font-size: clamp(.74rem, 1.1vw, .86rem); letter-spacing: .16em; text-transform: uppercase; color: var(--al-magenta); display: inline-block; } body.dkt-brand-andalan .dkt-al-eyebrow--light { color: #fff; } /* v6 §5.1: global (antes solo #como-funciona) */ body.dkt-brand-andalan .dkt-al-uline { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; text-decoration-color: currentColor; } body.dkt-brand-andalan .dkt-al-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--al-geo); font-weight: 600; font-size: .98rem; padding: clamp(11px, 1.8vh, 15px) 28px; border-radius: 999px; border: 0; cursor: pointer; text-align: center; transition: transform .2s var(--al-ease), box-shadow .2s, background .2s, color .2s; } body.dkt-brand-andalan .dkt-al-btn__ic { width: 1.2em; height: 1.2em; flex: none; } body.dkt-brand-andalan .dkt-al-btn--primary { background: var(--al-fucsia); color: #fff !important; box-shadow: 0 10px 30px -10px rgba(95, 14, 57, .20); } /* !important: Astra tenia el texto no-blanco (v6 §3.6) */ body.dkt-brand-andalan .dkt-al-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 30px 70px -18px rgba(95, 14, 57, .30); background: var(--al-magenta); } body.dkt-brand-andalan .dkt-al-btn--out { background: transparent; color: var(--al-magenta) !important; border: 1.6px solid var(--al-magenta); } /* v7 §4.2: !important — Astra pintaba el enlace NEGRO (mismo fix que --primary); texto+borde #A50050 */ body.dkt-brand-andalan .dkt-al-btn--out:hover { background: var(--al-magenta); color: #fff !important; transform: translateY(-2px); } /* v7 §4.5: el cue vive a ~16px del borde inferior del PRIMER screen (el hero mide exactamente el viewport — con admin-bar se descuenta, regla en §4). */ body.dkt-brand-andalan .dkt-al-cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); color: var(--al-fucsia-ink); font-family: var(--al-geo); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .7; z-index: 4; animation: dkt-al-bob 1.8s var(--al-ease) infinite; } @keyframes dkt-al-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* ───────────── SECCIÓN 1 · HERO (#hero) — v8 §2 FULL-BLEED espejo Prudence ───────────── Recomposición (decisión Ricardo 08-jul): el placeholder del ARTE ocupa el panel COMPLETO (patrón dkt-pl-hero__ph/__phframe/__phword/__phbadge de Prudence; encuadre = viewport del hero ≈1265×660 @1280, mismas specs del arte que se mandará a hacer para ambas marcas), un VELO claro (__veil) garantiza AA del texto sobre el arte futuro y el bloque de contenido va SUPERPUESTO abajo-izquierda (__content). Sin .dkt-al-wrap: nada en flujo → el hero mide EXACTO 100svh (antes desbordaba ~40px a 1280×656) y el cue "DESLIZA ↓" + compliance quedan DENTRO del primer screen. */ body.dkt-brand-andalan #hero { background: radial-gradient(60% 55% at 88% 12%, rgba(237, 0, 118, .13), transparent 60%), radial-gradient(50% 50% at 8% 92%, rgba(237, 0, 118, .10), transparent 62%), linear-gradient(160deg, #FFFFFF 0%, var(--al-paper) 48%, #F6E8EA 100%); } body.dkt-brand-andalan #hero .dkt-al-hero__ph { position: absolute; inset: 0; z-index: 1; pointer-events: none; } body.dkt-brand-andalan #hero .dkt-al-hero__firma { position: absolute; inset: 0; pointer-events: none; opacity: .07; background: url(../brand/andalan-landing/firma-rosa-textura-transparente.png) no-repeat right -60px bottom -40px / auto 85%; } body.dkt-brand-andalan #hero .dkt-al-hero__phframe { position: absolute; inset: 18px; border: 2px dashed rgba(194, 0, 99, .22); border-radius: 18px; } body.dkt-brand-andalan #hero .dkt-al-hero__phword { position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: max-content; max-width: 92%; /* v8.4 §7: 42→36% — el eyebrow pisaba la línea pequeña; muere con el arte DKT */ color: rgba(194, 0, 99, .10); font-family: var(--al-geo); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; line-height: 1; } body.dkt-brand-andalan #hero .dkt-al-hero__phword b { display: block; font-size: clamp(1.5rem, 4.6vw, 3.8rem); } body.dkt-brand-andalan #hero .dkt-al-hero__phword span { display: block; font-size: clamp(.6rem, 1vw, .8rem); letter-spacing: .3em; margin-top: 10px; color: rgba(194, 0, 99, .2); } body.dkt-brand-andalan #hero .dkt-al-hero__phbadge { position: absolute; top: calc(var(--menu-h, 76px) + 14px); left: clamp(20px, 4vw, 56px); z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--al-fucsia-ink); font-family: var(--al-geo); font-weight: 700; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(194, 0, 99, .25); box-shadow: var(--al-sh-1); } body.dkt-brand-andalan #hero .dkt-al-dot { width: 8px; height: 8px; border-radius: 50%; background: #FFB000; box-shadow: 0 0 10px #FFB000; } /* Velo de legibilidad (claro — el mundo Andalan es paper, no oscuro): asegura el contraste del bloque abajo-izquierda sobre CUALQUIER arte futuro. */ body.dkt-brand-andalan #hero .dkt-al-hero__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(75deg, rgba(251, 244, 242, .94) 0%, rgba(251, 244, 242, .55) 40%, rgba(251, 244, 242, 0) 66%), linear-gradient(0deg, rgba(251, 244, 242, .88) 0%, rgba(251, 244, 242, 0) 44%); } /* v7 §4.3: logo esquina sup-der se mantiene mientras no llegue el arte. */ body.dkt-brand-andalan #hero .dkt-al-hero__logo { position: absolute; top: calc(var(--menu-h, 76px) + clamp(14px, 2.6vh, 30px)); right: clamp(20px, 4.5vw, 56px); width: clamp(110px, 13vw, 170px); height: auto; z-index: 3; filter: drop-shadow(0 6px 18px rgba(194, 0, 99, .12)); } /* Bloque de contenido superpuesto abajo-izquierda (patrón __content Prudence: anclado al tercio inferior, padding-izq ≈64px @1280). Al anclarse abajo desaparece el aire muerto entre menú y eyebrow (spec Ricardo). */ body.dkt-brand-andalan #hero .dkt-al-hero__content { position: absolute; z-index: 4; left: 0; bottom: clamp(72px, 12vh, 130px); /* v8.1 §2: el bloque sube — ya no queda pegado al borde */ padding: 0 clamp(22px, 5vw, 64px); max-width: min(780px, 96vw); } /* v7 §4.1: H1 en 2 LÍNEAS EXACTAS. L1 "Tú decides sobre tu cuerpo," mide ~12–13em en Fraunces → min(5.8vh, 3.4vw) con tope 3rem; nowrap por línea (>560px) blinda contra una 3ª línea; ≤560 envuelve libre. */ body.dkt-brand-andalan #hero .dkt-al-hero__title { font-family: var(--al-display); font-weight: 400; font-size: clamp(1.9rem, min(5.8vh, 3.4vw), 3rem); color: var(--al-fucsia-ink); margin: clamp(12px, 2.3vh, 26px) 0 clamp(14px, 3.1vh, 34px); letter-spacing: -.015em; line-height: 1.08; /* v8.1 §2: aire +~40% */ } body.dkt-brand-andalan #hero .dkt-al-hero__title .l { display: block; } @media (min-width: 561px) { body.dkt-brand-andalan #hero .dkt-al-hero__title .l { white-space: nowrap; } } body.dkt-brand-andalan #hero .dkt-al-hero__title em { font-style: italic; } /* v8 §2: jerarquía lead/sub — el lead (itálica Fraunces) sube UN paso y el sub (Poppins) baja, con aire entre ambos: ya no compiten. */ body.dkt-brand-andalan #hero .dkt-al-hero__lead { font-family: var(--al-display); font-style: italic; font-size: clamp(1.06rem, 1.65vw, 1.44rem); color: var(--al-vino); margin-bottom: clamp(9px, 1.8vh, 18px); line-height: 1.32; /* v8.1 §2: aire +50% */ } body.dkt-brand-andalan #hero .dkt-al-hero__sub { font-family: var(--al-geo); font-weight: 600; font-size: clamp(.88rem, 1.15vw, 1rem); color: var(--al-magenta); margin-bottom: clamp(20px, 3.6vh, 40px); line-height: 1.4; /* v8.1 §2: aire +~40% antes de los botones */ } @media (min-width: 561px) { body.dkt-brand-andalan #hero .dkt-al-hero__lead, body.dkt-brand-andalan #hero .dkt-al-hero__sub { white-space: nowrap; } } body.dkt-brand-andalan #hero .dkt-al-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; } /* v8 §2: compliance DENTRO del primer screen y corrido a la izquierda del WhatsApp flotante (burbuja ~72px en la esquina inf-der): no se tapan. */ body.dkt-brand-andalan #hero .dkt-al-hero__compliance { position: absolute; right: clamp(84px, 9vw, 120px); bottom: 18px; text-align: right; font-family: var(--al-geo); font-size: .74rem; color: var(--al-muted); z-index: 4; max-width: 42%; } /* §B3.3 pase 390×844: a ≤520px el h1 Fraunces baja con clamp vw (la línea más larga cabe SIN envolver) y el logo toma aire. */ @media (max-width: 520px) { body.dkt-brand-andalan #hero .dkt-al-hero__title { font-size: clamp(1.9rem, 9vw, 2.4rem); line-height: 1.08; } body.dkt-brand-andalan #hero .dkt-al-hero__logo { width: clamp(140px, 38vw, 200px); } body.dkt-brand-andalan #hero .dkt-al-hero__compliance { max-width: 56%; right: clamp(72px, 20vw, 96px); } body.dkt-brand-andalan #hero .dkt-al-hero__phword b { font-size: clamp(1.2rem, 6.4vw, 1.8rem); } } /* §B2 entrada del hero AUTÓNOMA en CSS (espejo Prudence §4 líneas 377-386): escalonada, NO depende de landing.js. Termina visible ('both'); reduced-motion = estático visible (sin animación). */ @media (prefers-reduced-motion: no-preference) { body.dkt-brand-andalan #hero .dkt-al-hero__content > * { animation: dkt-al-hero-in .7s var(--al-ease) both; } body.dkt-brand-andalan #hero .dkt-al-hero__content > *:nth-child(2) { animation-delay: .08s; } body.dkt-brand-andalan #hero .dkt-al-hero__content > *:nth-child(3) { animation-delay: .16s; } body.dkt-brand-andalan #hero .dkt-al-hero__content > *:nth-child(4) { animation-delay: .26s; } body.dkt-brand-andalan #hero .dkt-al-hero__content > *:nth-child(5) { animation-delay: .36s; } } @keyframes dkt-al-hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* ───────────── SECCIÓN 2 · CÓMO FUNCIONA / QUÉ ES ANDALAN (#como-funciona) ───────────── */ /* v6 §4/§1-G1: arranca EXACTO donde termina el hero (#F6E8EA) y fluye hacia un rosado profundo que anticipa el vino de #beneficios — las 3 secciones de G1 se leen como un solo lienzo. */ body.dkt-brand-andalan #como-funciona { display: flex; background: radial-gradient(60% 60% at 92% 6%, rgba(237, 0, 118, .08), transparent 60%), linear-gradient(170deg, #F6E8EA 0%, var(--al-paper) 42%, #F6E4EA 80%, #EED2DF 100%); } /* v8 §4.2: TRANSICIÓN 2→3 REDISEÑADA — la banda lineal larga moría en un color distinto al fondo real de Beneficios (costura visible, captura Ricardo). Ahora la costura es la OLA de marca en el vino EXACTO (#6a1140) con que arranca #beneficios (que además recibe con ese mismo sólido en su tope, ::before de abajo) — corta (~12vh), elegante, una sola identidad. */ body.dkt-brand-andalan #como-funciona::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12vh; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%236a1140' fill-opacity='.35' d='M0,85 C300,9 560,133 820,103 C1060,75 1240,13 1440,55 L1440,320 L0,320 Z'/%3E%3Cpath fill='%236a1140' d='M0,120 C300,44 560,168 820,138 C1060,110 1240,48 1440,90 L1440,320 L0,320 Z'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat; pointer-events: none; z-index: 0; } /* §B1.4: compresión vh (espejo Prudence) — a 720p el panel medía +21px sobre el snapport (658px); paddings/gaps pasan a clamps vh para caber SIEMPRE. v7 §5.2: aire inferior ~5-6vh antes del cambio de sección (el puente respira); el wrap sube sobre el ::after del puente (z-index). */ body.dkt-brand-andalan #como-funciona .dkt-al-howto__wrap { position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: clamp(14px, 2.5vh, 30px); padding-bottom: clamp(34px, 5.5vh, 60px); width: 100%; } /* Banda 7 puntos clave */ body.dkt-brand-andalan #como-funciona .dkt-al-keys { padding-bottom: clamp(8px, 1.6vh, 18px); } body.dkt-brand-andalan #como-funciona .dkt-al-keys ul { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } body.dkt-brand-andalan #como-funciona .dkt-al-key { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 2px 6px; position: relative; } body.dkt-brand-andalan #como-funciona .dkt-al-key + .dkt-al-key::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: var(--al-line); } body.dkt-brand-andalan #como-funciona .dkt-al-key__ico { width: 30px; height: 30px; color: var(--al-fucsia-ink); flex: none; } body.dkt-brand-andalan #como-funciona .dkt-al-key__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan #como-funciona .dkt-al-key__txt { font-family: var(--al-geo); font-weight: 600; font-size: .78rem; line-height: 1.2; color: var(--al-vino); } /* Grid de 2 bloques */ /* v8.1 §3.1: los 2 bloques SIEMPRE de la MISMA altura — vuelve align-items stretch (en v8 con start el magenta quedaba más alto que el blanco). El interior se mantiene compacto (la nota Ag se re-compacta abajo) para que la altura común no crezca; el aire sobrante del panel sigue quedando debajo. */ body.dkt-brand-andalan #como-funciona .dkt-al-howto__grid { flex: none; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(18px, 2.4vw, 30px); align-items: stretch; margin-top: clamp(10px, 2vh, 24px); } body.dkt-brand-andalan #como-funciona .dkt-al-card { border-radius: 24px; padding: clamp(13px, 2.2vh, 24px) clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; } /* v7 §5.1: paddings verticales reducidos */ body.dkt-brand-andalan #como-funciona .dkt-al-card--lt { background: #fff; border: 1px solid var(--al-line); box-shadow: var(--al-sh-2); } body.dkt-brand-andalan #como-funciona .dkt-al-card__h2 { font-family: var(--al-display); font-weight: 400; font-size: clamp(1.17rem, 2.16vw, 1.8rem); line-height: 1.06; margin: 8px 0 10px; } /* v7 §5.1: −10% del --al-fs-h2 global */ body.dkt-brand-andalan #como-funciona .dkt-al-card__h2 .l { display: block; } /* v8.1 §3.2: H2 del bloque blanco en 2 líneas EXACTAS */ body.dkt-brand-andalan #como-funciona .dkt-al-card--lt .dkt-al-card__h2 { color: var(--al-fucsia-ink); } body.dkt-brand-andalan #como-funciona .dkt-al-card__h2 em { font-style: italic; } body.dkt-brand-andalan #como-funciona .dkt-al-card--lt .dkt-al-card__p { color: var(--al-ink); max-width: 44ch; font-size: .92rem; } /* v7 §5.1: texto −8% */ body.dkt-brand-andalan #como-funciona .dkt-al-meaning { display: grid; grid-template-columns: 152px 1fr; gap: 18px; align-items: center; margin-top: clamp(14px, 2.2vw, 24px); } body.dkt-brand-andalan #como-funciona .dkt-al-meaning__illu { width: 152px; height: auto; display: block; } body.dkt-brand-andalan #como-funciona .dkt-al-meaning__say { font-family: var(--al-display); font-style: italic; font-weight: 400; font-size: 1.03rem; color: var(--al-fucsia-ink); line-height: 1.32; margin-bottom: 8px; } /* v7 §5.1: −8% */ body.dkt-brand-andalan #como-funciona .dkt-al-meaning__say b { font-weight: 600; } body.dkt-brand-andalan #como-funciona .dkt-al-meaning__sub { font-family: var(--al-display); font-style: italic; font-weight: 500; font-size: .9rem; color: var(--al-vino); line-height: 1.32; } /* v7 §5.1: −8% */ body.dkt-brand-andalan #como-funciona .dkt-al-card--dk { background: linear-gradient(155deg, var(--al-vino), #43092a); color: #fff; position: relative; overflow: hidden; } body.dkt-brand-andalan #como-funciona .dkt-al-card--dk::after { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(237, 0, 118, .4), transparent 65%); } body.dkt-brand-andalan #como-funciona .dkt-al-eyebrow--light { color: #fff; position: relative; z-index: 2; } body.dkt-brand-andalan #como-funciona .dkt-al-card--dk .dkt-al-card__h2 { color: #fff; position: relative; z-index: 2; margin: 10px 0 16px; } body.dkt-brand-andalan #como-funciona .dkt-al-card--dk .dkt-al-card__h2 em { color: #FFCFE6; } body.dkt-brand-andalan #como-funciona .dkt-al-howrow { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; z-index: 2; } body.dkt-brand-andalan #como-funciona .dkt-al-howrow__illu { width: clamp(160px, 17vw, 204px); } body.dkt-brand-andalan #como-funciona .dkt-al-howrow__illu img { width: 100%; height: auto; display: block; } body.dkt-brand-andalan #como-funciona .dkt-al-howrow__cap { font-size: .86rem; color: rgba(255, 255, 255, .9); } /* v7 §5.1: −8% */ body.dkt-brand-andalan #como-funciona .dkt-al-howrow__big { font-family: var(--al-geo); font-weight: 600; color: #fff; display: block; margin-bottom: 4px; } /* v8.1 §3.1: nota "Ag · Silverflex" COMPACTA (padding/círculo menores) — era la que estiraba el bloque magenta por encima del blanco. */ body.dkt-brand-andalan #como-funciona .dkt-al-plus { margin-top: 12px; display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .06); position: relative; z-index: 2; } body.dkt-brand-andalan #como-funciona .dkt-al-plus__ag { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #EDEFF2, #C9CDD3); color: #3a3f47; display: grid; place-items: center; font-family: var(--al-geo); font-weight: 700; font-size: .68rem; } body.dkt-brand-andalan #como-funciona .dkt-al-plus p { font-size: .77rem; color: rgba(255, 255, 255, .9); } /* v7 §5.1: −8% */ body.dkt-brand-andalan #como-funciona .dkt-al-plus b { color: #fff; } /* v8 §4.3: en pantallas CORTAS el WhatsApp flotante (esquina inf-der ~84px) caía sobre la nota "Ag · Silverflex" — la nota cede ese ancho a la derecha. */ @media (max-height: 700px) { body.dkt-brand-andalan #como-funciona .dkt-al-plus { max-width: calc(100% - 84px); } } @media (max-width: 980px) { body.dkt-brand-andalan #como-funciona .dkt-al-howto__grid { grid-template-columns: 1fr; } body.dkt-brand-andalan #como-funciona .dkt-al-keys ul { grid-template-columns: repeat(4, 1fr); gap: 16px 8px; } body.dkt-brand-andalan #como-funciona .dkt-al-key:nth-child(1)::before, body.dkt-brand-andalan #como-funciona .dkt-al-key:nth-child(5)::before { display: none; } } @media (max-width: 560px) { body.dkt-brand-andalan #como-funciona .dkt-al-keys ul { grid-template-columns: repeat(2, 1fr); } body.dkt-brand-andalan #como-funciona .dkt-al-key::before { display: none !important; } body.dkt-brand-andalan #como-funciona .dkt-al-meaning { grid-template-columns: 1fr; text-align: center; } body.dkt-brand-andalan #como-funciona .dkt-al-meaning__illu { margin: 0 auto; } } /* ───────────── SECCIÓN 3 · BENEFICIOS · MOSAICO 8×8 (#beneficios) ───────────── Motor espejo de Prudence: server pinta las cápsulas (fail-visible); el script inline solo rota/baraja (cross-fade + FLIP), pausa fuera de viewport, reduced-motion. */ /* v7 §5.3: gradiente VERTICAL (antes 160deg) → el tope calza EXACTO con el puente de #como-funciona (#6a1140) y el pie (#2c0419) con el gate #linea. v8 §5.2: panel a ~100svh REAL (antes 92svh → 528px vs 656: el imán lo saltaba y el título quedaba cortado) — hereda el min-height del panel base. */ body.dkt-brand-andalan #beneficios { display: flex; background: radial-gradient(70% 60% at 85% 0%, rgba(237, 0, 118, .28), transparent 60%), linear-gradient(180deg, #6a1140 0%, #3c0825 70%, #2c0419 100%); } /* v8 §4.2: el TOPE del panel recibe la ola con el MISMO sólido #6a1140 (el radial fucsia tocaba el borde superior y desmentía el color de la costura); funde en ~10vh hacia el look aprobado del panel. */ body.dkt-brand-andalan #beneficios::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10vh; background: linear-gradient(180deg, #6a1140 0%, rgba(106, 17, 64, 0) 100%); pointer-events: none; z-index: 0; } /* §B1.4: compresión vh — a 720p el panel medía +72px sobre el snapport (658px). Paddings/márgenes a vh + mosaico con flex-basis 0 (abajo) → cabe SIEMPRE. v7 §6.3: más aire al inicio (~6vh) — recibe el puente del §5.3. */ /* 0.9.26 (revisión Ricardo): el conjunto cabecera+ríos+líneas se AGRUPA al centro con un gap uniforme — muere el aire gigante entre título y ríos y entre ríos y las 4 líneas (los ríos ya no estiran con flex-grow). */ body.dkt-brand-andalan #beneficios .dkt-al-benefits__wrap { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 0; min-height: calc(100svh - var(--al-off)); padding-top: clamp(10px, 1.6vh, 18px); padding-bottom: clamp(10px, 1.6vh, 18px); width: 100%; } body.dkt-brand-andalan #beneficios .dkt-al-benefits__head { text-align: center; color: #fff; max-width: 62ch; margin: 0 auto; } body.dkt-brand-andalan #beneficios .dkt-al-benefits__h2 { font-family: var(--al-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.3rem); color: #fff; line-height: 1.05; margin: 5px 0 3px; } body.dkt-brand-andalan #beneficios .dkt-al-benefits__h2 em { font-style: italic; } body.dkt-brand-andalan #beneficios .dkt-al-benefits__lead { color: #fff; font-family: var(--al-geo); font-weight: 500; font-size: .88rem; } /* ═════ BENEFICIOS v9 (0.9.20 · mockup aprobado 2026-07-27): RÍOS DE CÁPSULAS ═════ Muere el grid 8×8 (v6–v8.4) y las 7 tarjetas estáticas (0.9.17). 3 marquees fluyendo en direcciones alternadas (mecánica espejo de los tickers del Home) con los claims VALIDADOS + flip-swap por click (pools JSON del server). El server pinta cada río UNA vez (fail-visible); el JS del pie lo duplica para el loop. Hover pausa. reduced-motion: ríos quietos, scroll nativo. */ body.dkt-brand-andalan #beneficios .dkt-al-rivers { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); flex: 0 0 auto; min-height: 0; justify-content: center; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } body.dkt-brand-andalan #beneficios .dkt-al-river { display: flex; gap: 14px; width: max-content; animation: dkt-al-flow var(--al-flow, 46s) linear infinite; } body.dkt-brand-andalan #beneficios .dkt-al-river--rev { animation-direction: reverse; } body.dkt-brand-andalan #beneficios .dkt-al-rivers:hover .dkt-al-river { animation-play-state: paused; } @keyframes dkt-al-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } } body.dkt-brand-andalan #beneficios .dkt-al-rvtrack { display: flex; gap: 14px; padding-right: 14px; } body.dkt-brand-andalan #beneficios .dkt-al-cap { flex: none; display: inline-flex; align-items: center; gap: 9px; font-family: var(--al-geo); font-weight: 600; font-size: clamp(.84rem, 1.15vw, 1rem); line-height: 1.15; border-radius: 999px; padding: 11px 20px; border: 1.5px solid transparent; cursor: pointer; user-select: none; white-space: nowrap; transition: transform .25s var(--al-ease), box-shadow .25s var(--al-ease); } body.dkt-brand-andalan #beneficios .dkt-al-cap:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5); z-index: 2; } body.dkt-brand-andalan #beneficios .dkt-al-cap:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } body.dkt-brand-andalan #beneficios .dkt-al-cap.sw { animation: dkt-al-capswap .34s var(--al-ease); } @keyframes dkt-al-capswap { 0% { transform: scale(1); } 45% { transform: scale(.86); opacity: .35; } 100% { transform: scale(1); opacity: 1; } } body.dkt-brand-andalan #beneficios .dkt-al-cap .ic { width: 17px; height: 17px; flex: none; } body.dkt-brand-andalan #beneficios .dkt-al-cap.t-white { background: #fff; color: var(--al-fucsia-ink); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); } body.dkt-brand-andalan #beneficios .dkt-al-cap.t-glass { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .32); color: #fff; backdrop-filter: blur(5px); } body.dkt-brand-andalan #beneficios .dkt-al-cap.t-fill { background: linear-gradient(140deg, #FF3D9E, #DD0071); color: #fff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .4); } body.dkt-brand-andalan #beneficios .dkt-al-cap.t-vino { background: var(--al-vino); color: #FFD3E9; border-color: rgba(255, 255, 255, .14); } body.dkt-brand-andalan #beneficios .dkt-al-cap--logo { background: #fff; padding: 11px 22px; } body.dkt-brand-andalan #beneficios .dkt-al-cap--logo img { height: 20px; width: auto; } /* Remate: las 4 líneas como sello de identidad (enlazan a su mundo). */ body.dkt-brand-andalan #beneficios .dkt-al-benlines { position: relative; z-index: 1; display: flex; gap: clamp(12px, 2vw, 22px); justify-content: center; flex-wrap: wrap; padding-top: 0; } body.dkt-brand-andalan #beneficios .dkt-al-diu { display: flex; align-items: center; gap: 13px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; padding: 12px 18px; transition: background .25s var(--al-ease), transform .25s var(--al-ease), box-shadow .25s var(--al-ease); } body.dkt-brand-andalan #beneficios .dkt-al-diu:hover { background: rgba(255, 255, 255, .16); transform: translateY(-4px); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); } body.dkt-brand-andalan #beneficios .dkt-al-diu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } body.dkt-brand-andalan #beneficios .dkt-al-diu .dkt-al-diushape { width: clamp(22px, 3.6vh, 30px); height: auto; flex: none; } body.dkt-brand-andalan #beneficios .dkt-al-diu__nm { font-family: var(--al-geo); font-weight: 700; font-size: .98rem; line-height: 1.1; display: block; } body.dkt-brand-andalan #beneficios .dkt-al-diu__tg { font-family: var(--al-geo); font-weight: 600; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #FFC6E3; display: block; margin-top: 3px; } body.dkt-brand-andalan #beneficios .dkt-al-diu__go { font-size: .64rem; color: rgba(255, 255, 255, .65); display: block; margin-top: 2px; } /* Entrada del panel (motor .is-active): la cabecera ya anima arriba; ríos y líneas suben suave. */ html.dkt-js body.dkt-brand-andalan #beneficios:not(.is-active) .dkt-al-rivers, html.dkt-js body.dkt-brand-andalan #beneficios:not(.is-active) .dkt-al-benlines { opacity: 0; } html.dkt-js body.dkt-brand-andalan #beneficios:target:not(.is-active) .dkt-al-rivers, html.dkt-js body.dkt-brand-andalan #beneficios:target:not(.is-active) .dkt-al-benlines { opacity: 1; } body.dkt-brand-andalan #beneficios.is-active .dkt-al-rivers { animation: dkt-al-in-up .7s var(--al-ease) .15s backwards; } body.dkt-brand-andalan #beneficios.is-active .dkt-al-benlines { animation: dkt-al-in-up .7s var(--al-ease) .3s backwards; } @media (max-width: 760px) { body.dkt-brand-andalan #beneficios .dkt-al-cap { font-size: .8rem; padding: 9px 15px; } body.dkt-brand-andalan #beneficios .dkt-al-diu { padding: 10px 14px; } } @media (prefers-reduced-motion: reduce) { body.dkt-brand-andalan #beneficios .dkt-al-river { animation: none; } body.dkt-brand-andalan #beneficios .dkt-al-rivers { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } } /* ───────────── GATE · BANDA VISUAL (#linea · v8.1 §4) ───────────── Reformulación TOTAL (a Ricardo no le gustó el texto ni las flechas): banda de transición PURAMENTE visual (~16svh) entre Beneficios y Classic, SIN snap (bajo mandatory se atraviesa — solo se ve en tránsito). Arranca en el #2C0419 EXACTO con que termina #beneficios y MUERE en blanco sólido antes del borde (sin banda residual sobre el panel Classic). Ola tenue de marca (blanca, casi transparente) como único detalle. id="linea" se conserva. */ body.dkt-brand-andalan .dkt-al-gate { position: relative; min-height: 16svh; scroll-margin-top: var(--al-off); background: linear-gradient(180deg, #2C0419 0%, #4A0A2C 38%, #7D2653 64%, #FFFFFF 90%, #FFFFFF 100%); } body.dkt-brand-andalan .dkt-al-gate::before { content: ""; position: absolute; left: 0; right: 0; bottom: 8%; height: 64%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.16' d='M0,120 C300,44 560,168 820,138 C1060,110 1240,48 1440,90 L1440,320 L0,320 Z'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat; pointer-events: none; } /* ───────────── MUNDOS v9 (0.9.21 · mockup aprobado 2026-07-27, andalan-productos-v9.html) ───────────── EMPAQUE PROTAGONISTA + TARJETA DE COMPRA. Grid de 3 columnas EN FLUJO: izquierda texto (eyebrow → título → tagline → bullets [+ chip de línea]) · centro packshot(s) HD piso-a-techo · derecha tarjeta(s) de compra (device real + precio dual-ready + botones); logo del mundo absoluto arriba-derecha. MUEREN: esferas/medallones, sellos circulares, siluetas, frases glow, wsell y el LAYOUT MANUAL absoluto v8.2 (todo el posicionamiento vuelve a flujo). Color por mundo vía --w/--w-ink/--w-deep/--w-tint (§3). Móvil: apilado. */ /* v9.2 (ajuste Ricardo con el editor): SIN logo de esquina · orden info | TARJETA | EMPAQUE pegado a la derecha · tagline de singles EN BLANCO sobre la ola · SILUETA blanca de vuelta. Medidas por mundo vía variables --al-* (los valores de Classic son los exportados por Ricardo del editor). */ body.dkt-brand-andalan .dkt-al-world { background: #fff; display: flex; } body.dkt-brand-andalan .dkt-al-world .b { position: relative; } /* hooks de coreografía/hidden-state (.b-*) EN FLUJO */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wsil { position: absolute; left: 2%; bottom: 6%; width: min(11%, 130px); height: auto; opacity: .45; z-index: 1; pointer-events: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bwave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; z-index: 0; pointer-events: none; color: var(--w); } body.dkt-brand-andalan .dkt-al-world .dkt-al-bwave path { fill: currentColor; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bwave svg { width: 100%; height: 100%; display: block; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wgrid { position: relative; z-index: 3; flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: var(--al-c1, 1.06fr) var(--al-c2, .92fr) var(--al-c3, 1.1fr); align-items: center; column-gap: var(--al-gapcol, clamp(16px, 2.4vw, 38px)); padding: var(--al-padv, clamp(44px, 6.5vh, 68px)) clamp(20px, 3vw, 48px) calc(var(--al-padv, clamp(38px, 6vh, 60px)) * .9); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol { min-width: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt { display: flex; flex-direction: column; align-items: flex-start; align-self: start; padding-top: clamp(8px, 1.6vh, 18px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-title { margin: clamp(2px, .8vh, 10px) 0 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-tagline { margin-top: clamp(4px, 1vh, 12px); max-width: 46ch; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-bullets { margin-top: var(--al-gapbul, clamp(12px, 2.4vh, 24px)); } body.dkt-brand-andalan .dkt-al-world .dkt-al-weyebrow { font-family: var(--al-geo); font-weight: 600; font-size: clamp(.7rem, 1vw, .92rem); letter-spacing: .16em; text-transform: uppercase; color: var(--w-ink); display: flex; align-items: center; gap: 10px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-weyebrow .ln { height: 2px; width: 34px; background: var(--w); border-radius: 2px; flex: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wtitle { font-family: var(--al-geo); font-weight: 800; font-size: var(--al-tith, clamp(2.4rem, 4.6vw, 4.6rem)); letter-spacing: -.01em; line-height: .98; color: var(--w); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wtag { font-family: var(--al-display); font-style: italic; font-weight: 500; font-size: clamp(.98rem, 1.4vw, 1.38rem); color: var(--w-ink); line-height: 1.3; } /* v9.2: en los mundos SINGLE la tagline baja EN BLANCO sobre la ola (como v8); la silueta blanca la acompaña abajo-izquierda. En dúos queda arriba. */ body.dkt-brand-andalan #classic .b-tagline, body.dkt-brand-andalan #comfort .b-tagline { left: 16%; top: 80%; bottom: auto; width: 25%; max-width: none; } body.dkt-brand-andalan #classic .dkt-al-wtag, body.dkt-brand-andalan #comfort .dkt-al-wtag { color: #fff; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); } /* Bullets con iconos (patrón --icons unificado): UNA columna con aire (0.9.17). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--al-gapli, clamp(9px, 1.6vh, 13px)); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets li { font-size: clamp(.9rem, 1.05vw, 1.04rem); color: var(--w-deep); font-weight: 500; line-height: 1.38; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets--icons li { display: flex; align-items: center; gap: 11px; padding-left: 0; white-space: normal; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets--icons li::before { display: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets--icons .bic { flex: none; width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .88); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); color: var(--w-ink); } body.dkt-brand-andalan .dkt-al-wbullets--icons .bic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan .dkt-al-minibadge { display: inline-block; font-family: var(--al-geo); font-weight: 700; font-size: clamp(.85rem, 1.9vw, 2rem); line-height: 1; color: #fff; background: var(--al-fucsia); padding: .34em .72em; border-radius: 999px; vertical-align: .55em; margin-left: .12em; text-transform: lowercase; box-shadow: 0 6px 16px -6px rgba(198, 0, 99, .45); } /* ── CENTRO: empaque(s) protagonista(s), piso a techo ── */ body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; min-height: 100%; min-width: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage img { height: min(var(--al-packh, 820px), calc(100svh - var(--al-off) - clamp(96px, 14vh, 150px))); width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(31, 20, 15, .28)); transition: transform .3s var(--al-ease), filter .3s; } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage img:hover { transform: translateY(-10px) scale(1.02); filter: drop-shadow(0 40px 60px rgba(31, 20, 15, .36)); } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage--duo a:first-child img { z-index: 2; } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage--duo img + img, body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage--duo a + a img { height: min(calc(var(--al-packh, 820px) * .9), calc(92svh - var(--al-off) - clamp(96px, 14vh, 150px))); margin-left: clamp(-46px, -3vw, -22px); z-index: 1; } body.dkt-brand-andalan .dkt-al-world .dkt-al-packlink { display: contents; } /* ── DERECHA: tarjeta(s) de compra ── */ body.dkt-brand-andalan .dkt-al-world .dkt-al-buyzone { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); justify-content: center; align-items: stretch; min-width: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard { position: relative; background: #fff; border-radius: 20px; overflow: hidden; width: 100%; max-width: var(--al-cardw, 330px); margin: 0 auto; box-shadow: 0 2px 6px rgba(31, 20, 15, .06), 0 14px 34px -10px rgba(31, 20, 15, .22), 0 34px 80px -24px rgba(31, 20, 15, .3); transition: transform .28s var(--al-ease), box-shadow .28s var(--al-ease); } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(31, 20, 15, .07), 0 20px 44px -10px rgba(31, 20, 15, .26), 0 44px 96px -22px rgba(31, 20, 15, .36); } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcstage { position: relative; background: linear-gradient(170deg, var(--w-tint) 0%, #fff 90%); display: grid; place-items: center; padding: 16px; overflow: hidden; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcstage img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(31, 20, 15, .16)); } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcyears { position: absolute; top: 11px; left: 11px; display: inline-flex; align-items: baseline; gap: 5px; background: var(--w); color: #fff; font-family: var(--al-geo); border-radius: 999px; padding: 4px 11px; box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .3); z-index: 2; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcyears b { font-size: .98rem; font-weight: 800; line-height: 1; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcyears span { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcbody { padding: 13px 18px 18px; display: flex; flex-direction: column; gap: 9px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcname { font-family: var(--al-geo); font-weight: 700; font-size: 1.16rem; color: var(--dkt-ink, #2b2f33); display: flex; align-items: center; gap: 8px; line-height: 1.15; margin: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcname .dkt-al-minibadge { font-size: .64rem; vertical-align: baseline; margin-left: 0; box-shadow: none; padding: .36em .68em; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcfor { font-size: .78rem; color: var(--al-muted, #6a737b); line-height: 1.35; margin: -3px 0 0; } /* Precio DUAL-READY: B2C = monto grande limpio · médico = chico + grande + pill "Precio Profesional" (markup del motor dkt_add_price_badge — el theme SOLO estila; el bug del montaje muere aquí). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-bcprice { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 9px; row-gap: 5px; font-family: var(--al-geo); font-weight: 800; font-size: 1.66rem; line-height: 1; color: var(--dkt-ink, #2b2f33); letter-spacing: -.01em; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcprice .amount { white-space: nowrap; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcprice del { font-size: .9rem; font-weight: 600; color: #9aa0a6; opacity: 1; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcprice ins { text-decoration: none; color: var(--w-ink); background: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcprice .dkt-precio-doctor { display: inline-flex; align-items: center; font: 700 .6rem/1 var(--al-geo); letter-spacing: .06em; text-transform: uppercase; color: var(--al-fucsia-ink); background: #FFE7F2; border: 1px solid #FFC6E3; border-radius: 999px; padding: 5px 10px; margin: 0; } /* Tarjeta clickeable (0.9.35): overlay a la ficha; los botones quedan ENCIMA. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-bclink { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts { position: relative; z-index: 2; } /* Botones apilados (el helper WC pinta a.add_to_cart_button.dkt-al-add → especificidad alta + !important vs Astra/WC). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts { display: flex; flex-direction: column; gap: 8px; margin-top: 3px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts .dkt-al-add { display: flex !important; align-items: center; justify-content: center; gap: 8px; font-family: var(--al-geo) !important; font-weight: 700 !important; font-size: .9rem !important; line-height: 1.25 !important; color: #fff !important; background: var(--w) !important; border: 0 !important; border-radius: 999px !important; padding: 11px 16px !important; min-height: 0 !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .18s var(--al-ease), filter .18s; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts .dkt-al-add:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff !important; background: var(--w) !important; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts .dkt-al-add--soon { opacity: .65; cursor: default; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts .dkt-al-buy { display: flex; align-items: center; justify-content: center; font-family: var(--al-geo); font-weight: 600; font-size: .84rem; color: var(--w-ink); background: #fff; border: 1.6px solid var(--w); border-radius: 999px; padding: 9px 16px; transition: background .18s, border-color .18s, transform .18s var(--al-ease); } body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts .dkt-al-buy:hover { background: var(--w-tint); transform: translateY(-1px); } /* "Ver carrito" que inyecta WC tras el AJAX: oculto (todo el sitio redirige al checkout — coherencia carrito premium). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-bcacts .added_to_cart { display: none; } /* Variantes: SINGLE (vitrina alta) · DÚO (tarjeta horizontal compacta, 2 apiladas). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--single .dkt-al-bcstage { height: var(--al-vith, clamp(200px, 30vh, 270px)); } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--single .dkt-al-bcstage img { max-height: calc(100% - 8px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h { display: grid; grid-template-columns: 112px 1fr; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcstage { height: 100%; min-height: 170px; padding: 12px 8px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcstage img { max-height: 150px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcyears { top: 8px; left: 8px; padding: 3px 9px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcyears b { font-size: .86rem; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcbody { padding: 12px 14px 14px; gap: 7px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcname { font-size: 1.02rem; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcprice { font-size: 1.42rem; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcacts { gap: 6px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcacts .dkt-al-add { padding: 9px 12px !important; font-size: .82rem !important; } body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--h .dkt-al-bcacts .dkt-al-buy { padding: 7px 12px; font-size: .78rem; } /* Chip de línea (p. ej. "Ag · núcleo de plata" en Silverflex) bajo los bullets. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-linechip { margin-top: clamp(14px, 2.2vh, 22px); display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e5dcd4; border-radius: 999px; padding: 7px 16px; font-family: var(--al-geo); font-weight: 600; font-size: .78rem; color: var(--w-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); width: max-content; max-width: 100%; } body.dkt-brand-andalan .dkt-al-world .dkt-al-linechip .ag { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--w-ink); color: #fff; font-weight: 800; font-size: .66rem; font-family: var(--al-geo); flex: none; } /* Compliance (izquierda) + Reg. San. (derecha) — esquinas inferiores de la PANTALLA (pedido Ricardo v9). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wcompliance { position: absolute; left: 0; right: 0; bottom: 9px; z-index: 6; font-family: var(--al-geo); font-size: .64rem; line-height: 1.2; white-space: nowrap; color: rgba(255, 255, 255, .92); text-align: center; max-width: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); } /* Responsive: ≤1080 el grid pasa a 2 col (texto+tarjetas) con el empaque debajo a lo ancho; ≤700 una columna. */ @media (max-width: 1080px) { body.dkt-brand-andalan .dkt-al-world { min-height: auto; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wgrid { grid-template-columns: 1fr 1fr; gap: 22px; padding-top: clamp(56px, 9vh, 76px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage { grid-column: 1 / -1; order: 2; min-height: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage img { height: auto; max-height: min(58svh, 520px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage--duo img + img, body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage--duo a + a img { height: auto; max-height: min(50svh, 440px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-buyzone { order: 1; } body.dkt-brand-andalan .dkt-al-world .dkt-al-packstage { justify-content: center; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wsil { display: none; } body.dkt-brand-andalan #classic .b-tagline, body.dkt-brand-andalan #comfort .b-tagline { left: 16%; top: 80%; bottom: auto; width: 25%; max-width: none; } body.dkt-brand-andalan #classic .dkt-al-wtag, body.dkt-brand-andalan #comfort .dkt-al-wtag { color: var(--w-ink); font-weight: 500; text-shadow: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcompliance, } @media (max-width: 700px) { body.dkt-brand-andalan .dkt-al-world .dkt-al-wgrid { grid-template-columns: 1fr; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt { align-items: center; text-align: center; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .dkt-al-wbullets li { text-align: left; } body.dkt-brand-andalan .dkt-al-world .dkt-al-weyebrow { justify-content: center; } } /* Medallón informativo (v9.3 — de vuelta por pedido de Ricardo; corona la tarjeta). */ body.dkt-brand-andalan .dkt-al-seal { position: absolute; z-index: 7; filter: drop-shadow(0 10px 22px rgba(31, 20, 15, .25)); } body.dkt-brand-andalan .dkt-al-seal .a { font-family: var(--al-geo); font-weight: 700; font-size: 10px; letter-spacing: 1px; fill: var(--w-ink); } body.dkt-brand-andalan .dkt-al-seal .n { font-family: var(--al-geo); font-weight: 800; font-size: 42px; fill: var(--w); } body.dkt-brand-andalan .dkt-al-seal .y { font-family: var(--al-geo); font-weight: 700; font-size: 12px; letter-spacing: 3px; fill: var(--w-ink); } /* Vitrina del dispositivo CONTENIDA (v9.3 — "se montaba sobre todo"): aire interno y ancho tope; el device nunca pisa el cuerpo de la tarjeta. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--single .dkt-al-bcstage { padding: 20px; } /* 0.9.39 · SOLUCIÓN NUCLEAR (device Comfort seguía gigante en navegador real): la imagen se CLAVA al marco con absolute+inset — la caja ES el stage menos el aire; object-fit:contain pinta el dispositivo COMPLETO siempre. Imposible desbordar o recortar, gane quien gane la cascada. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-buycard--single .dkt-al-bcstage img { position: absolute !important; inset: 14px !important; width: calc(100% - 28px) !important; height: calc(100% - 28px) !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: contain !important; object-position: center; } /* ══ LAYOUT MANUAL de Ricardo · LOS 4 MUNDOS (export editor libre 2026-07-27 r2) ══ Patrón v8.2 probado: en desktop el esqueleto grid sale del layout (display:contents) y cada bloque .b se ancla en % contra el panel. En dúos también el packstage pasa a contents y cada EMPAQUE se ancla solo. El flujo móvil ≤1080 queda INTACTO (pills/apilado; medallón oculto). */ @media (min-width: 1081px) { body.dkt-brand-andalan .dkt-al-world .dkt-al-wgrid, body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol, body.dkt-brand-andalan .dkt-al-world .dkt-al-buyzone { display: contents; } body.dkt-brand-andalan .dkt-al-world .b { position: absolute; margin: 0; } /* Reset con la MISMA especificidad (lección v8.2): los márgenes de flujo de título/tagline/bullets/chip (0,4,1) ganaban al .b{margin:0} y corrían los bloques 2-3% bajo el export de Ricardo. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-title, body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-tagline, body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-bullets, body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-linechip { margin: 0; } body.dkt-brand-andalan .dkt-al-world .b-buycard1, body.dkt-brand-andalan .dkt-al-world .b-buycard2 { max-width: none; z-index: 6; } body.dkt-brand-andalan .dkt-al-world .b-pack { align-self: auto; min-height: 0; } /* singles: el empaque es UN bloque; su img llena el ancho del bloque */ body.dkt-brand-andalan #classic .b-pack, body.dkt-brand-andalan #comfort .b-pack { left: 78%; top: 2%; width: 14%; } body.dkt-brand-andalan #classic .b-pack img, body.dkt-brand-andalan #comfort .b-pack img { width: 100%; height: auto !important; max-height: none; } /* dúos: el wrapper desaparece y CADA empaque se ancla por separado */ body.dkt-brand-andalan #silverflex .b-pack, body.dkt-brand-andalan #copperflex .b-pack { display: contents; } body.dkt-brand-andalan #silverflex .b-pack img, body.dkt-brand-andalan #copperflex .b-pack img { position: absolute; height: auto !important; max-height: none; margin: 0 !important; } body.dkt-brand-andalan .dkt-al-world.is-active .b-pack img { animation: dkt-al-in-pack .8s var(--al-ease) .09s backwards; } /* ── CLASSIC ── */ body.dkt-brand-andalan #classic .b-eyebrow { left: 5%; top: 9%; } body.dkt-brand-andalan #classic .b-title { left: 5%; top: 14%; } body.dkt-brand-andalan #classic .b-bullets { left: 5.5%; top: 27%; width: 32%; } body.dkt-brand-andalan #classic .b-tagline { left: 17%; top: 76%; bottom: auto; width: 25%; max-width: none; } body.dkt-brand-andalan #classic .dkt-al-wsil { left: 2.5%; top: 68%; bottom: auto; width: 12%; } body.dkt-brand-andalan #classic .b-buycard1 { left: 50%; top: 18%; width: 25%; } body.dkt-brand-andalan #classic .b-seal { left: 36.5%; top: 57%; width: 9%; } body.dkt-brand-andalan #classic .b-pack { left: 80%; top: 2%; width: 14%; } body.dkt-brand-andalan #classic .dkt-al-wcompliance { left: 0; right: 0; top: 95.5%; bottom: auto; text-align: center; } /* ── COMFORT ── */ body.dkt-brand-andalan #comfort .b-eyebrow { left: 3.5%; top: 7%; } body.dkt-brand-andalan #comfort .b-title { left: 3.5%; top: 9.5%; } body.dkt-brand-andalan #comfort .b-bullets { left: 4%; top: 22%; width: 31%; } body.dkt-brand-andalan #comfort .b-tagline { left: 16%; top: 80%; bottom: auto; width: 25%; max-width: none; } body.dkt-brand-andalan #comfort .dkt-al-wsil { left: 2.5%; top: 70%; bottom: auto; width: 10%; } body.dkt-brand-andalan #comfort .b-buycard1 { left: 50%; top: 25%; width: 25%; } body.dkt-brand-andalan #comfort .b-seal { left: 38%; top: 58%; width: 9%; } body.dkt-brand-andalan #comfort .b-pack { left: 78%; top: 2%; width: 14%; } body.dkt-brand-andalan #comfort .dkt-al-wcompliance { left: 0; right: 0; top: 95.5%; bottom: auto; text-align: center; } /* ── SILVERFLEX (dúo) ── */ body.dkt-brand-andalan #silverflex .b-eyebrow { left: 3%; top: 10%; } body.dkt-brand-andalan #silverflex .b-title { left: 3%; top: 15%; } body.dkt-brand-andalan #silverflex .b-bullets { left: 3%; top: 28%; width: 31%; } body.dkt-brand-andalan #silverflex .b-linechip { left: 11%; top: 83%; width: 25%; white-space: normal; } body.dkt-brand-andalan #copperflex .b-linechip { left: 11%; top: 83%; width: 25%; white-space: normal; } body.dkt-brand-andalan #silverflex .dkt-al-wsil { left: 0.5%; top: 77%; bottom: auto; width: 9%; } body.dkt-brand-andalan #silverflex .b-buycard1 { left: 41.5%; top: 7%; width: 25%; } body.dkt-brand-andalan #silverflex .b-buycard2 { left: 41.5%; top: 48%; width: 25%; } body.dkt-brand-andalan #silverflex .b-pack a:first-child img { left: 71%; top: 3%; width: 13.7%; } body.dkt-brand-andalan #silverflex .b-pack a + a img { left: 85.5%; top: 3%; width: 14%; } body.dkt-brand-andalan #silverflex .b-seal { left: 29%; top: 64%; width: 9%; } body.dkt-brand-andalan #silverflex .dkt-al-wcompliance { left: 0; right: 0; top: 95.5%; bottom: auto; text-align: center; } /* ── COPPERFLEX (dúo) ── */ body.dkt-brand-andalan #copperflex .b-eyebrow { left: 3%; top: 10%; } body.dkt-brand-andalan #copperflex .b-title { left: 3%; top: 15%; } body.dkt-brand-andalan #copperflex .b-bullets { left: 3%; top: 27%; width: 32%; } body.dkt-brand-andalan #copperflex .dkt-al-wsil { left: 1%; top: 72.5%; bottom: auto; width: 10%; } body.dkt-brand-andalan #copperflex .b-buycard1 { left: 41.5%; top: 7%; width: 25%; } body.dkt-brand-andalan #copperflex .b-buycard2 { left: 41.5%; top: 48%; width: 25%; } body.dkt-brand-andalan #copperflex .b-pack a:first-child img { left: 71%; top: 3%; width: 13.7%; } body.dkt-brand-andalan #copperflex .b-pack a + a img { left: 85.5%; top: 3%; width: 14%; } body.dkt-brand-andalan #copperflex .b-seal { left: 29.5%; top: 60.7%; width: 8.6%; } body.dkt-brand-andalan #copperflex .dkt-al-wcompliance { left: 0; right: 0; top: 95.5%; bottom: auto; text-align: center; } } @media (max-width: 1080px) { body.dkt-brand-andalan .dkt-al-seal { display: none; } } } /* Olas y logos por mundo (colores en §3 arriba). */ body.dkt-brand-andalan #classic .dkt-al-bwave { height: 44%; } body.dkt-brand-andalan #comfort .dkt-al-bwave { height: 42%; } body.dkt-brand-andalan #comfort .b-title { left: 3.5%; top: 9.5%; } body.dkt-brand-andalan #silverflex .dkt-al-bwave { height: 46%; } body.dkt-brand-andalan #copperflex .dkt-al-bwave { height: 46%; } /* ───────────── SECCIÓN 8 · COMPARADOR "¿Cuál DIU es para ti?" (#cual) ───────────── */ /* v6 §7 REDISEÑO (spec Ricardo): watermark de fondo op .08 · nombre+precio arriba-izq (dobles: mini arriba-der) · dispositivo en CUADRO 2px --w r12 con COTAS §7bis · tabla de 4 filas de altura FIJA (misma altura en los 4 bloques) · chook -15% · tarjetas más bajas → la sección vuelve a ~1 pantalla (antes 853px). --figh es la altura común de la zona de figura (iguala el arranque de la tabla). */ body.dkt-brand-andalan #cual { background: linear-gradient(163deg, #E20A7C 0%, #C20063 46%, #860B4B 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.2vh, 22px); padding: clamp(16px, 2.6vh, 34px) clamp(16px, 4vw, 52px); } /* v8.3 §1: gap del mockup; --figh retirada (sin cuadros de cotas) */ body.dkt-brand-andalan #cual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 55% at 50% -8%, rgba(255, 255, 255, .16), transparent 60%); pointer-events: none; } /* (v8.5 §3: la marca de agua .dkt-al-petal fue ELIMINADA — PHP y CSS.) */ body.dkt-brand-andalan #cual .dkt-al-cmp-head { text-align: center; max-width: 840px; z-index: 2; } body.dkt-brand-andalan #cual .dkt-al-cmp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--al-geo); font-weight: 600; font-size: clamp(.7rem, 1.05vw, .9rem); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .92); } body.dkt-brand-andalan #cual .dkt-al-cmp-eyebrow .ln { height: 2px; width: 28px; background: rgba(255, 255, 255, .7); border-radius: 2px; } body.dkt-brand-andalan #cual .dkt-al-cmp-title { font-family: var(--al-geo); font-weight: 800; font-size: clamp(1.6rem, 3.7vw, 2.9rem); color: #fff; letter-spacing: -.022em; line-height: 1; margin-top: 4px; } /* v8.4 §4.1: título −20% y márgenes −50% (medido en vivo 678 vs 636) */ body.dkt-brand-andalan #cual .dkt-al-cmp-title i { font-family: var(--al-display); font-style: italic; font-weight: 500; } body.dkt-brand-andalan #cual .dkt-al-cmp-sub { font-family: var(--al-body); font-size: clamp(.92rem, 1.45vw, 1.2rem); color: rgba(255, 255, 255, .9); margin-top: 5px; line-height: 1.4; } /* v8.4 §4.1: −50% */ body.dkt-brand-andalan #cual .dkt-al-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(11px, 1.3vw, 20px); width: 100%; max-width: 1220px; align-items: stretch; z-index: 2; } body.dkt-brand-andalan #cual .dkt-al-ccard { position: relative; display: flex; flex-direction: column; gap: clamp(5px, .85vh, 10px); background: #fff; border-radius: 20px; padding: clamp(9px, 1vw, 15px) clamp(13px, 1.35vw, 20px); box-shadow: 0 26px 54px -22px rgba(70, 0, 38, .6); overflow: hidden; } /* v8.4 §4.2: padding vertical −6-8px */ /* v8.3 §1: watermark del dispositivo de FONDO — MOCKUP EXACTO (grande, tenue, sangrada abajo-derecha; la tarjeta la recorta a propósito). */ body.dkt-brand-andalan #cual .dkt-al-cwm { position: absolute; right: -12%; bottom: -6%; width: 78%; height: auto; opacity: .10; z-index: 0; pointer-events: none; } body.dkt-brand-andalan #cual .dkt-al-ccard > :not(.dkt-al-cwm) { position: relative; z-index: 1; } body.dkt-brand-andalan #cual .dkt-al-ccard.cl { --w: #2E86C9; --wink: #155E96; --wtint: rgba(46, 134, 201, .1); } body.dkt-brand-andalan #cual .dkt-al-ccard.co { --w: #E0773A; --wink: #B5571E; --wtint: rgba(224, 119, 58, .13); } body.dkt-brand-andalan #cual .dkt-al-ccard.si { --w: #788490; --wink: #4E5862; --wtint: rgba(120, 132, 144, .15); } body.dkt-brand-andalan #cual .dkt-al-ccard.cu { --w: #B5703F; --wink: #8A4F26; --wtint: rgba(181, 112, 63, .13); } /* v8.3 §1: cabecera del MOCKUP — nombre color de línea sobre el precio, con la esfera .dkt-al-cmed arriba-derecha (VUELVE por decisión de Ricardo; el padding-right reserva su hueco). El nombre arranca en 1.17rem para ser SIEMPRE texto grande WCAG (≥18.66px bold → requisito 3:1; el naranja Comfort #E0773A da 3.05:1 sobre blanco) — piso AA sobre el mockup literal. */ body.dkt-brand-andalan #cual .dkt-al-ctop { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: clamp(48px, 4vw, 64px); padding-right: clamp(62px, 5.4vw, 88px); } /* v8.4 §4: min-height −10px (contenido real ≈50px; necesario para la meta ≤636) */ /* Selector con hijo directo (especificidad 1,2,0 + posterior): le gana al `> :not(.dkt-al-cwm){position:relative}` que en v8.1 dejaba la esfera EN FLUJO (el famoso "medallón pisando el nombre"). */ body.dkt-brand-andalan #cual .dkt-al-ccard > .dkt-al-cmed { position: absolute; top: clamp(13px, 1.4vw, 21px); right: clamp(13px, 1.35vw, 20px); z-index: 3; width: clamp(56px, 4.6vw, 74px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3.5px solid var(--w); display: grid; place-items: center; overflow: hidden; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .35); } body.dkt-brand-andalan #cual .dkt-al-cmed img { max-width: 76%; max-height: 82%; width: auto; height: auto; } body.dkt-brand-andalan #cual .dkt-al-cname { font-family: var(--al-geo); font-weight: 800; font-size: clamp(1.17rem, 1.5vw, 1.45rem); color: var(--w); letter-spacing: -.01em; line-height: 1; } body.dkt-brand-andalan #cual .dkt-al-cprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 7px; font-family: var(--al-geo); font-weight: 800; font-size: clamp(1.35rem, 2vw, 2rem); color: var(--wink); line-height: 1; } /* 0.9.21: flex-wrap — con dual-pricing (del+ins+badge) el precio de médico envuelve en vez de desbordar */ body.dkt-brand-andalan #cual .dkt-al-cprice .amount { white-space: nowrap; } body.dkt-brand-andalan #cual .dkt-al-cprice .lab { font-family: var(--al-geo); font-weight: 600; font-size: .42em; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; } /* gris AA 5.3:1 (conservado de v8) */ /* Lista VERTICAL de specs (mockup .specs/.spec — sin filas fijas ni rayas). */ body.dkt-brand-andalan #cual .dkt-al-cspecs { display: flex; flex-direction: column; gap: clamp(3px, .6vh, 7px); margin-top: 2px; } /* v8.4 §4.2: gap −1px */ body.dkt-brand-andalan #cual .dkt-al-ccard.cl .dkt-al-cspecs, body.dkt-brand-andalan #cual .dkt-al-ccard.co .dkt-al-cspecs { margin-top: clamp(8px, 1.6vh, 16px); gap: clamp(5px, .9vh, 10px); } /* Bloque mini DENTRO de la tarjeta (dobles) — mockup .mini, precio EN VIVO. */ body.dkt-brand-andalan #cual .dkt-al-cmini { margin-top: 5px; padding-top: 7px; border-top: 1px dashed #ecdfe6; } /* v8.4 §4.2: −4px */ body.dkt-brand-andalan #cual .dkt-al-cmini .mh { display: flex; align-items: center; gap: 6px; font-family: var(--al-geo); font-weight: 800; color: var(--wink); font-size: clamp(.85rem, 1.1vw, 1.02rem); line-height: 1; } /* --wink (no --w como el mockup): a ~14px bold no es "texto grande" y --w no pasa AA 4.5:1 */ body.dkt-brand-andalan #cual .dkt-al-cmini .mt { font-size: clamp(.7rem, .9vw, .82rem); color: #5a5a5a; line-height: 1.22; margin-top: 4px; } body.dkt-brand-andalan #cual .dkt-al-cmini .mp { font-family: var(--al-geo); font-weight: 800; color: var(--wink); font-size: clamp(.95rem, 1.3vw, 1.2rem); margin-top: 3px; } /* (v8.3 §1.2: cuadros con cotas RETIRADOS — .dkt-al-cfig/.dkt-al-cfigs/ .dkt-al-cota/.dkt-al-cframe fuera de PHP y CSS; el mockup no los lleva. Las medidas oficiales §7bis quedan en el brief por si se retoman.) */ /* Fila de spec (mockup .spec: check-list limpio, sin rayas ni filas fijas). */ body.dkt-brand-andalan #cual .dkt-al-cspec { display: flex; align-items: flex-start; gap: 8px; font-size: clamp(.74rem, .95vw, .9rem); color: #3a3a3a; line-height: 1.18; } body.dkt-brand-andalan #cual .dkt-al-cspec svg { flex: none; width: 1.25em; height: 1.25em; margin-top: .05em; fill: none; stroke: var(--w); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan #cual .dkt-al-cspec .v { font-weight: 500; } body.dkt-brand-andalan #cual .dkt-al-pmini { display: inline-block; font-family: var(--al-geo); font-weight: 700; font-size: .62em; color: #fff; background: var(--al-fucsia); padding: .18em .6em; border-radius: 999px; text-transform: lowercase; letter-spacing: .02em; } /* (v8.3 §1.3: chips .dkt-al-cchip RETIRADOS — el mockup no los lleva; el aviso de Comfort volvió a ser su fila 5 de specs y los dobles usan el bloque mini.) */ /* v8.1 §6.1: hook al pie con estrella — tamaños del mockup (.hook). */ body.dkt-brand-andalan #cual .dkt-al-chook { margin-top: auto; display: flex; align-items: center; gap: 8px; font-family: var(--al-geo); font-weight: 700; font-size: clamp(.74rem, .95vw, .9rem); color: var(--wink); background: var(--wtint); border-left: 3px solid var(--w); border-radius: 0 11px 11px 0; padding: .62em .8em; line-height: 1.18; } body.dkt-brand-andalan #cual .dkt-al-chook svg { flex: none; width: 1.2em; height: 1.2em; fill: var(--w); } body.dkt-brand-andalan #cual .dkt-al-cmp-note { font-family: var(--al-geo); font-size: clamp(.7rem, .9vw, .8rem); color: rgba(255, 255, 255, .75); text-align: center; z-index: 2; } @media (max-width: 900px) { body.dkt-brand-andalan #cual { min-height: auto; overflow: visible; } body.dkt-brand-andalan #cual .dkt-al-cards { grid-template-columns: 1fr 1fr; max-width: 560px; } } @media (max-width: 560px) { body.dkt-brand-andalan #cual .dkt-al-cards { grid-template-columns: 1fr; max-width: 380px; } } /* ───────────── SECCIÓN 9 · EFICACIA + MITOS Y VERDADES (#respaldo) ───────────── */ body.dkt-brand-andalan #respaldo { background: linear-gradient(160deg, #6E1142 0%, var(--al-vino) 45%, #430927 100%); display: flex; align-items: center; padding: clamp(16px, 2.6vh, 32px) clamp(16px, 4vw, 40px); overflow: visible; } /* visible: el acordeón abierto no se recorta */ body.dkt-brand-andalan #respaldo .dkt-al-bwave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38%; z-index: 0; pointer-events: none; } body.dkt-brand-andalan #respaldo .dkt-al-bwave svg { width: 100%; height: 100%; display: block; } body.dkt-brand-andalan #respaldo .dkt-al-bwave path { fill: #F4EBE2; fill-opacity: .16; } body.dkt-brand-andalan #respaldo .dkt-al-combo { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.94fr 1.06fr; gap: clamp(20px, 3.2vw, 48px); align-items: start; } body.dkt-brand-andalan #respaldo .dkt-al-reyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--al-geo); font-weight: 600; font-size: clamp(.66rem, .92vw, .82rem); letter-spacing: .2em; text-transform: uppercase; color: var(--al-fucsia); } body.dkt-brand-andalan #respaldo .dkt-al-reyebrow .ln { height: 2px; width: 24px; background: var(--al-fucsia); border-radius: 2px; } body.dkt-brand-andalan #respaldo .dkt-al-rtitle { font-family: var(--al-geo); font-weight: 800; font-size: clamp(1.45rem, 2.6vw, 2.25rem); color: var(--al-vino); letter-spacing: -.02em; line-height: 1.03; margin: 7px 0 clamp(12px, 1.8vh, 18px); } body.dkt-brand-andalan #respaldo .dkt-al-rtitle i { font-family: var(--al-display); font-style: italic; font-weight: 500; color: var(--al-fucsia-ink); } /* v6 §8.1: "Información clara para decidir" SIEMPRE en 1 línea — font reducido (30 chars × ~.58em ≤ ancho útil de la col-l en 1280-1536) + nowrap solo donde la columna es ancha (>560px); en móvil vuelve a envolver sin desbordar. */ body.dkt-brand-andalan #respaldo .col-l .dkt-al-rtitle { font-size: clamp(1.2rem, 2vw, 1.7rem); } @media (min-width: 561px) { body.dkt-brand-andalan #respaldo .col-l .dkt-al-rtitle { white-space: nowrap; } } body.dkt-brand-andalan #respaldo .dkt-al-effcard { background: #fff; border-radius: 22px; padding: clamp(17px, 1.9vw, 27px) clamp(18px, 2vw, 28px); box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .55); } body.dkt-brand-andalan #respaldo .dkt-al-effg { margin-bottom: clamp(9px, 1.5vh, 15px); } body.dkt-brand-andalan #respaldo .dkt-al-effg:last-child { margin-bottom: 0; } body.dkt-brand-andalan #respaldo .dkt-al-effg h3 { font-family: var(--al-geo); font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.1rem); color: var(--al-fucsia-ink); margin-bottom: 6px; } body.dkt-brand-andalan #respaldo .dkt-al-effg ul { list-style: none; display: flex; flex-direction: column; gap: clamp(4px, .7vh, 7px); } body.dkt-brand-andalan #respaldo .dkt-al-effg li { display: flex; align-items: flex-start; gap: 9px; font-size: clamp(.82rem, 1vw, .96rem); color: #3a3338; line-height: 1.25; } body.dkt-brand-andalan #respaldo .dkt-al-effg li svg { flex: none; width: 1.05em; height: 1.05em; margin-top: .16em; fill: none; stroke: #1FA37A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan #respaldo .col-r .dkt-al-reyebrow { color: #fff; } body.dkt-brand-andalan #respaldo .col-r .dkt-al-reyebrow .ln { background: #fff; } body.dkt-brand-andalan #respaldo .col-r .dkt-al-rtitle { color: #fff; } body.dkt-brand-andalan #respaldo .dkt-al-faq { display: flex; flex-direction: column; gap: clamp(6px, .9vh, 9px); } body.dkt-brand-andalan #respaldo details { background: #fff; border-radius: 13px; box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .5); overflow: hidden; } body.dkt-brand-andalan #respaldo summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: clamp(8px, 1.2vh, 12px) 15px; font-family: var(--al-geo); font-weight: 600; color: var(--al-vino); font-size: clamp(.82rem, 1.02vw, .98rem); } body.dkt-brand-andalan #respaldo summary::-webkit-details-marker { display: none; } body.dkt-brand-andalan #respaldo .tag { flex: none; font-family: var(--al-geo); font-weight: 700; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: .3em .72em; border-radius: 999px; } body.dkt-brand-andalan #respaldo .tag.mito { background: var(--al-fucsia); } body.dkt-brand-andalan #respaldo .tag.verdad { background: #1FA37A; } body.dkt-brand-andalan #respaldo .q { flex: 1; line-height: 1.2; } body.dkt-brand-andalan #respaldo .plus { flex: none; width: 18px; height: 18px; position: relative; } body.dkt-brand-andalan #respaldo .plus::before, body.dkt-brand-andalan #respaldo .plus::after { content: ""; position: absolute; background: var(--al-fucsia); border-radius: 2px; transition: transform .2s var(--al-ease), opacity .2s var(--al-ease); } body.dkt-brand-andalan #respaldo .plus::before { left: 8px; top: 2px; width: 2px; height: 14px; } body.dkt-brand-andalan #respaldo .plus::after { left: 2px; top: 8px; width: 14px; height: 2px; } body.dkt-brand-andalan #respaldo details[open] .plus::before { transform: scaleY(0); opacity: 0; } /* v8.1 §7: TARJETAS-BOTÓN de altura constante — con JS el details nunca se despliega (la respuesta vive en el MODAL): .answ se oculta del todo y la sección jamás cambia de alto (adiós reserva de 4.5em). Hover-lift sutil como affordance de "esto se abre". Sin JS (sin html.dkt-js):
nativo con name= exclusivo muestra .answ/.ans — fail-visible. */ html.dkt-js body.dkt-brand-andalan #respaldo .dkt-al-faq details .answ { display: none; } html.dkt-js body.dkt-brand-andalan #respaldo .dkt-al-faq details { transition: transform .18s var(--al-ease), box-shadow .18s; } html.dkt-js body.dkt-brand-andalan #respaldo .dkt-al-faq details:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .55); } html.dkt-js body.dkt-brand-andalan #respaldo .dkt-al-faq summary:focus-visible { outline: 3px solid var(--al-fucsia); outline-offset: 2px; border-radius: 13px; } body.dkt-brand-andalan #respaldo .answ { display: grid; grid-template-rows: 1fr; overflow: hidden; } body.dkt-brand-andalan #respaldo .ans { min-height: 0; padding: 0 16px 12px 58px; font-size: clamp(.76rem, .94vw, .88rem); color: #4a3a44; line-height: 1.36; } /* v8.1 §7: MODAL — overlay centrado DENTRO de la sección (absolute → no tapa el menú fijo); pop scale .94→1 + fade (GPU-only, .25s); velo clickeable. En móvil (sección apilada más alta que el viewport) pasa a fixed para que la tarjeta siempre quede a la vista. reduced-motion: §8 lo deja estático. */ html.dkt-al-modal-open { overflow: hidden; } body.dkt-brand-andalan #respaldo .dkt-al-mmodal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: clamp(18px, 5vh, 48px) clamp(16px, 4vw, 48px); } body.dkt-brand-andalan #respaldo .dkt-al-mmodal[hidden] { display: none; } body.dkt-brand-andalan #respaldo .dkt-al-mmodal__veil { position: absolute; inset: 0; background: rgba(31, 3, 18, .68); cursor: pointer; opacity: 0; transition: opacity .2s ease; } /* v8.3 §4: velo un paso más oscuro */ body.dkt-brand-andalan #respaldo .dkt-al-mmodal.is-open .dkt-al-mmodal__veil { opacity: 1; } body.dkt-brand-andalan #respaldo .dkt-al-mmodal__card { position: relative; z-index: 1; width: min(680px, 100%); background: #fff; border-radius: 18px; padding: clamp(26px, 4vh, 38px) clamp(24px, 3vw, 42px) clamp(24px, 3.4vh, 34px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65); outline: 0; } /* v8.3 §4: tarjeta más ancha + padding mayor */ body.dkt-brand-andalan #respaldo .dkt-al-mmodal.is-open .dkt-al-mmodal__card { animation: dkt-al-mpop .25s var(--al-ease) both; } @keyframes dkt-al-mpop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } body.dkt-brand-andalan #respaldo .dkt-al-mmodal__x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #F6E7EE; color: var(--al-vino); font-family: var(--al-geo); font-size: .95rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .18s var(--al-ease); } body.dkt-brand-andalan #respaldo .dkt-al-mmodal__x:hover { background: #F0D7E3; transform: rotate(90deg); } body.dkt-brand-andalan #respaldo .dkt-al-mmodal__x:focus-visible { outline: 3px solid var(--al-fucsia); outline-offset: 2px; } body.dkt-brand-andalan #respaldo .dkt-al-mmodal__tag { display: inline-block; font-size: .69rem; } /* v8.3 §4: chip ~1.15× (base .tag .6rem) */ body.dkt-brand-andalan #respaldo .dkt-al-mmodal__q { font-family: var(--al-geo); font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.6rem); color: var(--al-vino); line-height: 1.2; margin: 11px 0 9px; } /* v8.3 §4 */ body.dkt-brand-andalan #respaldo .dkt-al-mmodal__a { font-family: var(--al-body); font-size: clamp(.9rem, 1.1vw, 1rem); color: #4a3a44; line-height: 1.5; } @media (max-width: 900px) { body.dkt-brand-andalan #respaldo .dkt-al-mmodal { position: fixed; z-index: 120; } } @media (max-width: 900px) { body.dkt-brand-andalan #respaldo { min-height: auto; overflow: visible; } body.dkt-brand-andalan #respaldo .dkt-al-combo { grid-template-columns: 1fr; gap: 22px; max-width: 560px; } } /* ───────────── SECCIÓN 10 · CIERRE / CONTACTO + FOOTER (#contacto) ───────────── v8.5 §4 — SIN scroll-snap-align (no hace falta para "entrar": la compuerta JS apaga el snap apenas Mitos empieza a salir — bottom(#respaldo) 92/98%). Desde el CTA hasta el footer el scroll es 100% libre; al subir, el snap se restaura con Mitos casi asentado y re-imanta ahí. */ body.dkt-brand-andalan #contacto { min-height: 0; overflow: visible; scroll-margin-top: var(--al-off); scroll-snap-align: none; scroll-snap-stop: normal; display: block; } /* 0.9.19 · CIERRE v9 (mockup aprobado 2026-07-27): GRAN FINAL en UN degradado continuo magenta→vino (estilo Home) de CTA a footer. Los bloques internos se vuelven transparentes (la banda de pagos queda blanca a propósito, como en el Home). Sustituye al degradado 0.9.18 que quedaba tapado por los fondos internos (causa raíz diagnosticada del "no se ve"). */ body.dkt-brand-andalan #contacto.dkt-al-cierre { background: linear-gradient(172deg, #E80B7C 0%, var(--dkt-magenta, #A50050) 30%, #7C0C44 62%, var(--al-vino) 84%, #3F0A26 100%); } body.dkt-brand-andalan #contacto .dkt-al-ctaband { position: relative; min-height: calc(72svh - var(--al-off)); background: transparent; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(40px, 7vh, 80px) clamp(16px, 4vw, 40px); overflow: hidden; } body.dkt-brand-andalan #contacto .dkt-al-ctaband::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%); pointer-events: none; } body.dkt-brand-andalan #contacto .dkt-al-cta__logo { height: clamp(34px, 4.6vh, 46px); width: auto; margin: 0 auto clamp(14px, 2.4vh, 22px); } body.dkt-brand-andalan #contacto .dkt-al-cta { position: relative; z-index: 1; max-width: 760px; } /* v6 §9.1: H2 más pequeño y SIN itálica (lo "curveado" era la Fraunces itálica); "tu decisión!" subrayado (thickness 3px, offset 6px). */ body.dkt-brand-andalan #contacto .dkt-al-cta h2 { font-family: var(--al-display); font-style: normal; font-weight: 400; font-size: clamp(1.8rem, 4vw, 3.2rem); color: #fff; line-height: 1.02; letter-spacing: -.01em; } body.dkt-brand-andalan #contacto .dkt-al-cta .dkt-al-ctau { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: currentColor; } /* v6 §9.4 FIX de especificidad verificado: esta regla (0,1,2,2) le ganaba a .dkt-al-cta-compliance (0,1,2,1) → el compliance salía 19.2px. Con :not() la regla general deja de alcanzarlo y el compliance queda en su ~9-11px. */ body.dkt-brand-andalan #contacto .dkt-al-cta p:not(.dkt-al-cta-compliance) { font-family: var(--al-body); font-size: clamp(.98rem, 1.5vw, 1.25rem); color: rgba(255, 255, 255, .92); margin-top: 14px; line-height: 1.45; max-width: 560px; margin-left: auto; margin-right: auto; } body.dkt-brand-andalan #contacto .dkt-al-wa { display: inline-flex; align-items: center; gap: 11px; margin-top: clamp(20px, 3vh, 30px); font-family: var(--al-geo); font-weight: 700; font-size: clamp(.95rem, 1.3vw, 1.12rem); color: #fff; background: #25D366; padding: .9em 2em; border-radius: 999px; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .45), 0 4px 14px -4px rgba(37, 211, 102, .5); transition: transform .18s, filter .18s; } body.dkt-brand-andalan #contacto .dkt-al-wa:hover { transform: translateY(-2px); filter: brightness(1.05); } body.dkt-brand-andalan #contacto .dkt-al-wa svg { width: 1.3em; height: 1.3em; fill: #fff; } body.dkt-brand-andalan #contacto .dkt-al-cta-compliance { font-family: var(--al-geo); font-weight: 500; font-size: clamp(.58rem, .72vw, .7rem); color: rgba(255, 255, 255, .72); margin-top: clamp(18px, 2.6vh, 26px); letter-spacing: .01em; } /* Garantías GLASS integradas al degradado (v9: fuera la banda crema que cortaba). */ body.dkt-brand-andalan #contacto .dkt-al-guar { background: transparent; border-top: 0; } body.dkt-brand-andalan #contacto .dkt-al-guar .dkt-al-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 20px); padding-top: clamp(14px, 2.4vh, 26px); padding-bottom: clamp(26px, 4.4vh, 46px); } body.dkt-brand-andalan #contacto .dkt-al-feat { display: flex; align-items: center; gap: 13px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; padding: 15px 17px; backdrop-filter: blur(6px); transition: background .25s var(--al-ease), transform .25s var(--al-ease); } body.dkt-brand-andalan #contacto .dkt-al-feat:hover { background: rgba(255, 255, 255, .15); transform: translateY(-3px); } body.dkt-brand-andalan #contacto .dkt-al-feat .ic { flex: none; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; } body.dkt-brand-andalan #contacto .dkt-al-feat .ic svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan #contacto .dkt-al-feat h4 { font-family: var(--al-geo); font-weight: 700; font-size: clamp(.86rem, 1.05vw, .95rem); color: #fff; line-height: 1.2; } body.dkt-brand-andalan #contacto .dkt-al-feat p { font-size: clamp(.72rem, .9vw, .8rem); color: rgba(255, 255, 255, .75); line-height: 1.35; margin-top: 3px; } body.dkt-brand-andalan #contacto .dkt-al-pay { background: #fff; border-top: 1px solid #f0e2ea; } body.dkt-brand-andalan #contacto .dkt-al-pay .dkt-al-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; padding: clamp(15px, 2vh, 22px) clamp(18px, 3vw, 44px); } body.dkt-brand-andalan #contacto .dkt-al-paygroup { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; } body.dkt-brand-andalan #contacto .dkt-al-pdiv { width: 1px; align-self: stretch; min-height: 32px; background: #e6d8ca; } body.dkt-brand-andalan #contacto .dkt-al-payslot { display: flex; align-items: center; justify-content: center; gap: 7px; } body.dkt-brand-andalan #contacto .dkt-al-payslot img { height: auto; display: block; } body.dkt-brand-andalan #contacto .dkt-al-payslot svg { flex: none; width: 22px; height: 18px; fill: none; stroke: #5a4a52; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan #contacto .dkt-al-payslot .nm { font-family: var(--al-geo); font-weight: 700; font-size: .78rem; color: #5a4a52; white-space: nowrap; } /* Chips "Efectivo / Contra entrega" = copia del Home (.dkt-pay__chip). */ body.dkt-brand-andalan #contacto .dkt-al-paychip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; background: #fff; border: 1px solid #eadfd6; border-radius: 14px; box-shadow: 0 1px 3px rgba(95, 14, 57, .06); } body.dkt-brand-andalan #contacto .dkt-al-paychip svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--al-fucsia-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan #contacto .dkt-al-paychip--cash svg { stroke: #1E9E52; } body.dkt-brand-andalan #contacto .dkt-al-paychip b { display: block; font: 600 .8rem/1.1 var(--al-geo); color: var(--al-vino); } body.dkt-brand-andalan #contacto .dkt-al-paychip small { display: block; font: 500 .62rem/1.2 var(--al-body); color: #8a7580; letter-spacing: .02em; } body.dkt-brand-andalan #contacto .dkt-al-foot { background: transparent; color: rgba(255, 255, 255, .82); } body.dkt-brand-andalan #contacto .dkt-al-foot .dkt-al-wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(22px, 4vw, 60px); padding-top: clamp(30px, 5vh, 52px); padding-bottom: clamp(24px, 3vh, 34px); } body.dkt-brand-andalan #contacto .dkt-al-fcol .flogo { height: 30px; width: auto; margin-bottom: 14px; } body.dkt-brand-andalan #contacto .dkt-al-fcol .fdesc { font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .78); max-width: 380px; } body.dkt-brand-andalan #contacto .dkt-al-fcol .freg { font-size: .74rem; line-height: 1.5; color: rgba(255, 255, 255, .5); margin-top: 12px; } body.dkt-brand-andalan #contacto .dkt-al-fcol h5 { font-family: var(--al-geo); font-weight: 700; font-size: .95rem; color: #fff; margin-bottom: 13px; } body.dkt-brand-andalan #contacto .dkt-al-fcol ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } /* v6 §10: sin la sangría heredada de 54px — los enlaces alinean bajo "Andalan"/"Ayuda" */ body.dkt-brand-andalan #contacto .dkt-al-fcol li a { font-size: .9rem; color: rgba(255, 255, 255, .8); transition: color .15s; } body.dkt-brand-andalan #contacto .dkt-al-fcol li a:hover { color: #fff; } body.dkt-brand-andalan #contacto .dkt-al-fsocial { display: flex; gap: 11px; margin-top: 18px; } body.dkt-brand-andalan #contacto .dkt-al-fsocial a, body.dkt-brand-andalan #contacto .dkt-al-fsocial .soon { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); display: grid; place-items: center; transition: background .18s, transform .18s; } body.dkt-brand-andalan #contacto .dkt-al-fsocial a:hover { background: var(--al-fucsia); border-color: var(--al-fucsia); transform: translateY(-2px); } body.dkt-brand-andalan #contacto .dkt-al-fsocial .soon { opacity: .5; } body.dkt-brand-andalan #contacto .dkt-al-fsocial svg { width: 19px; height: 19px; } body.dkt-brand-andalan #contacto .dkt-al-fbar { border-top: 1px solid rgba(255, 255, 255, .12); } /* v8 §9.1: padding-bottom amplio — el WhatsApp flotante (burbuja inf-der ~84px) ya no tapa la línea "... Distribuidor autorizado ARCSA". */ body.dkt-brand-andalan #contacto .dkt-al-fbar .dkt-al-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 14px; padding-bottom: 88px; font-size: .76rem; color: rgba(255, 255, 255, .55); font-family: var(--al-geo); } @media (max-width: 900px) { body.dkt-brand-andalan #contacto .dkt-al-guar .dkt-al-wrap { grid-template-columns: 1fr 1fr; } body.dkt-brand-andalan #contacto .dkt-al-foot .dkt-al-wrap { grid-template-columns: 1fr; gap: 26px; } } @media (max-width: 540px) { body.dkt-brand-andalan #contacto .dkt-al-guar .dkt-al-wrap { grid-template-columns: 1fr; } } /* ============================================================================= 7 · RESPONSIVE base ============================================================================= */ @media (max-width: 900px) { /* "Colapsa nav" (design doc §2): se ocultan los enlaces de sección, NUNCA los iconos de usuario/carrito (comercio). §B3.1: la navegación móvil la da el hamburguesa (botón visible solo con JS vía html.dkt-js) + panel .is-open. */ body.dkt-brand-andalan .dkt-al-menu__nav > a { display: none; } html.dkt-js body.dkt-brand-andalan .dkt-al-menu__burger { display: inline-flex; } body.dkt-brand-andalan .dkt-al-menu__mnav.is-open { display: flex; } } /* (v6: el snap base ya es proximity global — sin override móvil.) */ /* ============================================================================= 8 · REDUCED MOTION — sin snap imantado ni scroll suave ============================================================================= */ @media (prefers-reduced-motion: reduce) { html:has(body.dkt-brand-andalan) { scroll-behavior: auto; scroll-snap-type: none; } body.dkt-brand-andalan .dkt-al *, body.dkt-brand-andalan .dkt-al-menu * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } body.dkt-brand-andalan .dkt-al-cue { animation: none !important; } /* v6 §1: todo VISIBLE sin animación — anula los estados ocultos del motor por panel (el JS además activa todos los paneles bajo reduced-motion). */ html.dkt-js body.dkt-brand-andalan .dkt-al-panel .b, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-wbullets li, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-bwave, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-howto__wrap, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-benefits__head, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-cmp-head, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-cards, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-cmp-note, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-combo, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-cta, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-guar, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-pay, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-foot, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-rivers, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-benlines { opacity: 1 !important; animation: none !important; } } /* ============================================================================ 9 · PULIDOS RONDA 2 (auditoría en vivo · Cowork 30-jun): color de marca en el botón/precio nativos de WC, packshots recortados re-encajados por ALTURA, y sellos del mundo doble a la derecha (sin colisión con los bullets). Los packshots/devices se recortaron al bounding-box alfa y se optimizaron (12.8 MB → ~0.5 MB) para que el anclaje por altura funcione y la carga sea ágil. ============================================================================ */ /* (v9/0.9.21: las reglas de botones de mundo min-901/max-900 y las píldoras de .dkt-al-acts murieron con el layout manual — los botones ahora viven DENTRO de la tarjeta de compra, ver MUNDOS v9. Se conserva lo transversal:) */ /* Precio WC hereda el color del contenedor — antes salía morado por Astra. */ body.dkt-brand-andalan .dkt-al .woocommerce-Price-amount, body.dkt-brand-andalan .dkt-al .woocommerce-Price-amount bdi { color: inherit !important; } /* Devices con brazos blancos: perfil suave en la esfera del COMPARADOR. */ body.dkt-brand-andalan #cual .dkt-al-cmed img { filter: drop-shadow(0 0 2px rgba(40, 40, 40, .55)); } /* (v9/0.9.21: el LAYOUT MANUAL v8.2 completo fue retirado — los mundos vuelven a grid EN FLUJO de 3 columnas; ver MUNDOS v9 arriba.) */ /* ============================================================================ ASPECT-RATIO BLOQUEADO en las imágenes de producto del landing (0.9.9 · aprobado 2026-07-26): object-fit:contain en todos los packshots/devices → en móvil/tablet la foto NUNCA se deforma aunque su caja se recorte. ========================================================================== */ body.dkt-brand-andalan .dkt-al-packstage img, body.dkt-brand-andalan .dkt-al-bcstage img, body.dkt-brand-andalan .dkt-al-cmed img, body.dkt-brand-andalan .dkt-al-howrow__illu img{ object-fit:contain; } /* (0.9.20: el bloque estatico 0.9.17 de Beneficios fue reemplazado por los RIOS — ver seccion #beneficios arriba.) */ /* --- AIRE en las secciones de línea (0.9.17, handoff §2 Andalan-2): bullets SIEMPRE en una columna y respiración en la zona device+precio+botones (aplica a Classic/Comfort/Silverflex/Copperflex por igual). --- */ body.dkt-brand-andalan .dkt-al-wbullets { display: flex; flex-direction: column; gap: 12px; max-width: 46ch; } body.dkt-brand-andalan .dkt-al-wbullets li { line-height: 1.4; } /* 0.9.26: el aire 0.9.17 del comparador se COMPRIME (la sección desbordaba el 100svh — revisión Ricardo): specs 8px, hook 10px. */ body.dkt-brand-andalan .dkt-al-cspec { margin-bottom: 8px; } body.dkt-brand-andalan .dkt-al-chook { margin-top: 10px; } /* (0.9.19: la regla 0.9.18 del degradado del cierre se movió al bloque de la sección 10 — el degradado ahora vive en #contacto.dkt-al-cierre y los bloques internos son transparentes, así que ya no hace falta el !important.) */ /* ============================================================================= DUAL-PRICING (médico) en el COMPARADOR "¿Cuál elegir?" (0.9.21 · handoff §1): el motor pinta + + badge "Precio Profesional" y aquí se montaba sobre la tarjeta. Jerarquía: tachado chico gris · precio vigente normal · badge como pill discreta en línea propia. (En los mundos lo resuelve la tarjeta de compra; esto cubre .dkt-al-cprice y el bloque mini.) ============================================================================= */ body.dkt-brand-andalan .dkt-al-cprice del, body.dkt-brand-andalan .dkt-al-cmini .mp del { font-size: .68em; font-weight: 600; color: #8a8f94; opacity: 1; margin-right: 4px; } body.dkt-brand-andalan .dkt-al-cprice ins, body.dkt-brand-andalan .dkt-al-cmini .mp ins { text-decoration: none; background: none; } body.dkt-brand-andalan .dkt-al-ccard .dkt-precio-doctor { display: inline-flex; align-items: center; font: 700 .54rem/1 var(--al-geo); letter-spacing: .05em; text-transform: uppercase; color: var(--al-fucsia-ink); background: #FFE7F2; border: 1px solid #FFC6E3; border-radius: 999px; padding: 4px 9px; margin: 4px 0 0; white-space: nowrap; } /* ═══════════ 0.9.61 · PRUEBA: arte de campaña DKT en el hero de la landing ═══════════ Mismo patrón que Prudence/Home: arte a z:0 bajo el __veil; placeholder oculto con --has-art (el __phbadge vive FUERA de __ph → se oculta aparte); en ?hero_art=solo se ocultan title/lead/sub y quedan el wordmark Andalan y el contenido de compra. */ body.dkt-brand-andalan .dkt-al-hero > .dkt-hero__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; } body.dkt-brand-andalan .dkt-al-hero > .dkt-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--art-focus-h, 50% 50%); display: block; } @media (max-width: 767px) { body.dkt-brand-andalan .dkt-al-hero > .dkt-hero__art img { object-position: var(--art-focus-v, 50% 50%); } } body.dkt-brand-andalan .dkt-al-hero > .dkt-hero__scrim { display: none; } body.dkt-brand-andalan .dkt-al-hero--has-art .dkt-al-hero__ph, body.dkt-brand-andalan .dkt-al-hero--has-art .dkt-al-hero__phbadge { display: none; } body.dkt-brand-andalan .dkt-al-hero--art-solo .dkt-al-hero__title, body.dkt-brand-andalan .dkt-al-hero--art-solo .dkt-al-hero__lead, body.dkt-brand-andalan .dkt-al-hero--art-solo .dkt-al-hero__sub { display: none; }