/* ============================================================
   METANOIA — El Silencio que nos Habita
   styles.css  |  Sopensonomo Studio
   ============================================================
   TIPOGRAFÍAS (todas palo seco / sans-serif)
   · Display / Logo : Poiret One   — geométrico Art Nouveau, palo seco
   · Títulos sección: Josefin Sans — geométrico ligero, Art Déco/Nouveau
   · Cuerpo         : Raleway      — humanista, legible, elegante
   · Labels / Nav   : Josefin Sans — versión caps
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --midnight:   #060f1c;
  --deep-blue:  #0b1e35;
  --ocean:      #10294a;
  --mycelium:   #1a3a60;
  --teal:       #4a7a8c;
  --amber:      #c98843;
  --amber-dim:  rgba(201,136,67,.15);
  --cream:      #f0e8d0;
  --cream-70:   rgba(240,232,208,.7);
  --cream-50:   rgba(240,232,208,.5);
  --cream-20:   rgba(240,232,208,.2);
  --cream-08:   rgba(240,232,208,.08);
  --teal-30:    rgba(74,122,140,.3);
  --teal-15:    rgba(74,122,140,.15);

  --font-display: 'Poiret One', sans-serif;
  --font-heading: 'Josefin Sans', sans-serif;
  --font-body:    'Raleway', sans-serif;
  --font-label:   'Josefin Sans', sans-serif;

  --section-pad: clamp(4.5rem, 10vw, 8rem);
  --section-x:   clamp(1.5rem, 7vw, 6rem);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  background: var(--midnight);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.85;
  overflow-x: hidden;
  cursor: none;
}
img   { display:block; max-width:100%; height:auto; object-fit:cover; }
a     { color:inherit; text-decoration:none; }
button{ cursor:pointer; background:none; border:none; }

/* Grain texture */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:900; opacity:.38;
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ── CURSOR (solo desktop) ───────────────────────────────── */
.cursor {
  position:fixed; top:0; left:0;
  width:10px; height:10px; border-radius:50%;
  background:var(--cream); pointer-events:none;
  z-index:9999; transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-ring {
  position:fixed; top:0; left:0;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(240,232,208,.3);
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
}
@media (pointer:coarse) { .cursor,.cursor-ring { display:none; } body { cursor:auto; } }

/* ── SPORES ──────────────────────────────────────────────── */
.spore {
  position:absolute; border-radius:50%;
  background:var(--cream); opacity:0;
  animation:floatSpore var(--dur,8s) ease-in-out infinite var(--delay,0s);
}
@keyframes floatSpore {
  0%   { transform:translateY(0) scale(1); opacity:0; }
  20%  { opacity:var(--op,.12); }
  80%  { opacity:var(--op,.12); }
  100% { transform:translateY(-140px) scale(.2); opacity:0; }
}

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(26px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── DIVIDERS ────────────────────────────────────────────── */
.divider {
  height:1px;
  background:linear-gradient(to right, transparent, var(--teal), transparent);
  opacity:.3; margin:2.5rem 0;
}
.divider--amber {
  background:linear-gradient(to right, transparent, var(--amber), transparent);
  opacity:.4;
}

/* ── LABEL / EYEBROW ─────────────────────────────────────── */
.label {
  font-family: var(--font-label);
  font-size:.7rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--amber);
  display:block; margin-bottom:1rem;
  font-weight:600;
}

/* ══════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:1rem var(--section-x);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(6,15,28,.9);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-color:var(--teal-15);
}

.nav__logo {
  font-family:var(--font-display);
  font-size:clamp(1.1rem, 2.8vw, 1.5rem);
  letter-spacing:.1em; color:var(--cream); z-index:10;
}

.nav__links {
  display:flex; gap:2.2rem; list-style:none;
}
.nav__links a {
  font-family:var(--font-label);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-50); transition:color .2s; font-weight:600;
}
.nav__links a:hover { color:var(--amber); }

/* Hamburger button */
.hamburger {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px;
  padding:5px; z-index:600;
}
.hamburger span {
  display:block; height:1.5px; width:100%;
  background:var(--cream);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s, width .3s;
  transform-origin:center;
}
.hamburger span:nth-child(2) { width:65%; }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); width:100%; }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position:fixed; inset:0;
  background:rgba(6,15,28,.97);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  z-index:400;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.6rem;
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .4s, transform .4s;
}
.mobile-menu.open { opacity:1; pointer-events:all; transform:translateY(0); }
.mobile-menu__logo {
  font-family:var(--font-display);
  font-size:2rem; color:var(--cream); opacity:.18;
  position:absolute; top:1.8rem; left:50%; transform:translateX(-50%);
  letter-spacing:.12em;
}
.mobile-menu a {
  font-family:var(--font-label);
  font-size:1.1rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--cream-50); font-weight:600;
  transition:color .2s; position:relative;
}
.mobile-menu a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--amber); transition:width .3s;
}
.mobile-menu a:hover { color:var(--amber); }
.mobile-menu a:hover::after { width:100%; }

