/* =============================================================================
   sintomas.css — CAPA 3 de 3: LAYOUT DE LA PÁGINA "SÍNTOMAS"
   Solo secciones de esta página. Carga después de base.css y shop.css.
   -----------------------------------------------------------------------------
   INVARIANTE: aquí no se redefine ningún componente de base.css ni de shop.css.
   Se comprueba con:
     grep -nE '^\.(btn|nav|topbar|iconbtn|tools|logo|sucrow|sacts|pcard|chip-f|
                    ann|foot|scrim|cart|cmdk|news|cofstrip|prods|toast|sk-row|
                    sk-th|sk-line|stock|branchsel|wafab|empty|reveal|band-|
                    sr-only|skip|eyebrow|sec-head|linkmore|imgwrap|ic|wrap)\b' sintomas.css
   Debe devolver cero líneas. (`.hero` y `.sk-grid` viven en home.css, NO en
   base.css/shop.css: no hay colisión de cascada porque home.css nunca se carga
   junto a esta hoja — ver nota igual en catalogo.css.)
   ============================================================================= */

/* ===========================================================================
   HERO BAJO — mismo bloque que catalogo.css (copiado de home.css §HERO).
   =========================================================================== */
.hero{ position:relative; isolation:isolate; min-height:clamp(300px,38svh,420px); display:flex; align-items:flex-end; overflow:clip; }
.hero .bg{ position:absolute; inset:0; z-index:0; background:var(--navy-deep); }
.hero .bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; filter:brightness(.82) saturate(.92) contrast(1.02); }
.hero .hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(11,23,54,.84) 0%, rgba(11,23,54,.74) 30%, rgba(11,23,54,.38) 52%, rgba(11,23,54,0) 74%),
    linear-gradient(to top, rgba(11,23,54,.55) 0%, rgba(11,23,54,.18) 28%, rgba(11,23,54,0) 52%),
    linear-gradient(0deg, rgba(11,23,54,.22), rgba(11,23,54,.22));
}
.hero .wrap{ position:relative; z-index:2; }
.hero .inner{ color:#fff; padding:var(--s7) 0 var(--s6); max-width:min(620px,60%); }
.crumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; color:#DDE4F2; margin-bottom:14px;
}
.crumb a{ color:#fff; opacity:.86; }
.crumb a:hover{ opacity:1; text-decoration:underline; }
.crumb .sep{ opacity:.6; }
.crumb .here{ color:#fff; }
.hero h1{
  font-size:clamp(30px,4vw,46px); font-weight:800; margin:0;
  letter-spacing:-.02em; line-height:1.05; color:#fff;
  text-shadow:0 1px 2px rgba(11,23,54,.5), 0 10px 40px rgba(11,23,54,.35);
}
.hero .hsub{
  font-size:var(--fs-md); margin-top:10px; max-width:56ch; color:#E9EDF7;
  text-shadow:0 1px 2px rgba(11,23,54,.4);
}
@media(max-width:820px){
  .hero{ min-height:0; display:block; background:var(--navy-900); overflow:visible; }
  .hero .bg{ position:relative; height:220px; min-height:200px; }
  .hero .hero-scrim{
    top:0; bottom:auto; height:220px; min-height:200px;
    background:linear-gradient(to top, var(--navy-900) 0%, rgba(11,23,54,.62) 46%, rgba(11,23,54,.24) 100%);
  }
  .hero .inner{ max-width:none; padding:var(--s5) 0 var(--s6); }
}
@media(forced-colors:active){
  .hero .bg{ display:none; }
  .hero .hero-scrim{ background:Canvas; }
}

/* ===========================================================================
   ASISTENTE DE 3 PASOS — el mostrador digitalizado.
   Nunca diagnostica: orienta y, si el síntoma lo amerita (ctaConsult), deriva
   a consulta con médico homeópata. Ver bloque .wiz-disclaimer más abajo.
   =========================================================================== */
.wizshell{ padding:var(--s8) 0; }
.wizcard{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); max-width:920px; margin:0 auto; overflow:hidden;
}
.wizbar{ padding:22px var(--s6) 0; }
.wizsteps{ display:flex; align-items:center; gap:0; margin-bottom:18px; }
.wizstep{
  flex:1; display:flex; flex-direction:column; gap:8px; position:relative; text-align:center;
}
.wizstep .num{
  /* position+z-index son OBLIGATORIOS, no cosméticos: la línea conectora es un
     ::before posicionado con z-index:0, y por el orden de pintado de CSS un
     elemento posicionado siempre se dibuja por encima de un hermano no
     posicionado, por opaco que sea su fondo. Sin esto, la línea cruza por encima
     de los círculos numerados. */
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:50%; margin:0 auto; display:grid; place-items:center;
  background:var(--sunken); border:1px solid var(--line-strong); color:var(--ink-muted);
  font-family:var(--font-display); font-weight:700; font-size:13px; transition:background .2s,border-color .2s,color .2s;
}
.wizstep .lbl{ font-size:11.5px; font-weight:600; color:var(--ink-muted); }
.wizstep::before{
  content:""; position:absolute; top:16px; left:-50%; width:100%; height:2px;
  background:var(--line-strong); z-index:0;
}
.wizstep:first-child::before{ display:none; }
.wizstep.done .num{ background:var(--accent); border-color:var(--accent); color:#fff; }
.wizstep.done::before{ background:var(--accent); }
.wizstep[aria-current="step"] .num{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); }
.wizstep[aria-current="step"] .lbl{ color:var(--ink); }

.wizbody{ padding:8px var(--s6) var(--s6); min-height:280px; }
.wizpane{ display:none; }
.wizpane.on{ display:block; animation:wizfade .3s ease; }
@keyframes wizfade{ from{ opacity:0; transform:translateY(6px); } }
@media(prefers-reduced-motion:reduce){ .wizpane.on{ animation:none; } }

.wizhead{ margin-bottom:var(--s5); }
.wizhead h2{ font-size:clamp(20px,2.6vw,26px); margin-bottom:6px; }
.wizhead p{ color:var(--ink-muted); font-size:14px; }

.symgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:760px){ .symgrid{ grid-template-columns:1fr 1fr; } }
.symcard{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:20px 14px; border-radius:var(--radius); border:1.5px solid var(--line-strong);
  background:var(--surface); cursor:pointer; transition:border-color .18s, box-shadow .18s, transform .18s;
  min-height:120px; justify-content:center;
}
.symcard:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.symcard.on{ border-color:var(--accent); background:var(--accent-tint); box-shadow:var(--shadow-sm); }
.symcard .sic{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--sunken); color:var(--sage);
}
.symcard.on .sic{ background:#fff; }
.symcard .sname{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.25; }

.opt-row{ display:flex; flex-direction:column; gap:10px; }
.opt-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border:1.5px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface); cursor:pointer; text-align:left; font-size:14.5px; color:var(--ink);
  transition:border-color .18s, background .18s;
}
.opt-btn:hover{ border-color:var(--accent); }
.opt-btn.on{ border-color:var(--accent); background:var(--accent-tint); }
.opt-btn .ic{ color:var(--accent); opacity:0; transition:opacity .15s; }
.opt-btn.on .ic{ opacity:1; }

