/* ═══════════════════════════════════════════════════════════════════════════
   HOME — portada del sitio (solo se carga en la Home).
   Diseño: boceto aprobado por Lucas (docs/bocetos/home.html, 2026-09-24).

   Modos (los decide un script chico en el <head>, ver inc/home/home.php):
   - sin clase: página quieta y completa (reducir movimiento o navegador viejo).
   - .home-anim: apariciones suaves.
   - .home-anim.home-scrolly (compu ≥1024 px con mouse): secciones fijas que avanzan
     con el scroll (home.js).
   ═══════════════════════════════════════════════════════════════════════════ */

.pagina-home {
	--pad-section: clamp(3.75rem, 7vw, 6rem);   /* más compacto que el resto del sitio */
	--alto-barra: 72px;
	--arriba-fija: calc(var(--wp-admin--admin-bar--height, 0px) + var(--alto-barra));
	--e-expo: cubic-bezier(.16,1,.3,1);
}

/* Tipografía del boceto */
:where(.pagina-home .site-main) :is(h1, h2, h3, h4, p, ul, figure) { margin: 0; }
.pagina-home .display { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .98; }
.pagina-home .h-xl { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; }
.pagina-home .lead { font-size: clamp(1.05rem, 1.4vw, 1.16rem); line-height: 1.65; }
.pagina-home .eyebrow { margin-bottom: 1rem; }
.pagina-home .sec-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pagina-home .link-arrow { font-size: .92rem; font-weight: 700; color: var(--deep-2); }
.pagina-home .link-arrow:hover { color: var(--brand); }

