/* =====================================================================
   Fase 00 · Inicio — intro institucional de la oficina, reusada tal cual
   entre proyectos (misma mecánica y assets que altezza-presentacion,
   adaptada a la arquitectura de scroll-snap de este sitio en vez del
   paginado hijackeado de Altezza).
   ===================================================================== */

html.bloqueo-scroll-hero,
body.bloqueo-scroll-hero {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100vh;
  height: 100dvh;
}

.hero-inicio-externo {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: linear-gradient(160deg, var(--superficie) 0%, var(--fondo) 100%);
  overflow: hidden;
  text-align: center;
}

.hero-video-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-capa-oscura {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(20, 24, 26, 0.55) 0%, rgba(20, 24, 26, 0.65) 100%);
}

/* ===== Portada (antes de "Descubre el proyecto") — referencia de Ariel: portada tipo portfolio.
   Mismo fondo claro que las láminas (machote/fondos/fondo-general, puesto en index.html para que
   el flujo de R2 le reescriba la URL) y el boceto del proyecto a la derecha. Ya no lleva la capa
   oscura: el texto de la portada pasa a oscuro. La inundación (Fase 00, al hacer clic) tapa todo
   esto con su propio video y no cambia. ===== */
.hero-capa-oscura { display: none; }
.hero-portada-fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
}
.hero-portada-imagen {
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  bottom: clamp(24px, 6vh, 70px);
  z-index: 2;
  width: min(72vw, 1180px);
  max-height: 80vh;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  animation: hero-portada-imagen-entrada 1.8s var(--ease-deliberate) 0.2s forwards;
}
@keyframes hero-portada-imagen-entrada { to { opacity: 1; } }

/* Título y botón arriba a la izquierda, debajo de "Proyecto residencial" — la zona que el boceto
   deja libre. */
.hero-inicio-externo .hero-contenido {
  position: absolute;
  top: clamp(120px, 20vh, 210px);
  left: clamp(20px, 4vw, 48px);
  align-items: flex-start;
  text-align: left;
}
.hero-inicio-externo .hero-nombre-proyecto,
.hero-inicio-externo .hero-btn-descubrir,
.hero-fase-indicador-inicio .hero-entrada-tipo { color: #1B1D1E; }
.hero-fase-indicador-inicio .hero-entrada-tipo { border-left-color: rgba(27, 29, 30, 0.35); }
/* Título de la portada en negrita (pedido de Ariel). */
.hero-inicio-externo .hero-nombre-proyecto { font-weight: 700; letter-spacing: -0.5px; }

/* Pie de portada: ubicación + año abajo a la izquierda, solo el logo abajo a la derecha (como la
   referencia). El boceto sube un poco para dejarle aire. */
.hero-portada-imagen { bottom: clamp(66px, 11vh, 120px); width: min(82vw, 1400px); max-height: 83vh; }
.hero-portada-pie {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* Alto fijo (--pie-alto, css/style.css). */
  box-sizing: border-box;
  height: var(--pie-alto);
  padding-top: 14px;
  border-top: 1px solid rgba(27, 29, 30, 0.15);
  font-family: var(--fuente-texto);
  color: #1B1D1E;
  text-align: left;
  transition: opacity 1.8s ease;
}
.hero-portada-pie-ubicacion {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 300;
  letter-spacing: 0.5px;
}
.hero-portada-pie-firma {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* Logo oscuro (machote/logos/logo-reifer-oscuro.webp: el mismo logo con el blanco pasado a negro
   de marca y el acento azul intacto). El archivo trae mucho margen transparente: mismo recorte
   que .hero-reifer-logo-recorte de la Fase 00. */
.hero-portada-pie-logo {
  position: relative;
  display: block;
  width: clamp(80px, 7.5vw, 110px);
  aspect-ratio: 348 / 127;
  overflow: hidden;
}
.hero-portada-pie-logo img {
  position: absolute;
  top: -79.5%;
  left: -41.1%;
  width: 177%;
  height: 275%;
  max-width: none;
  object-fit: contain;
}


.hero-inicio-externo .fase-indicador { z-index: 6; transition: opacity 0.4s ease; }

/* Volver a la portada desde el menú (irAPortada en js/main.js): la portada se desliza ya armada,
   sin los fundidos de la 00 ni del título. */
.portada-instantanea .hero-inicio-externo *,
.portada-instantanea .hero-fase-indicador,
.portada-instantanea .hero-fase-indicador * { transition: none !important; }

/* Recarga de página (ver faseTrasRecarga en js/main.js): se vuelve directo a la fase en la que se
   estaba, sin la inundación de la 00 ni ningún fundido de entrada. */
.sin-transiciones *,
.sin-transiciones *::before,
.sin-transiciones *::after { transition: none !important; }

/* Se oculta al avanzar a cualquier otra fase (ver irAFase en js/main.js) — vive fuera del
   elemento que desliza el paginado, así que si no se oculta a mano queda "pegado" arriba a la
   izquierda encima del indicador de la fase entrante. */
.hero-fase-indicador-oculto { opacity: 0; pointer-events: none; }

/* Las dos versiones (antes/después del clic) se apilan en la misma celda de grid y cruzan en
   fundido — nunca se insertan/retiran del layout, así la ubicación de abajo no salta de posición. */
.hero-fase-indicador-textos { display: grid; }

.hero-fase-indicador-textos > div {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 1;
  transition: opacity 1.6s ease 0.6s;
}

.hero-fase-indicador-textos > .hero-fase-indicador-nombre-oculto { opacity: 0; }

/* Tipo de proyecto en la entrada (antes del clic): dos renglones con la misma línea vertical
   fina que separa número y nombre en el título de cada fase — así se lee como parte del sistema
   de títulos y no como un texto suelto en la esquina (pedido de Ariel). */
.hero-entrada-tipo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--fuente-texto);
  font-weight: 300;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.1;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--texto);
}

