/* ═══════════════════════════════════════════════════════════════════
   DRA. MÓNICA ÁLVAREZ · HERO
   ≥1025px y horizontal → composición de escritorio (réplica de la referencia,
                           cabe completa en la pantalla: 100svh, sin scroll)
   ≤1024px o vertical   → app móvil/tableta
                           (dock "Agenda tu cita" + secciones + barras fijas)
   ═══════════════════════════════════════════════════════════════════ */
/* Poppins (SIL OFL) — misma tipografía local de los demos anteriores */
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(../fonts/poppins-500.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff) format("woff")}
:root{
  --ink:#111214;
  --ink-soft:rgba(17,18,20,.62);
  --blue:#1fb5e3;
  --blue-a:#3cc6ef;
  --blue-b:#0e9ccb;
  --sky-50:#f3fbfe;
  --sky-100:#e6f7fd;
  --sky-200:#cdeefa;
  --zone-a:#8adcf5;
  --zone-b:#1fb5e3;
  --star:#f6a823;

  --font:"Poppins","Avenir Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --gutter:0px;
  --H:max(620px,100svh);
  --pad:clamp(16px,2.3vw,34px);
}
@supports not (height:100svh){:root{--H:max(620px,100vh)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
p,h1,h2{margin:0}
img{display:block}
.mon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.mon-ic{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mon-ic--fill{fill:currentColor;stroke:none}
.mon-hl{color:var(--blue)}
:where(a):focus-visible{outline:3px solid var(--blue-b);outline-offset:3px;border-radius:inherit}

.mon-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:46px;padding:0 1.5em;border-radius:999px;font-weight:500;font-size:14.5px;white-space:nowrap;transition:translate .3s var(--ease),background-color .25s}
.mon-btn:hover{translate:0 -2px}
.mon-btn--blue{background:var(--blue);color:#fff;box-shadow:0 14px 24px -12px rgba(14,156,203,.85)}
.mon-btn--blue:hover{background:var(--blue-b)}
.mon-btn .mon-ic{width:1.1em;height:1.1em}

.mon-logo{display:grid;place-items:center;flex:none;width:1.85em;height:1.85em;border-radius:50%;background:var(--blue)}
.mon-logo svg{width:60%;height:60%;fill:#fff}
.mon-logo--sm{font-size:17px}

.mon-page{padding:var(--gutter)}

/* ───────────── hero shell (escritorio) ───────────── */
.mon-hero{position:relative;isolation:isolate;overflow:hidden;height:var(--H);container-type:size;background:#fff}
.mon-stage{position:absolute;inset:0}

/* barra superior · píldora negra */
.mon-topbar{position:absolute;z-index:10;top:2.4cqh;left:1.6cqw;right:1.6cqw;height:clamp(54px,8.4cqh,84px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(6px,.9cqh,10px);
  border-radius:999px;background:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.45);animation:rise .7s var(--ease) .1s backwards}
.mon-menu{display:flex;align-items:center;gap:clamp(4px,.8cqw,14px);height:100%}
.mon-menu--r{justify-content:flex-end;padding-right:clamp(10px,1.4cqw,22px)}
.mon-menu a{display:inline-flex;align-items:center;height:calc(100% - clamp(12px,1.8cqh,20px));padding:0 clamp(14px,2cqw,34px);border-radius:999px;
  color:#fff;font-size:clamp(13.5px,1.1cqw,17px);font-weight:400;transition:background-color .25s}
.mon-menu a:hover{background:rgba(255,255,255,.1)}
.mon-menu a.is-cur{background:var(--blue);font-weight:700;padding:0 clamp(22px,2.8cqw,46px)}
.mon-brand{display:flex;align-items:center;gap:.5em;color:#fff;font-weight:700;font-size:clamp(18px,1.65cqw,27px);letter-spacing:.01em}
.mon-brand__m{display:none}
.mon-call{display:none}

/* saludo */
.mon-hello{position:absolute;z-index:6;left:50%;top:15.2cqh;translate:-50% 0;display:inline-block;animation:rise .7s var(--ease) .2s backwards}
.mon-hello span{display:inline-block;rotate:-6deg;padding:.35em 1.35em;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:500;font-size:clamp(14px,2.05cqh,19px)}
.mon-spark{position:absolute;right:-2.2em;top:-1.6em;width:2.3em;fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round}

/* título */
.mon-title{position:absolute;z-index:6;left:0;right:0;top:21.6cqh;display:flex;flex-direction:column;align-items:center;
  font-weight:500;font-size:min(5.3cqw,8.7cqh);line-height:1.07;letter-spacing:-.045em;color:var(--ink);text-align:center;animation:title-in 1s var(--ease) .25s backwards}
.mon-ln{white-space:nowrap}
.mon-doodle{position:absolute;left:max(2cqw,calc(50% - 44cqw));top:calc(100% + 1.5cqh);width:8.5cqh;fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round}

/* arco azul + sujeto */
.mon-arc{position:absolute;z-index:1;left:50%;top:58cqh;width:min(61cqw,118cqh);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle at 50% 28%,#5fd3f3 0%,var(--blue) 42%,var(--blue-b) 100%);animation:pop 1.1s var(--ease) .15s backwards}
.mon-subject{position:absolute;z-index:4;left:50%;bottom:0;translate:-50% 0;height:67cqh;width:auto;max-width:none;pointer-events:none;
  transform-origin:50% 100%;animation:subject-in 1.1s var(--ease) .1s backwards}

/* cita */
.mon-quote{position:absolute;z-index:6;left:3.2cqw;top:52cqh;width:min(25cqw,410px);animation:rise .8s var(--ease) .5s backwards}
.mon-quote__ic{display:block;width:clamp(30px,4.2cqh,44px);height:clamp(25px,3.5cqh,37px);fill:var(--blue);margin-bottom:clamp(12px,2.2cqh,22px)}
.mon-quote p{font-size:clamp(14px,min(1.3cqw,2.15cqh),20px);line-height:1.55;font-weight:500;color:#3a3b3e}

/* experiencia */
.mon-exp{position:absolute;z-index:6;right:7.6cqw;top:53.5cqh;text-align:right;animation:rise .8s var(--ease) .6s backwards}
.mon-stars{display:flex;gap:.2em;justify-content:flex-end;color:var(--star);font-size:clamp(22px,3.3cqh,34px)}
.mon-stars .mon-ic{width:1em;height:1em}
.mon-exp__num{margin-top:.35em;font-weight:700;font-size:clamp(30px,min(3.2cqw,5.2cqh),50px);line-height:1.05;letter-spacing:-.035em}
.mon-exp__txt{font-size:clamp(14px,2cqh,19px);color:#3a3b3e}

/* botones de vidrio */
.mon-glass{position:absolute;z-index:7;left:50%;bottom:4.6cqh;translate:-50% 0;display:flex;align-items:center;gap:4px;padding:clamp(5px,.8cqh,8px);border-radius:999px;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.2);animation:rise .8s var(--ease) .8s backwards}
.mon-glass__a{display:inline-flex;align-items:center;gap:.4em;height:clamp(46px,6.6cqh,66px);padding:0 1.6em;border-radius:999px;color:#fff;
  font-weight:500;font-size:clamp(16px,2.35cqh,24px);white-space:nowrap;transition:background-color .25s}
.mon-glass__a:hover{background:rgba(255,255,255,.16)}
.mon-glass__a--primary{background:var(--blue)}
.mon-glass__a--primary:hover{background:var(--blue-b)}

/* solo celular */
.mon-mtitle,.mon-social,.mon-dock,.mon-mobile-only{display:none}

/* ───────────── navegación fija de escritorio ───────────── */
.mon-snav{position:fixed;z-index:60;top:12px;left:50%;translate:-50% -160%;width:min(1100px,calc(100% - 24px));
  display:flex;align-items:center;gap:20px;padding:8px 8px 8px 12px;border-radius:999px;
  background:rgba(17,18,20,.9);color:#fff;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transition:translate .45s var(--ease),opacity .3s,visibility .3s}
.mon-snav.is-on{translate:-50% 0;opacity:1;visibility:visible}
.mon-snav__brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.02em}
.mon-snav__links{flex:1;display:flex;justify-content:center;gap:4px}
.mon-snav__links a{padding:.6em 1em;border-radius:999px;font-size:14px;font-weight:500;color:rgba(255,255,255,.82);transition:background-color .2s,color .2s}
.mon-snav__links a:hover{background:rgba(255,255,255,.1);color:#fff}
.mon-snav__links a.mon-is-cur{background:var(--blue);color:#fff}

/* secciones de relleno */
.mon-ph{min-height:70vh;margin:12px;padding:clamp(28px,5vw,72px);border-radius:clamp(22px,2.6vw,38px);background:var(--sky-50);scroll-margin-top:90px}
.mon-ph h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.03em}
.mon-ph p{margin-top:8px;color:var(--ink-soft)}

/* ───────────── movimiento ───────────── */
@keyframes rise{from{opacity:0;translate:0 16px}}
@keyframes title-in{from{opacity:0;translate:0 .12em}}
@keyframes subject-in{from{opacity:0;scale:.965}}
@keyframes pop{from{opacity:0;scale:.85}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(31,181,227,.55)}70%,100%{box-shadow:0 0 0 16px rgba(31,181,227,0)}}
/* el saludo, el arco y el sujeto usan translate para centrarse: la animación no lo pisa */
.mon-hello{animation-name:fade}.mon-arc{animation-name:fade}.mon-subject{animation-name:fade}.mon-glass{animation-name:fade}
@keyframes fade{from{opacity:0}}

/* pantallas de escritorio bajas o muy anchas */
@media (min-width:1025px) and (max-height:760px){
  .mon-quote{top:54cqh}
  .mon-exp{top:55cqh}
}

/* ═══════════════════════════════════════════════════════════════════
   APP MÓVIL / TABLETA (≤1024px o vertical)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px),(max-aspect-ratio:10/11){
  :root{--gutter:0px;--pad:16px;--mbar-h:calc(72px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(var(--mbar-h) + 4px);background:var(--sky-100)}
  .mon-desktop-only{display:none!important}
  .mon-mobile-only{display:revert}

  .mon-hero{
    height:auto;min-height:calc(100svh - var(--gutter)*2 - var(--mbar-h));
    container-type:inline-size;
    display:flex;flex-direction:column;border-radius:0;
    background:
      radial-gradient(90% 60% at 50% 70%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
      linear-gradient(180deg,#dff4fc 0%,#eef9fd 60%,#f8fdff 100%);
  }

  /* barra superior: marca + llamar */
  .mon-topbar{position:relative;inset:auto;height:auto;padding:var(--pad) var(--pad) 0;grid-template-columns:1fr auto;
    background:none;box-shadow:none;border-radius:0}
  .mon-menu{display:none}
  .mon-brand{justify-self:start;color:var(--ink);font-size:clamp(18px,5vw,24px);letter-spacing:-.03em;gap:.45em}
  .mon-brand__txt{display:none}
  .mon-brand__m{display:inline}
  .mon-logo{width:1.6em;height:1.6em}
  .mon-call{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:rgba(255,255,255,.55);transition:background-color .25s,color .25s}
  .mon-call:active{background:var(--ink);color:#fff}

  /* ¡Hola! + "Soy la / Dra. Mónica" + doctora sobre el arco + redes flotantes */
  .mon-hero{--title-fs:min(13vw,120px);--sub-top:calc(var(--title-fs)*.82 + 76px)}
  .mon-stage{position:relative;inset:auto;z-index:1;flex:1 1 auto;min-height:max(320px,min(108vw,100svh - 450px,660px))}

  .mon-title,.mon-quote,.mon-exp,.mon-glass{display:none}
  .mon-hello{top:2px}
  .mon-hello span{font-size:clamp(14px,3.9vw,19px);background:rgba(255,255,255,.9)}
  .mon-spark{right:-2em;top:-1.5em}
  .mon-mtitle{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:2;left:0;right:0;top:calc(2px + 3.1em*var(--hello-k,1));
    font-size:clamp(14px,3.9vw,19px);user-select:none;--hello-k:1}
  .mon-mtitle__pre{font-size:clamp(20px,5.8vw,34px);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--ink);animation:title-in 1s var(--ease) backwards}
  .mon-mtitle__name{font-size:var(--title-fs);font-weight:700;line-height:1;letter-spacing:-.05em;white-space:nowrap;
    background:linear-gradient(180deg,#39c3ee 0%,var(--blue) 55%,var(--blue-b) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:title-in 1s var(--ease) .08s backwards}

  .mon-arc{--aw:min(122vw,780px);top:auto;bottom:calc(var(--aw)*-.6 + 30px);width:var(--aw);
    background:radial-gradient(circle at 50% 22%,#6fd8f5 0%,var(--blue) 40%,var(--blue-b) 100%)}
  /* el PNG original trae margen transparente arriba (~9%): se compensa solo con el tamaño */
  .mon-subject{bottom:auto;top:calc(var(--sub-top) - (100% - var(--sub-top))*.13);height:calc((100% - var(--sub-top))*1.45);max-height:190vw}

  /* redes sociales flotantes */
  .mon-social{display:block;position:absolute;inset:0;z-index:6;pointer-events:none}
  .mon-soc{position:absolute;pointer-events:auto;display:grid;place-items:center;width:clamp(42px,12vw,58px);aspect-ratio:1;border-radius:50%;color:#fff;
    border:3px solid rgba(255,255,255,.85);box-shadow:0 0 0 5px rgba(255,255,255,.35),0 14px 26px -12px rgba(8,60,90,.7);
    animation:rise .7s var(--ease) backwards,bob 4.2s ease-in-out infinite}
  .mon-soc .mon-ic{width:48%;height:48%}
  .mon-soc--wa{left:clamp(14px,4.5vw,40px);top:45%;background:linear-gradient(160deg,#35d777,#16a34a);animation-delay:.8s,1.6s}
  .mon-soc--ig{right:clamp(18px,5.5vw,48px);top:40%;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);animation-delay:.9s,.4s}
  .mon-soc--ig .mon-ic{stroke-width:2.2}
  .mon-soc--fb{right:clamp(24px,7vw,60px);top:70%;background:linear-gradient(160deg,#3b82f6,#1d4ed8);animation-delay:1s,2.4s}
  @keyframes bob{50%{translate:0 -8px}}

  /* dock tipo hoja inferior */
  .mon-dock{display:grid;position:relative;z-index:5;margin-top:-26px;gap:10px;padding:20px var(--pad) var(--pad);
    background:
      radial-gradient(80% 70% at 50% 0%,rgba(255,255,255,.34),rgba(255,255,255,0) 70%),
      linear-gradient(180deg,var(--zone-a),var(--zone-b));
    border-radius:28px 28px 0 0}
  .mon-cta,.mon-sections{width:100%;max-width:640px;margin-inline:auto}
  .mon-cta{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title go" "sub go";align-items:center;column-gap:12px;
    padding:16px 16px 16px 20px;border-radius:26px;background:#fff;box-shadow:0 22px 40px -20px rgba(8,90,125,.7);animation:rise .7s var(--ease) .7s backwards}
  .mon-cta__title{grid-area:title;font-weight:700;font-size:clamp(18px,5.2vw,23px);line-height:1.1;letter-spacing:-.03em}
  .mon-cta__sub{grid-area:sub;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--ink-soft)}
  .mon-go{grid-area:go;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;box-shadow:0 0 0 9px var(--sky-200);animation:ring 2.4s ease-out 2.4s 3}
  .mon-go .mon-ic{width:24px;height:24px;stroke-width:2}

  .mon-sections{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .mon-card{display:flex;border-radius:20px;box-shadow:0 14px 24px -16px rgba(8,90,125,.7);animation:rise .7s var(--ease) backwards;animation-delay:calc(.75s + var(--i,0)*.07s);transition:transform .2s var(--ease)}
  .mon-card:active{transform:scale(.97)}
  .mon-card--soft{background:linear-gradient(160deg,#fff,var(--sky-100))}
  .mon-card--blue{background:linear-gradient(160deg,#0fa2d4,#0877a3);color:#fff}
  .mon-card--ink{background:rgba(17,18,20,.95);color:#fff}
  .mon-card__ic{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:none}
  .mon-card--soft .mon-card__ic{background:var(--sky-200);color:var(--blue-b)}
  .mon-card--blue .mon-card__ic{background:rgba(255,255,255,.2)}
  .mon-card--ink .mon-card__ic{background:rgba(255,255,255,.12)}
  .mon-card__title{font-weight:700;font-size:clamp(13.5px,3.9vw,16px);line-height:1.15;letter-spacing:-.015em}
  .mon-card--row{grid-column:span 3;align-items:center;gap:12px;padding:10px 12px 10px 10px;min-height:60px}
  .mon-card--tall{grid-column:span 2;flex-direction:column;justify-content:space-between;gap:14px;min-height:88px;padding:12px}
  .mon-card--tall .mon-card__ic{width:34px;height:34px;border-radius:12px}

  /* barra superior con pestañas (aparece al salir del hero) */
  .mon-appbar{display:flex;position:fixed;z-index:60;top:calc(8px + env(safe-area-inset-top,0px));left:50%;width:min(720px,calc(100% - 16px));
    align-items:center;gap:8px;padding:6px;border-radius:22px;
    background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(17,18,20,.08);box-shadow:0 16px 32px -20px rgba(8,90,125,.6);
    translate:-50% -160%;opacity:0;visibility:hidden;transition:translate .45s var(--ease),opacity .3s,visibility .3s}
  .mon-appbar.is-on{translate:-50% 0;opacity:1;visibility:visible}
  .mon-appbar__brand{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--blue);color:#fff}
  .mon-appbar__brand svg{width:22px;height:22px;fill:#fff}
  .mon-appbar__tabs{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-right:14px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .mon-appbar__tabs::-webkit-scrollbar{display:none}
  .mon-appbar__tabs a{flex:none;padding:.7em 1.05em;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap;transition:background-color .2s,color .2s}
  .mon-appbar__tabs a.mon-is-cur{background:var(--ink);color:#fff}

  /* barra fija inferior: Llamar + WhatsApp */
  .mon-mbar{display:grid;position:fixed;z-index:70;left:50%;translate:-50% 0;bottom:0;width:min(560px,100%);grid-template-columns:1fr 1fr;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    border-top:1px solid rgba(17,18,20,.08);box-shadow:0 -16px 36px -20px rgba(8,90,125,.5)}
  .mon-mbar__btn{display:flex;align-items:center;justify-content:center;gap:.6em;height:52px;border-radius:17px;font-weight:700;font-size:16px;color:#fff;transition:transform .2s var(--ease)}
  .mon-mbar__btn:active{transform:scale(.97)}
  .mon-mbar__btn .mon-ic{width:21px;height:21px}
  .mon-mbar__btn--call{background:var(--ink);box-shadow:0 12px 20px -14px rgba(0,0,0,.9)}
  .mon-mbar__btn--wa{background:linear-gradient(160deg,#25c766,#128c44);box-shadow:0 12px 20px -14px rgba(18,140,68,.95)}
  .mon-ph{margin:8px 0 0;border-radius:28px;min-height:60vh;background:#fff}
}
@media (min-width:561px) and (max-width:1024px){ .mon-mbar{border-radius:26px 26px 0 0} }

/* celulares muy pequeños */
@media (max-width:360px){
  .mon-card__title{font-size:12.5px}
  .mon-card--tall{padding:10px}
}
/* celular horizontal */
@media (max-height:520px) and (orientation:landscape) and (max-width:960px){
  .mon-hero{--title-fs:min(10vw,100px)}
  .mon-stage{min-height:clamp(320px,52vw,420px)}
  .mon-arc{--aw:min(70vw,520px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* redes flotantes (celular / tableta): iconos propios de la línea gráfica, sin colores de terceros */
@media (max-width:1024px),(max-aspect-ratio:10/11){
  .mon-soc .mon-ic,.mon-soc--ig .mon-ic{width:56%;height:56%;stroke-width:2}
  .mon-soc.mon-soc--wa{background:var(--ink);color:#fff;--soc-acc:var(--blue)}
  .mon-soc.mon-soc--ig{background:#fff;color:var(--ink);--soc-acc:var(--blue)}
  .mon-soc.mon-soc--fb{background:linear-gradient(160deg,var(--blue-a),var(--blue-b));color:#fff;--soc-acc:#fff}
}