/* =====================================================================
   Huerto Fácil en Casa · componentes de la web pública (fases 2, 3 y 5)
   Se apoya en los tokens de base.css. Móvil primero.
   ===================================================================== */

/* ---------- Franja de entorno de pruebas ---------- */
.franja-pruebas { background: #FFF4D6; color: #5C4300; text-align: center; font-size: var(--t-xs); padding: var(--e-1) var(--e-4); }

/* ---------- Cabecera ---------- */
.cabecera { position: relative; z-index: 20; }
.cabecera__fila { gap: var(--e-4); }
.menu { display: none; }
.menu ul { display: flex; gap: var(--e-1); list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: var(--e-2) var(--e-3); border-radius: var(--radio);
  color: var(--verde-oscuro); text-decoration: none; font-size: var(--t-s); font-weight: 550;
}
.menu a:hover, .menu a[aria-current="page"] { background: var(--verde-claro); }

.buscador { display: none; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--blanco); overflow: hidden; }
.buscador input { border: 0; background: transparent; font: inherit; font-size: var(--t-s); padding: var(--e-2) var(--e-3); width: 9.5rem; min-width: 0; color: var(--texto); }
.buscador input:focus { outline: none; }
.buscador:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.buscador button { border: 0; background: transparent; color: var(--verde-oscuro); padding: var(--e-2) var(--e-3); cursor: pointer; display: grid; place-items: center; }
.buscador button svg { width: 1.2rem; height: 1.2rem; }
.buscador--movil { display: flex; margin-bottom: var(--e-3); }
.buscador--movil input { width: 100%; }
.buscador--grande { display: flex; max-width: 36rem; margin: var(--e-4) 0 var(--e-5); border-radius: var(--radio); padding: var(--e-1); gap: var(--e-2); }
.buscador--grande input { width: 100%; font-size: var(--t-m); }
.buscador--grande .boton { min-height: 2.5rem; }
.portada-provisional .buscador--grande { margin-inline: auto; }

.menu-movil { margin-left: auto; }
.menu-movil summary {
  list-style: none; display: flex; align-items: center; gap: var(--e-2); cursor: pointer;
  padding: var(--e-2) var(--e-3); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  color: var(--verde-oscuro); font-weight: 600; font-size: var(--t-s);
}
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary svg { width: 1.3rem; height: 1.3rem; }
.menu-movil__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanco); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra);
  padding: var(--e-4);
}
.menu-movil__panel ul { list-style: none; margin: 0; padding: 0; }
.menu-movil__panel a {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-2);
  color: var(--verde-oscuro); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--borde);
}
.menu-movil__panel a svg { width: 1.3rem; height: 1.3rem; color: var(--verde); }

@media (min-width: 64rem) {
  .menu { display: block; margin-left: auto; }
  .buscador { display: flex; }
  .menu-movil { display: none; }
}

/* ---------- Hero ----------
   Fondo: assets/img/marca/banner-*.{webp,jpg} (planta a la izquierda, zona clara a la derecha).
   En móvil y tablet un velo blanco asegura el contraste del texto; en escritorio el texto va a la derecha.
   En móvil se sustituye por la imagen banner-movil-828 (al final de este archivo). */
.hero {
  position: relative; padding-block: var(--e-7);
  background-color: var(--verde-claro);
  background-image: linear-gradient(90deg, rgb(255 255 255 / .55), rgb(255 255 255 / .8)), url("../img/marca/banner-1200.jpg");
  background-image: linear-gradient(90deg, rgb(255 255 255 / .55), rgb(255 255 255 / .8)), image-set(url("../img/marca/banner-1200.webp") type("image/webp"), url("../img/marca/banner-1200.jpg") type("image/jpeg"));
  background-size: cover; background-position: left bottom;
}
.hero__rejilla { display: grid; }
.hero__antetitulo { color: var(--verde); font-weight: 650; font-size: var(--t-s); margin-bottom: var(--e-2); }
.hero h1 { margin-bottom: var(--e-4); max-width: 18ch; }
.hero__entrada { font-size: var(--t-l); color: var(--texto); max-width: 34rem; margin-bottom: var(--e-5); }
.hero__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
@media (min-width: 56rem) {
  .hero {
    padding-block: var(--e-8); min-height: 26rem; display: grid; align-items: center;
    background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 25%, rgb(255 255 255 / .35)), url("../img/marca/banner-2000.jpg");
    background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 25%, rgb(255 255 255 / .35)), image-set(url("../img/marca/banner-2000.webp") type("image/webp"), url("../img/marca/banner-2000.jpg") type("image/jpeg"));
  }
  .hero__rejilla { width: 100%; }
  .hero__texto { margin-left: auto; width: min(36rem, 62%); }
}

/* ---------- Cabecera con logo en imagen y botón Inicio ---------- */
.logo--imagen { display: block; flex: none; }
.logo--imagen img { display: block; height: 52px; width: auto; }
.logo--pie img { height: 84px; }
@media (min-width: 64rem) { .logo--imagen img { height: 60px; } .logo--pie img { height: 96px; } }
.menu__inicio { display: inline-flex !important; align-items: center; gap: .35rem; }
.menu__inicio svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Secciones ---------- */
.seccion__titulo { margin-top: 0; }
.seccion__cabecera { margin-bottom: var(--e-5); }
.seccion__cabecera h2 { margin-bottom: var(--e-2); }
.seccion__cabecera p { color: var(--texto-suave); margin: 0; }

/* Accesos a categorías */
.accesos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.acceso {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); align-items: center; height: 100%;
  padding: var(--e-4); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-l);
  text-decoration: none; color: var(--texto); transition: border-color .15s, transform .15s;
}
.acceso:hover { border-color: var(--verde); transform: translateY(-2px); color: var(--texto); }
.acceso .icono-categoria { grid-row: span 2; }
.acceso__nombre { font-weight: 700; color: var(--verde-oscuro); }
.acceso__resumen { font-size: var(--t-xs); color: var(--texto-suave); line-height: 1.45; }

/* Tarjeta de artículo: cabecera con el color de su categoría y la ilustración en círculo,
   que «muerde» el cuerpo. Cada categoría define --c (color fuerte) y --c-claro (fondo). */
