/*! * 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 !important 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%)) !important; }body.tl-cta-overlay-desktop--none{ --role-cta-overlay-desktop: none !important; }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%)) !important; }body.tl-cta-overlay-mobile--none{ --role-cta-overlay-mobile: none !important; }/* 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: --role-cta-surface / --role-cta-border / --role-cta-foreground (inyectadas desde inc/v2/css.php en _tl_page_vars / accent) 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 .cta:not(.cta--ghost), body.tlv2-cta-preset--solid .cta:not(.cta--ghost){ /* Primario: sólido */ --cta-fg: var(--role-cta-foreground); --cta-bg: var(--role-cta-surface); --cta-border-width: 1px; --cta-border: var(--role-cta-border); }/* Secundario = outline */body.tlv2-cta-preset--base .cta.cta--secondary, body.tlv2-cta-preset--solid .cta.cta--secondary{ --cta-fg: var(--role-cta-surface); --cta-bg: transparent; --cta-border-width: 1px; --cta-border: var(--role-cta-border); }/* Hover secundario → sólido */body.tlv2-cta-preset--base .cta.cta--secondary:hover, body.tlv2-cta-preset--base .cta.cta--secondary:focus-visible, body.tlv2-cta-preset--solid .cta.cta--secondary:hover, body.tlv2-cta-preset--solid .cta.cta--secondary:focus-visible{ --cta-bg-hover: var(--role-cta-surface); --cta-fg-hover: var(--role-cta-foreground); }/* ------------------------------------------------------------ 4) CTA PRESET OUTLINE v1.0 (canónico, solo variables) - No “pinta” props con !important (eso era el bridge). - Solo define variables que la base .cta consume. ------------------------------------------------------------ */ body.tlv2-cta-preset--outline .cta:not(.cta--ghost) { --cta-fg: var(--role-cta-surface); --cta-bg: transparent; --cta-border: var(--role-cta-border); --cta-border-width: 1px; --cta-shadow: none; --cta-overlay-desktop: none; --cta-overlay-mobile: none; --cta-fg-hover: var(--role-cta-foreground); --cta-bg-hover: var(--role-cta-surface); --cta-border-hover: var(--role-cta-surface); --cta-shadow-hover: none; } /* ------------------------------------------------------------ 4B) CTA PRESET SOFT v1.0 — solo variables ------------------------------------------------------------ */ body.tlv2-cta-preset--soft .cta:not(.cta--ghost){ --cta-fg: var(--role-cta-surface); --cta-bg: color-mix(in oklch, var(--role-cta-surface) 12%, transparent); --cta-border-width: 1px; --cta-border: color-mix(in oklch, var(--role-cta-surface) 35%, transparent); --cta-shadow: none; }body.tlv2-cta-preset--soft .cta:not(.cta--ghost):hover, body.tlv2-cta-preset--soft .cta:not(.cta--ghost):focus-visible{ --cta-bg-hover: color-mix(in oklch, var(--role-cta-surface) 18%, transparent); --cta-fg-hover: var(--role-cta-surface); --cta-border-hover: color-mix(in oklch, var(--role-cta-surface) 65%, transparent); --cta-shadow-hover: none; }/* ------------------------------------------------------------ 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 .cta:not(.cta--ghost){ --cta-fg: var(--role-cta-surface); --cta-bg: transparent; --cta-border-width: 1px; --cta-border: color-mix(in oklch, var(--role-cta-surface) 38%, transparent); --cta-shadow: none; --cta-overlay-desktop: none; --cta-overlay-mobile: none; }body.tlv2-cta-preset--ghost .cta:not(.cta--ghost):hover, body.tlv2-cta-preset--ghost .cta:not(.cta--ghost):focus-visible{ --cta-bg-hover: color-mix(in oklch, var(--role-cta-surface) 8%, transparent); --cta-fg-hover: var(--role-cta-surface); --cta-border-hover: var(--role-cta-surface); --cta-shadow-hover: none; }/* ------------------------------------------------------------ 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-layout{ display: grid; gap: var(--tl-hero-gap); }@media (min-width: 960px) {body.tlv2-hero-preset--classic #hero .hero-layout{ grid-template-columns: 1fr 1fr; align-items: center; }}/* MINIMAL */body.tlv2-hero-preset--minimal #hero .hero-layout{ display: grid; grid-template-columns: 1fr; gap: 1rem; }/* CENTERED */body.tlv2-hero-preset--centered #hero .hero-layout{ display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 2.25rem); }/* ------------------------------------------------------------ HERO PRESETS — overrides visibles (v1.1) Nota: landing.css centra por defecto. Estos overrides fuerzan diferencias perceptibles por preset sin tocar el DOM. ------------------------------------------------------------- *//* CLASSIC: alineación izquierda en desktop + CTAs a la izquierda */@media (min-width: 1024px){body.tlv2-hero-preset--classic #hero .tlv2-container{ text-align: left; }body.tlv2-hero-preset--classic #hero .section-title, body.tlv2-hero-preset--classic #hero .section-subtitle, body.tlv2-hero-preset--classic #hero .hero-body{ margin-inline: 0; }body.tlv2-hero-preset--classic #hero .cta-group{ justify-content: flex-start; }}/* MINIMAL: un poco más compacto */body.tlv2-hero-preset--minimal #hero{ padding-block: clamp(2rem, 3.5vw, 4rem); }/* CENTERED: un poco más aire */body.tlv2-hero-preset--centered #hero{ padding-block: clamp(3.25rem, 5.5vw, 7.25rem); }/* ------------------------------------------------------------ Presets: Packs (layout) Nota: override directo para .packs-grid (bridge temporal). TODO (W3): mover a vars y que el componente lea las vars. ------------------------------------------------------------ *//* STACKED: siempre 1 columna (mobile + desktop) */body.tlv2-packs-preset--stacked #packs .packs-grid{ grid-template-columns: 1fr !important; }/* GRID 2/3: solo desde desktop, para no romper mobile */@media (min-width: 768px){body.tlv2-packs-preset--grid-2 #packs .packs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }body.tlv2-packs-preset--grid-3 #packs .packs-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }}/* ------------------------------------------------------------ Presets: Testimonios (layout) Nota: override directo para .testimonials-grid (bridge temporal). TODO (W3): mover a vars y que el componente lea las vars. ------------------------------------------------------------ *//* COMPACT: siempre 1 columna */body.tlv2-testimonios-preset--compact #testimonios .testimonials-grid{ grid-template-columns: 1fr !important; }/* CARDS: es el default (no requiere override) *//* body.tlv2-testimonios-preset--cards #testimonios .testimonials-grid{ } *//* ------------------------------------------------------------ TLV2 — TESTIMONIOS presets (canonical v0.1) - Mobile: siempre 1 columna (evita amontonamiento) - Desktop: stacked=1, compact=2, cards=3 Nota: usamos !important porque es capa "presets" (bridge temporal). ------------------------------------------------------------ */body.tlv2-testimonios-preset--stacked #testimonios .testimonials-grid, body.tlv2-testimonios-preset--stacked #testimonios .testimonios-grid{ grid-template-columns: 1fr !important; }/* Mobile: compact/cards => 1 columna */@media (max-width: 767px){body.tlv2-testimonios-preset--compact #testimonios .testimonials-grid, body.tlv2-testimonios-preset--cards #testimonios .testimonials-grid, body.tlv2-testimonios-preset--compact #testimonios .testimonios-grid, body.tlv2-testimonios-preset--cards #testimonios .testimonios-grid{ grid-template-columns: 1fr !important; }}/* Desktop: compact 2 columnas, cards 3 columnas */@media (min-width: 768px){body.tlv2-testimonios-preset--compact #testimonios .testimonials-grid, body.tlv2-testimonios-preset--compact #testimonios .testimonios-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }body.tlv2-testimonios-preset--cards #testimonios .testimonials-grid, body.tlv2-testimonios-preset--cards #testimonios .testimonios-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }} /* ------------------------------------------------------------ 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 .tlv2-container{ max-width: 44rem !important; gap: var(--space-2) !important; } body.tlv2-cta-final-preset--minimal #cta-final .cta-group{ gap: var(--space-2) !important; } /* BANNER */ body.tlv2-cta-final-preset--banner #cta-final .tlv2-container{ max-width: 64rem !important; text-align: left !important; } body.tlv2-cta-final-preset--banner #cta-final .cta-group{ justify-content: flex-start !important; } @media (max-width: 767px){ body.tlv2-cta-final-preset--banner #cta-final .tlv2-container{ text-align: center !important; } }