/* TL V2 — Layer order (canónico) */ @layer tokens, base, utilities, components, map, overrides; @layer utilities { /* ====================================================== TurboLanding – Utilities v1 (limpio + stack robusto) Sólo utilidades atómicas: contenedor, secciones, stack, grid/flex, espaciado, tipografía y helpers mínimos. (Sin componentes: slider dots, alertas, badges, etc.) ====================================================== */ /* ------------------------------ Contenedor ------------------------------ */ .contenedor{ width:100%; max-width: var(--container-width-md, 1080px); /* ← FIX: fallback seguro */ margin-inline:auto; padding-inline: var(--container-padding-inline, clamp(12px,3.2vw,28px)); /* ← FIX: token + fallback */ } .contenedor--sm{ max-width: var(--container-width-sm, 880px); } /* ← FIX: fallback */ .contenedor--md{ max-width: var(--container-width-md, 1080px); } /* ← FIX: fallback */ .contenedor--lg{ max-width: var(--container-width-lg, 1200px); } .contenedor--fluid{ max-width:none; } .contenedor--nopi{ padding-inline:0; } /* ------------------------------ Container Queries helpers ------------------------------ */ .cq{ container-type:inline-size; container-name:bloque; } .cq-hero{ container-type:inline-size; container-name:hero; } /* Fuente de verdad para padding vertical de secciones */ .seccion{ padding-block: var(--section-padding, clamp(28px, 6vw, 72px)); display: flow-root; /* evita colapso de márgenes */ } /* Modificadores*/ .seccion--sm{ --role-section-padding: var(--spacing-sm); } .seccion--lg{ --role-section-padding: var(--spacing-lg); } /* =========================== TL STACK – Utilities (limpio) =========================== */ /* 1) Sentinel y separación entre secciones → se gestionan exclusivamente en landing-turbolanding.css (eliminamos: .seccion + .seccion, auto-stack Gutenberg y diales stack-*) */ /* Stack interno acotado a la plantilla */ body.page-template-page-turbolanding .stack-inside{ margin-top: 0; padding-block-start: calc(var(--role-section-padding, var(--section-padding)) + var(--role-stack-gap, var(--stack-gap))); overflow: hidden; /* anti-colapso primer hijo */ } /* Evita colapso de márgenes internos (primer hijo) */ body.page-template-page-turbolanding .stack-inside > :first-child, body.page-template-page-turbolanding .seccion > .contenedor > :first-child, body.page-template-page-turbolanding .stack-inside > .contenedor > :first-child{ margin-top: 0; } /* Evita colapso de márgenes internos (último hijo) */ body.page-template-page-turbolanding .stack-inside > :last-child, body.page-template-page-turbolanding .seccion > .contenedor > :last-child, body.page-template-page-turbolanding .stack-inside > .contenedor > :last-child{ margin-bottom: 0; } /* ------------------------------ Presets de densidad (en ) ------------------------------ */ /* sin preset por defecto: manda :root (clamp) */ body.density-compact:not(.page-template-page-turbolanding){ --role-section-padding: var(--spacing-xs); --role-stack-gap: var(--spacing-xs); } body.density-cozy:not(.page-template-page-turbolanding){ --role-section-padding: var(--spacing-sm); --role-stack-gap: var(--spacing-sm); } body.density-comfy:not(.page-template-page-turbolanding){ --role-section-padding: var(--spacing-md); --role-stack-gap: var(--spacing-md); } body.density-roomy:not(.page-template-page-turbolanding){ --role-section-padding: var(--spacing-lg); --role-stack-gap: var(--spacing-lg); } /* ------------------------------ Helpers de Grid ------------------------------ */ .grid{ display:grid; gap: var(--grid-gap); } .grid-1{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-auto-min200{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .gap-xs{ gap: var(--spacing-xs); } /* 8px si base=16 */ .gap-sm{ gap: var(--spacing-sm); } /* 12px si base=16 */ .gap{ gap: var(--grid-gap); } /* respeta override local */ @media (min-width:640px){ .sm-grid-2{ grid-template-columns:repeat(2,1fr); } .sm-grid-3{ grid-template-columns:repeat(3,1fr); } } @media (min-width:768px){ .md-grid-2{ grid-template-columns:repeat(2,1fr); } .md-grid-3{ grid-template-columns:repeat(3,1fr); } .md-grid-4{ grid-template-columns:repeat(4,1fr); } } @media (min-width:1024px){ .lg-grid-2{ grid-template-columns:repeat(2,1fr); } .lg-grid-3{ grid-template-columns:repeat(3,1fr); } .lg-grid-4{ grid-template-columns:repeat(4,1fr); } } /* ------------------------------ Flex helpers ------------------------------ */ .flex{ display:flex; } .flex-col{ flex-direction:column; } .wrap{ flex-wrap:wrap; } .items-start{ align-items:flex-start; } .items-center{ align-items:center; } .justify-center{ justify-content:center; } .justify-between{ justify-content:space-between; } .self-start{ align-self:flex-start; } .self-center{ align-self:center; } /* ------------------------------ Espaciado atómico (márgenes y paddings) ------------------------------ */ .mt-0{ margin-top:0; } .mt-xs{ margin-top:var(--spacing-xs); } .mt-sm{ margin-top:var(--spacing-sm); } .mt-md{ margin-top:var(--spacing-md); } .mt-lg{ margin-top:var(--spacing-lg); } .mb-0{ margin-bottom:0; } .mb-xs{ margin-bottom:var(--spacing-xs); } .mb-sm{ margin-bottom:var(--spacing-sm); } .mb-md{ margin-bottom:var(--spacing-md); } .mb-lg{ margin-bottom:var(--spacing-lg); } .mx-auto{ margin-inline:auto; } .pt-0{ padding-top:0; } .pt-sm{ padding-top:var(--spacing-sm); } .pt-md{ padding-top:var(--spacing-md); } .pt-lg{ padding-top:var(--spacing-lg); } .pb-0{ padding-bottom:0; } .pb-sm{ padding-bottom:var(--spacing-sm); } .pb-md{ padding-bottom:var(--spacing-md); } .pb-lg{ padding-bottom:var(--spacing-lg); } .px-sm{ padding-inline:var(--spacing-sm); } .px-md{ padding-inline:var(--spacing-md); } .px-lg{ padding-inline:var(--spacing-lg); } .py-sm{ padding-block:var(--spacing-sm); } .py-md{ padding-block:var(--spacing-md); } .py-lg{ padding-block:var(--spacing-lg); } /* ------------------------------ Tipografía / anchos auxiliares ------------------------------ */ .text-center{ text-align:center; } .text-left{ text-align:left; } .text-right{ text-align:right; } /* ← FIX: aceptan token opcional con fallback a ch */ .max-w-32ch{ max-width: var(--measure-32, 32ch); } .max-w-40ch{ max-width: var(--measure-40, 40ch); } .max-w-60ch{ max-width: var(--measure-60, 60ch); } /* ------------------------------ A11y ------------------------------ */ /* (Definición única de .sr-only al final de este archivo) */ /* ------------------------------ Flujo vertical interno ------------------------------ */ .flow > * + *{ margin-top:var(--flow-gap, var(--spacing-xs)); } /* ------------------------------ Helpers de fondo por sección ------------------------------ */ .seccion--bg{ background:var(--section-bg, var(--color-bg-special)); } .seccion--bg[data-contrast="on"]{ color:var(--color-on-section, var(--color-text)); } /* ------------------------------ Media cuadrada genérica reutilizable ------------------------------ */ .media-square{ width: min(100%, var(--media-square, 520px), 92vw); /* ← FIX: fallback para var() */ aspect-ratio: 1 / 1; border-radius: var(--radius-base); overflow: hidden; background: var(--color-surface); } .media-square > picture, .media-square > img{ width:100%; height:100%; display:block; object-fit:cover; } /* ===================== 0) UTILIDAD GLOBAL (una vez) ===================== */ /* Full-bleed robusto sin micro-scroll horizontal */ .tl-alignfull{ /* ← FIX: habilita diales por token con fallback */ width: var(--full-bleed-width, 100vw); max-width: var(--full-bleed-width, 100vw); margin-left: var(--full-bleed-offset, calc(50% - 50vw)); margin-right: var(--full-bleed-offset, calc(50% - 50vw)); } /* Navegadores modernos: usa 100dvw y evita el efecto de la barra vertical */ @supports (width: 100dvw){ .tl-alignfull{ width: var(--full-bleed-width-d, 100dvw); /* ← FIX */ max-width: var(--full-bleed-width-d, 100dvw); /* ← FIX */ margin-left: var(--full-bleed-offset-d, calc(50% - 50dvw)); /* ← FIX */ margin-right: var(--full-bleed-offset-d, calc(50% - 50dvw)); /* ← FIX */ } } /* Anclas (con fallback) */ [id]{ scroll-margin-top: var(--spacing-lg, 96px); } /* ===================== 1.2 BLOQUES NO-HERO CON MOCKUP (editorial) ===================== */ /* Importante: para que el bloque global no vuelva a recortar el hero */ section:not(.hero-bloque) .mockup-wrapper{ aspect-ratio: var(--mockup-ratio, 4 / 5); max-width: min(520px, 45cqw); border-radius: var(--radius-base); overflow: hidden; box-shadow: var(--shadow-hover); } section:not(.hero-bloque) .mockup-wrapper picture, section:not(.hero-bloque) .mockup-wrapper img{ width: 100%; height: 100%; object-fit: var(--mockup-object-fit, cover); } /* utilities.css */ .stack { --role-stack-gap: var(--stack-gap, var(--spacing-sm)); } /* ← FIX: fallback */ .stack > * + *{ margin-top: var(--role-stack-gap, var(--stack-gap)); } .stack-sm{ --role-stack-gap: var(--spacing-xxs); } .stack-md{ --role-stack-gap: var(--spacing-sm); } .stack-lg{ --role-stack-gap: var(--spacing-md); } /* === Utilities · Botones =================================== */ .btn--block{ inline-size: 100%; display: inline-flex; justify-content: center; } /* Variantes de tamaño coherentes con .btn */ /* ← FIX: font-size depende de la base (sin valores duros) */ .btn--sm { padding: calc(var(--btn-pb)*0.75) calc(var(--btn-pi)*0.75); font-size: calc(var(--font-size-base, 1rem) * 0.95); } .btn--lg { padding: calc(var(--btn-pb)*1.15) calc(var(--btn-pi)*1.15); font-size: calc(var(--font-size-base, 1rem) * 1.05); } /* === Flow gap utilities (reemplazan style="--flow-gap: …") === */ .flow-xs { --flow-gap: var(--spacing-xxs); } .flow-sm { --flow-gap: var(--spacing-sm); } /* A11y robusto para toggles */ [hidden]{ display: none; } /* Screen-reader only (oculto visual, accesible) — ÚNICA definición */ .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Si es un enlace/botón "skip", que se vea al enfocar */ .sr-only:focus, .sr-only:active{ position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* ====================================================== Accesibilidad / Focus ring — movido desde colores.css (Sprint 1) ====================================================== */ /* Foco genérico accesible (teclado) */ :where(a, button, [role="button"], input, select, textarea, summary):focus-visible{ outline: var(--focus-outline-width) solid color-mix(in srgb, var(--neutral-900) 35%, white 65%); outline-offset: var(--focus-outline-offset); } /* Anillo de foco accesible para .btn */ .btn:focus-visible{ /* usa outline real para que no lo pisen otras sombras */ outline: var(--focus-outline-width, 2px) solid var(--btn-focus-ring, #66a3ff); outline-offset: 2px; /* luz suave adicional (opcional) sin !important */ box-shadow: var(--btn-shadow, none), 0 0 0 var(--focus-outline-width, 2px) color-mix(in oklab, var(--btn-focus-ring, #66a3ff), transparent 40%); transition: outline-color var(--btn-transition, .2s), box-shadow var(--btn-transition, .2s); } } /* === Render unificado de CTAs — fuente única de verdad ================ */ .page-template-page-turbolanding .page-template-page-turbolanding .page-template-page-turbolanding :where(.btn, .btn--cta, .boton-comprar, .garantia-cta, .cta-final-cta, .cta-whatsapp, .cta .btn, .cta button, .promesa-cta__btn, .cta-desktop, .cta-mobile):active{ transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .page-template-page-turbolanding :where(.btn, .btn--cta, .boton-comprar, .garantia-cta, .cta-final-cta, .cta-whatsapp, .cta .btn, .cta button, .promesa-cta__btn, .cta-desktop, .cta-mobile){ transition:none; } }