/* ==========================================================================
   Sapiens — hoja de estilos para monografías de hortalizas
   Reproduce a mano el diseño editorial del «Sapiens del tomate» (Bullipedia).

   Medidas tomadas del PDF original (página simple de 651,97 × 935,43 pt):
     · texto base Baskerville 10,5/14 pt, justificado, caja de 470 pt
     · título de sección Clarendon 19 pt; apertura de capítulo Clarendon 25 pt
     · subtítulo DIN Bold 12 pt, rojo, mayúsculas
     · pestaña roja de folio 71 × 24 pt; cabecera corrida DIN 8,2 pt
   Conversión a pantalla: 1 pt del libro ≈ 1,62 px (texto base de 17 px).
   ========================================================================== */

/* ---------- Fuentes ---------- */

@font-face {
  font-family: "Clarendon BT";
  src: url("../fonts/ClarendonBT-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "DIN Next LT Pro";
  src: url("../fonts/DINNextLTPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Baskerville BE";
  src: url("../fonts/BaskervilleBE-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Baskerville BE";
  src: url("../fonts/BaskervilleBE-Medium.otf") format("opentype");
  font-weight: 500 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Baskerville BE";
  src: url("../fonts/BaskervilleBE-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

/* ---------- Variables ---------- */

:root {
  /* Familias */
  --fuente-titulo: "Clarendon BT", Georgia, serif;
  --fuente-rotulo: "DIN Next LT Pro", Arial, sans-serif;
  --fuente-texto: "Baskerville BE", Georgia, serif;

  /* Colores (muestreados del PDF) */
  --rojo: #e30613;            /* pestañas, subtítulos, cabeceras de tabla, citas */
  --negro: #000000;
  --gris-oscuro: #3c3c3b;
  --gris-medio: #9d9d9c;      /* numeración, notas al pie de figura */
  --gris-cabecera: #c6c6c6;   /* fila de cabecera de tabla */
  --gris-claro: #ebebeb;      /* comillas de las frases destacadas */
  --gris-caja: #f2f2f2;       /* fondo de celdas y cajas grises */
  --beige-caja: #ece5d8;      /* cajas «¿Sabías que…?» del libro */
  --blanco: #ffffff;
  --fondo: #ffffff;

  /* Tipografía (escala 17 px = 10,5 pt) */
  --tam-base: 17px;
  --interlineado: 1.333;               /* 14 / 10,5 */
  --tam-h1: 1.81em;                    /* 19 pt  · Clarendon */
  --tam-h1-apertura: 2.38em;           /* 25 pt  · Clarendon */
  --tam-capitulo: 1.52em;              /* 16 pt  · DIN «CAPÍTULO 1» */
  --tam-h2: 1.14em;                    /* 12 pt  · DIN subtítulo */
  --tam-indice-titulo: 2.1em;          /* 22 pt  · DIN «ÍNDICE» */
  --tam-indice-capitulo: 1.62em;       /* 17 pt  · DIN entradas de índice */
  --tam-destacado: 1.65em;             /* 20 pt en el libro, algo menor en pantalla */
  --tam-tabla: 0.88em;                 /* 7–8,5 pt en el libro, ampliado para pantalla */
  --tam-tabla-rotulo: 0.8em;
  --tam-fuentes: 0.82em;               /* 7,5 pt en el libro, ampliado para pantalla */
  --tam-cabecera: 0.78em;              /* 8,2 pt */
  --tam-pestana: 0.95em;               /* 10 pt */

  /* Espaciado y medidas */
  --medida: 44.8rem;                   /* caja de texto de 470 pt ≈ 761 px */
  --margen: clamp(16px, 9vw, 160px);   /* margen exterior de 99 pt */
  --separacion-pestana: 1.75em;        /* 28 pt entre pestaña y texto */
  --espacio-parrafo: 1.333em;          /* una línea en blanco entre párrafos (14 pt) */
  --espacio-bloque: 2.2em;
  --espacio-seccion: 3.4em;
  --raya-ancho: 1.8rem;                /* raya corta bajo los títulos (19 pt ≈ 31 px) */
  --raya-grosor: 1px;                  /* 0,5 pt */
  --relleno-caja: 0.95em 1em;
}

/* ---------- Base ---------- */

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

html {
  font-size: var(--tam-base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--negro);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: var(--interlineado);
  font-kerning: normal;
}

a {
  color: inherit;
}

.pagina {
  max-width: calc(var(--medida) + 2 * var(--margen));
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pagina__cuerpo {
  flex: 1;
  padding: 3.6em var(--margen) var(--espacio-seccion);
}

.pagina__cuerpo > * {
  max-width: var(--medida);
}

/* ---------- Cabecera (pestaña roja + titulillo) ---------- */

.cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--separacion-pestana);
  padding-top: 1.45em;                  /* 24,5 pt desde el borde */
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  text-transform: uppercase;
}

.cabecera__pestana {
  flex: none;
  min-width: max(2.6rem, calc(var(--margen) - var(--separacion-pestana)));
  height: 2.35em;                       /* 24 pt */
  padding: 0 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rojo);
  color: var(--blanco);
  font-size: var(--tam-pestana);
  letter-spacing: 0.02em;
}

.cabecera__titulillo {
  margin: 0;
  padding-top: 0.1em;
  font-size: var(--tam-cabecera);
  line-height: 1.2;
  min-width: 0;
}

.cabecera__titulillo span {
  display: block;
}

/* El libro alterna DIN Bold / DIN Regular; solo disponemos de DIN Bold,
   así que la segunda línea se diferencia por color. */
.cabecera__titulillo .cabecera__seccion {
  color: var(--gris-oscuro);
  letter-spacing: 0.02em;
}

/* ---------- Pie ---------- */

.pie {
  margin: 0 var(--margen);
  padding: 0.9em 0 1.6em;
  border-top: var(--raya-grosor) solid var(--gris-cabecera);
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--tam-cabecera);
  text-transform: uppercase;
  color: var(--gris-medio);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4em 1.5em;
}

/* ---------- Títulos ---------- */

.titulo-seccion {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: var(--tam-h1);
  line-height: 1.17;
}

/* Raya corta de 19 × 0,5 pt bajo los títulos de sección */
.raya {
  display: block;
  width: var(--raya-ancho);
  height: 0;
  margin: 1.4em 0 1.5em;
  border: 0;
  border-top: var(--raya-grosor) solid var(--negro);
}

.subtitulo {
  margin: 0 0 0.75em;
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--tam-h2);
  line-height: 1.17;
  text-transform: uppercase;
  color: var(--rojo);
}

/* ---------- Apertura de capítulo ---------- */

.apertura {
  margin-bottom: 0.2em;
}

.apertura__ilustracion {
  margin: 0 0 2.4em;
}

.apertura__etiqueta {
  margin: 0 0 0.55em;
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--tam-capitulo);
  line-height: 1.15;
  text-transform: uppercase;
}