.wizresult{ display:flex; flex-direction:column; gap:var(--s5); }
.wizresult-sym{ display:flex; align-items:center; gap:12px; }
.wizresult-sym .sic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--accent-tint); color:var(--sage); flex:none; }
.wizresult-sym h2{ font-size:22px; }
.wizedu{ color:var(--ink-muted); font-size:14.5px; line-height:1.65; }

/* Bloque FIJO — la leyenda/derivación jamás vive dentro de un tab o acordeón. */
.wiz-disclaimer{
  display:flex; gap:12px; align-items:flex-start; background:var(--accent-tint);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:14px 16px; font-size:13px; color:var(--ink);
}
.wiz-disclaimer .ic{ color:var(--accent); flex:none; margin-top:1px; }
.wiz-disclaimer b{ color:var(--primary); }

.wizprods{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:760px){ .wizprods{ grid-template-columns:1fr 1fr; } }

.wizfoot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px var(--s6); border-top:1px solid var(--line); background:var(--sunken);
}
.wizfoot .step-info{ font-size:12.5px; color:var(--ink-muted); }

/* ===========================================================================
   REJILLA DE LOS 12 SÍNTOMAS — enlazable por ancla (#slug)
   =========================================================================== */
.symsec{ padding:var(--s9) 0; }
.symlist-index{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s7);
}
.symlist-index a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border-radius:var(--radius-pill); background:var(--sunken); border:1px solid var(--line-strong);
  color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:12.5px;
}
.symlist-index a:hover{ border-color:var(--accent); color:var(--accent); }

.symentry{
  display:grid; grid-template-columns:1fr 1.15fr; gap:var(--s7);
  padding:var(--s7) 0; border-top:1px solid var(--line); align-items:start;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.symentry:first-child{ border-top:none; padding-top:0; }
@media(max-width:900px){ .symentry{ grid-template-columns:1fr; gap:var(--s5); } }
.symentry.open .symentry-toggle .ic{ transform:rotate(180deg); }
.symentry-copy .eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.symentry-copy .sic{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--accent-tint); color:var(--sage); flex:none; }
.symentry-copy h3{ font-size:clamp(20px,2.4vw,26px); margin-bottom:10px; }
.symentry-copy .edu{ color:var(--ink-muted); font-size:14.5px; line-height:1.65; margin-bottom:14px; }
.symentry-disclaimer{
  display:flex; gap:10px; align-items:flex-start; background:var(--sunken);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  font-size:12.5px; color:var(--ink-muted); margin-bottom:14px;
}
.symentry-disclaimer .ic{ color:var(--accent); flex:none; margin-top:1px; }
.symentry-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.symentry-prods{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:560px){ .symentry-prods{ grid-template-columns:1fr; } }
.symentry-prods .pcard{ padding:8px; }
.symentry-prods .pcard .imgwrap{ aspect-ratio:1/1; }

/* ===========================================================================
   FRANJA DE DERIVACIÓN — recordatorio permanente de que el asistente orienta,
   no diagnostica. Vive fuera del wizard para que se lea aun sin completarlo.
   =========================================================================== */
.orientaband{ background:var(--bg-alt); padding:var(--s6) 0; }
.orientaband .row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; }
.orientaband p{ color:var(--ink-muted); font-size:13.5px; max-width:62ch; }
.orientaband strong{ color:var(--ink); }