/* Portada visual: carrusel de portada, imágenes grandes y carrusel de frentes.
   Usa la base de sitio.css (Medianoche). El acento se cambia en --gold. */
:root{--gold:#cfe0ff;--line:rgba(207,224,255,.16)}

/* La red neuronal flota sobre las fotos, muy tenue */
#red{z-index:5;pointer-events:none;mix-blend-mode:screen}
.sitio{z-index:1}

/* Carrusel de portada */
.heroc{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.heroc .fondo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 9s ease-out}
.heroc .fondo.activa{opacity:1;transform:scale(1)}
.heroc .tinte{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,14,.9),rgba(4,6,14,.55) 48%,rgba(4,6,14,.15)),linear-gradient(180deg,rgba(4,6,14,.55),rgba(4,6,14,0) 22%,rgba(4,6,14,0) 62%,var(--bg))}
.heroc.densa .tinte{background:linear-gradient(90deg,rgba(4,6,14,.95),rgba(4,6,14,.8) 50%,rgba(4,6,14,.4)),linear-gradient(180deg,rgba(4,6,14,.55),rgba(4,6,14,0) 22%,rgba(4,6,14,0) 62%,var(--bg))}
.heroc .cab{position:relative;z-index:6}
.heroc .paneles{position:relative;z-index:6;flex:1;display:grid;align-items:center;padding:2.5rem var(--pad) 9.375rem}
.heroc .panel{grid-area:1/1;max-width:58.75rem;opacity:0;visibility:hidden;transform:translateY(0.875rem);transition:opacity .8s ease,transform .8s ease,visibility 0s .8s}
.heroc .panel.activa{opacity:1;visibility:visible;transform:none;transition:opacity .9s ease .25s,transform .9s ease .25s}
.heroc h1,.heroc h2.titular{margin:0;max-width:none;font:300 clamp(2.8rem,6.8vw,5.8rem)/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.heroc .marcas{position:absolute;z-index:6;left:var(--pad);right:var(--pad);bottom:2.5rem;display:flex;align-items:flex-end;gap:0.875rem}
.heroc .marca-s{flex:1;max-width:14.375rem;padding:0.875rem 0 0;border:0;border-top:1px solid rgba(244,241,234,.25);background:none;text-align:left;font:400 0.75rem/1.4 var(--sans);letter-spacing:.08em;color:var(--ink);opacity:.6;cursor:pointer;position:relative;transition:opacity .2s}
.heroc .marca-s:hover,.heroc .marca-s[aria-current=true]{opacity:1}
.heroc .marca-s b{display:block;margin-bottom:0.25rem;font:300 1.1rem/1 var(--serif);color:var(--gold)}
.heroc .marca-s::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--gold)}
.heroc .marca-s[aria-current=true]::before{width:100%;transition:width var(--dur,7s) linear}
.heroc .flechas{margin-left:auto;display:flex;gap:0.625rem}
.flecha{width:2.875rem;height:2.875rem;border-radius:50%;border:1px solid rgba(244,241,234,.35);background:rgba(4,6,14,.35);color:var(--ink);font:300 1.25rem/1 var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.flecha:hover{border-color:var(--gold);background:rgba(4,6,14,.7)}

/* Texto + imagen grande */
.duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.duo figure{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:0.25rem}
.duo figure img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82)}
.duo figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,0) 55%,rgba(4,6,14,.6))}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem 2rem;margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.datos div{font-size:0.875rem}
.datos b{display:block;margin-bottom:0.375rem;font:300 3.4rem/1 var(--serif);color:var(--ink)}