/* ══════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden; background:var(--midnight);
  padding:5rem var(--section-x) 3rem;
  gap:2rem;
}
.hero__spores { position:absolute; inset:0; pointer-events:none; }

.hero__mycelium {
  position:absolute; inset:0; pointer-events:none; opacity:.1;
}
.hero__mycelium path {
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:drawLine 5s ease forwards;
}
@keyframes drawLine { to { stroke-dashoffset:0; } }

.hero__ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(74,122,140,.11);
  left:50%; top:50%;
  animation:expandRing 7s ease-in-out infinite;
}
@keyframes expandRing {
  0%   { transform:translate(-50%,-50%) scale(.7); opacity:0; }
  50%  { opacity:.5; }
  100% { transform:translate(-50%,-50%) scale(1.65); opacity:0; }
}

/* Video wrapper */
.hero__video-wrap {
  position:relative; z-index:2;
  width:min(840px, 92vw);
  aspect-ratio:16/9;
  border:1px solid var(--teal-15);
  box-shadow:
    0 0 0 1px rgba(240,232,208,.04),
    0 28px 70px rgba(0,0,0,.75),
    0 0 100px rgba(74,122,140,.1);
  background:var(--ocean); overflow:hidden;
}
.hero__video-wrap iframe,
.hero__video-wrap video {
  width:100%; height:100%; display:block; border:0;
}

/* Poster image (when no video) */
.hero__video-poster {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.5;
}

/* Placeholder */
.hero__video-placeholder {
  position:absolute; inset:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1.1rem;
  background:radial-gradient(ellipse at 50% 60%, var(--mycelium), var(--midnight) 70%);
  cursor:pointer;
}
.hero__video-placeholder::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(74,122,140,.18), transparent 65%);
  animation:pulseGlow 3.5s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{opacity:.5} 50%{opacity:1} }

.hero__play {
  width:72px; height:72px; border-radius:50%;
  border:1.5px solid rgba(240,232,208,.5);
  display:flex; align-items:center; justify-content:center;
  background:rgba(240,232,208,.06); backdrop-filter:blur(10px);
  transition:transform .3s, border-color .3s, background .3s;
  position:relative; z-index:1;
}
.hero__video-placeholder:hover .hero__play {
  transform:scale(1.1); border-color:var(--amber); background:var(--amber-dim);
}
.hero__play svg { color:var(--cream); margin-left:4px; }

.hero__video-label {
  font-family:var(--font-label); font-weight:600;
  font-size:.6rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--cream-50);
  position:relative; z-index:1;
}

/* Copy block */
.hero__copy {
  position:relative; z-index:2;
  text-align:center;
  animation:fadeUp 1.4s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero__studio {
  font-family:var(--font-label); font-weight:600;
  font-size:.6rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--amber);
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin-bottom:.9rem;
}
.hero__studio::before, .hero__studio::after {
  content:''; display:block; height:1px; width:36px;
  background:var(--amber); opacity:.4;
}

.hero__title {
  font-family:var(--font-display);
  font-size:clamp(3rem, 8vw, 6rem);
  line-height:.95; letter-spacing:.08em; color:var(--cream);
  text-shadow:0 0 60px rgba(201,136,67,.14);
}

.hero__tagline {
  font-family:var(--font-heading); font-weight:300;
  font-size:clamp(.9rem, 2vw, 1.15rem);
  color:var(--cream-50); letter-spacing:.12em;
  text-transform:uppercase; margin-top:.7rem;
}

