/* Apheloria — portada (hero, conector, Nosotros) */

/* ═══ HERO ═══ */

/* ── HERO ── */
.hero-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0; overflow: hidden;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
}
.hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
  transform: scale(1);
  /* la cámara se acerca hacia aquí: cada foto apunta a sus luminarias con --foco */
  transform-origin: var(--foco, 50% 50%);
  filter: saturate(0.85);
  --velo: linear-gradient(180deg, rgba(var(--ink-rgb),0.44), rgba(var(--ink-rgb),0.62));
}
/* Cinco fotos aportadas por el cliente, en images/inicio/ y en WebP (las cinco juntas pesan
   289 KB; en JPEG eran 980). Las anteriores están en _revision/hero-anteriores/.
   El velo oscuro tiene que ser fuerte para que el título blanco se lea sobre todas.
   --foco es el punto al que se acerca la cámara, en coordenadas del hueco del hero (no de
   la foto): hay que mirar el encuadre ya recortado para ponerlo encima de las luminarias. */
/* Solo la primera trae la foto desde el CSS: es la que se ve al abrir y no puede esperar.
   Las otras cuatro llevan la ruta en data-foto dentro de index.html y se las pone
   js/inicio.js cuando la página ha terminado de cargar. Si fueran por CSS se bajarían las
   cinco de golpe —estar en opacity:0 no evita la descarga— y retrasarían a la primera. */
.hero-bg-img.bg-1 { --foco: 36% 66%; background-image: var(--velo), url('../images/inicio/hero-1-escalera-espiral.webp'); }
.hero-bg-img.bg-2 { --foco: 48% 45%; }
.hero-bg-img.bg-3 { --foco: 47% 45%; }
.hero-bg-img.bg-4 { --foco: 45% 50%; }
.hero-bg-img.bg-5 { --foco: 45% 24%; }
/* Un solo acercamiento continuo, sin frenada: dura más que la diapositiva a propósito, así
   sigue avanzando mientras entra la siguiente y no se ve parar la imagen. */
.hero-bg-img.active,
.hero-bg-img.saliendo { animation: zoomFoco 9s linear forwards; }
.hero-bg-img.active { opacity: 1; }
@keyframes zoomFoco { from { transform: scale(1); } to { transform: scale(1.22); } }

.hero-eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.297em; text-transform: uppercase;
  color: rgba(var(--white-rgb),0.65); margin-bottom: 1.8rem;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(4rem, 9vw, 9rem); font-weight: 100; line-height: 0.95;
  color: white; text-transform: uppercase; margin-bottom: 2.5rem;
  letter-spacing: 0.18em;
}
.hero-title-line {
  display: block; opacity: 0; transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.hero-title-line.light { color: rgba(var(--white-rgb),0.4); font-style: normal; font-weight: 200; }
.hero-bottom {
  position: absolute; bottom: 0.9cm; left: 0; right: 0;
  height: 14vh; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}


/* ═══ SECCIONES DE LA PORTADA ═══ */

/* ── SECCIONES DE LA PORTADA (hero + conector + Nosotros, una detrás de otra) ── */

.intro-section {
  width: 100%; min-height: calc(100dvh - var(--nav-h) - var(--footer-h));
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
}
/* Hero */
.intro-hero { align-items: flex-start; overflow: hidden; background: var(--bg-dark); }
.intro-hero .intro-inner {
  position: relative; z-index: 2;
  justify-content: flex-start; padding: 5.5rem 3rem calc(3.5rem + 1rem);
  height: 100%; width: 100%;
}
/* Conector */
.intro-connector { background: var(--bg-dark); overflow: hidden; }
.connector-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.connector-overlay {
  position: absolute; inset: 0;
  /* más suave en los bordes para no apagar el brillo del bicho, y más cerrado
     por el centro, que es donde va la frase */
  background: radial-gradient(ellipse at center, rgba(18,15,12,0.62) 0%,
                              rgba(18,15,12,0.46) 45%, rgba(18,15,12,0.34) 100%);
}
.connector-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  max-width: 760px; padding: 0 2rem;
}
.connector-mark {
  font-family: 'Inter', sans-serif;
  font-size: 3.5rem; font-weight: 200; line-height: 1;
  color: rgba(var(--white-rgb),0.18); display: block; margin-bottom: 1.2rem;
}
.connector-text {           /* misma tipografía que el "Más de 20 años…" del hero */
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem; letter-spacing: 0.297em; text-transform: uppercase;
  font-weight: 300; color: rgba(var(--white-rgb),0.65);
  line-height: 2.6;
}
.connector-bottom {
  position: absolute; bottom: calc(2.8rem + 0.9cm); left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(var(--white-rgb),0.55); font-family: 'Inter', sans-serif; font-weight: 300;
  cursor: pointer; transition: color 0.3s; white-space: nowrap;
}
.connector-bottom:hover { color: rgba(var(--white-rgb),0.9); }
/* Nosotros */
.intro-nosotros { background: var(--bg-dark); overflow: hidden; }
.intro-nosotros .intro-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 37vh 2rem 0; height: 100%; width: 100%;
}
/* Scroll-reveal animation */
.scroll-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.95s cubic-bezier(0.22,1,0.36,1),
              transform 0.95s cubic-bezier(0.22,1,0.36,1);
}
.scroll-reveal.in-view { opacity: 1; transform: translateY(0); }
.hero-bottom-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 0.6rem;
  opacity: 0;
  transition: opacity 0.7s ease 0.7s, color 0.25s;
}
body.lista .hero-bottom-cta { opacity: 1; }
.hero-bottom-cta:hover { color: var(--ink); }
.hero-bottom-cta-arrow {
  display: inline-block;
  animation: arrowBounce 1.8s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}
