/* ==========================================================================
   Tema — Editorial

   Más papel que pantalla: titulares con serif, esquinas rectas, sin sombras y
   con las líneas finas haciendo el trabajo que en el diseño de partida hacen
   las cajas blancas flotando.

   Es el PRIMER tema del motor, y existe tanto para poder elegirlo como para
   comprobar que la separación aguanta: si un diseño claramente distinto se
   puede montar sin tocar una plantilla, el mecanismo vale. Todo lo que hay
   aquí abajo es o un token redefinido o una regla colgando de `.tema-editorial`
   sobre marcado que YA existe. Ni una línea de PHP cambió para tenerlo.

   ------------------------------------------------------------------------
   CÓMO SE ESCRIBE UN TEMA

   1. Redefinir los tokens en `:root`. Van los del sitio Y los alias que lee
      el motor: una hoja de sitio puede no declararlos —`retail.css` los usa
      con valor de reserva—, así que un tema que solo tocara `--marron` se
      vería a medias en un catálogo con hoja mínima.

   2. Lo estructural, colgado de `.tema-editorial`. Nunca pedir un elemento
      nuevo en el HTML: eso ya no es un tema, es un cambio del motor, y
      entonces le toca a todos los catálogos.

   3. La tipografía, con pilas del sistema o con archivos del motor. Nada de
      Google Fonts: una hoja externa bloquea el primer pintado y deja la
      tipografía en manos de un tercero. Aquí se usa pila del sistema, que
      además no pesa nada.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------- color
     Casi negro en vez de negro puro, y un papel roto en lugar del gris
     neutro: es lo que separa esto de una hoja de estilos por defecto. */
  --tinta:        #141414;
  --tinta-2:      #5f5a52;   /* 6,1:1 sobre el papel */
  --tinta-3:      #8b857a;

  /* La tinta de la marca y el acento. Son PAPELES, no colores concretos:
     `retail.css` los lee para el botón, el precio y los estados. */
  --marron:       #141414;
  --marron-osc:   #000;
  --marron-claro: #46403a;

  --ambar:        #8a7355;
  --ambar-osc:    #6d5941;   /* el mismo, ya legible sobre el papel */
  --ambar-suave:  #f0eade;

  --verde:        #2f6b46;
  --rojo:         #9c3b2f;

  --papel:        #f7f4ee;
  --papel-2:      #fbf9f5;
  --linea:        #e2dcd0;
  --linea-2:      #cfc7b7;
  --blanco:       #fff;

  /* Los alias del motor. Se repiten a propósito: ver arriba. */
  --navy:         var(--marron);
  --turq:         var(--marron);
  --turq-dark:    var(--marron-claro);
  --ink:          var(--tinta);
  --muted:        var(--tinta-2);
  --line:         var(--linea);
  --sand:         var(--papel);

  /* -------------------------------------------------------- tipografía
     Pila del sistema, sin descargar nada. La serif de los titulares no va
     aquí sino en su regla: `--font` es la del cuerpo, y el sitio la usa
     también en campos y botones, donde una serif se lee peor. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* ------------------------------------------------------------ medidas
     ESTO ES LO QUE MÁS CAMBIA EL CARÁCTER Y LO QUE MENOS SE PIENSA. Con las
     esquinas a cero, la misma web deja de parecer una aplicación y empieza a
     parecer impresa. No se pone 0 en la píldora: ahí el redondeo no es
     decoración, es lo que distingue una etiqueta de un botón. */
  --r-sm:   0px;
  --r:      0px;
  --r-lg:   0px;
  --r-pill: 999px;

  --wrap: 1120px;

  /* Sin sombras: las cajas se separan con línea, que es lo que hace un
     impreso. Se dejan declaradas en vez de borradas porque hay reglas que
     las usan y una variable sin valor no cae en el de reserva — cae en
     «propiedad inválida», y ahí el navegador se queda con la sombra
     heredada. */
  --sombra-sm: 0 0 0 1px var(--linea);
  --sombra:    0 0 0 1px var(--linea);
  --sombra-lg: 0 0 0 1px var(--linea-2);
}

/* ======================================================== lo estructural
   TODO LO QUE FALTA POR DEBAJO ES LO QUE UN TOKEN NO PUEDE HACER, y es menos
   de lo que parecía al empezar: comprobado contra el marcado real, `.btn`,
   `.catcard` y `.oferta` ya leen `--r-sm`/`--r-lg` y `--papel`, así que las
   esquinas rectas y el papel roto los aplica la lista de arriba sin una sola
   regla. Aquí abajo solo queda lo que no cabe en una variable: la familia de
   los titulares, las versalitas y el aire entre secciones.

   Cada selector de esta parte está comprobado contra el HTML que sirve el
   sitio. Un selector inventado no da error: no hace nada, y eso es peor —
   parece que el tema está puesto y media pantalla no ha cambiado. */

/* Los titulares con serif. Va por regla y no por token porque `--font` la usan
   también los campos y los botones, y ahí una serif se lee peor. */
.tema-editorial h1,
.tema-editorial h2,
.tema-editorial h3,
.tema-editorial .section-title,
.tema-editorial .hero__titulo,
.tema-editorial .oferta__titulo,
.tema-editorial .catcard__titulo,
.tema-editorial .card__title,
.tema-editorial .ficha__titulo,
.tema-editorial .marca__nombre {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* El titular de sección, con una línea debajo: es el recurso de un impreso, y
   sustituye al peso tipográfico como forma de jerarquía. */
.tema-editorial .section-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
  letter-spacing: 0.01em;
}

/* El botón en versalitas anchas. Es lo que más se repite en la página, así que
   es donde antes se nota el cambio de carácter. El radio ya lo puso el token. */
.tema-editorial .btn {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Con las esquinas a cero y sin sombra, estas dos cajas se quedaban flotando
   sobre el papel sin nada que las delimitara: la línea es lo que las vuelve a
   definir. */
.tema-editorial .catcard,
.tema-editorial .oferta { border: 1px solid var(--linea); }

/* El precio con serif: en un catálogo de autor la cifra es parte del
   contenido, no una etiqueta de tienda. */
.tema-editorial .card__precio,
.tema-editorial .ficha__precio {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

/* La categoría de la tarjeta, en versalitas: es el pie de foto de un impreso. */
.tema-editorial .card__cat {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Las secciones respiran más. En un diseño sin sombras ni cajas, el blanco es
   lo único que separa una cosa de otra. Solo en escritorio: en un teléfono el
   aire de más son pantallazos de scroll, que es justo lo que se apretó en su
   día a propósito. */
@media (min-width: 1021px) {
  .tema-editorial .section { padding: 84px 0; }
  .tema-editorial .section--tight { padding: 46px 0; }
}