/* ── Animaciones ──────────────────────────────────────────────────────────── */
/* Títulos que suben línea por línea desde una "ranura" */
.l { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.l > span { display: inline-block; }
.home-anim [data-lineas] .l > span { transform: translateY(108%); transition: transform 1.1s var(--e-expo); }
.home-anim [data-lineas].in .l > span { transform: none; }
.home-anim [data-lineas].in .l:nth-child(2) > span { transition-delay: .12s; }
.home-anim [data-lineas].in .l:nth-child(3) > span { transition-delay: .24s; }

/* Secciones fijas (solo compu): la sección es más alta que la pantalla y su contenido
   (.pin) queda pegado debajo de la barra mientras se baja. */
.home-scrolly .fija { padding: 0; }
.home-scrolly .fija > .pin {
	position: sticky; top: var(--arriba-fija);
	height: calc(100vh - var(--arriba-fija));
	display: flex; align-items: center;
	overflow: hidden;
	padding: 0 var(--gutter);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. PORTADA
   ═══════════════════════════════════════════════════════════════════════════ */
.home-portada { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
/* Recorrido fijo: 1,1 pantallas (ajustado con Lucas para que no quede tramo vacío). */
.home-scrolly .home-portada { height: calc(210vh - var(--arriba-fija)); }
.home-portada > .pin { position: static; }          /* la red de moléculas cubre toda la sección */
.home-portada .wrap { position: relative; z-index: 1; }
.red-moleculas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; pointer-events: none; }

.portada-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.portada-texto .lead { margin-top: 1.4rem; max-width: 32rem; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }

/* El título y la lista de líneas comparten lugar: uno se va y el otro entra. */
.portada-izq { display: grid; }
.portada-izq > * { grid-area: 1 / 1; }
.portada-lineas { display: none; align-self: center; }
.home-scrolly .portada-lineas { display: block; }
.home-scrolly .portada-lineas .eyebrow,
.home-scrolly .pl { opacity: 0; }
.pl {
	display: grid; grid-template-columns: 3rem 1fr; align-items: baseline;
	padding: 1.05rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
	position: relative; color: inherit; text-decoration: none;
}
.pl::after {
	content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
	background: var(--aqua); opacity: .7;
	transform: scaleX(var(--linea, 0)); transform-origin: left;
}
.pl-num { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--aqua); }
.pl-nombre { font-size: clamp(2.4rem, 4.4vw, 3.7rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: #fff; transition: color .25s; }
.pl-txt { grid-column: 2; margin-top: .4rem; font-size: 1rem; color: rgba(255,255,255,.62); max-width: 30rem; }
.pl:hover .pl-nombre { color: var(--aqua-soft); }

/* La gota de capas */
.escena { perspective: 1500px; perspective-origin: 50% 40%; }
.gota-3d { position: relative; width: min(100%, 420px); margin-inline: auto; aspect-ratio: 4 / 5; transform-style: preserve-3d; will-change: transform; }
.capa { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.capa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.capa-1 { transform: scale(1.2); }  .capa-1 svg { color: var(--brand); }
.capa-2 { transform: scale(1.1); }  .capa-2 svg { color: var(--aqua); }
.capa-4 { transform: scale(.93); }  .capa-4 svg { color: #fff; }
.capa-5 { transform: scale(.5); }   .capa-5 svg { color: var(--aqua-soft); }
.gota { position: absolute; inset: 0; clip-path: url(#forma-gota); overflow: hidden; background: var(--abyss-2); }
.gota img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.06); }
.home-anim .gota-3d .foto { opacity: 0; transition: opacity .9s var(--e-soft); }
.home-anim .gota-3d.in .foto { opacity: 1; }
.gota-sello {
	position: absolute; left: -4%; bottom: 9%; z-index: 2;
	display: flex; align-items: center; gap: .6rem;
	padding: .65rem 1.1rem .65rem .75rem; border-radius: var(--r-full);
	background: rgba(8,26,37,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.12);
	color: #fff; font-size: .82rem; font-weight: 600; white-space: nowrap;
	transform: translateZ(40px);
}
.gota-sello svg { width: 18px; height: 18px; color: var(--aqua); }

/* Guía "bajá" (solo compu) */
.guia-scroll { position: absolute; left: 50%; bottom: 2rem; z-index: 2; width: 1px; height: 48px; background: rgba(255,255,255,.18); overflow: hidden; display: none; }
.home-scrolly .guia-scroll { display: block; }
.guia-scroll::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--aqua); animation: guia-scroll 1.8s var(--e-soft) infinite; }
@keyframes guia-scroll { to { top: 100%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   2. QUIÉNES SOMOS — no queda fija (su contenido no llena la pantalla).
   ═══════════════════════════════════════════════════════════════════════════ */
.home-quienes { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.quienes-deco {
	position: absolute; right: -6%; top: 50%;
	width: min(46vw, 620px);
	transform: translateY(-50%);
	color: var(--aqua); opacity: .09; pointer-events: none;
}
.declaracion { max-width: 1040px; position: relative; z-index: 1; }
.frase { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 700; line-height: 1.22; letter-spacing: -.03em; color: var(--ink); }
.frase em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--em); }
.frase .w { transition: opacity .25s linear; }
.home-anim .frase .w { opacity: .16; }
.home-anim .frase .w.on { opacity: 1; }
.declaracion-pie {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.5rem;
	margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.declaracion-pie p { font-size: .98rem; color: var(--ink-3); max-width: 44rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. NUESTRAS LÍNEAS — selector (aprobado por Lucas tal cual; boceto v2)
   ═══════════════════════════════════════════════════════════════════════════ */
.selector { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; }
.sel-lista { border-top: 1px solid var(--line); }
.sel-item {
	display: block; width: 100%; padding: 1.35rem 0; position: relative;
	background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
	font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.sel-item::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--brand-600); transition: width .6s var(--e-expo); }
.sel-item.activo::before { width: 100%; }
.sel-fila { display: flex; align-items: baseline; gap: 1.1rem; }
.sel-num { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); min-width: 1.8rem; transition: color .3s; }
.sel-nombre { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; color: var(--ink-3); transition: color .3s; }
.sel-flecha { margin-left: auto; width: 22px; height: 22px; color: var(--ink-3); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .4s var(--e-out); }
.sel-item:hover .sel-nombre { color: var(--ink-2); }
.sel-item.activo .sel-num { color: var(--em); }
.sel-item.activo .sel-nombre { color: var(--ink); }
.sel-item.activo .sel-flecha { opacity: 1; transform: none; color: var(--em); }
.sel-texto { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e-expo); }
.sel-texto > span { overflow: hidden; padding-left: 2.9rem; font-size: .97rem; color: var(--ink-3); line-height: 1.6; }
.sel-item.activo .sel-texto { grid-template-rows: 1fr; }
.sel-item.activo .sel-texto > span { padding-top: .6rem; }
.sel-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.sel-paneles { position: relative; min-height: 520px; }
.panel {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
	border: 1px solid var(--line); box-shadow: var(--sh-md);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity .5s var(--e-soft), transform .7s var(--e-expo), visibility .5s;
}
.panel.activo { opacity: 1; visibility: visible; transform: none; }
.panel-media { position: relative; flex: 1; min-height: 280px; background: radial-gradient(90% 90% at 70% 20%, #fff 0%, var(--mist) 45%, var(--mist-2) 100%); overflow: hidden; }
.panel-media > img {
	position: absolute; inset: 2rem; width: calc(100% - 4rem); height: calc(100% - 4rem);
	object-fit: contain; filter: drop-shadow(0 18px 26px rgba(11,34,48,.18));
	transform: scale(.96); transition: transform 1.2s var(--e-expo);
}
.panel.activo .panel-media > img { transform: none; }
.panel-media .gota-fondo { position: absolute; right: -8%; top: -14%; width: 48%; color: var(--aqua); opacity: .16; }
.panel-media.trio { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .7rem; padding: 1.2rem; }
.panel-media.trio figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: #fff; position: relative; }
.panel-media.trio img { width: 100%; height: 100%; object-fit: cover; }
.panel-media.trio img.recorte { object-fit: contain; padding: .6rem; }
.panel-media.trio figcaption { position: absolute; left: .6rem; bottom: .6rem; font-size: .72rem; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.9); padding: .25rem .6rem; border-radius: var(--r-full); }
.panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 1.5rem; border-top: 1px solid var(--line); }
.panel-destacado small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.panel-destacado b { font-size: 1.05rem; color: var(--ink); }
.panel-destacado span { font-size: .9rem; color: var(--ink-3); }
.panel-areas { display: flex; flex-wrap: wrap; gap: .5rem; }
.panel-areas a {
	display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem;
	border-radius: var(--r-full); border: 1px solid var(--line-2);
	font-size: .86rem; font-weight: 600; color: var(--ink); text-decoration: none;
	transition: border-color .2s, background .2s;
}
.panel-areas a:hover { border-color: var(--brand-600); background: var(--mist); color: var(--ink); }
.panel-areas a small { color: var(--ink-3); font-weight: 500; }
.panel-movil { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. POR QUÉ ELEGIRNOS — en compu queda fija y las tarjetas se apilan.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Recorrido fijo: 1,4 pantallas (acortado con Lucas). */
.home-scrolly .home-porque { height: calc(240vh - var(--arriba-fija)); }
.porque { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.progreso { display: none; align-items: center; gap: 1rem; margin-top: 2rem; }
.home-scrolly .progreso { display: flex; }
.contador { font-size: .85rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.contador b { color: var(--em); font-size: 1.5rem; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.barra-prog { flex: 1; max-width: 180px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.barra-prog i { position: absolute; inset: 0; background: var(--brand-600); transform-origin: left; transform: scaleX(0); }

/* Sin secciones fijas (celular/tablet): los tres puntos uno debajo del otro. */
.pilar { display: grid; grid-template-columns: .95fr 1.05fr; gap: 1.6rem; align-items: center; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.pilar:last-child { border-bottom: 1px solid var(--line); }
.pilar-media { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--mist-2); }
.pilar-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pilar-num { font-family: var(--font-serif); font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--brand-600); margin-bottom: .6rem; }
.pilar h3 { font-size: 1.3rem; margin-bottom: .45rem; letter-spacing: -.03em; }
.pilar-texto p:last-child { font-size: .95rem; color: var(--ink-3); line-height: 1.6; }

/* Foto que se descubre de abajo hacia arriba al aparecer */
.home-anim [data-descubrir] { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--e-expo); }
.home-anim [data-descubrir].in { clip-path: inset(0 0 0 0); }
.home-anim [data-descubrir] img { transform: scale(1.12); transition: transform 1.6s var(--e-expo); }
.home-anim [data-descubrir].in img { transform: scale(1); }

/* En compu las tres tarjetas se superponen y se van apilando al bajar.
   Alto que llena la pantalla fija (sin huecos grandes arriba ni abajo). */
.home-scrolly .porque-cards { position: relative; height: min(70vh, 640px); }
.home-scrolly .pilar {
	position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0; padding: 0;
	border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
	overflow: hidden; box-shadow: var(--sh-lg); transform-origin: 50% 0; will-change: transform;
}
.home-scrolly .pilar-media { flex: 1; aspect-ratio: auto; border-radius: 0; }
.home-scrolly .pilar-texto { padding: 1.4rem 1.7rem 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.4rem; align-items: start; }
.home-scrolly .pilar-num { grid-row: span 2; margin: 0; font-size: 3rem; }
.home-scrolly .pilar:nth-child(n+2) { transform: translateY(100vh); }

/* ═══════════════════════════════════════════════════════════════════════════
   5. CONTACTO
   ═══════════════════════════════════════════════════════════════════════════ */
/* El bloque de contacto (también al final de Nosotros) está en componentes.css. */

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTACIÓN A PANTALLAS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
	.portada-grid { grid-template-columns: 1fr; }
	.gota-3d { width: min(70%, 340px); }
	.quienes-deco { display: none; }

	/* Selector → tarjetas apiladas, todas visibles */
	.selector { grid-template-columns: 1fr; }
	.sel-lista { display: none; }
	.sel-paneles { min-height: 0; display: grid; gap: 1.25rem; }
	.panel { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }
	.panel-media { min-height: 230px; aspect-ratio: 4 / 3; order: -1; }
	.panel-movil { display: block; padding: 1.3rem 1.5rem 0; }
	.panel-movil .sel-fila { margin-bottom: .4rem; }
	.panel-movil .sel-nombre { color: var(--ink); font-size: 1.6rem; }
	.panel-movil .sel-num { color: var(--em); }
	.panel-movil p { font-size: .95rem; color: var(--ink-3); }
	.porque { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.panel-pie { flex-direction: column; align-items: flex-start; }
	.pilar { grid-template-columns: 1fr; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.guia-scroll::after { animation: none; }
}