/* ============================================================ TICO PLUNGE · CAPA DE UNIFICACIÓN (v15.1) -------------------------------------------------------------- Re-skinea las páginas internas (reservar / sesiones / calculadora / catalogo / admin) a la MISMA estética de la home rediseñada: · Paleta de marca (azul #245E87, tinta #1D1D1B, lienzo crema) · Nav translúcido crema + pill "Reservar" oscuro (como la home) · Footer obsidiana Las páginas internas ya usan Fraunces + Exo 2 + énfasis itálico azul y consumen TODO vía tokens, así que basta con remapear los tokens y ajustar nav/footer. NO se toca ninguna lógica ni hook de JS. Se carga DE ÚLTIMO en el de cada página interna (gana en la cascada sobre tokens.css / components.css). ============================================================ */ /* 1) PALETA DE MARCA — remapea los tokens v14 a los valores de marca */ :root{ --ink: #1D1D1B; /* negro cálido (color dominante) */ --ink-soft: #54534F; /* grafito */ --ice: #94352A; /* ember/borgoña — MISMO acento que la home */ --ice-light: #C56B5A; /* brick-rose — acento sobre fondos oscuros */ --deep: #4A1D1D; /* borgoña profundo */ --paper: #FFFFFF; /* superficies/cards/nav: blancas */ --paper-warm: #ECE7DB; /* franjas cálidas */ --cream: #F5F2EB; /* lienzo cálido de marca */ --line: rgba(29,29,27,0.10); --line-strong: rgba(29,29,27,0.22); /* Sombras cálidas teñidas de borgoña (igual que la home) */ --shadow-sm: 0 4px 16px -6px rgba(74,29,29,0.12); --shadow-md: 0 12px 30px -10px rgba(74,29,29,0.18); --shadow-lg: 0 24px 60px -16px rgba(74,29,29,0.22); --shadow-xl: 0 32px 70px -18px rgba(74,29,29,0.26); --shadow: var(--shadow-lg); --shadow-strong: var(--shadow-lg); --shadow-soft: var(--shadow-sm); } /* 2) Lienzo cálido de marca en todo el sitio interno */ body{ background: var(--cream); } /* Encabezados de página: degradé cálido (en vez de blanco→gris) */ .page-header{ background: linear-gradient(180deg, var(--cream) 0%, var(--paper-warm) 100%); } /* 3) NAV — translúcido crema con blur + logo SVG, igual que la home */ .nav{ background: rgba(245,242,235,0.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); } .nav.is-scrolled{ background: rgba(245,242,235,0.94); box-shadow: var(--shadow-sm); } .nav-logo img{ height: 26px; width: auto; } .nav-links{ gap: 30px; } .nav-links a{ font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none; } .nav-links a.is-active{ color: var(--ice); } /* CTA del nav → pill oscuro "Reservar" (como la home) */ .nav-cta{ background: var(--ink); color: var(--paper); border: none; border-radius: 100px; padding: 11px 22px; font-weight: 600; font-size: 13px; letter-spacing: .01em; text-transform: none; transition: background .2s var(--ease-out), transform .2s var(--ease-out); } .nav-cta:hover{ background: var(--ice); color: var(--paper); transform: translateY(-1px); } /* Menú móvil sobre crema (no blanco puro) */ @media (max-width: 920px){ .nav-links{ background: rgba(245,242,235,0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } } /* 4) FOOTER — obsidiana, como la home */ .footer{ background: #0B0C0D; } .footer-brand-logo{ color: #F5F2EB; } .footer-tagline{ color: rgba(245,242,235,0.62); } /* 5) WhatsApp flotante — verde de marca consistente con la home */ .wa-float{ background: #25D366; color: #fff; } /* 6) Detalles finos para igualar el registro de la home */ .option-card.selected{ box-shadow: var(--shadow-md); } .step-panel{ box-shadow: var(--shadow-sm); } ::selection{ background: var(--ice); color: #fff; } /* ============================================================ LEGIBILIDAD EN SECCIONES OSCURAS (catálogo + sesiones) Mantiene la estética oscura premium, pero garantiza contraste: texto blanco cálido a opacidad alta y reemplaza el glow AZUL hardcodeado por un resplandor borgoña de marca. ============================================================ */ /* Glow cálido (antes era azul rgba(36,94,135)) */ .cta-final::before, .page-hero::before{ background: radial-gradient(circle, rgba(148,53,42,0.22), transparent 60%); } /* Títulos plenos y legibles sobre oscuro */ .page-hero h1, .memb-dark .section-title, .memb-group-title, .memb-name, .cta-final h2{ color: #F7F4EE; } /* Texto de apoyo: subir contraste */ .page-hero p, .cta-final p, .memb-dark .section-lead{ color: rgba(247,244,238,0.88); opacity: 1; } .memb-sessions{ color: rgba(247,244,238,0.82); } .memb-price{ color: #F7F4EE; } .memb-price-sub{ color: rgba(247,244,238,0.68); } /* Tarjeta destacada (fondo borgoña): texto blanco pleno */ .memb-card.featured .memb-name, .memb-card.featured .memb-price{ color: #FFFFFF; } /* Early-bird: dorado más claro y legible sobre oscuro */ .memb-early-label, .memb-card.early .memb-tag, .memb-card.early .memb-price-sub, .memb-card.early .memb-pay-btn{ color: #E7C45A; } /* ============================================================ AJUSTES FINALES (v15.3) ============================================================ */ /* 2) Calculadora · header unificado con el del catálogo (claro → el logo del nav se ve bien, igual que en catálogo). Antes era oscuro con glow azul. */ .hero{ background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%); color: var(--ink); padding: 160px 5vw 80px; text-align: center; } .hero::before{ background: radial-gradient(ellipse at center, rgba(148,53,42,0.10), transparent 60%); } .hero-inner{ max-width: 780px; margin: 0 auto; } .hero .brand{ color: var(--ice); justify-content: center; } .hero .brand::before, .hero .brand::after{ background: var(--ice); } .hero h1{ color: var(--ink); } .hero h1 em{ color: var(--ice); } .hero p{ color: var(--ink-soft); opacity: .85; max-width: 620px; margin: 0 auto; } /* Catálogo · Premium: el contenedor toma el MISMO ratio (16:9) que la foto, así el plunge se ve COMPLETO — sin recorte lateral y sin franjas vacías. (Essencial y Advance se dejan en 4:3, intactos.) */ #premium .product-detail-image{ aspect-ratio: 16 / 9; align-self: center; max-height: none; overflow: hidden; } #premium .product-detail-image img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }