/* ==========================================================================
   Las Siete — marca.css
   Lo que pasó hoy, sin tener que buscarlo.

   Archivo único de marca. Todo el color y toda la tipografía viven aquí como
   custom properties. Para cambiar la marca se edita este archivo; las
   plantillas no se tocan.

   El archivo tiene DOS partes, separadas a propósito:
     PARTE 1 — TOKENS        (solo variables; ninguna regla pinta nada)
     PARTE 2 — ESTILOS BASE  (reglas mínimas, construidas SOLO con esos tokens)

   Ruta web: /brand/css/marca.css
   ========================================================================== */


/* ==========================================================================
   PARTE 1 — TOKENS
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     COLOR — base clara
     Papel cálido, no blanco puro: #FFFFFF en pantalla es un reflector y
     esto se lee de corrido. El crema baja el brillo sin ensuciar.
     Tinta casi negra, no #000: el negro absoluto sobre papel cálido da un
     contraste duro que cansa en textos largos.
     --------------------------------------------------------------- */
  --color-fondo:          #FAF8F5;  /* papel cálido */
  --color-fondo-alt:      #F2EEE8;  /* bloques delimitados: cierre, publicidad */
  --color-texto:          #1A1A1A;  /* cuerpo y titulares */
  --color-texto-suave:    #5C5952;  /* metadatos, fechas, fuentes */
  --color-texto-tenue:    #8A857C;  /* lo que casi no debe leerse */
  --color-borde:          #E3DED5;  /* separador entre historias */
  --color-borde-fuerte:   #C9C2B5;

  /* ---------------------------------------------------------------
     ACENTO — elegido: verde profundo #2D5F4C
     El rojo es el color del noticiero de urgencia y el azul el de la red
     social: los dos hábitos contra los que compite este producto. El verde
     profundo no pertenece a ninguno y sobre papel cálido se lee sobrio,
     no corporativo.
     La terracota queda documentada como ALTERNATIVA: funciona, pero calienta
     de más la página y compite con el fondo crema en vez de asentarse sobre él.
     Para cambiar de acento basta intercambiar los valores de estos dos grupos.
     --------------------------------------------------------------- */
  --color-acento:           #2D5F4C;  /* verde profundo — EN USO */
  --color-acento-hover:     #234B3C;
  --color-acento-suave:     #E4EDE8;  /* fondo de un realce muy puntual */

  /* Terracota: alternativa documentada. Ojo si se adopta como acento: sobre
     el papel #FAF8F5 da 4.28:1, por debajo del 4.5:1 que pide AA para texto
     de cuerpo. Para enlaces habría que usar --color-acento-alt-hover
     (#AA5231, 5.0:1); #B85C38 solo sirve en texto grande o en trazo. */
  --color-acento-alt:       #B85C38;  /* terracota — alternativa documentada */
  --color-acento-alt-hover: #AA5231;
  --color-acento-alt-suave: #F6E8E1;

  /* ---------------------------------------------------------------
     CATEGORÍAS
     Una por sección, desaturadas. Se usan SOLO en etiquetas pequeñas.
     Nunca en bloques grandes: el color en masa es ruido, y el silencio
     visual es la marca. Cada categoría trae su par texto/fondo para que
     la etiqueta contraste sin gritar.
     --------------------------------------------------------------- */
  --cat-mexico:      #8C4A2F;  --cat-mexico-bg:     #F3E7E0;
  --cat-mundo:       #3F5A73;  --cat-mundo-bg:      #E4E9EE;
  --cat-economia:    #6F5A1E;  --cat-economia-bg:   #F0EADA;
  --cat-tecnologia:  #574A78;  --cat-tecnologia-bg: #E8E5F0;
  --cat-ciencia:     #1F5F63;  --cat-ciencia-bg:    #DFECED;
  --cat-cultura:     #77405A;  --cat-cultura-bg:    #F1E4EA;
  --cat-entretenimiento: #7A5230;  --cat-entretenimiento-bg: #F1E9DF;
  --cat-deportes:    #4C6130;  --cat-deportes-bg:   #E8EEDF;

  /* ---------------------------------------------------------------
     TIPOGRAFÍA
     Serif para titulares y cuerpo: Source Serif 4. Se eligió sobre Literata
     y Newsreader porque su altura de x es alta (legible a 18px sin agrandar)
     y sus versales son sólidas, que es lo que sostiene el logo.
     Sans para interfaz, etiquetas y metadatos: Inter.
     Regla de marca: el LECTOR ve serif; la MÁQUINA (fechas, botones,
     etiquetas) habla en sans. Eso separa contenido de cromo sin usar color.
     Georgia va en la pila como respaldo real, no de adorno: es la misma
     que usa el correo, donde las fuentes de Google no cargan.
     --------------------------------------------------------------- */
  --fuente-serif: "Source Serif 4", "Source Serif Pro", Georgia,
                  "Times New Roman", "Liberation Serif", serif;
  --fuente-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --fuente-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-fuerte:  700;

  /* Escala de tamaño. El cuerpo va a 18.5px porque esto se LEE, no se
     hojea. No bajar de 18px en ninguna pantalla. */
  --texto-cuerpo:       1.15625rem;  /* 18.5px */
  --texto-cuerpo-movil: 1.125rem;    /* 18px — piso absoluto */
  --texto-chico:        0.9375rem;   /* 15px — metadatos */
  --texto-micro:        0.8125rem;   /* 13px — etiquetas de categoría */
  --texto-h3:           1.375rem;
  --texto-h2:           1.75rem;
  --texto-h1:           2.5rem;
  --texto-display:      3.25rem;     /* solo la portada */

  --interlinea-cuerpo:  1.6;    /* el texto respira */
  --interlinea-titular: 1.18;   /* los titulares se aprietan o se deshilachan */
  --interlinea-ui:      1.4;

  /* Medida: 65–70 caracteres. Más largo y el ojo pierde el renglón al
     volver; más corto y se fragmenta la frase. 34rem ≈ 68 caracteres al
     tamaño de cuerpo de arriba. */
  --medida:       34rem;
  --medida-ancha: 46rem;  /* solo cabecera y bloque de cierre */

  /* Espaciado, escala de 4px. Los saltos grandes existen porque el vacío
     generoso ES la marca: no hay adornos que separen; separa el aire. */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  3rem;
  --e-8:  4rem;
  --e-9:  6rem;   /* separación entre historias */
  --e-10: 8rem;   /* antes del cierre de la portada */

  /* Radio. Casi recto: la esquina muy redondeada es vocabulario de app, y
     esto quiere leerse como una página. */
  --radio-0:    0;
  --radio-1:    2px;
  --radio-2:    4px;
  --radio-3:    8px;
  --radio-pill: 999px;

  /* Transición única. No hay animación decorativa en este producto. */
  --transicion: 120ms ease-out;
}