.tarjeta-articulo { --c: var(--verde); --c-claro: #E3F2E4; padding: 0; overflow: hidden; gap: 0; border-color: transparent; box-shadow: 0 2px 10px rgb(23 76 48 / .08); }
.tarjeta-articulo--riego-automatico { --c: #2F7FB5; --c-claro: #E2F0F9; }
.tarjeta-articulo--programadores-de-riego { --c: #1F7A78; --c-claro: #DFF1EF; }
.tarjeta-articulo--macetas-y-jardineras { --c: #A9502D; --c-claro: #F8E9DF; }
.tarjeta-articulo--guias-de-cultivo { --c: #8A6A12; --c-claro: #F7EFD6; }
.tarjeta-articulo.tarjeta--clicable:hover { border-color: transparent; transform: translateY(-4px); box-shadow: 0 14px 30px rgb(23 76 48 / .16); }
.tarjeta-articulo__cabecera {
  position: relative; height: 7rem;
  background:
    radial-gradient(circle at 85% -20%, rgb(255 255 255 / .75) 0 28%, transparent 29%),
    radial-gradient(circle at 105% 110%, color-mix(in srgb, var(--c) 16%, transparent) 0 30%, transparent 31%),
    var(--c-claro);
  border-bottom: 3px solid var(--c);
}
.tarjeta-articulo__cabecera--foto { height: auto; aspect-ratio: 16 / 9; }
.tarjeta-articulo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-articulo__tipo {
  position: absolute; top: var(--e-3); right: var(--e-3);
  background: var(--blanco); color: var(--c); font-size: var(--t-xs); font-weight: 700;
  padding: .2rem .7rem; border-radius: 99px; box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
.tarjeta-articulo__tipo--comparativa { background: var(--terracota); color: var(--blanco); }
.tarjeta-articulo__emoji {
  position: absolute; left: var(--e-4); bottom: -2.6rem; width: 5.5rem; height: 5.5rem;
  border-radius: 50%; background: var(--blanco); padding: 3px; box-shadow: 0 4px 12px rgb(0 0 0 / .12); display: block;
  transition: transform .2s;
}
.tarjeta-articulo__emoji img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.tarjeta-articulo__emoji--icono { display: grid; place-items: center; color: var(--c); }
.tarjeta-articulo__emoji--icono svg { width: 2.2rem; height: 2.2rem; }
.tarjeta--clicable:hover .tarjeta-articulo__emoji { transform: rotate(-6deg) scale(1.05); }
.tarjeta-articulo__cuerpo { display: flex; flex-direction: column; gap: var(--e-2); padding: 3.25rem var(--e-5) var(--e-4); flex: 1; }
.tarjeta-articulo__categoria { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.tarjeta-articulo__titulo { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.tarjeta--clicable:hover .tarjeta-articulo__titulo { color: var(--c); }
.tarjeta .tarjeta-articulo__resumen { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
.tarjeta-articulo__pie {
  margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--borde);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); font-size: var(--t-xs);
}
.tarjeta-articulo__tiempo { display: inline-flex; align-items: center; gap: .3rem; color: var(--texto-suave); }
.tarjeta-articulo__tiempo svg { width: .95rem; height: .95rem; }
.tarjeta-articulo__leer { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--c); }
.tarjeta-articulo__leer svg { width: 1rem; height: 1rem; transition: transform .15s; }
.tarjeta--clicable:hover .tarjeta-articulo__leer svg { transform: translateX(3px); }

/* Ruta para principiantes: tonos claros de la web (verde claro → crema), ilustración de huerto
   y pasos como tarjetas blancas unidas por una línea de puntos. */
.ruta {
  position: relative; overflow: hidden; display: grid; gap: var(--e-6);
  background: linear-gradient(135deg, #EAF5EB 0%, #F4F9EE 45%, var(--crema) 100%);
  border: 1px solid var(--borde); border-radius: 1.5rem; padding: var(--e-6) var(--e-5);
}
.ruta::after {
  content: ""; position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem; border-radius: 50%;
  background: radial-gradient(circle, rgb(91 168 214 / .14), transparent 70%); pointer-events: none;
}
.ruta__intro { position: relative; z-index: 1; }
.ruta__sello {
  display: inline-flex; align-items: center; gap: .35rem; background: var(--blanco); color: var(--verde);
  font-size: var(--t-xs); font-weight: 700; padding: .25rem .75rem; border-radius: 99px; border: 1px solid var(--borde); margin-bottom: var(--e-3);
}
.ruta__sello svg { width: 1rem; height: 1rem; }
.ruta h2 { color: var(--verde-oscuro); margin: 0 0 var(--e-2); }
.ruta__intro p { margin: 0 0 var(--e-5); color: var(--texto-suave); max-width: 26rem; }
.ruta__boton { display: inline-flex; align-items: center; gap: .4rem; }
.ruta__boton svg { width: 1.1rem; height: 1.1rem; }
.ruta__pasos { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.ruta__pasos::before { content: ""; position: absolute; left: 2.6rem; top: 1.5rem; bottom: 1.5rem; border-left: 2px dashed var(--borde-fuerte); }
.ruta__pasos a {
  position: relative; display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-l); text-decoration: none; color: var(--texto);
  box-shadow: 0 2px 8px rgb(23 76 48 / .06); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ruta__pasos a:hover { transform: translateX(4px); border-color: var(--verde); box-shadow: 0 8px 20px rgb(23 76 48 / .12); color: var(--texto); }
.ruta__num { flex: none; width: 3.25rem; height: 3.25rem; display: block; }
.ruta__num img { display: block; width: 100%; height: 100%; }
.ruta__texto { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.ruta__paso { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--verde); }
.ruta__titulo { font-weight: 650; color: var(--verde-oscuro); line-height: 1.35; }
.ruta__pasos a > svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--verde); transition: transform .15s; }
.ruta__pasos a:hover > svg { transform: translateX(3px); }
@media (min-width: 56rem) { .ruta { grid-template-columns: 1fr 1.5fr; align-items: center; padding: var(--e-7); } }

/* ---------- Páginas interiores ---------- */
.migas { font-size: var(--t-xs); padding-top: var(--e-4); }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--e-1); list-style: none; margin: 0; padding: 0; color: var(--texto-suave); }
.migas li + li::before { content: "›"; margin-right: var(--e-1); color: var(--borde-fuerte); }
.migas a { color: var(--texto-suave); }

.cabecera-pagina { display: flex; gap: var(--e-4); align-items: flex-start; padding-block: var(--e-5) var(--e-5); }
.cabecera-pagina h1 { margin-bottom: var(--e-2); }
.icono-categoria--grande { width: 3.5rem; height: 3.5rem; flex: none; }
.pagina-n { color: var(--texto-suave); font-weight: 500; font-size: .6em; }
.entrada { font-size: var(--t-l); color: var(--texto-suave); max-width: 44rem; }
.bloque-lista { padding-bottom: var(--e-6); }

.paginacion { display: flex; justify-content: center; align-items: center; gap: var(--e-4); padding-bottom: var(--e-6); font-size: var(--t-s); }

.lectura { max-width: var(--ancho-lectura); margin-inline: auto; }
.articulo { padding-bottom: var(--e-6); }
.articulo__cabecera { padding-block: var(--e-5) var(--e-4); }
.articulo__cabecera .etiqueta { margin-bottom: var(--e-3); }
.articulo__meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-xs); color: var(--texto-suave); }
.articulo__imagen { margin: 0 auto var(--e-5); max-width: 60rem; }
.articulo__imagen img { width: 100%; border-radius: var(--radio-l); }

.indice { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-5); font-size: var(--t-s); }
.indice summary { font-weight: 700; color: var(--verde-oscuro); cursor: pointer; }
.indice ol { margin: var(--e-3) 0 0; padding-left: var(--e-5); }
.indice li { margin-bottom: var(--e-1); }

.prosa > :first-child { margin-top: 0; }
.prosa h2 { scroll-margin-top: var(--e-4); }
.prosa li { margin-bottom: var(--e-2); }
.prosa ol > li::marker { color: var(--verde); font-weight: 700; }
.prosa .aviso { margin: var(--e-5) 0; }
.aviso--importante { border-left-color: var(--terracota); background: var(--terracota-claro); }
.figura { margin: var(--e-5) 0; }
.figura img { border-radius: var(--radio); width: 100%; }
.figura figcaption { font-size: var(--t-xs); color: var(--texto-suave); margin-top: var(--e-2); }
.tabla-envoltorio { margin: var(--e-5) 0; }
@media (min-width: 40.01rem) { .tabla-envoltorio { overflow-x: auto; } }
.nota-metodo { font-size: var(--t-xs); color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: var(--e-3); margin-top: var(--e-6); }

.relacionados { padding-block: var(--e-5) var(--e-7); border-top: 1px solid var(--borde); }
.relacionados h2 { margin-top: var(--e-4); }

/* ---------- Secciones del artículo ----------
   Cada H2 es una sección con su fondo: blanco, verde claro alternando, y crema para las que
   tienen productos. Así el lector ve dónde empieza y acaba cada parte. */
.prosa .bloque { margin: var(--e-5) 0; padding: var(--e-5) var(--e-4); border-radius: var(--radio-l); background: var(--blanco); border: 1px solid var(--linea-fina); box-shadow: var(--sombra); }
.prosa .bloque > h2:first-child { margin-top: 0; display: flex; gap: var(--e-3); align-items: center; }
.prosa .bloque > h2:first-child::before { content: ""; flex: none; width: .45rem; height: 1.6rem; border-radius: 99px; background: var(--verde); }
.prosa .bloque > :last-child { margin-bottom: 0; }
.prosa .bloque--claro { background: linear-gradient(180deg, #F2F8EE, var(--blanco) 14rem); }
.prosa .bloque--claro .aviso { background: var(--blanco); }
.prosa .bloque--productos { background: linear-gradient(180deg, var(--crema), var(--blanco) 22rem); border-color: #EFE4D5; }
.prosa .bloque--productos > h2:first-child::before { background: var(--terracota); }
@media (min-width: 48rem) { .prosa .bloque { padding: var(--e-6); } }
@media (min-width: 72rem) { .prosa .bloque--productos { margin-inline: -8rem; } }

/* ---------- Desplegables (## + Título) ---------- */
.desplegable { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-l); margin: var(--e-4) 0; box-shadow: var(--sombra); }
.desplegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4); }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary h2, .desplegable > summary h3 { margin: 0; font-size: var(--t-l); }
.desplegable > summary h2::before { content: ""; display: inline-block; vertical-align: middle; width: .45rem; height: 1.3rem; margin-right: var(--e-3); border-radius: 99px; background: var(--gota); }
.desplegable > summary span { font-weight: 650; color: var(--verde-oscuro); }
.desplegable > summary svg, .tarjeta-producto__mas > summary svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--verde); transition: transform .2s; }
.desplegable[open] > summary svg, .tarjeta-producto__mas[open] > summary svg { transform: rotate(180deg); }
.desplegable > summary:hover h2, .desplegable > summary:hover h3, .desplegable > summary:hover span { color: var(--verde); }
.desplegable[open] > summary { border-bottom: 1px solid var(--borde); }
.desplegable__cuerpo { padding: var(--e-4); }
.desplegable__cuerpo > :first-child { margin-top: 0; }
.desplegable__cuerpo > :last-child { margin-bottom: 0; }
.desplegable--peque { box-shadow: none; }
.desplegable--peque > summary { padding: var(--e-3) var(--e-4); }
.desplegable--peque > summary h3 { font-size: var(--t-m); }
.bloque--claro .desplegable { border-color: transparent; }
@media (min-width: 48rem) { .desplegable > summary, .desplegable__cuerpo { padding-inline: var(--e-5); } }

