/* ============================================================================
   LAS SIETE — estilos del sitio.

   ⚠️ TODO SALE DE LAS VARIABLES DE /brand/css/marca.css. Aquí no se define ni un
      color ni un tamaño de fuente en crudo: si mañana cambia el acento, cambia en
      un archivo y el sitio entero lo sigue. Esto es solo disposición (layout).
   ============================================================================ */

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.sitio-head {
  border-bottom: 1px solid var(--color-borde);
  background-color: var(--color-fondo);
}
.sitio-head__in {
  max-width: var(--medida-ancha);
  margin: 0 auto;
  padding: var(--e-4) var(--e-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}
.sitio-head__marca { display: inline-flex; align-items: center; text-decoration: none; }
.sitio-head__marca img { height: 30px; width: auto; display: block; }
/* El logo monocromo se intercambia por tema: el claro sobre fondo oscuro y al revés. */
[data-tema="oscuro"] .solo-claro,
.solo-oscuro { display: none; }
[data-tema="oscuro"] .solo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .solo-claro { display: none; }
  :root:not([data-tema="claro"]) .solo-oscuro { display: block; }
}

/* Interruptor de tema: un botón discreto, no un widget. */
.tema-btn {
  border: 1px solid var(--color-borde);
  background: transparent;
  color: var(--color-texto-suave);
  font-family: var(--fuente-sans);
  font-size: var(--texto-micro);
  padding: 6px 12px;
  border-radius: var(--radio-pill);
  cursor: pointer;
  line-height: 1;
}
.tema-btn:hover { border-color: var(--color-borde-fuerte); color: var(--color-texto); }

/* ── Portada ─────────────────────────────────────────────────────────────── */
main { display: block; }
.envoltura { max-width: var(--medida-ancha); margin: 0 auto; padding: 0 var(--e-5); }

.portada-cab { padding: var(--e-8) 0 var(--e-6); }
.portada-cab__fecha {
  font-family: var(--fuente-sans);
  font-size: var(--texto-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin: 0 0 var(--e-3);
}
.portada-cab__lema {
  font-family: var(--fuente-serif);
  font-size: var(--texto-h2);
  line-height: 1.25;
  margin: 0;
  max-width: 22ch;
}

/* Las historias: numeradas, porque son siete y se cuentan. */
.historias { max-width: var(--medida); margin: 0; padding: 0; list-style: none; counter-reset: h; }
.historia { counter-increment: h; position: relative; padding: var(--e-7) 0; }
.historia + .historia { border-top: 1px solid var(--color-borde); }
.historia__num {
  font-family: var(--fuente-serif);
  font-size: var(--texto-chico);
  color: var(--color-texto-tenue);
  display: block;
  margin-bottom: var(--e-2);
}
.historia__num::before { content: counter(h) " / 7"; }
.historia__titulo {
  font-family: var(--fuente-serif);
  font-size: var(--texto-h2);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: var(--e-3) 0 0;
}
.historia__titulo a { color: var(--color-texto); text-decoration: none; }
.historia__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.historia__cuerpo {
  font-family: var(--fuente-serif);
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
  margin: var(--e-4) 0 0;
}
.historia__fuentes {
  font-family: var(--fuente-sans);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
  margin: var(--e-4) 0 0;
}
.historia__fuentes a { color: var(--color-texto-suave); text-decoration: underline; text-underline-offset: 2px; }
.historia__fuentes a:hover { color: var(--color-acento); }

/* El corte entre "lo tuyo" y el resto. Mismo signo que en el correo. */
.tambien {
  font-family: var(--fuente-sans);
  font-size: var(--texto-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  border-top: 1px solid var(--color-borde);
  padding-top: var(--e-5);
  margin-top: var(--e-7);
}

/* ⚠️ EL FINAL SE VE. Es la promesa del producto, así que se marca con las siete
   líneas del logo y una frase, no con un separador cualquiera. */
.cierre-siete { max-width: var(--medida); margin: var(--e-8) 0 0; padding-top: var(--e-7); border-top: 2px solid var(--color-borde-fuerte); }
.cierre-siete__lineas { display: block; margin-bottom: var(--e-4); }
.cierre-siete p { font-family: var(--fuente-sans); font-size: var(--texto-chico); color: var(--color-texto-suave); margin: 0; }

/* ── Suscripción ─────────────────────────────────────────────────────────── */
.suscribir { max-width: var(--medida); margin: var(--e-8) 0 0; padding: var(--e-7) 0 var(--e-8); border-top: 1px solid var(--color-borde); }
.suscribir h2 { font-family: var(--fuente-serif); font-size: var(--texto-h3); margin: 0 0 var(--e-3); }
.suscribir__sub { font-family: var(--fuente-sans); font-size: var(--texto-chico); color: var(--color-texto-suave); margin: 0 0 var(--e-5); }

.campo { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.campo input[type="email"] {
  flex: 1 1 18rem;
  font-family: var(--fuente-sans);
  font-size: var(--texto-cuerpo-movil);
  color: var(--color-texto);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-2);
  padding: 13px 14px;
}
.campo input[type="email"]::placeholder { color: var(--color-texto-tenue); }
.campo input[type="email"]:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 1px; border-color: var(--color-acento); }

/* Categorías como casillas-chip: se ven como lo que son (se marcan varias). */
.cats { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-5) 0 0; padding: 0; border: 0; }
.cats legend {
  font-family: var(--fuente-sans); font-size: var(--texto-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-texto-suave); padding: 0; margin-bottom: var(--e-3);
}
.cat { position: relative; }
.cat input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cat span {
  display: inline-block;
  font-family: var(--fuente-sans);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pill);
  padding: 8px 15px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.cat input:checked + span { border-color: var(--color-acento); color: var(--color-acento); background-color: var(--color-acento-suave); }
