/* Mentora Dent — LMK.2.3 · styles.css · hero, secciones, responsive y motion
   Fiel a LMK.2.2 aprobado. Generado desde landing/source. */
/* ============ RESPONSIVE ============ */
/* Tablet: colapsa los enlaces a hamburguesa pero mantiene el CTA visible */
@media(max-width:1000px){
  .navlinks{display:none}
  .menu-btn{display:inline-flex}
}
@media(max-width:1119px){
  .hero-grid{grid-template-columns:1fr 1fr;gap:18px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}.fstep .arw{display:none}
  .results{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:repeat(3,1fr);gap:26px 16px}.jline{display:none}
  .inc{grid-template-columns:repeat(3,1fr)}
  .upc{grid-template-columns:repeat(3,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .inst{gap:36px}
}
@media(max-width:820px){
  .navlinks,.nav .r .btn-p{display:none}
  .menu-btn{display:inline-flex}
  .mbar{display:flex}
  .sec{padding:66px 0}
  .hero{padding:110px 0 90px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-fig{order:-1;height:auto}.hero-fig .doc{max-height:360px}
  .hero .render{width:110px}
  .fc-1{right:2%;top:2%}.fc-2{left:2%;bottom:2%;top:auto}
  .split,.split.rev{grid-template-columns:1fr;gap:28px}.split.rev .media{order:0}
  .cards{grid-template-columns:1fr 1fr;gap:14px}
  .flow{grid-template-columns:1fr}
  .results{grid-template-columns:1fr 1fr;gap:12px}
  .mod .body{grid-template-columns:1fr;padding:0 22px 22px}
  .mod summary{padding:18px 20px;gap:14px}.mod .mn{width:38px;font-size:22px}
  .comp{grid-template-columns:1fr}
  .journey{grid-template-columns:repeat(2,1fr)}
  .inc{grid-template-columns:1fr 1fr}
  .inst{grid-template-columns:1fr;gap:30px}
  .pricewrap{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}.gal .g.w2{grid-column:span 1}.gal .g.h2{grid-row:span 1}
  .upc{grid-template-columns:1fr 1fr}
  .formcard{grid-template-columns:1fr;margin-top:-40px}
  .frow{grid-template-columns:1fr}
  .footer .bot{flex-direction:column}
}
@media(max-width:430px){
  .wrap{padding:0 18px}
  .cards,.results,.upc{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr}
  .inc{grid-template-columns:1fr}
  .hero .cbtns .btn{width:100%;justify-content:center}
  .price-main .big{font-size:60px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none}
}

/* ---- LMK.2.3 · integración producción (a11y, form, picture) ---- */
picture{display:contents}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--navy);font-family:Barlow;font-weight:800;padding:12px 18px;border-radius:10px;transition:top .2s}
.skip:focus{top:12px;outline:3px solid #fff}
a[aria-current="true"]{color:var(--gold-l)!important}
a[aria-current="true"]::after{content:"";display:block;height:2px;background:var(--grad-gold);border-radius:2px;margin-top:3px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.err{display:block;color:#ffb4ad;font-family:Barlow;font-weight:600;font-size:12px;margin-top:5px;min-height:14px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#d9534f}
.formmsg{margin-top:14px;font-family:Barlow;font-weight:600;font-size:13.5px;border-radius:11px;padding:13px 16px;text-align:center}
.formmsg.is-info{background:#eef3fb;border:1px solid #c9d8f0;color:#123A82}
.formmsg.is-error{background:#fdeceb;border:1px solid #f3c6c2;color:#b1372e}
@media (prefers-contrast:more){
  .lead,.acard p,.rcard,.igroup li{color:#1a2230}
  .chipi span,.kick{color:#8a5e00}
}
@media (forced-colors:active){
  .btn-p,.btn-o{border:1px solid ButtonText}
  .frame,.acard,.mod,.qa{border:1px solid CanvasText}
}

/* Fix: imágenes con una sola dimensión fijada por CSS deben mantener aspecto
   (los atributos width/height actúan como hints presentacionales). */
.hero-fig .doc{width:auto;height:auto;max-height:560px}
.hero-fig .render{height:auto}
.inst .port .stage img{width:auto}

/* ---- Logos oficiales de marca (LMK.2.3.1) ---- */
.brand img{display:block;height:44px;width:auto;transition:height .3s ease}
.nav.scrolled .brand img{height:38px}
.brand-footer img{height:88px;width:auto}
.drawer-logo{height:104px;width:auto;align-self:flex-start;margin:-26px 0 12px}
@media(max-width:820px){ .brand img{height:38px} }