/* Carrusel de frentes */
.franja.suelta{padding-inline:0;overflow:hidden}
.franja.suelta .ancho{padding-inline:var(--pad)}
.cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.carril{display:flex;gap:1.25rem;margin-top:3.25rem;padding:0 var(--pad) 0.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none}
.carril::-webkit-scrollbar{display:none}
.lamina{position:relative;flex:0 0 clamp(17.5rem,31vw,26.875rem);aspect-ratio:3/4;overflow:hidden;border-radius:0.25rem;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;padding:1.875rem 1.75rem;text-decoration:none;background:#0a0e1a}
.lamina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);transition:transform .9s ease,filter .5s ease}
.lamina::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,.15) 0%,rgba(4,6,14,.72) 48%,rgba(4,6,14,.95))}
.lamina:hover img{transform:scale(1.06);filter:saturate(1) brightness(.92)}
.lamina > *:not(img){position:relative;z-index:1}
.lamina small{font:400 0.7188rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lamina h3{margin:0.875rem 0 0.625rem;font:400 2.1rem/1.02 var(--serif);color:var(--ink)}
.lamina p{margin:0;font-size:0.9375rem;color:#c3c9d6}
.lamina .ir{margin-top:1.375rem;font:400 0.75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.lamina .ir::after{content:"";display:inline-block;width:2.375rem;height:1px;margin-left:0.75rem;vertical-align:middle;background:var(--gold);transition:width .25s}
.lamina:hover .ir::after{width:4rem}

/* Galería: carrusel de imágenes anchas con su explicación */
.galeria{display:flex;gap:1.5rem;margin-top:3.25rem;padding:0 var(--pad) 0.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none}
.galeria::-webkit-scrollbar{display:none}
.toma{flex:0 0 min(65rem,84vw);margin:0;scroll-snap-align:start}
.toma img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:0.25rem;background:#0a0e1a}
.toma figcaption{display:grid;grid-template-columns:auto 1fr;gap:0.25rem 1.5rem;align-items:baseline;margin-top:1.5rem;max-width:48.75rem}
.toma figcaption b{grid-row:span 2;font:300 2.6rem/1 var(--serif);color:var(--gold)}
.toma figcaption h3{margin:0;font:400 1.8rem/1.1 var(--serif);color:var(--ink)}
.toma figcaption p{margin:0;font-size:0.9688rem}
.nota{margin:1.75rem 0 0;font-size:0.8125rem;color:var(--muted)}

/* Variantes de texto + imagen */
.duo.inv figure{order:2}
.duo.ancha{grid-template-columns:1fr 1.15fr}
.duo.ancha figure{aspect-ratio:16/11}
.duo.ancha figure img{object-position:left top;filter:none}
.duo.ancha figure::after{display:none}
.duo.ancha figure{border:1px solid var(--line)}
.puntos{margin:2.25rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.puntos li{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.puntos h3{margin:0 0 0.375rem;font:400 1.45rem/1.1 var(--serif);color:var(--ink)}
.puntos p{margin:0;font-size:0.9688rem}

/* Banda con imagen de fondo */
.banda{position:relative;padding:clamp(7.5rem,20vh,13.75rem) var(--pad);background-size:cover;background-position:center;background-attachment:fixed;border-top:1px solid var(--line)}
.banda::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(4,6,14,.55) 30%,rgba(4,6,14,.55) 70%,var(--bg))}
.banda > *{position:relative}
.banda blockquote{margin:0 auto;max-width:21ch;text-align:center;font:300 clamp(2.2rem,5vw,4.2rem)/1.08 var(--serif);color:var(--ink)}
.banda blockquote em{font-style:italic;color:var(--gold)}

/* Etapas */
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:3.5rem;background:var(--line);border:1px solid var(--line)}
.etapas div{padding:2.125rem 1.75rem 2.375rem;background:rgba(4,6,14,.94)}
.etapas b{display:block;font:300 4rem/1 var(--serif);color:var(--gold);opacity:.9}
.etapas h3{margin:1.375rem 0 0.625rem;font:400 1.6rem/1.1 var(--serif);color:var(--ink)}
.etapas p{margin:0;font-size:0.9375rem}
.etapas .actual{background:rgba(207,224,255,.07)}
.etapas .hoy{display:inline-block;margin-left:0.75rem;padding:0.25rem 0.625rem;border:1px solid var(--gold);border-radius:62.4375rem;font:400 0.6562rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);vertical-align:middle}

/* Cierre con imagen */
.cierre{position:relative;padding:clamp(6.875rem,18vh,11.875rem) var(--pad);background-size:cover;background-position:center 60%;border-top:1px solid var(--line)}
.cierre::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,14,.93),rgba(4,6,14,.6) 55%,rgba(4,6,14,.25)),linear-gradient(180deg,var(--bg),rgba(4,6,14,0) 25%)}
.cierre .ancho{position:relative}
.cierre ul{list-style:none;display:flex;flex-wrap:wrap;gap:0.625rem;margin:2.125rem 0 0;padding:0}
.cierre li{padding:0.625rem 1.125rem;border:1px solid rgba(244,241,234,.3);border-radius:62.4375rem;font:400 0.8125rem/1 var(--sans);letter-spacing:.04em;color:var(--ink);background:rgba(4,6,14,.4)}

