/* =====================================================================
   Huerto Fácil en Casa · sistema visual base (fase 1)
   Tokens de diseño + tipografía + componentes básicos.
   La portada y las plantillas (fases 2 y 3) se construyen sobre esto.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Colores de marca */
  --verde: #287A45;          /* principal: botones, enlaces, iconos   (5,3:1 con blanco) */
  --verde-oscuro: #174C30;   /* titulares, pie, hover                 (9,9:1 con blanco) */
  --verde-claro: #EAF5EB;    /* fondos de sección, etiquetas */
  --fondo: #FAFBF7;          /* fondo general */
  --texto: #25332A;          /* texto principal                       (12,6:1 sobre --fondo) */
  --blanco: #FFFFFF;
  --terracota: #A9502D;      /* acento cálido: avisos, detalles       (5,4:1 con blanco) */
  --terracota-claro: #F8ECE5;
  --crema: #FBF5EC;           /* fondo de las secciones con productos */
  --gota: #5BA8D6;           /* SOLO decorativo (iconos), nunca texto */

  /* Derivados */
  --texto-suave: #4F5F54;    /* textos secundarios                    (6,4:1 sobre --fondo) */
  --borde: #D6E3D8;
  --borde-fuerte: #A9C2AE;
  --linea-fina: #E5ECE4;     /* separadores suaves dentro de fichas y tablas */
  --foco: #1F6FB2;           /* anillo de foco: azul, se distingue del verde */

  /* Tipografía */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-xs: 0.8125rem;   /* 13 px */
  --t-s: 0.9375rem;    /* 15 px */
  --t-m: 1.0625rem;    /* 17 px: texto de lectura */
  --t-l: 1.25rem;      /* 20 px */
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --t-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);

  /* Espacios, radios, anchos */
  --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: 4.5rem;
  --radio: 10px;
  --radio-l: 16px;
  --ancho: 72rem;            /* contenedor general */
  --ancho-lectura: 44rem;    /* columna de texto de los artículos */
  --sombra: 0 1px 2px rgba(23, 76, 48, .06), 0 4px 14px rgba(23, 76, 48, .06);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-m);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--verde-oscuro); line-height: 1.2; margin: 0 0 var(--e-4); letter-spacing: -0.015em; }
h1 { font-size: var(--t-2xl); font-weight: 750; }
h2 { font-size: var(--t-xl); font-weight: 700; margin-top: var(--e-7); }
h3 { font-size: var(--t-l); font-weight: 650; margin-top: var(--e-6); }
p, ul, ol { margin: 0 0 var(--e-4); }
a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--verde-oscuro); text-decoration-thickness: 2px; }

/* Foco visible y claro en todo lo navegable con teclado */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

.salto {
  position: absolute; left: var(--e-4); top: -4rem; z-index: 100;
  background: var(--verde-oscuro); color: var(--blanco); padding: var(--e-2) var(--e-4); border-radius: var(--radio);
}
.salto:focus { top: var(--e-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Estructura ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--e-4); }
@media (min-width: 48rem) { .contenedor { padding-inline: var(--e-5); } }

.cabecera { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 4.25rem; }

.seccion { padding-block: var(--e-7); }
.seccion--clara { background: var(--verde-claro); }

