/* OnPedCare — Secção "A história da Dra. Tatiana" (lúdico). Tudo escopado em .drh para não colidir com app.css */
.drh{
  --teal:#3F9497; --berry:#B46594; --terra:#DD8252; --gold:#BF9D34; --ink:#1F574E; --bg-warm:#faf6f0;
  display:block; background:var(--bg-warm); color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif; overflow-x:hidden;
}
.drh *{box-sizing:border-box}
.drh-wrap{max-width:980px;margin:0 auto;padding:0 24px}

/* INTRO */
.drh-intro{position:relative;overflow:hidden;padding:74px 0 30px}
.drh-intro-grid{display:grid;grid-template-columns:290px 1fr;gap:44px;align-items:center}
.drh-photo{position:relative;border-radius:50% 50% 48% 52%/52% 48% 52% 48%;overflow:hidden;background:#fff;
  aspect-ratio:1/1;box-shadow:0 24px 60px rgba(31,87,78,.18);border:7px solid #fff}
.drh-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.drh-fb{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 70% 20%,#fff,#f1e9dd)}
.drh-fb img{width:74%}
.drh-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.72rem;color:var(--teal)}
.drh-eyebrow::before{content:"";width:26px;height:2px;background:var(--terra);border-radius:2px}
.drh-intro h1{font-weight:800;line-height:1.05;font-size:clamp(2rem,4.6vw,3rem);margin:14px 0 6px;color:var(--berry)}
.drh-role{font-weight:300;font-size:1.12rem;margin:0 0 18px}
.drh-lead{font-weight:300;font-size:1.04rem;line-height:1.65;max-width:52ch;margin:0 0 20px;color:#314a45}
.drh-lead b{font-weight:600;color:var(--ink)}
.drh-cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--berry),#9d4f80);padding:13px 22px;border-radius:14px;
  box-shadow:0 8px 22px rgba(180,101,148,.3);transition:transform .15s ease}