/* Scroll indicator */
.hero__scroll {
  display:flex; flex-direction:column;
  align-items:center; gap:.5rem; z-index:2;
  margin-top:.5rem;
  animation:fadeUp 1s ease 1.5s both;
}
.hero__scroll span {
  font-family:var(--font-label); font-weight:600;
  font-size:.52rem; letter-spacing:.44em;
  text-transform:uppercase; color:var(--cream-20);
}
.hero__scroll-line {
  width:1px; height:44px;
  background:linear-gradient(to bottom, transparent, var(--cream));
  opacity:.3; animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100%{ opacity:.3; transform:scaleY(1); }
  50%    { opacity:.65; transform:scaleY(1.12); }
}

/* ══════════════════════════════════════════════════════════
   SHARED SECTION
   ════════════════════════════════════════════════════════ */
.section {
  padding:var(--section-pad) var(--section-x);
  position:relative;
}
.section__inner { max-width:1080px; margin:0 auto; }
.section__header { margin-bottom:2.8rem; }

.section__heading {
  font-family:var(--font-heading);
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  line-height:1.08; font-weight:300; letter-spacing:.06em; text-transform:uppercase;
}
.section__heading em {
  font-style:normal; color:var(--cream-50); font-weight:100;
}

/* ══════════════════════════════════════════════════════════
   SINOPSIS
   ════════════════════════════════════════════════════════ */
.sinopsis {
  background:linear-gradient(180deg, var(--midnight), var(--deep-blue) 55%, var(--midnight));
}
.sinopsis__grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center;
}
.sinopsis__quote {
  border-left:2px solid var(--amber);
  padding-left:2rem;
  font-family:var(--font-heading); font-weight:300;
  font-size:clamp(1.1rem, 2vw, 1.35rem);
  line-height:1.75; color:var(--cream);
  letter-spacing:.02em;
}
.sinopsis__body {
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  line-height:1.9; color:var(--cream-70);
  font-weight:300;
}

/* ══════════════════════════════════════════════════════════
   LOGLINE — ARCH CARDS
   ════════════════════════════════════════════════════════ */
.logline { background:var(--ocean); }

.logline__intro {
  max-width:620px;
  font-size:clamp(1rem, 1.7vw, 1.12rem);
  color:var(--cream-70); line-height:1.88;
  margin-bottom:3.5rem; font-weight:300;
}

.logline__cards {
  display:grid; grid-template-columns:1fr 1.15fr 1fr;
  gap:1.4rem; align-items:end;
}

.arch-card {
  border-radius:50% 50% 6px 6px / 44% 44% 6px 6px;
  border:1px solid var(--teal-15);
  padding:3rem 1.8rem 2.2rem;
  background:rgba(10,25,48,.5);
  backdrop-filter:blur(12px);
  transition:border-color .35s, transform .35s, box-shadow .35s;
  text-align:center; position:relative; overflow:hidden;
}
.arch-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(74,122,140,.1), transparent 65%);
  opacity:0; transition:opacity .4s;
}
.arch-card:hover { transform:translateY(-5px); }
.arch-card:hover::before { opacity:1; }

.arch-card--featured {
  border-color:rgba(201,136,67,.55);
  background:rgba(14,34,64,.65);
  box-shadow:0 0 40px rgba(201,136,67,.1), inset 0 1px 0 rgba(201,136,67,.18);
}
.arch-card--featured::before {
  opacity:1;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,136,67,.09), transparent 60%);
}
.arch-card--featured:hover { transform:translateY(-7px); box-shadow:0 20px 50px rgba(201,136,67,.16); }

.arch-card__icon { font-size:2rem; margin-bottom:1.1rem; }
.arch-card__phase {
  font-family:var(--font-label); font-weight:600;
  font-size:.55rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--amber); margin-bottom:.6rem;
}
.arch-card__title {
  font-family:var(--font-heading); font-weight:300; letter-spacing:.05em;
  font-size:1.1rem; text-transform:uppercase; margin-bottom:.8rem;
}
.arch-card--featured .arch-card__title { font-size:1.25rem; }
.arch-card__text {
  font-size:.95rem; line-height:1.7; color:var(--cream-50); font-weight:300;
}

/* ══════════════════════════════════════════════════════════
   ARTBOOK — CAROUSEL
   ════════════════════════════════════════════════════════ */
