/* ==========================================================================
   ARTÍCULOS — ALEJANDRO CHALARCA
   Hereda los tokens de editorial.css. Aquí sólo vive lo que un artículo
   necesita y la portada no tiene: medida de lectura, bloques de dato,
   documentos citados y la calculadora.

   Dos reglas de la casa, sin excepción:
   1. Todo centrado, al mismo eje que el resto del sitio.
   2. Un proceso claro, sin rodeos: el artículo avanza en pasos numerados.
   ========================================================================== */

:root {
  --medida: 68ch;          /* medida de lectura del cuerpo */
  --medida-ancha: 1040px;  /* bloques de dato, figuras y calculadora */
}

/* --- Rejilla del artículo ---------------------------------------------- */
.art { padding-block: clamp(28px, 5vw, 64px) clamp(60px, 8vw, 110px); }
.art__in { width: 100%; max-width: var(--medida-ancha); margin-inline: auto; padding-inline: var(--bleed); }

/* Todo lo que va dentro del cuerpo nace centrado y con medida de lectura. */
.art__cuerpo > p,
.art__cuerpo > ul,
.art__cuerpo > ol,
.art__cuerpo > .art__nota {
  max-width: var(--medida);
  margin-inline: auto;
  text-align: center;
}
.art__cuerpo > p { margin-block: 0 clamp(16px, 2vw, 22px); font-size: clamp(1.06rem, 1.2vw, 1.22rem); line-height: 1.65; color: var(--tinta-suave); }
.art__cuerpo > p > strong, .art__cuerpo li > strong { color: var(--tinta); font-weight: 700; }
.art__cuerpo a:not(.btn) { color: var(--verde); text-decoration: none; border-bottom: 2px solid rgb(182 255 0 / .35); }
.art__cuerpo a:not(.btn):hover { border-bottom-color: var(--verde); }

.art__cuerpo > ul, .art__cuerpo > ol { padding: 0; list-style: none; }
.art__cuerpo li { margin-bottom: 12px; color: var(--tinta-suave); }
.art__cuerpo > ul > li::before { content: "—"; color: var(--verde); font-weight: 700; margin-right: 10px; }

/* --- Cabecera ---------------------------------------------------------- */
.art__cab { text-align: center; max-width: 900px; margin-inline: auto; }
.art__cab .kicker { margin-inline: auto; color: var(--verde); }
.art__h1 {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  line-height: .95; letter-spacing: -.02em; text-align: center;
  text-transform: uppercase; margin: 0 auto clamp(18px, 2.4vw, 28px);
  text-wrap: balance;
}
.art__h1 em { font-style: normal; color: var(--verde); }
.art__entradilla {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.5;
  color: var(--tinta); max-width: 62ch; margin: 0 auto clamp(22px, 3vw, 32px);
  text-align: center; font-weight: 600;
}
.art__firma {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-suave); margin-bottom: clamp(28px, 4vw, 44px);
}
.art__firma span { display: inline-flex; align-items: center; gap: 8px; }
.art__firma span::before { content: ""; width: 7px; height: 7px; background: var(--verde); border-radius: 50%; }

.art__portada { margin: 0 0 clamp(34px, 5vw, 56px); }
.art__portada img { width: 100%; height: auto; border-radius: var(--radio); }
.art__credito {
  display: block; margin-top: 10px; text-align: center;
  font-size: .78rem; letter-spacing: .06em; color: var(--tinta-suave);
}

/* --- Titulares de sección dentro del artículo -------------------------- */
.art__h2 {
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: .92;
  letter-spacing: -.01em; text-transform: uppercase; text-align: center;
  margin: clamp(52px, 7vw, 86px) auto clamp(18px, 2.4vw, 26px);
  max-width: 20ch;
}
.art__h2--verde { color: var(--verde); }
.art__h3 {
  font-family: "Archivo Black", sans-serif; font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.05; text-align: center; text-transform: uppercase;
  margin: clamp(30px, 4vw, 44px) auto 12px; max-width: 26ch;
}
.art__filete { width: 72px; height: 5px; background: var(--verde); border: 0; margin: 0 auto clamp(26px, 3vw, 34px); }

/* --- Tarjetas de dato: en columnas, el texto al eje -------------------- */
.datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px); margin: clamp(24px, 3vw, 34px) auto clamp(20px, 3vw, 28px);
}
.dato {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(20px, 2.6vw, 30px) clamp(14px, 2vw, 22px); text-align: center;
}
.dato__donde {
  display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-suave); margin-bottom: 12px;
}
.dato__cifra {
  display: block; font-family: "Anton", sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: .95; color: var(--verde);
  letter-spacing: -.02em;
}
.dato__unidad { display: block; margin-top: 10px; font-size: .86rem; color: var(--tinta-suave); line-height: 1.4; }
@media (max-width: 720px) { .datos { grid-template-columns: minmax(0, 1fr); } }