.drh-cta:hover{transform:translateY(-2px)}
.drh-cta svg{width:19px;height:19px}
.drh-handle{font-weight:300;font-size:.88rem;color:#6b7c78;margin-left:14px}

/* STORY */
.drh-story{position:relative;padding:18px 0 70px}
.drh-clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.drh-cloud{position:absolute;background:#fff;border-radius:50%;filter:blur(2px);opacity:.55;
  box-shadow:40px 0 0 6px #fff,90px 6px 0 -2px #fff,-36px 6px 0 0 #fff}
.drh-cloud.c1{width:60px;height:60px;top:8%;left:6%;animation:drh-drift 22s linear infinite}
.drh-cloud.c2{width:46px;height:46px;top:32%;right:8%;animation:drh-drift 28s linear infinite reverse}
.drh-cloud.c3{width:54px;height:54px;top:62%;left:10%;animation:drh-drift 25s linear infinite}
.drh-cloud.c4{width:40px;height:40px;top:84%;right:12%;animation:drh-drift 30s linear infinite reverse}
@keyframes drh-drift{0%{transform:translateX(0)}50%{transform:translateX(26px)}100%{transform:translateX(0)}}

.drh-tlhead{text-align:center;padding:40px 0 6px;position:relative;z-index:1}
.drh-tlhead h2{font-weight:800;font-size:clamp(1.6rem,3.2vw,2.2rem);margin:8px 0 4px;color:var(--ink)}
.drh-tlhead p{font-weight:300;color:#5d716c;margin:0 auto;max-width:46ch}

.drh-vtl{position:relative;max-width:840px;margin:30px auto 0;z-index:1}
.drh-vtl::before{content:"";position:absolute;top:10px;bottom:10px;left:50%;transform:translateX(-50%);
  border-left:3px dotted rgba(63,148,151,.45)}

.drh-balloon{position:absolute;left:50%;top:0;width:50px;height:auto;z-index:5;transform:translate(-50%,-50%);
  filter:drop-shadow(0 6px 10px rgba(31,87,78,.22));transition:top .14s linear}
.drh-balloon .body{animation:drh-bob 3.4s ease-in-out infinite;transform-origin:center}
@keyframes drh-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}

.drh-stop{position:relative;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;margin:26px 0}
.drh-card{position:relative;background:#fff;border-radius:22px;padding:16px 20px;box-shadow:0 16px 34px rgba(31,87,78,.13);
  border-top:5px solid var(--teal);transition:transform .25s ease}
.drh-stop:nth-child(odd)  .drh-card{grid-column:1;transform:rotate(-1.1deg)}
.drh-stop:nth-child(even) .drh-card{grid-column:3;transform:rotate(1.1deg)}
.drh-card:hover{transform:rotate(0) translateY(-3px)}

.drh-badge{grid-column:2;justify-self:center;width:54px;height:54px;border-radius:50%;background:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;z-index:3;
  box-shadow:0 0 0 6px var(--bg-warm),0 8px 18px rgba(31,87,78,.2)}

.drh-yr{display:inline-block;font-weight:800;font-size:.82rem;letter-spacing:.04em;color:#fff;
  padding:3px 12px;border-radius:999px;margin-bottom:7px;background:var(--teal)}
.drh-card h3{font-weight:700;font-size:1.06rem;margin:0 0 6px;color:var(--ink)}
.drh-card p{font-weight:300;font-size:.9rem;line-height:1.55;margin:0;color:#435853}
.drh-card small{display:inline-block;margin-top:9px;font-weight:600;font-size:.74rem;color:var(--teal);
  background:rgba(63,148,151,.1);padding:5px 11px;border-radius:999px}

/* cores rotativas */
.drh-stop:nth-child(7n+1) .drh-card{border-top-color:var(--teal)}  .drh-stop:nth-child(7n+1) .drh-badge{background:var(--teal)}  .drh-stop:nth-child(7n+1) .drh-yr{background:var(--teal)}
.drh-stop:nth-child(7n+2) .drh-card{border-top-color:var(--berry)} .drh-stop:nth-child(7n+2) .drh-badge{background:var(--berry)} .drh-stop:nth-child(7n+2) .drh-yr{background:var(--berry)}
.drh-stop:nth-child(7n+3) .drh-card{border-top-color:var(--terra)} .drh-stop:nth-child(7n+3) .drh-badge{background:var(--terra)} .drh-stop:nth-child(7n+3) .drh-yr{background:var(--terra)}
.drh-stop:nth-child(7n+4) .drh-card{border-top-color:var(--gold)}  .drh-stop:nth-child(7n+4) .drh-badge{background:var(--gold)}  .drh-stop:nth-child(7n+4) .drh-yr{background:var(--gold)}
.drh-stop:nth-child(7n+5) .drh-card{border-top-color:var(--ink)}   .drh-stop:nth-child(7n+5) .drh-badge{background:var(--ink)}   .drh-stop:nth-child(7n+5) .drh-yr{background:var(--ink)}
.drh-stop:nth-child(7n+6) .drh-card{border-top-color:var(--berry)} .drh-stop:nth-child(7n+6) .drh-badge{background:var(--berry)} .drh-stop:nth-child(7n+6) .drh-yr{background:var(--berry)}
.drh-stop:nth-child(7n+7) .drh-card{border-top-color:var(--terra)} .drh-stop:nth-child(7n+7) .drh-badge{background:var(--terra)} .drh-stop:nth-child(7n+7) .drh-yr{background:var(--terra)}

.drh-confetti{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.85}
.drh-tri{position:absolute;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}

.drh-finale{text-align:center;margin-top:18px;position:relative;z-index:1}
.drh-finale .drh-cta{margin-top:8px}

/* reveal: só esconde quando o JS marca .drh-js (sem JS, tudo visível) */
.drh.drh-js .drh-reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.drh.drh-js .drh-reveal.in{opacity:1;transform:none}

@media (max-width:760px){
  .drh-intro-grid{grid-template-columns:1fr;gap:24px}
  .drh-photo{max-width:230px;margin:0 auto}
  .drh-vtl::before{left:30px}
  .drh-balloon{left:30px}
  .drh-stop{grid-template-columns:60px 1fr;margin:18px 0}
  .drh-stop:nth-child(odd) .drh-card,.drh-stop:nth-child(even) .drh-card{grid-column:2;transform:none}
  .drh-badge{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .drh.drh-js .drh-reveal{opacity:1;transform:none;transition:none}
  .drh-balloon .body,.drh-cloud{animation:none}.drh-card{transform:none!important}
}