:root {
  --dark: #05060B;
  --dark-2: #11131A;
  --light: #FFFFFF;
  --text: #222222;
  --muted: #666A72;
  --silver: #A7A9AC;
  --pink: #E88FA0;
  --pink-strong: #D9788E;
  --soft: #F8F6F4;
  --border: #E7E2DF;
  --shadow: 0 22px 60px rgba(17, 18, 23, .08);
  --radius: 18px;
  --max: 1180px;
  --header-h: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Montserrat", system-ui, sans-serif; color: var(--text); background: var(--light); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
section[id], header[id] { scroll-margin-top: calc(var(--header-h) + 10px); }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; background: #fff; color: #05060B; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 92px 0; }
.section-dark { background: var(--dark); color: var(--light); }
.section-light { background: #fff; }
.section-soft { background: linear-gradient(180deg, #FBFAF9 0%, #F7F4F2 100%); }

h1,h2,h3,p { margin: 0; }
h1,h2 { font-family: "Cardo", serif; font-weight: 400; line-height: 1.07; letter-spacing: -.025em; }
h1 { font-size: clamp(3rem, 5.2vw, 5.2rem); }
h2 { font-size: clamp(2.35rem, 3.8vw, 3.9rem); }
h3 { font-size: 1rem; }
.eyebrow { color: var(--pink); font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 19px; }
.tagline { color: #F09AAC; font-size: clamp(1.12rem, 1.65vw, 1.38rem); font-weight: 700; line-height: 1.45; margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--pink); max-width: 680px; letter-spacing: -.01em; }
.lead { max-width: 650px; color: #D4D6DA; font-size: clamp(.98rem, 1.2vw, 1.08rem); margin-top: 22px; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(5,6,11,.94); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.07); }
.nav-shell { min-height: var(--header-h); display: grid; grid-template-columns: 240px 1fr auto; gap: 30px; align-items: center; }
.brand { display: inline-flex; align-items: center; width: fit-content; }
.brand img { width: 218px; height: auto; object-fit: contain; }
.main-nav { display: flex; justify-self: center; align-items: center; gap: 36px; }
.nav-link { color: #ECEDEF; font-size: .9rem; position: relative; padding: 28px 0 24px; }
.nav-link::after { content:""; position:absolute; left:50%; bottom:17px; width:0; height:2px; background:var(--pink); transform:translateX(-50%); transition:.25s ease; }
.nav-link:hover::after,.nav-link.is-active::after { width:28px; }
.menu-toggle { display:none; background:transparent; border:0; padding:10px; }
.menu-toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.25s ease; }

.btn { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:9px; padding:0 22px; border:1px solid transparent; font-weight:700; font-size:.9rem; transition:transform .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--pink); color:#fff; box-shadow:0 12px 30px rgba(232,143,160,.19); }
.btn-primary:hover { background:var(--pink-strong); box-shadow:0 16px 34px rgba(232,143,160,.28); }
.btn-outline { border-color:rgba(255,255,255,.72); color:#fff; background:transparent; }
.btn-outline:hover { border-color:var(--pink); color:var(--pink); }
.btn-dark { width:100%; background:var(--dark); color:#fff; }
.btn-dark:hover { background:#151720; }
.btn-icon { width:19px; height:19px; flex:0 0 19px; object-fit:contain; }

.hero { position:relative; overflow:hidden; padding:58px 0 68px; min-height:auto; display:flex; align-items:center; }
.hero-grid { display:grid; grid-template-columns:1.06fr .94fr; align-items:center; gap:74px; position:relative; z-index:2; }
.hero-copy { min-width:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero-brand { display:flex; justify-content:center; align-items:center; min-width:0; }
.hero-logo-frame { width:min(100%, 520px); height:480px; display:flex; align-items:center; justify-content:center; position:relative; }
.hero-logo-frame::before { content:""; position:absolute; inset:9%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.055), transparent 66%); filter:blur(8px); }
.hero-logo-frame img { position:relative; z-index:1; width:100%; max-height:100%; height:auto; object-fit:contain; filter:drop-shadow(0 24px 44px rgba(0,0,0,.36)); }
.hero-lines,.cta-lines { position:absolute; pointer-events:none; opacity:.4; }
.hero-lines { right:-10%; bottom:-20%; width:58%; height:54%; }
.hero-lines::before,.cta-lines::before { content:""; position:absolute; inset:0; background:repeating-radial-gradient(ellipse at center,transparent 0 13px,rgba(232,143,160,.38) 14px 15px,transparent 16px 27px); transform:rotate(-9deg) scale(1.25,.5); }

.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.trajectory-card { margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#f8f4f1; aspect-ratio:1/1; position:relative; }
.trajectory-card img { width:100%; height:100%; object-fit:cover; object-position:center; }
.about-copy > p:not(.eyebrow) { color:#4F5156; margin-top:18px; }
.feature-grid { display:grid; gap:20px; margin-top:38px; }
.feature-grid-3 { grid-template-columns:repeat(3,1fr); }
.feature-grid-4 { grid-template-columns:repeat(4,1fr); }
.feature { text-align:center; padding:8px 16px; }
.feature h3 { margin-top:13px; font-weight:700; }
.feature p { color:#62656B; font-size:.88rem; margin-top:7px; }
.icon-badge { width:62px; height:62px; border:1px solid rgba(232,143,160,.48); border-radius:50%; display:grid; place-items:center; margin:0 auto; background:linear-gradient(145deg,rgba(232,143,160,.08),rgba(255,255,255,.7)); box-shadow:0 8px 22px rgba(232,143,160,.08); }
.icon-badge img { width:32px; height:32px; object-fit:contain; }

.section-heading { max-width:780px; margin:0 auto 44px; text-align:center; }
.section-heading .eyebrow { margin-bottom:12px; }
.section-heading p:last-child { color:#66696F; margin-top:12px; }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.service-card { background:rgba(255,255,255,.92); border:1px solid var(--border); border-radius:15px; padding:24px 22px; min-height:210px; display:flex; gap:16px; box-shadow:0 10px 24px rgba(31,32,38,.03); transition:.25s ease; }
.service-card:hover { transform:translateY(-4px); border-color:rgba(232,143,160,.55); box-shadow:var(--shadow); }
.service-icon { flex:0 0 48px; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(232,143,160,.09),rgba(255,255,255,.72)); border:1px solid rgba(232,143,160,.22); }
.service-icon img { width:29px; height:29px; object-fit:contain; }
.service-card h3 { font-size:.93rem; line-height:1.35; }
.service-card h3 span { color:var(--pink); margin-right:5px; }
.service-card p { color:#66696F; font-size:.82rem; margin-top:10px; line-height:1.58; }
.why .feature { border-right:1px solid var(--border); }
.why .feature:last-child { border-right:0; }

.cta-band { position:relative; overflow:hidden; padding:58px 0; }
.cta-grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:48px; position:relative; z-index:2; }
.cta-grid h2 { font-size:clamp(2rem,3vw,3rem); }
.cta-grid p { color:#D5D6DA; margin-top:10px; }
.cta-actions { display:grid; gap:10px; min-width:285px; }
.cta-lines { inset:18% -8% -42% 0; opacity:.27; }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.contact-copy > p:not(.eyebrow) { color:#66696F; margin-top:12px; }
.contact-list { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:18px; }
.contact-list li { display:flex; align-items:center; gap:14px; }
.contact-icon { width:44px; height:44px; border-radius:50%; background:var(--dark); display:grid; place-items:center; flex:0 0 44px; }
.contact-icon img { width:21px; height:21px; object-fit:contain; }
.contact-list strong { display:block; font-size:.82rem; margin-bottom:2px; }
.contact-list a { color:#4F5156; font-size:.93rem; }
.contact-list a:hover { color:var(--pink-strong); }
.contact-form { border:1px solid var(--border); padding:28px; border-radius:var(--radius); box-shadow:var(--shadow); background:#fff; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; }
.field input,.field textarea { width:100%; border:1px solid #DEDADD; border-radius:9px; padding:13px 14px; outline:none; background:#fff; transition:.2s ease; }
.field input:focus,.field textarea:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(232,143,160,.14); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"] { border-color:#C94C63; }
.field-error { display:block; min-height:18px; color:#B53E55; font-size:.75rem; margin-top:5px; }
.form-note { text-align:center; color:#77797E; font-size:.78rem; margin-top:10px; }

.site-footer { padding:58px 0 0; overflow:hidden; }
.footer-grid { display:grid; grid-template-columns:1.25fr .65fr .9fr; gap:72px; align-items:start; padding-bottom:42px; }
.footer-brand { min-width:0; }
.footer-brand img { width:min(100%, 330px); height:auto; object-fit:contain; object-position:left center; }
.footer-brand p { color:#AEB0B5; max-width:420px; font-size:.86rem; margin-top:20px; }
.site-footer h3 { font-family:"Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:#F0F1F2; margin:0 0 14px; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; color:#B8BAC0; font-size:.85rem; }
.site-footer a:hover { color:var(--pink); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; padding:18px 0 22px; color:#979AA0; font-size:.75rem; }
.footer-bottom a { color:var(--pink); }

.whatsapp-float { position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%; background:linear-gradient(145deg,#EF9CAD,#D9798E); display:grid; place-items:center; z-index:90; box-shadow:0 14px 35px rgba(217,121,142,.38), inset 0 1px 0 rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.28); transition:.25s ease; }
.whatsapp-float:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 18px 42px rgba(217,121,142,.48); }
.whatsapp-float img { width:29px; height:29px; object-fit:contain; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.1s; }

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}.reveal{opacity:1;transform:none} }

@media (max-width:1100px) {
  .nav-shell { grid-template-columns:210px 1fr auto; gap:18px; }
  .brand img { width:198px; }
  .main-nav { gap:22px; }
  .header-cta { padding-inline:16px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .feature-grid-4 { grid-template-columns:repeat(2,1fr); }
  .why .feature { border-right:0; }
  .hero-grid { gap:44px; }
}

@media (max-width:860px) {
  :root { --header-h:72px; }
  .nav-shell { grid-template-columns:1fr auto; min-height:var(--header-h); }
  .brand img { width:190px; }
  .menu-toggle { display:block; }
  .header-cta { display:none; }
  .main-nav { position:fixed; inset:var(--header-h) 0 auto; background:rgba(5,6,11,.985); display:grid; gap:0; padding:8px 20px 24px; transform:translateY(-140%); opacity:0; pointer-events:none; transition:.28s ease; border-bottom:1px solid rgba(255,255,255,.08); }
  .main-nav.is-open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-link { padding:16px 6px; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav-link::after { display:none; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero { min-height:auto; padding:48px 0 64px; }
  .hero-grid,.about-grid,.contact-grid { grid-template-columns:1fr; }
  .hero-brand { order:-1; }
  .hero-logo-frame { width:min(85vw,460px); height:auto; min-height:360px; }
  .about-grid { gap:44px; }
  .trajectory-card { width:min(100%,560px); margin-inline:auto; }
  .feature-grid-3 { grid-template-columns:repeat(3,1fr); }
  .cta-grid { grid-template-columns:1fr; }
  .cta-actions { min-width:0; grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1.15fr .85fr .95fr; gap:30px; }
}

@media (max-width:620px) {
  .container { width:min(100% - 28px,var(--max)); }
  .section { padding:68px 0; }
  h1 { font-size:clamp(2.65rem,13vw,4rem); }
  h2 { font-size:clamp(2.15rem,10.5vw,3.2rem); }
  .hero-copy { text-align:left; }
  .hero { padding:40px 0 56px; }
  .hero-logo-frame { min-height:300px; }
  .hero-actions { display:grid; }
  .btn { width:100%; }
  .services-grid,.feature-grid-3,.feature-grid-4,.form-row { grid-template-columns:1fr; }
  .service-card { min-height:0; }
  .feature { padding:8px 6px 20px; }
  .cta-actions { grid-template-columns:1fr; }
  .contact-form { padding:20px; }
  .footer-grid { grid-template-columns:1fr; gap:34px; }
  .footer-brand img { width:min(100%,300px); }
  .footer-bottom { flex-direction:column; }
  .whatsapp-float { width:54px; height:54px; right:16px; bottom:16px; }
  .whatsapp-float img { width:27px; height:27px; }
}


/* V4 — ajustes finales aprobados */
.hero-copy h1 { max-width: 760px; text-wrap: balance; }
.hero-lead { margin-top: 28px; max-width: 690px; }
.icon-badge img, .service-icon img { image-rendering: auto; }
.icon-badge { border-color: rgba(232,143,160,.56); box-shadow: 0 10px 26px rgba(232,143,160,.10); }
.trajectory-card img { object-position: center center; }
@media (max-width: 620px) {
  .hero-copy h1 { max-width: 100%; }
  .hero-lead { margin-top: 22px; }
}

/* V6 FINAL — pulido de ritmo, navegación y responsive */

/* Offset seguro para el header sticky al navegar por anclas. */
section[id], header[id] {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* EL ESTUDIO: composición editorial sin diferenciales repetidos. */
#estudio.section {
  padding: 64px 0 58px;
}

#estudio .about-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

#estudio .trajectory-card {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4 / 3;
  justify-self: start;
  border-radius: 20px;
}

#estudio .trajectory-card img {
  object-fit: cover;
  object-position: center 48%;
}

#estudio .about-copy {
  align-self: center;
  padding: 0;
}

#estudio .about-copy .eyebrow {
  margin-bottom: 13px;
}

#estudio .about-copy h2 {
  max-width: 650px;
  font-size: clamp(2.35rem, 3.45vw, 3.6rem);
  text-wrap: balance;
}

#estudio .about-copy > p:not(.eyebrow) {
  max-width: 690px;
  margin-top: 14px;
  color: #4F5156;
  line-height: 1.72;
}

#estudio .about-copy > p:not(.eyebrow) + p:not(.eyebrow) {
  margin-top: 10px;
}

/* Ritmo vertical más compacto sin perder aire. */
#servicios.section {
  padding-top: 64px;
  padding-bottom: 60px;
}

.why.section {
  padding-top: 66px;
  padding-bottom: 62px;
}

.cta-band {
  padding: 53px 0;
}

/* Cards de servicios: misma presencia y altura útil. */
.services-grid {
  align-items: stretch;
}

.service-card {
  height: 100%;
  align-items: flex-start;
}

.service-card > div:last-child {
  min-width: 0;
}

/* Diferenciales: columnas ópticamente parejas. */
.why .feature-grid-4 {
  align-items: stretch;
  margin-top: 34px;
}

.why .feature {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why .feature h3 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 2.55em;
  line-height: 1.3;
  margin-top: 12px;
}

.why .feature p {
  max-width: 245px;
  margin-left: auto;
  margin-right: auto;
}

/* WhatsApp flotante: presente pero menos dominante. */
.whatsapp-float {
  width: 53px;
  height: 53px;
  right: 22px;
  bottom: 22px;
}

.whatsapp-float img {
  width: 26px;
  height: 26px;
}

/* Notebook / desktop medio: bajar apenas la escala del lockup del hero. */
@media (min-width: 861px) and (max-width: 1500px) {
  .hero-logo-frame {
    width: min(100%, 488px);
    height: 452px;
  }
}

@media (max-width: 1100px) {
  #estudio .about-grid {
    gap: 42px;
  }

  #estudio .trajectory-card {
    max-width: 470px;
  }

  .why .feature h3 {
    min-height: 1.3em;
  }
}

@media (max-width: 860px) {
  section[id], header[id] {
    scroll-margin-top: calc(var(--header-h) + 14px);
  }

  #estudio.section {
    padding: 58px 0 54px;
  }

  #estudio .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
  }

  #estudio .trajectory-card {
    width: min(100%, 620px);
    max-width: 620px;
    justify-self: center;
  }

  #estudio .about-copy,
  #estudio .about-copy h2,
  #estudio .about-copy > p:not(.eyebrow) {
    max-width: 760px;
  }

  #servicios.section {
    padding-top: 58px;
    padding-bottom: 56px;
  }

  .why.section {
    padding-top: 58px;
    padding-bottom: 56px;
  }

  .cta-band {
    padding: 50px 0;
  }
}

@media (max-width: 620px) {
  section[id], header[id] {
    scroll-margin-top: calc(var(--header-h) + 12px);
  }

  #estudio.section {
    padding: 52px 0 48px;
  }

  #estudio .about-grid {
    gap: 26px;
  }

  #estudio .trajectory-card {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  #servicios.section,
  .why.section {
    padding-top: 52px;
    padding-bottom: 50px;
  }

  .why .feature-grid-4 {
    margin-top: 28px;
  }

  .why .feature h3 {
    min-height: 0;
  }

  .cta-band {
    padding: 46px 0;
  }

  .whatsapp-float {
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 16px;
  }

  .whatsapp-float img {
    width: 25px;
    height: 25px;
  }
}


/* V8 FINAL — Hero limpio y responsive definitivo
   Ajuste acotado sobre la última versión aprobada:
   - conserva la fotografía aprobada;
   - elimina el logo central del Hero;
   - mejora el encuadre de los anteojos en desktop, tablet y mobile. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 68vh, 650px);
  padding: 46px 0 50px;
  display: flex;
  align-items: center;
  background-color: var(--dark);
  background-image: url("../assets/images/hero-closter-final.png");
  background-size: cover;
  background-repeat: no-repeat;
  /* El encuadre baja la fotografía para conservar completos los anteojos. */
  background-position: 50% 70%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(5,6,11,.59) 0%, rgba(5,6,11,.63) 56%, rgba(5,6,11,.68) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-content h1 {
  max-width: 900px;
  color: #fff;
  font-size: clamp(3.05rem, 4.8vw, 4.8rem);
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(0,0,0,.34);
}

.hero-content .hero-lead {
  max-width: 1120px;
  margin: 24px auto 0;
  color: #F0F1F3;
  font-size: clamp(.98rem, 1.18vw, 1.08rem);
  line-height: 1.7;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}

.hero-content .hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Los copys de servicios son extensos: mantener altura pareja sin recortar. */
.service-card {
  min-height: 238px;
}

/* Desktop / notebook medio */
@media (min-width: 1280px) and (max-width: 1500px) {
  .hero {
    background-position: 50% 72%;
  }
}

/* Notebook chico / tablet horizontal */
@media (min-width: 861px) and (max-width: 1279px) {
  .hero {
    min-height: 585px;
    background-position: 50% 66%;
  }

  .hero-content {
    max-width: 980px;
  }

  .hero-content .hero-lead {
    max-width: 900px;
  }

  .service-card {
    min-height: 220px;
  }
}

/* Tablet */
@media (max-width: 860px) {
  .hero {
    min-height: 555px;
    padding: 40px 0 46px;
    background-position: 46% 58%;
  }

  .hero-content {
    max-width: 760px;
  }

  .hero-content h1 {
    max-width: 720px;
    font-size: clamp(2.75rem, 7.6vw, 4.05rem);
  }

  .hero-content .hero-lead {
    max-width: 680px;
    margin-top: 22px;
  }
}

/* Mobile: encuadre independiente.
   La posición horizontal prioriza los anteojos y conserva presencia de las mujeres. */
@media (max-width: 620px) {
  .hero {
    min-height: 0;
    padding: 30px 0 34px;
    background-size: auto 100%;
    background-position: 14% 50%;
  }

  .hero::before {
    background: linear-gradient(180deg, rgba(5,6,11,.62) 0%, rgba(5,6,11,.65) 55%, rgba(5,6,11,.70) 100%);
  }

  .hero-content {
    width: min(100% - 24px, 560px);
  }

  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(2.25rem, 10vw, 3.2rem);
    line-height: 1.06;
  }

  .hero-content .hero-lead {
    max-width: 100%;
    margin-top: 20px;
    font-size: .94rem;
    line-height: 1.62;
  }

  .hero-content .hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 25px;
  }

  .hero-content .hero-actions .btn {
    width: 100%;
  }

  .service-card {
    min-height: 0;
  }
}

@media (max-width: 430px) {
  .hero {
    background-position: 13% 50%;
  }

  .hero-content h1 {
    font-size: clamp(2.18rem, 10.2vw, 2.75rem);
  }
}

@media (max-width: 390px) {
  .hero {
    background-position: 12% 50%;
  }

  .hero-content h1 {
    font-size: clamp(2.08rem, 10.1vw, 2.55rem);
  }

  .hero-content .hero-lead {
    font-size: .92rem;
  }
}

@media (max-width: 360px) {
  .hero {
    background-position: 11% 50%;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content .hero-lead {
    font-size: .9rem;
    line-height: 1.58;
  }
}

/* V7 FINAL AJUSTADA — conservar la corrección aprobada del botón flotante de WhatsApp. */
/* El desplazamiento real frente al footer se calcula en JS mediante --wa-footer-offset. */
.whatsapp-float {
  --wa-base-bottom: 22px;
  --wa-footer-offset: 0px;
  bottom: calc(var(--wa-base-bottom) + var(--wa-footer-offset) + env(safe-area-inset-bottom, 0px));
  transition: bottom .28s ease, transform .25s ease, box-shadow .25s ease;
  will-change: bottom;
}

@media (max-width: 760px) {
  .whatsapp-float {
    --wa-base-bottom: 16px;
  }
}


/* V9 FINAL — nueva fotografía aprobada + ajuste exclusivo de CTAs en escritorio.
   Mobile/tablet conservan exactamente el ritmo responsive aprobado de V8. */
@media (min-width: 1280px) {
  .hero-content .hero-actions {
    /* V11 FINAL: ajuste de equilibrio. Sube 10px los CTAs respecto de V10 para evitar recorte, manteniendo libres los anteojos. */
    margin-top: 30px;
    position: relative;
    top: 130px;
  }
}

@media (min-width: 861px) and (max-width: 1279px) {
  .hero-content .hero-actions {
    /* V11 FINAL: mismo ajuste de equilibrio en notebook; tablet/mobile quedan fuera de esta media query. */
    margin-top: 30px;
    position: relative;
    top: 155px;
  }
}

/* V12 FINAL — ajuste visual EXCLUSIVO de mobile según referencia aprobada.
   Desktop/notebook conserva V11 sin cambios.
   En mobile se recupera un Hero de pantalla completa, centrado y con CTAs apilados,
   manteniendo exactamente el mismo asset, overlay y contenido. */
@media (max-width: 620px) {
  :root {
    --header-h: 82px;
  }

  .nav-shell {
    min-height: var(--header-h);
  }

  .brand img {
    width: 218px;
  }

  .menu-toggle span {
    width: 28px;
    height: 3px;
    margin: 5px 0;
  }

  .hero {
    min-height: clamp(680px, 165vw, 720px);
    padding: 30px 0 34px;
    align-items: center;
    background-size: auto clamp(520px, 128vw, 560px);
    background-position: 42% 0%;
  }

  .hero-content {
    width: min(100% - 40px, 560px);
    min-height: calc(clamp(680px, 165vw, 720px) - 64px);
    justify-content: center;
  }

  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(2.25rem, 10.2vw, 2.75rem);
    line-height: 1.06;
  }

  .hero-content .hero-lead {
    max-width: 100%;
    margin-top: 24px;
    font-size: .96rem;
    line-height: 1.66;
  }

  .hero-content .hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 112px;
  }

  .hero-content .hero-actions .btn {
    width: 100%;
    min-height: 62px;
    border-radius: 12px;
    font-size: 1rem;
  }
}

@media (max-width: 430px) {
  .hero {
    background-position: 42% 0%;
  }
}

@media (max-width: 390px) {
  .brand img {
    width: 210px;
  }

  .hero {
    background-position: 41% 0%;
  }

  .hero-content {
    width: min(100% - 34px, 560px);
  }

  .hero-content h1 {
    font-size: clamp(2.12rem, 10.3vw, 2.5rem);
  }

  .hero-content .hero-lead {
    font-size: .93rem;
    line-height: 1.62;
  }
}

@media (max-width: 360px) {
  :root {
    --header-h: 78px;
  }

  .brand img {
    width: 198px;
  }

  .hero {
    background-position: 40% 0%;
  }

  .hero-content h1 {
    font-size: 2.05rem;
  }

  .hero-content .hero-lead {
    font-size: .9rem;
    line-height: 1.58;
  }

  .hero-content .hero-actions .btn {
    min-height: 58px;
    font-size: .94rem;
  }
}

/* V13 FINAL — corrección exclusiva del encuadre/calidad del fondo en mobile.
   Mantiene intactos desktop, tablet, contenido, tipografías, botones y estructura.
   El mismo asset aprobado se muestra con menor recorte horizontal para conservar
   los anteojos completos y nítidos, como en la referencia mobile aprobada. */
@media (max-width: 620px) {
  .hero {
    background-size: auto 84%;
    background-position: 24% 0%;
  }
}

@media (max-width: 430px) {
  .hero { background-position: 24% 0%; }
}

@media (max-width: 390px) {
  .hero { background-position: 24% 0%; }
}

@media (max-width: 360px) {
  .hero { background-position: 24% 0%; }
}

/* V14 FINAL — mobile exactamente alineado a la referencia aprobada.
   Desktop/notebook/tablet permanecen intactos respecto de V13.
   En mobile se usa una composición vertical dedicada derivada del MISMO hero aprobado,
   para conservar lentes completos, nitidez y proporción visual sin recorte horizontal. */
@media (max-width: 620px) {
  .hero {
    background-image: url("../assets/images/hero-closter-mobile-final.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

@media (max-width: 430px) {
  .hero { background-position: center center; }
}

@media (max-width: 390px) {
  .hero { background-position: center center; }
}

@media (max-width: 360px) {
  .hero { background-position: center center; }
}

/* V15 FINAL — ajuste EXCLUSIVO del fondo del Hero en mobile.
   Desktop, notebook y tablet permanecen idénticos a V14.
   Se usa una composición vertical dedicada en mobile para reproducir la referencia aprobada:
   lentes completos, buena nitidez y escritorio visible. */
@media (max-width: 620px) {
  .hero {
    background-image: url("../assets/images/hero-closter-mobile-v15.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

@media (max-width: 430px) {
  .hero { background-position: center center; }
}

@media (max-width: 390px) {
  .hero { background-position: center center; }
}

@media (max-width: 360px) {
  .hero { background-position: center center; }
}

/* ============================================================
   V16 FINAL — dos microajustes aislados, sin regresiones
   1) Desktop: el Hero entra completo en el viewport inicial.
   2) Mobile: la imagen vertical se muestra completa en ancho,
      dejando los lentes visibles ANTES de los CTAs.
   Todo el resto conserva V15.
   ============================================================ */

/* DESKTOP / NOTEBOOK: mantener composición y posición de CTAs,
   ajustando únicamente la altura útil del Hero respecto del header. */
@media (min-width: 861px) {
  .hero {
    min-height: clamp(590px, calc(100dvh - var(--header-h) - 36px), 650px);
  }
}

/* MOBILE: evitar el recorte impredecible de background-size: cover.
   La imagen vertical se escala por ANCHO completo y continúa sobre
   fondo negro por debajo. Así los lentes quedan completos antes de
   los botones sin deformar ni regenerar el asset. */
@media (max-width: 620px) {
  .hero {
    min-height: 790px;
    background-image: url("../assets/images/hero-closter-mobile-v15.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--dark);
  }

  .hero-content {
    min-height: 726px;
    justify-content: flex-start;
    padding-top: 78px;
  }

  .hero-content .hero-actions {
    margin-top: 140px;
  }
}

@media (max-width: 430px) {
  .hero {
    background-size: 100% auto;
    background-position: center top;
  }
}

@media (max-width: 390px) {
  .hero {
    min-height: 775px;
    background-size: 100% auto;
    background-position: center top;
  }

  .hero-content {
    min-height: 711px;
    padding-top: 74px;
  }

  .hero-content .hero-actions {
    margin-top: 132px;
  }
}

@media (max-width: 360px) {
  .hero {
    min-height: 755px;
    background-size: 100% auto;
    background-position: center top;
  }

  .hero-content {
    min-height: 691px;
    padding-top: 70px;
  }

  .hero-content .hero-actions {
    margin-top: 124px;
  }
}

/* ============================================================
   V17 FINAL — cierre definitivo del Hero mobile
   Desktop/tablet permanecen visualmente congelados respecto de V16.

   Motivo del ajuste:
   La referencia aprobada muestra la fotografía mobile comenzando visualmente
   detrás del header. En V16 el fondo comenzaba recién al inicio del Hero,
   desplazando anteojos/documentos hacia abajo y dejándolos detrás de los CTAs.

   Solución estable:
   - se usa una capa <img> real únicamente en mobile;
   - conserva proporción natural (width:100%; height:auto);
   - se desplaza exactamente la altura del header hacia arriba;
   - no usa background-size:cover;
   - CTAs, título y descripción conservan su posición aprobada.
   ============================================================ */

.hero-mobile-media {
  display: none;
}

@media (max-width: 620px) {
  .hero {
    /* La fotografía mobile pasa a una capa real; el negro queda como respaldo
       por debajo si el Hero supera unos píxeles la altura natural de la imagen. */
    background-image: none !important;
    background-color: var(--dark);
  }

  .hero-mobile-media {
    display: block;
    position: absolute;
    top: calc(-1 * var(--header-h));
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }

  .hero::before {
    z-index: 1;
  }

  .hero-content {
    z-index: 2;
  }
}

/* ============================================================
   V18 FINAL — pulido final de 3 microajustes aprobados
   Base: V17 FINAL. Todo lo no indicado aquí permanece congelado.

   1) Desktop: reproducir desde el ingreso el encuadre que se obtenía
      con un pequeño scroll manual, sin tocar fotografía, contenido,
      botones ni background-position.
   2) Mobile: reducir sólo el aire negro posterior al segundo CTA.
   3) Mobile: al entrar el footer, el WhatsApp queda 14px por encima
      de la transición blanco/negro, conservando toda la lógica previa.
   ============================================================ */

/* 1 — Desktop / notebook: desplazar el Hero completo 36px bajo el
   header sticky. Es equivalente visualmente al micro-scroll aprobado;
   no altera dimensiones internas, background-position ni elementos. */
@media (min-width: 861px) {
  .hero {
    margin-top: -36px;
  }
}

/* 2 — Mobile: quitar únicamente 40px de espacio residual al final del
   Hero. Título, descripción, foto, lentes y CTAs conservan exactamente
   sus posiciones relativas de V17. */
@media (max-width: 620px) {
  .hero {
    min-height: 750px;
  }

  .hero-content {
    min-height: 686px;
  }

  /* 3 — Mientras el footer está visible, el offset calculado por el JS
     ya suma 14px de seguridad. Anulamos sólo el bottom-base de 16px
     para que el botón quede exactamente 14px por encima del footer. */
  .whatsapp-float.footer-visible {
    --wa-base-bottom: 0px;
  }
}

@media (max-width: 390px) {
  .hero {
    min-height: 735px;
  }

  .hero-content {
    min-height: 671px;
  }
}

@media (max-width: 360px) {
  .hero {
    min-height: 715px;
  }

  .hero-content {
    min-height: 651px;
  }
}