.artbook {
  background:linear-gradient(180deg, var(--midnight), var(--deep-blue));
  overflow:hidden;
}
.carousel__track-wrap { overflow:hidden; }
.carousel__track {
  display:flex; gap:1.5rem;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.carousel__slide {
  flex:0 0 auto;          /* ancho lo define el contenido, no el track */
  min-width: 180px;
  max-width: 520px;       /* tope para imágenes muy panorámicas */
  height: 320px;          /* altura fija igual para todas */
  position:relative;
  background:var(--ocean); border:1px solid var(--teal-15);
  overflow:hidden; cursor:pointer;
  transition:border-color .3s, box-shadow .3s;
}
.carousel__slide:hover { border-color:rgba(201,136,67,.4); }

/* La imagen ocupa toda la altura y su ancho natural */
.carousel__slide-img {
  height:100%; width:auto;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.carousel__slide:hover .carousel__slide-img { transform:scale(1.04); }

/* Fallback emoji — cuadrado */
.carousel__slide-inner {
  width:240px; height:100%;
  display:flex; align-items:center; justify-content:center; font-size:5rem;
  background:linear-gradient(135deg, var(--ocean), var(--mycelium));
}

.carousel__slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,15,28,.95) 0%, rgba(6,15,28,.15) 50%, transparent 100%);
  opacity:0; transition:opacity .4s;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem;
}
.carousel__slide:hover .carousel__slide-overlay { opacity:1; }
.carousel__slide-tag {
  font-family:var(--font-label); font-weight:600;
  font-size:.52rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(201,136,67,.3);
  display:inline-block; padding:.15rem .5rem; margin-bottom:.5rem;
}
.carousel__slide-title {
  font-family:var(--font-heading); font-weight:300;
  font-size:1rem; letter-spacing:.04em;
}

.carousel__controls {
  display:flex; align-items:center; justify-content:flex-end;
  gap:1rem; margin-top:1.8rem;
}
.carousel__dots { display:flex; gap:.5rem; flex:1; }
.carousel__dot {
  width:22px; height:2px; background:var(--teal-15); border:none;
  transition:background .3s, width .3s; cursor:pointer;
}
.carousel__dot.active { background:var(--amber); width:38px; }

.carousel__btn {
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--teal-15);
  background:var(--cream-08); color:var(--cream-50);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s, background .2s;
}
.carousel__btn:hover { border-color:var(--amber); color:var(--amber); background:var(--amber-dim); }
.carousel__btn:disabled { opacity:.22; pointer-events:none; }

/* ══════════════════════════════════════════════════════════
   PROCESO / BITÁCORA
   ════════════════════════════════════════════════════════ */
.proceso { background:var(--midnight); }
.proceso__grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.proceso__item {
  height: 260px;
  position:relative; overflow:hidden;
  background:var(--ocean); border:1px solid var(--teal-15);
  cursor:pointer; transition:border-color .3s, transform .4s;
}
.proceso__item:hover { border-color:rgba(201,136,67,.45); transform:scale(1.02); z-index:1; }

.proceso__item-img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s ease;
}
.proceso__item:hover .proceso__item-img { transform:scale(1.06); }

/* Fallback emoji */
.proceso__item-inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; font-size:2.5rem;
  background:linear-gradient(135deg, var(--deep-blue), var(--ocean));
}
.proceso__item-overlay {
  position:absolute; inset:0;
  background:rgba(6,15,28,.8);
  display:flex; align-items:center; justify-content:center; padding:.6rem;
  opacity:0; transition:opacity .35s;
}
.proceso__item:hover .proceso__item-overlay { opacity:1; }
.proceso__item-label {
  font-family:var(--font-heading); font-weight:300;
  font-size:.78rem; text-align:center; line-height:1.4; color:var(--cream);
}

/* ══════════════════════════════════════════════════════════
   PARALLAX INTERLUDE
   ════════════════════════════════════════════════════════ */