/* Cierre en dos columnas con formulario de contacto */
.cierre-dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.contacto{position:relative;padding:2.25rem 2.25rem 2rem;border:1px solid rgba(244,241,234,.18);border-radius:0.25rem;background:rgba(4,6,14,.72);-webkit-backdrop-filter:blur(0.625rem);backdrop-filter:blur(0.625rem)}
.contacto .campo{margin:0 0 1.375rem}
.contacto label{display:block;margin-bottom:0.375rem;font:400 0.75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.contacto label span{letter-spacing:.02em;text-transform:none;color:var(--muted)}
.contacto input,.contacto textarea{display:block;width:100%;padding:0.625rem 0;border:0;border-bottom:1px solid rgba(244,241,234,.3);border-radius:0;background:transparent;color:var(--ink);font:300 1.0625rem/1.5 var(--sans);transition:border-color .2s}
.contacto textarea{resize:vertical;min-height:6.5rem}
.contacto input:focus,.contacto textarea:focus{outline:none;border-bottom-color:var(--gold)}
.contacto input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 62rem #080b16 inset}
.contacto .acciones{margin-top:1.75rem}
.contacto button.boton{cursor:pointer;font-family:var(--sans)}
.contacto button.boton[disabled]{opacity:.6;cursor:default}
.contacto .estado{margin:1rem 0 0;min-height:1.5em;font-size:0.9375rem;color:var(--body)}
.contacto .estado.ok{color:#a8e6c1}
.contacto .estado.mal{color:#f3b0b0}
.contacto .trampa{position:absolute;left:-624rem;width:1px;height:1px;overflow:hidden}

@media (max-width:900px){
  .heroc .tinte,.heroc.densa .tinte{background:linear-gradient(180deg,rgba(4,6,14,.72),rgba(4,6,14,.62) 60%,var(--bg))}
  .cierre-dos{grid-template-columns:1fr}
  .duo,.duo.ancha{grid-template-columns:1fr}
  .duo.inv figure{order:0}
  .duo figure{aspect-ratio:16/11}
  .etapas{grid-template-columns:1fr 1fr}
  .heroc .marca-s span{display:none}
  .banda{background-attachment:scroll}
}
@media (max-width:560px){
  .datos{grid-template-columns:1fr;gap:1rem}
  .datos div{display:grid;grid-template-columns:5.75rem minmax(0,1fr);align-items:center;gap:1rem;font-size:0.9375rem}
  .datos b{margin:0;font-size:2.6rem}
  .etapas{grid-template-columns:1fr}
  .heroc .flechas{display:none}
}
@media (prefers-reduced-motion:reduce){
  .heroc .fondo{transition:opacity .01s;transform:none}
  .heroc .marca-s[aria-current=true]::before{transition:none}
}