/* --- Documento citado -------------------------------------------------- */
.doc { margin: clamp(26px, 4vw, 40px) auto; max-width: var(--medida-ancha); }
.doc img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linea); background: #fff; }
.doc figcaption {
  display: block; margin-top: 12px; text-align: center;
  font-size: .82rem; line-height: 1.5; color: var(--tinta-suave);
}
.doc figcaption b { color: var(--tinta); }

/* --- Los pasos: el proceso, sin rodeos --------------------------------- */
.pasos-art {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px); margin: clamp(26px, 4vw, 40px) auto 0;
}
.paso-art {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.4vw, 28px); text-align: center;
}
.paso-art__num {
  display: block; font-family: "Anton", sans-serif;
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: .8; letter-spacing: -.03em;
  color: var(--tinta); margin-bottom: 14px;
}
.paso-art:last-child .paso-art__num { color: var(--verde); }
.paso-art h3 {
  font-family: "Archivo Black", sans-serif; text-align: center;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.05;
  text-transform: uppercase; margin: 0 auto 12px; max-width: 22ch;
}
.paso-art p { margin: 0 auto 10px; max-width: 42ch; color: var(--tinta-suave); font-size: .98rem; line-height: 1.55; }
.paso-art__gana {
  display: inline-block; margin-top: 8px; padding: 8px 16px; border-radius: var(--radio-pill);
  background: rgb(182 255 0 / .12); border: 1px solid rgb(182 255 0 / .38);
  color: var(--verde); font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 720px) { .pasos-art { grid-template-columns: minmax(0, 1fr); } }

/* --- Bloque de aviso: lo que de verdad importa ------------------------- */
.ojo {
  max-width: var(--medida); margin: clamp(28px, 4vw, 42px) auto;
  background: var(--morado-fondo); border-radius: var(--radio);
  padding: clamp(24px, 3.2vw, 38px) clamp(20px, 3vw, 34px); text-align: center;
}
.ojo h3 { font-family: "Archivo Black", sans-serif; font-size: clamp(1.1rem, 1.8vw, 1.45rem);
          text-transform: uppercase; text-align: center; margin: 0 auto 12px; color: var(--verde); max-width: 24ch; }
.ojo p { margin: 0 auto; max-width: 54ch; color: #fff; line-height: 1.6; }
.ojo p + p { margin-top: 12px; }

/* --- Calculadora ------------------------------------------------------- */
.calc {
  max-width: var(--medida-ancha); margin: clamp(26px, 4vw, 40px) auto 0;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(24px, 3.2vw, 40px) clamp(18px, 3vw, 36px); text-align: center;
}
.calc__campos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px); margin-bottom: clamp(24px, 3vw, 32px);
}
.calc__campo { text-align: center; }
.calc__campo label {
  display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-suave); margin-bottom: 10px;
}
.calc__campo select, .calc__campo input {
  width: 100%; min-height: 52px; padding: 12px 14px; text-align: center;
  background: var(--papel); color: var(--tinta); border: 2px solid var(--linea);
  border-radius: 12px; font-family: "Archivo", sans-serif; font-size: 1.02rem; font-weight: 700;
}
.calc__campo select:focus-visible, .calc__campo input:focus-visible {
  outline: none; border-color: var(--verde);
}
/* El deslizador medía 52px como los otros campos y dejaba su valor colgando
   fuera de la fila: las tres columnas no arrancaban a la misma altura. Se le
   reparte la altura entre el carril y la cifra para que la fila cuadre. */
.calc__campo input[type="range"] { min-height: 0; height: 30px; padding: 0; border: 0; background: transparent; accent-color: var(--verde); }
.calc__valor { display: block; margin-top: 2px; font-family: "Anton", sans-serif; font-size: 1.4rem; line-height: 1.1; color: var(--verde); }

/* Dentro de la calculadora el titular no necesita el aire de un titular de
   sección: lo de abajo es un formulario, no un bloque nuevo. */
.calc .art__h3 { margin-top: 0; margin-bottom: clamp(22px, 2.8vw, 30px); }