.hero-dots {
  position: absolute; bottom: calc(14vh + 1rem); left: 3rem;
  display: flex; gap: 0.6rem; z-index: 3;
}
.hero-dot {
  width: 20px; height: 2px; background: rgba(var(--white-rgb),0.35);
  transition: all 0.3s; cursor: pointer;
}
.hero-dot.active { background: white; width: 36px; }

body.lista .hero-eyebrow { opacity: 1; transform: translateX(0); }
body.lista .hero-title-line { opacity: 1; transform: translateX(0); }
body.lista .hero-title-line:nth-child(1) { transition-delay: 0.15s; }
body.lista .hero-title-line:nth-child(2) { transition-delay: 0.28s; }


/* ═══ SOBRE NOSOTROS ═══ */

/* ── SOBRE NOSOTROS ── */
.nosotros-bg {
  position: absolute; inset: 0;
  /* los dos focos quedan centrados y un poco por encima de la mitad */
  background: url('../images/inicio/nosotros-focos.jpg') center center / cover no-repeat;
  will-change: transform;
}
.nosotros-overlay {
  position: absolute; inset: 0;
  /* la foto es casi toda blanca: el velo tiene que ser fuerte para que se lea el texto
     en blanco. Se abre un poco por el centro, bajo los focos, como si lo alumbraran. */
  background: radial-gradient(ellipse 62% 58% at 50% 46%,
              rgba(12,10,8,0.48) 0%, rgba(12,10,8,0.66) 60%, rgba(12,10,8,0.78) 100%);
}
.nosotros-content {               /* centrado, justo debajo de los focos */
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; max-width: 640px; gap: 1.15rem;
}
.nosotros-eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.317em; text-transform: uppercase;
  color: rgba(var(--white-rgb),0.5); font-weight: 300;
}
.nosotros-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.8rem); font-weight: 100;
  color: white; letter-spacing: 0.1em; line-height: 1.1;
  text-transform: uppercase;
}
.nosotros-title em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: rgba(var(--accent-rgb),0.95); font-weight: 400; }
.nosotros-desc {
  font-size: clamp(0.82rem, 1.05vw, 1rem); line-height: 1.9;
  color: rgba(var(--white-rgb),0.72); font-weight: 300; max-width: 460px;
}
.nosotros-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.nosotros-values {
  font-size: 0.6875rem; letter-spacing: 0.213em; text-transform: uppercase;
  color: rgba(var(--accent-rgb),0.65); font-weight: 300;
}

/* ═══ RESPONSIVE ═══ */

@media (max-width: 900px) {
  .hero-dots { left: 1.5rem; }
}
@media (max-width: 900px) {
  /* En vertical, "cover" se come los lados y deja fuera un foco. Se reduce la foto
     para que entre el conjunto, y el hueco que queda lleva el mismo tono que su borde
     inferior, así no se ve el corte: el velo va por encima de todo. */
  .nosotros-bg {
    background-size: 185% auto; background-position: center 14%;
    background-color: #eceef1;
  }
  .intro-nosotros .intro-inner { padding-top: 36vh; }
}

@media (max-width: 640px) {
  /* los saltos de línea de la frase están pensados para pantalla ancha:
     en móvil dejan líneas sueltas, mejor que fluya */
  .connector-text br { display: none; }
  /* 13vw + 0.18em de espaciado se salía de la pantalla y cortaba la última A de
     APHELORIA. Con 11vw y menos espaciado cabe entero hasta en un móvil pequeño. */
  .hero-title { font-size: clamp(1.9rem, 10vw, 4rem); letter-spacing: 0.06em; }
  .intro-nosotros .intro-inner { padding: 4rem 1.5rem 0; }
  .nosotros-content { width: 100%; }
}