.hero-contenido {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hero-nombre-proyecto {
  font-family: var(--fuente-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 5rem);
  text-transform: uppercase;
  color: var(--texto);
  opacity: 0;
  transform: translateY(12px);
  animation: hero-nombre-entrada 1.6s var(--ease-deliberate) 0.3s forwards;
}

@keyframes hero-nombre-entrada {
  to { opacity: 1; transform: translateY(0); }
}

/* Sin píldora de vidrio ni flecha rebotando (eso ya es la firma visual del cue-scroll de
   Altezza) — acá el CTA de entrada es solo tipografía + una línea vertical que respira, para
   que la portada de Villa Vento 2 no se sienta calcada de altezza-presentacion. */
.hero-btn-descubrir {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border: none;
  background: none;
  padding: 0;
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.hero-btn-descubrir-texto {
  position: relative;
  transition: letter-spacing 0.3s var(--ease-warm);
}

.hero-btn-descubrir:hover .hero-btn-descubrir-texto {
  letter-spacing: 3px;
}

.hero-btn-descubrir-linea {
  width: 1px;
  height: 34px;
  background: var(--acento);
  transform-origin: top;
  animation: hero-btn-descubrir-linea 2.2s ease-in-out infinite;
}

@keyframes hero-btn-descubrir-linea {
  0%, 100% { transform: scaleY(0.4); opacity: 0.45; }
  50% { transform: scaleY(1); opacity: 1; }
}

.hero-contenido-oculto { opacity: 0; transition: opacity 1.8s ease; pointer-events: none; }

/* ===== Inundación: revela la presentación institucional de la oficina ===== */
.hero-inundacion {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 2.8s var(--ease-deliberate), transform 2.8s var(--ease-deliberate), visibility 0s 2.8s;
  pointer-events: none;
  visibility: hidden;
}

.hero-inundacion.hero-inundacion-activa {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 2.8s var(--ease-deliberate), transform 2.8s var(--ease-deliberate);
}

.hero-inundacion-contenido {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.hero-inundacion-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 14s var(--ease-deliberate);
}

.hero-inundacion-activa .hero-inundacion-imagen { transform: scale(1); }

.hero-inundacion-columna-texto {
  position: relative;
  z-index: 1;
  width: min(780px, 55vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 8vh clamp(28px, 5vw, 64px);
  overflow-y: auto;
  text-align: left;
}

.hero-reifer-logo-recorte {
  position: relative;
  width: min(280px, 34vw);
  aspect-ratio: 348 / 127;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 1.4s ease 0.4s;
}

.hero-inundacion-activa .hero-reifer-logo-recorte { opacity: 1; }

.hero-reifer-logo {
  position: absolute;
  top: -79.5%;
  left: -41.1%;
  width: 177%;
  height: 275%;
  max-width: none;
  object-fit: contain;
  opacity: 0.95;
}

/* Corrido a la izquierda del botón de menú de fases (40px + 12px de separación), que vive en esa
   misma esquina y también aparece a partir de la Fase 00 — mismo offset que altezza-presentacion. */
.hero-inundacion-btn-volver {
  position: absolute;
  top: clamp(20px, 4vh, 40px);
  right: calc(clamp(20px, 4vw, 48px) + 40px + 12px);
  z-index: 2;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(242, 240, 234, 0.35);
  background: rgba(242, 240, 234, 0.14);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-radius: 999px;
  color: var(--texto);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s var(--ease-warm);
}

.hero-inundacion-btn-volver:hover {
  background: rgba(242, 240, 234, 0.28);
  transform: scale(1.08);
}

.hero-inundacion-texto {
  position: relative;
  max-width: 420px;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  color: var(--texto);
  opacity: 0;
  transition: opacity 1.6s ease 0.7s;
}

.hero-inundacion-activa .hero-inundacion-texto { opacity: 1; }

.hero-inundacion-divisor {
  width: 64px;
  height: 1px;
  background: var(--acento);
  opacity: 0;
  transition: opacity 1.4s ease 0.9s;
}

.hero-inundacion-activa .hero-inundacion-divisor { opacity: 1; }

.hero-cifras {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px 8px;
  margin-top: 48px;
  opacity: 0;
  transition: opacity 1.4s ease 1.4s;
}

.hero-inundacion-activa .hero-cifras { opacity: 1; }

.hero-cifras-item { display: flex; flex-direction: column; gap: 4px; }

.hero-cifras-valor {
  font-family: var(--fuente-display);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--texto);
  white-space: nowrap;
}

.hero-cifras-etiqueta {
  font-family: var(--fuente-texto);
  font-size: clamp(8px, 0.7vw, 10px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.hero-cifras-divisor {
  align-self: stretch;
  width: 1px;
  background: color-mix(in srgb, var(--texto-tenue) 45%, transparent);
}

/* ===== Reproductor de audio (genérico, reusado por cualquier fase con narración) ===== */
.fase-audio-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fase-audio-grupo-inline { width: 100%; pointer-events: auto; }

.fase-audio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(242, 240, 234, 0.35);
  background: rgba(29, 35, 38, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

.fase-audio-etiqueta {
  font-family: var(--fuente-texto);
  font-weight: 400;
  font-size: clamp(8px, 0.7vw, 11px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto);
}

.fase-audio-play {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--texto);
  color: var(--fondo);
  cursor: pointer;
  transition: transform 0.3s var(--ease-warm);
}

.fase-audio-play:hover { transform: scale(1.08); }

.fase-audio-play-icono { font-size: 10px; line-height: 1; margin-left: 1px; }
.fase-audio.reproduciendo .fase-audio-play-icono { margin-left: 0; }

.fase-audio-progreso {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 3px;
  border-radius: 999px;
  background: rgba(242, 240, 234, 0.25);
  cursor: pointer;
}

.fase-audio-progreso::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--texto);
  cursor: pointer;
}

.fase-audio-progreso::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--texto);
  cursor: pointer;
}

