/* =========================================================
   Dr. Miguel Ángel Pérez López — hoja propia
   Traumatología y Ortopedia · Cirugía de Pie y Tobillo
   Construida a mano: Bootstrap solo aporta el grid (.container,
   .row, .col-*). Todo lo visual vive aquí.
   ========================================================= */

:root{
  --navy:        #1d3a4a;
  --navy-deep:   #142a36;
  --teal:        #6f9fad;
  --teal-deep:   #4c7887;
  --papel:       #ffffff;
  --papel-tint:  #f6f4ef;
  --ink:         #1c2a30;
  --ink-soft:    #5b6b72;
  --linea:       #e4e1d8;

  --display: "Fraunces", "Georgia", serif;
  --texto:   "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.2,.7,.3,1);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;
}

/* ---------- reset ligero ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0; color: var(--ink); background: var(--papel);
  font-family: var(--texto); font-size:16px; line-height:1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--teal-deep); text-decoration:none; }
a:hover{ color: var(--navy); }
h1,h2,h3,h4{ font-family: var(--display); color: var(--ink); margin:0 0 .4em; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color: var(--ink-soft); }
/* énfasis editorial: cursiva discreta sobre la palabra clave de una frase,
   en vez de negritas o mayúsculas. En encabezados usa el color de marca. */
em{ font-style:italic; }
h1 em, h2 em, h3 em{ color: var(--teal-deep); font-style:italic; }
/* Sobre fondos oscuros (navy) el teal-deep se pierde por poco contraste;
   ahí la cursiva usa el teal claro, que sí resalta sobre el fondo. */
.section--navy h2 em, .section--navy h3 em, .cta-band h3 em{ color: var(--teal); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--teal); outline-offset: 3px;
}

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

.container{ max-width:1180px; }

/* ---------- utilidades de sección ---------- */
.section{ padding: var(--space-6) 0; }
.section--tint{ background: var(--papel-tint); }
.section--navy{ background: var(--navy); color:#fff; }
.section--navy h2, .section--navy h3{ color:#fff; }
.section--navy p{ color: rgba(255,255,255,.72); }

.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color: var(--teal-deep);
  padding-bottom:6px; border-bottom:2px solid var(--teal);
  margin-bottom: var(--space-2);
}
.section--navy .eyebrow{ color: var(--teal); border-bottom-color: rgba(255,255,255,.35); }

.section-head{ max-width:640px; margin:0 0 var(--space-4); }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.2vw, 38px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:2px; font-weight:600; font-size:15px;
  letter-spacing:.02em; border:1.5px solid transparent; cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--teal-deep); color:#fff; }
