/* ───────────────────────────────────────────────
   CONVERSION · Nuria
   Recursos, calculadoras, contacto y gracias.
   Archivo propio para no colisionar con main.css.
   Pendiente: Marcos puede subir este link a base.njk
   cuando integre los CSS por area.
   ─────────────────────────────────────────────── */

/* ─── HUB DE RECURSOS ─── */
.recursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.recurso-card {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}

.recurso-card:hover { border-color: var(--ink); }

.recurso-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--red);
  margin-bottom: 16px;
}

.recurso-card h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}

.recurso-promesa {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 14px;
}

.recurso-card p.recurso-detalle {
  font-size: 14px;
  color: var(--gray-text);
  line-height: 1.65;
  margin: 0 0 24px;
  flex-grow: 1;
}

.recurso-estado {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  border: 1px solid var(--border);
  padding: 5px 9px;
  align-self: flex-start;
  margin-bottom: 20px;
}

.recurso-estado--viva {
  color: var(--red);
  border-color: var(--red);
}

.recurso-cta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  transition: color 0.2s;
}

.recurso-cta:hover, .recurso-cta:focus-visible { color: var(--red); }

/* ─── CALCULADORA ─── */
.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
  margin-bottom: 48px;
}

.calc-entrada {
  padding: 36px 34px;
  border-right: 1px solid var(--ink);
}

.calc-salida {
  background: var(--bg-dark);
  color: var(--white);
  padding: 36px 34px;
}

.calc-titulo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 24px;
}

.calc-campo { margin-bottom: 22px; }

.calc-campo label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 7px;
}

.calc-campo .calc-ayuda {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #777;
  margin-top: 5px;
  line-height: 1.5;
}

.calc-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--white);
}

.calc-input-wrap:focus-within { border-color: var(--red); }

.calc-campo input[type="number"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  color: var(--ink);
  width: 100%;
  -moz-appearance: textfield;
}

.calc-campo input[type="number"]:focus { outline: none; }
.calc-campo input[type="number"]:focus-visible { outline: none; }

.calc-unidad {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #777;
  border-left: 1px solid var(--border);
  background: var(--gray-surface);
}

.calc-resultado { margin-bottom: 26px; }

.calc-resultado-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 6px;
}

.calc-cifra {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
  margin: 0;
}

.calc-cifra--objetivo { color: var(--red); }

.calc-cifra span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: #9a9a9a;
}

.calc-separador {
  border: 0;
  border-top: 1px solid #2a2a2a;
  margin: 26px 0;
}

.calc-lectura {
  font-size: 14px;
  color: #9a9a9a;
  line-height: 1.65;
  margin: 0;
}

.calc-lectura strong { color: var(--white); }

.calc-aviso {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--red);
  margin: 18px 0 0;
}

/* ─── CAPTURA DE EMAIL ─── */
.captura {
  border: 1px solid var(--border);
  background: var(--gray-surface);
  padding: 34px;
  max-width: 760px;
  margin-bottom: 56px;
}

.captura h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}

.captura p {
  font-size: 15px;
  color: var(--gray-text);
  line-height: 1.65;
  margin: 0 0 24px;
}

.captura-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.captura-campo label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}

.captura-campo input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--white);
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
}

.captura-campo input:focus-visible {
  outline: none;
  border-color: var(--red);
}

.captura-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.captura-check input { margin-top: 3px; flex-shrink: 0; }

.captura-check label {
  font-size: 13px;
  color: var(--gray-text);
  line-height: 1.55;
}

.captura-check a { color: var(--red); }

.captura-nota {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
  margin: 16px 0 0;
}

/* ─── GRACIAS ─── */
.gracias-bloque {
  border-left: 3px solid var(--red);
  padding-left: 26px;
  max-width: 680px;
  margin-bottom: 48px;
}

.gracias-bloque p {
  font-size: 16px;
  color: var(--gray-text);
  line-height: 1.7;
  margin: 0 0 14px;
}

