/* ==========================================================================
   PÁGINAS INTERIORES
   --------------------------------------------------------------------------
   Se carga después de estilo.css y solo añade lo que las páginas nuevas
   necesitan: migas, prosa larga, tablas, pasos y la barra fija del móvil.
   Reutiliza los mismos tokens de color y tipografía, así que no hay riesgo
   de que el sitio parezca dos sitios distintos.
   ========================================================================== */

/* Las interiores no llevan intro ni cursor propio: entran directas. */
body.pag { opacity: 1; }
body.pag .capa { padding-top: 0; }

/* ── Migas ───────────────────────────────────────────────────────────── */
.migas { padding: 96px 0 0; font-size: .82rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; }
.migas li { display: flex; align-items: center; gap: 6px; color: var(--texto-tenue); }
.migas li + li::before { content: '/'; color: var(--borde-vivo); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--oro); }
.migas [aria-current] { color: var(--texto-suave); }

/* ── Cabecera de página ──────────────────────────────────────────────── */
.hero-pag { padding: 40px 0 56px; }
.hero-pag h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.02;
  letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 20px;
}
.hero-pag .entradilla {
  font-size: clamp(1.02rem, 2vw, 1.22rem); color: var(--texto-suave);
  max-width: 62ch; line-height: 1.65;
}
.hero-pag .acc { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* ── Prosa ───────────────────────────────────────────────────────────── */
.env-estrecho { max-width: 860px; }
.prosa > * + * { margin-top: 20px; }
.prosa h2 {
  font-family: var(--titular); font-weight: 700;
  font-size: clamp(1.45rem, 3.2vw, 2.05rem); line-height: 1.18;
  letter-spacing: -.02em; margin-top: 52px; margin-bottom: 4px;
}
.prosa h3 {
  font-family: var(--titular); font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem); margin-top: 34px; margin-bottom: 2px;
}
.prosa p, .prosa li { color: var(--texto-suave); line-height: 1.75; font-size: 1.01rem; }
.prosa strong { color: var(--texto); font-weight: 600; }
.prosa a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--oro-claro); }
.prosa ul, .prosa ol { padding-left: 22px; display: grid; gap: 10px; }
.prosa ul li { list-style: none; position: relative; padding-left: 20px; }
.prosa ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--degradado);
}
.prosa ol { list-style: decimal; }
.prosa ol li::marker { color: var(--oro); font-weight: 700; }
.prosa figure { margin: 34px 0; }
.prosa img { width: 100%; height: auto; border-radius: var(--radio-g); border: 1px solid var(--borde); }
.prosa figcaption { margin-top: 10px; font-size: .84rem; color: var(--texto-tenue); text-align: center; }

/* Cita destacada */
.destacado {
  border-left: 3px solid var(--oro); padding: 18px 22px;
  background: rgb(245 197 66 / .05); border-radius: 0 var(--radio) var(--radio) 0;
}
.destacado p { color: var(--texto); margin: 0; }

/* ── Tabla comparativa ───────────────────────────────────────────────── */
.tabla-env { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
.tabla-comparativa { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
.tabla-comparativa th, .tabla-comparativa td {
  padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--borde);
}
.tabla-comparativa thead th {
  font-family: var(--titular); font-weight: 600; color: var(--texto);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  border-bottom-color: var(--borde-vivo);
}
.tabla-comparativa tbody th { font-weight: 600; color: var(--texto); }
.tabla-comparativa td { color: var(--texto-suave); }
.tabla-comparativa tbody tr:hover { background: rgb(255 255 255 / .02); }

/* ── Pasos numerados ─────────────────────────────────────────────────── */
/* Sin columnas propias heredaba las cuatro de estilo.css, y dentro de la
   prosa (812 px) cada tarjeta se quedaba en 200 px: con el número al lado, al
   texto le sobraban 84 px. Dos columnas en pantallas anchas, una en el móvil. */
body.pag .pasos { display: grid; grid-template-columns: 1fr; gap: 16px; counter-reset: paso; margin: 28px 0; }
@media (min-width: 760px) { body.pag .pasos { grid-template-columns: repeat(2, 1fr); } }
/* El número va a la izquierda del título, en su propia columna. Un intento
   anterior dejaba el texto en la columna estrecha, una palabra por línea,
   porque las piezas se colocaban solas. Aquí cada una lleva escrita su celda
   (`grid-column` y `grid-row`), así que el párrafo siempre cae en la columna
   ancha y nada puede montarse encima de nada. */
body.pag .paso {
  padding: 22px 24px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  display: grid; grid-template-columns: auto 1fr; column-gap: 15px; row-gap: 8px;
  align-items: start;
}
/* estilo.css usa .paso::before como el resplandor que sigue al cursor, con
   position:absolute e inset:0. Aquí ese pseudoelemento lleva el número, así
   que hay que devolverlo al flujo o se pinta encima del título. */
body.pag .paso::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  position: static; inset: auto;
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--display); font-size: 2.1rem; line-height: .95; opacity: .45;
  font-variant-numeric: tabular-nums;
  background: var(--degradado); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.pag .paso h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.05rem; }