/* ---------------------------------------------------------------
   COLOR — base oscura. Obligatoria, con las MISMAS relaciones que la
   clara: fondo cálido (no azulado), texto por debajo del blanco puro,
   acento aclarado para que siga leyéndose.

   Se aplica por dos vías, a propósito:
     1) prefers-color-scheme → lo que el sistema del lector ya decidió
     2) [data-tema="oscuro"] → el interruptor manual, que debe GANAR
   Por eso el bloque del atributo va DESPUÉS y fuera del media query, y el
   media query se desactiva si el lector eligió claro a mano.
   --------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-fondo:        #16150F;
    --color-fondo-alt:    #201E17;
    --color-texto:        #EDE9E1;
    --color-texto-suave:  #A8A296;
    --color-texto-tenue:  #776F63;
    --color-borde:        #2E2B22;
    --color-borde-fuerte: #494437;

    /* El acento se ACLARA: #2D5F4C sobre negro se apaga y deja de leerse.
       Misma relación, distinto valor. */
    --color-acento:           #7FB89F;
    --color-acento-hover:     #9BCDB5;
    --color-acento-suave:     #1E2E27;

    --color-acento-alt:       #DE9270;
    --color-acento-alt-hover: #ECA88A;
    --color-acento-alt-suave: #33221A;

    /* Categorías: el texto sube de luminosidad, el fondo baja. */
    --cat-mexico:      #D69A7C;  --cat-mexico-bg:     #2C211B;
    --cat-mundo:       #9DB6CC;  --cat-mundo-bg:      #1C232B;
    --cat-economia:    #C7B27A;  --cat-economia-bg:   #262218;
    --cat-tecnologia:  #B0A4D2;  --cat-tecnologia-bg: #211E2B;
    --cat-ciencia:     #87BFC3;  --cat-ciencia-bg:    #182627;
    --cat-cultura:     #CF9AAF;  --cat-cultura-bg:    #2A1E24;
    --cat-entretenimiento: #D4AE86;  --cat-entretenimiento-bg: #2A2118;
    --cat-deportes:    #A8C081;  --cat-deportes-bg:   #1F2619;
  }
}

