/*! * 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. */ /* ========================= 1) Presets de tema (ejemplos) ========================= *//* Modo oscuro – ejemplo de roles de superficie y tipografía */.preset--dark{ --role-surface-base: oklch(0.14 0 0); --role-surface-section: oklch(0.18 0 0); --role-surface-alt: oklch(0.22 0 0); --role-heading-color: oklch(0.97 0 0); --role-body-color: oklch(0.94 0 0); --role-muted-color: oklch(0.70 0 0); --role-border-color: oklch(0.40 0 0); }/* High-contrast claro – ejemplo */.preset--contrast{ --role-surface-base: #ffffff; --role-surface-section: #f9fafb; --role-surface-alt: #edf2ff; --role-heading-color: oklch(0.10 0 0); --role-body-color: oklch(0.12 0 0); --role-muted-color: oklch(0.20 0 0); --role-border-color: oklch(0.25 0 0); }/* ========================================== 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); } /* ------------------------------------------------------------ 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 ------------------------------------------------------------ */ body.tlv2-testimonios-preset--cards #testimonios :is(.testimonials-grid, .testimonios-grid){ --tlv2-testimonios-grid-cols-desktop: 3; --tlv2-testimonios-grid-cols-tablet: 2; --tlv2-testimonios-grid-cols-mobile: 1; } body.tlv2-testimonios-preset--compact #testimonios :is(.testimonials-grid, .testimonios-grid){ --tlv2-testimonios-grid-cols-desktop: 2; --tlv2-testimonios-grid-cols-tablet: 2; --tlv2-testimonios-grid-cols-mobile: 1; } body.tlv2-testimonios-preset--stacked #testimonios :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; } }