/* ═══════════════════════════════════════════════ ETEXCA — header.css ─────────────────────────────────────────────── Header de cristal flotante con zona de logo dedicada. Se intensifica (más opaco/blur) al hacer scroll — controlado por js/main.js añadiendo la clase .is-scrolled al . ═══════════════════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); padding: var(--space-2) 0 0; transition: padding var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out); will-change: transform; } /* Retirado hacia arriba mientras se baja (js/main.js pone la clase en ). Se va del todo — el 130 % cubre el padding y la sombra. */ body.is-header-hidden .site-header { transform: translateY(-130%); } @media (prefers-reduced-motion: reduce) { .site-header { transition: padding var(--dur-base) var(--ease-soft); } body.is-header-hidden .site-header { transform: none; } } .site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 100%; padding: 0.65rem 0.75rem 0.65rem 1.1rem; background: rgba(var(--surface-rgb), 0.45); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); backdrop-filter: blur(var(--glass-blur-sm)); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); transition: background var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft); } body.is-scrolled .site-header__row { background: rgba(var(--surface-rgb), 0.78); border-color: var(--glass-border-strong); } /* TEMA CLARO — al bajar (ya no estamos en la primera pantalla), el header deja de ser cristal y pasa a ser SÓLIDO: si no, el texto de la página se transparenta detrás del menú y se lee sucio. Arriba del todo (sin .is-scrolled) sigue siendo transparente. El tema oscuro no se toca. */ html[data-theme="light"] body.is-scrolled .site-header__row { background: var(--void-soft); border-color: var(--glass-border-strong); box-shadow: 0 10px 30px -18px rgba(15, 30, 56, 0.45); } /* TEMA OSCURO — misma lógica: transparente en la primera pantalla, sólido en cuanto se ha bajado. */ html[data-theme="dark"] body.is-scrolled .site-header__row { background: var(--void-soft); border-color: var(--glass-border-strong); box-shadow: 0 14px 36px -20px rgba(0, 0, 0, 0.85); } /* ─── Zona de logo (antes inexistente) ─── Monograma de cristal + wordmark. Reemplazar el del monograma por cuando exista logotipo real del cliente. */ .site-header__mark { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--text-primary); } .site-header__mark-glyph { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--glass-fill); border: 1px solid var(--glass-border-strong); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--cyan); } .site-header__mark-word { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; } .site-nav { display: flex; align-items: center; gap: 1.5rem; } .site-nav a { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text-dim); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); position: relative; white-space: nowrap; /* Sin esto, algunos navegadores móviles pintan su propio "flash" azul brillante con texto blanco al tocar el link (el "highlight" táctil nativo), tapando el estilo real del menú y haciéndolo ilegible por un instante. */ -webkit-tap-highlight-color: transparent; } .site-nav a:hover { color: var(--cyan); } /* ─── Página activa (escritorio) ─── El enlace de la página actual lleva aria-current="page" en el HTML. Se marca con color cian permanente + una barra inferior con resplandor, misma familia visual que el indicador del menú móvil. Solo aplica en el nav horizontal (min-width): en móvil el nav se convierte en menú desplegable y usa su propio indicador más abajo. */ @media (min-width: 1101px) { .site-nav a[aria-current="page"] { color: var(--cyan); } .site-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px 1px var(--cyan-glow); } } .site-header__cta { margin-left: 0.25rem; } .site-header__actions { display: flex; align-items: center; gap: 0.85rem; } .site-header__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 0.5rem; } .site-header__toggle span { width: 20px; height: 1.5px; background: var(--text-primary); border-radius: 1px; } /* ═══════════════════════════════════════════════ INTERRUPTOR DE TEMA — modo claro / oscuro ─────────────────────────────────────────────── Botón circular de cristal, misma familia visual que el resto del header. Los dos íconos (sol/luna) ocupan la MISMA celda de grid (igual técnica que las caras de .trait-card) y se cruzan con fade + rotación sutil según el atributo data-theme en — sin JS de animación, solo CSS reaccionando al atributo. ═══════════════════════════════════════════════ */ /* Mismo cristal que .btn--primary: relleno de vidrio, filamento de luz arriba y resplandor interior. Solo cambia la forma (círculo). */ .theme-toggle { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(180deg, var(--btn-sheen), transparent 55%), var(--btn-glass); color: var(--btn-text); border: 1px solid var(--btn-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 0 var(--btn-inner-light), 0 2px 12px -4px var(--btn-drop); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } /* SIN filamento: en un botón rectangular la línea recorre el borde y se lee como luz; dentro de un círculo queda una rebaba recta metida en el vidrio. Aquí el cristal lo dan el relleno, el brillo interior superior (inset box-shadow) y el resplandor. */ /* Resplandor interior */ .theme-toggle::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: radial-gradient(120% 90% at 50% 0%, var(--cyan-glow), transparent 70%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .theme-toggle > * { position: relative; z-index: 1; } .theme-toggle:hover { transform: translateY(-1px); border-color: var(--cyan-dim); box-shadow: inset 0 1px 0 0 var(--btn-inner-light-hover), 0 0 0 1px var(--cyan-dim), 0 8px 20px -10px var(--cyan-glow); } .theme-toggle:hover::after { opacity: 1; } .theme-toggle:active { transform: translateY(0) scale(0.94); } /* El interruptor del menú solo existe en móvil (ver media query). */ .theme-toggle--nav { display: none; } .theme-toggle:hover { background: var(--glass-fill-hover); border-color: var(--glass-border-strong); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.94); } .theme-toggle__icon { grid-area: 1 / 1; display: flex; color: var(--cyan); transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft); } .theme-toggle__icon svg { width: 17px; height: 17px; display: block; } /* Dos temas: claro (sol) y oscuro (luna). Ambos íconos ocupan la misma celda; solo uno es visible según data-theme. */ .theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } html[data-theme="light"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.5); } html[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } /* Selector compuesto (.site-nav .site-nav__cta) a propósito: sube la especificidad por encima de .btn { display: inline-flex } de components.css. Como components.css se carga DESPUÉS de este archivo, con la misma especificidad (una sola clase) ganaba siempre — por eso el botón "Solicitar consulta" del menú (pensado solo para móvil) se colaba también en escritorio. El color se fija aquí a propósito, pero con var(--cyan) — NO con var(--text-on-cyan). El botón real usa .btn--ghost (fondo de cristal translúcido), no .btn--primary (fondo cian sólido). --text-on-cyan está pensado para leerse SOBRE cian, así que aquí se volvía casi negro en modo oscuro y blanco puro en modo claro — invisible sobre el cristal translúcido en ambos temas, y solo visible cuando ".site-nav a:hover" (más específico) lo pisaba con var(--cyan) al pasar el cursor. Con var(--cyan) fijo, el texto se ve igual con o sin hover, en los dos temas. */ .site-nav .site-nav__cta { display: none; color: var(--cyan); } /* Breakpoint subido de 860px a 1100px: con 7 ítems en el nav, el menú horizontal se aprieta en pantallas medianas. A partir de aquí (y hacia abajo) se usa el menú desplegable/hamburguesa, que lista los 7 ítems cómodamente con su numeración. El nav horizontal solo se muestra en escritorio ancho (min-width:1101px). */ @media (max-width: 1100px) { /* .site-header__cta.btn — cualificado a propósito: el elemento también lleva .btn, y components.css (que carga DESPUÉS) le pone display:inline-flex con la misma especificidad, así que ganaba. Por eso el botón seguía saliendo en móvil, comiéndose el sitio y encogiendo el logo hasta hacerlo desaparecer. */ .site-header__cta.btn { display: none; } .site-nav { position: fixed; top: 4.6rem; left: var(--gutter); right: var(--gutter); flex-direction: column; align-items: stretch; gap: 0; /* OPACO a propósito: translúcido, el texto de la página se leía por debajo del menú y ensuciaba. Sólido en los dos temas. */ background: var(--void-soft); background-image: radial-gradient(circle at 100% 0%, var(--radial-accent), transparent 55%); border: 1px solid var(--glass-border-strong); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0,0,0,0.4); max-height: 0; overflow: hidden; opacity: 0; padding: 0 0.35rem; counter-reset: navitem; transition: max-height var(--dur-base) var(--ease-soft), opacity var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out); } .site-nav.is-open { max-height: 520px; opacity: 1; padding: 0.5rem 0.35rem 1rem; } /* Pie del menú: WhatsApp a la izquierda, tema a la derecha. Alineado con el margen interior de los enlaces, para no romper la retícula. */ .site-header__actions .theme-toggle { display: none; } .site-nav__tools { display: flex; align-items: stretch; gap: 0.6rem; margin: 0.9rem 0 0.25rem; /* mismo borde que los enlaces */ } /* WhatsApp ocupa todo el ancho libre: así queda alineado con los enlaces de arriba y no como un botoncito suelto en la esquina. */ .wa-btn { display: flex; flex: 1 1 auto; justify-content: center; height: 48px; } .theme-toggle--nav { display: grid; flex: 0 0 48px; width: 48px; height: 48px; } .site-nav a:not(.wa-btn) { counter-increment: navitem; display: flex; align-items: center; position: relative; padding: 1rem 0.75rem; border-top: 1px solid var(--rule); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; } .site-nav a:first-child { border-top: none; } .site-nav a:not(.site-nav__cta):not(.wa-btn)::before { content: "0" counter(navitem); font-family: var(--font-mono); font-size: 0.68rem; color: var(--cyan); margin-right: 0.85rem; letter-spacing: 0.06em; } /* Indicador de "sección actual" — antes era un relleno de fondo cian brillante que tapaba el texto y lo hacía illegible. Ahora es una línea inferior que crece de izquierda a derecha; el color de fondo nunca cambia, así que el texto blanco siempre se puede leer. */ .site-nav a:not(.site-nav__cta)::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.35rem; height: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px 1px var(--cyan-glow); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-soft); } .site-nav a:not(.site-nav__cta):active, .site-nav a:not(.site-nav__cta):hover, .site-nav a:not(.site-nav__cta):focus-visible { color: var(--text-primary); } .site-nav a:not(.site-nav__cta):active::after, .site-nav a:not(.site-nav__cta):hover::after, .site-nav a:not(.site-nav__cta):focus-visible::after { transform: scaleX(1); } /* Página activa en el menú móvil: barra inferior visible de forma permanente y texto en color primario, sin depender del hover. */ .site-nav a[aria-current="page"]:not(.site-nav__cta) { color: var(--text-primary); } .site-nav a[aria-current="page"]:not(.site-nav__cta)::after { transform: scaleX(1); } .site-nav .site-nav__cta { display: flex; justify-content: center; margin: 0.85rem 0.15rem 0.15rem; border-top: none; } .site-nav .site-nav__cta::before { content: none; } .site-header__toggle { display: flex; } } /* ═══════════════════════════════════════════════ LOGOTIPO REAL — composición original del cliente (sin recomponer). Dos versiones (marina / plateada) superpuestas en la MISMA caja; cuál se ve depende solo de data-theme en — crossfade puro en CSS, igual técnica que las imágenes del hero. Nada de filtros invert: se usan los archivos reales, así los huecos de las letras y la línea divisoria se ven exactamente como en el original. ═══════════════════════════════════════════════ */ .site-header__mark, .site-footer__mark { position: relative; display: block; line-height: 0; min-width: 0; /* puede encogerse: sin esto la fila desborda */ } /* object-fit: contain es la clave. La regla global img{max-width:100%} con una altura fija APLASTABA el logo al estrecharse su caja; y con max-width:none + flex-shrink:0 dejaba de aplastarse pero DESBORDABA la barra en móvil y echaba el botón del menú fuera de la pantalla (por eso "el menú no salía"). Con contain, si la caja se estrecha, la imagen se reduce manteniendo su proporción: ni se aplasta ni desborda. */ .site-header__logo, .site-footer__logo { display: block; width: auto; max-width: 100%; object-fit: contain; object-position: left center; transition: opacity var(--dur-base) var(--ease-out); } .site-header__logo { height: 38px; } .site-footer__logo { height: 60px; } /* ISOTIPO EN MÓVIL — en la barra no cabe el logo horizontal sin comerse el sitio del menú. Debajo de 560px se usa solo la montaña: marina en tema claro, plateada en tema oscuro (mismo crossfade que el logo grande). */ .site-header__logo--mark, .site-header__logo--mark-light { display: none; } @media (max-width: 560px) { .site-header__logo--dark, .site-header__logo--light { display: none; } .site-header__logo--mark { display: block; height: 44px; opacity: 1; } .site-header__logo--mark-light { display: block; position: absolute; top: 0; left: 0; height: 44px; opacity: 0; } html[data-theme="dark"] .site-header__logo--mark { opacity: 0; } html[data-theme="dark"] .site-header__logo--mark-light { opacity: 1; } .site-footer__logo { height: 50px; } .site-header__row { gap: 0.6rem; padding: 0.55rem 0.6rem 0.55rem 0.85rem; } } @media (max-width: 400px) { .site-header__logo--mark, .site-header__logo--mark-light { height: 40px; } } /* La 2ª imagen se apila exactamente sobre la 1ª */ .site-header__logo--light, .site-footer__logo--light { position: absolute; top: 0; left: 0; height: 100%; } /* Tema claro (por defecto): logo marino visible, plateado oculto */ .site-header__logo--light, .site-footer__logo--light { opacity: 0; } /* Tema oscuro: se cruza al plateado */ html[data-theme="dark"] .site-header__logo--dark, html[data-theme="dark"] .site-footer__logo--dark { opacity: 0; } html[data-theme="dark"] .site-header__logo--light, html[data-theme="dark"] .site-footer__logo--light { opacity: 1; } /* (Aquí vivía un @media 480px que bajaba el logo a 30px. Estaba DESPUÉS de las reglas nuevas, así que las pisaba y por eso el logo seguía saliendo diminuto en el móvil. Eliminado.) */ /* ═══════════════════════════════════════════════ WHATSAPP — cristal verde, solo en el menú móvil. Mismo lenguaje que los botones: vidrio, brillo interior y resplandor propio. El color es el de la marca, no el dorado. ═══════════════════════════════════════════════ */ /* Ocultos SOLO en escritorio, con un @media de mínimo. [ERROR COMETIDO] Antes esto era `display:none` a secas al final del archivo: pisaba al `display:flex` de la media query de móvil, que va ANTES y tiene la misma especificidad. Resultado: en móvil no salía ni el WhatsApp ni el interruptor de tema. */ @media (min-width: 1101px) { .site-nav__tools { display: none; } .wa-btn { display: none; } } .wa-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 42px; padding: 0 1.05rem; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: #146C43; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 55%), rgba(37, 211, 102, 0.16); border: 1px solid rgba(20, 108, 67, 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 2px 12px -4px rgba(20, 108, 67, 0.35); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } html[data-theme="dark"] .wa-btn { color: #7BE3A8; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 55%), rgba(37, 211, 102, 0.12); border-color: rgba(123, 227, 168, 0.35); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 2px 12px -4px rgba(37, 211, 102, 0.30); } .wa-btn:active { transform: translateY(0) scale(0.97); } @media (hover: hover) { .wa-btn:hover { transform: translateY(-1px); border-color: rgba(37, 211, 102, 0.7); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(37, 211, 102, 0.35), 0 8px 20px -10px rgba(37, 211, 102, 0.55); } }