/* ============================================================================
   Aura Natural — hoja de estilo única

   ## La decisión de diseño, en una línea

   Esto se ve como el INSTRUCTIVO de una caja de medicamento, no como un
   anuncio.

   El género —reseñas de suplementos— tiene todas las páginas iguales: banner
   rojo, cuenta regresiva, «50% DE DESCUENTO» parpadeando. El lector que llegó
   buscando «¿magicoa funciona?» ya vio cincuenta, y esa estética le enciende
   justo la desconfianza que impide que compre. Aquí la conversión sale de la
   credibilidad, no de la urgencia.

   De ahí salen las tres reglas duras:

   1. **UNA SOLA TINTA de color.** Un instructivo se imprime a un color sobre
      papel. Todo el verde de esta hoja es el mismo verde. No hay rojo de
      oferta, no hay amarillo de advertencia, no hay degradados.
   2. **La ficha va arriba, y dice cómo se financia el sitio.** El aviso de
      comisión no se esconde en el pie: es una fila más de la ficha técnica,
      con la misma tipografía que las demás. Es contraintuitivo y es justo lo
      que hace que no se lea como spam.
   3. **Cero JavaScript.** No hay nada que animar. Cada kilobyte que no se
      manda es tiempo de carga que Google mide y que el asistente premia.

   ## Las letras

   `archivo` — grotesca ligeramente estrecha, para etiquetas, títulos y datos.
   Es la letra de las tablas de un prospecto farmacéutico.
   `lectura` (Source Serif 4) — dibujada para leer largo en pantalla. Hay
   novecientas páginas de texto corrido: esta elección decide si se leen.
   ========================================================================= */

@import url("/fuentes/caras.css");

:root {
  /* Papel de instructivo: blanco frío, con un matiz verde-gris apenas
     perceptible. NO es el crema tostado de siempre — ese lee «boutique
     artesanal» y aquí hace falta que lea «información». */
  --papel: #f1f2f0;
  --ficha: #ffffff;
  --tinta: #16211d;
  --tinta-suave: #5a645f;
  --linea: #d5d9d4;
  --linea-fuerte: #16211d;

  /* La única tinta de color de todo el sitio. */
  --spot: #0e5136;
  --spot-papel: #e6eee9;

  --medida: 40rem;      /* ~68 caracteres: el ancho al que se lee sin cansarse */
  --aire: clamp(1.15rem, 4vw, 2rem);
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'lectura', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 1.1875rem;
  line-height: 1.72;
  font-synthesis-weight: none;
}

/* ---------------------------------------------------------------- cabecera */
/* La cabecera de un instructivo: el nombre, una raya, y nada más. Sin menú
   desplegable, sin buscador, sin barra pegajosa. */
.cabecera {
  border-bottom: 1px solid var(--linea-fuerte);
  background: var(--ficha);
}
/* Dos filas: el nombre arriba, las secciones debajo separadas por una
   hairline. En una sola fila no entraban — la medida de lectura son 40rem y
   los siete rótulos en versalitas piden más de 600px, así que la marca se
   partía en dos renglones y el menú caía desalineado en dos filas.
   Ensanchar la cabecera habría desalineado el nombre con el texto del
   artículo, que es la alineación que sostiene la página. */
.cabecera .caja {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 1.05rem var(--aire) 0;
}
.cabecera .marca-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
}
.marca {
  font-family: 'archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--tinta);
  text-decoration: none;
}
.marca span { color: var(--spot); }
.cabecera nav a {
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--tinta-suave);
  text-decoration: none;
}
.cabecera nav a:hover { color: var(--spot); }

/* El menú de las siete secciones del sitio original: una fila sola, bajo una
   hairline, con el mismo aire a izquierda y derecha que el texto. En pantalla
   chica se desliza en horizontal antes que apilarse en siete renglones. */
.secciones {
  border-top: 1px solid var(--linea);
  overflow-x: auto;
  scrollbar-width: none;
}
.secciones::-webkit-scrollbar { display: none; }
.secciones ul {
  list-style: none;
  margin: 0;
  padding: .7rem 0 .8rem;
  display: flex;
  gap: .95rem;
  white-space: nowrap;
}
.secciones li { flex: 0 0 auto; }
.cabecera .secciones a {
  font-size: .655rem;
  letter-spacing: .055em;
  padding-bottom: .15rem;
  border-bottom: 2px solid transparent;
}
.secciones a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--spot);
}

/* La sección va en el mismo renglón que el tipo, separada por un punto: el
   rótulo dice QUÉ es la página y DÓNDE vive, de un vistazo. */
