/* ============================================
   SYNERGY CLONING — Quiet Editorial Luxury
   ============================================ */

:root{
  --ivory:#F7F5F0;
  --stone:#E7E3DA;
  --mist:#DCE7F4;
  --navy:#1D3D82;
  --deep:#18315F;
  --brass:#B79A63;
  --graphite:#4F4E4B;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .8s;
  --dur-m: 1.2s;
  --dur-l: 1.6s;

  --container: 1220px;
  --gutter: 6vw;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--graphite);
  font-family:'Jost', sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,.bg-img{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

button{ font-family:inherit; background:none; border:none; cursor:pointer; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- Typography ---------- */
h1,h2,h3{
  margin:0;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--deep);
}

.h2{
  font-size:clamp(1.9rem, 4.2vw, 3rem);
  font-weight:300;
  line-height:1.25;
}
.h2--light{ color:var(--ivory); }
.h2 em{ font-style:normal; color:var(--brass); }

.eyebrow{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 1.5rem;
}
.eyebrow--light{ color:var(--brass); }
.eyebrow__dash{ width:28px; height:1px; background:var(--brass); display:inline-block; }

p{ line-height:1.75; }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1.05rem 1.9rem;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--brass);
  color:var(--deep);
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
  z-index:0;
}
.btn span, .btn svg{ position:relative; z-index:1; transition:transform .35s var(--ease); }
.btn:hover{ color:var(--ivory); }
.btn:hover::before{ transform:scaleX(1); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(.97); }
.btn--outline{ background:transparent; }
.btn--light{ color:var(--ivory); border-color:var(--brass); }
.btn--light:hover{ color:var(--deep); }
.hero__content .btn{ color:var(--ivory); }
.hero__content .btn:hover{ color:var(--ivory); }
.btn--solid{ background:var(--brass); color:var(--ivory); border-color:var(--brass); }
.btn--solid::before{ display:none; }
.btn--solid:hover{ background:transparent; color:var(--brass); transition:background .45s var(--ease), color .45s var(--ease); }
.btn--brass{ width:100%; justify-content:center; margin-top:.5rem; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  border-bottom:1px solid var(--brass);
  padding-bottom:.3rem;
  transition:opacity .4s var(--ease);
}
.link-arrow svg{ transition:transform .35s var(--ease); }
.link-arrow:hover{ opacity:.6; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:1.4rem 0;
  transition:background var(--dur-m) var(--ease), padding var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.nav.is-scrolled{
  background:rgba(247,245,240,.92);
  backdrop-filter:blur(10px);
  padding:.9rem 0;
  box-shadow:0 1px 0 rgba(24,49,95,.08);
}
.nav__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav__logo{
  position:relative;
  display:flex;
  align-items:center;
  height:28px;
}
.nav__logo-img{
  height:28px;
  width:auto;
  display:block;
  transition:opacity var(--dur-m) var(--ease);
}
.nav__logo-img--dark{
  position:absolute;
  left:0; top:0;
  opacity:0;
}
.nav.is-scrolled .nav__logo-img--light{ opacity:0; }
.nav.is-scrolled .nav__logo-img--dark{ opacity:1; }

.nav__links{
  display:flex;
  align-items:center;
  gap:1.5rem;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ivory);
  text-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:color var(--dur-m) var(--ease), text-shadow var(--dur-m) var(--ease);
}
.nav.is-scrolled .nav__links{ color:var(--deep); text-shadow:none; }
.nav__links a{ opacity:.85; transition:opacity var(--dur-s) var(--ease); }
.nav__links a:hover{ opacity:1; }
.nav__cta{
  position:relative;
  overflow:hidden;
  border:1px solid var(--brass);
  padding:.6rem 1.2rem;
  color:var(--brass) !important;
  opacity:1 !important;
  transition:color .4s var(--ease), transform .22s var(--ease);
}
.nav__cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
  z-index:0;
}
.nav__cta:hover{ color:var(--ivory) !important; }
.nav__cta:hover::before{ transform:scaleX(1); }
.nav__cta:active{ transform:scale(.96); }

