/* ═══════════════════════════════════════════════════════════════════
   MAKEOVER CORPORATIVO · v4 (Hugo, 30-sep-2026)
   Respaldo de la versión anterior: carpeta "_RESPALDO 2026-09-30 antes del makeover".
   · Paleta: los rosas/ciruelas de todo el sitio pasaron a un rosa palo más
     sobrio (palo de rosa #a93f69 / #812e4f, berenjena #2c1824, fondos
     porcelana rosada). Se cambiaron directo en los CSS, index.html y JS.
   · Web: "Dra." y "Garza" más cerca de los hombros de la doctora (más compacto).
   · Celular/tableta (referencia: sitio de la Dra. Paola Velázquez):
       - los 3 corazones del héroe → íconos redondos a la izquierda, de línea
         propia (Instagram, Facebook, correo), mismos enlaces;
       - la navegación del héroe ya no tiene bloque/cuadro de fondo: las
         tarjetas flotan sobre la foto, que se difumina hacia abajo para que
         no se vea el corte del PNG.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── Web: nombre compacto alrededor de los hombros ───────── */
.garza-hero{--gap:calc(var(--subj-h)*.74)}

/* íconos nuevos: solo en celular/tableta */
.garza-soc__ic{display:none}

/* ───────── Web (v4.1): corazones decorativos alrededor de la cabeza ─────────
   Los corazones con logo (enlaces a redes) ya no van en el sitio web: se
   quedan solo como botones redondos del celular/tableta. En el web flotan
   3 corazones sin logo y sin enlace, colocados fuera de la silueta de la
   doctora (nunca detrás de su cabeza). Medidas en unidades de --subj-h. */
.garza-heart--soc{display:none}
.garza-heart--deco{pointer-events:none;aspect-ratio:100/92}
.garza-heart--da{left:calc(var(--cx) + var(--subj-h)*.37);top:calc(100% - var(--subj-h)*.80);width:calc(var(--subj-h)*.10);rotate:14deg}
.garza-heart--db{left:calc(var(--cx) + var(--subj-h)*.22);top:calc(100% - var(--subj-h)*1.10);width:calc(var(--subj-h)*.062);rotate:-12deg;animation-delay:1.15s,2.4s;animation-duration:.8s,8.5s}
.garza-heart--dc{left:calc(var(--cx) - var(--subj-h)*.33);top:calc(100% - var(--subj-h)*.93);width:calc(var(--subj-h)*.072);rotate:-10deg;animation-delay:1.3s,3s;animation-duration:.8s,7.5s}

/* ───────── Fondo con profundidad: "hilos" (v4.2) ─────────
   Idea: cuidado integral, en cada etapa → un listón de 18 líneas finas que
   cruza el héroe detrás de la doctora y se ondula muy lento (26 s por
   ciclo), con 3 destellos que recorren algunas líneas como una señal
   (lo tecnológico). Sin círculos; tono bajo para no competir con la foto.
   El movimiento de las líneas es SMIL dentro del SVG (js/kiosk-v4.js lo
   pausa si la persona pidió menos movimiento). */
.garza-flow{position:absolute;z-index:1;inset:0;color:var(--hot-a);pointer-events:none;animation:garza-flow-in 2s var(--ease) .2s backwards}
.garza-flow svg{display:block;width:100%;height:100%}
.garza-flow path{fill:none;vector-effect:non-scaling-stroke}
.garza-flow__ln{stroke-width:1;opacity:.26}
.garza-flow__ln--em{stroke-width:1.4;opacity:.42}
.garza-flow__glints{stroke:url(#flow-g)}
.garza-flow__glint{stroke-width:2;opacity:.85;stroke-linecap:round;stroke-dasharray:60 940;stroke-dashoffset:1000;
  animation:garza-glint 12s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--g)*-4s)}
@keyframes garza-flow-in{from{opacity:0}}
@keyframes garza-glint{to{stroke-dashoffset:0}}

/* ───────── Tableta (sala de espera): tarjeta con QR en el héroe ───────── */
.garza-kiosk{display:none}