/* ---------- Listas visuales ---------- */
.prosa .lista-tarjetas { list-style: none; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: var(--e-4) 0; }
.prosa .lista-tarjetas li { margin: 0; background: var(--blanco); border: 1px solid var(--linea-fina); border-radius: var(--radio-l); padding: var(--e-4); font-size: var(--t-s); box-shadow: var(--sombra); }
.prosa .lista-tarjetas li > strong:first-child { display: block; color: var(--verde-oscuro); font-size: var(--t-m); margin-bottom: var(--e-1); }
.prosa ol.pasos { list-style: none; padding: 0; counter-reset: paso; margin: var(--e-4) 0; }
.prosa ol.pasos > li { counter-increment: paso; position: relative; padding-left: 2.9rem; min-height: 2rem; margin-bottom: var(--e-3); }
.prosa ol.pasos > li::before { content: counter(paso); position: absolute; left: 0; top: -.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--verde); color: var(--blanco); font-weight: 700; font-size: var(--t-s); display: grid; place-items: center; }
.prosa .aviso { display: flex; gap: var(--e-3); align-items: flex-start; }
.prosa .aviso { background: var(--blanco); border: 1px solid var(--linea-fina); border-radius: var(--radio-l); padding: var(--e-4); box-shadow: var(--sombra); }
.prosa .aviso > svg { flex: none; width: 2.2rem; height: 2.2rem; padding: .4rem; border-radius: 50%; background: var(--verde-claro); color: var(--verde); }
.prosa .aviso--importante > svg { background: var(--terracota-claro); color: var(--terracota); }

