/* ==========================================================================
   Recaudar — sistema de estilos
   Identidad de Enter Cooperativa (la misma de Enter Contact).
   Estética tipo apple.com: fondo claro, titulares grandes y apretados, mucho
   aire, secundarios en gris, botones redondeados, un solo color de acento.
   Tipografía Inter, sentence case. Modo claro y oscuro.
   ========================================================================== */

/* --- Inter (self-host). Los .woff2 van en assets/fonts/ (ver assets/fonts/LEER.md).
   Si no están, cae al stack del sistema (Segoe UI / SF / Roboto), muy parecido. --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local("Inter"), url("../fonts/Inter-roman.var.woff2") format("woff2");
}

:root {
  /* Acento: turquesa de Enter Cooperativa (ver SUPUESTOS.md — confirmar hex exacto) */
  --acento: #12b2a6;
  --acento-fuerte: #0e938a;
  --acento-suave: #e6f6f4;

  /* Superficies claras */
  --fondo: #ffffff;
  --fondo-2: #f5f5f7;      /* gris muy claro, tipo apple */
  --panel: #ffffff;
  --linea: #e6e6ea;
  --linea-2: #eeeef1;

  /* Texto */
  --ink: #1d1d1f;          /* casi negro apple */
  --ink-2: #6e6e73;        /* gris secundario */
  --ink-3: #86868b;

  /* Estados */
  --ok: #1a7f5a;  --ok-bg: #e7f5ee;
  --warn: #9a6b00; --warn-bg: #fbf1d9;
  --err: #b42318; --err-bg: #fdeceb;
  --info: #0e6ba8; --info-bg: #e6f0f8;

  --radio: 14px;
  --radio-sm: 10px;
  --radio-lg: 22px;
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.18);
  --sombra-sutil: 0 1px 0 var(--linea);
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ancho: 1120px;
  --paso: 300ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --fondo-2: #0c0c0e;
    --panel: #16161a;
    --linea: #2a2a2e;
    --linea-2: #232327;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #8a8a8f;
    --acento-suave: #0e2b29;
    --ok-bg: #10241c; --warn-bg: #2a2210; --err-bg: #2a1512; --info-bg: #0e1e2c;
    --sombra: 0 1px 2px rgba(0,0,0,.5), 0 8px 30px -18px rgba(0,0,0,.8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--ink);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-size: 17px;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.022em; line-height: 1.06; margin: 0 0 .4em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.015em; }
p { margin: 0 0 1em; color: var(--ink-2); }
a { color: var(--acento-fuerte); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .82rem; }
img, svg { max-width: 100%; }

.contenido { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.seccion { padding: clamp(56px, 9vw, 120px) 0; }
.seccion--gris { background: var(--fondo-2); }
.centrado { text-align: center; }
.plomo { color: var(--ink-2); }
.lead { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--ink-2); max-width: 40ch; }
.centrado .lead { margin-left: auto; margin-right: auto; }
.eyebrow { color: var(--acento-fuerte); font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; margin-bottom: .6em; }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
  padding: .82em 1.5em; border-radius: 980px; border: 1px solid transparent;
  cursor: pointer; transition: background var(--paso), color var(--paso), border-color var(--paso), transform var(--paso);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--primario { background: var(--acento); color: #fff; }
.btn--primario:hover { background: var(--acento-fuerte); }
.btn--fantasma { background: transparent; color: var(--acento-fuerte); border-color: var(--linea); }
.btn--fantasma:hover { border-color: var(--acento); }
.btn--claro { background: var(--panel); color: var(--ink); border-color: var(--linea); }
.btn--claro:hover { border-color: var(--ink-3); }
.btn--bloque { width: 100%; }
.btn--sm { padding: .55em 1em; font-size: .9rem; }

/* Foco visible (accesibilidad) */
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

/* --- Chips de estado --- */
.chip { display: inline-flex; align-items: center; gap: .4em; font-size: .78rem; font-weight: 600;
  padding: .28em .7em; border-radius: 980px; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.chip--ok { color: var(--ok); background: var(--ok-bg); }
.chip--warn { color: var(--warn); background: var(--warn-bg); }
.chip--err { color: var(--err); background: var(--err-bg); }
.chip--info { color: var(--info); background: var(--info-bg); }
.chip--neutro { color: var(--ink-2); background: var(--fondo-2); }

/* --- Tarjetas --- */
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 22px; box-shadow: var(--sombra); }
.grilla { display: grid; gap: 20px; }
.grilla--3 { grid-template-columns: repeat(3, 1fr); }
.grilla--4 { grid-template-columns: repeat(4, 1fr); }
.grilla--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grilla--3, .grilla--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: 1fr; } }