:root[data-tema="oscuro"] {
    --color-fondo:        #16150F;
    --color-fondo-alt:    #201E17;
    --color-texto:        #EDE9E1;
    --color-texto-suave:  #A8A296;
    --color-texto-tenue:  #776F63;
    --color-borde:        #2E2B22;
    --color-borde-fuerte: #494437;

    /* El acento se ACLARA: #2D5F4C sobre negro se apaga y deja de leerse.
       Misma relación, distinto valor. */
    --color-acento:           #7FB89F;
    --color-acento-hover:     #9BCDB5;
    --color-acento-suave:     #1E2E27;

    --color-acento-alt:       #DE9270;
    --color-acento-alt-hover: #ECA88A;
    --color-acento-alt-suave: #33221A;

    /* Categorías: el texto sube de luminosidad, el fondo baja. */
    --cat-mexico:      #D69A7C;  --cat-mexico-bg:     #2C211B;
    --cat-mundo:       #9DB6CC;  --cat-mundo-bg:      #1C232B;
    --cat-economia:    #C7B27A;  --cat-economia-bg:   #262218;
    --cat-tecnologia:  #B0A4D2;  --cat-tecnologia-bg: #211E2B;
    --cat-ciencia:     #87BFC3;  --cat-ciencia-bg:    #182627;
    --cat-cultura:     #CF9AAF;  --cat-cultura-bg:    #2A1E24;
    --cat-entretenimiento: #D4AE86;  --cat-entretenimiento-bg: #2A2118;
    --cat-deportes:    #A8C081;  --cat-deportes-bg:   #1F2619;
}


/* ==========================================================================
   PARTE 2 — ESTILOS BASE
   Mínimos y construidos SOLO con los tokens de arriba: ni un valor de color
   o tipografía escrito a mano. Si algo hay que cambiar, se cambia el token.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-serif);
  font-size: var(--texto-cuerpo);
  font-weight: var(--peso-normal);
  line-height: var(--interlinea-cuerpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (max-width: 40rem) {
  body { font-size: var(--texto-cuerpo-movil); }
}

/* Titulares. Sin mayúsculas forzadas y sin adjetivos: el peso y el tamaño
   bastan para la jerarquía. */
h1, h2, h3, h4 {
  font-family: var(--fuente-serif);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-titular);
  color: var(--color-texto);
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: var(--texto-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--texto-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--texto-h3); font-weight: var(--peso-semi); }
h4 { font-size: var(--texto-cuerpo); font-weight: var(--peso-semi); }

p { margin: 0 0 var(--e-5); }

/* Enlace. Subrayado siempre visible: el color solo no es señal suficiente
   y el acento se usa poco justamente para que signifique algo. */
a {
  color: var(--color-acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--transicion);
}