.btn-primary:hover{ background: var(--navy); color:#fff; }
.btn-outline{ background:transparent; border-color: currentColor; color: inherit; }
.btn-outline:hover{ background: rgba(255,255,255,.1); color: inherit; }
.btn-outline-dark{ background:transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-dark:hover{ background: var(--navy); color:#fff; }
.btn-sm{ padding:10px 20px; font-size:13px; }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding: 22px 0; transition: padding .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.hdr__inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); }
/* Bootstrap añade un pseudo-elemento ::before/::after (clearfix) a .container;
   al volver flex a .hdr__inner (que también es .container), esos pseudo-elementos
   se cuelan como "items" invisibles del flex y descuadran el space-between
   (logo y botón hamburguesa quedan flotando lejos de los bordes). Se anulan aquí. */
.hdr__inner::before, .hdr__inner::after{ content:none; }
.hdr__logo{ display:flex; align-items:center; }
.hdr__logo img{ height:78px; width:auto; transition: height .25s var(--ease), opacity .2s; }
.hdr__logo .is-dark{ display:none; }

.hdr__nav{ display:flex; align-items:center; gap: var(--space-4); }
.hdr__menu{ display:flex; gap: 28px; }
.hdr__menu a{
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.02em;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.hdr__menu a:hover, .hdr__menu a.is-active{ color:#fff; border-bottom-color: var(--teal); }

.hdr__toggle{
  display:none; width:44px; height:44px; border:0; background:transparent;
  position:relative; cursor:pointer; z-index:1002; border-radius:4px;
}
.hdr__toggle span{
  position:absolute; left:11px; right:11px; height:2px; background:#fff; border-radius:2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease), background .2s;
}
.hdr__toggle span:nth-child(1){ top:16px; }
.hdr__toggle span:nth-child(2){ top:22px; }
.hdr__toggle span:nth-child(3){ top:28px; }
.hdr__toggle.is-active span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hdr__toggle.is-active span:nth-child(2){ opacity:0; }
.hdr__toggle.is-active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* estado desplazado: barra sólida y compacta */
.hdr.is-scrolled{
  padding: 10px 0; background: rgba(255,255,255,.97); box-shadow: 0 2px 18px rgba(20,42,54,.08);
}
.hdr.is-scrolled .hdr__logo img{ height:56px; }
.hdr.is-scrolled .hdr__logo .is-light{ display:none; }
.hdr.is-scrolled .hdr__logo .is-dark{ display:block; }
.hdr.is-scrolled .hdr__menu a{ color: var(--navy); }
.hdr.is-scrolled .hdr__menu a:hover, .hdr.is-scrolled .hdr__menu a.is-active{ color: var(--navy); border-bottom-color: var(--teal-deep); }
.hdr.is-scrolled .hdr__toggle span{ background: var(--navy); }

@media (max-width: 991px){
  .hdr__toggle{ display:block; }
  .hdr__nav{
    position:fixed; top:0; right:0; height:100vh; width:min(320px, 84vw);
    background: var(--navy-deep); flex-direction:column; align-items:flex-start;
    padding: 100px 32px 32px; gap: var(--space-4); z-index:1001;
    transform: translateX(100%); transition: transform .3s var(--ease);
    box-shadow: -12px 0 40px rgba(0,0,0,.25);
  }
  .hdr__nav.is-open{ transform:none; }
  .hdr__menu{ flex-direction:column; gap:22px; }
  .hdr__menu a{ font-size:17px; }
  .hdr__cta{ width:100%; justify-content:center; }

  /* el menú móvil siempre es oscuro por dentro: sus enlaces son SIEMPRE
     blancos, sin importar si el header (detrás) está en estado is-scrolled.
     Esta regla debe vivir SOLO dentro de este media query: si se aplica
     también en escritorio, gana por especificidad sobre el color navy del
     header desplazado y deja el texto del nav en blanco-sobre-blanco
     (invisible) cuando la barra ya tiene fondo claro. */
  .hdr__nav .hdr__menu a,
  .hdr.is-scrolled .hdr__nav .hdr__menu a{ color:#fff; }
  .hdr__nav .hdr__menu a:hover, .hdr__nav .hdr__menu a.is-active,
  .hdr.is-scrolled .hdr__nav .hdr__menu a:hover, .hdr.is-scrolled .hdr__nav .hdr__menu a.is-active{
    color:#fff; border-bottom-color: var(--teal);
  }
  .hdr__toggle.is-active span,
  .hdr.is-scrolled .hdr__toggle.is-active span{ background:#fff; }
}

/* fondo oscurecido detrás del panel móvil */
.hdr__scrim{
  position:fixed; inset:0; background:rgba(10,20,26,.5); z-index:999;
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
}
.hdr__scrim.is-visible{ opacity:1; pointer-events:auto; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; padding: 190px 0 120px; overflow:hidden;
  background: var(--navy-deep); /* respaldo mientras carga la foto */
  color:#fff;
}
/* Foto de fondo a sangre completa, con velo degradado para que el texto
   siga siendo legible sobre cualquier parte de la imagen. */
.hero__bgphoto{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position: 68% 22%;
  pointer-events:none;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg,
    rgba(20,42,54,.95) 0%,
    rgba(20,42,54,.88) 34%,
    rgba(20,42,54,.6) 60%,
    rgba(20,42,54,.38) 100%);
}
.hero__icon{
  position:absolute; right:-40px; top:8%; width:340px; opacity:.1; pointer-events:none; z-index:1;
}
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1fr; gap: var(--space-4); align-items:end; }
.hero__eyebrow{ color: var(--teal); }
.hero h1{
  color:#fff; font-size: clamp(38px, 5.4vw, 64px); line-height:1.05; margin-bottom: var(--space-3);
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.hero h1 em{ font-style:normal; display:block; color: var(--teal); }
.hero__lead{ font-size:18px; color: rgba(255,255,255,.88); max-width:560px; margin-bottom: var(--space-3); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom: var(--space-3); }
.hero__contact{ color: rgba(255,255,255,.88); font-size:15px; margin-bottom: var(--space-2); }
.hero__contact a{ color:#fff; font-weight:600; }
.hero__legal{ color: rgba(255,255,255,.6); font-size:12.5px; max-width:640px; }

@media (max-width: 767px){
  .hero{ padding: 150px 0 80px; }
  .hero__icon{ display:none; }
  .hero__bgphoto{ object-position: 62% 14%; }
  .hero__scrim{
    background: linear-gradient(180deg,
      rgba(20,42,54,.85) 0%,
      rgba(20,42,54,.9) 55%,
      rgba(20,42,54,.95) 100%);
  }
}

/* =========================================================
   STATS (franja de confianza justo tras el hero)
   ========================================================= */
.stats{ background: var(--papel-tint); padding: var(--space-4) 0; border-bottom:1px solid var(--linea); }
.stats__row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); text-align:center; }
.stats__number{ font-family: var(--display); font-size: clamp(26px, 3vw, 36px); color: var(--navy); font-weight:700; }
.stats__label{ font-size:13px; color: var(--ink-soft); margin-top:4px; }

@media (max-width: 767px){
  .stats__row{ grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-2); }
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.services__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.service-card{
  background:#fff; border:1px solid var(--linea); border-radius:4px; padding: 32px 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.service-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,42,54,.08); border-color: transparent; }
.service-card__icon{
  width:48px; height:48px; border-radius:50%; background: var(--papel-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  color: var(--teal-deep); font-size:20px;
}
.service-card h3{ font-size:18px; margin-bottom:8px; }
.service-card p{ font-size:14.5px; margin:0; }

@media (max-width: 991px){ .services__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px){ .services__grid{ grid-template-columns: 1fr; } }

/* =========================================================
   TRAYECTORIA (bio + experiencia quirúrgica)
   ========================================================= */
.bio__grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items:start; }
.bio__photos{ display:grid; grid-template-columns: 1fr; gap: var(--space-2); position:sticky; top:120px; }
.bio__photos img{ border-radius:4px; }
.bio__photos .is-secondary{ width:72%; margin-left:auto; margin-top:-40px; border:6px solid #fff; box-shadow: 0 18px 40px rgba(20,42,54,.16); position:relative; }

.bio__credentials{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-3) 0; }
.credential{ display:flex; gap:14px; }
.credential__icon{
  flex:none; width:38px; height:38px; border-radius:50%; background: var(--papel-tint);
  color: var(--teal-deep); display:flex; align-items:center; justify-content:center; font-size:16px;
}
.credential h4{ font-family: var(--texto); font-weight:700; font-size:14.5px; margin:0 0 3px; color: var(--ink); }
.credential p{ font-size:13.5px; margin:0; }

.surgical-note{
  margin-top: var(--space-4); padding-top: var(--space-4); border-top:1px solid var(--linea);
}
.surgical-note h3{ font-size:20px; }

@media (max-width: 991px){
  .bio__grid{ grid-template-columns:1fr; gap: var(--space-4); }
  .bio__photos{ position:static; max-width:420px; margin:0 auto; }
  .bio__credentials{ grid-template-columns:1fr; }
}

/* =========================================================
   TESTIMONIOS (carrusel propio, sin librería)
   ========================================================= */
.testi{ position:relative; overflow:hidden; }
.testi__icon{
  position:absolute; right:-40px; top:8%; width:300px; opacity:.1; pointer-events:none; z-index:0;
}
.testi .container{ position:relative; z-index:1; }
@media (max-width: 767px){ .testi__icon{ display:none; } }
.testi__quote-mark{ font-family: var(--display); font-size:64px; color: var(--teal); line-height:1; margin-bottom:8px; }
.testi__track-wrap{ max-width:760px; margin:0 auto; position:relative; }
.testi__track{ position:relative; min-height:64px; transition: height .4s var(--ease); }
.testi__slide{
  position:absolute; inset:0; opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none;
}
.testi__slide.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.testi__text{ font-size: clamp(18px, 2.1vw, 22px); color:#fff; font-family: var(--display); font-weight:500; line-height:1.5; }
.testi__name{ margin-top: var(--space-2); font-weight:700; color:#fff; font-size:15px; }
.testi__spec{ font-size:13px; color: rgba(255,255,255,.6); margin:0; }

.testi__nav{ display:flex; align-items:center; justify-content:center; gap: var(--space-3); margin-top: var(--space-3); }
.testi__arrow{
  width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s, border-color .2s;
}
.testi__arrow:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.testi__dots{ display:flex; gap:8px; }
.testi__dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.3); border:0; cursor:pointer; padding:0; }
.testi__dot.is-active{ background: var(--teal); }

.testi__link{ display:block; text-align:center; margin-top: var(--space-4); color: rgba(255,255,255,.75); font-size:14.5px; }
.testi__link:hover{ color:#fff; }

/* =========================================================
   UBICACIONES
   ========================================================= */
.locations__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.location-card{
  background:#fff; border:1px solid var(--linea); border-radius:4px; padding: var(--space-3);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.location-card:hover{ box-shadow: 0 16px 32px rgba(20,42,54,.08); transform: translateY(-3px); }
.location-card__icon{ color: var(--teal-deep); font-size:20px; margin-bottom:10px; }
.location-card h3{ font-size:17px; margin-bottom:8px; }
.location-card h3 a{ color: inherit; border-bottom:1.5px solid transparent; transition: color .2s, border-color .2s; }
.location-card h3 a:hover{ color: var(--teal-deep); border-bottom-color: var(--teal); }
.location-card p{ font-size:14px; margin:0 0 6px; }

@media (max-width: 767px){ .locations__grid{ grid-template-columns:1fr; } }

/* =========================================================
   ASEGURADORAS (cinta con scroll infinito)
   ========================================================= */
.insurers{ overflow:hidden; position:relative; }
.insurers::before, .insurers::after{
  content:""; position:absolute; top:0; bottom:0; width:44px; z-index:2; pointer-events:none;
}
.insurers::before{ left:0; background: linear-gradient(to right, var(--papel-tint), transparent); }
.insurers::after{ right:0; background: linear-gradient(to left, var(--papel-tint), transparent); }
.insurers__track{
  display:flex; align-items:center; width:max-content;
  gap: var(--space-3); animation: insurersScroll 26s linear infinite;
}
/* Los logos (tal cual los entregó el cliente) traen su propia tarjeta blanca
   incrustada, distinta entre sí. En vez de recortarles el fondo (lo que
   dañaba la calidad de PNGs comprimidos), se homogeneizan mostrándolos
   todos sobre una tarjeta blanca propia, del mismo tamaño, con esquinas
   redondeadas y sombra suave: se ve como una decisión de diseño ("insignia
   de aseguradora") y no como un fondo suelto que rompe la sección. */
.insurers__badge{
  display:flex; align-items:center; justify-content:center;
  height:96px; width:180px; flex:none;
  background:#fff; border-radius:12px; padding:20px 26px;
  box-shadow: 0 4px 18px rgba(20,42,54,.07);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.insurers__badge:hover{ box-shadow: 0 12px 28px rgba(20,42,54,.14); transform: translateY(-3px); }
.insurers__track img{
  height:auto; max-height:100%; width:auto; max-width:100%;
  filter:grayscale(1) opacity(.7);
  transition: filter .25s var(--ease);
}
.insurers__badge:hover img{ filter:none; }

@media (max-width: 767px){
  .insurers__track{ gap: var(--space-2); }
  .insurers__badge{ height:76px; width:148px; padding:14px 18px; }
  .insurers::before, .insurers::after{ width:26px; }
}

@keyframes insurersScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .insurers__track{ animation: none; flex-wrap:wrap; justify-content:center; width:auto; }
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items:start; }
.contact-list{ margin-bottom: var(--space-3); }
.contact-list li{ display:flex; gap:16px; padding: 16px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-list li:last-child{ border-bottom:0; }
.contact-list .ico{ flex:none; width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); color: var(--teal); display:flex; align-items:center; justify-content:center; }
.contact-list strong{ display:block; color:#fff; font-size:14.5px; margin-bottom:2px; }
.contact-list span, .contact-list a{ color: rgba(255,255,255,.75); font-size:14.5px; }
.contact-list a:hover{ color:#fff; }

.contact-map{ border-radius:4px; overflow:hidden; box-shadow: 0 20px 44px rgba(0,0,0,.28); }
.contact-map iframe{ width:100%; height:340px; border:0; display:block; }

@media (max-width: 767px){ .contact__grid{ grid-template-columns:1fr; gap: var(--space-4); } }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background: var(--navy-deep); color: rgba(255,255,255,.7); padding: var(--space-5) 0 var(--space-3); }
.foot__grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.foot__logo{ height:64px; width:auto; margin-bottom: var(--space-3); }
.ig-icon{ width:18px; height:18px; }
.foot__tagline{ font-size:14px; color: rgba(255,255,255,.65); max-width:320px; }
.foot__tagline a{ color: rgba(255,255,255,.8); border-bottom:1px solid rgba(255,255,255,.3); }
.foot__tagline a:hover{ color:#fff; border-bottom-color:#fff; }
.foot__legal{ font-size:12px; color: rgba(255,255,255,.45); margin-top: var(--space-2); }
.foot__social{ display:flex; gap:10px; margin-top: var(--space-2); }
.foot__social a{
  width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.foot__social a:hover{ background:#fff; color: var(--navy-deep); }
.foot h4{ font-family: var(--texto); font-size:14px; font-weight:700; color:#fff; letter-spacing:.04em; text-transform:uppercase; margin-bottom: var(--space-2); }
.foot__links li{ margin-bottom:10px; }
.foot__links a{ color: rgba(255,255,255,.65); font-size:14.5px; }
.foot__links a:hover{ color:#fff; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top: var(--space-3); text-align:center; font-size:13px; color: rgba(255,255,255,.5); }
.foot-bottom a{ color: rgba(255,255,255,.7); }

.scroll-top{
  position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%;
  background: var(--teal-deep); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(20,42,54,.3); opacity:0; pointer-events:none;
  transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s;
  z-index: 900;
}
.scroll-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.scroll-top:hover{ background: var(--navy); }

@media (max-width: 767px){
  .foot__grid{ grid-template-columns:1fr; gap: var(--space-3); }
}

/* =========================================================
   Banda CTA intermedia
   ========================================================= */
.cta-band{ background: var(--navy); color:#fff; padding: var(--space-4) 0; }
.cta-band__row{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); flex-wrap:wrap; }
.cta-band h3{ color:#fff; font-size: clamp(20px,2.4vw,26px); margin:0; max-width:640px; }

/* =========================================================
   Animaciones: entrada del hero + reveal al hacer scroll
   ========================================================= */
@keyframes heroRise{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform:none; }
}
.hero__eyebrow, .hero h1, .hero__lead, .hero__actions, .hero__contact, .hero__legal{
  opacity:0; animation: heroRise .8s var(--ease) forwards;
}
.hero__eyebrow{ animation-delay: .05s; }
.hero h1{ animation-delay: .15s; }
.hero__lead{ animation-delay: .3s; }
.hero__actions{ animation-delay: .42s; }
.hero__contact{ animation-delay: .52s; }
.hero__legal{ animation-delay: .6s; }

@keyframes heroIconIn{
  from{ opacity:0; transform: scale(.94) rotate(-2deg); }
  to{ opacity:.1; transform:none; }
}
.hero__icon{ animation: heroIconIn 1.4s var(--ease) forwards; }

@keyframes heroPhotoIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform:none; }
}

.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-group .reveal:nth-child(1){ transition-delay:0s; }
.reveal-group .reveal:nth-child(2){ transition-delay:.08s; }
.reveal-group .reveal:nth-child(3){ transition-delay:.16s; }
.reveal-group .reveal:nth-child(4){ transition-delay:.24s; }
.reveal-group .reveal:nth-child(5){ transition-delay:.32s; }
.reveal-group .reveal:nth-child(6){ transition-delay:.4s; }
.reveal-group .reveal:nth-child(7){ transition-delay:.48s; }
.reveal-group .reveal:nth-child(8){ transition-delay:.56s; }
.reveal-group .reveal:nth-child(9){ transition-delay:.64s; }

@media (prefers-reduced-motion: reduce){
  .hero__eyebrow, .hero h1, .hero__lead, .hero__actions, .hero__contact, .hero__legal, .hero__icon, .hero__photo{
    animation: none !important; opacity:1 !important; transform:none !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* franja de cifras: el número cuenta hacia arriba vía JS; aquí solo el look */
.stats__number{ font-variant-numeric: tabular-nums; }
.stats.reveal-group .stats__item{
  opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stats.reveal-group.is-visible .stats__item{ opacity:1; transform:none; }
.stats.reveal-group .stats__item:nth-child(1){ transition-delay:0s; }
.stats.reveal-group .stats__item:nth-child(2){ transition-delay:.1s; }
.stats.reveal-group .stats__item:nth-child(3){ transition-delay:.2s; }
.stats.reveal-group .stats__item:nth-child(4){ transition-delay:.3s; }

/* =========================================================
   Skip link (accesibilidad)
   ========================================================= */
.skip-link{
  position:absolute; left:-999px; top:auto; background:#fff; color:var(--navy);
  padding:12px 20px; z-index:2000; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; top:0; }