.nav__lang{ position:relative; }
.nav__lang-toggle{
  display:flex;
  align-items:center;
  gap:.4rem;
  color:inherit;
  opacity:.85;
  transition:opacity var(--dur-s) var(--ease);
}
.nav__lang-toggle:hover{ opacity:1; }
.nav__lang-caret{ transition:transform var(--dur-s) var(--ease); }
.nav__lang.is-open .nav__lang-caret{ transform:rotate(180deg); }
.nav__lang-menu{
  list-style:none;
  margin:0;
  padding:.5rem 0;
  position:absolute;
  top:calc(100% + .8rem);
  right:0;
  background:var(--ivory);
  border:1px solid var(--stone);
  min-width:140px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), visibility var(--dur-s);
  box-shadow:0 12px 30px rgba(24,49,95,.12);
  z-index:20;
}
.nav__lang.is-open .nav__lang-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav__lang-option{
  display:block;
  width:100%;
  text-align:left;
  padding:.55rem 1.1rem;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--deep);
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.nav__lang-option:hover{ background:var(--stone); }
.nav__lang-option.is-active{ color:var(--brass); font-weight:500; }

.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:26px;
  padding:.5rem 0;
}
.nav__burger span{
  height:1px;
  background:var(--ivory);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
  transition:background var(--dur-m) var(--ease), transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav.is-scrolled .nav__burger span{ background:var(--deep); filter:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--deep);
}
.hero__media{
  position:absolute; inset:0;
  background-image:var(--bg-d);
  background-size:cover;
  background-position:center 30%;
  opacity:0;
  transition:opacity 2.2s var(--ease);
}
.hero__media.is-active{ opacity:1; }
.hero__media:first-child{
  transform:scale(1.06);
  animation:heroSettle 2.4s var(--ease) forwards;
}
@keyframes heroSettle{ to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0;
  /* filigrana oscura y translúcida: la imagen siempre se ve,
     el texto siempre contrasta */
  background:
    linear-gradient(180deg, rgba(24,49,95,.4) 0%, rgba(24,49,95,.22) 38%, rgba(24,49,95,.5) 78%, rgba(24,49,95,.68) 100%);
}

/* Hero: versión mobile — imagen propia optimizada para vertical
   + refuerzo de contraste para legibilidad del texto */
@media (max-width: 680px){
  .hero__media{
    background-image:var(--bg-m);
    background-position:center 22%;
  }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(24,49,95,.55) 0%, rgba(24,49,95,.35) 32%, rgba(24,49,95,.58) 70%, rgba(24,49,95,.78) 100%);
  }
}

.hero__content{
  position:relative;
  z-index:2;
  padding:0 var(--gutter) 3rem;
  max-width:820px;
}
.hero__headline{
  display:flex;
  flex-direction:column;
  font-size:clamp(2.6rem, 9vw, 5.2rem);
  line-height:1.02;
  letter-spacing:.01em;
}
.hero__line{ color:var(--ivory); font-weight:300; }
.hero__line strong{ font-weight:500; }
.hero__line--accent{ color:var(--brass); font-weight:400; }

.hero__rule{
  width:64px; height:1px;
  background:var(--brass);
  margin:1.6rem 0;
}
.hero__sub{
  color:var(--stone);
  font-size:1.3rem;
  max-width:460px;
  margin:0 0 2.2rem;
}
.hero__sub strong{ color:var(--ivory); font-weight:500; }

.hero__footer{
  position:relative; z-index:2;
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding:0 var(--gutter) 2.6rem;
  color:var(--ivory);
}
.hero__stat{ font-size:1.6rem; color:var(--brass); font-weight:400; }
.hero__stat-label{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,245,240,.7); }

/* =========================================================
   CASOS
   ========================================================= */
.casos{ padding:8rem 0 7rem; background:var(--ivory); }

.casos__slider{
  margin:4rem 0 0;
}
.casos__track{
  display:flex;
  gap:2.6rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.4rem;
  scrollbar-width:none;
}
.casos__track::-webkit-scrollbar{ display:none; }
.caso-card{
  background:var(--stone);
  padding:0 0 2.2rem;
  flex:0 0 calc((100% - 2*2.6rem)/3);
  min-width:0;
  scroll-snap-align:start;
  opacity:.62;
  transform:scale(.97);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.caso-card.is-active{ opacity:1; transform:scale(1); }
.caso-card--pending{ opacity:.4; }
.caso-card--pending.is-active{ opacity:.6; }
.casos__nav{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin:2.2rem 0 3.2rem;
}
.casos__arrow{
  width:44px; height:44px;
  border:1px solid var(--brass);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--brass);
  transition:background .35s var(--ease), color .35s var(--ease), transform .25s var(--ease);
}
.casos__arrow:hover{ background:var(--brass); color:var(--ivory); transform:scale(1.06); }
.casos__arrow:active{ transform:scale(.92); }
@media (max-width:980px){
  .caso-card{ flex:0 0 calc((100% - 2.6rem)/2); }
}
@media (max-width:560px){
  .caso-card{ flex:0 0 86%; }
}
.caso-card__img{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  margin-bottom:1.6rem;
}
.caso-card__img::before{
  content:'';
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  background-image:inherit;
  background-size:cover;
  background-position:center;
  filter:saturate(.94);
  transform:scale(1);
  transition:transform .8s var(--ease);
}
.caso-card:hover .caso-card__img::before{ transform:scale(1.06); }