body.pag .paso p { grid-column: 2; grid-row: 2; margin: 0; font-size: .95rem; }

/* ── Rejilla de tarjetas ─────────────────────────────────────────────── */
body.pag .rejilla { display: grid; gap: 16px; margin: 28px 0; }
@media (min-width: 720px) { .rejilla.dos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }
.carta {
  padding: 24px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g); transition: border-color .25s, transform .25s;
}
.carta:hover { border-color: var(--borde-vivo); transform: translateY(-2px); }
.carta h3 { margin: 0 0 8px; font-size: 1.05rem; }
.carta p { margin: 0; font-size: .94rem; }

/* ── Preguntas frecuentes con <details> ──────────────────────────────── */
body.pag .faq-item {
  border: 1px solid var(--borde); border-radius: var(--radio-g);
  background: var(--superficie); overflow: hidden; margin-bottom: 12px;
}
body.pag .faq-item[open] { border-color: var(--borde-vivo); }
body.pag .faq-item summary {
  cursor: pointer; list-style: none; padding: 19px 56px 19px 22px;
  position: relative; font-family: var(--titular); font-weight: 600;
  font-size: 1rem; color: var(--texto);
}
body.pag .faq-item summary::-webkit-details-marker { display: none; }
body.pag .faq-item summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--oro); border-bottom: 2px solid var(--oro);
  transform: rotate(45deg); transition: transform .25s;
}
body.pag .faq-item[open] summary::after { transform: rotate(-135deg); }
body.pag .faq-item summary:hover { color: var(--oro); }
body.pag .faq-r { padding: 0 22px 20px; }
body.pag .faq-r p { margin: 0; color: var(--texto-suave); line-height: 1.7; font-size: .97rem; }

/* ── Selector de idioma como enlace ──────────────────────────────────── */
.idioma-enlace {
  font-size: .82rem; color: var(--texto-suave); text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--borde); border-radius: 999px;
  white-space: nowrap; transition: border-color .25s, color .25s;
}
.idioma-enlace:hover { border-color: var(--oro); color: var(--oro); }

/* ── Barra fija del móvil ────────────────────────────────────────────── */
.cta-movil { display: none; }
@media (max-width: 760px) {
  .cta-movil {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--vidrio); backdrop-filter: blur(14px);
    border-top: 1px solid var(--borde);
  }
  .cta-movil .btn { justify-content: center; padding: 13px 10px; font-size: .92rem; }
  /* Que la barra no tape el final de la página ni el botón flotante */
  .pie { padding-bottom: 92px; }
  /* La plantilla emitía .wa-flotante, una clase sin estilos en ninguna
     hoja: el botón salía como un icono enorme dentro del texto. Ahora usa
     .wa, la misma que la portada. Lleva body.pag porque solo las páginas
     generadas tienen la barra fija que hay que dejar libre. */
  body.pag .wa { bottom: 88px; }
  .migas { padding-top: 84px; }
}

/* ── Enlaces entre plataformas al pie del contenido ──────────────────── */
.otras-plataformas { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--borde); }
.otras-plataformas h2 { margin-top: 0; }

/* ── Cierre con llamada a la acción ──────────────────────────────────── */
.cierre {
  margin-top: 60px; padding: 40px 34px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde-vivo);
  border-radius: var(--radio-g);
}
.cierre h2 { margin-top: 0; }
.cierre .acc { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  .carta, .faq-item summary::after { transition: none; }
}