.rotulo .sep { margin: 0 .5rem; color: var(--linea-fuerte); opacity: .35; }
a.seccion { color: var(--tinta-suave); text-decoration: none; }
a.seccion:hover { color: var(--spot); text-decoration: underline; }

.volver { margin-top: 2.4rem; font-size: .9rem; }


/* -------------------------------------------------------------- estructura */
.caja { max-width: var(--medida); margin: 0 auto; padding: 0 var(--aire); }
main { padding: clamp(2rem, 6vw, 3.5rem) 0 2rem; }

/* La etiqueta pequeña de arriba: dice QUÉ es esta página, no adorna. */
.rotulo {
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--spot);
  margin: 0 0 .7rem;
}

h1 {
  font-family: 'archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.021em;
  margin: 0 0 .85rem;
  text-wrap: balance;
}

/* La entradilla: la respuesta corta, antes de las mil quinientas palabras. */
.entrada {
  font-size: 1.24rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0 0 2rem;
}

/* --------------------------------------------------------------- LA FICHA */
/* El elemento que distingue a este sitio. Es la tabla de datos de un
   prospecto: fondo blanco, marco de un pelo, etiquetas en versalitas.
   Contesta en cinco segundos lo que el lector vino a preguntar, y ahí mismo
   —no en el pie— confiesa cómo se financia el sitio. */
.ficha {
  background: var(--ficha);
  border: 1px solid var(--linea-fuerte);
  margin: 0 0 2.6rem;
  padding: 0;
  font-family: 'archivo', system-ui, sans-serif;
}
.ficha-titulo {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ficha);
  background: var(--linea-fuerte);
  padding: .42rem .95rem;
}
.ficha dl { margin: 0; }
.ficha .fila {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 1rem;
  padding: .62rem .95rem;
  border-bottom: 1px solid var(--linea);
}
.ficha .fila:last-child { border-bottom: 0; }
.ficha dt {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-suave);
  padding-top: .22rem;
}
.ficha dd {
  margin: 0;
  font-size: .93rem;
  line-height: 1.5;
}
/* La fila del aviso: misma tipografía, mismo peso. No es un descargo legal
   escondido, es un dato más de la ficha. */
.ficha .aviso { background: var(--spot-papel); }
.ficha .aviso dt { color: var(--spot); }

/* ----------------------------------------------------------- el texto largo */
article p { margin: 0 0 1.35rem; }

h2 {
  font-family: 'archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.42rem;
  line-height: 1.25;
  letter-spacing: -.012em;
  margin: 2.9rem 0 1rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--spot);
  text-wrap: balance;
}
h3 {
  font-family: 'archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 2rem 0 .6rem;
}

article ul, article ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
article li { margin: 0 0 .5rem; }
article li::marker { color: var(--spot); }
/* Los pasos de una receta van numerados porque el orden ES el dato. El número
   se pone en la letra de las etiquetas para que se lea como un paso y no como
   parte de la frase. */
article ol > li::marker {
  font-family: 'archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: .92em;
}

article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.8rem 0;
  border: 1px solid var(--linea);
  background: var(--ficha);
}

/* --------------------------------------------------------------- tablas */
/* Un tercio de las páginas compara precios por país en una tabla. Se ven como
   la tabla de datos del instructivo —la misma familia que la ficha de arriba—
   porque son la misma cosa: dato duro, no prosa.

   La envoltura con `overflow-x` es obligatoria: una comparativa de cuatro
   columnas no cabe en un teléfono, y sin esto es la TABLA la que empuja el
   ancho de la página entera y rompe todo lo demás. Que se desplace la tabla,
   no el sitio. */
.tabla-envoltura {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.9rem 0;
  border: 1px solid var(--linea-fuerte);
  background: var(--ficha);
}
.tabla-envoltura table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .9rem;
}
.tabla-envoltura th {
  text-align: left;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ficha);
  background: var(--linea-fuerte);
  padding: .5rem .85rem;
  white-space: nowrap;
}
.tabla-envoltura td {
  padding: .58rem .85rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
  line-height: 1.45;
}
.tabla-envoltura tr:last-child td { border-bottom: 0; }
/* La primera columna es la etiqueta de la fila («Precio», «Formato»), así que
   se comporta como etiqueta: es la que deja leer la tabla de un vistazo. */