.caso-card__img--clickable{ cursor:pointer; }
.caso-card__img--clickable::after{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  background:rgba(24,49,95,0);
  transition:background var(--dur-s) var(--ease);
}
.caso-card__img--clickable:hover::after{ background:rgba(24,49,95,.18); }

.caso-card__play{
  position:absolute;
  z-index:2;
  bottom:1rem;
  right:1rem;
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  background:rgba(24,49,95,.55);
  backdrop-filter:blur(2px);
  color:var(--ivory);
  border:1px solid rgba(247,245,240,.5);
  transition:background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.caso-card__play svg{ transform:translateX(1px); }
.caso-card__play--external svg{ transform:none; }
.caso-card__img--clickable:hover .caso-card__play{ background:var(--brass); border-color:var(--brass); transform:scale(1.08); }
.caso-card__img--clickable:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.caso-card__play:active{ transform:scale(.94); }
.caso-card h3{
  font-size:1.15rem;
  padding:0 1.8rem;
  margin-bottom:.35rem;
}
.caso-card__meta{
  padding:0 1.8rem;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 1.1rem;
}
.caso-card__quote{
  padding:0 1.8rem;
  font-style:italic;
  color:var(--graphite);
  margin:0 0 1.4rem;
}
.caso-card .link-arrow{ margin:0 1.8rem; }

/* =========================================================
   PROCESO
   ========================================================= */
.proceso{
  background:var(--deep);
  padding:8rem 0 6rem;
  text-align:center;
}
.proceso__title{
  letter-spacing:.35em;
  font-weight:300;
  margin-bottom:4.5rem;
  text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,2.6rem);
}

.pasos{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1.2rem;
  margin-bottom:4rem;
  text-align:center;
  position:relative;
}
.paso{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--stone);
}
.paso__icon{
  width:74px; height:74px;
  border:1px solid var(--brass);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--brass);
  margin-bottom:1.2rem;
}
.paso__num{
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--brass);
  margin-bottom:.6rem;
}
.paso h3{
  color:var(--ivory);
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:.6rem;
}
.paso p{
  font-size:.85rem;
  color:var(--mist);
  max-width:180px;
  line-height:1.6;
}

/* =========================================================
   MINI GALERIA
   ========================================================= */
.galeria{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:var(--deep);
}
.galeria__item{ margin:0; position:relative; }
.galeria__img{
  aspect-ratio:1/1.05;
  background-size:cover;
  background-position:center;
  filter:grayscale(.15) saturate(.85);
  transition:filter var(--dur-l) var(--ease);
}
.galeria__item:hover .galeria__img{ filter:grayscale(0) saturate(1); }
.galeria__item figcaption{
  position:absolute;
  left:1.4rem; bottom:1.2rem;
  color:var(--ivory);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* =========================================================
   PAUSA EDITORIAL
   ========================================================= */
.pausa{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.pausa__media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.pausa__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,49,95,.86), rgba(24,49,95,.72));
}
.pausa__content{
  position:relative; z-index:2;
  text-align:center;
  max-width:760px;
  padding:6rem var(--gutter);
}
.pausa__stat{
  font-size:clamp(2.2rem,5.6vw,3.4rem);
  letter-spacing:.03em;
  color:var(--brass);
  font-weight:300;
  margin:0 0 .5rem;
}
.pausa__logo{
  height:64px;
  width:auto;
  margin:0 auto .9rem;
  opacity:1;
}
@media (max-width:560px){
  .pausa__logo{ height:46px; }
}
.pausa__year{
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--stone);
  margin:0 0 1.3rem;
}
.pausa__quote{
  font-size:clamp(1.5rem,3.6vw,2.3rem);
  font-weight:300;
  color:var(--ivory);
  line-height:1.45;
  margin:0 0 1.6rem;
}
.pausa__support{
  color:var(--mist);
  font-size:1rem;
  margin:0;
}

/* =========================================================
   POR QUÉ SYNERGY
   ========================================================= */
