/* ========================================================================
   CAPA 3 · COMPONENTES REUTILIZABLES
   ------------------------------------------------------------------------
   Primitivas que se usan en varias secciones: botones, tarjetas, chips,
   tooltips y la animación de aparición (.reveal). Consume tokens.
   ======================================================================== */

/* ----------------------------- BOTONES --------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:54px; padding:0 26px; border-radius:var(--r-btn);
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:background .15s, border-color .15s, transform .06s, box-shadow .15s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:#1E3F53; box-shadow:var(--shadow-lift); }
.btn-amber{ background:var(--amber); color:#3A2A06; }
.btn-amber:hover{ background:#D29B2C; box-shadow:var(--shadow-lift); }
.btn-secondary{ background:var(--amber-soft); color:var(--amber-text); }
.btn-secondary:hover{ background:#EFDBB2; }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line-strong); }
.btn-ghost:hover{ background:#EDF1F2; border-color:var(--navy); }
.btn-ghost.on-navy{ color:#fff; border-color:rgba(255,255,255,.32); background:transparent; }
.btn-ghost.on-navy:hover{ background:rgba(255,255,255,.08); }
.btn-lg{ height:58px; padding:0 32px; font-size:17px; }
.btn-block{ width:100%; }

/* ----------------------------- TARJETAS -------------------------------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:30px; box-shadow:var(--shadow-card); }
.card-info{ background:var(--info-bg); border:1px solid var(--info-border); }
.card-amber{ background:var(--amber-soft); border:none; color:#6B4E12; }
.note-honest{
  display:flex; gap:13px; align-items:flex-start; background:var(--info-bg);
  border:1px solid var(--info-border); border-radius:14px; padding:16px 18px;
  font-size:14.5px; line-height:1.5; color:var(--navy-ink); text-wrap:pretty;
}
.note-honest .nh-ic{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; }

/* --------------------------- CHIPS / BADGES ---------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:99px;
  font-size:13px; font-weight:600; padding:5px 12px;
}
.chip-amber{ background:var(--amber-soft); color:var(--amber-text); }
.chip-green{ background:#DCEFE3; color:var(--green); }
.chip-green .gdot{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.tag-est{ font-size:.62em; font-weight:600; color:var(--amber-text); letter-spacing:.02em; vertical-align:middle; }

/* ----------------------------- TOOLTIP "i" ----------------------------- */
.tip{ position:relative; display:inline-flex; vertical-align:middle; }
.tip-i{
  width:19px; height:19px; border-radius:50%; position:relative;
  border:1.4px solid var(--amber-text); color:var(--amber-text);
  font-style:italic; font-weight:700; font-size:11px; font-family:Georgia,serif;
  display:inline-flex; align-items:center; justify-content:center; cursor:help; background:none;
}
/* área táctil ampliada (~45px) sin cambiar el tamaño visual */
.tip-i::before{ content:""; position:absolute; inset:-13px; }
.tip-i.on-navy{ border-color:var(--amber); color:var(--amber); }
.tip-bubble{
  position:absolute; bottom:150%; left:50%; transform:translateX(-50%) translateY(4px);
  width:250px; background:var(--navy-ink); color:#fff; font-size:12.5px; line-height:1.45;
  font-weight:400; text-align:left; text-wrap:pretty; padding:12px 14px; border-radius:11px;
  z-index:60; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
  box-shadow:0 10px 26px rgba(18,38,49,.3); letter-spacing:normal; text-transform:none;
}
.tip-bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--navy-ink); }
.tip:hover .tip-bubble, .tip:focus-within .tip-bubble{ opacity:1; transform:translateX(-50%) translateY(0); }
.tip-right .tip-bubble{ left:auto; right:-8px; transform:translateX(0) translateY(4px); }
.tip-right:hover .tip-bubble, .tip-right:focus-within .tip-bubble{ transform:translateX(0) translateY(0); }
.tip-right .tip-bubble::after{ left:auto; right:11px; transform:none; }

/* ----------------------- REVEAL (aparición scroll) --------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }