/* SIN @import Y SIN CDN — regla dura del motor.
Las fuentes se eligen del catálogo de Google Fonts (licencia abierta) pero
se sirven SIEMPRE desde portada/fonts/. Cargarlas del CDN añade una
dependencia bloqueable y, en Europa, un problema de RGPD. Si cambias de
tipografía: descarga los woff2 aquí, ajusta los @font-face de abajo y
actualiza la precarga de functions.php (campamento_fuentes_criticas).
Comprobación: el HTML servido no debe pedir fonts.googleapis.com. */
/* ==========================================================================
Campamento · sistema de estilos de la portada
La identidad (paleta, tipografía, logo) es RANURA: sale del Norte, bloque 5-bis.
Reglas de uso del color: el acento jamás como texto sobre blanco.
========================================================================== */
/* --- Poppins autoalojada (woff2 latin, sin CDN) — la tipografía por defecto --- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
src: url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
src: url('fonts/poppins-800.woff2') format('woff2'); }
/* --- Chakra Petch (grotesca técnica) — DISPLAY: titulares + wordmark. Autoalojada, sin CDN. --- */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap;
src: url('fonts/chakra-petch-500.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap;
src: url('fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap;
src: url('fonts/chakra-petch-700.woff2') format('woff2'); }
/* --- Variables del sistema ---
La paleta de abajo es el DEFAULT NEUTRO del motor: existe para que el tema
funcione recién instalado y para que SE NOTE cuando no se ha personalizado.
Cada proyecto la sustituye por la suya desde el Norte, bloque 5-bis. */
:root {
/* ══════════════════════════════════════════════════════════════════════
LA PALETA — RANURA. Fuente: Norte, bloque 5-bis (identidad visual).
Los valores de abajo son el DEFAULT NEUTRO del motor: existen para que
el tema funcione recién instalado y para que se note cuando NO se ha
personalizado. `alistamiento-proyecto` los sustituye por los del
proyecto antes del estreno.
Si estos valores llegan vivos al día del estreno, el alistamiento falló.
══════════════════════════════════════════════════════════════════════ */
--tinta: #0B1626; /* fondo oscuro y tinta de los titulares */
--acento: #CFE04A; /* el color de marca: titulares sobre tinta, CTA, nodos */
--violeta: #8A9099; /* acento secundario: enlaces, numeración */
--naranja: #E3F07A; /* acento terciario: hover, alertas suaves */
--texto: #F4F5F7; /* texto sobre fondo claro */
--gris-claro: #C7CBD1; /* texto sobre fondo oscuro */
--fondo: #0B1626; /* fondo del cuerpo */
--fondo-suave:#1C1D22; /* fondo de secciones suaves */
--cian: #2BB8C6; /* CIAN — atmósfera digital (Norte 5-bis): glows, línea del arco, nodos */
--cian-glow: rgba(43,184,198,.85);
--lima: #CFE04A; /* LIMA LULO — color de RESALTE (hover, glows puntuales); no fondo */
/* Vidrio y superficies — derivadas de la paleta; normalmente no se tocan. */
--h-vidrio-1: rgba(223, 222, 206, 0.8);
--h-vidrio-2: rgba(194, 184, 172, 0.3);
--h-borde-luz: rgba(255, 255, 255, 0.2);
--h-item-bg: #1C1D22;
--h-item-hover: #c9c8ba;
--h-menu-overlay: rgba(212, 211, 192, 0.6);
/* ── TIPOGRAFÍA — RANURA. Fuente: Norte, bloque 5-bis. ──────────────────────────
Las fuentes se eligen del catálogo de GOOGLE FONTS y se sirven DESDE
AQUÍ (portada/fonts/*.woff2), jamás desde su CDN: su licencia abierta lo
permite, y el CDN añade una dependencia bloqueable y, en Europa, un
problema de RGPD. Al cambiarlas hay que: ① descargar los woff2 a
portada/fonts/ ② ajustar los @font-face de arriba ③ actualizar la lista
de precarga en functions.php (`campamento_fuentes_criticas`).
El default es Poppins, que ya viaja autoalojada en el tema. */
--fuente: 'Poppins', system-ui, -apple-system, sans-serif;
--fuente-display: 'Chakra Petch', 'Poppins', system-ui, sans-serif;
--ancho-max: 1200px;
--nav-alto: 64px;
}
/* El botón del menú móvil solo existe bajo 1200 px (ver el bloque del hero móvil). */
.nav-menu-boton { display: none; }
/* --- Reset mínimo --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* (2026-08-19) SIN SCROLL LATERAL DE PÁGINA. La capa de animación deja cajas
post-transform que ensanchan el documento unos píxeles (20–31 medidos a
390/768/1600) y aparecían un scroll horizontal sin función y una barra
enana en el borde. `clip` y no `hidden`: recorta sin convertir el body en
contenedor de scroll (sticky y anclas intactos). El scroll horizontal
LEGÍTIMO de la pista de activos vive dentro de su marco y no se toca. */
/* hidden primero como red (iOS < 16 no conoce `clip` y lo ignora — sin la
red, esos Safari conservaban el scroll lateral fantasma); clip lo pisa
donde existe, que recorta sin crear contenedor de scroll. */
html, body { overflow-x: hidden; overflow-x: clip; }
/* T2.2 · con la capa GSAP activa el scroll suave lo lleva ScrollTo (no animar doble);
con movimiento reducido, salto directo siempre */
html.anim-activa { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }
/* La clase la emite template-portada.php: body_class('portada-campamento').
Cazado en el primer despliegue sin tema padre (2026-08-18): decía
`.portada-proyecto` y NADA le daba tipografía al body — con BeTheme detrás
no se notaba, sin él las píldoras salían en serif. */
body.portada-campamento {
font-family: var(--fuente);
color: var(--texto);
background: var(--fondo);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
a { color: var(--violeta); text-decoration: none; }
a:hover { color: var(--naranja); }
::selection { background: var(--acento); color: var(--tinta); }
/* --- Tipografía base --- */
h1, h2, h3 { color: var(--texto); line-height: 1.15; font-weight: 700; font-family: var(--fuente-display); }
h1 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); letter-spacing: -0.01em; }
.eyebrow {
font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; margin-bottom: 1rem;
}
/* --- Estructura de secciones --- */
.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.seccion { padding: clamp(4rem, 10vh, 7rem) 0; scroll-margin-top: calc(var(--nav-alto) + 24px); }
/* Todas las secciones después del hero se pintan por ENCIMA del retrato
del fundador pineado (z-index:2) para que el retrato quede detrás
mientras se desvanece — la Sección 2 y sus texturas lo van tapando al scroll. */
.seccion:not(#hero) { position: relative; z-index: 5; }
#pie { position: relative; z-index: 5; }
.seccion-suave { background: var(--fondo-suave); }
/* Textura para secciones CLARAS: aplicada como background DIRECTO del
section (no como pseudo con mix-blend-mode). Aplicar la textura al
pseudo con blend rompía el `backdrop-filter` de los hijos (tarjetas
del arco): el blend aísla el stacking context. Con backgrounds
directos el blur ve el fondo real. */
/* excluye .seccion-h-scroll — la Sección 4 (activos) tiene su propio fondo oscuro
con gradient beige→tinta. Sin este :not extra, la textura clara de dots
pisaba el gradient y la Sección 4 se volvía transparente/clara. */
.seccion:not(.seccion-tinta):not(.seccion-h-scroll) {
background-image:
url("data:image/svg+xml;utf8,");
background-size: 500px 500px;
background-color: var(--fondo);
}
/* Secciones en tinta: gradientes radiales de color + noise SVG con blend
`screen` (sobre negro suma luz, sí visible; `overlay` sobre 0 daba 0).
Textura fuerte para que el `backdrop-filter: blur` de los .mod-bg lo
muestre difuminado. */
.seccion-tinta {
position: relative;
background:
radial-gradient(ellipse at 15% 20%, rgba(43, 184, 198, 0.22) 0%, transparent 52%),
radial-gradient(ellipse at 85% 75%, rgba(207, 224, 74, 0.14) 0%, transparent 46%),
radial-gradient(ellipse at 55% 8%, rgba(43, 184, 198, 0.12) 0%, transparent 42%),
radial-gradient(ellipse at 30% 90%, rgba(207, 224, 74, 0.10) 0%, transparent 50%),
var(--tinta);
}
.seccion-tinta::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 1;
/* Rejilla HUD — capa digital de la Identidad v0.2, sobre los glows cian/naranja. */
background-image:
linear-gradient(rgba(190, 215, 222, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(190, 215, 222, 0.16) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: linear-gradient(to bottom, #000, #000 55%, transparent 92%);
mask-image: linear-gradient(to bottom, #000, #000 55%, transparent 92%);
}
.seccion-tinta > * { position: relative; z-index: 1; }
.seccion-tinta h1, .seccion-tinta h2 { color: var(--acento); }
.seccion-tinta p { color: var(--gris-claro); }
.seccion-tinta .eyebrow { color: var(--gris-claro); }
#hero { min-height: 92vh; display: flex; align-items: center; padding-top: calc(var(--nav-alto) + 3rem); }
/* Marcadores de T1.5 (se van con el copy) */
.placeholder-t15 { opacity: 0.45; font-style: italic; margin-top: 1rem; }
/* --- Nav flotante (siempre tinta → logo acento, regla del logo cumplida) --- */
#nav-portada {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 1000;
display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
height: var(--nav-alto);
padding: 0 clamp(1rem, 2.5vw, 1.75rem);
background: color-mix(in srgb, var(--tinta) 92%, transparent);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 999px;
transition: box-shadow 0.3s ease, top 0.3s ease;
}
#nav-portada.desplazada { box-shadow: 0 8px 30px rgba(43, 184, 198, 0.35); }
.nav-logo img:not(.nav-iso) { width: 141px; height: auto; } /* el logo-imagen; el isotipo (.nav-iso) se dimensiona aparte */
.nav-iso { width: auto; height: 32px; flex: 0 0 auto; display: block; } /* isotipo: aspecto fijo en TODO breakpoint (no lo encoge el flex) */
/* El logo de texto SIEMPRE en mayúscula, como la marca gigante del hero
(2026-09-04): en el panel lateral y en la píldora/barra móvil. Regla global
(text-transform no depende del breakpoint). El bicolor Lulo/Pix se conserva y,
de paso, el vuelo del hero aterriza en un objetivo con las MISMAS letras
(LULOPIX → LULOPIX), no en uno de caja mixta. */
.nav-logo-txt { text-transform: uppercase; font-family: var(--fuente-display); } /* Chakra Petch en TODO breakpoint (2026-09-05): la base no lo fijaba (solo lo hacía la regla de escritorio ≥1200px) y en móvil el logo caía a Poppins del body. */
.nav-anclas { display: flex; gap: clamp(0.75rem, 2vw, 1.75rem); }
/* Base pre-panel-modular (píldora <1200px): texto beige sobre fondo tinta.
En el panel modular (≥1200px) la especificidad se sube para meter tinta
sobre item-bg beige (ver bloque ≥1200px `.nav-anclas .nav-ancla`). */
.nav-anclas a {
color: var(--gris-claro); font-size: 0.95rem; font-weight: 500;
transition: color 0.2s ease;
}
.nav-anclas a:hover, .nav-anclas a.activa { color: var(--acento); }
/* Panel modular: negro sobre beige */
@media (min-width: 1200px) {
.nav-anclas .nav-ancla { color: var(--tinta); }
}
.nav-cta {
background: var(--acento); color: var(--tinta);
font-weight: 600; font-size: 0.95rem;
padding: 0.55em 1.3em; border-radius: 999px;
/* IMPORTANTE: NO transitionar `transform`. GSAP escribe transform inline al
REAL cuando vuela desde el hero (Flip.fit fromVars); un `transition:
transform` haría que el REAL viaje ANIMADAMENTE desde su posición natural
del panel hasta la del ghost durante los primeros 200ms al cargar
(bug cazado 2026-07-23: "entra desde la izquierda animado"). */
transition: background 0.2s ease;
}
.nav-cta:hover { color: var(--tinta); background: #E3F07A; }
/* ==========================================================================
T2.5 · D8-v2 — Panel modular con vuelo (≥1200px), paleta del proyecto.
Estado por defecto del CSS = panel ENSAMBLADO (sin JS se ve completo).
El JS lo desarma al cargar; los ghosts del hero son siempre invisibles.
Receta visual: vidrio + borde de luz + radio unificado + CERO box-shadow.
========================================================================== */
@media (min-width: 1200px) {
:root {
--panel-ancho: 280px;
--panel-margen: 16px;
/* Vidrio para fondo NEGRO (2026-07-23 feedback usuario): blanco 8-15 %
+ borde luz + blur alto. El vidrio beige (--h-vidrio-1) se
veía como bloque opaco sobre negro; el vidrio blanco translúcido deja
ver el fondo y da el efecto real. */
--vidrio-tinta: rgba(255, 255, 255, 0.08); /* main glass panels sobre negro */
--vidrio-violeta: rgba(255, 255, 255, 0.15); /* placas voladoras / slots */
--borde-luz: rgba(255, 255, 255, 0.15);
--radio-mod: 12px;
--radio-slot: 10px;
}
/* el hueco del panel vive en las SECCIONES, no en #smooth-content: así los
fondos (tinta del hero incluido) fluyen por debajo del vidrio del panel
(y el wrapper del smoother es fixed e ignora el padding del body) */
#smooth-content { padding-left: 0; }
.seccion:not(#hero):not(#cta) { padding-left: calc(var(--panel-ancho) + var(--panel-margen) * 2); }
/* el hero va full-bleed: cuando se ve, el panel está desarmado (patrón NESH) */
/* la columna es TRANSPARENTE: cada módulo lleva su propio vidrio */
#nav-portada {
/* Panel de altura NATURAL, centrado vertical en el viewport (top:50 +
translateY -50). Márgenes arriba/abajo iguales por el centrado. */
top: 50%; left: 0; bottom: auto; height: auto; transform: translateY(-50%);
width: var(--panel-ancho); margin: 0 var(--panel-margen);
padding: 0; background: transparent; border-radius: 0;
backdrop-filter: none; -webkit-backdrop-filter: none;
/* 4 mods con separación vertical UNIFORME (gap 14px). */
display: grid; grid-template-rows: auto auto auto auto; gap: 14px;
overflow: visible;
}
#nav-portada.desplazada { box-shadow: none; }
/* ---------------------------------------------------------------------
Toggle POR MÓDULO (feedback usuario 2026-07-23): cada `.mod` recibe la
clase `.mod-en-claro` cuando la sección que está a su altura Y tiene
fondo claro. Así los módulos se adaptan independientemente cuando el
panel abarca dos secciones (transición negro → claro).
Excluidos: logo, CTA, "Ver el canal" (amarillos, identidad de marca).
JS: portada-anim.js aplica el toggle por módulo usando ScrollTriggers.
--------------------------------------------------------------------- */
#nav-portada .nav-logo-txt,
#nav-portada .mod-bg,
#nav-portada .nav-badge,
#nav-portada .nav-canal-desc,
#nav-portada .mod-canales a,
#nav-portada .ancla-num,
#nav-portada .nav-anclas .nav-ancla {
transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.mod.mod-en-claro .mod-bg {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
.mod.mod-en-claro .nav-badge,
.mod.mod-en-claro .nav-canal-desc,
.mod.mod-en-claro .mod-canales a,
.mod-canales.mod-en-claro a,
.mod.mod-en-claro .ancla-num {
color: var(--tinta);
}
.mod-anclas.mod-en-claro .nav-anclas .nav-ancla {
color: var(--tinta);
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.08);
}
.mod-anclas.mod-en-claro .nav-anclas .nav-ancla:hover {
background: rgba(207, 224, 74, 0.30);
color: var(--tinta);
border-color: rgba(207, 224, 74, 0.5);
}
/* "Ver el canal" (nav-canal): ghost amarillo — buen contraste sobre oscuro,
pero sobre sección CLARA el amarillo se pierde. En estado claro se vuelve
píldora SÓLIDA oscura con texto amarillo (alto contraste). Hover: invierte
a amarillo con texto oscuro. (2026-08-28, feedback usuario.) */
.mod.mod-en-claro .nav-canal {
background: var(--tinta);
color: var(--acento);
border-color: var(--tinta);
}
.mod.mod-en-claro .nav-canal:hover {
background: var(--acento);
color: var(--tinta);
border-color: var(--acento);
}
/* Logo "LuloPix" (nav-logo-txt): REGLA DE MARCA consciente del fondo — versión
CLARA (acento) sobre oscuro, versión OSCURA (tinta) sobre claro. Para un logo
de TEXTO es un swap de color; para un logo de IMAGEN, la plantilla debe
entregar dos assets (claro/oscuro) y cambiarlos en este mismo estado.
(2026-08-28, feedback usuario — a formalizar en el branding del motor.) */
.mod.mod-en-claro .nav-logo-txt { color: var(--tinta); }
/* --- lenguaje común de módulo --- */
.mod { position: relative; border-radius: var(--radio-mod); }
.mod-bg {
position: absolute; inset: 0; z-index: 0;
background: var(--vidrio-tinta);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid var(--borde-luz);
border-radius: inherit; transform-origin: 0 0; pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
/* Fallback sobre negro: gris oscuro casi opaco (vidrio sin blur). */
.mod-bg { background: rgba(255, 255, 255, 0.10); }
}
.mod > :not(.mod-bg):not(.vuelo-bg) { position: relative; z-index: 2; }
/* placa voladora — mismo lenguaje visual que el `#hero .boton-borde` del CTA
"Mira lo que estoy construyendo": vidrio blanco 15% + blur 10 + borde
2px blanco 30% (feedback usuario). */
.vuelo-bg {
position: absolute; inset: 0; z-index: 1;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radio-mod); transform-origin: 0 0; pointer-events: none;
}
/* M1 logo — texto REAL "LA MARCA" que vuela desde el .hero-marca gigante.
Dimensiones ajustadas para que COINCIDAN pixel a pixel con la marca al
aterrizar (font-size + opsz fijo → mismo aspect ratio + mismo rect que
la marca escalada uniformemente). Bricolage variable: opsz 96 clava el
aspect "display grande" — sin él, a font chico se estira horizontal y
desalinea con la marca aterrizada. */
/* .mod-logo redefinida más abajo (M1+M3 fusionados). Se mantiene solo el
estilo del enlace del logo. */
.nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.nav-iso { width: auto; height: 32px; flex: 0 0 auto; display: block; }
.nav-logo-txt {
/* inline-block + max-content → rect = tamaño del TEXTO renderizado
(no del block padre). Sin esto, Flip.fit compara rect de texto
natural (marca gigante) contra rect de BLOCK (nav-logo-txt full width
del padre) → la marca aterriza con tamaño de block, no de texto, y
al hacer swap el REAL se ve más pequeño que la marca aterrizada. */
display: inline-block;
width: max-content;
font-family: var(--fuente-display);
font-size: 2.1rem; /* -30 % sobre 3rem — Flip.fit dinámico ajusta la marca al nuevo rect */
font-weight: 800;
font-variation-settings: 'opsz' 96; /* fija aspect display grande */
letter-spacing: -0.02em;
line-height: 0.82; /* mismo LH que .hero-marca */
color: var(--acento);
transform-origin: 0 0;
will-change: transform;
}
/* (2026-07-23) M2 retrato ELIMINADO — no aportaba al menú, decisión
editorial del usuario. .mod-retrato / .nav-foto / .nav-firma retirados. */
/* M1+M3 fusionados: el logo LA MARCA se apila con badge de estado + canal
dentro del mismo mod-logo. El logo mantiene su posición top; badge y
canal quedan debajo con gap y padding-top extra. */
.mod-logo { padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.mod-logo .nav-badge { margin-top: 4px; }
.nav-canal-desc {
/* Invitación honesta al canal — voz del Norte, bloque 5. */
color: rgba(255, 255, 255, 0.7);
font-size: 0.78rem;
line-height: 1.4;
margin: 0;
transform-origin: 0 0;
}
.nav-badge { color: rgba(255, 255, 255, 0.92); font-size: 0.9rem; font-weight: 700; line-height: 1.3; transform-origin: 0 0; }
/* span hereda el color del padre → JS puede animar el color completo (parte
blanco en hero → negro en panel) sin sobreescribir el span. */
.nav-badge span { display: block; color: inherit; font-weight: 400; font-size: 0.78rem; opacity: 0.65; }
.nav-canal {
/* Ghost amarillo: borde y texto en acento, fondo transparente. Al hover
se llena de acento con texto tinta (patrón CTA amarillo del hero). */
align-self: flex-start; font-size: 0.85rem; font-weight: 600; color: var(--acento);
border: 1.5px solid var(--acento); border-radius: 999px;
padding: 0.35em 1em; transform-origin: 0 0;
transition: color .3s, background-color .3s, border-color .3s;
background: transparent;
}
.nav-canal:hover { color: var(--tinta); background: var(--acento); border-color: var(--acento); }
/* M4 anclas */
.mod-anclas { padding: 14px; }
.nav-anclas { display: flex; flex-direction: column; gap: 8px; margin: 0; }
/* Slot: solo espaciado; el pill de .nav-ancla ES el visual */
.ancla-item { position: relative; display: flex; align-items: center; gap: 0.7em; padding: 3px 0.9em; }
.ancla-bg {
/* el pill de la real .nav-ancla provee el fondo — el slot no necesita el suyo */
display: none;
}
.ancla-num {
position: relative; z-index: 1; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
/* numeración editorial en blanco 60% sobre vidrio blanco 8% + negro */
color: rgba(255, 255, 255, 0.6); transform-origin: center center;
}
/* Real pill: mismo estilo que la fila del hero (bg 15% blanco, borde luz,
padding, radio 9px). Como ghost tiene idénticas dimensiones,
Flip.fit da traslación PURA (sin escalado). El pill viaja intacto.
`overflow: hidden` para el efecto de rodillo del texto en hover. */
/* selector con .nav-anclas para vencer al `.nav-anclas a { font-size: 0.95rem }`
base (mayor especificidad); overflow hidden en el pill cierra word 2 por
debajo tras el clip del roll. */
/* Pills INACTIVAS: glow cian translúcido sobre el panel oscuro (2026-09-04).
Antes eran vidrio blanco 15% y la clase mod-en-claro las invertía a texto
oscuro sobre las secciones claras del tema viejo — con todo oscuro quedaban
invisibles. Ahora el cian es su reposo y el lima marca la sección activa. */
.nav-anclas .nav-ancla {
z-index: 2; position: relative;
padding: 0.7em 1.35em; border-radius: 9px;
background: rgba(43, 184, 198, 0.08);
border: 1px solid rgba(43, 184, 198, 0.30);
color: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 14px rgba(43, 184, 198, 0.18);
font-size: 1.1rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1;
transform-origin: 0 0; white-space: nowrap;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
display: inline-block; overflow: hidden;
}
/* Hover: el glow cian se intensifica (paso previo a la activa). */
.nav-ancla:hover {
background: rgba(43, 184, 198, 0.18);
color: #fff;
border-color: rgba(43, 184, 198, 0.55);
box-shadow: 0 0 20px rgba(43, 184, 198, 0.34);
}
/* Rodillo de texto en hover (patrón de rodillo del menú): el ROLL es la
ventana ESTÁTICA (height 1em, overflow hidden). Word 2 vive debajo en
flujo natural, clippeada por el roll. En hover, TXT translada -1em
(no el roll — si el roll se moviera, movería también su clip y word 2
nunca entraría). Los dos txt suben juntos → word 2 ocupa la ventana. */
.nav-ancla-roll {
display: block; position: relative;
height: 1em; overflow: hidden; line-height: 1;
}
.nav-ancla-txt {
display: block; height: 1em; line-height: 1;
transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
will-change: transform;
}
.nav-ancla:hover .nav-ancla-txt { transform: translateY(-1em); }
/* Estado ACTIVO — la pill de la sección actual en LIMA (2026-09-04): relleno
lima sólido + texto oscuro (lima es claro, contrasta) + glow lima, para que
resalte sobre las inactivas cian. */
.ancla-item.activa .ancla-bg { background: transparent; } /* el pill provee bg */
.ancla-item.activa .nav-ancla {
background: var(--lima); color: var(--tinta); border-color: transparent;
box-shadow: 0 0 20px rgba(207, 224, 74, 0.38);
}
/* el número «01…» vive FUERA del pill (sobre el panel oscuro): en la activa va
lima, no oscuro, para no desaparecer sobre el fondo. */
.ancla-item.activa .ancla-num { color: var(--lima); opacity: 1; }
/* M5 canales — texto negro sobre vidrio beige */
.mod-canales {
height: 44px; display: flex; align-items: center; justify-content: space-between;
padding: 0 12px; /* 7 iconos justos en 280px del panel */
}
.mod-canales a {
display: inline-flex; align-items: center; justify-content: center;
color: var(--lima); /* iconos de redes en lima intenso (2026-09-05) */
transition: color .3s ease, transform .3s ease, filter .3s ease;
}
.mod-canales a svg {
width: 18px; height: 18px; display: block;
}
.mod-canales a:hover { color: var(--lima); transform: translateY(-2px); filter: drop-shadow(0 0 7px rgba(207, 224, 74, 0.65)); }
/* M6 CTA — de acento: bg #ffff23, texto negro, radio 9px */
.mod-cta { border-radius: 9px; }
/* El pill visible es el ; sobreescribe el 999px base solo en desktop. */
#nav-portada .nav-cta { display: block; text-align: center; padding: 0.85em 1.3em; margin: 0; border-radius: 9px; }
/* --- GHOSTS del hero (solo reservan geometría) --- */
.hero-lienzo { position: relative; min-height: 92vh; display: flex; align-items: center; width: 100%; }
/* Pin del hero reducido de 280vh → 140vh (feedback usuario 2026-07-23):
con 280vh había ~140vh de scroll pinneado SIN nada visualmente nuevo
tras el aterrizaje del logo (44 % del rango). Con 140vh el pin dura
40vh — justo lo necesario para vuelos + ensamble; al terminar aparece
directamente la Sección 2 (arco). Los rangos porcentuales existentes se mantienen
porque son relativos al alto del hero. */
/* min-height calculado (2026-07-23): los rangos % de los vuelos son
relativos al ALTO DEL HERO, no al pin. Pin_duration = hero_height − 100vh.
Para que el rango máximo (39 %) esté dentro del pin necesitamos
hero_height ≥ 164vh (0.39·H ≤ H − 100 → H ≥ 164). Con 170vh queda
margen y la Sección 2 aparece a scroll ≈70vh, no tan lejos. */
html.panel-vuelo #hero { min-height: 170vh; padding-top: 0; padding-bottom: 0; align-items: flex-start; }
html.panel-vuelo .hero-lienzo { height: 100vh; min-height: 0; }
/* Ghost del CTA principal — dimensiones EXACTAS del REAL (.mod-cta .nav-cta):
el REAL es display:block dentro del panel de 280px → mide 280px de ancho.
El ghost por defecto es inline-block y mide ~250px (ancho del contenido).
Rects distintos → Flip.fit con `scale: true` calcula scaleX≠scaleY y el
texto se aplasta horizontalmente durante el vuelo (bug cazado 2026-07-23).
Fix: box-sizing border-box + width 280px para igualar border-box del REAL
→ scaleX=scaleY=1 → traslación pura sin distorsión (mismo patrón que
`.ghost-ancla` para el vuelo de las anclas).
`!important` en opacity/visibility porque GSAP escribe autoAlpha:1 inline
en la intro y sin él el ghost se ve detrás del REAL. */
html.panel-vuelo #hero .cta-botones .boton-acento {
box-sizing: border-box;
width: 280px;
padding: 0.85em 1.3em;
font-size: 0.95rem;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none;
}
/* --- HERO EN CAPAS (patrón NESH): marca gigante ← retrato ← título/CTAs --- */
/* capa 1 · la marca "LA MARCA" gigante. Funciona como GHOST del vuelo del
`.nav-logo-txt` del panel: al scroll el REAL viaja desde aquí al panel
encogiéndose. Con `width: max-content` + `translateX(-50%)` el rect es
del texto exacto (no del viewport) — Flip.fit calcula bien el escalado. */
.hero-marca {
/* ELEMENTO QUE VUELA hasta el .nav-logo-txt del panel encogiéndose.
Vive en el hero-lienzo con z-index 1 → queda DETRÁS del retrato (z:2),
así no le tapa la cara al fundador. opsz 96 fija el aspect ratio para
que coincida pixel a pixel con el REAL al aterrizar (Bricolage variable). */
position: absolute; top: 1vh; left: 0; right: 0;
margin: 0 auto; width: max-content;
text-align: center; z-index: 1;
font-family: var(--fuente-display);
font-variation-settings: 'opsz' 96;
font-size: 19.4vw; line-height: 0.82; font-weight: 800; letter-spacing: -0.02em;
color: var(--acento); pointer-events: none; user-select: none;
transform-origin: 0 0;
/* La MARCA es una sola ranura; aquí va en mayúsculas por CSS, no por texto
distinto (LuloPix → LULOPIX). */
text-transform: uppercase;
}
/* capa 2 · retrato centrado, apoyado en el borde inferior */
.hero-retrato {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
height: min(86vh, 880px); width: auto; max-width: none;
z-index: 2; pointer-events: none;
}
/* Glow cian detrás del retrato: separa la silueta (camisa oscura) del fondo
carbón y engancha con la luz cian de la foto. Atmósfera digital, Norte
5-bis. Corrección del fundador 2026-09-04. */
.hero-lienzo::after {
content: ""; position: absolute; z-index: 1; pointer-events: none;
left: 50%; bottom: 2%; transform: translateX(-50%);
width: 52vw; height: 86vh;
background: radial-gradient(47% 50% at 50% 50%, rgba(43, 184, 198, 0.55) 0%, rgba(43, 184, 198, 0.22) 40%, transparent 72%);
}
/* Rejilla HUD del hero — va en el lienzo porque la capa de animación tapa el
::before de la sección (capa digital, Identidad v0.2). */
.hero-lienzo::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(190, 215, 222, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(190, 215, 222, 0.16) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: linear-gradient(to bottom, #000, #000 58%, transparent 92%);
mask-image: linear-gradient(to bottom, #000, #000 58%, transparent 92%);
}
/* Marca bicolor (2026-09-05): "Lulo" en LIMA, "Pix" en BLANCO. */
.hero-marca { color: var(--lima); }
.hero-marca .pix { color: #fff; }
#nav-portada .nav-logo-txt { color: var(--lima) !important; }
#nav-portada .nav-logo-txt .pix { color: #fff !important; }
/* sin JS (o reduced-motion) no hay capas: hero editorial de F1 */
html:not(.panel-vuelo) .hero-marca, html:not(.panel-vuelo) .hero-retrato { display: none; }
/* (2026-08-19) ESTADO INICIAL DESDE EL CSS de lo que la intro revela. Antes
lo ponía prepararIntro() con gsap.set(autoAlpha:0) — y como ese JS corre con
`defer`, DESPUÉS del primer pintado, había un fotograma con el panel entero
desplegado (marca, píldoras, badge, CTA) que luego se apagaba de golpe.
Grabado fotograma a fotograma el 2026-08-19. Ahora el CSS deja estas piezas
como GSAP las espera (opacity 0 + visibility hidden = autoAlpha 0) y la
intro solo las enciende. El retrato y la marca NO van aquí: esos se ven
siempre. Si el JS no corre, estas piezas quedan ocultas — pero entonces la
clase `panel-vuelo` se retira y el hero cae al editorial sin capas, donde
estas reglas no aplican. */
html.panel-vuelo #nav-portada .mod-bg,
html.panel-vuelo #nav-portada .ancla-bg,
html.panel-vuelo #nav-portada .ancla-num,
html.panel-vuelo #nav-portada .nav-logo-txt,
html.panel-vuelo #nav-portada .nav-badge,
html.panel-vuelo #nav-portada .nav-canal-desc,
html.panel-vuelo #nav-portada .nav-canal,
html.panel-vuelo #nav-portada .nav-ancla,
html.panel-vuelo #nav-portada .mod-canales a,
html.panel-vuelo #nav-portada .mod-cta .nav-cta { opacity: 0; visibility: hidden; }
/* capa 3 · el copy aprobado, recolocado (mismo texto, nueva geografía) */
html.panel-vuelo #hero .contenedor { position: static; margin: 0; padding: 0; max-width: none; }
html.panel-vuelo #hero h1 {
/* Posicionado por BOTTOM (no por top+translateY): la intro corre
SplitText sobre el h1 y GSAP escribe transform inline, que sobreescribe
el translateY del CSS. Usando bottom se evita el conflicto: el h1 se
ancla a una distancia fija del fondo (CTAs bottom:2vh + h_ctas 57px
+ aire 10px = 82px + 2vh). */
/* (2026-08-19) CENTRADO POR GEOMETRÍA, sin transform ni translate. GSAP
escribe transform inline en cuanto crea cualquier tween sobre el h1 (la
salida al scroll arranca con y:0) y pisaba el translate(-50%,-50%) del
CSS: el titular saltaba 99 px hacia abajo —la mitad de su altura— un
instante después del primer pintado. Se probó la propiedad `translate`
independiente y GSAP también la normaliza. Así que: el h1 ocupa todo el
ancho (left:0; right:0) y centra su bloque con un flex interno; y en
vertical se ancla por `bottom` a un punto que ya incluye la mitad de su
altura (3 líneas × line-height 1 = 3em; la mitad, 1.5em). Ningún
desplazamiento que GSAP pueda borrar. */
position: absolute; left: 0; right: 0; top: auto;
bottom: calc(2vh + 217px + 1.5em);
/* bloque de ancho natural, centrado con márgenes; las 3 líneas alineadas a
la izquierda entre sí (como el original: comparten margen en la inicial) */
width: max-content; margin-left: auto; margin-right: auto;
/* max-content = el bloque mide lo que la palabra más larga (Aprende).
Con text-align:left, las 3 palabras comparten margen izquierdo cero
(pegadas a la 'A'/'A'/'G' iniciales). El bloque entero queda
centrado horizontal por left:50% + translate. */
max-width: 88vw; z-index: 4;
text-align: left; color: #fff;
/* +20 % sobre el anterior (era clamp 2.07-3.45rem → ahora 2.48-4.14rem,
máx ~66px). 3 líneas apiladas patrón SplitText,
line-height 1 para máxima compacidad tipográfica. */
font-size: clamp(2.48rem, 4.14vw, 4.14rem);
line-height: 1;
text-shadow: 0 2px 24px rgba(43, 184, 198, 0.55);
}
html.panel-vuelo #hero h1 .line { display: block; }
html.panel-vuelo #hero .cta-botones {
/* pegados al borde inferior; SUBIDOS un poco (2vh→6vh) para dejar sitio al
eyebrow que va justo debajo. Centrados: no chocan con hero-sub (left 36px)
ni con la esquina derecha. */
position: absolute; left: 50%; bottom: 6vh; top: auto; transform: translateX(-50%);
margin: 0; z-index: 4; justify-content: center; flex-wrap: nowrap; white-space: nowrap;
}
/* El microcopy sigue oculto en escritorio. El EYEBROW (tagline «Estudio
creativo, tecnológico y educativo») ahora SÍ se ve: centrado abajo del todo,
justo bajo los CTA (2026-09-04, feedback del fundador). */
html.panel-vuelo #hero .microcopy { display: none; }
html.panel-vuelo #hero .eyebrow {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 2vh; top: auto; margin: 0; z-index: 4;
text-align: center; white-space: nowrap;
}
/* hero-sub y adjetivos INTERCAMBIADOS (feedback usuario 2026-07-23):
el texto va a la INF-DER; los adjetivos a la INF-IZQ. */
html.panel-vuelo #hero .hero-sub {
position: absolute; right: 3vw; bottom: 5vh; left: auto; margin: 0; max-width: 26em;
font-size: 0.92rem; z-index: 4; text-align: right;
}
/* Fila de anclas ghost: solo reserva la geometría del pill en el hero.
El pill VISIBLE es la REAL `.nav-ancla` que vuela desde aquí hasta el
panel modular (mecanismo original con Flip). El ghost es invisible
pero mantiene las MISMAS dimensiones que la real → Flip.fit calcula
traslación pura sin escalado. */
/* Fila de anclas en el hueco entre h1 (top 42%, ~2 líneas → baja hasta 58-60%)
y CTAs (top 71%). A 64% quedan centradas en ese hueco, sin pisar el h1 ni
los CTAs, y con margen suficiente si el h1 se expande a 3 líneas.
El ancla DERECHA compensa el delta de ancho entre grupos (3 pills a la izq
≈ 360px vs 2 pills a la der ≈ 225px → delta 135px). Sin esta compensación,
`space-between` deja el grupo derecho ~135px más lejos del centro que el
izquierdo, y la asimetría se lee como desalineación respecto al h1. */
.hero-anclas-ghost {
/* Márgenes laterales simétricos + amplios (era 10vw izq + 10vw+135px der
cuando los grupos eran 3+2; ahora son 3+3 equilibrados y el retrato
central mide ~30 vw → márgenes generosos evitan que los grupos entren
en la zona del retrato). Feedback usuario 2026-07-23. */
position: absolute; top: 56%;
left: clamp(8vw, 12vw, 15vw);
right: clamp(8vw, 12vw, 15vw);
display: flex; justify-content: space-between; align-items: center;
pointer-events: none; z-index: 3;
}
.ghost-grupo {
display: flex; align-items: center;
gap: 0.6rem;
pointer-events: none;
}
.ghost-ancla {
/* dimensiones idénticas al real pill (padding + radius + font-size) —
texto y fondo transparentes: solo reserva el rectángulo para Flip */
color: transparent;
background: transparent;
border: 1px solid transparent;
font-family: var(--fuente); font-size: 1.1rem; font-weight: 500;
letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
padding: 0.7em 1.35em; border-radius: 9px;
}
/* Barras verticales entre pills del grupo. El JS ya las
revela en la intro (height 0 → 14) y las mata en 0–5 % del scroll
escalonadas (portada-anim.js `ghost-sep`). */
.ghost-sep {
/* block + align-self:center fuerza el centrado vertical exacto dentro del
flex-grupo (inline-block heredaba baseline y caía bajo el pill). */
display: block; align-self: center; flex-shrink: 0;
width: 2px; height: 22px;
background: var(--acento);
margin: 0 0.3rem;
}
/* Adjetivos flotantes (patrón de tarjeta flotante): UN panel de vidrio
con los 5 rasgos apilados. Rincón INF-IZQ (intercambiado con el hero-sub
por feedback usuario 2026-07-23). */
.hero-adjetivos {
position: absolute; left: 3vw; bottom: 5vh; right: auto; top: auto;
display: flex; flex-direction: column; gap: 4px;
margin: 0; padding: 16px 20px; list-style: none;
border-radius: 9px;
background: rgba(223, 222, 206, 0.15);
-webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
z-index: 3; pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
.hero-adjetivos { background: rgba(223, 222, 206, 0.30); }
}
.hero-adjetivos li {
display: flex; align-items: center; gap: 12px;
padding: 4px 0;
color: var(--gris-claro); font-family: var(--fuente);
font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2;
white-space: nowrap;
}
.hero-adjetivos .adj-dot {
display: block; flex-shrink: 0;
width: 10px; height: 10px; border-radius: 50%;
background: var(--acento);
}
/* Ghost card estudio-escuela: esquina INFERIOR-DERECHA (feedback usuario);
el contenido incluye badge + microcopy fusionado + botón Ver el canal. */
/* .hero-cards-ghost + .ghost-card/foto/firma/badge/canal/microcopy eliminados:
la card Estudio-escuela ya no vuela desde el hero; se ensambla en sitio
en el panel lateral (JS: fade+scale escalonado). */
}
/* ==========================================================================
FIX responsive del hero (2026-08-28) — cierra el hueco de breakpoints 1200–1919.
El hero ≥1200px estaba afinado SOLO a ~1920×1080: retrato dimensionado por
ALTO (vh) pero márgenes/anclas asumiendo su ancho en VW → solo cuadra a 16:9
alto. En portátiles (1440×900, 1366×768, 1280×800) el panel lateral —altura
natural, centrado— crecía casi a pantalla completa y se comía la franja
inf-izq de los adjetivos, y la marca gigante se colaba tras el módulo-logo.
Estos bloques NO tocan la coreografía: los ghosts vuelan igual (Flip.fit
recalcula desde el nuevo rect de cada elemento). Portado desde el prototipo
webLulopix/scratchpad/portada validado con capturas. */
/* A · Marca gigante: en el rango intermedio se estrecha un punto para que su
borde izquierdo no quede tan metido tras el panel (menos "glow"). */
@media (min-width: 1200px) and (max-width: 1600px) {
html.panel-vuelo .hero-marca { font-size: 15.5vw; }
}
/* B · Portátiles de poca altura (≤900px): se COMPACTA el panel para que quepa
con aire y no invada la marca ni la franja inferior. Se oculta la descripción
larga del canal (supletoria) que era la que más estiraba el módulo-logo. */
@media (min-width: 1200px) and (max-height: 900px) {
#nav-portada { gap: 10px; }
.mod-logo { padding: 10px 16px 12px; gap: 6px; }
.nav-canal-desc { display: none; }
.mod-anclas { padding: 10px 12px; }
.nav-anclas { gap: 6px; }
.ancla-item { padding: 2px 0.9em; }
.nav-anclas .nav-ancla { padding: 0.5em 1.1em; font-size: 1rem; }
/* NO se aprieta el padding vertical del nav-cta (2026-09-04): en pantallas
bajas ≤900px este era 0.65em → el nav-cta medía 38px, pero VUELA al hero y
aterrizaba junto al «Ver el trabajo» de 44px (mismo ancho, distinto alto).
Se mantiene 0.85em para que el par de CTA del hero quede parejo; el ghost ya
es 44px, así que el vuelo sigue limpio. */
#nav-portada .nav-cta { padding: 0.85em 1.3em; }
}
/* C · Adjetivos (decorativos, aria-hidden): comparten la esquina inf-izq con el
panel. En el rango intermedio se anclan al borde DERECHO del panel; en
viewports demasiado bajos (≤820px) se ocultan. ≥1601px conservan el look 1920. */
@media (min-width: 1200px) and (max-width: 1600px) {
/* (2026-09-04) A la ESQUINA inferior-izquierda (feedback del fundador): antes
se empujaba a la derecha para «despejar» el panel, pero a scroll 0 el panel
es fantasma y el rincón está libre. */
.hero-adjetivos {
left: 3vw;
right: auto;
padding: 12px 16px; gap: 2px;
}
.hero-adjetivos li { font-size: 0.95rem; padding: 3px 0; }
.hero-adjetivos .adj-dot { width: 8px; height: 8px; }
}
/* Solo se ocultan en pantallas MUY bajas (2026-09-04: era ≤820px y desaparecían
a 1600×900 — viewport ~780px; bajado a 640 para que se vean a 900). */
@media (min-width: 1200px) and (max-height: 640px) {
.hero-adjetivos { display: none; }
}
/* D · Sub del hero (inf-der): en anchos intermedios se estrecha para no chocar
con el CTA central "Mira lo que construyo". */
@media (min-width: 1200px) and (max-width: 1600px) {
html.panel-vuelo #hero .hero-sub { max-width: 22em; font-size: 0.86rem; }
}
/* ==========================================================================
MECANISMO DE LOGO-IMAGEN (preparado 2026-08-28) — swap claro/oscuro.
Por defecto el logo es TEXTO (vuela del hero al panel con Flip). Si el
proyecto deja DOS assets en `portada/img/` — `logo-claro.(svg|png|webp)` y
`logo-oscuro.*` — el template (template-portada.php, con guarda file_exists)
rinde ![]()
en vez del texto y ESTE bloque conmuta las variantes: la CLARA
sobre fondo oscuro, la OSCURA sobre fondo claro (.mod-en-claro), con
cross-fade. Regla de marca: toda identidad necesita ambas variantes.
NOTA: en modo imagen el VUELO del logo no corre (el JS aborta limpio al no
hallar .nav-logo-txt) — el hero muestra la marca-imagen estática. Sin los
assets, este bloque no afecta a nada (el logo sigue siendo texto).
========================================================================== */
.nav-logo--img { display: inline-block; position: relative; line-height: 0; }
.nav-logo--img .logo-var { display: block; height: 30px; width: auto; transition: opacity 0.4s ease; }
.nav-logo--img .logo-oscuro { position: absolute; top: 0; left: 0; opacity: 0; } /* oculta por defecto (fondo oscuro) */
.mod.mod-en-claro .nav-logo--img .logo-claro { opacity: 0; } /* sobre claro: cede a la oscura */
.mod.mod-en-claro .nav-logo--img .logo-oscuro { opacity: 1; }
/* Marca gigante del hero como imagen (el hero es siempre oscuro → variante
clara; sin swap). El ancho es un default sensato: AJUSTAR por proyecto según
el aspect-ratio del logo. */
.hero-marca--img { line-height: 0; width: min(82vw, 1040px); }
.hero-marca--img img { display: block; width: 100%; height: auto; }
/* ==========================================================================
ACCESIBILIDAD · foco visible por teclado (2026-08-28) — WCAG 2.4.7.
Antes solo la tarjeta de §4 tenía foco; el resto dependía del outline por
defecto del navegador, que se pierde sobre este diseño. Se usa OUTLINE (no
box-shadow: los pills/botones llevan overflow:hidden para el rodillo y
recortarían una sombra). Amarillo por defecto (secciones oscuras) · tinta
sobre secciones claras (el amarillo pierde contraste ahí). scroll-padding
evita que el nav fijo tape el foco al saltar por anclas. `:where()` = 0 de
especificidad, no pisa nada. */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--acento);
outline-offset: 2px;
}
.seccion:not(.seccion-tinta):not(.seccion-h-scroll):not(#cta)
:where(a, button, summary, .boton):focus-visible {
outline-color: var(--tinta);
}
html { scroll-padding-top: calc(var(--nav-alto, 64px) + 24px); }
/* <1200px: la píldora de T1.4 sobrevive intacta — los wrappers se disuelven */
@media (max-width: 1199.98px) {
.mod { display: contents; }
.mod-bg, .vuelo-bg, .ancla-bg, .ancla-num,
.mod-canales, .solo-panel,
.hero-anclas-ghost { display: none; }
/* (2026-08-18 · móvil primero) .hero-marca, .hero-retrato y .hero-adjetivos
YA NO se ocultan aquí: tienen su composición móvil propia al final del
archivo. Antes el móvil se definía por sustracción —se apagaban los cuatro
pilares y quedaba el titular flotando en un degradado—; ahora se compone. */
/* :not(.solo-panel) es OBLIGATORIO — sin él esta regla gana por orden a
`.solo-panel { display:none }` de arriba (misma especificidad, va después)
y la píldora móvil enseña las 6 anclas en vez de las 4 que le tocan. */
.ancla-item:not(.solo-panel) { display: block; }
.nav-logo-txt { font-size: 1.1rem; } /* móvil pill */
}
/* --- Botones --- */
/* Accesos rápidos del hero (ex-panel de rasgos): enlaces reales a las páginas
del sitio (2026-09-04). Cada uno es una PILL con glow cian para que se lea
clicable (feedback del fundador). El panel .hero-adjetivos es
pointer-events:none (vidrio pasivo que no roba toques al hero); solo las
pills recuperan el cursor. El color del texto se HEREDA del li. */
.adj-enlace {
display: inline-block;
padding: 0.4em 0.95em; border-radius: 999px;
background: rgba(43, 184, 198, 0.10);
border: 1px solid rgba(43, 184, 198, 0.32);
box-shadow: 0 0 13px rgba(43, 184, 198, 0.20);
color: inherit; text-decoration: none; pointer-events: auto;
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.adj-enlace:hover, .adj-enlace:focus-visible {
background: rgba(43, 184, 198, 0.20);
border-color: rgba(43, 184, 198, 0.60);
box-shadow: 0 0 20px rgba(43, 184, 198, 0.38);
color: #fff;
}
/* FIX clic (2026-09-04): las pills de arriba quedaban bajo el panel lateral
fijo (#nav-portada), cuyo contenedor + módulos capturaban el toque aunque en
scroll 0 estén ocultos. Solo en ESCRITORIO (donde el panel solapa la esquina
inf-izq del hero): el CONTENEDOR del nav deja de capturar y solo sus
enlaces/botones lo hacen — y en scroll 0 esos van visibility:hidden, así que
no estorban las pills. En móvil el nav es una barra sin solape → intacto. */
@media (min-width: 1200px) {
#nav-portada { pointer-events: none; }
#nav-portada a, #nav-portada button { pointer-events: auto; }
}
.cta-botones { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.boton {
display: inline-block; font-weight: 600; font-size: 1rem;
padding: 0.85em 1.8em; border-radius: 999px;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
overflow: hidden; /* ventana del rodillo interno (patrón de rodillo) */
}
.boton:hover { transform: translateY(-2px); }
/* Rodillo de texto en hover (patrón de rodillo del botón): el ROLL
es la ventana estática (height 1.2em, overflow hidden). Word 2 vive debajo
en flujo normal (fuera del roll). En hover, los TXT translatan -1.2em
juntos → word 2 ocupa la ventana. Solo una palabra visible a la vez.
height 1.2em (no 1em) para que los descendentes (g, j, p, q, y) del texto
quepan enteros — con 1em la 'g' de "construcción" se corta por debajo
(bug cazado 2026-07-23). Aplica a `.boton` y `.nav-cta`. */
.boton-roll {
display: block; position: relative;
height: 1.2em; overflow: hidden; line-height: 1.2;
}
.boton-txt {
display: block; height: 1.2em; line-height: 1.2;
transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
will-change: transform;
}
.boton:hover .boton-txt,
.nav-cta:hover .boton-txt { transform: translateY(-1.2em); }
.boton-acento { background: var(--acento); color: var(--tinta); }
.boton-acento:hover { background: #E3F07A; color: var(--tinta); }
.boton-borde { border: 2px solid var(--gris-claro); color: var(--gris-claro); }
.boton-borde:hover { border-color: var(--acento); color: var(--acento); }
/* (2026-08-19) .boton-borde nació para fondos OSCUROS (texto gris-claro casi
blanco) y caía dos veces sobre fondo claro —«Enviar un correo» en servicios,
«Avísame cuando salga» en talleres— quedando ilegible. Error reportado por
el fundador. Sobre secciones claras, el borde y el texto van en tinta; el
hover en el acento oscuro del texto (el amarillo sobre crema tampoco lee).
#cta y #constelacion son oscuras y conservan la variante clara. */
.seccion:not(.seccion-tinta):not(#cta) .boton-borde {
border-color: var(--tinta); color: var(--tinta);
}
.seccion:not(.seccion-tinta):not(#cta) .boton-borde:hover {
border-color: var(--violeta); color: var(--violeta);
}
/* En el hero: ambos CTAs son cuadradito amarillo (patrón de botón principal
+ About Me con radius 13.28px). El secundario pierde el vidrio blanco y
hereda el look del primario; se diferencia solo por copy y flecha. */
#hero .boton { border-radius: 9px; } /* radio que empata con .hero-adjetivos li */
/* Ambos CTAs del hero con MISMA geometría (feedback usuario 2026-07-23):
width 280 (mismo que el REAL nav-cta), padding, font y text-align iguales
para que se lean como un par visual coherente. Padding lateral bajado a
1.15em (era 1.3em) para que el texto "Mira lo que construyo ↓" quepa
entero con su flecha final. */
#hero .cta-botones .boton {
box-sizing: border-box;
width: 280px;
padding: 0.85em 1.15em;
font-size: 0.95rem;
text-align: center;
}
#hero .boton-borde {
background: var(--acento);
color: var(--tinta);
border: none; /* borde eliminado: no diferencia y desalinea */
-webkit-backdrop-filter: none; backdrop-filter: none;
}
#hero .boton-borde:hover {
background: #E3F07A;
border-color: #E3F07A;
color: var(--tinta);
}
/* --- Footer (tinta; enlaces acento según identidad) --- */
/* Footer: gradiente inverso al de la Sección 8 (llamada final) — arriba enlaza con la tinta
base del final del CTA, abajo cae a tinta pura (asiento final). Mantiene
la relación visual con las secciones que sí tienen gradiente sin las
manchas de color que quitó el usuario. */
#pie {
position: relative;
padding: clamp(3rem, 8vh, 5rem) 0 2rem;
}
#pie > * { position: relative; z-index: 1; }
.pie-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.pie-firma {
font-family: var(--fuente-display);
color: var(--acento); font-size: 1.15rem; font-weight: 700;
letter-spacing: -0.01em; margin: 0;
}
.pie-redes {
list-style: none; padding: 0; margin: 0;
display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;
}
.pie-redes a {
/* área de toque ≥44px (regla táctil de la skill / WCAG target-size): el icono
sigue a 20px, centrado; el crece a 44px de zona clicable (2026-08-28). */
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px;
color: var(--lima); /* iconos de redes en lima intenso (2026-09-05) */
transition: color .3s ease, transform .3s ease, filter .3s ease;
}
.pie-redes a svg { width: 20px; height: 20px; display: block; }
.pie-redes a:hover { color: var(--lima); transform: translateY(-2px); filter: drop-shadow(0 0 7px rgba(207, 224, 74, 0.65)); }
/* El índice del sitio (2026-08-20, producción de páginas): partes/pie.php
pinta las páginas vivas de datos/sitio.php. Crece página a página. */
.pie-paginas { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* Pills cian intenso (2026-09-05): el índice del pie resalta sobre el carbón. */
.pie-paginas a {
display: inline-block; padding: 0.4em 0.95em; border-radius: 999px;
color: #fff; font-size: 0.95rem; text-decoration: none;
background: rgba(43, 184, 198, 0.18);
border: 1px solid rgba(43, 184, 198, 0.60);
box-shadow: 0 0 18px rgba(43, 184, 198, 0.45), 0 0 6px rgba(43, 184, 198, 0.35);
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.pie-paginas a:hover {
background: rgba(43, 184, 198, 0.30);
border-color: rgba(43, 184, 198, 0.85);
box-shadow: 0 0 26px rgba(43, 184, 198, 0.60), 0 0 8px rgba(43, 184, 198, 0.45);
}
.pie-legal { color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; }
.pie-legal a { color: var(--acento); }
.pie-legal a:hover { color: var(--naranja); }
@media (min-width: 768px) {
.pie-grid { grid-template-columns: 1fr auto; align-items: start; }
.pie-paginas { grid-column: 1 / -1; }
.pie-legal { grid-column: 1 / -1; border-top: 1px solid rgba(223, 223, 223, 0.18);
padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
}
/* ==========================================================================
T1.5 · Componentes de las 8 secciones (copy aprobado)
========================================================================== */
/* --- Texto de sección --- */
.hero-sub { font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 46em; margin-top: 1.5rem; }
.seccion-intro { font-size: 1.1rem; max-width: 42em; margin: 1.25rem 0 3rem; }
/* Cierres del arco: eran color --tinta (oscuro, resto del tema claro) → casi
negros sobre el fondo oscuro. Ahora CIAN con glow (capa digital, Norte 5-bis):
el remate del arco se lee como un realce digital, no como cuerpo perdido. */
.seccion-cierre {
font-size: 1.1rem; max-width: 42em; margin-top: 3rem; font-weight: 500;
color: var(--cian);
text-shadow: 0 0 14px rgba(43, 184, 198, 0.55), 0 0 30px rgba(43, 184, 198, 0.28);
}
.microcopy { font-size: 0.9rem; opacity: 0.85; margin-top: 1.5rem; } /* 0.75→0.85: margen de contraste sobre beige (WCAG 4.5:1), 2026-08-28 */
.microcopy-oscura { color: var(--texto); }
.contenedor-angosto { max-width: 860px; }
.centrado { text-align: center; }
/* --- Badges de estado (etiquetas honestas) --- */
.badge {
display: inline-flex; align-items: center; gap: 0.45em;
font-size: 0.78rem; font-weight: 600;
padding: 0.3em 0.9em; border-radius: 999px; letter-spacing: 0.02em;
margin-bottom: 0.9rem;
}
/* (2026-08-19, regla revisada 2026-08-20) El estado se señala con un PUNTO
de color de la paleta — currentColor, así hereda el color que cada clase
badge-* ya define. El emoji que llevaba el texto (🔨 ✅ 🗓…) iba suelto en
el flujo, sin tamaño declarado, y rompía las insignias en iPhone (>70 %
del consumo). Un emoji ENJAULADO con font-size fijo también sería válido
(regla del motor); aquí se eligió el punto CSS por ser idéntico en todas
las plataformas. */
.badge::before {
content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
background: currentColor; flex: 0 0 auto;
}
.badge-viva { background: var(--acento); color: var(--tinta); } /* acento = resalte, ok sobre claro */
.badge-construccion { border: 1.5px solid var(--violeta); color: var(--violeta); }
.badge-cola { border: 1.5px solid var(--texto); color: var(--texto); opacity: 0.8; }
.badge-vision { border: 1.5px solid var(--naranja); color: var(--naranja); }
.badge-hecho { background: var(--tinta); color: var(--acento); }
.badge-curso { border: 1.5px solid var(--violeta); color: var(--violeta); }
.badge-camino { border: 1.5px solid var(--naranja); color: var(--naranja); }
/* --- Sección 2 · Timeline del arco · zigzag (D8) ---
Tarjetas de vidrio alternando izq/der; entre ellas serpentea un trazo
SVG en S que inyecta y dibuja portada-anim.js (dashoffset + scrub) con
nodos amarillos donde besa cada tarjeta. La foto del fundador se retiró
de aquí (2026-07-22): el retrato ya protagoniza el hero en capas.
Rebranding (2026-07-22): la Sección 2 hereda el beige del body (`#d5cfbe`)
y las tarjetas usan el vidrio del sistema. Se retiró el `#f6f3d9` cream de
la iteración anterior. */
.arco-zigzag { position: relative; }
/* mancha difusa que acompaña el fondo: además le da cuerpo al vidrio */
.arco-zigzag::before, .arco-zigzag::after {
content: ''; position: absolute; border-radius: 50%;
pointer-events: none; filter: blur(70px); z-index: 0;
}
.arco-zigzag::before {
width: 44vw; height: 44vw; left: -10vw; top: 10%;
/* mancha: warm topo tenue (`#c2b8ac` al 15%) */
background: radial-gradient(closest-side, rgba(194, 184, 172, 0.35), transparent 72%);
}
.arco-zigzag::after {
width: 40vw; height: 40vw; right: -8vw; top: 55%;
background: radial-gradient(closest-side, rgba(194, 184, 172, 0.25), transparent 72%);
}
/* trazo SVG (solo existe con la capa de animación, ≥900px) */
.arco-trazo {
position: absolute; inset: 0; width: 100%; height: 100%;
z-index: 1; pointer-events: none; overflow: visible;
}
.timeline { counter-reset: hito; position: relative; z-index: 2; display: grid; gap: 3rem; }
.hito {
position: relative; max-width: 560px;
/* Vidrio real (feedback usuario 2026-07-23): bg semi-transparente + blur
alto para que se vea la textura del fondo difuminada detrás. Antes bg
estaba al 80 % → el blur no se notaba. Ahora blanco 22 % + blur 24. */
/* Glass de capa digital v0.2: glow diagonal de cian que se funde sobre el
vidrio — resplandor, no relleno (el guardrail: cian nunca protagonista). */
background: linear-gradient(150deg, rgba(43, 184, 198, 0.16) 0%, transparent 58%), rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(43, 184, 198, 0.22);
border-radius: 24px;
padding: 2rem 2.25rem 1.75rem;
box-shadow: 0 20px 60px -20px rgba(43, 184, 198, 0.20);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.hito { background: rgba(255, 255, 255, 0.80); }
}
/* número gigante estilo "año" — chip acento+tinta (acento jamás texto sobre blanco) */
.hito::before {
counter-increment: hito; content: counter(hito, decimal-leading-zero);
display: inline-block; line-height: 1;
font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em;
color: var(--tinta); background: var(--acento);
padding: 0.12em 0.28em; border-radius: 0.18em;
margin-bottom: 1.1rem;
}
.hito h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
/* pie tipo fila social: aquí vive el estado honesto (D6) */
.hito-pie {
display: flex; align-items: center; gap: 0.9rem;
margin-top: 1.25rem; padding-top: 1.1rem;
border-top: 1px solid rgba(43, 184, 198, 0.10);
}
.hito-pie .badge { margin-bottom: 0; }
/* zigzag a ≥900px: alternancia izq/der con aire vertical para que el trazo respire */
@media (min-width: 900px) {
.timeline { gap: 18vh; padding: 4vh 0 6vh; }
.hito { width: min(560px, 58%); }
.hito-der { margin-left: auto; }
}
/* --- Sección 3 · Servicios --- */
.servicios-grid {
display: grid; gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 2.5rem; margin-bottom: 2.5rem;
}
.servicio-card {
background: rgba(255, 255, 255, 0.18);
-webkit-backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 18px;
padding: 1.75rem 1.5rem 1.5rem;
transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Realce lima en hover (2026-09-04), como el resto de tarjetas. */
.servicio-card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.28);
border-color: rgba(207, 224, 74, 0.60);
box-shadow: 0 10px 34px rgba(207, 224, 74, 0.22);
}
.servicio-icono {
/* (2026-08-19, regla revisada 2026-08-20) Jaula de TAMAÑO EXPLÍCITO.
El mismo fallo dos veces: primero el emoji dimensionado por font-size
heredado, luego el SVG con viewBox pero sin width/height que se expande
al ancho del contenedor — en iPhone los iconos salían enormes, reportado
por el fundador. Misma receta que .brazo-icono: caja fija + glifo al
100 %. REGLA DEL MOTOR: todo icono — SVG o emoji — vive en un contenedor
con tamaño explícito, verificado en viewport de iPhone. */
display: block; width: 32px; height: 32px;
color: var(--violeta); margin-bottom: 0.6rem;
}
.servicio-icono svg { width: 100%; height: 100%; display: block; }
.servicio-card:hover .servicio-icono { color: var(--naranja); }
.servicio-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--tinta); }
.servicio-card p { font-size: 0.95rem; color: var(--tinta); opacity: 0.85; margin: 0; }
#servicios .cta-botones { margin-top: 2rem; }
/* --- Tarjetas (base) — sobre body beige, cards item-bg (más clara) --- */
.tarjetas { display: grid; gap: 1.5rem; }
.tarjeta {
background: var(--h-item-bg); border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px; padding: 1.75rem;
transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Realce lima en hover (2026-09-04): reemplaza el arena plano heredado del tema
claro (--h-item-hover) por borde + glow lima, como las tarjetas de dominios.
Cubre Talleres (.tarjeta-taller). */
.tarjeta:hover {
transform: translateY(-4px);
border-color: rgba(207, 224, 74, 0.55);
box-shadow: 0 10px 34px rgba(207, 224, 74, 0.22);
}
.tarjeta h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.tarjeta p { font-size: 0.97rem; }
.tarjeta-media {
border-radius: 10px; margin: -0.35rem 0 1.1rem;
border: 1px solid rgba(43, 184, 198, 0.12);
}
/* ==========================================================================
Sección 4 · Activos — fondo tinta + pista horizontal pinneada
Cabecera fija a la izquierda del pin · 6 tarjetas deslizan lateralmente
con scrub · contador `01 / 06` migra según la tarjeta enfocada. Fallback
sin JS / <1200px / reduced-motion: grid vertical honesto.
========================================================================== */
/* Pista de trabajos: fondo casi-negro (`#0a0a08`), textos beige, cards
sobre el propio fondo con vidrio topo. Transición pulida desde la Sección 2 (beige):
los primeros 8vh son un gradient de beige→negro para desdibujar el corte. */
.seccion-h-scroll {
/* Fondo tinta con los mismos radial-gradients del hero (coherencia entre
secciones oscuras). Sin gradient beige→tinta al inicio (feedback usuario
2026-07-23: chocaba con la textura). */
background:
radial-gradient(ellipse at 15% 20%, rgba(43, 184, 198, 0.22) 0%, transparent 52%),
radial-gradient(ellipse at 85% 75%, rgba(207, 224, 74, 0.14) 0%, transparent 46%),
radial-gradient(ellipse at 55% 8%, rgba(43, 184, 198, 0.12) 0%, transparent 42%),
radial-gradient(ellipse at 30% 90%, rgba(207, 224, 74, 0.10) 0%, transparent 50%),
#0a0a08;
color: var(--gris-claro);
padding: 0;
overflow: hidden;
position: relative;
}
.seccion-h-scroll::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 1;
/* Rejilla HUD — capa digital de la Identidad v0.2: líneas finas de 46px con
máscara que se desvanece hacia abajo. */
background-image:
linear-gradient(rgba(190, 215, 222, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(190, 215, 222, 0.16) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: linear-gradient(to bottom, #000, #000 55%, transparent 92%);
mask-image: linear-gradient(to bottom, #000, #000 55%, transparent 92%);
}
.seccion-h-scroll > * { position: relative; z-index: 1; }
.seccion-h-scroll h2 { color: var(--acento); }
.seccion-h-scroll .eyebrow { color: var(--gris-claro); opacity: 0.7; }
.seccion-h-scroll .s3-intro { color: var(--gris-claro); font-size: 1.05rem; max-width: 42em; margin-top: 1rem; }
.seccion-h-scroll .microcopy-oscura { color: var(--gris-claro); opacity: 0.65; }
.s3-pin {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 4vh, 3rem);
}
/* Rejilla HUD de "El trabajo" — en el .s3-pin porque el pin-spacer de GSAP
tapa el ::before de la sección (capa digital, Identidad v0.2). */
.s3-pin::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(190, 215, 222, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(190, 215, 222, 0.16) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: linear-gradient(to bottom, #000, #000 65%, transparent 95%);
mask-image: linear-gradient(to bottom, #000, #000 65%, transparent 95%);
}
.s3-cabecera, .s3-pista-marco { position: relative; z-index: 1; }
.s3-cabecera {
padding-right: clamp(1.25rem, 4vw, 2.5rem);
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.s3-progreso {
font-family: var(--fuente);
font-weight: 700;
color: var(--gris-claro);
letter-spacing: -0.02em;
white-space: nowrap;
line-height: 1;
display: flex; align-items: baseline; gap: 0.15em;
}
.s3-progreso-actual {
/* amarillo de acento sobre fondo oscuro: OK */
color: var(--acento);
font-size: clamp(2.4rem, 5vw, 4rem);
min-width: 1.8em; text-align: right;
}
.s3-progreso-sep, .s3-progreso-total {
font-size: clamp(1.2rem, 2vw, 1.8rem);
opacity: 0.55;
}
.s3-pista-marco {
flex: 1;
min-height: 0;
padding-right: clamp(1.25rem, 4vw, 2.5rem);
overflow: visible;
}
.s3-pista {
display: flex;
/* align-items: center + height auto (era stretch + 100%): las tarjetas
mantienen su min-height natural y se centran verticalmente dentro del
marco (flex:1). Sin esto se estiraban a todo el alto del marco. */
align-items: center;
gap: clamp(1rem, 2vw, 1.5rem);
height: auto;
width: max-content;
padding: 0; margin: 0;
list-style: none;
will-change: transform;
}
.s3-tarjeta {
position: relative;
/* (2026-07-23 v7) altura +10 % sobre v6 (432-540 → 475-594). */
flex: 0 0 clamp(520px, 55vw, 760px);
height: clamp(475px, 59vh, 594px);
/* Vidrio de las cifras sobre fondo casi-negro: `#c2b8ac4d` (topo 30%) +
blur(20px) + borde luz. Como Selected Work usa cards sólidas, aplicamos
el patrón de vidrio topo pero con más cuerpo. */
/* Textura de la Identidad v0.2 (tarjeta del hero): gradiente cian + naranja
sobre carbón translúcido — el vidrio (blur) sigue leyendo el fondo. */
background:
radial-gradient(90% 120% at 88% -20%, rgba(43, 184, 198, 0.22), transparent 55%),
linear-gradient(115deg, rgba(207, 224, 74, 0.14), transparent 42%),
rgba(28, 29, 34, 0.55);
color: var(--gris-claro);
border: 1px solid var(--h-borde-luz);
-webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
border-radius: 18px;
padding: 1.5rem 1.6rem 1.5rem;
display: flex; flex-direction: column;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.s3-tarjeta:hover {
border-color: rgba(207, 224, 74, 0.45);
transform: translateY(-4px);
}
/* Velo de scanlines (capa digital v0.2) — líneas de cian muy tenues que se
desvanecen hacia la izquierda. */
.s3-tarjeta::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: repeating-linear-gradient(180deg, rgba(43, 184, 198, 0.05) 0 2px, transparent 2px 5px);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
mask-image: linear-gradient(90deg, transparent, #000 70%);
opacity: 0.6;
}
/* Esquinas de visor (v0.2): marca superior-izquierda + inferior-derecha. */
.s3-tarjeta::after {
content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 0;
background:
linear-gradient(rgba(43,184,198,0.5), rgba(43,184,198,0.5)) top left / 16px 1.5px no-repeat,
linear-gradient(rgba(43,184,198,0.5), rgba(43,184,198,0.5)) top left / 1.5px 16px no-repeat,
linear-gradient(rgba(43,184,198,0.5), rgba(43,184,198,0.5)) bottom right / 16px 1.5px no-repeat,
linear-gradient(rgba(43,184,198,0.5), rgba(43,184,198,0.5)) bottom right / 1.5px 16px no-repeat;
}
/* el contenido de la tarjeta va sobre los dos velos */
.s3-tarjeta > * { position: relative; z-index: 1; }
/* Fila superior: número + tags a la izquierda, flecha CTA a la derecha.
La flecha vive arriba para que sea visible siempre (feedback usuario). */
.s3-num {
align-self: flex-start;
font-size: clamp(1rem, 1.3vw, 1.2rem);
font-weight: 700;
color: var(--tinta);
background: var(--acento);
padding: 0.24em 0.65em;
border-radius: 999px;
letter-spacing: 0.02em;
}
.s3-tags {
/* tags ahora bajo la fila superior, alineados a la izq — dejan espacio a la flecha */
display: flex; gap: 0.35rem; flex-wrap: wrap;
margin-top: 0.75rem;
}
.s3-tags span {
font-size: 0.7rem; font-weight: 500;
padding: 0.28em 0.85em; border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--gris-claro);
white-space: nowrap;
}
.s3-media {
/* Max 30 % del alto de la tarjeta, imagen COMPLETA (contain) para que se
vea sin recortar. Sin aspect-ratio fijo — la altura es la que manda. */
margin: 0.8rem 0 0;
max-height: 30%;
min-height: 0;
flex: 0 0 auto;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex; align-items: center; justify-content: center;
}
.s3-media img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain; display: block;
}
.s3-tarjeta .badge { align-self: flex-start; margin: 1.2rem 0 0.7rem; }
.s3-tarjeta h3 {
color: #fff;
font-size: clamp(1.15rem, 1.4vw, 1.35rem);
margin-bottom: 0.5rem;
}
.s3-tarjeta p {
color: var(--gris-claro);
font-size: 0.95rem;
flex: 1;
}
/* Flecha CTA en la parte superior derecha, siempre visible dentro del fold */
.s3-flecha {
position: absolute; top: 1.2rem; right: 1.2rem;
width: 42px; height: 42px; border-radius: 50%;
background: var(--acento); color: var(--tinta);
display: grid; place-items: center;
font-size: 1.15rem; font-weight: 700;
transition: transform 0.25s ease, background 0.25s ease;
pointer-events: none;
z-index: 3;
}
.s3-tarjeta:hover .s3-flecha { transform: translate(3px, -3px); background: #E3F07A; }
/* Badges de estado sobre fondo tinta: reajustes de contraste */
.seccion-h-scroll .badge-construccion { border-color: rgba(207, 224, 74, 0.55); color: var(--acento); }
.seccion-h-scroll .badge-cola { border-color: var(--gris-claro); color: var(--gris-claro); opacity: 1; }
.seccion-h-scroll .badge-vision { border-color: var(--naranja); color: var(--naranja); }
.seccion-h-scroll .badge-viva { background: var(--acento); color: var(--tinta); }
.s3-microcopy {
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
margin-top: clamp(1.25rem, 3vh, 2rem);
}
/* Nota: la Sección 3 pasó a fondo cream cálido, así que el nav tinta ya contrasta
naturalmente contra la sección. La inversión anterior (body.s3-oscura) se
retiró; el toggle en JS también. */
/* <1200px o sin capa GSAP: LA PISTA SIGUE SIENDO HORIZONTAL, con el dedo.
(2026-08-19) Antes bajo 1200 px la pista se rompía en una retícula vertical:
las tarjetas apiladas una debajo de otra, 2.000+ px de página. La referencia
hace otra cosa, y es lo que el fundador pidió revisar: quita el pin
(position: static), deja la pista con overflow scroll —se desliza con el
dedo, scroll NATIVO, sin GSAP— y pone cada tarjeta al ~83 % del ancho para
que asome el borde de la siguiente y se entienda que hay más. Aquí igual,
más dos cosas que el navegador regala: scroll-snap (cada tarjeta encaja al
soltar) y la barra de scroll oculta pero el gesto intacto. El contador de
la cabecera sigue vivo leyendo el scroll nativo (portada.js). */
@media (max-width: 1199.98px) {
.seccion-h-scroll { padding: clamp(4rem, 10vh, 7rem) 0; }
.seccion-h-scroll .s3-pin { min-height: 0; padding: 0; }
.seccion-h-scroll .s3-cabecera { padding: 0 clamp(1.25rem, 5vw, 2.5rem); grid-template-columns: 1fr auto; align-items: start; }
/* el contador arriba, a la altura del antetítulo — no al fondo del párrafo largo */
.seccion-h-scroll .s3-progreso { display: block; align-self: start; margin-top: 0.1rem; }
.seccion-h-scroll .s3-pista-marco {
padding: 0;
/* la pista desborda el marco a propósito: el marco deja pasar el scroll */
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory; scroll-padding-left: clamp(1.25rem, 5vw, 2.5rem);
scrollbar-width: none; overscroll-behavior-x: contain;
}
.seccion-h-scroll .s3-pista-marco::-webkit-scrollbar { display: none; }
.seccion-h-scroll .s3-pista {
display: flex; flex-flow: row nowrap; width: max-content;
gap: clamp(0.9rem, 3.5vw, 1.5rem);
padding: 0.25rem clamp(1.25rem, 5vw, 2.5rem) 0.75rem;
transform: none !important; /* por si GSAP dejó un x inline al cambiar de ancho */
}
.seccion-h-scroll .s3-tarjeta {
flex: 0 0 clamp(16.5rem, 82vw, 30rem); min-height: 0;
/* ALTURA FIJA (2026-08-19): con height:auto cada tarjeta medía lo que su
texto —371 · 306 · 381 · 221 px, medido— y la pista se veía desordenada.
Pedido por el fundador: tamaño fijo, y que el texto SE LEA ENTERO —
sin recorte. 650 px (se probó 800 y sobraba aire): cabe el texto más
largo de hoy con la imagen de evidencia, y lo que sobre queda abajo. */
height: 650px;
scroll-snap-align: start;
display: flex; flex-direction: column;
}
/* el párrafo ocupa lo que queda y se recorta limpio con «…» en vez de
cortarse a mitad de línea; las líneas que caben dependen de si hay imagen */
/* el párrafo: flex:1 lo haría flow-root y mataría el clamp → `flex: 0 1 auto`
con el alto que le deje la tarjeta, y `display:-webkit-box` forzado para
que el recorte sea con «…» y no un corte seco (medido: sin esto salía
flow-root y el texto se cortaba a mitad de línea). */
/* el párrafo se lee ENTERO: sin clamp ni recorte (con 800 px sobra sitio);
el aire que quede va abajo */
.seccion-h-scroll .s3-tarjeta p,
.seccion-h-scroll .s3-tarjeta > p { flex: 0 0 auto; line-height: 1.55; margin-bottom: 0; overflow: visible; }
/* la flecha y lo que haya debajo del párrafo no empujan: el resto del alto queda libre */
.seccion-h-scroll .s3-tarjeta .s3-flecha { position: absolute; }
.seccion-h-scroll .s3-tarjeta h3 { flex: 0 0 auto; }
/* la imagen de evidencia: altura explícita (el 30 % del escritorio colapsaba
a 2 px en móvil: porcentaje sin referencia mientras el flex calcula) */
.seccion-h-scroll .s3-media { max-height: none; height: 160px; flex: 0 0 160px; margin: 0.6rem 0 0; }
.seccion-h-scroll .s3-media img { height: 100%; width: 100%; object-fit: cover; object-position: top; }
.s3-microcopy { padding: 0 clamp(1.25rem, 5vw, 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
.seccion-h-scroll .s3-pin { min-height: 0; padding: clamp(3rem, 6vh, 5rem) 0; }
.seccion-h-scroll .s3-progreso { display: none; }
.seccion-h-scroll .s3-pista {
display: grid; gap: 1.5rem; width: auto;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.seccion-h-scroll .s3-tarjeta { flex: 0 0 auto; min-height: 0; }
}
/* FIX §4 Activos en alturas bajas (2026-08-28): el s3-pin (100vh, pineado por
GSAP a top:top) apila cabecera + tarjeta + microcopy. Con la tarjeta a
`min 475px` no cabía tras la cabecera en portátiles (1366×768, 1440×900↓) → la
tarjeta quedaba pegada al borde inferior y el microcopy se cortaba. Se compacta
la cabecera y la tarjeta se ata al ALTO DISPONIBLE para que quepa y el marco
(flex:1) la centre. Solo ≥1200px: el fallback <1200 ya es scroll horizontal. */
@media (min-width: 1200px) and (max-height: 900px) {
.seccion-h-scroll .s3-pin {
padding: clamp(1.75rem, 4.5vh, 3rem) 0 clamp(1rem, 2.5vh, 1.75rem);
}
.seccion-h-scroll .s3-cabecera {
margin-bottom: clamp(1rem, 3vh, 1.75rem);
gap: 1rem 2rem;
}
.seccion-h-scroll .s3-intro { font-size: 0.95rem; margin-top: 0.6rem; }
.s3-tarjeta { height: clamp(320px, calc(100vh - 330px), 560px); }
.s3-microcopy { margin-top: clamp(0.6rem, 1.8vh, 1.1rem); font-size: 0.82rem; }
}
/* --- La pista, ahora con dos tipos de tarjeta y enlace real ---
El enlace del título (.s3-enlace) se estira sobre toda la tarjeta con ::after,
así la tarjeta entera es clicable sin cambiar su estructura ni su hover.
La flecha ↗ deja de ser decorativa: señala un destino que existe. */
.s3-tarjeta h3 a.s3-enlace { color: inherit; text-decoration: none; }
.s3-tarjeta h3 a.s3-enlace::after {
content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.s3-tarjeta h3 a.s3-enlace:focus-visible::after {
outline: 2px solid var(--acento); outline-offset: -2px;
}
/* Tarjeta de artículo en «próximamente»: misma tarjeta, tono más contenido —
es una promesa con URL, no un artículo. Se distingue sin gritar. */
.s3-tarjeta-proximo h3 { opacity: 0.85; }
.s3-tarjeta-proximo .s3-flecha { opacity: 0.6; }
/* Tarjeta de índice («el blog», «ver todos»): la que lleva a una página que
agrupa. Borde de acento tenue para leerse como puerta, no como pieza. */
.s3-tarjeta-indice { border-color: rgba(232, 227, 55, 0.35); }
.s3-tarjeta-indice h3 { color: var(--acento); }
/* --- Sección 6 · Talleres — la puerta gratuita al curso --- */
.talleres-vacio {
max-width: 62ch; margin: 2rem 0 0; padding: 1.75rem 2rem;
border-left: 4px solid var(--acento); background: var(--h-item-bg);
border-radius: 0 16px 16px 0;
}
.talleres-vacio-texto { font-size: 1.05rem; color: var(--texto); margin: 0 0 1.25rem; }
/* El CTA del vacío de Talleres («Avísame de la primera clase»): destacado con
glow cian brillante en reposo y realce LIMA en hover — es la única invitación
de la sección vacía, tiene que llamar (2026-09-04, feedback del fundador). */
/* Especificidad (1,3,0) para empatar a `.seccion:not(.seccion-tinta):not(#cta)
.boton-borde` (el `:not(#cta)` le mete un id) y ganarle por ir después — esa
regla ponía borde+texto en --tinta (oscuro, invisible sobre el fondo oscuro). */
#talleres .talleres-vacio .boton.boton-borde {
border-color: rgba(43, 184, 198, 0.70); color: #fff;
box-shadow: 0 0 22px rgba(43, 184, 198, 0.55), 0 0 8px rgba(43, 184, 198, 0.45);
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
#talleres .talleres-vacio .boton.boton-borde:hover {
background: var(--lima); color: var(--tinta); border-color: var(--lima);
box-shadow: 0 0 28px rgba(207, 224, 74, 0.60), 0 0 10px rgba(207, 224, 74, 0.50);
transform: translateY(-1px);
}
.tarjetas-talleres { margin-top: 2rem; }
.tarjeta-taller h3 a { color: inherit; }
.tarjeta-taller .badge { margin-bottom: 0.9rem; display: inline-block; }
@media (max-width: 640px) {
.talleres-vacio { padding: 1.25rem 1.25rem; border-radius: 0 12px 12px 0; }
}
/* --- Sección 5 · Brazos del ecosistema --- */
.tarjetas-brazos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Constelación de dominios: mismo glass de cian que el arco + icono cian. */
.tarjeta-brazo {
background: linear-gradient(150deg, rgba(43, 184, 198, 0.15) 0%, transparent 60%), var(--h-item-bg);
border: 1px solid rgba(43, 184, 198, 0.20);
transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.brazo-icono { display: block; width: 44px; height: 44px; color: var(--cian); margin-bottom: 1.1rem; }
.brazo-icono svg { width: 100%; height: 100%; }
/* Realce LIMA en hover (2026-09-04): el arena plano heredado del tema claro
(.tarjeta:hover → --h-item-hover #c9c8ba) borraba el vidrio cian. Se sustituye
por un glow de gradiente lima SOBRE el vidrio cian: el lima entra como color
de resalte puntual, el naranja sigue de protagonista. Va después de
.tarjeta:hover (misma especificidad) para ganarle el background. */
.tarjeta-brazo:hover {
background:
radial-gradient(120% 90% at 50% 0%, rgba(207, 224, 74, 0.30) 0%, transparent 62%),
linear-gradient(150deg, rgba(43, 184, 198, 0.15) 0%, transparent 60%),
var(--h-item-bg);
border-color: rgba(207, 224, 74, 0.55);
box-shadow: 0 10px 34px rgba(207, 224, 74, 0.18);
}
.tarjeta-brazo:hover .brazo-icono { color: var(--naranja); }
/* --- Sección 6 · Oferta (3 columnas) --- */
.columnas-oferta { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.5rem; }
.columna h3 { font-size: 1.15rem; margin-bottom: 0.75rem; display: flex; align-items: baseline; gap: 0.6rem; }
.columna-numero { font-size: 0.85rem; font-weight: 600; color: var(--violeta); }
#constelacion .cta-botones { margin-top: 3rem; }
.boton-tinta { background: var(--tinta); color: #fff; }
.boton-tinta:hover { background: var(--violeta); color: #fff; }
.tarjetas-principios { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.principio-numero {
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; border-radius: 50%;
background: var(--acento); color: var(--tinta);
font-weight: 700; font-size: 0.9rem; margin-bottom: 1rem;
}
/* --- Sección 7 · Preguntas frecuentes (details nativo; la animación llega en F2) --- */
.faq-lista { margin-top: 2.5rem; display: grid; gap: 0.9rem; }
.faq-item {
/* Contenedor CIAN INTENSO (2026-09-04, feedback del fundador): fondo cian
translúcido (ya no vidrio blanco/gris), con borde + glow cian brillante.
Texto CLARO en reposo. En hover salta a LIMA relleno, como el botón
«Avísame», y el texto pasa a oscuro para leerse. */
background: rgba(43, 184, 198, 0.24);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid rgba(43, 184, 198, 0.60);
border-radius: 14px; padding: 0;
box-shadow: 0 0 24px rgba(43, 184, 198, 0.55), 0 0 8px rgba(43, 184, 198, 0.40);
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item[open] {
background: rgba(43, 184, 198, 0.30);
border-color: rgba(43, 184, 198, 0.78);
}
.faq-item:hover {
background: var(--lima); border-color: var(--lima);
box-shadow: 0 0 30px rgba(207, 224, 74, 0.60), 0 0 10px rgba(207, 224, 74, 0.50);
}
.faq-item summary {
cursor: pointer; list-style: none;
font-weight: 600; color: #fff; font-size: 1.05rem;
padding: 1.15rem 3rem 1.15rem 1.5rem; position: relative;
transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+'; position: absolute; right: 1.5rem; top: 50%;
transform: translateY(-50%);
font-size: 1.4rem; font-weight: 500; color: rgba(255, 255, 255, 0.85);
transition: transform 0.2s ease, color 0.3s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
/* En hover (relleno lima), el texto y el icono van OSCUROS. */
.faq-item:hover summary,
.faq-item:hover summary::after,
.faq-item:hover p,
.faq-item:hover p a { color: var(--tinta); }
.faq-item p { padding: 0 1.5rem 1.25rem; font-size: 0.97rem; color: var(--gris-claro); }
.faq-item p strong { color: #fff; }
.faq-item:hover p strong { color: var(--tinta); }
.faq-item p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* --- Sección 8 · Llamada final --- */
/* Color PLANO violeta oscuro compartido por la Sección 8 y el pie.
`!important` + `background-image: none` para descartar cualquier textura
heredada del selector `.seccion:not(.seccion-tinta):not(.seccion-h-scroll)`
que aplica dots + fondo beige a toda .seccion no-tinta. */
#cta, #pie {
background-color: var(--superficie-oscura) !important;
background-image: none !important;
}
#cta {
position: relative;
text-align: center;
min-height: 42vh;
display: flex; flex-direction: column; justify-content: center;
overflow: hidden;
}
#cta h2 { color: var(--acento); }
#cta .cta-texto { color: var(--gris-claro); }
#cta > * { position: relative; z-index: 1; }
/* Hairline dorado a 35% de opacidad: cierra la Sección 7 beige con un remate
editorial sin volver a los gradients que creaban el salto visual. */
#cta::before {
content: ""; position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: min(240px, 40vw); height: 1px;
background: var(--acento); opacity: 0.35;
z-index: 2;
}
/* (2026-09-05) Grano de ruido retirado de toda la web: el #pie::after —que solo
pintaba grano— se eliminó. El cierre lleva solo la rejilla de la página. */
/* La rejilla también en el cierre (2026-09-04): su ::before es el hilo dorado y
su ::after era el grano, así que la rejilla va en el ::after (reemplaza al
grano) con z-index:-1 → queda sobre el color de fondo pero BAJO la
constelación (canvas z:0) y el contenido (z:1). Misma máscara de desvanecido
inferior que el resto: mesa de trabajo continua hasta el cierre. */
#cta::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
background-image:
linear-gradient(rgba(190, 215, 222, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(190, 215, 222, 0.16) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: linear-gradient(to bottom, #000, #000 65%, transparent 95%);
mask-image: linear-gradient(to bottom, #000, #000 65%, transparent 95%);
}
/* El lienzo de la constelación en #cta: la regla `#cta > * {position:relative;
z-index:1}` (contenido) también alcanza al canvas inyectado y lo sacaría de
su sitio; se le devuelve position:absolute + z-index:0 (sobre la rejilla
::after z:-1, bajo el contenido z:1). Especificidad (1,1,1) > `#cta > *`. */
#cta > canvas.cns-fondo { position: absolute; z-index: 0; }
#pie { overflow: hidden; }
/* La Sección 8 y el pie nacen sin el padding del panel: título centrado en el
viewport completo desde el arranque, sin salto horizontal cuando el
panel se desvanece al entrar el footer. */
.cta-asterisco {
display: block; font-size: clamp(2rem, 3vw, 2.8rem);
color: var(--acento); margin-bottom: 1.5rem; line-height: 1;
opacity: 0.85; letter-spacing: 0;
}
.cta-texto { font-size: 1.1rem; max-width: 40em; margin: 1.5rem auto 0; }
.cta-centrados { justify-content: center; }
.firma { margin-top: 3rem; font-size: 0.9rem; color: var(--gris-claro); opacity: 0.8; }
/* --- Móvil: mínimos de supervivencia (la adaptación real es F3.1) --- */
@media (max-width: 640px) {
/* (2026-08-19) Las reglas de la PÍLDORA que vivían aquí murieron: su
width: calc(100% - 24px) pisaba el width:100% de la barra de sitio en
pantallas estrechas (misma especificidad, iba después), y el resto
(nav-logo img, nav-anclas, nav-cta) vestía una píldora que ya no existe.
Solo el hito era legítimo y se queda. */
.hito { padding: 1.5rem 1.25rem 1.25rem; }
}
/* ==================================================================
Sección 6 · CONSTELACIÓN (2026-08-16) — el producto insignia.
Sustituye a «Oferta honesta». Sección en tinta con lienzo de
constelaciones detrás. Concepto de marca: nodos + aristas.
Especificación: web-proyecto/sistema-visual-constelacion.md
================================================================== */
/* Badge del estado nuevo: construido y funcionando, sin la prueba real. */
.badge-prueba { border: 1.5px solid var(--acento); color: var(--acento); background: rgba(207, 224, 74, 0.08); }
.seccion-h-scroll .badge-prueba { border-color: var(--acento); color: var(--acento); }
/* --- El lienzo --- */
#constelacion { overflow: hidden; }
.cns-lienzo {
position: absolute; inset: 0; width: 100%; height: 100%;
z-index: 0; pointer-events: none; opacity: 0.85;
}
/* --- Constelación de fondo GLOBAL (2026-09-04) ---------------------------
Nodos + aristas cian sobre la rejilla HUD, en TODAS las secciones oscuras.
constelacion.js inyecta un