/* ───────── Celular / tableta ───────── */
@media (max-width:1024px),(max-aspect-ratio:10/11){

  /* fondo "hilos" en celular/tableta: solo alrededor de la cabeza y hombros.
     Se desvanece ANTES de donde empieza el difuminado de la foto, así no se
     ve a través de la doctora. */
  .garza-flow{inset:auto;left:-10%;right:-10%;top:calc(var(--sub-top) - 24px);height:54%;
    -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 96%);
            mask-image:linear-gradient(to bottom,#000 50%,transparent 96%)}
  .garza-heart--deco{display:none}

  /* redes: círculos a la izquierda (como la Dra. Paola), en la línea del sitio */
  .garza-heart--soc{display:grid;
    --soc-acc:var(--hot-a);
    left:var(--pad)!important;right:auto!important;
    width:46px!important;height:46px;aspect-ratio:auto;rotate:0deg!important;
    display:grid;place-items:center;border-radius:50%;
    background:rgba(255,255,255,.9);color:var(--plum);
    box-shadow:0 0 0 1px rgba(33,19,27,.08),0 10px 22px -12px rgba(44,24,36,.45);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    filter:none!important;
    animation:pop .7s var(--ease) 1s backwards,garza-bob 5s ease-in-out 1.7s infinite}
  .garza-heart--soc > svg:first-child,.garza-heart--soc .garza-heart__ic{display:none}
  .garza-heart--soc .garza-soc__ic{display:block;width:24px;height:24px}
  .garza-heart--soc:hover{scale:1.06}
  .garza-heart--soc:focus-visible{border-radius:50%}
  .garza-heart--a{top:calc(50% - 76px)!important}
  .garza-heart--b{top:calc(50% - 20px)!important;animation-delay:1.1s,2.3s}
  .garza-heart--c{top:calc(50% + 36px)!important;animation-delay:1.2s,2.9s}

  /* foto: se difumina abajo (no se ve el corte del PNG) */
  .garza-subject{
    -webkit-mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,.55) 82%,transparent 96%);
            mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,.55) 82%,transparent 96%)}

  /* navegación sin bloque de fondo: las tarjetas flotan sobre la foto */
  .garza-dock{background:none;border-radius:0;margin-top:-64px;padding-top:0}
  .garza-cta{box-shadow:0 0 0 1px rgba(33,19,27,.06),0 18px 34px -20px rgba(44,24,36,.55)}
  .garza-card--soft{box-shadow:0 0 0 1px rgba(33,19,27,.05),0 14px 24px -16px rgba(44,24,36,.45)}
}
@media (min-width:600px) and (max-width:1024px),(min-width:600px) and (max-aspect-ratio:10/11){
  .garza-heart--soc{left:6%!important;width:54px!important;height:54px}
  .garza-heart--soc .garza-soc__ic{width:26px;height:26px}
  .garza-heart--a{top:calc(50% - 92px)!important}
  .garza-heart--b{top:calc(50% - 27px)!important}
  .garza-heart--c{top:calc(50% + 38px)!important}
}
@media (max-width:1024px) and (max-height:780px),(max-aspect-ratio:10/11) and (max-height:780px){
  /* primera pantalla completa: héroe + navegación arriba de Llamar/WhatsApp */
  .garza-stage{min-height:clamp(340px,94vw,520px)}
  .garza-heart--soc{width:40px!important;height:40px}
  .garza-heart--soc .garza-soc__ic{width:21px;height:21px}
  .garza-heart--a{top:calc(50% - 64px)!important}
  .garza-heart--b{top:calc(50% - 16px)!important}
  .garza-heart--c{top:calc(50% + 32px)!important}
}
@media (min-width:600px) and (max-width:1024px),(min-width:600px) and (max-aspect-ratio:10/11){
  /* en la tableta la tarjeta QR reemplaza la navegación del héroe y la barra Llamar/WhatsApp */
  :root{--mbar-h:0px}
  .garza-mbar{display:none!important}
  .garza-book,.garza-sections{display:none!important}
  .garza-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;
    background:radial-gradient(70% 90% at 100% 0%,#502c41 0%,rgba(80,44,65,0) 70%),var(--plum);
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 30px 50px -28px rgba(44,24,36,.9);animation:rise .7s var(--ease) .6s backwards}
  .garza-kiosk__heart{position:absolute;z-index:-1;left:-46px;bottom:-66px;width:136px;rotate:-16deg;opacity:.3}
  .garza-kiosk__who{display:flex;align-items:center;gap:12px}
  .garza-kiosk__who .garza-av{width:52px;height:52px;box-shadow:0 0 0 3px var(--hot-a)}
  .garza-kiosk__who div{display:grid;line-height:1.25}
  .garza-kiosk__who b{font-size:17px;letter-spacing:-.02em}
  .garza-kiosk__who span{font-size:12.5px;color:var(--rose-300)}
  .garza-kiosk__t{margin-top:18px;font-weight:700;font-size:clamp(24px,3.6vw,30px);line-height:1.1;letter-spacing:-.03em}
  .garza-kiosk__s{margin-top:6px;min-height:2.9em;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.8)}
  .garza-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)}
  .garza-kiosk__tabs button{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;color:rgba(255,255,255,.78);transition:background-color .25s,color .25s}
  .garza-kiosk__tabs .garza-ic{width:17px;height:17px}
  .garza-kiosk__tabs button[aria-selected="true"]{background:#fff;color:var(--plum);box-shadow:0 8px 16px -10px rgba(0,0,0,.5)}
  .garza-kiosk__tabs button[aria-selected="true"] .garza-ic{color:var(--hot-a)}
  .garza-kiosk__tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .garza-kiosk__steps{display:flex;flex-wrap:wrap;gap:8px 14px;margin:16px 0 0;padding:0;list-style:none;font-size:12.5px;color:rgba(255,255,255,.72)}
  .garza-kiosk__steps li{display:flex;align-items:center;gap:7px}
  .garza-kiosk__steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:500;background:rgba(255,255,255,.12);color:#fff}
  .garza-kiosk__qr{display:grid;justify-items:center;gap:12px}
  .garza-kiosk__frame{position:relative;padding:12px;border-radius:24px;background:#fff;box-shadow:0 22px 40px -22px rgba(0,0,0,.7)}
  .garza-kiosk__code{width:clamp(170px,26vw,212px);aspect-ratio:1;display:grid;place-items:center}
  .garza-kiosk__code img,.garza-kiosk__code canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
  .garza-kiosk__code p{margin:0;padding:10px;font-size:12px;line-height:1.35;color:var(--ink-soft);text-align:center}
  .garza-kiosk__code.is-new{animation:garza-qr-in .45s var(--ease)}
  .garza-kiosk__scan{position:absolute;left:14px;right:14px;top:14px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--hot-a),transparent);box-shadow:0 0 12px var(--hot-a);opacity:.75;
    animation:garza-scan 3.4s ease-in-out infinite alternate}
  .garza-kiosk__frame i{position:absolute;width:22px;height:22px;border:3px solid var(--rose-300);animation:garza-corner 2.4s ease-in-out infinite}
  .garza-kiosk__frame i:nth-of-type(1){left:-9px;top:-9px;border-right:0;border-bottom:0;border-top-left-radius:12px}
  .garza-kiosk__frame i:nth-of-type(2){right:-9px;top:-9px;border-left:0;border-bottom:0;border-top-right-radius:12px}
  .garza-kiosk__frame i:nth-of-type(3){left:-9px;bottom:-9px;border-right:0;border-top:0;border-bottom-left-radius:12px}
  .garza-kiosk__frame i:nth-of-type(4){right:-9px;bottom:-9px;border-left:0;border-top:0;border-bottom-right-radius:12px}
  .garza-kiosk__qr small{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85)}
}
/* tableta horizontal (poca altura): tarjeta más compacta para que todo quepa */
@media (min-width:600px) and (max-width:1024px) and (orientation:landscape){
  .garza-stage{min-height:300px}
  .garza-kiosk{padding:18px 20px 18px 24px;gap:22px}
  .garza-kiosk__t{margin-top:10px;font-size:22px}
  .garza-kiosk__steps{margin-top:10px}
  .garza-kiosk__code{width:150px}
}
@keyframes garza-scan{to{top:calc(100% - 16px)}}
@keyframes garza-corner{50%{scale:1.12}}
@keyframes garza-qr-in{from{opacity:0;scale:.92}}
@keyframes garza-bob{50%{translate:0 -5px}}