/* ============================================================================= 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; } body.dkt-brand-andalan #comfort { --w: #E0773A; --w-ink: #B5571E; --w-deep: #7E3D12; --w-tint: #FBEFE6; } 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-logo { animation: dkt-al-in-fade .5s var(--al-ease) .03s 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-box, body.dkt-brand-andalan .dkt-al-world.is-active .b-box1 { animation: dkt-al-in-pack .8s var(--al-ease) .09s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-box2 { animation: dkt-al-in-pack .8s var(--al-ease) .14s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-seal, body.dkt-brand-andalan .dkt-al-world.is-active .b-selloplata, body.dkt-brand-andalan .dkt-al-world.is-active .b-sellomini { animation: dkt-al-in-pop .55s cubic-bezier(.34, 1.56, .64, 1) .23s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-medallion, body.dkt-brand-andalan .dkt-al-world.is-active .b-device1 { animation: dkt-al-in-pop .6s cubic-bezier(.34, 1.56, .64, 1) .18s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-device2 { animation: dkt-al-in-pop .6s cubic-bezier(.34, 1.56, .64, 1) .24s 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; } body.dkt-brand-andalan .dkt-al-world.is-active .b-info1, body.dkt-brand-andalan .dkt-al-world.is-active .b-info2 { animation: dkt-al-in-rise .5s var(--al-ease) .30s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-subtitle { animation: dkt-al-in-rise .5s var(--al-ease) .30s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-price { animation: dkt-al-in-rise .5s var(--al-ease) .34s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-buttons, body.dkt-brand-andalan .dkt-al-world.is-active .b-btn1, body.dkt-brand-andalan .dkt-al-world.is-active .b-btn2 { animation: dkt-al-in-rise .5s var(--al-ease) .37s backwards; } body.dkt-brand-andalan .dkt-al-world.is-active .b-usephrases { animation: dkt-al-in-rise .55s var(--al-ease) .41s backwards; } /* 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. */ body.dkt-brand-andalan #beneficios .dkt-al-benefits__wrap { position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: clamp(26px, 5vh, 48px); padding-bottom: clamp(10px, 2vh, 20px); width: 100%; } /* v8 §5.2: cabecera+mosaico enmarcados juntos en el 100svh */ body.dkt-brand-andalan #beneficios .dkt-al-benefits__head { text-align: center; color: #fff; max-width: 62ch; margin: 0 auto clamp(6px, 1vh, 12px); } 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; } body.dkt-brand-andalan #beneficios .dkt-al-mosaic { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, minmax(0, 1fr)); /* v8.4 §2.3: el cuadro grande g1 ("Libre de hormonas") se MUDA de B3:C4 a E3:F4 (centro-derecha, balance pedido por Ricardo). Re-tejido mínimo: solo cambian las filas 2-4 — t6 pasa a col B, el chip d3 a col C y s10 sube a la fila 2; todas las áreas siguen rectangulares (trama intacta). */ grid-template-areas: "d4 w5 w5 w4 w4 s01 s02 d1" "d4 s03 w3 w3 s04 s10 s05 d1" "s06 t6 d3 s07 g1 g1 w6 w6" "s08 t6 d3 s09 g1 g1 s11 t3" "t4 g2 g2 d2 w1 w1 s12 t3" "t4 g2 g2 d2 s13 w2 w2 s14" "t2 t5 s15 t1 s16 s17 g3 g3" "t2 t5 s18 t1 s19 s20 g3 g3"; /* §B1.4: flex-basis 0 (antes auto) → la altura del grid la fija el espacio RESTANTE del panel (658px − head − hint), no el max-content de las filas (el diuchip de 2 filas empujaba +72px). Con altura definida, las filas minmax(0,1fr) reparten parejo y los chips recortan con overflow:hidden. En ≤820px vuelve a auto (media query abajo): apilado móvil crece libre. */ gap: 6px; width: 100%; flex: 1 1 0; align-self: stretch; min-height: 0; max-height: 63vh; /* v8.4 §2.2: cápsulas ~12% menos altas — el aire sobrante queda DEBAJO del mosaico */ padding: 8px; border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 20px; background: rgba(255, 255, 255, .04); } body.dkt-brand-andalan #beneficios .dkt-al-vchip { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; min-height: 0; padding: 3px 8px; border-radius: 12px; border: 1.5px solid transparent; font-family: var(--al-geo); font-weight: 600; font-size: clamp(.68rem, 1.4vh, .9rem); /* v6 §5.2: Poppins +1pt (salia Fraunces 11px) */ line-height: 1.08; text-align: center; white-space: normal; overflow: hidden; cursor: pointer; user-select: none; will-change: transform; transition: transform .25s var(--al-ease), box-shadow .25s, opacity .22s ease, background .3s, color .3s; } body.dkt-brand-andalan #beneficios .dkt-al-vchip.is-grande { flex-direction: column; gap: 5px; padding: 6px 10px; } body.dkt-brand-andalan #beneficios .dkt-al-vchip.is-alta { flex-direction: column; gap: 5px; } body.dkt-brand-andalan #beneficios .dkt-al-vchip.is-chica { gap: 4px; } body.dkt-brand-andalan #beneficios .dkt-al-vchip .ic { width: 1.25em; height: 1.25em; flex: none; } body.dkt-brand-andalan #beneficios .dkt-al-vchip.is-grande .ic { width: 1.9em; height: 1.9em; } body.dkt-brand-andalan #beneficios .dkt-al-vchip.is-alta .ic { width: 1.6em; height: 1.6em; } body.dkt-brand-andalan #beneficios .dkt-al-vchip:hover { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 26px rgba(0, 0, 0, .45); z-index: 2; } body.dkt-brand-andalan #beneficios .dkt-al-vchip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } body.dkt-brand-andalan #beneficios .dkt-al-vchip.t-fill { background: var(--al-fucsia); color: #fff; border-color: #ff79c0; } body.dkt-brand-andalan #beneficios .dkt-al-vchip.t-white { background: #fff; color: var(--al-fucsia-ink); border-color: var(--al-fucsia); } /* v7 §6.2: texto #C20063 (AA 6.0:1 sobre blanco) + borde fucsia Andalan */ body.dkt-brand-andalan #beneficios .dkt-al-vchip.t-vino { background: rgba(40, 4, 22, .5); color: #fff; border-color: rgba(255, 255, 255, .3); } /* v7 §6.1 FIX: el contenido desbordaba la cápsula — silueta con alto en vh de viewport (22px a 650 · 26px a 768 · tope 30px; la silueta mide 1.94× su ancho), nombre .72rem, tag .5rem, gaps/padding mínimos. En celda de 2 filas: ~66px de contenido vs ~81px útiles a 1280×650 y ~77 vs ~107 a 1366×768. */ body.dkt-brand-andalan #beneficios .dkt-al-diuchip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(40, 4, 22, .5); color: #fff; padding: 3px 4px; } body.dkt-brand-andalan #beneficios .dkt-al-diushape { width: clamp(22px, 3.4vh, 30px); height: auto; flex: none; } body.dkt-brand-andalan #beneficios .dkt-al-diuchip__nm { font-family: var(--al-display); font-style: italic; font-size: .72rem; line-height: 1; } /* nombre conserva la italica Fraunces como acento */ body.dkt-brand-andalan #beneficios .dkt-al-diuchip__tg { font-family: var(--al-geo); font-weight: 600; font-size: .5rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } /* v6 §5.4: al activarse el panel, las capsulas entran "ordenandose" — offsets y delay ALEATORIOS por capsula (props inline --sx/--sy/--sd del script del mosaico; total ≤900ms: delay ≤.55s + .35s). backwards → al terminar rigen los estilos naturales (hover/rotacion FLIP intactos). */ html.dkt-js body.dkt-brand-andalan #beneficios:not(.is-active) .dkt-al-vchip, html.dkt-js body.dkt-brand-andalan #beneficios:not(.is-active) .dkt-al-diuchip { opacity: 0; } html.dkt-js body.dkt-brand-andalan #beneficios:target:not(.is-active) .dkt-al-vchip, html.dkt-js body.dkt-brand-andalan #beneficios:target:not(.is-active) .dkt-al-diuchip { opacity: 1; } body.dkt-brand-andalan #beneficios.is-active .dkt-al-vchip, body.dkt-brand-andalan #beneficios.is-active .dkt-al-diuchip { animation: dkt-al-chipin .35s var(--al-ease) var(--sd, 0s) backwards; } @keyframes dkt-al-chipin { from { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 26px)) scale(.9); } to { opacity: 1; transform: none; } } @media (max-width: 820px) { body.dkt-brand-andalan #beneficios .dkt-al-mosaic { grid-template-rows: repeat(8, minmax(40px, 1fr)); flex: 1 1 auto; } } /* §B3.2 (decisión de diseño Ricardo 02-jul): a ≤560px el 8×8 se re-mapea a 4 columnas × 16 filas SIN huecos, conservando los 4 tamaños de cápsula (grande 2×2 · ancha 2×1 · alta 1×2 · chica 1×1) y los 4 diuchips (1×2). Las 39 áreas del server (inline grid-area) quedan todas definidas → nada cae a colocación implícita. Filas minmax(44px, auto) = táctil y sin corte. */ @media (max-width: 560px) { body.dkt-brand-andalan #beneficios .dkt-al-mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(16, minmax(44px, auto)); grid-template-areas: "g1 g1 d1 s01" "g1 g1 d1 s02" "w1 w1 t1 d2" "s03 s04 t1 d2" "g2 g2 t2 s05" "g2 g2 t2 s06" "w2 w2 s07 t3" "s08 s09 s10 t3" "d3 w3 w3 t4" "d3 s11 s12 t4" "g3 g3 w4 w4" "g3 g3 s13 s14" "t5 w5 w5 d4" "t5 s15 s16 d4" "t6 s17 w6 w6" "t6 s18 s19 s20"; } body.dkt-brand-andalan #beneficios .dkt-al-diushape { width: 28px; } } /* ───────────── 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; } /* ───────────── SECCIONES DE PRODUCTO (mundos) · BASE COMPARTIDA v8 §6 (#classic/#comfort/#silverflex/#copperflex) ───────────── RE-COMPOSICIÓN (brief v8 §6, espejo del mundo "Femenino" de Prudence): GRID de 2 columnas EN FLUJO — izquierda texto (eyebrow → título → tagline → bullets → bloque de venta SOBRE la ola), derecha packshot(s) -trim anclados por ALTURA + medallón del dispositivo abajo-izq de ESA columna (celdas separadas → el bullet largo ya no puede quedar tapado). Solo logo, sello(s) y silueta siguen ABSOLUTOS. Cada mundo trae su OLA PROPIA (forma/capas distintas, SVG inline en el template) — cambiar de mundo = entrar a otro mundo, no pasar slides. Color por mundo vía --w/--w-ink/--w-deep/--w-tint (scopeado por #id en §3). Móvil = apilado (media query abajo). */ 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-*) ahora EN FLUJO */ body.dkt-brand-andalan .dkt-al-world .b-logo, body.dkt-brand-andalan .dkt-al-world .b-seal, body.dkt-brand-andalan .dkt-al-world .b-selloplata, body.dkt-brand-andalan .dkt-al-world .b-sellomini, body.dkt-brand-andalan .dkt-al-world .b-silhouette { position: absolute; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wgrid { position: relative; z-index: 3; flex: 1; width: 100%; max-width: 1380px; margin: 0 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: 1.04fr .96fr; column-gap: clamp(14px, 2vw, 30px); padding: clamp(12px, 2.2vh, 24px) clamp(20px, 4vw, 56px) 0; } 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; padding-top: clamp(6px, 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: clamp(10px, 2.2vh, 24px); } /* Bloque de venta (subtítulo itálico + precio + botones — o frases de uso en los dobles) apoyado SOBRE la ola: margin-top auto lo baja al tercio inferior (la geometría de cada ola arranca alto a la izquierda para sostenerlo). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wsell { margin-top: auto; display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 14px); padding-bottom: clamp(26px, 5vh, 48px); } /* Columna derecha: packshot centrado anclado por ALTURA (los -trim tienen caja exacta → los 4 mundos quedan centrados IGUAL); medallón abajo-izq de la col. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--shot { position: relative; display: flex; align-items: center; justify-content: center; } /* v8.1 §5.3: packshot +10% (factor .82→.9, cap 640→700; dobles proporcional). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--shot > .dkt-al-box { height: clamp(300px, calc((100svh - var(--al-off)) * .9), 700px); width: auto; z-index: 2; } /* v8.1 §5.5: medallón +25% (120-190 → 150-230) — arranca en el borde izquierdo de la columna derecha: nunca invade la columna de texto. Sombra escalada. */ body.dkt-brand-andalan .dkt-al-world .b-medallion { position: absolute; left: 0; bottom: clamp(14px, 3.5vh, 36px); width: clamp(150px, 27vh, 230px); aspect-ratio: 1; z-index: 4; } body.dkt-brand-andalan .dkt-al-world .b-medallion .dkt-al-devcircle { box-shadow: 0 20px 42px -12px rgba(0, 0, 0, .4); } /* Mundos DOBLES: packshot principal + mini (~70%), cada uno con su nombre/ precio/botón bajo el empaque (sobre la ola) y su medallón al costado. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--duo { align-items: flex-end; gap: clamp(12px, 1.8vw, 28px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(5px, 1vh, 10px); min-width: 0; padding-bottom: clamp(16px, 3vh, 30px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .dkt-al-box { height: clamp(230px, calc((100svh - var(--al-off)) * .57), 470px); width: auto; z-index: 2; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot--mini .dkt-al-box { height: clamp(160px, calc((100svh - var(--al-off)) * .4), 330px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .b-device1, body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .b-device2 { position: absolute; left: calc(-1 * clamp(10px, 1.2vw, 20px)); bottom: clamp(96px, 17vh, 136px); width: clamp(100px, 18vh, 152px); aspect-ratio: 1; z-index: 5; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .b-info1, body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .b-info2 { text-align: center; } /* Los info de los dobles quedan SOBRE la ola → texto blanco con sombra (AA de texto grande sobre el acento; en móvil se re-oscurecen, media query abajo). */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .dkt-al-pname { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .dkt-al-pprice { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .28); } 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-weyebrow { font-family: var(--al-geo); font-weight: 600; font-size: clamp(.7rem, 1.13vw, 1rem); letter-spacing: .16em; text-transform: uppercase; color: var(--w-ink); display: flex; align-items: center; gap: 10px; } /* AA: texto en --w-ink (contrato del diseño) */ 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: clamp(2.4rem, 6.45vw, 6.6rem); letter-spacing: -.02em; line-height: .95; color: var(--w); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wtag { font-family: var(--al-geo); font-weight: 500; font-size: clamp(.92rem, 1.45vw, 1.45rem); color: var(--w-ink); line-height: 1.25; } /* AA: tagline en --w-ink (≥4.5:1 sobre blanco) */ /* v8.3 §2.1 — CAUSA RAÍZ del descentrado (~90px): el ul heredaba la sangría de listas de Astra (padding/margen), igual que el bug del footer v6 §10. Con el reset, el ICONO arranca al ras del left 4.05% del layout manual. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vh, 14px) 18px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets li { position: relative; padding-left: 21px; font-size: clamp(.86rem, 1.45vw, 1.28rem); color: var(--w-deep); font-weight: 500; line-height: 1.25; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets li::before { content: ""; position: absolute; left: 2px; top: .5em; width: .55em; height: .55em; border-radius: 50%; background: var(--w); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wsub { font-family: var(--al-display); font-style: italic; font-size: clamp(1.1rem, 1.69vw, 1.7rem); color: #fff; line-height: 1.2; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); } /* AA: ≥18px (texto grande) + sombra sobre la ola */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wprice { font-family: var(--al-geo); font-weight: 800; font-size: clamp(1.9rem, 4.3vw, 4.6rem); line-height: 1; color: #fff; text-shadow: 0 3px 12px rgba(0, 0, 0, .22); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wprice .amount { white-space: nowrap; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wprice del { font-size: .55em; opacity: .7; font-weight: 600; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wprice ins { text-decoration: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts { display: flex; gap: 12px; flex-wrap: wrap; } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-add, body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-buy { font-family: var(--al-geo); font-weight: 600; font-size: clamp(.8rem, 1.05vw, 1rem); padding: .85em 1.6em; border-radius: 999px; border: 0; white-space: nowrap; cursor: pointer; text-align: center; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--al-ease), box-shadow .2s, background .2s, color .2s; } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-add { background: #fff; color: var(--w-ink); box-shadow: 0 14px 36px -14px rgba(0, 0, 0, .32); } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-add:hover { transform: translateY(-2px); background: var(--w-tint); } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-buy { background: transparent; color: #fff; border: 1.6px solid rgba(255, 255, 255, .9); } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-buy:hover { background: #fff; color: var(--w-ink); transform: translateY(-2px); } body.dkt-brand-andalan .dkt-al-world .dkt-al-devcircle { width: 100%; height: 100%; border-radius: 50%; background: #fff; border: .5vw solid var(--w); display: grid; place-items: center; overflow: hidden; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35); transition: transform .3s var(--al-ease), box-shadow .3s; } body.dkt-brand-andalan .dkt-al-world .dkt-al-devcircle img { max-height: 82%; width: auto; } body.dkt-brand-andalan .dkt-al-world .dkt-al-box img { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .24)); width: 100%; height: auto; } /* §B2 hover premium de producto (espejo Prudence §2 líneas 202-216): lift suave en packshots y medallones; reduced-motion lo apaga (§8). Nota: los packshots llevan la clase .dkt-al-box en el PROPIO (b-box/b-box1/b-box2) → se cubre img.dkt-al-box además del patrón contenedor .dkt-al-box img, y se les da aquí su drop-shadow base (el selector histórico '.dkt-al-box img' no los alcanzaba). */ body.dkt-brand-andalan .dkt-al-world img.dkt-al-box { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .24)); transition: transform .3s var(--al-ease), filter .3s; } body.dkt-brand-andalan .dkt-al-world .dkt-al-box img { transition: transform .3s var(--al-ease), filter .3s; } body.dkt-brand-andalan .dkt-al-world img.dkt-al-box:hover, body.dkt-brand-andalan .dkt-al-world .dkt-al-box:hover img { transform: translateY(-10px) scale(1.03); filter: drop-shadow(0 34px 48px rgba(0, 0, 0, .36)); } body.dkt-brand-andalan .dkt-al-world .dkt-al-devcircle:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 26px 46px -10px rgba(0, 0, 0, .5); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wsil { opacity: .45; width: 100%; height: auto; } /* v8.1 §5.4: watermark SOBRE la ola (posiciones por mundo abajo), op .45 */ /* v8.4 §3.2: compliance + Reg. San. en UNA SOLA LÍNEA (nowrap, font menor). Anclado por la DERECHA (no por left+width): con nowrap la línea (~500px) crece hacia la IZQUIERDA y termina donde el layout manual la terminaba — con left fijo se saldría del viewport. El WhatsApp puede tapar la esquina (decisión previa de Ricardo). Top por mundo en el bloque §v8.2/v8.3. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wcompliance { position: absolute; right: clamp(10px, 1.2vw, 20px); 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: right; max-width: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); } body.dkt-brand-andalan .dkt-al-world .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-world .dkt-al-seal .n { font-family: var(--al-geo); font-weight: 800; font-size: 42px; fill: var(--w); } body.dkt-brand-andalan .dkt-al-world .dkt-al-seal .y { font-family: var(--al-geo); font-weight: 700; font-size: 12px; letter-spacing: 3px; fill: var(--w-ink); } /* Móvil: apilado simple (todas las secciones de producto) — v8 §6: la grid colapsa a columna (packshot primero), sin ola ni flotantes absolutos. */ @media (max-width: 900px) { body.dkt-brand-andalan .dkt-al-world { min-height: auto; padding: clamp(24px, 7vw, 40px) 18px; flex-direction: column; gap: 14px; align-items: center; text-align: center; } body.dkt-brand-andalan .dkt-al-world .dkt-al-bwave { display: none; } body.dkt-brand-andalan .dkt-al-world .b-logo, body.dkt-brand-andalan .dkt-al-world .b-silhouette, body.dkt-brand-andalan .dkt-al-world .b-seal { display: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wgrid { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt { padding-top: 0; align-items: center; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--txt .b-tagline { max-width: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--shot { order: -1; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcol--shot > .dkt-al-box, body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .dkt-al-box { height: auto; max-height: 38vh; } body.dkt-brand-andalan .dkt-al-world .b-medallion { position: static; width: 116px; margin: 10px auto 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot { padding-bottom: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .b-device1, body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .b-device2 { position: static; width: 92px; margin: 6px auto 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wsell { margin-top: 0; padding-bottom: 0; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets ul { text-align: left; } body.dkt-brand-andalan .dkt-al-world .dkt-al-weyebrow { justify-content: center; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wprice { color: var(--w-deep); text-shadow: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wsub { color: var(--w-ink); text-shadow: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .dkt-al-pname { color: var(--w-ink); text-shadow: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wshot .dkt-al-pprice { color: var(--w-deep); text-shadow: none; } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts { justify-content: center; } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-add { background: var(--w-ink); color: #fff; } body.dkt-brand-andalan .dkt-al-world .dkt-al-acts .dkt-al-buy { color: var(--w-ink); border-color: var(--w); } body.dkt-brand-andalan .dkt-al-world .dkt-al-wcompliance { position: static; color: var(--al-muted); max-width: 100%; } } @media (max-width: 560px) { body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets ul { grid-template-columns: 1fr; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets li { white-space: normal; } } /* Classic (#classic) — v8.2: las posiciones viven en el LAYOUT MANUAL (bloque §v8.2 al final del archivo); aquí solo logo + ola. */ body.dkt-brand-andalan #classic .b-logo { top: 3.5%; right: 2.4%; width: 11.5%; z-index: 10; } body.dkt-brand-andalan #classic .dkt-al-bwave { height: 44%; } /* ola amplia y serena */ /* Comfort (#comfort) — v8.2 ídem + badge mini */ 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); } body.dkt-brand-andalan #comfort .dkt-al-devcircle img { max-height: min(84%, 232px); max-width: 78%; } /* v6 §6.5: cap al tamano intrinseco (117×236) — sin upscale borroso */ body.dkt-brand-andalan #classic .dkt-al-devcircle img { max-height: min(82%, 265px); } /* v6 §6.5: intrinseco 142×269 */ body.dkt-brand-andalan #comfort .b-logo { left: 85.89%; top: 3.03%; width: 12.1%; z-index: 10; } body.dkt-brand-andalan #comfort .b-title { white-space: nowrap; } body.dkt-brand-andalan #comfort .dkt-al-bwave { height: 42%; } /* doble onda suave */ /* ── Mundos de DOS productos (#silverflex / #copperflex): bullets con icono, dúo de packshots, sellos, frases glow ── */ /* v8.1 §5.1: bullets UNIFORMES en los 4 mundos — SIEMPRE 2 columnas parejas. v8.4 §3.1 FIX RAÍZ: estos selectores (0,3,1) PERDÍAN contra las reglas base `.dkt-al-world .dkt-al-wbullets li` (0,4,1) → el padding-left:21px base seguía vivo (el "remanente" que corría el icono), la bolita ::before se pintaba detrás del icono y el font salía al tamaño base. Se scopean con .dkt-al-world (0,5,1): el ICONO queda al ras del x del título, al píxel. */ body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets--icons ul { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(7px, 1.2vh, 13px) 16px; } body.dkt-brand-andalan .dkt-al-world .dkt-al-wbullets--icons li { display: flex; align-items: flex-start; gap: 9px; padding-left: 0; font-size: clamp(.84rem, 1.3vw, 1.14rem); color: var(--w-deep); font-weight: 500; line-height: 1.22; white-space: normal; } /* v8.5 §1: UN punto bajo el base (el fix v8.4 lo dejó demasiado chico) */ 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: 1.45em; height: 1.45em; color: var(--w); margin-top: .04em; } body.dkt-brand-andalan .dkt-al-wbullets--icons .bic svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } body.dkt-brand-andalan .dkt-al-pname { font-family: var(--al-display); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.7rem); color: var(--w-ink); line-height: 1; } body.dkt-brand-andalan .dkt-al-pprice { font-family: var(--al-geo); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.7rem); color: var(--w-deep); line-height: 1; margin-top: 4px; } body.dkt-brand-andalan .dkt-al-pprice .amount { white-space: nowrap; } body.dkt-brand-andalan .dkt-al-pname .dkt-al-minibadge { font-size: .5em; vertical-align: .28em; box-shadow: none; } body.dkt-brand-andalan .dkt-al-agbtn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--al-geo); font-weight: 700; font-size: clamp(.82rem, 1.05vw, 1.02rem); padding: .7em 1.9em; border-radius: 999px; border: 0; background: #fff; color: var(--w-ink); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .4); cursor: pointer; letter-spacing: .02em; text-align: center; transition: transform .2s var(--al-ease); } body.dkt-brand-andalan .dkt-al-agbtn:hover { transform: translateY(-2px); } body.dkt-brand-andalan .dkt-al-usephrases { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18px); } body.dkt-brand-andalan .dkt-al-uprow { display: flex; align-items: center; gap: 11px; color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .55), 0 1px 3px rgba(0, 0, 0, .3); } body.dkt-brand-andalan .dkt-al-uprow .uic { flex: none; width: clamp(28px, 2.4vw, 38px); height: auto; color: #fff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .6)); } body.dkt-brand-andalan .dkt-al-uprow .ut { font-family: var(--al-geo); font-weight: 600; font-size: clamp(.78rem, 1.12vw, 1.05rem); line-height: 1.18; } body.dkt-brand-andalan .dkt-al-uprow .ut b { font-weight: 800; } body.dkt-brand-andalan #silverflex .dkt-al-devcircle, body.dkt-brand-andalan #copperflex .dkt-al-devcircle { border-width: .45vw; } @media (max-width: 900px) { body.dkt-brand-andalan #silverflex .b-selloplata, body.dkt-brand-andalan #silverflex .b-sellomini, body.dkt-brand-andalan #silverflex .b-usephrases, body.dkt-brand-andalan #copperflex .b-selloplata, body.dkt-brand-andalan #copperflex .b-sellomini, body.dkt-brand-andalan #copperflex .b-usephrases { display: none; } } /* Silverflex (#silverflex) — v8.2: posiciones en el LAYOUT MANUAL (final del archivo); aquí solo logo + ola DIAGONAL con brillo. */ body.dkt-brand-andalan #silverflex .dkt-al-bwave { height: 46%; } body.dkt-brand-andalan #silverflex .b-logo { left: 86.69%; top: 3.03%; width: 12.1%; z-index: 10; } body.dkt-brand-andalan .dkt-al-upsingle { font-family: var(--al-display); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.55rem); color: #fff; line-height: 1.34; text-shadow: 0 0 14px rgba(255, 255, 255, .5), 0 1px 3px rgba(0, 0, 0, .3); } /* Copperflex (#copperflex) — v8.2 ídem · ola de ondulación MÁS MARCADA · sin selloPlata (Cu eliminado) */ body.dkt-brand-andalan #copperflex .dkt-al-bwave { height: 46%; } body.dkt-brand-andalan #copperflex .dkt-al-wtitle { font-size: clamp(2.1rem, 5.5vw, 5.6rem); } body.dkt-brand-andalan #copperflex .b-logo { left: 86.69%; top: 3.03%; width: 12.1%; z-index: 10; } /* ───────────── 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; gap: 7px; font-family: var(--al-geo); font-weight: 800; font-size: clamp(1.35rem, 2vw, 2rem); color: var(--wink); line-height: 1; } 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; } body.dkt-brand-andalan #contacto .dkt-al-ctaband { position: relative; min-height: calc(76svh - var(--al-off)); background: linear-gradient(160deg, #E80B7C 0%, var(--al-fucsia-ink) 48%, var(--al-vino) 100%); 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 { 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: var(--al-fucsia-ink); background: #fff; padding: .9em 2em; border-radius: 999px; box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .45); transition: transform .18s; } body.dkt-brand-andalan #contacto .dkt-al-wa:hover { transform: translateY(-2px); } body.dkt-brand-andalan #contacto .dkt-al-wa svg { width: 1.3em; height: 1.3em; fill: #25D366; } 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; } body.dkt-brand-andalan #contacto .dkt-al-guar { background: var(--al-cream); border-top: 1px solid #ece0d4; } body.dkt-brand-andalan #contacto .dkt-al-guar .dkt-al-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 30px); padding-top: clamp(20px, 3vh, 34px); padding-bottom: clamp(20px, 3vh, 34px); } body.dkt-brand-andalan #contacto .dkt-al-feat { display: flex; align-items: center; gap: 13px; } body.dkt-brand-andalan #contacto .dkt-al-feat .ic { flex: none; width: 46px; height: 46px; border-radius: 13px; background: #FFE7F2; display: grid; place-items: center; } body.dkt-brand-andalan #contacto .dkt-al-feat .ic svg { width: 24px; height: 24px; fill: none; stroke: var(--al-fucsia-ink); 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, 1rem); color: var(--al-vino); line-height: 1.1; } body.dkt-brand-andalan #contacto .dkt-al-feat p { font-size: clamp(.74rem, .9vw, .84rem); color: var(--al-muted); line-height: 1.2; margin-top: 2px; } 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; } body.dkt-brand-andalan #contacto .dkt-al-foot { background: #3F0A26; 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-vchip, html.dkt-js body.dkt-brand-andalan .dkt-al-panel .dkt-al-diuchip { 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. ============================================================================ */ /* Botón de compra "Añadir al carrito"/"Agregar" (nativo WC): BLANCO sobre la ola en desktop (como el mockup), texto en --w-ink (AA ≥4.5:1 sobre blanco). En móvil el mundo se apila sobre fondo claro (sin ola) → color de mundo + texto blanco (blanco sobre blanco sería invisible). !important para ganar al .button de Astra. */ @media (min-width: 901px) { body.dkt-brand-andalan .dkt-al a.add_to_cart_button, body.dkt-brand-andalan .dkt-al .dkt-al-add, body.dkt-brand-andalan .dkt-al .dkt-al-agbtn { background: #fff !important; color: var(--w-ink, var(--al-vino)) !important; } } @media (max-width: 900px) { body.dkt-brand-andalan .dkt-al a.add_to_cart_button, body.dkt-brand-andalan .dkt-al .dkt-al-add, body.dkt-brand-andalan .dkt-al .dkt-al-agbtn { background: var(--w-ink, var(--al-fucsia)) !important; color: #fff !important; } } /* Precio WC hereda el color del contenedor (blanco sobre ola / --wink en tarjeta) — 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; } /* v8.1 §5.2: "Añadir al carrito" y "Comprar ahora" IDÉNTICOS en forma — la regla .button de Astra/WC le metía al add_to_cart su radio/padding propios (uno salía más cuadrado). Se fuerza la MISMA píldora en ambos; los dos llevan borde 1.6px (el de --add transparente) → misma altura exacta. El color del borde de --buy lo siguen dando las reglas por contexto (blanco/uva móvil). */ body.dkt-brand-andalan .dkt-al .dkt-al-acts a.add_to_cart_button, body.dkt-brand-andalan .dkt-al .dkt-al-acts .dkt-al-add, body.dkt-brand-andalan .dkt-al .dkt-al-acts .dkt-al-buy { border-radius: 999px !important; padding: .85em 1.6em !important; border-width: 1.6px !important; border-style: solid !important; border-color: transparent; font-family: var(--al-geo) !important; font-weight: 600 !important; font-size: clamp(.8rem, 1.05vw, 1rem) !important; line-height: 1.25 !important; letter-spacing: normal !important; text-transform: none !important; min-height: 0 !important; } body.dkt-brand-andalan .dkt-al .dkt-al-acts .dkt-al-buy { border-color: rgba(255, 255, 255, .9); } @media (max-width: 900px) { body.dkt-brand-andalan .dkt-al .dkt-al-acts .dkt-al-buy { border-color: var(--w); } } /* Enlace "Ver carrito" que WC inyecta tras el AJAX (.added_to_cart) — antes aparecía sin estilo junto a los botones. */ body.dkt-brand-andalan .dkt-al .dkt-al-acts .added_to_cart { align-self: center; font-family: var(--al-geo); font-weight: 600; font-size: clamp(.78rem, 1vw, .95rem); color: #fff; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { body.dkt-brand-andalan .dkt-al .dkt-al-acts .added_to_cart { color: var(--w-ink); } } /* (v8 §6: las alturas de packshot viven en la BASE COMPARTIDA de los mundos — los -trim se anclan por altura dentro de la grid; reglas v6 retiradas.) */ /* (v8.2: los sellos de los dobles se posicionan en el LAYOUT MANUAL de Ricardo — bloque §v8.2 al final del archivo; reglas v8.1 retiradas.) */ /* Devices de plata/cobre tienen BRAZOS BLANCOS → se pierden en el medallón blanco. Un drop-shadow suave los perfila (inofensivo en los devices de color como Classic). */ body.dkt-brand-andalan .dkt-al-devcircle img, body.dkt-brand-andalan #cual .dkt-al-cmed img { filter: drop-shadow(0 0 2px rgba(40, 40, 40, .55)); } /* v8.3: la figura del comparador vuelve a ser la esfera .dkt-al-cmed */ /* ============================================================================= 10 · v8.2 §2 — LAYOUT MANUAL DE RICARDO (los 4 mundos · SOLO desktop >900px) ----------------------------------------------------------------------------- Coordenadas EXACTAS del posicionamiento a mano con editor visual sobre el sitio real (viewport 1280×712 → panel 1265×636). Referencia = % "vs sección" (brief v8.2 §2.1); anchos = W_px/1265×100. Implementación: los wrappers de la grid v8 (wgrid/wcol/wshot/wsell) pasan a display:contents (desaparecen del layout SIN tocar el DOM → el apilado móvil ≤900 queda intacto y los .b-* absolutos resuelven contra el panel, que es relative). margin:0 en .b neutraliza los márgenes v8.1 que desplazarían las coordenadas. CONSECUENCIA DE COLOR (posiciones nuevas): el SUBTÍTULO itálico sube a zona BLANCA (→ tinta --w-ink, sin sombra) y la TAGLINE de los simples baja SOBRE LA OLA (→ blanca 600 con sombra; a ≥18.6px bold es texto grande WCAG → 3:1: azul 3.47 / naranja 3.05). En dobles la tagline queda arriba sobre blanco → conserva tinta. PACKSHOTS: dobles con el W literal de la tabla (verificado: caben en 712/768/812); Classic/Comfort anclados por ALTURA al panel (el W literal 204/190 desbordaría 65/27px — la caja es 1:5 intrínseca; decisión con Ricardo 09-jul: lo grande de verdad vendrá con packshot nuevo). Copperflex: btn1/btn2 INTERCAMBIADOS respecto al export (criterio del brief: emparejar por proximidad — el export cruzaba cada botón bajo el producto equivocado; ver reporte). ============================================================================= */ @media (min-width: 901px) { /* Esqueleto v8 fuera del layout (el DOM no cambia; móvil intacto). */ 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-wshot, body.dkt-brand-andalan .dkt-al-world .dkt-al-wsell { display: contents; } body.dkt-brand-andalan .dkt-al-world .b { position: absolute; margin: 0; z-index: 4; } /* Los márgenes v8.1 de la columna de texto tienen especificidad (0,4,1) y desplazarían las coordenadas absolutas → reset con la MISMA especificidad (este bloque va después en el archivo). */ 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 { margin: 0; } body.dkt-brand-andalan .dkt-al-world .b-silhouette { z-index: 1; } body.dkt-brand-andalan .dkt-al-world .b-box, body.dkt-brand-andalan .dkt-al-world .b-box1, body.dkt-brand-andalan .dkt-al-world .b-box2 { z-index: 2; } body.dkt-brand-andalan .dkt-al-world .b-medallion, body.dkt-brand-andalan .dkt-al-world .b-device1, body.dkt-brand-andalan .dkt-al-world .b-device2, body.dkt-brand-andalan .dkt-al-world .b-info1, body.dkt-brand-andalan .dkt-al-world .b-info2, body.dkt-brand-andalan .dkt-al-world .b-btn1, body.dkt-brand-andalan .dkt-al-world .b-btn2, body.dkt-brand-andalan .dkt-al-world .b-buttons, body.dkt-brand-andalan .dkt-al-world .b-price { z-index: 5; } body.dkt-brand-andalan .dkt-al-world .b-seal, body.dkt-brand-andalan .dkt-al-world .b-selloplata, body.dkt-brand-andalan .dkt-al-world .b-sellomini { z-index: 6; } body.dkt-brand-andalan .dkt-al-world .b-logo { z-index: 10; } body.dkt-brand-andalan .dkt-al-world .b-info1, body.dkt-brand-andalan .dkt-al-world .b-info2, body.dkt-brand-andalan .dkt-al-world .b-btn1, body.dkt-brand-andalan .dkt-al-world .b-btn2 { text-align: center; } /* Subtítulo (zona blanca) ↔ tagline de simples (sobre la ola). */ body.dkt-brand-andalan #classic .dkt-al-wsub, body.dkt-brand-andalan #comfort .dkt-al-wsub { color: var(--w-ink); text-shadow: 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); } /* ── CLASSIC (export Ricardo 1280×712) ── */ body.dkt-brand-andalan #classic .b-eyebrow { left: 4.05%; top: 5.82%; width: 46.72%; } body.dkt-brand-andalan #classic .b-title { left: 4.05%; top: 12.40%; width: 46.72%; } body.dkt-brand-andalan #classic .b-subtitle { left: 4.21%; top: 26.94%; width: 32.41%; } body.dkt-brand-andalan #classic .b-bullets { left: 4.05%; top: 37.35%; width: 62.69%; } /* export −0.22 = drag involuntario → criterio brief: alinear con eyebrow */ body.dkt-brand-andalan #classic .b-price { left: 56.45%; top: 74.5%; width: 12.65%; } /* v8.5 §2.2: centrado óptico bajo la esfera (centro medallón 62.77% − w/2) y 15px debajo de ella */ body.dkt-brand-andalan #classic .b-buttons { left: 41.84%; top: 85%; width: 28.54%; } /* v8.5 §2.3: 88.56→85% — "Comprar ahora" pisaba el compliance (gap ahora ≥18px en los 3 viewports) */ body.dkt-brand-andalan #classic .b-tagline { left: 14%; top: 80.42%; width: 23.64%; max-width: none; } /* v8.5 §2.1: 7→14% — libra la silueta (termina 13.61%) y respira del precio */ body.dkt-brand-andalan #classic .b-box { left: 73.65%; top: 2.18%; height: 95.5%; width: auto; } /* v8.3 nudge: +1% (aire con el medallón) */ body.dkt-brand-andalan #classic .b-medallion { left: 55.18%; top: 42%; bottom: auto; width: 15.18%; } /* v8.4 §3.3b: 55.32→42% — despejado de precio/botones; a 40% tocaba bullets col2 (verificado) */ body.dkt-brand-andalan #classic .b-silhouette { left: 1.36%; top: 70.81%; right: auto; bottom: auto; width: 12.25%; } body.dkt-brand-andalan #classic .b-seal { left: 86.27%; top: 15.70%; width: 11.30%; } body.dkt-brand-andalan #classic .dkt-al-wcompliance { left: auto; right: clamp(10px, 1.2vw, 20px); top: 95.35%; bottom: auto; width: auto; } /* v8.4 §3.2: 1 línea nowrap anclada a la derecha */ /* ── COMFORT ── */ body.dkt-brand-andalan #comfort .b-eyebrow { left: 4.05%; top: 6.45%; width: 46.72%; } body.dkt-brand-andalan #comfort .b-title { left: 4.05%; top: 12.56%; width: 46.72%; } body.dkt-brand-andalan #comfort .b-subtitle { left: 4.13%; top: 27.90%; width: 46.72%; } body.dkt-brand-andalan #comfort .b-bullets { left: 4.05%; top: 36.54%; width: 63.00%; } /* export −0.54 → criterio brief */ body.dkt-brand-andalan #comfort .b-price { left: 55.10%; top: 74.5%; width: 13.75%; } /* v8.5 §2.4: bajo su esfera (centro 61.98% − w/2) */ body.dkt-brand-andalan #comfort .b-buttons { left: 41.21%; top: 85%; width: 27.51%; } /* v8.5 §2.4: gap ≥21px con el compliance */ body.dkt-brand-andalan #comfort .b-tagline { left: 14.80%; top: 84.36%; width: 23.72%; max-width: none; } body.dkt-brand-andalan #comfort .b-box { left: 73.17%; top: 3.87%; height: 94%; width: auto; } /* v8.3 nudge: +1% (aire con el medallón) */ body.dkt-brand-andalan #comfort .b-medallion { left: 54.39%; top: 42%; bottom: auto; width: 15.18%; } /* v8.4 §3.3c: espejo Classic (42% libra "Menos movimientos…" de col2) */ body.dkt-brand-andalan #comfort .b-silhouette { left: 2.26%; top: 70.33%; right: auto; bottom: auto; width: 10.43%; } body.dkt-brand-andalan #comfort .b-seal { left: 85.95%; top: 15.70%; width: 11.70%; } body.dkt-brand-andalan #comfort .dkt-al-wcompliance { left: auto; right: clamp(10px, 1.2vw, 20px); top: 95.83%; bottom: auto; width: auto; } /* v8.4 §3.2 */ /* ── SILVERFLEX (doble) ── */ body.dkt-brand-andalan #silverflex .b-eyebrow { left: 4.05%; top: 7.71%; width: 46.72%; } body.dkt-brand-andalan #silverflex .b-title { left: 4.05%; top: 11%; width: 46.72%; } /* v8.4 §3.4b: −2.5% */ body.dkt-brand-andalan #silverflex .b-tagline { left: 4.05%; top: 27.91%; width: 41.98%; max-width: none; } body.dkt-brand-andalan #silverflex .b-bullets { left: 4.05%; top: 36.74%; width: 49.6%; } /* v8.5 §1: 49→49.6% — con el font nuevo (16.6px @1280) "Flexible y moderno, en forma de Y" necesita 307px de columna para NO envolver; el texto sigue a ~11px del packshot */ body.dkt-brand-andalan #silverflex .b-usephrases { left: 12.19%; top: 83.37%; width: 31.62%; } body.dkt-brand-andalan #silverflex .b-box1 { left: 54.48%; top: 15.29%; width: 9.64%; height: auto; } body.dkt-brand-andalan #silverflex .b-box2 { left: 76.47%; top: 13.92%; width: 9.80%; height: auto; } body.dkt-brand-andalan #silverflex .b-device1 { left: 44.32%; top: 54%; bottom: auto; width: 9.33%; } /* v8.4 §3.4c: −6% */ body.dkt-brand-andalan #silverflex .b-device2 { left: 66.36%; top: 57.05%; bottom: auto; width: 8.93%; } body.dkt-brand-andalan #silverflex .b-info1 { left: 43.54%; top: 75.5%; width: 9.01%; } /* v8.5 §2.4: −1% (mantiene aire con el btn subido) */ body.dkt-brand-andalan #silverflex .b-info2 { left: 65.04%; top: 75%; width: 10.91%; } body.dkt-brand-andalan #silverflex .b-btn1 { left: 43.44%; top: 87.5%; width: 9.41%; } /* v8.5 §2.4: 89.5→87.5% — el botón terminaba a 1.6px del compliance (ahora 14px) */ body.dkt-brand-andalan #silverflex .b-btn2 { left: 65.95%; top: 87%; width: 9.41%; } /* v8.5 §2.4: gap con el compliance 11.6→17.6px */ body.dkt-brand-andalan #silverflex .b-silhouette { left: 0.75%; top: 76.67%; right: auto; bottom: auto; width: 10.12%; } body.dkt-brand-andalan #silverflex .b-seal { left: 87.29%; top: 16.19%; right: auto; width: 10.91%; } body.dkt-brand-andalan #silverflex .b-selloplata { left: 88.20%; top: 38.83%; right: auto; width: 9.33%; } body.dkt-brand-andalan #silverflex .b-sellomini { left: 88.39%; top: 59.10%; right: auto; width: 9.01%; } body.dkt-brand-andalan #silverflex .dkt-al-wcompliance { left: auto; right: clamp(10px, 1.2vw, 20px); top: 95.35%; bottom: auto; width: auto; } /* v8.4 §3.2 */ /* ── COPPERFLEX (doble) ── */ body.dkt-brand-andalan #copperflex .b-eyebrow { left: 4.05%; top: 5.51%; width: 46.72%; } body.dkt-brand-andalan #copperflex .b-title { left: 4.05%; top: 12.09%; width: 46.72%; } /* (v8.3 §2.2: la tagline de Copperflex fue ELIMINADA del template.) */ body.dkt-brand-andalan #copperflex .b-bullets { left: 4.05%; top: 28.47%; width: 51.94%; } /* export −2.59 → criterio brief */ body.dkt-brand-andalan #copperflex .b-usephrases { left: 12.75%; top: 83.83%; width: 30.04%; } body.dkt-brand-andalan #copperflex .b-box1 { left: 56.10%; top: 23.65%; width: 9.64%; height: auto; } body.dkt-brand-andalan #copperflex .b-box2 { left: 77.81%; top: 18.65%; width: 10.6%; height: auto; } /* v8.4 §1: 11.07→10.6% — el -hd.webp es más vertical (h/w 3.76 vs 3.41) y con el W literal desbordaba ~9px a 1280×712 */ body.dkt-brand-andalan #copperflex .b-device1 { left: 45.44%; top: 54%; bottom: auto; width: 8.93%; } /* v8.4 §3.5: a 60.19 chocaba con el info1 subido */ body.dkt-brand-andalan #copperflex .b-device2 { left: 67.94%; top: 56.10%; bottom: auto; width: 8.93%; } body.dkt-brand-andalan #copperflex .b-info1 { left: 45.07%; top: 75.5%; width: 9.41%; } /* v8.5 §2.4: −1% (aire con el btn subido) */ body.dkt-brand-andalan #copperflex .b-info2 { left: 64.68%; top: 74.5%; width: 11.86%; } /* v8.3: −1% left · v8.4 §3.5: gap con btn2 10→23px */ /* SWAP respecto al export (criterio §2.5 del brief): el export ponía el botón del producto NORMAL (btn1) bajo la columna del MINI y viceversa. */ body.dkt-brand-andalan #copperflex .b-btn1 { left: 44.99%; top: 87.5%; width: 9.41%; } /* v8.5 §2.4: 90.40→87.5% — PISABA el compliance (−3.6px); ahora 15px de aire */ body.dkt-brand-andalan #copperflex .b-btn2 { left: 67.60%; top: 87.57%; width: 9.41%; } body.dkt-brand-andalan #copperflex .b-silhouette { left: 0.12%; top: 73.05%; right: auto; bottom: auto; width: 10.83%; } body.dkt-brand-andalan #copperflex .b-seal { left: 87.68%; top: 15.24%; right: auto; width: 10.43%; } body.dkt-brand-andalan #copperflex .b-sellomini { left: 88.31%; top: 39.45%; right: auto; width: 9.72%; } body.dkt-brand-andalan #copperflex .dkt-al-wcompliance { left: auto; right: clamp(10px, 1.2vw, 20px); top: 95.51%; bottom: auto; width: auto; } /* v8.4 §3.2 */ }