.porque{ background:var(--stone); padding:8rem 0 7rem; }
.porque__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4rem;
  align-items:center;
  margin-bottom:5.5rem;
}
.porque__img{
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
}
.porque__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem;
  border-top:1px solid rgba(79,78,75,.2);
  padding-top:3rem;
}
.porque__col svg{ color:var(--brass); margin-bottom:1.1rem; }
.porque__col h3{
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:.8rem;
}
.porque__col p{ font-size:.92rem; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{ position:relative; padding:8rem 0; overflow:hidden; }
.contacto__media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.contacto__scrim{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(24,49,95,.96), rgba(29,61,130,.93));
}
.contacto__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
}
.contacto__text .h2{ margin:1.1rem 0 1.6rem; }
.contacto__lead{ color:var(--mist); max-width:400px; margin-bottom:2.4rem; }
.contacto__info{ display:flex; flex-direction:column; gap:.9rem; }
.contacto__info a{
  display:flex; align-items:center; gap:.7rem;
  color:var(--ivory);
  font-size:.92rem;
  opacity:.9;
  transition:opacity var(--dur-s) var(--ease);
}
.contacto__info a:hover{ opacity:1; color:var(--brass); }

.contacto__form{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.contacto__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.contacto__form label{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist);
}
.contacto__form input,
.contacto__form select{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(220,231,244,.3);
  padding:.7rem .1rem;
  color:var(--ivory);
  font-family:'Jost', sans-serif;
  font-size:.95rem;
  font-weight:300;
  transition:border-color var(--dur-s) var(--ease);
}
.contacto__form input::placeholder{ color:rgba(220,231,244,.4); }
.contacto__form input:focus,
.contacto__form select:focus{ outline:none; border-color:var(--brass); }
.contacto__form select option{ color:var(--deep); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--deep); padding:5.5rem 0 0; }
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:3rem;
  padding-bottom:4rem;
  border-bottom:1px solid rgba(220,231,244,.14);
}
.footer__logo{ height:56px; width:auto; }
.footer__col h4{
  color:var(--brass);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  margin:0 0 1.3rem;
}
.footer__col{ display:flex; flex-direction:column; gap:.85rem; }
.footer__col a{ color:var(--mist); font-size:.9rem; opacity:.85; transition:opacity var(--dur-s) var(--ease); }
.footer__col a:hover{ opacity:1; color:var(--brass); }
.footer__social{ display:flex; gap:.9rem; }
.footer__social a{
  width:38px; height:38px;
  border:1px solid rgba(220,231,244,.25);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--mist);
}
.footer__social a:hover{ border-color:var(--brass); color:var(--brass); }
.footer__bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.08em;
  color:rgba(220,231,244,.5);
  padding:1.8rem var(--gutter);
}
.footer__credit{
  font-size:.66rem;
  letter-spacing:.06em;
  color:rgba(220,231,244,.32);
}

/* =========================================================
   PRÓXIMAMENTE — placeholder page
   ========================================================= */
.proximamente{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--deep);
  text-align:center;
}
.proximamente__media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  animation:heroSettle 2.4s var(--ease) forwards;
}
.proximamente__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,49,95,.55) 0%, rgba(24,49,95,.8) 100%);
}
.proximamente__content{
  position:relative;
  z-index:2;
  padding:0 var(--gutter);
  max-width:34rem;
}
.proximamente__content .eyebrow{ justify-content:center; }
.proximamente h1{
  color:var(--ivory);
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  font-weight:500;
  letter-spacing:.01em;
  margin:.7rem 0 1.1rem;
}
.proximamente__content p{
  color:rgba(247,245,240,.75);
  font-size:1rem;
  line-height:1.6;
  margin:0 0 2.2rem;
}
.proximamente__content .btn{ margin:0 auto; }

@media (prefers-reduced-motion: reduce){
  .proximamente__media{ animation:none; transform:none; }
}

/* =========================================================
   VIDEO LIGHTBOX
   ========================================================= */