.gracias-siguiente {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 1px solid var(--border);
  padding-top: 36px;
}

.gracias-siguiente a {
  display: block;
  border: 1px solid var(--border);
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.2s;
}

.gracias-siguiente a:hover,
.gracias-siguiente a:focus-visible { border-color: var(--ink); }

.gracias-siguiente .gs-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.gracias-siguiente .gs-titulo {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ─── BLOQUES GENERICOS DE ESTAS PAGINAS ─── */
.conv-bloque {
  border-top: 1px solid var(--border);
  padding-top: 40px;
  margin-bottom: 52px;
  max-width: 760px;
}

.conv-h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}

.conv-texto {
  font-size: 15px;
  color: var(--gray-text);
  line-height: 1.7;
  margin: 0 0 18px;
}

.conv-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.conv-lista li {
  font-size: 15px;
  color: var(--gray-text);
  line-height: 1.6;
  padding-left: 20px;
  margin-bottom: 11px;
  position: relative;
}

.conv-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--red);
}

.conv-lista strong { color: var(--ink); }

@media (max-width: 900px) {
  .recursos-grid,
  .gracias-siguiente { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc-entrada { border-right: none; border-bottom: 1px solid var(--ink); }
  .captura-fila { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────
   ESPECIFICIDAD
   main.css define .pagina-cuerpo p / ul / li con
   especificidad (0,1,1), que gana a mis clases
   sueltas (0,1,0). Aqui se recuperan los estilos
   propios sin tocar main.css, porque hay otros
   agentes trabajando en ese archivo.
   ─────────────────────────────────────────────── */

/* Parrafos dentro de la calculadora */
.pagina-cuerpo .calc-titulo { color: var(--red); max-width: none; }
.pagina-cuerpo .calc-resultado-label { color: #9a9a9a; max-width: none; }
.pagina-cuerpo .calc-cifra { color: var(--white); max-width: none; line-height: 1; }
.pagina-cuerpo .calc-cifra--objetivo { color: var(--red); }
.pagina-cuerpo .calc-lectura { color: #9a9a9a; max-width: none; }
.pagina-cuerpo .calc-lectura strong { color: var(--white); }
.pagina-cuerpo .calc-aviso { color: var(--red); max-width: none; }
.pagina-cuerpo .calc-campo label { color: var(--ink); }
.pagina-cuerpo .calc-ayuda { color: #777; }

/* Tarjetas de recurso */
.pagina-cuerpo .recurso-num { color: var(--red); max-width: none; }
.pagina-cuerpo .recurso-estado { color: #777; max-width: none; }
.pagina-cuerpo .recurso-estado--viva { color: var(--red); }
.pagina-cuerpo .recurso-promesa { color: var(--ink); max-width: none; }
.pagina-cuerpo .recurso-card p.recurso-detalle { color: var(--gray-text); max-width: none; }

/* Bloques genericos */
.pagina-cuerpo .conv-texto { color: var(--gray-text); max-width: 680px; }
.pagina-cuerpo .captura p { color: var(--gray-text); max-width: none; }
.pagina-cuerpo .captura-nota { color: #777; max-width: none; }
.pagina-cuerpo .gracias-bloque p { color: var(--gray-text); max-width: none; }

/* Listas propias: main.css les pone bordes y tope de ancho pensados
   para indices de enlaces. Aqui no aplican. */
.pagina-cuerpo .conv-lista,
.pagina-cuerpo .pasos-list,
.pagina-cuerpo .recurso-card ul {
  border-top: none;
  max-width: none;
  margin: 0 0 20px;
}

.pagina-cuerpo .conv-lista li,
.pagina-cuerpo .pasos-list li,
.pagina-cuerpo .recurso-card li { border-bottom: none; }

/* El indicador de orden de los pasos de contacto no es un enlace */
.pagina-cuerpo .pasos-list .paso { display: flex; gap: 14px; }