.tabla-envoltura td:first-child {
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}
.tabla-envoltura tbody tr:hover { background: #f7f9f8; }

a { color: var(--spot); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ la ida */
/* El enlace al fabricante. Un bloque sólido de la única tinta del sitio: se
   ve, y no grita. Sin cuenta regresiva y sin «¡ÚLTIMAS PIEZAS!», que es lo
   que delata a las páginas que el lector ya aprendió a cerrar. */
.ida {
  display: block;
  background: var(--spot);
  color: var(--ficha);
  text-decoration: none;
  padding: 1.05rem 1.3rem;
  margin: 2.4rem 0;
  border: 1px solid var(--spot);
}
.ida:hover { background: var(--ficha); color: var(--spot); }
.ida .que {
  display: block;
  font-family: 'archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.005em;
}
.ida .como {
  display: block;
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .82;
  margin-top: .18rem;
}

/* --------------------------------------------------------------- el índice */
/* La portada es un vademécum, no un blog: la lista completa, alfabética, con
   sus anclas por letra. Lo que el lector quiere es encontrar SU producto. */
.tapa { border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 2.4rem; margin-bottom: 2.4rem; }
.cifra {
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.abecedario {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
}
.abecedario a {
  display: block;
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  min-width: 2rem;
  padding: .3rem 0;
  text-align: center;
  text-decoration: none;
  color: var(--tinta);
  background: var(--ficha);
  border: 1px solid var(--linea);
}
.abecedario a:hover { border-color: var(--spot); color: var(--spot); }

.letra {
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--spot);
  border-bottom: 1px solid var(--linea-fuerte);
  padding-bottom: .3rem;
  margin: 2.4rem 0 .9rem;
  scroll-margin-top: 1rem;
}
.listado { list-style: none; margin: 0; padding: 0; }
.listado li { border-bottom: 1px solid var(--linea); }
.listado a {
  display: block;
  padding: .62rem 0;
  color: var(--tinta);
  text-decoration: none;
  font-size: 1.02rem;
  line-height: 1.4;
}
.listado a:hover { color: var(--spot); }
.listado .tipo {
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-suave);
  margin-left: .5rem;
}

/* -------------------------------------------------- tarjeta de producto */
/* Siete páginas comparaban productos en una cuadrícula de tres columnas del
   maquetador viejo. Aplanada quedaba una lluvia de párrafos sin etiqueta
   —«4.9/5», «49 €», «España y USA»— que no decían de qué producto eran.

   Se rearma como ficha, no como cuadrícula: en un teléfono tres columnas de
   texto largo no se leen, y una debajo de otra sí. */
.producto {
  background: var(--ficha);
  border: 1px solid var(--linea-fuerte);
  padding: 1.15rem 1.25rem;
  margin: 1.5rem 0;
}
.producto-nombre {
  font-family: 'archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  margin: 0 0 .55rem;
}
.producto img { margin: .6rem 0 .9rem; border: 0; max-width: 190px; }
.producto p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.55; }
.producto-datos {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border-top: 1px solid var(--linea);
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .86rem;
}
.producto-datos li {
  padding: .42rem 0;
  border-bottom: 1px solid var(--linea);
  margin: 0;
}
.producto-datos span {
  display: inline-block;
  min-width: 7.5rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-suave);
}
.producto-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: 0 !important;
  font-family: 'archivo', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 600;
}

/* ------------------------------------------------------- seguir leyendo */
/* La salida de la página. Va al FINAL y no al costado: quien llegó buscando
   «¿X funciona?» tiene que poder leer la respuesta sin nada compitiendo al
   lado. Se ve como el reverso del instructivo: una lista sobria, sin
   miniaturas ni «también te puede interesar». */
.seguir {
  border-top: 1px solid var(--linea-fuerte);
  margin: 3.4rem 0 0;
  padding-top: 1.1rem;
}
.seguir ul { list-style: none; margin: 0; padding: 0; }
.seguir li { border-bottom: 1px solid var(--linea); }
.seguir li:last-child { border-bottom: 0; }
.seguir a {
  display: block;
  padding: .6rem 0;
  color: var(--tinta);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.42;
}
.seguir a:hover { color: var(--spot); }

/* ------------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--linea-fuerte);
  background: var(--ficha);
  margin-top: 2.6rem;
  padding: 2rem 0 3rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}
.pie p { margin: 0 0 .8rem; max-width: 42rem; }
.pie a { color: var(--spot); }

/* ------------------------------------------------------------- lo básico */
:focus-visible { outline: 2px solid var(--spot); outline-offset: 2px; }

@media (max-width: 34rem) {
  body { font-size: 1.08rem; }
  .ficha .fila { grid-template-columns: 1fr; gap: .15rem; }
  .ficha dt { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .cabecera nav, .secciones, .ida { display: none; }
  body { background: #fff; font-size: 11pt; }
}
.tabla-envoltura s { color: var(--tinta-suave); }