/* ── Indicador de crecimiento diario ─────────────────────────────────── */
.hoy {
  display: block; margin-top: 4px;
  font-family: var(--interfaz); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; color: var(--exito);
  text-transform: none;
}
.hoy::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; border-radius: 50%; margin-right: 6px;
  background: var(--exito); box-shadow: 0 0 0 0 rgb(74 222 128 / .55);
  animation: latido-hoy 2.4s ease-out infinite;
}
@keyframes latido-hoy {
  0%   { box-shadow: 0 0 0 0 rgb(74 222 128 / .55); }
  70%  { box-shadow: 0 0 0 7px rgb(74 222 128 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); }
}
@media (prefers-reduced-motion: reduce) { .hoy::before { animation: none; } }

/* Un titular de 47 caracteres en Anton a 4rem ocupa toda la pantalla y se lee
   peor. Limitarlo por caracteres lo parte en dos o tres líneas legibles. */
.hero-pag h1 { max-width: 24ch; }

/* ── Formulario de postulación ───────────────────────────────────────── */
/* Todo este bloque va limitado a body.pag. La portada carga las dos hojas y
   esta es la segunda, así que sin el límite `.campo input` pisaba al
   `.casilla input` de estilo.css: la casilla de la política se estiraba al
   ancho de un campo de texto y, como no encoge, echaba el texto fuera de
   pantalla. */
body.pag .form-postular { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 720px) { body.pag .form-postular .mitad { grid-column: span 1; } body.pag .form-postular { grid-template-columns: 1fr 1fr; } body.pag .form-postular .entero { grid-column: 1 / -1; } }
body.pag .campo { display: grid; gap: 7px; }
body.pag .campo label { font-size: .84rem; font-weight: 600; color: var(--texto); font-family: var(--interfaz); }
body.pag .campo input, body.pag .campo select, body.pag .campo textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: .96rem;
  color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); transition: border-color .2s, box-shadow .2s;
}
body.pag .campo textarea { min-height: 110px; resize: vertical; }
body.pag .campo input:focus, body.pag .campo select:focus, body.pag .campo textarea:focus {
  outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgb(245 197 66 / .14);
}
body.pag .campo.mal input, body.pag .campo.mal select, body.pag .campo.mal textarea { border-color: var(--en-vivo); }
body.pag .campo .error { font-size: .78rem; color: var(--en-vivo); min-height: 1em; }
body.pag .campo .ayuda { font-size: .78rem; color: var(--texto-tenue); }
body.pag .campo-check { display: flex; gap: 11px; align-items: flex-start; }
body.pag .campo-check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--oro); }
body.pag .campo-check label { font-weight: 400; color: var(--texto-suave); font-size: .88rem; line-height: 1.5; }
body.pag .campo-check a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
body.pag .aviso-form {
  display: none; padding: 16px 18px; border-radius: var(--radio);
  font-size: .94rem; line-height: 1.6; border: 1px solid var(--borde);
}
body.pag .aviso-form.visible { display: block; }
body.pag .aviso-form.bien { border-color: var(--exito); background: rgb(74 222 128 / .08); color: var(--texto); }
body.pag .aviso-form.mal { border-color: var(--en-vivo); background: rgb(255 59 92 / .08); color: var(--texto); }
body.pag .aviso-form a { color: var(--oro); }

/* ── Ficha de persona ────────────────────────────────────────────────── */
.persona {
  display: grid; gap: 20px; align-items: start;
  padding: 26px; margin: 28px 0;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g);
}
@media (min-width: 600px) { .persona.con-foto { grid-template-columns: 116px 1fr; } }
.persona img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borde-vivo); }
.persona h3 { margin: 0 0 2px; font-size: 1.15rem; }
.persona .cargo {
  font-family: var(--interfaz); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 12px;
}
.persona p { margin: 0; font-size: .96rem; }

/* ── Firma del artículo ──────────────────────────────────────────────── */
.firma { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.firma img {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--borde-vivo);
}
.firma p { margin: 0; font-size: .9rem; line-height: 1.45; }
.firma strong { color: var(--texto); font-family: var(--titular); font-weight: 600; }
.firma span { color: var(--texto-tenue); font-size: .82rem; }

/* La foto de la ficha de persona necesita su propio tamaño */
.persona picture { display: block; }
.persona.con-foto img { width: 116px; height: 116px; }