/* ============================================================
   CLAF — Cirurgia Íntima · componentes específicos
   (estende claf-v2.css — mesmo sistema malva + dourado · Poppins)
   ============================================================ */

/* eyebrow + gold-rule juntos no cabeçalho de coluna */
.col-head .gold-rule { margin-bottom:16px; }

/* §2 — espelho de dores: 6 cards */
.pain-wall { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:600px){ .pain-wall { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .pain-wall { grid-template-columns:repeat(3,1fr); } }
.pain-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:26px 24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.pain-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--dourado); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-mid) var(--ease-out); }
.pain-card:hover::before { transform:scaleX(1); }
.pain-card .pic { width:52px; height:52px; border-radius:15px; background:var(--malva-50); display:grid; place-items:center; margin-bottom:16px; }
.pain-card h3 { font-size:1.08rem; color:var(--malva-800); margin-bottom:8px; }
.pain-card p { font-size:.93rem; color:var(--text-muted); }

/* §3 — caixa "o que é o FRAXX" */
.whatis { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--dourado); border-radius:var(--r-md); padding:18px 22px; box-shadow:var(--shadow-sm); }
.whatis .plbl { display:block; font-weight:600; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--malva-700); margin-bottom:6px; }
.whatis p { font-size:.96rem; color:var(--text-muted); }
.whatis strong { color:var(--text); font-weight:600; }

/* figura genérica com cap de altura */
.fig-cap img { width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-md); object-fit:cover; aspect-ratio:3/2; max-height:420px; }

/* §4 — cards de procedimento */
.proc-cards { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:680px){ .proc-cards { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .proc-cards { grid-template-columns:repeat(3,1fr); } }
.pcard { background:#fff; border:1px solid var(--border); border-top:3px solid var(--dourado); border-radius:var(--r-md); padding:28px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; }
.pcard .pic { width:46px; height:46px; border-radius:13px; background:var(--malva-50); display:grid; place-items:center; }
.pcard h3 { font-size:1.1rem; color:var(--malva-800); line-height:1.25; }
.pcard h3 small { display:block; font-weight:400; font-size:.78rem; color:var(--text-muted); margin-top:3px; }
.pblock .plbl { display:block; font-weight:600; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--malva-700); margin-bottom:3px; }
.pblock p { font-size:.9rem; color:var(--text-muted); line-height:1.5; }
.pcard .pnote { font-size:.8rem; color:var(--text-muted); font-style:italic; margin-top:auto; }
.pcard.cta-card { background:linear-gradient(150deg,var(--malva) 0%,var(--malva-700) 100%); border:none; justify-content:center; gap:16px; }
.pcard.cta-card h3 { color:#fff; font-size:1.3rem; }
.pcard.cta-card p { color:rgba(255,255,255,.92); font-size:.95rem; }

/* §5 — sem bisturi (lista 2 col) */
.nosurg { list-style:none; display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:600px){ .nosurg { grid-template-columns:repeat(2,1fr); } }
.nosurg li { background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); padding:16px 18px; box-shadow:var(--shadow-sm); font-size:.92rem; color:var(--text-muted); }
.nosurg li strong { display:block; color:var(--malva-800); font-weight:600; margin-bottom:2px; }

/* §6 — marcadores FRAXX (2x2 ao lado da foto) */
.fraxx-grid { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width:900px){ .fraxx-grid { grid-template-columns:1.08fr .92fr; } }
.markers2 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:520px){ .markers2 { grid-template-columns:repeat(2,1fr); } }
.marker { background:var(--malva-50); border:1px solid var(--malva-100); border-radius:var(--r-md); padding:22px; position:relative; }
.marker::before { content:""; position:absolute; top:0; left:24px; width:34px; height:3px; border-radius:0 0 2px 2px; background:var(--dourado); }
.marker .pic { width:42px; height:42px; border-radius:12px; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow-sm); margin-bottom:12px; }
.marker h3 { font-size:1rem; color:var(--malva-800); margin-bottom:6px; }
.marker p { font-size:.86rem; color:var(--text-muted); }
.fxphoto img { width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); object-fit:cover; aspect-ratio:4/5; max-height:480px; }

/* §7 jornada — fotos da jornada (grid 2x2 ao lado dos passos) */
.journey-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.journey-photos img { width:100%; height:100%; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow-sm); aspect-ratio:1/1; }

/* hero image-slot */
.hero-photo image-slot { display:block; width:100%; height:auto !important; aspect-ratio:4/3.4; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-photo image-slot::part(image) { object-position:50% 32%; }
@media (min-width:900px){ .hero-photo image-slot { aspect-ratio:4/3.1; } }

/* pending tag */
.pending-tag { display:inline-block; background:var(--warning-bg); color:var(--warning-text); border:1px solid var(--warning-border); border-radius:6px; padding:1px 9px; font-size:.72rem; font-weight:500; }

/* depoimento pendente (review real a inserir) */
.tst.pending { background:var(--surface); border-style:dashed; align-items:flex-start; justify-content:center; }
.tst.pending .ph { font-size:.86rem; color:var(--text-muted); line-height:1.6; }

/* §7 — CTA intermediário (faixa de respiro, malva claro) */
.cta-mid { background:var(--malva-50); border-top:1px solid var(--malva-100); border-bottom:1px solid var(--malva-100); text-align:center; padding:var(--sp-8) 0; }
.cta-mid h2 { color:var(--malva-800); max-width:22ch; margin:0 auto 14px; }
.cta-mid p { color:var(--text-muted); max-width:52ch; margin:0 auto 26px; }
.cta-mid .gold-rule { margin:0 auto 18px; }

/* hero: entrada por keyframes desativada para garantir visibilidade
   mesmo em aba inativa / impressão / export (conteúdo acima da dobra) */
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .lead,
.hero-badges,
.hero-copy .btn,
.hero-note,
.hero-photo,
.hero-float { animation:none !important; }