.pie { background: var(--verde-oscuro); color: #D7EAD9; padding-block: var(--e-7) var(--e-5); font-size: var(--t-s); }
.pie a { color: var(--blanco); }
.pie__legal { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: var(--e-6); padding-top: var(--e-4); }

/* ---------- 4. Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; color: var(--verde-oscuro); }
.logo__icono { width: 40px; height: 40px; flex: none; color: var(--verde-oscuro); }
.logo__hoja1 { fill: var(--verde-oscuro); }
.logo__hoja2 { fill: var(--verde); }
.logo__gota { fill: var(--gota); }
.logo__borde { fill: #8E4325; }
.logo__maceta { fill: var(--terracota); }
.logo__texto { font-size: 1.1875rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.logo__marca { font-weight: 780; }
.logo__resto { font-weight: 500; color: var(--verde); }
.logo--claro, .logo--claro .logo__icono { color: var(--blanco); }
.logo--claro .logo__hoja1 { fill: #CFE8D3; }
.logo--claro .logo__hoja2 { fill: #8FD0A0; }
.logo--claro .logo__resto { color: #CFE8D3; }
/* En pantallas muy estrechas el nombre se reduce a «Huerto Fácil» */
@media (max-width: 22rem) { .logo__resto { display: none; } }

/* ---------- 5. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 2.875rem; padding: var(--e-2) var(--e-5);
  border: 2px solid var(--verde); border-radius: var(--radio);
  background: var(--verde); color: var(--blanco);
  font: inherit; font-size: var(--t-s); font-weight: 650; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: var(--blanco); text-decoration: none; }
.boton--secundario { background: transparent; color: var(--verde-oscuro); }
.boton--secundario:hover { background: var(--verde-claro); color: var(--verde-oscuro); border-color: var(--verde); }
/* Botón de afiliado: distinto a los de navegación para que se reconozca como enlace a una tienda */
.boton--amazon { background: var(--terracota); border-color: var(--terracota); }
.boton--amazon:hover { background: #8E4325; border-color: #8E4325; }
.boton__nota { font-weight: 400; font-size: var(--t-xs); }

/* ---------- 6. Tarjetas ---------- */
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.tarjeta {
  display: flex; flex-direction: column; gap: var(--e-2);
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-l);
  padding: var(--e-5); box-shadow: var(--sombra);
}
.tarjeta h3 { margin: 0; font-size: var(--t-l); }
.tarjeta p { margin: 0; color: var(--texto-suave); font-size: var(--t-s); }
.tarjeta__enlace { color: inherit; text-decoration: none; }
.tarjeta__enlace::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta clicable */
.tarjeta--clicable { position: relative; transition: border-color .15s, transform .15s; }
.tarjeta--clicable:hover { border-color: var(--verde); transform: translateY(-2px); }
.tarjeta--clicable:focus-within { outline: 3px solid var(--foco); outline-offset: 3px; }
.tarjeta--clicable .tarjeta__enlace:focus-visible { outline: none; }

.etiqueta {
  align-self: flex-start; display: inline-block; padding: 2px var(--e-2); border-radius: 999px;
  background: var(--verde-claro); color: var(--verde-oscuro); font-size: var(--t-xs); font-weight: 600;
}
.etiqueta--comparativa { background: var(--terracota-claro); color: #7A3820; }

.icono-categoria {
  width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde);
}
.icono-categoria svg { width: 1.75rem; height: 1.75rem; }

/* ---------- 7. Avisos ---------- */
.aviso {
  border-left: 4px solid var(--verde); background: var(--verde-claro);
  padding: var(--e-3) var(--e-4); border-radius: 0 var(--radio) var(--radio) 0; font-size: var(--t-s);
}
.aviso--afiliacion { border-left-color: var(--terracota); background: var(--terracota-claro); }
.aviso p:last-child { margin-bottom: 0; }

/* ---------- 8. Tabla responsive ----------
   En pantallas anchas es una tabla normal; en móvil cada fila se convierte
   en una tarjeta y cada celda muestra su encabezado (atributo data-col). */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); background: var(--blanco); border-radius: var(--radio); overflow: hidden; }
.tabla caption { text-align: left; font-weight: 650; color: var(--verde-oscuro); padding-bottom: var(--e-2); }
.tabla th, .tabla td { padding: var(--e-3); text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla thead th { background: var(--verde-oscuro); color: var(--blanco); font-weight: 600; }
@media (max-width: 40rem) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tabla, .tabla caption, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; width: 100%; }
  .tabla { background: transparent; }
  .tabla tr { background: var(--blanco); border: 1px solid var(--linea-fina); border-radius: var(--radio-l); margin-bottom: var(--e-3); overflow: hidden; box-shadow: var(--sombra); }
  .tabla tbody th { padding: var(--e-4) var(--e-4) var(--e-3); border-bottom: 0; color: var(--verde-oscuro); font-size: var(--t-m); font-weight: 700; line-height: 1.3; }
  .tabla td { padding: var(--e-3) var(--e-4); border-bottom: 0; border-top: 1px solid var(--linea-fina); }
  .tabla td::before { content: attr(data-col); display: block; margin-bottom: .1rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
}

/* ---------- 9. Página «en preparación» y 404 ---------- */
.portada-provisional { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--e-8); }
.portada-provisional__caja { max-width: 36rem; }
.portada-provisional .logo { margin-bottom: var(--e-6); }
.portada-provisional .logo__icono { width: 64px; height: 64px; }
.portada-provisional .logo__texto { font-size: 1.75rem; }
.lista-temas { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; padding: 0; list-style: none; }

/* ---------- 10. Guía de estilo (solo fuera de producción) ---------- */
.muestras { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.muestra { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--blanco); font-size: var(--t-xs); }
.muestra__color { height: 4.5rem; }
.muestra__datos { padding: var(--e-2) var(--e-3); }
.muestra__datos strong { display: block; font-size: var(--t-s); }
.c-verde { background: var(--verde); } .c-verde-oscuro { background: var(--verde-oscuro); }
.c-verde-claro { background: var(--verde-claro); } .c-fondo { background: var(--fondo); }
.c-texto { background: var(--texto); } .c-blanco { background: var(--blanco); }
.c-terracota { background: var(--terracota); } .c-gota { background: var(--gota); }
.fila-componentes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-bottom: var(--e-5); }
.fondo-oscuro { background: var(--verde-oscuro); padding: var(--e-4); border-radius: var(--radio); }
.favicons { display: flex; gap: var(--e-4); align-items: flex-end; }
.favicons img:nth-child(1) { width: 16px; } .favicons img:nth-child(2) { width: 32px; } .favicons img:nth-child(3) { width: 64px; }