a:hover { color: var(--color-acento-hover); }

a:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
  border-radius: var(--radio-1);
}

/* Medida. Se aplica a los contenedores de texto, no al body, para que las
   cabeceras puedan ser más anchas sin romper la lectura. */
.medida {
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.medida--ancha { max-width: var(--medida-ancha); }

/* Etiqueta de categoría. Sans, micro, y el único lugar donde entra color
   de categoría. Nunca sobre un bloque grande. */
.etiqueta {
  display: inline-block;
  font-family: var(--fuente-sans);
  font-size: var(--texto-micro);
  font-weight: var(--peso-medio);
  line-height: var(--interlinea-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--e-1) var(--e-3);
  border-radius: var(--radio-2);
  text-decoration: none;
  color: var(--color-texto-suave);
  background-color: var(--color-fondo-alt);
}

.etiqueta--mexico     { color: var(--cat-mexico);     background-color: var(--cat-mexico-bg); }
.etiqueta--mundo      { color: var(--cat-mundo);      background-color: var(--cat-mundo-bg); }
.etiqueta--economia   { color: var(--cat-economia);   background-color: var(--cat-economia-bg); }
.etiqueta--tecnologia { color: var(--cat-tecnologia); background-color: var(--cat-tecnologia-bg); }
.etiqueta--ciencia    { color: var(--cat-ciencia);    background-color: var(--cat-ciencia-bg); }
.etiqueta--cultura    { color: var(--cat-cultura);    background-color: var(--cat-cultura-bg); }
.etiqueta--entretenimiento { color: var(--cat-entretenimiento); background-color: var(--cat-entretenimiento-bg); }
.etiqueta--deportes   { color: var(--cat-deportes);   background-color: var(--cat-deportes-bg); }

/* Metadato: fecha, fuente, hora. Sans y tenue — está para consultarse,
   no para leerse. */
.meta {
  font-family: var(--fuente-sans);
  font-size: var(--texto-chico);
  line-height: var(--interlinea-ui);
  color: var(--color-texto-suave);
}

/* Separación entre historias. Lo único que separa es el aire; la línea es
   opcional y muy tenue. */
.historia + .historia {
  margin-top: var(--e-9);
  padding-top: var(--e-7);
  border-top: 1px solid var(--color-borde);
}

/* Cierre explícito de la portada. La promesa del producto es el final:
   se lee, se termina, ya. Ese final tiene que verse. */
.cierre {
  margin-top: var(--e-10);
  padding: var(--e-7) var(--e-5);
  border-top: 2px solid var(--color-borde-fuerte);
  text-align: center;
  font-family: var(--fuente-sans);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
}

/* Bloque único de publicidad. Delimitado y aparte. Nunca entre historias. */
.bloque-anuncio {
  margin: var(--e-8) auto;
  padding: var(--e-5);
  max-width: var(--medida-ancha);
  background-color: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-3);
}

.bloque-anuncio__aviso {
  display: block;
  margin-bottom: var(--e-3);
  font-family: var(--fuente-sans);
  font-size: var(--texto-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

/* Botón único. Hay uno por pantalla, como mucho. */
.boton {
  display: inline-block;
  font-family: var(--fuente-sans);
  font-size: var(--texto-chico);
  font-weight: var(--peso-medio);
  line-height: var(--interlinea-ui);
  padding: var(--e-3) var(--e-5);
  border: 0;
  border-radius: var(--radio-2);
  background-color: var(--color-acento);
  color: var(--color-fondo);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion);
}

.boton:hover { background-color: var(--color-acento-hover); color: var(--color-fondo); }

.boton:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-borde);
  margin: var(--e-7) 0;
}

img { max-width: 100%; height: auto; }

/* Nadie debe perder el foco de vista. */
:focus-visible { outline-color: var(--color-acento); }

/* Respeta a quien pidió menos movimiento. Aquí casi no hay, pero la regla
   se queda por si alguien agrega algo más adelante. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}