/* ---------- Tarjetas de producto (horizontales y breves) ---------- */
.productos { margin: var(--e-5) 0; }
.productos__titulo { display: flex; align-items: center; gap: var(--e-2); font-weight: 700; color: var(--verde-oscuro); font-size: var(--t-l); margin-bottom: var(--e-3); }
.productos__titulo svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--terracota); }
.productos__nota { font-size: var(--t-xs); color: var(--texto-suave); margin: var(--e-3) 0 0; }
/* Botón con los colores de Amazon: amarillo, texto casi negro (contraste 13:1) */
.boton-amazon { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .45rem 1.1rem; border-radius: 99px; background: #FFD814; border: 1px solid #FCD200; color: #0F1111; font-weight: 650; font-size: var(--t-s); text-decoration: none; box-shadow: 0 2px 5px rgb(213 217 217 / .5); }
.boton-amazon:hover { background: #F7CA00; border-color: #F2C200; color: #0F1111; }
.boton-amazon:focus-visible { outline: 3px solid #FF9900; outline-offset: 2px; }
.boton-amazon svg { width: 1.1rem; height: 1.1rem; }
.ficha--borrador { border-style: dashed; border-color: var(--terracota); }
.ficha__datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--e-2); margin: var(--e-4) 0; }
.ficha__datos div { background: var(--fondo); border-radius: var(--radio); padding: var(--e-2) var(--e-3); }
.ficha__datos dt { font-size: var(--t-xs); color: var(--texto-suave); }
.ficha__datos dd { margin: 0; font-weight: 600; font-size: var(--t-s); }
.ficha__pros svg { color: var(--verde); }
.ficha__contras svg { color: var(--terracota); }
.ficha__pc-titulo { font-weight: 700; color: var(--verde-oscuro); margin: 0 0 var(--e-2); font-size: var(--t-s); }
.ficha__fuente { font-size: var(--t-xs); color: var(--texto-suave); margin: 0; }
.boton svg { width: 1.05rem; height: 1.05rem; }
.boton--peque { min-height: 2.25rem; padding: var(--e-1) var(--e-3); font-size: var(--t-xs); }

/* ---------- Productos destacados (portada) ---------- */
.seccion--productos { background: var(--crema); }

/* ---------- Contacto ---------- */
.nota-formulario { font-size: var(--t-xs); color: var(--texto-suave); }
.pagina-fija { padding-bottom: var(--e-7); }
.pagina-fija h1 { margin-top: var(--e-5); }

/* ---------- Pie ---------- */
.pie__rejilla { display: grid; gap: var(--e-6); }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.pie__marca p { margin-top: var(--e-3); max-width: 24rem; }
.pie__titulo { color: var(--blanco); font-size: var(--t-s); margin: 0 0 var(--e-3); letter-spacing: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--e-2); }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie :focus-visible { outline-color: #9CCBF0; }
.pie__legal p { margin-bottom: var(--e-2); font-size: var(--t-xs); }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--blanco); font: inherit; cursor: pointer; text-align: left; }
.enlace-boton:hover { text-decoration: underline; }

/* ---------- Aviso de cookies ---------- */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--blanco); border-top: 3px solid var(--verde); box-shadow: 0 -6px 24px rgba(23, 76, 48, .15); padding-block: var(--e-4); }
.cookies[hidden] { display: none; }
.cookies__caja { display: grid; gap: var(--e-3); }
.cookies__titulo { font-weight: 700; color: var(--verde-oscuro); margin: 0; }
.cookies p { margin: 0; font-size: var(--t-s); }
.cookies__botones { display: flex; gap: var(--e-3); flex-wrap: wrap; }
@media (min-width: 56rem) { .cookies__caja { grid-template-columns: 1fr auto; align-items: center; } .cookies__titulo { grid-column: 1 / -1; } }

.lista-temas--izq { justify-content: flex-start; }
.lista-temas a.etiqueta { text-decoration: none; }
.seccion--productos .productos { margin: 0; }

/* ---------- Portada: accesos con ilustración y fondo de «Guías destacadas» ---------- */
.acceso__emoji { grid-row: span 2; width: 4.5rem; height: 4.5rem; display: block; }
.acceso__emoji img { width: 100%; height: 100%; display: block; }
.seccion--fondo1 {
  background-color: #FDF5EC; background-repeat: no-repeat; background-position: center bottom; background-size: cover;
  background-image: url("../img/marca/fondo1-1200.jpg");
  background-image: image-set(url("../img/marca/fondo1-1200.webp") type("image/webp"), url("../img/marca/fondo1-1200.jpg") type("image/jpeg"));
  padding-bottom: var(--e-8);
}
@media (min-width: 56rem) {
  .seccion--fondo1 {
    background-image: url("../img/marca/fondo1-2000.jpg");
    background-image: image-set(url("../img/marca/fondo1-2000.webp") type("image/webp"), url("../img/marca/fondo1-2000.jpg") type("image/jpeg"));
    padding-bottom: 9rem;
  }
}
/* «Comparativas para elegir bien»: fondo3 (verde menta con textura de papel), oscurecido un punto
   para que coincida con el verde inferior de fondo1 y las dos secciones se vean como una sola. */
.seccion--fondo3 {
  background-color: #D8EDD3; background-size: cover; background-position: center;
  background-image: url("../img/marca/fondo3-1200.jpg");
  background-image: image-set(url("../img/marca/fondo3-1200.webp") type("image/webp"), url("../img/marca/fondo3-1200.jpg") type("image/jpeg"));
}
@media (min-width: 56rem) {
  .seccion--fondo3 {
    background-image: url("../img/marca/fondo3-2000.jpg");
    background-image: image-set(url("../img/marca/fondo3-2000.webp") type("image/webp"), url("../img/marca/fondo3-2000.jpg") type("image/jpeg"));
  }
}

/* ---------- Vídeo de YouTube (miniatura; el reproductor carga al pulsar) ---------- */
.video { margin: var(--e-5) 0; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-l); overflow: hidden; box-shadow: var(--sombra); }
.video__marco, .video__iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--verde-oscuro); }
.video__marco img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, filter .3s; }
.video__marco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(23 76 48 / .45)); }
.video__marco:hover img { transform: scale(1.03); filter: saturate(1.1); }
.video__play {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem;
  border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: var(--blanco);
  box-shadow: 0 0 0 8px rgb(255 255 255 / .35), 0 8px 24px rgb(0 0 0 / .3); transition: transform .2s, background .2s;
}
.video__play svg { width: 1.9rem; height: 1.9rem; margin-left: .2rem; }
.video__marco:hover .video__play, .video__marco:focus-visible .video__play { transform: scale(1.08); background: var(--verde-oscuro); }
.video__duracion { position: absolute; z-index: 1; right: var(--e-3); bottom: var(--e-3); background: rgb(0 0 0 / .72); color: var(--blanco); font-size: var(--t-xs); font-weight: 650; padding: .1rem .5rem; border-radius: 6px; }
.video__pie { padding: var(--e-3) var(--e-4); display: grid; gap: var(--e-1); }
.video__titulo { display: flex; gap: var(--e-2); align-items: flex-start; font-weight: 700; color: var(--verde-oscuro); }
.video__titulo svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--terracota); margin-top: .1rem; }
.video__fuente { font-size: var(--t-xs); color: var(--texto-suave); }

