/* ═══════════════════════════════════════════════════════════════════
   HERO (portada) · compartido por escritorio y celular/tableta.
   ≥ 1025 px y pantalla horizontal → composición de escritorio
   ≤ 1024 px o pantalla vertical    → composición tipo app (hoja inferior)
   ═══════════════════════════════════════════════════════════════════ */
/* ───────────── hero shell ───────────── */
.garza-page{padding:var(--gutter)}
.garza-hero{
  --cx:47%;                                   /* horizontal centre of subject + title gap */
  --subj-h:min(calc(var(--H)*.72),78vw);      /* subject height */
  --gap:calc(var(--subj-h)*1.04);             /* space between "Dra." and "Garza" (clears the subject's widest point, hands included) */
  --title-fs:calc(var(--subj-h)*.245);
  --tile:clamp(40px,3.4vw,52px);
  --top-offset:calc(var(--pad) + 74px);

  position:relative;isolation:isolate;overflow:hidden;
  height:var(--H);
  border-radius:clamp(22px,2.6vw,38px);
  background:linear-gradient(180deg,#fffafc 0%,#faf3f6 62%,#f8eef1 100%);
}

/* backdrop layers */
.garza-halo{position:absolute;z-index:0;left:var(--cx);bottom:-4%;width:calc(var(--subj-h)*1.2);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(230,167,192,.82),rgba(238,215,224,.5) 55%,rgba(249,240,243,0))}
.garza-zone{position:absolute;z-index:1;left:0;right:0;bottom:0;height:36%;
  background:
    radial-gradient(60% 90% at var(--cx) 0%,rgba(255,255,255,.36),rgba(255,255,255,0) 68%),
    linear-gradient(180deg,var(--zone-a),var(--zone-b))}

.garza-stage{position:absolute;inset:0;pointer-events:none}

/* giant name, sits behind the subject */
.garza-title{
  position:absolute;z-index:2;left:0;width:calc(var(--cx)*2);
  top:calc(100% - var(--subj-h)*.44 - .4em);
  display:grid;grid-template-columns:1fr var(--gap) 1fr;
  font-size:calc(var(--title-fs)*var(--fit,1));
  font-weight:700;line-height:.8;letter-spacing:-.05em;white-space:nowrap;
  color:var(--ink);user-select:none;
}
.garza-title .garza-w{display:block;animation:title-in 1s var(--ease) backwards}
.garza-title .garza-w1{grid-column:1;justify-self:end}
.garza-title .garza-w2{grid-column:3;justify-self:start;animation-delay:.08s}

.garza-subject{
  position:absolute;z-index:4;left:var(--cx);bottom:0;translate:-50% 0;
  height:var(--subj-h);width:auto;max-width:none;
  filter:drop-shadow(0 26px 34px rgba(87,41,62,.16));
  transform-origin:50% 100%;
  animation:subject-in 1.1s var(--ease) .1s backwards;
}

/* glossy hearts */
.garza-heart{position:absolute;z-index:3;display:block;height:auto;filter:drop-shadow(0 14px 16px rgba(139,51,87,.32));
  animation:pop .8s var(--ease) 1s backwards,float 7s ease-in-out 1.8s infinite}
.garza-heart--a{left:calc(var(--cx) + var(--subj-h)*.30);top:calc(100% - var(--subj-h)*.93);width:calc(var(--subj-h)*.105);rotate:14deg}
.garza-heart--b{left:calc(var(--cx) + var(--subj-h)*.135);top:calc(100% - var(--subj-h)*1);width:calc(var(--subj-h)*.058);rotate:-16deg;animation-delay:1.15s,2.4s;animation-duration:.8s,8.5s}
.garza-heart--c{left:calc(var(--cx) - var(--subj-h)*.245);top:calc(100% - var(--subj-h)*.86);width:calc(var(--subj-h)*.05);rotate:-10deg;animation-delay:1.3s,3s;animation-duration:.8s,7.5s}

/* ───────────── top bar ───────────── */
.garza-topbar{position:absolute;z-index:10;top:var(--pad);left:var(--pad);right:var(--pad);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}
.garza-brand{justify-self:start;display:inline-flex;align-items:flex-start;font-weight:700;font-size:clamp(20px,1.75vw,27px);letter-spacing:-.035em;line-height:1}
.garza-brand svg{width:.62em;height:auto;margin:-.14em 0 0 .14em;filter:drop-shadow(0 4px 5px rgba(139,51,87,.35))}
.garza-topbar__actions{justify-self:end;display:flex;align-items:center;gap:10px}