/* También por pantalla táctil (no solo por ancho, ver mismo criterio en css/style.css): la
   columna de texto usaba "width: min(780px, 55vw)" — pensado para escritorio, donde 55vw ya es
   ancho de sobra — y en un iPad (768-1024px) ese 55vw da una columna angosta (~420-560px) que ni
   siquiera es el ancho completo del propio dispositivo. Ahí el logo quedaba centrado verticalmente
   muy cerca del "QUIÉNES SOMOS" en pantallas bajas (landscape) y las cifras de abajo, que en la
   compu entran en una sola fila, se quebraban en dos porque no tenían ancho real para acomodarse
   — a pesar de que un iPad es más grande que un celular. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .hero-inundacion-columna-texto {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    /* Arriba deja lugar al título "00 | Inicio / Quiénes somos" (antes se encimaba con el logo);
       abajo, al "00/08 · Ver el proyecto" y al logo chico. */
    padding: 118px 24px 120px;
    /* Más aire entre logo, frase, divisor y cifras — a pedido de Ariel: sin el audio de
       introducción quedaba todo pegado arriba y la mitad de abajo vacía. */
    gap: clamp(22px, 3.4vh, 40px);
    overflow-y: auto;
  }
  /* Centrado vertical "seguro" en el alto que queda entre el título y la barra de abajo: con
     márgenes auto (no justify-content:center), si en una pantalla baja el contenido no entra,
     arranca arriba y se puede desplazar en vez de cortarse por encima. */
  .hero-inundacion-columna-texto > :first-child { margin-top: auto; }
  .hero-inundacion-columna-texto > :last-child { margin-bottom: auto; }

  .hero-reifer-logo-recorte { width: min(240px, 46vw); margin-bottom: clamp(4px, 1vh, 12px); }
  .hero-inundacion-texto { font-size: clamp(20px, 6vw, 26px); }
  .hero-cifras { flex-wrap: wrap; row-gap: 12px; }
}


/* Portada en celular: el boceto más grande (se recorta un poco a la derecha) para que no quede chico
   abajo con un gran vacío arriba — a pedido de Ariel, se veía muy chico. */
@media (max-width: 760px) {
  /* max-width:none pisa el "img{max-width:100%}" global (css/style.css): a partir de 100vw ese
     tope recortaba el ancho declarado acá y la imagen no crecía más allá del viewport. */
  .hero-portada-imagen { width: 172vw; max-width: none; right: -18vw; max-height: 66vh; bottom: 88px; }
  .hero-portada-pie-logo { width: 78px; }
}