.apertura .titulo-seccion {
  font-size: var(--tam-h1-apertura);
  line-height: 1.2;
}

/* ---------- Hueco de ilustración ---------- */

.ilustracion-pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  background: var(--gris-caja);
  border: var(--raya-grosor) dashed var(--gris-cabecera);
  color: var(--gris-medio);
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--tam-cabecera);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Bloque: texto ---------- */

.bloque {
  margin: 0 0 var(--espacio-bloque);
}

.bloque-texto p {
  margin: 0 0 var(--espacio-parrafo);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.bloque-texto p:last-child {
  margin-bottom: 0;
}

/* ---------- Bloque: destacado (frase destacada con comillas grises) ---------- */

.bloque-destacado {
  margin: var(--espacio-seccion) 0;
}

.bloque-destacado blockquote {
  margin: 0;
  max-width: 30em;
  font-family: var(--fuente-texto);
  font-size: var(--tam-destacado);
  line-height: 1.2;
  color: var(--rojo);
  text-align: left;
  hyphens: none;
}

.bloque-destacado blockquote::before,
.bloque-destacado blockquote::after {
  font-family: var(--fuente-titulo);
  color: var(--gris-claro);
  line-height: 0;
}

/* Comilla de apertura colgada en el margen, como en el libro */
.bloque-destacado blockquote::before {
  content: "\201C";
  display: inline-block;
  width: 0;
  font-size: 2.1em;
  position: relative;
  left: -0.5em;
  top: 0.3em;
}

.bloque-destacado blockquote::after {
  content: "\201D";
  font-size: 2.1em;
  margin-left: 0.08em;
  position: relative;
  top: 0.48em;
}

/* ---------- Bloque: tabla ---------- */

.bloque-tabla {
  font-size: var(--tam-tabla);
}

.tabla__marco {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--gris-caja);
  line-height: 1.3;
}