.parallax-wrap {
  position:relative; height:55vh; min-height:360px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.parallax-bg { position:absolute; inset:-20%; background:radial-gradient(ellipse at 40% 60%, var(--mycelium), var(--midnight) 55%); will-change:transform; }
.parallax-l1 { position:absolute; inset:-20%; will-change:transform; opacity:.07; }
.parallax-l2 { position:absolute; inset:-20%; will-change:transform; opacity:.14; }
.parallax-l3 { position:absolute; inset:-20%; will-change:transform; opacity:.05; font-size:8rem; display:flex; align-items:center; justify-content:space-around; padding:0 12%; }
.parallax-content { position:relative; z-index:2; text-align:center; padding:2rem 1.5rem; }
.parallax-quote {
  font-family:var(--font-heading); font-weight:300;
  font-size:clamp(1.15rem, 3.2vw, 2rem);
  line-height:1.55; color:var(--cream);
  text-shadow:0 2px 40px rgba(0,0,0,.85);
  max-width:680px; letter-spacing:.04em;
}
@media (prefers-reduced-motion:reduce) {
  .parallax-bg,.parallax-l1,.parallax-l2,.parallax-l3 { transform:none!important; }
}

/* ══════════════════════════════════════════════════════════
   CINÉMÁTICA / MONTAJE
   ════════════════════════════════════════════════════════ */
.cinematica {
  background:linear-gradient(180deg, var(--midnight), var(--deep-blue) 50%, var(--midnight));
}
.cinematica__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start;
}
.cinematica__body {
  font-size:clamp(1rem, 1.6vw, 1.12rem);
  line-height:1.9; color:var(--cream-70); font-weight:300;
}
.phase-list { display:flex; flex-direction:column; gap:2.8rem; }
.phase-item { position:relative; padding-left:3rem; }
.phase-item::before {
  content:''; position:absolute; left:0; top:.3rem;
  width:18px; height:18px; border-radius:50%;
  border:1px solid var(--amber); transition:background .3s, box-shadow .3s;
}
.phase-item:hover::before { background:var(--amber); box-shadow:0 0 18px rgba(201,136,67,.5); }
.phase-item::after {
  content:''; position:absolute; left:8.5px; top:22px;
  width:1px; height:calc(100% + 1.5rem);
  background:linear-gradient(to bottom, rgba(201,136,67,.35), transparent);
}
.phase-item:last-child::after { display:none; }
.phase-item__step {
  font-family:var(--font-label); font-weight:600;
  font-size:.54rem; letter-spacing:.38em; color:var(--amber); margin-bottom:.35rem;
}
.phase-item__title {
  font-family:var(--font-heading); font-weight:300; letter-spacing:.06em;
  font-size:1.1rem; text-transform:uppercase; margin-bottom:.4rem;
}
.phase-item__text {
  font-size:.95rem; line-height:1.7; color:var(--cream-50); font-weight:300;
}

/* ══════════════════════════════════════════════════════════
   TEAM
   ════════════════════════════════════════════════════════ */
