/* ═══════════════════════════════════════════════════════════════════
   DRA. CATALINA BERISTÁIN · HÉROE APP v2 (Hugo, 30-sep-2026)
   Solo celular y tableta (≤1079px). El sitio web NO cambia.
   Referencia: demo 2 (Dra. Garza, makeover v4.2).
   · Se quita el marco de cristal detrás de la doctora.
   · Redes (Instagram, Facebook) = círculos blancos a la izquierda, flotando.
   · Tarjetas del carrusel más chicas.
   · Navegación del héroe sin bloque de fondo: las tarjetas flotan.
   · TABLETA (≥600px) = sala de espera: tarjeta con código QR (Mi sitio /
     WhatsApp / Contacto) en lugar de los accesos rápidos y de la barra
     Llamar/WhatsApp.
   ═══════════════════════════════════════════════════════════════════ */
.hsoc,.kiosk{display:none}

/* sin marco de cristal detrás de la doctora en NINGUNA versión (web incluida) — 3-oct-2026 */
.frame{display:none}

@media (max-width:1079px){
  /* sin marco de cristal */
  .frame{display:none}

  /* carrusel más chico (y el escenario se recorta lo que ya no ocupa el carrusel) */
  .deck{scale:.8;transform-origin:50% 0}
  .stage{height:calc(var(--u) * (var(--sh) - 56) + var(--lift,0px))}

  /* redes: círculos blancos a la izquierda */
  /* el escenario es más ancho que la pantalla: se mide desde la orilla visible */
  .hsoc{display:grid;gap:10px;position:absolute;z-index:4;left:calc(50% - 50vw + max(14px,env(safe-area-inset-left,0px)));top:calc(var(--u) * 300 + var(--lift,0px))}
  .hsoc__a{--soc-acc:var(--green);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
    background:rgba(255,255,255,.92);color:var(--ink);
    box-shadow:0 0 0 1px rgba(12,26,43,.07),0 10px 22px -12px rgba(12,26,43,.5);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    animation:hsoc-in .7s var(--ease) 1s backwards,hsoc-bob 5s ease-in-out 1.7s infinite;transition:scale .2s}
  .hsoc__a:nth-child(2){animation-delay:1.12s,2.3s}
  .hsoc__a svg{width:24px;height:24px}
  .hsoc__a:hover{scale:1.06}
  .hsoc__a:active{scale:.94}

  /* navegación sin bloque de fondo: las tarjetas flotan sobre la foto */
  .hero__copy{background:none;box-shadow:none;border-radius:0}
  .quick__book{box-shadow:0 0 0 1px rgba(12,26,43,.06),0 20px 36px -20px rgba(12,26,43,.55)}
  .qb--mist{background:#fff;box-shadow:0 0 0 1px rgba(12,26,43,.07),0 14px 24px -16px rgba(12,26,43,.45)}
  .qb--blue{background:linear-gradient(160deg,#2b5a8f,#4a75a8);box-shadow:0 14px 24px -16px rgba(12,26,43,.55)}
  .qb--ink{background:var(--ink);box-shadow:0 14px 24px -16px rgba(12,26,43,.6)}
}
/* celular bajito */
@media (max-width:720px) and (min-height:561px){
  .hero__inner{--fit-sh:644}
}
@media (max-width:1079px) and (max-height:780px){
  .hsoc__a{width:40px;height:40px}
  .hsoc__a svg{width:21px;height:21px}
}
@keyframes hsoc-in{from{opacity:0;scale:.3}}
@keyframes hsoc-bob{50%{translate:0 -5px}}

/* ───────── TABLETA: modo sala de espera ───────── */
@media (min-width:600px) and (max-width:1079px) and (min-height:561px){
  :root{--dock-h:0px}
  .dock{display:none!important}
  .quick{display:none!important}
  .lh-ft{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .lh-toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .hero__inner{--reserve:calc(372px + var(--lift));--fit-sh:696}
  .hsoc{left:calc(50% - 50vw + 6vw);gap:12px}
  .hsoc__a{width:54px;height:54px}
  .hsoc__a svg{width:26px;height:26px}
  .deck{scale:.76}

  .kiosk{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;position:relative;isolation:isolate;overflow:hidden;
    width:100%;max-width:760px;margin-inline:auto;padding:26px 26px 26px 30px;border-radius:30px;color:#fff;text-align:left;
    background:radial-gradient(70% 90% at 100% 0%,#21446e 0%,rgba(33,68,110,0) 70%),var(--ink);
    box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 30px 50px -28px rgba(12,26,43,.9);animation:kiosk-in .7s var(--ease) .6s backwards}
  .kiosk::before{content:"";position:absolute;z-index:-1;left:-40px;bottom:-60px;width:150px;height:150px;opacity:.12;rotate:-14deg;
    background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 6.5C10.5 6.5 7.6 10 8.2 15c.5 4.3 2.4 6.8 3 11.5.6 5 1.4 15 5.4 15 3.2 0 3.2-8 4.8-10.9.9-1.6 4.3-1.6 5.2 0 1.6 2.9 1.6 10.9 4.8 10.9 4 0 4.8-10 5.4-15 .6-4.7 2.5-7.2 3-11.5.6-5-2.3-8.5-6.8-8.5-3 0-6 1.7-9 1.7S18 6.5 15 6.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 6.5C10.5 6.5 7.6 10 8.2 15c.5 4.3 2.4 6.8 3 11.5.6 5 1.4 15 5.4 15 3.2 0 3.2-8 4.8-10.9.9-1.6 4.3-1.6 5.2 0 1.6 2.9 1.6 10.9 4.8 10.9 4 0 4.8-10 5.4-15 .6-4.7 2.5-7.2 3-11.5.6-5-2.3-8.5-6.8-8.5-3 0-6 1.7-9 1.7S18 6.5 15 6.5z'/%3E%3C/svg%3E") center/contain no-repeat}
  .kiosk__who{display:flex;align-items:center;gap:12px}
  .kiosk__who .lh-av{width:52px;height:52px;box-shadow:0 0 0 3px var(--green-bright)}
  .kiosk__who div{display:grid;line-height:1.25}
  .kiosk__who b{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .kiosk__who span{font-size:13px;color:#a9c4e2}
  .kiosk__t{margin-top:18px;font-size:clamp(24px,3.6vw,30px);font-weight:800;line-height:1.1;letter-spacing:-.03em}
  .kiosk__s{margin-top:6px;min-height:2.9em;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.8)}
  .kiosk__tabs{display:inline-flex;gap:4px;margin-top:14px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .kiosk__tabs button{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.78);transition:background-color .25s,color .25s}
  .kiosk__tabs .ic{width:17px;height:17px}
  .kiosk__tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 8px 16px -10px rgba(0,0,0,.5)}
  .kiosk__tabs button[aria-selected="true"] .ic{color:var(--green)}
  .kiosk__tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .kiosk__steps{display:flex;flex-wrap:wrap;gap:8px 14px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.72)}
  .kiosk__steps li{display:flex;align-items:center;gap:7px}
  .kiosk__steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.12);color:#fff}
  .kiosk__qr{display:grid;justify-items:center;gap:12px}
  .kiosk__frame{position:relative;padding:12px;border-radius:24px;background:#fff;box-shadow:0 22px 40px -22px rgba(0,0,0,.7)}
  .kiosk__code{width:clamp(170px,26vw,212px);aspect-ratio:1;display:grid;place-items:center}
  .kiosk__code img,.kiosk__code canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
  .kiosk__code p{margin:0;padding:10px;font-size:12.5px;line-height:1.35;color:var(--muted);text-align:center}
  .kiosk__code.is-new{animation:kiosk-qr .45s var(--ease)}
  .kiosk__scan{position:absolute;left:14px;right:14px;top:14px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--green-bright),transparent);box-shadow:0 0 12px var(--green-bright);opacity:.8;
    animation:kiosk-scan 3.4s ease-in-out infinite alternate}
  .kiosk__frame i{position:absolute;width:22px;height:22px;border:3px solid #8fb8da;animation:kiosk-corner 2.4s ease-in-out infinite}
  .kiosk__frame i:nth-of-type(1){left:-9px;top:-9px;border-right:0;border-bottom:0;border-top-left-radius:12px}
  .kiosk__frame i:nth-of-type(2){right:-9px;top:-9px;border-left:0;border-bottom:0;border-top-right-radius:12px}
  .kiosk__frame i:nth-of-type(3){left:-9px;bottom:-9px;border-right:0;border-top:0;border-bottom-left-radius:12px}
  .kiosk__frame i:nth-of-type(4){right:-9px;bottom:-9px;border-left:0;border-top:0;border-bottom-right-radius:12px}
  .kiosk__qr small{font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
}
/* tableta horizontal: tarjeta compacta para que todo quepa */
@media (min-width:600px) and (max-width:1079px) and (min-height:561px) and (orientation:landscape){
  .hero__inner{--reserve:calc(308px + var(--lift))}
  .kiosk{padding:18px 20px 18px 24px;gap:22px}
  .kiosk__t{margin-top:10px;font-size:23px}
  .kiosk__s{min-height:0}
  .kiosk__steps{margin-top:10px}
  .kiosk__code{width:150px}
}
@keyframes kiosk-in{from{opacity:0;translate:0 16px}}
@keyframes kiosk-scan{to{top:calc(100% - 16px)}}
@keyframes kiosk-corner{50%{scale:1.12}}
@keyframes kiosk-qr{from{opacity:0;scale:.92}}
@media (prefers-reduced-motion:reduce){
  .hsoc__a,.kiosk,.kiosk__scan,.kiosk__frame i,.kiosk__code.is-new{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   v2.1 (Hugo, 30-sep-2026)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1079px){
  /* Contacto (celular y tableta): sin la foto de la doctora */
  .lh-orbit__me{display:none}
  .lh-ct .lh-h2{max-width:none}
}
/* tableta: la tarjeta QR respira abajo (no se ve cortada) */
@media (min-width:600px) and (max-width:1079px) and (min-height:561px){
  .hero__copy{padding-bottom:max(34px,calc(22px + env(safe-area-inset-bottom,0px)))}
  .hero__inner{--reserve:calc(410px + var(--lift))}
}
@media (min-width:600px) and (max-width:1079px) and (min-height:561px) and (orientation:landscape){
  .hero__inner{--reserve:calc(340px + var(--lift))}
}
/* tableta: Experiencia · la doctora completa (antes se cortaba la cara) */
@media (min-width:721px) and (max-width:1079px){
  .lh-ex__fig{height:300px}
  .lh-ex__fig img{width:112%;left:50%}
  .lh-ex__frame{top:18%}
}

/* ───────── Tarjetas del carrusel del héroe (todas las versiones) ─────────
   Solo el nombre del tratamiento + un gráfico grande (máx. 2 piezas) sobre
   mosaicos de colores cálidos que contrastan con el cielo azul, como los
   íconos de Servicios. Sin etiquetas, sin textos, sin chips. */
.card--pic{padding:calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 14)}
.card--pic :is(h3,.card__t){font-size:calc(var(--u) * 20);line-height:1.05}
.pic{position:relative;flex:1;margin-top:calc(var(--u) * 10)}
.pic__t{position:absolute;display:grid;place-items:center;border-radius:calc(var(--u) * 18);background:var(--bg);
  box-shadow:0 calc(var(--u) * 12) calc(var(--u) * 18) calc(var(--u) * -10) rgba(20,50,90,.45),inset 0 0 0 calc(var(--u) * 1) rgba(255,255,255,.6)}
.pic__t .ico{width:78%;height:78%}
/* una pieza: mosaico grande al centro */
.pic--one .pic__t{left:6%;right:6%;top:4%;bottom:2%}
.pic--one .pic__t .ico{width:74%;height:74%}
/* dos piezas: grande inclinado + chica que se encima abajo a la derecha */
.pic--two .pic__t:nth-child(1){left:0;top:2%;width:72%;height:80%;rotate:-6deg}
.pic--two .pic__t:nth-child(2){right:0;bottom:0;width:50%;height:56%;rotate:8deg;z-index:1}
.pic--two .pic__t:nth-child(2) .ico{width:74%;height:74%}

/* ── Tarjeta digital (celular y tableta) · Hugo 30-sep-2026: mismo esquema que el demo 2
   (Dra. Garza): tarjeta larga "Instala la app" + Contacto / Compartir / Copiar enlace.
   Sin Apple Wallet ni Google Wallet. ── */
@media (max-width:1079px){
  .lh-dc__apps{grid-template-columns:1fr!important;gap:8px}
  .lh-dca{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:22px;background:#fff;
    box-shadow:inset 0 0 0 1px var(--line),0 16px 30px -22px rgba(28,70,130,.55)}
  .lh-dca__ic{width:50px;height:50px;border-radius:14px;box-shadow:0 6px 14px -8px rgba(28,70,130,.6)}
  .lh-dca__t{margin:0;display:grid;gap:1px;line-height:1.25}
  .lh-dca__t b{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .lh-dca__t small{font-size:12px;color:var(--ink-2)}
  .lh-dca__go{height:42px;padding:0 20px;font-size:14.5px}
  .lh-dct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .lh-dct__b{display:grid;justify-items:center;align-content:center;gap:7px;padding:13px 6px;border-radius:20px;
    background:linear-gradient(160deg,#4a75a8,#2b5a8f);color:#fff;font-size:13px;font-weight:600;line-height:1.2;text-align:center;
    box-shadow:0 16px 26px -20px rgba(28,70,130,.95);transition:transform .2s}
  .lh-dct__b span{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff}
  .lh-dct__b .ic{width:19px;height:19px}
  .lh-dct__b:active{transform:scale(.97)}
}
@media (max-width:380px){ .lh-dct__b{font-size:12px} .lh-dca{gap:10px;padding:10px} .lh-dca__ic{width:44px;height:44px;border-radius:12px} .lh-dca__go{height:38px;padding:0 15px;font-size:13.5px} .lh-dca__t small{font-size:11.5px} }