.tabla caption {
  caption-side: top;
  padding: 0.45em 0.75em 0.35em;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: calc(var(--tam-tabla-rotulo) * 1.15);
  text-align: left;
  text-transform: uppercase;
}

.tabla th,
.tabla td {
  padding: 0.55em 0.75em;
  border: 1px solid var(--blanco);
  text-align: left;
  vertical-align: top;
}

.tabla thead th {
  background: var(--gris-cabecera);
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--tam-tabla-rotulo);
  text-transform: uppercase;
  vertical-align: bottom;
}

/* Sin título, la cabecera toma la barra roja (como en las tablas de columnas del libro) */
.tabla--sin-titulo thead th {
  background: var(--rojo);
  color: var(--blanco);
}

.tabla tbody td {
  font-family: var(--fuente-texto);
}

/* ---------- Bloque: fuentes ---------- */

.bloque-fuentes {
  margin-top: var(--espacio-seccion);
  font-size: var(--tam-fuentes);
  line-height: 1.33;
}

.bloque-fuentes .raya {
  margin: 0 0 1.4em;
}

.bloque-fuentes .subtitulo {
  font-size: calc(var(--tam-h2) * 0.75 / 0.82);   /* 9 pt en el libro */
  margin-bottom: 1.1em;
}

.fuentes__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fuente;
}

.fuentes__lista li {
  counter-increment: fuente;
  position: relative;
  padding-left: 2.4em;                  /* sangría francesa de 18 pt */
  margin-bottom: 0.9em;
  overflow-wrap: anywhere;
}

.fuentes__lista li::before {
  content: counter(fuente) ".";
  position: absolute;
  left: 0;
}

.fuentes__url {
  color: var(--negro);
  text-decoration-color: var(--gris-cabecera);
  text-underline-offset: 0.15em;
}

.fuentes__url:hover {
  color: var(--rojo);
  text-decoration-color: currentColor;
}

/* ---------- Índice ---------- */

.indice__hortaliza {
  margin: 0 0 0.35em;
}

.indice__titulo {
  margin: 0 0 1.9em;
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--tam-indice-titulo);
  line-height: 1.15;
  text-transform: uppercase;
}

.indice__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.indice__entrada {
  margin-bottom: 1.6em;
}

.indice__enlace {
  display: block;
  padding: 0 0 0.35em;
  text-decoration: none;
  color: inherit;
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}

.indice__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding-bottom: 0.2em;
  border-bottom: 1.6px solid var(--rojo);   /* raya roja de 1 pt */
  font-size: var(--tam-indice-capitulo);
  line-height: 1.15;
}

.indice__flecha {
  color: var(--rojo);
  font-size: 0.72em;
  transition: transform 0.15s ease;
}

.indice__nombre {
  display: block;
  margin-top: 0.6em;
  color: var(--rojo);
  font-size: var(--tam-h2);
  line-height: 1.17;
}

.indice__enlace:hover,
.indice__enlace:focus-visible {
  background: var(--gris-caja);
  outline: none;
}

.indice__enlace:hover .indice__flecha,
.indice__enlace:focus-visible .indice__flecha {
  transform: translateX(0.25em);
}

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 600px) {
  :root {
    --tam-base: 16px;
    --tam-h1-apertura: 2em;
    --tam-destacado: 1.4em;
    --espacio-seccion: 2.6em;
  }

  .pagina__cuerpo {
    padding-top: 2.4em;
  }

  /* Sin margen donde colgar la comilla, se deja hueco dentro */
  .bloque-destacado {
    padding-left: 1em;
  }

  /* El justificado abre ríos en columnas estrechas */
  .bloque-texto p {
    text-align: left;
  }
}