/*! * TLV2 — presets.css (Gate C4) * Canonical-only for block presets: hero/packs/testimonios/cta use tlv2-*-preset--* classes. * Legacy aliases preset--{hero|packs|testimonios|cta}-* removed from selectors. */ /* ========================================== 2) Toggles de overlay CTA (desktop/mobile) ========================================== Reglas: - SOLO definen custom properties (no estilos directos de .cta). - Incluyen para ganar a cualquier set posterior en la landing. - El mapeo .cta ← vars se hace en components-map.css (no aquí). *//* === TLV2: CTA overlay toggles (desktop/mobile) — fuente única, sin @media === */body.tl-cta-overlay-desktop--gradient{ --role-cta-overlay-desktop: var(--overlay-gradient-desktop, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 70%)); }body.tl-cta-overlay-desktop--none{ --role-cta-overlay-desktop: none; }body.tl-cta-overlay-mobile--gradient{ --role-cta-overlay-mobile: var(--overlay-gradient-mobile, linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 100%)); }body.tl-cta-overlay-mobile--none{ --role-cta-overlay-mobile: none; }/* Presets combinables por (solo variables; sin tocar .cta) */body.tlv2-cta-desktop-gradient{ --role-cta-overlay-desktop: var(--overlay-gradient-desktop, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 70%)); }body.tlv2-cta-mobile-solid{ --role-cta-overlay-mobile: none; }/* Nota: - Estas clases NO deben definir estilos de .cta. - Solo mueven variables de roles; .cta se pinta en components-map.css. *//* ------------------------------------------------------------ 3) CTA PRESET BASE v1.1 (oficial TLV2) Usa únicamente variables de rol de action family: --role-button-primary-surface / --role-button-primary-border / --role-button-primary-foreground (primary gobierna CTA/action; accent no secuestra esta especie) No pinta directamente propiedades de .cta (color/border/background); solo mapea variables que el painter D3 consume. ------------------------------------------------------------- *//* Alias legacy (preset--cta-*) retirado: - TLV2 usa SOLO: body.tlv2-cta-preset--* - Si aparecen clases preset--cta-* en el , se consideran residuales/legacy. - El flag tlv2_no_legacy=1 puede usarse para QA/auditoría. */body.tlv2-cta-preset--base :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary), body.tlv2-cta-preset--solid :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary){ /* Primario: sólido */ --cta-fg: var(--role-button-primary-foreground); --cta-bg: var(--role-button-primary-surface); --cta-border-width: 1px; --cta-border: var(--role-button-primary-border); }/* Secundario = outline contextual. No reinyecta la familia global del secondary; hereda el carril semántico publicado por context/root + components-map. */body.tlv2-cta-preset--base :where(main.tlv2-page, .tlv2-modal) .cta:is(.cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary), body.tlv2-cta-preset--solid :where(main.tlv2-page, .tlv2-modal) .cta:is(.cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary){ --cta-fg: var(--role-context-button-secondary-foreground, var(--role-button-secondary-foreground)); --cta-bg: var(--role-context-button-secondary-surface, var(--role-button-secondary-surface)); --cta-border-width: 1px; --cta-border: var(--role-context-button-secondary-border, var(--role-button-secondary-border)); }/* Hover secundario contextual */body.tlv2-cta-preset--base :where(main.tlv2-page, .tlv2-modal) .cta:is(.cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):hover, body.tlv2-cta-preset--base :where(main.tlv2-page, .tlv2-modal) .cta:is(.cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):focus-visible, body.tlv2-cta-preset--solid :where(main.tlv2-page, .tlv2-modal) .cta:is(.cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):hover, body.tlv2-cta-preset--solid :where(main.tlv2-page, .tlv2-modal) .cta:is(.cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):focus-visible{ --cta-bg-hover: var(--role-context-button-secondary-surface-hover, var(--role-button-secondary-surface-hover)); --cta-fg-hover: var(--role-context-button-secondary-foreground-hover, var(--role-button-secondary-foreground-hover)); --cta-border-hover: var(--role-context-button-secondary-border-hover, var(--role-button-secondary-border-hover)); }/* ------------------------------------------------------------ 4) CTA PRESET OUTLINE v1.0 (canónico, solo variables) - No “pinta” props con (eso era el bridge). - Solo define variables que la base .cta consume. ------------------------------------------------------------ */ body.tlv2-cta-preset--outline :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary) { --cta-fg: var(--role-button-primary-surface); --cta-bg: transparent; --cta-border: var(--role-button-primary-border); --cta-border-width: 1px; --cta-shadow: 0 10px 22px -24px color-mix(in oklch, var(--role-primary, black) 18%, transparent); --cta-overlay-desktop: none; --cta-overlay-mobile: none; --cta-fg-hover: var(--role-button-primary-foreground); --cta-bg-hover: var(--role-button-primary-surface); --cta-border-hover: var(--role-button-primary-surface); --cta-shadow-hover: 0 14px 28px -24px color-mix(in oklch, var(--role-primary, black) 24%, transparent); } /* ------------------------------------------------------------ 4B) CTA PRESET SOFT v1.0 — solo variables ------------------------------------------------------------ */ body.tlv2-cta-preset--soft :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary){ --cta-fg: var(--role-button-primary-surface); --cta-bg: color-mix(in oklch, var(--role-button-primary-surface) 12%, transparent); --cta-border-width: 1px; --cta-border: color-mix(in oklch, var(--role-button-primary-surface) 35%, transparent); --cta-shadow: 0 12px 24px -24px color-mix(in oklch, var(--role-primary, black) 18%, transparent); }body.tlv2-cta-preset--soft :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):hover, body.tlv2-cta-preset--soft :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):focus-visible{ --cta-bg-hover: color-mix(in oklch, var(--role-button-primary-surface) 18%, transparent); --cta-fg-hover: var(--role-button-primary-surface); --cta-border-hover: color-mix(in oklch, var(--role-button-primary-surface) 65%, transparent); --cta-shadow-hover: 0 16px 30px -24px color-mix(in oklch, var(--role-primary, black) 24%, transparent); }/* ------------------------------------------------------------ 4C) CTA PRESET GHOST v1.0 tlv2-cta-preset--ghost ------------------------------------------------------------ Objetivo: - “Fantasma”: fondo transparente, borde sutil, texto acento. - Hover: micro-tinte (muy suave), sin convertirse en solid. ------------------------------------------------------------- */body.tlv2-cta-preset--ghost :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary){ --cta-fg: var(--role-button-primary-surface); --cta-bg: transparent; --cta-border-width: 1px; --cta-border: color-mix(in oklch, var(--role-button-primary-surface) 38%, transparent); --cta-shadow: 0 10px 22px -24px color-mix(in oklch, var(--role-primary, black) 16%, transparent); --cta-overlay-desktop: none; --cta-overlay-mobile: none; }body.tlv2-cta-preset--ghost :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):hover, body.tlv2-cta-preset--ghost :where(main.tlv2-page, .tlv2-modal) .cta:not(.cta--ghost, .cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary):focus-visible{ --cta-bg-hover: color-mix(in oklch, var(--role-button-primary-surface) 8%, transparent); --cta-fg-hover: var(--role-button-primary-surface); --cta-border-hover: var(--role-button-primary-surface); --cta-shadow-hover: 0 14px 28px -24px color-mix(in oklch, var(--role-primary, black) 22%, transparent); }/* ------------------------------------------------------------ PRESETS — HERO (v1.0) Tres estilos iniciales activables con clases en : - tlv2-hero-preset--classic - tlv2-hero-preset--minimal - preset--hero-centered Nota: Solo ajusta layout/espaciado. No cambia colores (usa tokens/roles vigentes). ------------------------------------------------------------- */:root{ /* Gap canónico para layout interno del HERO */ --tl-hero-gap: clamp(1rem, 2vw, 2rem); }/* IMPORTANTE (paridad pública↔constructor) No aplicamos grid a #hero porque en constructor #hero tiene un hijo extra (.tlv2-edit-block-wrapper). Si #hero es grid, el "primer hijo" cambia y el layout se invierte. El grid del preset vive en .hero-layout (dentro del contenido real). *//* CLASSIC */ body.tlv2-hero-preset--classic #hero, #hero.tlv2-hero-preset--classic{ --hero-layout-gap: var(--tl-hero-gap); } /* MINIMAL */ body.tlv2-hero-preset--minimal #hero, #hero.tlv2-hero-preset--minimal{ --hero-layout-gap: 1rem; --hero-region-gap: var(--space-3, .75rem); --hero-shell-pad-y: clamp(2rem, 3.5vw, 4rem); } /* CENTERED */ body.tlv2-hero-preset--centered #hero, #hero.tlv2-hero-preset--centered{ --hero-layout-gap: clamp(1rem, 2vw, 2.25rem); --hero-shell-pad-y: clamp(3.25rem, 5.5vw, 7.25rem); } /* RECIPES — una capa semántica sobre la topología Hero existente. Solo parametrizan jerarquía, ritmo y proporciones; no poseen contenido, alineación, media_layout ni mobile_flow. */ body.tlv2-hero-preset--narrative #hero, #hero.tlv2-hero-preset--narrative{ --hero-shell-pad-y: clamp(3.75rem, 6.4vw, 6.25rem); --hero-region-gap: clamp(1.1rem, 1.8vw, 1.45rem); --hero-header-gap: clamp(.8rem, 1.25vw, 1.05rem); --hero-title-scale: .96; --measure-hero-title: min(20ch, 100%); --measure-hero-subtitle: min(54ch, 100%); --measure-hero-body: min(58ch, 100%); --hero-copy-column-fr: 1.08fr; --hero-media-column-fr: 1fr; --hero-recipe-media-inline-max: 474px; --hero-recipe-cta-min-h: 50px; --hero-recipe-cta-pad-x: 1.05rem; } body.tlv2-hero-preset--statement #hero, #hero.tlv2-hero-preset--statement{ --hero-shell-pad-y: clamp(4.75rem, 8.4vw, 8rem); --hero-region-gap: clamp(.85rem, 1.25vw, 1.05rem); --hero-header-gap: clamp(.65rem, .9vw, .85rem); --hero-gap-header-cta-extra: clamp(.45rem, .7vw, .65rem); --hero-title-scale: 1.18; --measure-hero-title: min(14ch, 100%); --measure-hero-subtitle: min(42ch, 100%); --measure-hero-body: min(46ch, 100%); --hero-copy-column-fr: 1.2fr; --hero-media-column-fr: .8fr; --hero-recipe-media-inline-max: 402px; --hero-recipe-cta-min-h: 54px; --hero-recipe-cta-pad-x: 1.3rem; } body.tlv2-hero-preset--visual #hero, #hero.tlv2-hero-preset--visual{ --hero-shell-pad-y: clamp(3.5rem, 5.8vw, 5.75rem); --hero-region-gap: clamp(.75rem, 1.1vw, .95rem); --hero-header-gap: clamp(.65rem, .9vw, .82rem); --hero-title-scale: 1; --measure-hero-title: min(18ch, 100%); --measure-hero-subtitle: min(44ch, 100%); --measure-hero-body: min(46ch, 100%); --hero-copy-column-fr: .78fr; --hero-media-column-fr: 1.22fr; --hero-recipe-media-inline-max: 556px; --hero-recipe-cta-min-h: 48px; --hero-recipe-cta-pad-x: 1rem; } /* Rework semántico H1: ajustes deliberadamente desktop-only. El contrato mobile de la primera candidata permanece intacto mientras se corrige la dirección atencional observada en el fixture Split de escritorio. */ @media (min-width: 960px){ body.tlv2-hero-preset--narrative #hero, #hero.tlv2-hero-preset--narrative{ --hero-shell-pad-y: clamp(3.9rem, 6.8vw, 6.6rem); --hero-region-gap: clamp(1.25rem, 2vw, 1.65rem); --hero-header-gap: clamp(.9rem, 1.35vw, 1.15rem); --hero-body-cta-gap: clamp(1.25rem, 1.8vw, 1.5rem); --hero-title-scale: .94; --hero-subtitle-scale: 1; --hero-body-scale: 1.03; --measure-hero-title: min(22ch, 100%); --measure-hero-subtitle: min(58ch, 100%); --measure-hero-body: min(62ch, 100%); --hero-copy-column-fr: 1.16fr; --hero-media-column-fr: .84fr; --hero-recipe-media-inline-max: 420px; --hero-prominent-copy-column-fr: 1.02fr; --hero-prominent-media-column-fr: .98fr; --hero-prominent-media-inline-max: 510px; --hero-recipe-cta-min-width: 210px; } body.tlv2-hero-preset--statement #hero, #hero.tlv2-hero-preset--statement{ --hero-shell-pad-y: clamp(5.25rem, 9vw, 8.75rem); --hero-region-gap: clamp(1rem, 1.45vw, 1.2rem); --hero-header-gap: clamp(.5rem, .7vw, .68rem); --hero-body-cta-gap: clamp(.55rem, .8vw, .72rem); --hero-gap-header-cta-extra: clamp(.42rem, .6vw, .58rem); --hero-title-scale: 1.32; --hero-subtitle-scale: .9; --hero-body-scale: .88; --measure-hero-title: min(12ch, 100%); --measure-hero-subtitle: min(38ch, 100%); --measure-hero-body: min(40ch, 100%); --hero-copy-column-fr: 1.26fr; --hero-media-column-fr: .74fr; --hero-recipe-media-inline-max: 380px; --hero-prominent-copy-column-fr: 1.16fr; --hero-prominent-media-column-fr: .84fr; --hero-prominent-media-inline-max: 440px; --hero-recipe-cta-min-width: 230px; --hero-recipe-cta-min-h: 56px; --hero-recipe-cta-pad-x: 1.45rem; } body.tlv2-hero-preset--visual #hero, #hero.tlv2-hero-preset--visual{ --hero-shell-pad-y: clamp(3.25rem, 5.4vw, 5.2rem); --hero-region-gap: clamp(.68rem, 1vw, .88rem); --hero-header-gap: clamp(.52rem, .72vw, .68rem); --hero-body-cta-gap: clamp(.55rem, .75vw, .7rem); --hero-title-scale: .88; --hero-subtitle-scale: .92; --hero-body-scale: .92; --measure-hero-title: min(24ch, 100%); --measure-hero-subtitle: min(48ch, 100%); --measure-hero-body: min(46ch, 100%); --hero-desktop-shell-max: 1240px; --hero-copy-column-fr: .9fr; --hero-media-column-fr: 1.1fr; --hero-recipe-media-inline-max: 580px; --hero-prominent-copy-column-fr: .9fr; --hero-prominent-media-column-fr: 1.1fr; --hero-prominent-media-inline-max: 580px; --hero-recipe-auto-landscape-object-max-w: 490px; --hero-recipe-auto-landscape-object-max-h: 330px; --hero-recipe-auto-square-object-max-w: 470px; --hero-recipe-auto-square-object-max-h: 470px; --hero-recipe-cta-min-width: 180px; } } /* ------------------------------------------------------------ HERO PRESETS — overrides visibles (v1.2) Nota: el preset ya no ejecuta spacing/layout final del Hero. Solo parametriza variables y aplica overrides visibles de alineación. ------------------------------------------------------------- */ /* CLASSIC El preset ya no fuerza alineación por CSS duro. La alineación del contenido la gobierna `settings.align` vía `data-hero-align`. Si el bloque no trae valor explícito, el runtime cae al default del preset (`left` para classic/minimal, `center` para centered). */ /* ------------------------------------------------------------ Presets: Packs (layout) Canonical v0.1: el preset solo declara vars; el componente consume las vars desde landing.css. ------------------------------------------------------------ */ body.tlv2-packs-preset--stacked #packs{ --tlv2-packs-grid-cols-desktop: 1; --tlv2-packs-grid-cols-tablet: 1; --tlv2-packs-grid-cols-mobile: 1; } body.tlv2-packs-preset--grid-2 #packs{ --tlv2-packs-grid-cols-desktop: 2; --tlv2-packs-grid-cols-tablet: 2; --tlv2-packs-grid-cols-mobile: 1; } body.tlv2-packs-preset--grid-3 #packs{ --tlv2-packs-grid-cols-desktop: 3; --tlv2-packs-grid-cols-tablet: 2; --tlv2-packs-grid-cols-mobile: 1; } /* ------------------------------------------------------------ TLV2 — TESTIMONIOS presets (layout) Canonical v0.1: el preset solo declara vars; el componente consume las vars desde landing.css. - cards: 3 / 2 / 1 - compact: 2 / 2 / 1 - stacked: 1 / 1 / 1 ------------------------------------------------------------ */ .tlv2-section--testimonios.tlv2-testimonios-preset--cards :is(.testimonials-grid, .testimonios-grid){ --tlv2-testimonios-grid-cols-desktop: 3; --tlv2-testimonios-grid-cols-tablet: 2; --tlv2-testimonios-grid-cols-mobile: 1; } .tlv2-section--testimonios.tlv2-testimonios-preset--compact :is(.testimonials-grid, .testimonios-grid){ --tlv2-testimonios-grid-cols-desktop: 2; --tlv2-testimonios-grid-cols-tablet: 2; --tlv2-testimonios-grid-cols-mobile: 1; } .tlv2-section--testimonios.tlv2-testimonios-preset--stacked :is(.testimonials-grid, .testimonios-grid){ --tlv2-testimonios-grid-cols-desktop: 1; --tlv2-testimonios-grid-cols-tablet: 1; --tlv2-testimonios-grid-cols-mobile: 1; } /* ------------------------------------------------------------ TLV2 — FAQ preset (canonical v0.1) - `tlv2-faq-preset--details-compact` - Implementación actual: styling compacto sobre el renderer FAQ canónico basado en `details/summary`. ------------------------------------------------------------ */ body.tlv2-faq-preset--details-compact #faq{ --faq-list-gap: clamp(.5rem, .22vw + .44rem, .72rem); --faq-item-pad-y: clamp(.72rem, .4vw + .64rem, .92rem); --faq-item-pad-x: clamp(.8rem, .46vw + .72rem, 1rem); --faq-item-radius: clamp(12px, 1vw, 16px); --faq-question-size: clamp(.98rem, .92rem + .12vw, 1.03rem); --faq-question-line: 1.28; --faq-answer-gap: .42rem; --faq-answer-size: .94rem; --faq-answer-line: 1.48; --faq-answer-paragraph-gap: .35rem; } /* ------------------------------------------------------------ TLV2 — CTA FINAL presets (layout) (canonical v0.1) - classic: default (sin override) - minimal: más compacto - banner: alineación tipo banner (texto a la izquierda en desktop) ------------------------------------------------------------ */ /* MINIMAL */ body.tlv2-cta-final-preset--minimal #cta-final{ --cta-final-max-w: 44rem; --cta-final-stack-gap: var(--space-2); --cta-final-cta-gap: var(--space-2); } /* BANNER */ body.tlv2-cta-final-preset--banner #cta-final{ --cta-final-max-w: 64rem; --cta-final-text-align: left; --cta-final-cta-justify: flex-start; } @media (max-width: 767px){ body.tlv2-cta-final-preset--banner #cta-final{ --cta-final-text-align: center; } }