/* ============================================================
   VoyCreciendo — theme.css
   Sistema de diseño centralizado. Tokens replicados como
   variables CSS para uso fuera de utilidades Tailwind.
   ============================================================ */
:root {
  --brand: #3A8A5F;
  --brand-dark: #2C6B49;
  --brand-soft: #EAF3ED;
  --accent: #E0A83E;
  --accent-dark: #C68F28;
  --cream: #FAF8F3;
  --ink: #2C3A2E;
  --ink-soft: #5B6B5E;
  --state-normal: #3A8A5F;
  --state-risk: #D9A036;
  --state-alert: #C0392B;
  --shadow-soft: 0 8px 24px rgba(58,138,95,.08);
  --radius: 0.75rem;
}

html, body { overflow-x: hidden; max-width: 100%; }
body { font-family: 'Nunito Sans', system-ui, sans-serif; color: var(--ink); }
h1,h2,h3,.font-display { font-family: 'Fraunces', Georgia, serif; }

/* Contener anuncios AdSense para que su iframe no fuerce scroll horizontal en móvil */
ins.adsbygoogle { display:block; max-width:100%; overflow:hidden; margin:0 auto; }

/* --- Botones --- */
.btn { display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-weight:700; border-radius:var(--radius);
  padding:.75rem 1.5rem; transition:all .2s ease; cursor:pointer;
  text-decoration:none; line-height:1.2; border:2px solid transparent; }
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.btn:active { transform:translateY(1px); }

.btn-primary { background:var(--accent); color:var(--ink); box-shadow:var(--shadow-soft); }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-1px); }

.btn-secondary { background:var(--brand); color:#fff; }
.btn-secondary:hover { background:var(--brand-dark); transform:translateY(-1px); }

.btn-tertiary { background:transparent; color:var(--brand); border-color:var(--brand); }
.btn-tertiary:hover { background:var(--brand-soft); }

/* --- Tarjetas --- */
.vc-card { background:#fff; border:1px solid var(--brand-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease; }
.vc-card:hover { transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(58,138,95,.12); }

/* --- Inputs --- */
.vc-input { width:100%; border:1px solid var(--brand-soft); border-radius:.5rem;
  padding:.6rem .8rem; font-size:1rem; color:var(--ink); background:#fff; }
.vc-input:focus { outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(58,138,95,.18); }
.vc-label { font-weight:600; color:var(--ink); display:block; margin-bottom:.35rem; }

/* --- Atmósfera orgánica del hero --- */
.vc-hero { position:relative; background:var(--cream); overflow:hidden; }
.vc-hero::before, .vc-hero::after { content:""; position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.35; z-index:0; pointer-events:none; }
.vc-hero::before { width:340px; height:340px; background:var(--brand);
  top:-80px; left:-60px; }
.vc-hero::after { width:300px; height:300px; background:var(--accent);
  bottom:-90px; right:-50px; opacity:.28; }
.vc-hero > * { position:relative; z-index:1; }

/* --- Logo limpio: contenedor circular claro (respaldo si el PNG no es transparente) --- */
.vc-logo-frame { background:#fff; border-radius:50%; padding:.5rem;
  box-shadow:var(--shadow-soft); display:inline-flex; }

/* --- Logo sobre círculo oscuro: oculta bordes irregulares del recorte transparente --- */
.vc-logo-dark { display:inline-flex; aspect-ratio:1/1; max-width:100%;
  border-radius:50%; overflow:hidden; background:#14211a;
  box-shadow:0 10px 30px rgba(20,33,26,.25);
  border:4px solid var(--accent); }
.vc-logo-dark > img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* Variante grande (bloque centrado) */
.vc-logo-dark--xl { display:block; width:288px; height:288px; margin-left:auto; margin-right:auto; }
/* Variante mediana (hero / CTA / resultados) */
.vc-logo-dark--lg { display:block; width:140px; height:140px; margin-left:auto; margin-right:auto; }
/* Variante compacta (nav / footer) — borde más fino */
.vc-logo-dark--sm { border-width:2px; }

/* --- Entrada en cascada --- */
@keyframes vc-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.vc-rise { opacity:0; animation:vc-rise .7s ease forwards; }
.vc-delay-1 { animation-delay:.1s; } .vc-delay-2 { animation-delay:.25s; }
.vc-delay-3 { animation-delay:.4s; } .vc-delay-4 { animation-delay:.55s; }
@media (prefers-reduced-motion: reduce) {
  .vc-rise { animation:none; opacity:1; } }

/* --- Estados clínicos (semáforo, SOLO datos) --- */
.state-normal { background:var(--state-normal); color:#fff; }
.state-risk   { background:var(--state-risk);   color:#3a2e00; }
.state-alert  { background:var(--state-alert);  color:#fff; }