.video-lightbox{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 5vw;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-m) var(--ease), visibility 0s linear var(--dur-m);
}
.video-lightbox.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur-m) var(--ease), visibility 0s linear;
}
.video-lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(24,49,95,.9);
}
.video-lightbox__box{
  position:relative;
  z-index:2;
  width:100%;
  max-width:920px;
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.97);
  transition:transform var(--dur-m) var(--ease);
}
.video-lightbox.is-open .video-lightbox__box{ transform:scale(1); }
.video-lightbox__box video{
  width:100%;
  height:100%;
  display:block;
}
.video-lightbox__box iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}
.video-lightbox__close{
  position:absolute;
  top:-2.6rem;
  right:0;
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ivory);
  border:1px solid rgba(247,245,240,.4);
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.video-lightbox__close:hover{ background:var(--brass); border-color:var(--brass); }
.video-lightbox__loading{
  position:absolute; inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-s) var(--ease), visibility 0s linear var(--dur-s);
}
.video-lightbox__loading.is-visible{
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur-s) var(--ease), visibility 0s linear;
}
.video-lightbox__spinner{
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid rgba(247,245,240,.25);
  border-top-color:var(--brass);
  animation:videoSpin .9s linear infinite;
}
@keyframes videoSpin{ to{ transform:rotate(360deg); } }

/* =========================================================
   PAGE HEADER — encabezado liviano para páginas internas
   ========================================================= */
.page-header{
  position:relative;
  min-height:64vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
}
.page-header__media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.page-header__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,49,95,.5) 0%, rgba(24,49,95,.4) 45%, rgba(24,49,95,.72) 100%);
}
.page-header__content{
  position:relative; z-index:2;
  max-width:640px;
  padding:8rem var(--gutter) 3.5rem;
}
.page-header .eyebrow{ justify-content:center; }
.page-header .eyebrow span:last-child{ color:var(--brass); }
.page-header .h2{ color:var(--brass); max-width:100%; }
.page-header__lead{
  color:var(--ivory);
  opacity:.92;
  max-width:34rem;
  margin:1.4rem auto 0;
  line-height:1.75;
  font-size:1.05rem;
}
@media (max-width:640px){
  .page-header{ min-height:52vh; }
  .page-header__content{ padding:7rem var(--gutter) 3rem; }
}

/* =========================================================
   PROSE — bloques de texto largo (Ciencia & Laboratorio, etc.)
   ========================================================= */
.prose{ max-width:42rem; padding:1rem 0 5rem; }
.prose p{ margin:0 0 1.4rem; line-height:1.85; color:var(--graphite); }
.prose p:last-child{ margin-bottom:0; }
.prose p strong{ color:var(--deep); font-weight:500; }
.prose-banner{
  aspect-ratio:21/8;
  background-size:cover;
  background-position:center;
  margin:0 0 3.5rem;
}
.prose__coda{
  margin-top:2.6rem;
  padding-top:2.6rem;
  border-top:1px solid rgba(24,49,95,.12);
}
.prose__coda p{
  font-size:1.35rem;
  color:var(--deep);
  font-weight:300;
  line-height:1.55;
  margin:0 0 .25rem;
}
@media (max-width:760px){
  .prose-banner{ aspect-ratio:4/3; }
}

/* =========================================================
   SERVICIO BLOCK — Servicios
   ========================================================= */
.servicio-block{
  padding:3.2rem 0;
  border-top:1px solid rgba(24,49,95,.12);
  display:grid;
  grid-template-columns:.42fr 1fr;
  gap:2.5rem;
}
.servicio-block:last-of-type{ border-bottom:1px solid rgba(24,49,95,.12); }
.servicio-block__title{
  font-size:1.4rem;
  color:var(--deep);
  font-weight:400;
  letter-spacing:.01em;
}
.servicio-block__text{ color:var(--graphite); line-height:1.8; max-width:36rem; margin:0; }
.servicios__cta{ padding:4rem 0 6rem; }
@media (max-width:760px){
  .servicio-block{ grid-template-columns:1fr; gap:.9rem; }
}

/* =========================================================
   EQUIPO — intro + grilla de staff
   ========================================================= */
.equipo-intro{ padding-bottom:3rem; }
.equipo-groups{ padding-bottom:6rem; }
.equipo-group{ margin:3.4rem 0 0; }
.equipo-group__title{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
  padding-bottom:1.4rem;
  border-bottom:1px solid rgba(24,49,95,.14);
  margin:0 0 2rem;
}
.staff-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.8rem 2.4rem;
}
.staff-card{ display:flex; flex-direction:row; align-items:center; gap:1.1rem; }
.staff-card__avatar{
  flex:0 0 auto;
  width:72px; height:72px;
  aspect-ratio:1;
  border-radius:4px;
  background:var(--stone);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--deep);
}
.staff-card__info{ display:flex; flex-direction:column; gap:.4rem; }
.staff-card__name{ font-size:.95rem; font-weight:500; color:var(--deep); line-height:1.3; }
.staff-card__role{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--graphite);
  opacity:.8;
}
@media (max-width:640px){
  .staff-grid{ grid-template-columns:1fr; gap:1.6rem; }
}

/* =========================================================
   UBICACIONES
   ========================================================= */
.ubicacion-block{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:3.2rem;
  align-items:center;
  padding:4.5rem 0;
  border-top:1px solid rgba(24,49,95,.12);
}
.ubicacion-block:last-of-type{ border-bottom:1px solid rgba(24,49,95,.12); }
.ubicacion-block:nth-child(even) .ubicacion-block__img{ order:2; }
.ubicacion-block__img{
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
}
.ubicacion-block__name{ font-size:1.6rem; font-weight:400; color:var(--deep); margin:0 0 1rem; }
.ubicacion-block__desc{ color:var(--graphite); line-height:1.8; margin:0 0 1.6rem; max-width:32rem; }
.ubicacion-block__contact{
  font-size:.82rem;
  color:var(--graphite);
  opacity:.85;
  margin:0 0 1.8rem;
}
@media (max-width:760px){
  .ubicacion-block{ grid-template-columns:1fr; gap:1.6rem; padding:3rem 0; }
  .ubicacion-block:nth-child(even) .ubicacion-block__img{ order:0; }
}

/* =========================================================
   FAQ — accordion
   ========================================================= */
.faq-list{
  max-width:760px;
  border-top:1px solid rgba(24,49,95,.14);
  padding-bottom:6rem;
}
.faq-item{ border-bottom:1px solid rgba(24,49,95,.14); }
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  padding:1.7rem 0;
  text-align:left;
  font-size:1.05rem;
  font-weight:400;
  color:var(--deep);
}
.faq-item__q svg{ flex-shrink:0; transition:transform var(--dur-s) var(--ease); color:var(--brass); }
.faq-item.is-open .faq-item__q svg{ transform:rotate(45deg); }
.faq-item__a{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height var(--dur-m) var(--ease), opacity var(--dur-s) var(--ease);
}
.faq-item.is-open .faq-item__a{ opacity:1; }
.faq-item__a p{
  margin:0;
  padding:0 0 1.8rem;
  color:var(--graphite);
  line-height:1.75;
  max-width:640px;
}

/* =========================================================
   FADE ANIMATIONS — subtle, slow, controlled
   ========================================================= */
.fade-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.fade-up.in-view{ opacity:1; transform:translateY(0); }
.fade-up[data-delay="1"]{ transition-delay:.12s; }
.fade-up[data-delay="2"]{ transition-delay:.24s; }
.fade-up[data-delay="3"]{ transition-delay:.36s; }
.fade-up[data-delay="4"]{ transition-delay:.48s; }
.fade-up[data-delay="5"]{ transition-delay:.6s; }

@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1; transform:none; transition:none; }
  .hero__media{ animation:none; transform:none; transition:none; }
  .hero__media.is-active{ opacity:1; }
}

/* =========================================================
   RESPONSIVE — mobile first base already fluid;
   these breakpoints expand the same experience
   ========================================================= */
@media (max-width: 980px){
  :root{ --gutter:7vw; }

  .nav__links{
    position:fixed;
    inset:0 0 0 auto;
    width:min(78vw,340px);
    height:100vh;
    background:var(--ivory);
    color:var(--deep);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1.9rem;
    padding:6rem 3rem 2rem;
    transform:translateX(100%);
    transition:transform var(--dur-m) var(--ease);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ color:var(--deep) !important; font-size:1rem; }
  .nav__cta{ margin-top:1rem; }
  .nav__lang-toggle{ font-size:1rem; }
  .nav__lang-menu{ right:auto; left:0; }
  .nav__burger{ display:flex; }
  .nav__burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2){ opacity:0; }
  .nav__burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .casos__grid{ grid-template-columns:1fr; gap:3.2rem; }
  .pasos{ grid-template-columns:1fr 1fr; gap:3rem 1.5rem; text-align:left; }
  .paso{ align-items:flex-start; }
  .paso p{ max-width:none; }
  .galeria{ grid-template-columns:1fr; }
  .porque__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .porque__cols{ grid-template-columns:1fr 1fr; }
  .contacto__grid{ grid-template-columns:1fr; gap:3.5rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2.5rem; }
}

@media (max-width: 560px){
  .pasos{ grid-template-columns:1fr; }
  .porque__cols{ grid-template-columns:1fr; gap:2.2rem; }
  .contacto__row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__footer{ flex-direction:column; align-items:flex-start; gap:.2rem; }
}