/* Fotos: siempre dentro de su caja, recortadas sin deformar (nunca desbordan). */
.tarjeta-articulo__cabecera--foto { overflow: hidden; border-bottom-width: 3px; }
.tarjeta-articulo__cabecera--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tarjeta--clicable:hover .tarjeta-articulo__cabecera--foto img { transform: scale(1.04); }
.tarjeta-articulo--foto .tarjeta-articulo__cuerpo { padding-top: var(--e-4); }
.articulo__imagen { max-width: var(--ancho-lectura); overflow: hidden; border-radius: var(--radio-l); aspect-ratio: 3 / 2; }
.articulo__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.tarjeta-articulo__tipo { z-index: 1; }

/* ---------- Móvil y tablet: cabecera con el menú a la izquierda y el logo centrado ---------- */
@media (max-width: 63.99rem) {
  .cabecera__fila { display: grid; grid-template-columns: 1fr auto 1fr; }
  .cabecera__fila > .logo { grid-column: 2; grid-row: 1; }
  .menu-movil { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
  .menu-movil summary { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
  .menu-movil summary svg { width: 1.5rem; height: 1.5rem; }
  .menu-movil summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Último bloque verde de la portada: el mismo verde que «Guías» y «Comparativas». */
.seccion--verde { background: #D8EDD3; }

/* ---------- Móvil: fondos de color liso en lugar de las imágenes ----------
   En pantallas estrechas las ilustraciones de sección quedaban muy claras y las tarjetas blancas no se
   distinguían del fondo. Aquí las secciones verdes comparten un mismo verde y las tarjetas resaltan. */
@media (max-width: 55.99rem) {
  .seccion--productos { background: #F3E3CB; }
  .seccion--fondo1, .seccion--fondo3, .seccion--verde { background-image: none; background-color: #CDE5C6; }
  .seccion--fondo1 { padding-bottom: var(--e-7); }
  .seccion--productos .tarjeta, .seccion--fondo1 .tarjeta, .seccion--fondo3 .tarjeta { box-shadow: 0 4px 16px rgb(23 76 48 / .14); }
}

/* ---------- Banner de móvil: imagen con el texto y botones pulsables encima ----------
   El H1 sigue en el HTML (solo se oculta a la vista) para no perder SEO. Las zonas pulsables van en %
   sobre los botones dibujados en banner-movil-828; si cambia la imagen hay que ajustarlas. */
.hero__movil { display: none; }
@media (max-width: 39.99rem) {
  .hero { padding: 0; background: var(--verde-oscuro); }
  .hero__movil { display: block; position: relative; }
  .hero__movil img { display: block; width: 100%; height: auto; }
  .hero__rejilla { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero__antetitulo, .hero__entrada, .hero__botones { display: none; }
  .hero__zona { position: absolute; left: 4.5%; width: 90.8%; height: 8.9%; border-radius: 999px; }
  .hero__zona--huerto { top: 78.5%; }
  .hero__zona--riego { top: 88.4%; }
  .hero__zona:active { background: rgb(255 255 255 / .18); }
  .hero__zona:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }
}

/* ---------- Foto de cabecera, su texto y huecos de foto: solo se ven en móvil ---------- */
.cabecera-pagina__foto, .cabecera-pagina__hueco, .cabecera-pagina__intro, .tabla__foto, .tarjeta-articulo__hueco { display: none; }

/* Letra manuscrita de la carta: solo se descarga en las páginas que la usan */
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Móvil: página de categoría ---------- */
@media (max-width: 47.99rem) {
  /* Tarjetas sin emoji: la foto ocupa la cabecera */
  .tarjeta-articulo__emoji { display: none; }
  .tarjeta-articulo__cuerpo { padding-top: var(--e-4); }
  .tarjeta-articulo__hueco {
    display: grid; place-items: center; position: absolute; inset: var(--e-3); border: 2px dashed var(--c);
    border-radius: var(--radio); color: var(--c); font-size: var(--t-xs); font-weight: 700;
  }

  /* Cabecera: la foto lleva el título dibujado; el H1 sigue en el HTML, oculto solo a la vista */
  .cabecera-pagina--foto, .cabecera-pagina--intro { display: block; padding: 0; margin: var(--e-2) calc(var(--e-4) * -1) var(--e-5); position: relative; }
  .cabecera-pagina--foto .icono-categoria, .cabecera-pagina--foto .entrada, .cabecera-pagina--intro .icono-categoria, .cabecera-pagina--intro .entrada { display: none; }
  .cabecera-pagina--foto .cabecera-pagina__texto, .cabecera-pagina--intro .cabecera-pagina__texto { display: contents; }
  .cabecera-pagina__hueco { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #F1F3F0; border-bottom: 2px dashed #BFC7BC; color: var(--texto-suave); font-size: var(--t-xs); font-weight: 700; }
  .cabecera-pagina--intro h1, .cabecera-pagina--foto:not(.cabecera-pagina--rotulada) h1 { margin: 0; padding: var(--e-4) var(--e-4) 0; text-align: center; background: var(--crema); }
  .cabecera-pagina__foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
  .cabecera-pagina__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cabecera-pagina--rotulada h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cabecera-pagina--foto .cabecera-pagina__intro, .cabecera-pagina--intro .cabecera-pagina__intro {
    display: block; padding: var(--e-4) var(--e-4) var(--e-5); text-align: center; background: var(--crema); border-bottom: 3px solid var(--verde);
  }
  .cabecera-pagina__ante { margin: 0 0 var(--e-2); font-family: "Caveat", "Bradley Hand", cursive; font-size: 2.1rem; line-height: 1.15; color: var(--verde-oscuro); }
  .cabecera-pagina__entradilla { margin: 0 auto; max-width: 30rem; font-size: var(--t-m); line-height: 1.6; color: var(--texto); }

  /* «Qué es»: carta manuscrita en un folio pautado y perforado */
  .prosa .bloque--carta {
    --linea: 2rem; position: relative; margin: var(--e-5) calc(var(--e-2) * -1) var(--e-6); padding: var(--linea) var(--e-4) var(--linea) 3rem;
    border: 0; border-radius: .25rem; transform: rotate(-.7deg); box-shadow: 0 10px 24px rgb(23 76 48 / .18);
    font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive; color: #26384F;
    background-color: #FFFDF6;
    background-image:
      radial-gradient(circle at .95rem 18%, #DDE9DA .42rem, transparent .46rem),
      radial-gradient(circle at .95rem 50%, #DDE9DA .42rem, transparent .46rem),
      radial-gradient(circle at .95rem 82%, #DDE9DA .42rem, transparent .46rem),
      linear-gradient(90deg, transparent 2.15rem, #E9A7A0 2.15rem, #E9A7A0 2.25rem, transparent 2.25rem),
      repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--linea) - 1px), #CBDDEB calc(var(--linea) - 1px), #CBDDEB var(--linea));
    background-position: 0 0, 0 0, 0 0, 0 0, 0 .3rem;
  }
  /* Celo que sujeta el folio */
  .prosa .bloque--carta::before {
    content: ""; position: absolute; top: -.7rem; left: 50%; width: 6.5rem; height: 1.5rem; margin-left: -3.25rem;
    background: rgb(229 214 170 / .75); box-shadow: 0 1px 3px rgb(0 0 0 / .12); transform: rotate(2deg);
  }
  .prosa .bloque--carta > h2:first-child { display: block; margin: 0 0 var(--linea); font: inherit; font-size: 1.95rem; font-weight: 400; line-height: var(--linea); color: #1E4A33; }
  .prosa .bloque--carta > h2:first-child::before { display: none; }
  .prosa .bloque--carta p, .prosa .bloque--carta li { margin: 0 0 var(--linea); font-size: 1.45rem; line-height: var(--linea); }
  .prosa .bloque--carta ul { margin: 0; padding-left: 1.2rem; }
  .prosa .bloque--carta .lista-tarjetas { display: block; margin: 0; padding-left: 1.2rem; list-style: disc; }
  .prosa .bloque--carta .lista-tarjetas li { padding: 0; margin: 0 0 var(--linea); background: none; border: 0; border-radius: 0; font-size: 1.45rem; }
  .prosa .bloque--carta .lista-tarjetas li > strong:first-child { display: inline; margin: 0; font-size: inherit; color: #1E4A33; }
  .prosa .bloque--carta strong { color: #1E4A33; font-weight: 400; text-decoration: underline; text-decoration-color: #E9A7A0; text-underline-offset: 3px; }
  .prosa .bloque--carta::after { content: "Huerto Fácil en Casa"; display: block; text-align: right; line-height: var(--linea); font-size: 1.45rem; color: #1E4A33; }

  /* Números con las imágenes 1-4 (solo en listas de hasta 4 pasos) */
  .seccion--pilar ol.pasos:not(:has(> li:nth-child(5))) > li {
    padding: .9rem var(--e-3) .9rem 4.6rem; min-height: 4.5rem;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: 0 2px 8px rgb(23 76 48 / .07);
  }
  .seccion--pilar ol.pasos:not(:has(> li:nth-child(5))) > li::before {
    content: ""; left: .75rem; top: .75rem; width: 3rem; height: 3rem; background: center / contain no-repeat;
  }
  .seccion--pilar ol.pasos:not(:has(> li:nth-child(5))) > li:nth-child(1)::before { background-image: url("../img/numeros/1.webp"); }
  .seccion--pilar ol.pasos:not(:has(> li:nth-child(5))) > li:nth-child(2)::before { background-image: url("../img/numeros/2.webp"); }
  .seccion--pilar ol.pasos:not(:has(> li:nth-child(5))) > li:nth-child(3)::before { background-image: url("../img/numeros/3.webp"); }
  .seccion--pilar ol.pasos:not(:has(> li:nth-child(5))) > li:nth-child(4)::before { background-image: url("../img/numeros/4.webp"); }
}

/* ---------- Móvil: «Tipos»: fichas blancas y grises sobre el fondo verde ---------- */
@media (max-width: 40rem) {
  .tabla--fichas tr { background: var(--blanco); border: 0; border-radius: var(--radio-l); margin-bottom: var(--e-4); box-shadow: 0 6px 18px rgb(23 76 48 / .14); }
  .tabla--fichas tr:last-child { margin-bottom: 0; }
  .tabla--fichas tbody th { background: var(--blanco); padding: var(--e-4); border-bottom: 0; font-size: var(--t-l); font-weight: 750; }
  .tabla--fichas td { display: block; background: var(--blanco); padding: var(--e-3) var(--e-4); border-bottom: 0; border-top: 1px solid var(--linea-fina); }
  .tabla--fichas td::before { display: block; margin-bottom: .1rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .tabla--fichas td[data-col="Lo bueno"]::before { content: "✓ " attr(data-col); color: var(--verde); }
  .tabla--fichas td[data-col="A tener en cuenta"]::before { content: "! " attr(data-col); color: #8E4325; }
  .tabla__foto { display: block; aspect-ratio: 16 / 9; margin: calc(var(--e-4) * -1) calc(var(--e-4) * -1) var(--e-3); overflow: hidden; }
  .tabla__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .tabla__foto--hueco { display: grid; place-items: center; background: #F1F3F0; border-bottom: 2px dashed #BFC7BC; color: var(--texto-suave); font-size: var(--t-xs); font-weight: 700; }
}

/* ---------- Guías que se pasan con flechas ---------- */
.carrusel__libro { position: relative; }
/* Alambre de cuaderno a la izquierda: solo cuando hay hojas que pasar. Va por encima de la hoja que se dobla. */
.carrusel--activo .carrusel__libro { padding-left: .8rem; }
.carrusel__espiral { display: none; }
.carrusel--activo .carrusel__espiral {
  display: block; position: absolute; z-index: 3; left: 0; top: .8rem; bottom: 1.3rem; width: 1.625rem; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4F7F8'/%3E%3Cstop offset='.5' stop-color='%23A9B3B8'/%3E%3Cstop offset='1' stop-color='%236E787D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='15' r='3.2' fill='%231F2A24' opacity='.8'/%3E%3Ccircle cx='20' cy='15.8' r='3.2' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='.8'/%3E%3Cpath d='M20 15C14 5 4 4 2.6 9.5 1.6 14 6 17.5 12 17' fill='none' stroke='%233F484C' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M20 15C14 5 4 4 2.6 9.5 1.6 14 6 17.5 12 17' fill='none' stroke='url(%23m)' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 1.75rem no-repeat round;
}
.carrusel--pasando { overflow-x: clip; }
.carrusel + .carrusel { margin-top: var(--e-6); }
.carrusel__titulo { margin: 0 0 var(--e-3); font-size: var(--t-l); }
.carrusel__pista {
  --huecos: 0; --por-vista: 1;
  display: grid; grid-auto-flow: column; gap: var(--e-4);
  grid-auto-columns: calc((100% - var(--e-4) * var(--huecos)) / var(--por-vista));
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-block: .25rem .75rem;
}
.carrusel__pista > * { scroll-snap-align: start; min-width: 0; }
/* Con JavaScript la fila no se arrastra: se pasa hoja a hoja; en vertical la página baja normal */
.carrusel--activo .carrusel__pista { overflow-x: hidden; touch-action: pan-y; scrollbar-width: none; }
.carrusel--activo .carrusel__pista::-webkit-scrollbar { display: none; }
@media (min-width: 40rem) { .carrusel__pista { --huecos: 1; --por-vista: 2; } }
@media (min-width: 64rem) { .carrusel__pista { --huecos: 2; --por-vista: 3; } }

/* Hoja que se dobla como papel: web.js calcula el pliegue en cada fotograma */
.carrusel__hoja { position: absolute; z-index: 2; visibility: hidden; pointer-events: none; }
.carrusel__hoja > .carrusel__pista { height: 100%; overflow: hidden; scroll-snap-type: none; background: #fff; border-radius: 1rem; }
.carrusel__sombra, .carrusel__penumbra, .carrusel__solapa { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.carrusel__penumbra { background: rgb(23 40 30 / .2); }

.carrusel__nav {
  display: flex; align-items: center; gap: var(--e-3); width: fit-content; margin: var(--e-2) auto 0; padding: .25rem;
  background: #fff; border-radius: 999px; box-shadow: 0 2px 10px rgb(23 76 48 / .12);
}
.carrusel__nav[hidden] { display: none; }
.carrusel__contador { min-width: 3.5rem; text-align: center; font-size: var(--t-s); font-weight: 700; color: var(--verde-oscuro); font-variant-numeric: tabular-nums; }
.carrusel__flecha {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--verde); color: #fff; cursor: pointer; transition: background .15s;
}
.carrusel__flecha:hover:not(:disabled) { background: var(--verde-oscuro); }
.carrusel__flecha:disabled { background: #E4EAE5; color: #7C8A80; cursor: default; }
.carrusel__flecha svg { width: 1.25rem; height: 1.25rem; }
.carrusel__flecha--atras svg { transform: scaleX(-1); }

/* ---------- Fichas con icono («Qué mirar antes de comprar») ---------- */
.prosa .lista-fichas { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.prosa .lista-fichas li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); align-content: start; margin: 0; padding: var(--e-4);
  background: var(--blanco); border-radius: var(--radio-l); box-shadow: 0 4px 14px rgb(23 76 48 / .1);
}
.lista-fichas__icono {
  grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, #3C9A5C, var(--verde-oscuro)); box-shadow: 0 3px 8px rgb(23 76 48 / .25);
}
.lista-fichas__icono svg { width: 1.6rem; height: 1.6rem; }
.lista-fichas__titulo { color: var(--verde-oscuro); font-size: var(--t-m); font-weight: 700; line-height: 1.3; }
.lista-fichas__texto { margin-top: var(--e-1); font-size: var(--t-s); line-height: 1.5; color: var(--texto); }

/* ---------- Móvil: fichas en un mazo de cartas. La de arriba sale volando y debajo está la siguiente.
   Las clases las pone web.js: sin JavaScript se ven todas en lista. ---------- */
.mazo__nav { display: none; }
@media (max-width: 47.99rem) {
  .cabecera-pagina--rotulada .cabecera-pagina__foto { aspect-ratio: auto; }
  .cabecera-pagina--rotulada .cabecera-pagina__foto img { height: auto; }
}
@media (max-width: 40rem) {
  .seccion--pilar { overflow-x: clip; }
  .tabla__foto { aspect-ratio: 3 / 2; }
  .tabla--mazo { overflow: visible; }
  .mazo, .tabla--mazo tbody { display: grid; padding-bottom: 1.6rem; touch-action: pan-y; }
  .mazo > [data-pos] { grid-area: 1 / 1; transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.22, .8, .3, 1), opacity .35s; }
  .prosa .tabla.tabla--mazo tbody tr { display: flex; flex-direction: column; margin: 0; background: var(--blanco); }
  .tabla--mazo td:last-child { flex: 1; }
  .mazo > [data-pos="0"] { z-index: 3; }
  .mazo > [data-pos="1"] { z-index: 2; transform: translateY(.8rem) scale(.95) rotate(1.4deg); }
  .mazo > [data-pos="2"] { z-index: 1; transform: translateY(1.6rem) scale(.9) rotate(-1.4deg); }
  .mazo > [data-pos="fondo"] { z-index: 0; opacity: 0; transform: translateY(1.6rem) scale(.9); }
  .mazo > [data-pos="fuera"] { z-index: 4; opacity: 0; pointer-events: none; transform: translateX(-125%) rotate(-14deg); }
  .mazo > .mazo__arrastre { transition: none; }
  .mazo__nav { display: flex; margin-top: var(--e-3); }

  /* Ficha con icono en grande, centrada */
  .prosa .lista-fichas.mazo { margin-bottom: 0; padding-bottom: 1.6rem; }
  .prosa .lista-fichas.mazo li { grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; min-height: 13rem; padding: var(--e-5) var(--e-4); box-shadow: 0 6px 18px rgb(23 76 48 / .14); }
  .lista-fichas.mazo .lista-fichas__icono { grid-row: auto; width: 4rem; height: 4rem; margin-bottom: var(--e-3); }
  .lista-fichas.mazo .lista-fichas__icono svg { width: 2.1rem; height: 2.1rem; }
  .lista-fichas.mazo .lista-fichas__titulo { font-size: var(--t-l); }
}
@media (max-width: 40rem) and (prefers-reduced-motion: reduce) {
  .mazo > [data-pos] { transition: none; }
}

/* ---------- Tarjetas enlazadas («Por dónde empezar») ---------- */
.rutas { margin: var(--e-4) 0; }
.prosa .rutas__intro { margin: 0 0 var(--e-3); font-weight: 650; color: var(--verde-oscuro); }
.prosa .rutas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.prosa .rutas__lista li { margin: 0; }
.prosa .ruta-tarjeta {
  display: flex; align-items: stretch; height: 100%; overflow: hidden; background: var(--blanco); color: var(--texto); text-decoration: none;
  border-radius: var(--radio-l); box-shadow: 0 4px 14px rgb(23 76 48 / .12); transition: transform .15s, box-shadow .15s;
}
.prosa .ruta-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(23 76 48 / .18); color: var(--texto); }
.ruta-tarjeta__foto { flex: 0 0 6.5rem; position: relative; background: var(--verde-claro); }
.ruta-tarjeta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ruta-tarjeta__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; padding: var(--e-3); }
.ruta-tarjeta__busca { font-weight: 700; font-size: var(--t-m); line-height: 1.25; color: var(--verde-oscuro); }
.ruta-tarjeta__guia { font-size: var(--t-xs); line-height: 1.35; color: var(--verde); font-weight: 600; }
.ruta-tarjeta__flecha { align-self: center; flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; margin-right: var(--e-3); border-radius: 50%; background: var(--verde); color: #fff; }
.ruta-tarjeta__flecha svg { width: 1.1rem; height: 1.1rem; }



/* ---------- Hueco elegante para productos sin foto ---------- */
.foto-vacia { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--verde-claro); }
.foto-vacia svg { width: 1.8rem; height: 1.8rem; color: var(--verde); }

/* ---------- Comparador: modelos en columnas con los datos a la misma altura ---------- */
.comparador__pista--datos-3 { --filas: 8; }
.comparador__pista--datos-4 { --filas: 9; }
.comparador__pista--datos-5 { --filas: 10; }

.comparador { margin: var(--e-5) 0 0; }
.comparador__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.prosa .comparador__titulo { margin: 0; font-size: var(--t-l); font-weight: 700; line-height: 1.25; color: var(--verde-oscuro); }
.comparador__total { flex: none; font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave); }
.comparador__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 1fr); grid-template-rows: repeat(var(--filas), auto);
  gap: 0 var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--e-4) * -1); padding: var(--e-1) var(--e-4) var(--e-4); scroll-padding-inline: var(--e-4);
}
.comparador__pista::-webkit-scrollbar { display: none; }
.comparador__pista:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.modelo {
  position: relative; display: grid; grid-row: span var(--filas); grid-template-rows: subgrid; scroll-snap-align: start; min-width: 0; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--linea-fina); border-radius: var(--radio-l); box-shadow: 0 2px 4px rgb(23 76 48 / .05), 0 10px 26px rgb(23 76 48 / .09);
}
.modelo:target { outline: 3px solid var(--gota); outline-offset: 2px; }
.prosa .modelo__para { margin: 0; padding: var(--e-3) var(--e-4); background: var(--verde-oscuro); color: var(--blanco); font-size: var(--t-xs); font-weight: 650; line-height: 1.3; }
.modelo__img { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--blanco); border-bottom: 1px solid var(--linea-fina); }
.modelo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--blanco); padding: var(--e-2); }
.prosa .modelo__nombre { margin: 0; padding: var(--e-4) var(--e-4) var(--e-2); font-size: var(--t-m); line-height: 1.3; }
.prosa .modelo__veredicto { margin: 0; padding: 0 var(--e-4) var(--e-3); font-size: var(--t-s); line-height: 1.45; color: var(--texto-suave); }
.modelo__datos { display: contents; }
.modelo__datos > div { margin-inline: var(--e-4); padding-block: var(--e-2); border-top: 1px solid var(--linea-fina); }
.modelo__datos dt { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.modelo__datos dd { margin: .1rem 0 0; font-size: var(--t-s); font-weight: 600; line-height: 1.35; color: var(--texto); }
.modelo__accion { padding: var(--e-3) var(--e-4) var(--e-4); align-self: end; }
.modelo__accion .boton-amazon { width: 100%; justify-content: center; }
.comparador__nav { margin-top: 0; }
@media (max-width: 47.99rem) {
  .comparador__pista { grid-auto-columns: 82%; }
}
@media (min-width: 48rem) {
  .comparador__pista { margin-inline: 0; padding-inline: 0; }
}

/* ---------- Portada de sección en ordenador: texto a la izquierda y foto a la derecha ---------- */
@media (min-width: 48rem) {
  .cabecera-pagina--foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--e-6); align-items: center; }
  .cabecera-pagina--foto .icono-categoria { display: none; }
  .cabecera-pagina--foto:has(.cabecera-pagina__intro) .entrada { display: none; }
  .cabecera-pagina--foto .cabecera-pagina__texto { grid-area: 1 / 1; }
  .cabecera-pagina__foto { display: block; grid-area: 1 / 2; overflow: hidden; border-radius: var(--radio-l); box-shadow: 0 2px 4px rgb(23 76 48 / .06), 0 14px 34px rgb(23 76 48 / .14); }
  .cabecera-pagina__foto img { display: block; width: 100%; height: auto; }
  .cabecera-pagina--rotulada h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cabecera-pagina--foto .cabecera-pagina__intro { display: block; }
  .cabecera-pagina__ante { margin: 0 0 var(--e-3); font-family: "Caveat", "Bradley Hand", cursive; font-size: clamp(2.2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.1; color: var(--verde-oscuro); }
  .cabecera-pagina__entradilla { margin: 0; font-size: var(--t-m); line-height: 1.6; color: var(--texto); }
}

/* ---------- Fichas de producto: aspecto de tarjeta editorial propia ---------- */
.productos__rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.tarjeta-producto {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--blanco);
  border: 1px solid var(--linea-fina); border-radius: var(--radio-l);
  box-shadow: 0 2px 4px rgb(23 76 48 / .05), 0 10px 26px rgb(23 76 48 / .09); transition: transform .15s, box-shadow .15s;
}
.tarjeta-producto:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgb(23 76 48 / .06), 0 16px 34px rgb(23 76 48 / .13); }
.tarjeta-producto:target { outline: 3px solid var(--gota); outline-offset: 2px; }
.tarjeta-producto__sello, .prosa .tarjeta-producto__sello { margin: 0; padding: var(--e-2) var(--e-4); background: var(--verde-oscuro); color: var(--blanco); font-size: var(--t-xs); font-weight: 650; line-height: 1.3; }
.tarjeta-producto__fila { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--e-4); align-items: start; padding: var(--e-4) var(--e-4) var(--e-3); }
.tarjeta-producto__img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea-fina); overflow: hidden; }
.tarjeta-producto__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .3rem; }
.tarjeta-producto__cuerpo { min-width: 0; }
.prosa .tarjeta-producto__marca, .tarjeta-producto__marca { margin: 0 0 .15rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.prosa .tarjeta-producto__nombre, .tarjeta-producto__nombre { margin: 0; font-size: var(--t-m); line-height: 1.3; color: var(--verde-oscuro); }
.prosa .tarjeta-producto__resumen, .tarjeta-producto__resumen { margin: var(--e-2) 0 0; font-size: var(--t-s); line-height: 1.45; color: var(--texto-suave); }
.tarjeta-producto__pie { margin-top: auto; padding: var(--e-3) var(--e-4) var(--e-4); border-top: 1px solid var(--linea-fina); background: #FAFCF8; }
.prosa .tarjeta-producto__fiable, .tarjeta-producto__fiable { display: flex; align-items: center; gap: .35rem; margin: 0 0 var(--e-3); font-size: var(--t-xs); color: var(--texto-suave); }
.tarjeta-producto__fiable svg { flex: none; width: 1rem; height: 1rem; color: var(--verde); }
.tarjeta-producto__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.tarjeta-producto__comparar { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-s); font-weight: 600; }
.tarjeta-producto__comparar svg { width: 1rem; height: 1rem; }
@media (max-width: 24rem) {
  .tarjeta-producto__fila { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e-3); }
  .tarjeta-producto__botones .boton-amazon { width: 100%; justify-content: center; }
}

/* Nota de comprobación bajo la comparativa */
.prosa .comparador__fuente { display: flex; align-items: center; gap: .35rem; margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--texto-suave); }
.comparador__fuente svg { flex: none; width: 1rem; height: 1rem; color: var(--verde); }
.modelo__accion .boton-amazon { padding-inline: .6rem; gap: .3rem; white-space: nowrap; }