.team {
  background:linear-gradient(180deg, var(--deep-blue), var(--midnight));
}
.team__grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.team__card {
  text-align:center; padding:2.2rem 1.4rem;
  border:1px solid var(--teal-15); background:rgba(10,25,48,.3);
  transition:border-color .3s, transform .35s;
}
.team__card:hover { border-color:rgba(201,136,67,.4); transform:translateY(-5px); }
.team__avatar {
  width:86px; height:86px; border-radius:50%;
  background:var(--mycelium); border:2px solid var(--teal-15);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.2rem; font-size:2rem; overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
/* Avatar image */
.team__avatar img { width:100%; height:100%; object-fit:cover; }
.team__card:hover .team__avatar { border-color:var(--amber); box-shadow:0 0 28px rgba(201,136,67,.2); }
.team__role {
  font-family:var(--font-label); font-weight:600;
  font-size:.53rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--amber); margin-bottom:.35rem;
}
.team__name {
  font-family:var(--font-heading); font-weight:300; letter-spacing:.04em;
  font-size:1.05rem; margin-bottom:.25rem;
}
.team__handle { font-size:.82rem; color:var(--cream-20); letter-spacing:.03em; }
.team__closing { margin-top:5rem; text-align:center; }
.team__closing-quote {
  font-family:var(--font-heading); font-weight:300; letter-spacing:.04em;
  font-size:clamp(1rem, 2.2vw, 1.5rem);
  line-height:1.65; color:var(--cream-50);
  max-width:640px; margin:0 auto;
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════ */
.lightbox {
  position:fixed; inset:0;
  background:rgba(6,15,28,.96); backdrop-filter:blur(24px);
  z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.lightbox.active { opacity:1; pointer-events:all; }
.lightbox__close {
  position:absolute; top:1.5rem; right:1.5rem;
  font-family:var(--font-label); font-weight:600;
  font-size:.58rem; letter-spacing:.3em;
  color:var(--cream-50); cursor:pointer; transition:color .2s;
}
.lightbox__close:hover { color:var(--amber); }
.lightbox__body {
  display:flex; flex-direction:column;
  align-items:center; gap:1.2rem;
  max-width:90vw; text-align:center;
}
.lightbox__frame {
  /* Tamaño lo define la imagen — no forzamos aspect-ratio */
  max-width: min(90vw, 1100px);
  max-height: 82vh;
  width: auto; height: auto;
  background:var(--deep-blue); border:1px solid var(--teal-15);
  display:flex; align-items:center; justify-content:center; font-size:5rem;
  overflow:hidden;
  transform:scale(.94); transition:transform .45s;
  /* Para emojis (fallback sin imagen) */
  min-width: 180px; min-height: 180px;
}
.lightbox__frame img {
  display:block;
  max-width: min(90vw, 1100px);
  max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;  /* muestra la imagen completa sin recortar */
}
.lightbox.active .lightbox__frame { transform:scale(1); }
.lightbox__title {
  font-family:var(--font-heading); font-weight:300; letter-spacing:.06em;
  font-size:1.1rem; text-transform:uppercase;
}
.lightbox__desc {
  font-size:.9rem; color:var(--cream-50);
  max-width:380px; line-height:1.65; font-weight:300;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.footer {
  background:var(--midnight);
  border-top:1px solid var(--teal-15);
  padding:3.5rem var(--section-x);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.footer__logo {
  font-family:var(--font-display);
  font-size:1.8rem; color:var(--amber); letter-spacing:.12em;
}
.footer__sub {
  font-family:var(--font-heading); font-weight:300; letter-spacing:.08em;
  font-size:.9rem; color:var(--cream-20);
}
.footer__copy {
  font-family:var(--font-label); font-weight:600;
  font-size:.5rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(240,232,208,.12); margin-top:.4rem;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  ≤ 900px
   ════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  :root {
    --section-pad: clamp(3.5rem, 8vw, 6rem);
    --section-x:   clamp(1.5rem, 5vw, 3rem);
  }
  .sinopsis__grid      { grid-template-columns:1fr; gap:2.5rem; }
  .logline__cards      { grid-template-columns:1fr; gap:1.2rem; }
  .arch-card           { border-radius:16px; padding:2rem 1.5rem 1.8rem; }
  .arch-card--featured { order:-1; }
  .cinematica__grid    { grid-template-columns:1fr; gap:3rem; }
  .team__grid          { grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .proceso__grid       { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .proceso__item       { height: 200px; }
  .carousel__slide     { height: 240px; max-width: 420px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  ≤ 768px  → muestra hamburguesa
   ════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .nav__links { display:none; }
  .hamburger  { display:flex; }
  .nav        { padding:.85rem 1.25rem; }
}

@media (max-width:600px) {
  :root {
    --section-pad: clamp(3rem, 8vw, 5rem);
    --section-x:   1.25rem;
  }

  body { font-size:1rem; }

  .hero               { padding:5rem 1.25rem 2.5rem; gap:1.5rem; }
  .hero__video-wrap   { width:97vw; }
  .hero__title        { font-size:clamp(2.8rem, 14vw, 4.2rem); }

  .section__heading   { font-size:clamp(1.6rem, 7vw, 2.2rem); }

  .carousel__slide    { height: 200px; max-width: 88vw; }
  .carousel__controls { margin-top:1.2rem; }

  .proceso__grid      { grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .proceso__item      { height: 150px; }

  .team__grid         { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .team__card         { padding:1.6rem 1rem; }

  .logline__cards     { grid-template-columns:1fr; }

  .phase-item         { padding-left:2.2rem; }

  .parallax-quote     { font-size:1.1rem; }
  .parallax-wrap      { height:50vh; min-height:300px; }

  .lightbox__frame    { width:92vw; }
  .lightbox__close    { top:1rem; right:1rem; }

  .footer             { padding:2.5rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — XS  ≤ 380px
   ════════════════════════════════════════════════════════ */
@media (max-width:380px) {
  .hero__title        { font-size:2.8rem; }
  .hero__studio       { font-size:.5rem; letter-spacing:.28em; }
  .proceso__grid      { grid-template-columns:repeat(2,1fr); }
  .team__grid         { grid-template-columns:1fr 1fr; gap:.7rem; }
  .team__card         { padding:1.3rem .8rem; }
  .team__name         { font-size:.92rem; }
  .arch-card          { padding:1.8rem 1.2rem 1.6rem; }
}