/* ───────────── left cluster (specialty tiles + stat) ───────────── */
.garza-tiles{position:absolute;z-index:6;left:var(--pad);top:var(--top-offset);display:flex;gap:8px;animation:rise .7s var(--ease) .55s backwards}
.garza-tile{width:var(--tile);height:var(--tile);display:grid;place-items:center;border-radius:calc(var(--tile)*.34);color:var(--ink)}
.garza-tile .garza-ic{width:46%;height:46%;stroke-width:1.9}
.garza-tile--1{background:#f1dee5}
.garza-tile--2{background:#e9ccd6}
.garza-tile--3{background:linear-gradient(160deg,var(--hot-a),var(--hot-b));color:#fff}
.garza-tile--4{background:#f6eaee}

.garza-stat{position:absolute;z-index:6;left:var(--pad);top:calc(var(--top-offset) + var(--tile) + 12px);
  width:clamp(196px,16.5vw,244px);padding:16px 18px;border-radius:24px;background:rgba(36,19,30,.95);color:#fff;
  box-shadow:0 22px 40px -22px rgba(43,19,32,.8);animation:rise .7s var(--ease) .62s backwards}
.garza-stat__num{font-weight:500;font-size:clamp(30px,2.7vw,40px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.garza-stat__label{margin-top:6px;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.74)}
.garza-stat__faces{display:flex;margin-top:16px}
.garza-face{width:28px;height:28px;margin-left:-9px;border-radius:50%;display:grid;place-items:center;border:2px solid #2c1824;color:rgba(33,19,27,.55);overflow:hidden}
.garza-face:first-child{margin-left:0}
.garza-face svg{width:100%;height:100%;fill:currentColor;stroke:none}
.garza-face--1{background:linear-gradient(160deg,#f3e3e8,#e9b0c4)}
.garza-face--2{background:linear-gradient(160deg,#edd4dd,#e297b2)}
.garza-face--3{background:linear-gradient(160deg,#f7edf0,#eed7df)}
.garza-face--4{background:linear-gradient(160deg,var(--hot-a),var(--hot-b));color:#fff}
.garza-face--4 .garza-ic{width:58%;height:58%;fill:#fff;stroke:#fff;stroke-width:1.5}

/* ───────────── tagline chips over the subject ───────────── */
.garza-chips{position:absolute;z-index:6;left:calc(var(--cx) - var(--subj-h)*.27);top:calc(100% - var(--subj-h)*.29);
  display:grid;justify-items:start;gap:8px;font-size:clamp(12.5px,1.08vw,16px)}
.garza-chips .garza-row{display:flex;gap:8px;animation:rise .7s var(--ease) backwards}
.garza-chips .garza-row:nth-child(1){animation-delay:.85s}
.garza-chips .garza-row:nth-child(2){animation-delay:.93s;margin-left:2.2em}
.garza-chips .garza-row:nth-child(3){animation-delay:1.01s;margin-left:.6em}
.garza-chip{position:relative;display:inline-flex;align-items:center;padding:.62em 1.15em;border-radius:999px;font-weight:500;line-height:1.2;white-space:nowrap;
  box-shadow:0 10px 22px -12px rgba(51,23,37,.65)}
.garza-chip--a{background:linear-gradient(160deg,var(--hot-a),var(--hot-b));color:#fff}
.garza-chip--b{background:var(--rose-200)}
.garza-chip--c{background:var(--plum);color:#fff}
.garza-chip--d,.garza-chip--e{background:rgba(255,255,255,.94);border:1px solid rgba(33,19,27,.85)}
.garza-cursor{position:absolute;right:-.85em;bottom:-1.15em;width:1.7em;height:1.7em;filter:drop-shadow(0 4px 5px rgba(33,19,27,.35))}

/* ───────────── dock: CTA (left) + section navigation (right) ───────────── */
.garza-dock{position:absolute;inset:0;pointer-events:none}
.garza-book{position:absolute;z-index:8;left:var(--pad);bottom:var(--pad);pointer-events:auto;animation:rise .7s var(--ease) .7s backwards}
.garza-cta{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"ic go" "title title" "sub sub";align-items:start;
  width:clamp(240px,20.5vw,300px);padding:16px 16px 18px 18px;border-radius:28px;background:#fff;color:var(--ink);
  box-shadow:0 22px 40px -20px rgba(69,29,47,.7);transition:translate .35s var(--ease)}
.garza-cta:hover{translate:0 -4px}
.garza-cta__ic{grid-area:ic;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--rose-200)}
.garza-cta__title{grid-area:title;margin-top:18px;font-weight:700;font-size:clamp(19px,1.65vw,25px);line-height:1.1;letter-spacing:-.03em}
.garza-cta__sub{grid-area:sub;margin-top:7px;font-size:12.5px;line-height:1.35;color:var(--ink-soft)}
.garza-cta .garza-go{grid-area:go;width:54px;height:54px;border:0;background:linear-gradient(160deg,var(--hot-a),var(--hot-b));color:#fff;
  animation:ring 2.4s ease-out 2.4s 3}
.garza-cta .garza-go .garza-ic{width:24px;height:24px;stroke-width:2}
.garza-cta:hover .garza-go{background:var(--ink)}

.garza-sections{position:absolute;z-index:8;top:var(--top-offset);right:var(--pad);bottom:var(--pad);width:min(600px,48vw);
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;pointer-events:none}
.garza-sections a{pointer-events:auto}
.garza-sections__top{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.garza-sections__bottom{display:flex;gap:10px}

.garza-card{position:relative;display:flex;color:var(--ink);border-radius:24px;box-shadow:0 18px 32px -20px rgba(64,28,44,.7);
  transition:translate .35s var(--ease),box-shadow .35s var(--ease);animation:rise .7s var(--ease) backwards;animation-delay:calc(.66s + var(--i,0)*.08s)}
.garza-card:hover{translate:0 -4px;box-shadow:0 26px 36px -22px rgba(64,28,44,.8)}
.garza-card--soft{background:linear-gradient(160deg,#f7ecf0,var(--rose-200))}
.garza-card--hot{background:linear-gradient(160deg,var(--hot-a),var(--hot-b));color:#fff}
.garza-card--plum{background:rgba(39,22,32,.94);color:#fff}

.garza-card__ic{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:none}
.garza-card--soft .garza-card__ic{background:rgba(255,255,255,.75)}
.garza-card--hot .garza-card__ic{background:rgba(255,255,255,.18)}
.garza-card--plum .garza-card__ic{background:rgba(255,255,255,.12)}
.garza-card__title{display:block;font-weight:700;font-size:clamp(14px,1.1vw,16px);line-height:1.15;letter-spacing:-.015em}
.garza-card__sub{display:block;margin-top:3px;font-size:clamp(11px,.85vw,12px);line-height:1.35;opacity:.8}

.garza-go{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;border:1.5px solid rgba(33,19,27,.28);
  transition:background-color .3s,color .3s,border-color .3s}
.garza-go .garza-ic{width:16px;height:16px;transition:translate .3s var(--ease)}
.garza-card:hover .garza-go .garza-ic,.garza-cta:hover .garza-go .garza-ic{translate:2px -2px}
.garza-card--hot .garza-go,.garza-card--plum .garza-go{border-color:rgba(255,255,255,.42)}
.garza-card--soft:hover .garza-go{background:var(--ink);border-color:var(--ink);color:#fff}
.garza-card--hot:hover .garza-go,.garza-card--plum:hover .garza-go{background:#fff;border-color:#fff;color:var(--ink)}

.garza-card--row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px 12px 12px;width:clamp(236px,21vw,300px)}
.garza-sections__top .garza-card--row:nth-child(2){width:clamp(222px,19.4vw,278px)}
.garza-card--tall{flex-direction:column;justify-content:space-between;width:clamp(124px,11.2vw,166px);height:clamp(136px,19vh,184px);padding:14px}
.garza-card__head{display:flex;justify-content:space-between;align-items:flex-start}

/* ───────────── motion ───────────── */
@keyframes rise{from{opacity:0;translate:0 16px}}
@keyframes title-in{from{opacity:0;translate:0 .16em}}
@keyframes subject-in{from{opacity:0;scale:.965}}
@keyframes pop{from{opacity:0;scale:.4}}
@keyframes float{50%{translate:0 -10px}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(169,63,105,.55)}70%,100%{box-shadow:0 0 0 16px rgba(169,63,105,0)}}

/* ───────────── short desktop screens ───────────── */
@media (min-width:1025px) and (max-height:760px){
  .garza-hero{--top-offset:calc(var(--pad) + 66px)}
  .garza-stat{padding:13px 16px}.garza-stat__faces{margin-top:12px}
  .garza-card--row{padding:9px 12px 9px 10px}.garza-card--row .garza-card__ic{width:34px;height:34px}
  .garza-card__sub{display:none}
  .garza-card--tall{height:clamp(112px,17vh,150px)}
  .garza-cta__title{margin-top:12px}
}

/* ───────────── mobile / portrait: stacked composition with bottom sheet ───────────── */
@media (max-width:1024px),(max-aspect-ratio:10/11){
  :root{--pad:16px}
  .garza-hero{
    --cx:50%;
    --title-fs:min(18.4vw,172px);
    --sub-top:calc(var(--title-fs)*.8 + 12px);
    --tile:clamp(40px,12.4vw,54px);
    height:auto;min-height:calc(100svh - var(--gutter)*2 - var(--mbar-h,0px)); /* en la app móvil la barra fija inferior cabe dentro de la primera pantalla */
    display:flex;flex-direction:column;border-radius:28px;
  }
  @supports not (height:100svh){.garza-hero{min-height:calc(100vh - var(--gutter)*2 - var(--mbar-h,0px))}}
  .garza-zone{display:none}

  .garza-topbar{position:relative;inset:auto;z-index:10;padding:var(--pad) var(--pad) 0;grid-template-columns:1fr auto}
  .garza-topbar .garza-btn--hot{display:none}
  .garza-topbar .garza-btn--ghost{width:46px;padding:0;border-radius:50%}
  .garza-topbar .garza-btn--ghost span{display:none}

  .garza-stage{position:relative;inset:auto;z-index:1;flex:1 1 auto;min-height:clamp(400px,110vw,590px)}
  .garza-halo{width:130vw;max-width:900px;bottom:-14%}
  .garza-title{left:0;right:0;width:auto;top:10px;display:flex;justify-content:center;gap:.2em}
  .garza-title .garza-w1,.garza-title .garza-w2{grid-column:auto;justify-self:auto}
  .garza-subject{height:calc(100% - var(--sub-top));max-height:150vw}

  .garza-heart{z-index:5}
  .garza-heart--a{left:auto;right:6%;top:calc(var(--sub-top) + var(--tile)*2 + 30px);width:clamp(46px,15vw,74px)}
  .garza-heart--b{left:auto;right:calc(var(--pad) + var(--tile)*2 + 18px);top:calc(var(--sub-top) - 6px);width:clamp(24px,7vw,36px)}
  .garza-heart--c{left:5%;top:calc(var(--sub-top) + 150px);width:clamp(30px,10vw,52px)}

  .garza-tiles{display:none}
  .garza-stat{display:none}

  .garza-chips{left:var(--pad);right:auto;top:auto;bottom:calc(26px + 24px);font-size:clamp(11.5px,3.4vw,15px);gap:6px}
  .garza-chips .garza-row{gap:6px}

  .garza-dock{position:relative;inset:auto;z-index:5;margin-top:-26px;pointer-events:auto;
    display:grid;gap:10px;padding:20px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom,0px));
    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}
  .garza-book{position:static;width:100%;max-width:640px;margin-inline:auto;animation:none}
  .garza-cta{width:100%;grid-template-columns:1fr auto;grid-template-areas:"title go" "sub go";align-items:center;padding:16px 16px 16px 20px;border-radius:26px}
  .garza-cta__ic{display:none}
  .garza-cta__title{margin-top:0;font-size:clamp(18px,5.2vw,23px)}
  .garza-cta__sub{margin-top:4px}
  .garza-cta .garza-go{width:52px;height:52px}

  .garza-sections{position:static;width:100%;max-width:640px;margin-inline:auto;
    display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .garza-sections__top,.garza-sections__bottom{display:contents}
  .garza-card{border-radius:20px;box-shadow:0 14px 24px -16px rgba(64,28,44,.7)}
  .garza-card--row,.garza-sections__top .garza-card--row:nth-child(2){grid-column:span 3;width:auto;grid-template-columns:auto 1fr;padding:10px 12px 10px 10px;min-height:60px}
  .garza-card--row .garza-card__sub,.garza-card--row .garza-go,.garza-card--tall .garza-card__sub,.garza-card--tall .garza-go{display:none}
  .garza-card--tall{grid-column:span 2;width:auto;height:auto;min-height:88px;padding:12px}
  .garza-card__title{font-size:clamp(13.5px,3.9vw,16px)}
  .garza-card--tall .garza-card__ic{width:34px;height:34px;border-radius:12px}
}

/* very small phones */
@media (max-width:360px){
  .garza-chips .garza-row:nth-child(2){margin-left:1em}
  .garza-heart--b{display:none}
}

/* landscape phones and short tablets: keep the sheet compact */
@media (max-height:520px) and (orientation:landscape) and (max-width:960px){
  .garza-hero{--title-fs:min(11vw,110px)}
  .garza-stage{min-height:clamp(320px,52vw,420px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}