.cat input:focus-visible + span { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.cat span::before { content: "＋"; margin-right: 6px; opacity: .5; font-size: .85em; }
.cat input:checked + span::before { content: "✓"; opacity: 1; }

.ayuda { font-family: var(--fuente-sans); font-size: var(--texto-micro); color: var(--color-texto-tenue); margin: var(--e-4) 0 0; }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.aviso {
  font-family: var(--fuente-sans); font-size: var(--texto-chico);
  border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-3);
  padding: 13px 16px; margin: 0 0 var(--e-5); max-width: var(--medida);
}
.aviso--ok { border-color: var(--color-acento); color: var(--color-acento); background: var(--color-acento-suave); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.sitio-pie { border-top: 1px solid var(--color-borde); margin-top: var(--e-8); padding: var(--e-6) 0 var(--e-8); }
.sitio-pie__in { max-width: var(--medida-ancha); margin: 0 auto; padding: 0 var(--e-5); font-family: var(--fuente-sans); font-size: var(--texto-micro); color: var(--color-texto-tenue); }
.sitio-pie a { color: var(--color-texto-suave); }
.archivo { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); }

/* ── Pantallas chicas ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .portada-cab { padding-top: var(--e-6); }
  .historia__titulo { font-size: var(--texto-h3); }
  .historia__cuerpo { font-size: var(--texto-cuerpo-movil); }
  .campo input[type="email"] { flex-basis: 100%; }
}

/* Saltar al contenido: primero en el orden de tabulación, invisible hasta enfocarlo. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--color-fondo); color: var(--color-texto);
  border: 1px solid var(--color-acento); border-radius: var(--radio-2);
  font-family: var(--fuente-sans); font-size: var(--texto-chico); padding: 10px 16px;
}
.saltar:focus { left: var(--e-4); top: var(--e-4); }

/* ── Reproductor del día ─────────────────────────────────────────────────
   Un bloque, no un "widget". El control nativo se deja tal cual: es el que
   la gente ya sabe usar y el que funciona con lector de pantalla. */
.escuchar {
  max-width: var(--medida);
  margin: var(--e-6) 0 0;
  padding: var(--e-4) var(--e-5) var(--e-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-3);
  background: var(--color-superficie, transparent);
}
.escuchar__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.escuchar__tit {
  font-family: var(--fuente-sans); font-size: var(--texto-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-texto-suave);
}
.escuchar__dur { font-family: var(--fuente-sans); font-size: var(--texto-micro); color: var(--color-texto-tenue); }
.escuchar audio { width: 100%; display: block; }

/* Quien se ha ido y vuelto dos veces o más: se marca, no se esconde. */
.indeciso { color: var(--cat-mexico); font-weight: 500; }

/* Pie: enlaces de descubrimiento (acerca, feeds) */
.sitio-pie__enlaces { display:flex; gap:var(--e-4); flex-wrap:wrap; margin:var(--e-3) 0 0; }

/* Estado de aprobación de la edición: lo primero que se busca al abrir el panel. */
.estado-ed { font-family:var(--fuente-sans); font-size:var(--texto-chico); line-height:1.55;
  border:1px solid var(--color-borde-fuerte); border-radius:var(--radio-3);
  padding:13px 16px; margin-top:var(--e-4); max-width:var(--medida-ancha); }
.estado-ed--ok   { border-color:var(--color-acento); color:var(--color-acento); background:var(--color-acento-suave); }
.estado-ed--pend { border-color:var(--cat-mexico); color:var(--cat-mexico); background:var(--cat-mexico-bg); }