.calc__salida {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px); align-items: stretch;
}
.calc__caja {
  border-radius: 14px; padding: clamp(18px, 2.4vw, 26px) 14px; text-align: center;
  border: 1px solid var(--linea); background: var(--papel);
}
.calc__caja--gana { border-color: var(--verde); background: rgb(182 255 0 / .08); }
.calc__et { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
            font-weight: 700; color: var(--tinta-suave); margin-bottom: 10px; }
.calc__cifra { display: block; font-family: "Anton", sans-serif; font-size: clamp(1.5rem, 3vw, 2.4rem);
               line-height: 1; letter-spacing: -.02em; color: var(--tinta); }
.calc__caja--gana .calc__cifra { color: var(--verde); }
.calc__pie { max-width: 62ch; margin: clamp(18px, 2.4vw, 26px) auto 0; font-size: .82rem;
             line-height: 1.55; color: var(--tinta-suave); text-align: center; }
@media (max-width: 720px) {
  .calc__campos, .calc__salida { grid-template-columns: minmax(0, 1fr); }
}

/* --- Preguntas --------------------------------------------------------- */
.art__faq { max-width: var(--medida); margin-inline: auto; }
.art__faq .pregunta { text-align: left; }

/* --- Cierre hacia los servicios ---------------------------------------- */
.art__cierre {
  max-width: var(--medida-ancha); margin: clamp(56px, 8vw, 90px) auto 0;
  background: var(--morado-fondo); border-radius: var(--radio);
  padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 48px); text-align: center;
}
.art__cierre h2 {
  font-family: "Anton", sans-serif; font-weight: 400; text-align: center;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: .92; text-transform: uppercase;
  margin: 0 auto 16px; max-width: 18ch; color: #fff;
}
.art__cierre p { max-width: 54ch; margin: 0 auto clamp(22px, 3vw, 30px); color: #fff; line-height: 1.6; }
.art__cierre .btn { margin-inline: auto; }
.art__botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- Fuentes ----------------------------------------------------------- */
.fuentes { max-width: var(--medida); margin: clamp(46px, 6vw, 70px) auto 0; text-align: center; }
.fuentes h2 {
  font-family: "Archivo Black", sans-serif; font-size: 1rem; letter-spacing: .12em;
  text-transform: uppercase; text-align: center; margin: 0 auto 18px; color: var(--tinta-suave);
}
.fuentes ol { list-style: none; padding: 0; margin: 0; counter-reset: f; }
.fuentes li {
  counter-increment: f; margin-bottom: 14px; font-size: .88rem; line-height: 1.55; color: var(--tinta-suave);
}
.fuentes li::before { content: counter(f) "."; color: var(--verde); font-weight: 800; margin-right: 8px; }
.fuentes a { color: var(--tinta); border-bottom: 1px solid var(--linea); text-decoration: none; word-break: break-word; }
.fuentes a:hover { color: var(--verde); border-bottom-color: var(--verde); }

/* --- Índice de la sección Actualidad ----------------------------------- */
.lista-art {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.6vw, 30px); max-width: var(--medida-ancha); margin: 0 auto;
  justify-items: center;
}
/* Con un solo artículo, `auto-fit` estiraba la ficha a los 1040px del bloque
   y la portada quedaba con una foto de 585px de alto. La ficha tiene su propia
   medida y se centra; así se ve igual con una que con seis. */
.ficha {
  max-width: 480px; width: 100%; margin-inline: auto;
  display: flex; flex-direction: column; text-align: center; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; transition: transform 160ms var(--sal, ease-out), border-color 160ms ease-out;
}
.ficha:hover { transform: translateY(-3px); border-color: var(--verde); }
.ficha img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ficha__texto { padding: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ficha__fecha { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--verde); }
.ficha h3 { font-family: "Archivo Black", sans-serif; font-size: clamp(1.05rem, 1.7vw, 1.35rem);
            line-height: 1.1; text-transform: uppercase; text-align: center; margin: 0; max-width: 24ch; }
.ficha p { margin: 0; color: var(--tinta-suave); font-size: .95rem; line-height: 1.5; max-width: 40ch; }
.ficha__mas { margin-top: 4px; font-weight: 800; font-size: .78rem; letter-spacing: .08em;
              text-transform: uppercase; color: var(--verde); }

/* --- Miga de pan ------------------------------------------------------- */
.miga {
  max-width: var(--medida-ancha); margin: 0 auto clamp(20px, 3vw, 30px);
  text-align: center; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-suave);
}
.miga a { color: var(--tinta-suave); text-decoration: none; }
.miga a:hover { color: var(--verde); }
.miga span { margin-inline: 8px; color: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  .ficha { transition: none; }
  .ficha:hover { transform: none; }
}