/* --- Logo Enter Cooperativa: sobre recuadro blanco (funciona en dark) --- */
.logo-caja { display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; padding: 7px 10px; border: 1px solid var(--linea); }
.logo-caja img, .logo-caja svg { display: block; height: 24px; width: auto; }

/* --- Encabezado del sitio --- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--fondo) 82%, transparent); border-bottom: 1px solid var(--linea); }
.nav__row { display: flex; align-items: center; gap: 20px; height: 60px; }
.nav__marca { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.nav__marca:hover { text-decoration: none; }
.nav__links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav__links a { color: var(--ink-2); font-size: .95rem; font-weight: 500; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__cta { display: flex; gap: 10px; align-items: center; }
.nav__burger { display: none; margin-left: auto; background: none; border: 0; color: var(--ink); font-size: 1.5rem; cursor: pointer; }
@media (max-width: 840px) {
  .nav__links { display: none; }
  .nav__cta .btn--fantasma { display: none; }
}

/* --- Pie --- */
.pie { border-top: 1px solid var(--linea); background: var(--fondo-2); padding: 48px 0 40px; }
.pie__row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; justify-content: space-between; }
.pie__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.pie__col h4 { font-size: .8rem; text-transform: none; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; letter-spacing: 0; }
.pie__col a { display: block; color: var(--ink-2); font-size: .92rem; margin-bottom: 8px; }
.pie__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--ink-3); font-size: .82rem;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* --- Hero --- */
.hero { padding: clamp(60px, 11vw, 150px) 0 clamp(40px, 7vw, 90px); text-align: center; }
.hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero .lead { margin-top: .4em; }
.hero__cta { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.hero__nota { margin-top: 18px; color: var(--ink-3); font-size: .9rem; }

/* --- Pasos (cómo funciona) --- */
.paso__num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--acento-suave);
  color: var(--acento-fuerte); font-weight: 700; align-items: center; justify-content: center; margin-bottom: 14px; }

/* --- Lista de checks --- */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink-2); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--acento-fuerte); font-weight: 700; }

/* --- Planes --- */
.plan { display: flex; flex-direction: column; height: 100%; }
.plan--destacado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra); }
.plan__precio { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0 2px; }
.plan__precio small { font-size: .95rem; color: var(--ink-2); font-weight: 500; }
.plan .btn { margin-top: auto; }
.plan__badge { align-self: flex-start; margin-bottom: 8px; }

/* --- Tablas --- */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 560px; }
.tabla th, .tabla td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linea-2); }
.tabla th { color: var(--ink-3); font-weight: 600; font-size: .8rem; background: var(--fondo-2); position: sticky; top: 0; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--fondo-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- FAQ --- */
.faq details { border-bottom: 1px solid var(--linea); padding: 18px 4px; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acento-fuerte); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 14px 0 2px; }

/* --- Formulario --- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.campo input, .campo textarea, .campo select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .75em .9em; border: 1px solid var(--linea); border-radius: var(--radio-sm);
  background: var(--panel); transition: border-color var(--paso);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px var(--acento-suave); }
.campo textarea { min-height: 120px; resize: vertical; }
.form-nota { font-size: .85rem; color: var(--ink-3); }

/* --- Aviso de datos de ejemplo --- */
.aviso-demo { background: var(--warn-bg); color: var(--warn); font-size: .84rem; font-weight: 600;
  padding: 8px 14px; text-align: center; }

/* --- Utilidades --- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.oculto { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }