/* =========================================================
   AJUSTES RÁPIDOS: colores, fuentes, tamaños y bordes.
   Cambia solo los valores de esta sección.
   ========================================================= */
:root{
  /* Colores */
  --fondo:#FEFEEB;      /* color de fondo de la página */
  --texto:#2E2E2E;      /* textos largos y bordes */
  --verde:#33C774;      /* títulos y encabezado de tarjetas */
  --azul:#3396C7;       /* subtítulos, etiquetas, enlaces */
  --tarjeta:#FFFFFF;    /* fondo de las tarjetas */
  --velo:rgba(254,254,235,.85); /* capa sobre la imagen de fondo: sube el último número (0 a 1) para que se vea menos la imagen */

  /* Imagen de fondo (cambia el archivo en /img) */
  --fondo-img:url("../img/fondo.svg");
  --fondo-tamano:96px;  /* tamaño del patrón. Para una foto grande usa: cover */
  --fondo-repetir:repeat; /* para una foto grande usa: no-repeat */

  /* Fuentes */
  --fuente-ui:"Jersey 10","Jersey10-Regular",system-ui,sans-serif;
  --fuente-texto:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* usa var(--fuente-ui) para Jersey en todo */

  /* Tamaños */
  --tam-texto:1.05rem;                 /* texto normal */
  --tam-h1:clamp(2.4rem,9vw,4.5rem);   /* título principal (se adapta al ancho) */
  --tam-h2:1.8rem;                     /* subtítulos */
  --tam-nombre-tarjeta:1.7rem;         /* nombre de la huerta */
  --tam-menu:1.4rem;                   /* menú y botones */

  /* Estilo pixel */
  --borde:3px;                         /* grosor de bordes */
  --sombra:5px 5px 0 var(--texto);     /* sombra dura de las tarjetas */
  --ancho-max:1100px;                  /* ancho máximo del contenido */
  --alto-logo:56px;                    /* alto de los logos del footer */
}
/* Si copias Jersey10-Regular.ttf a /fonts, descomenta esto y deja de depender de Google Fonts:
@font-face{font-family:"Jersey 10";src:url("../fonts/Jersey10-Regular.ttf") format("truetype");font-display:swap}
*/

/* ================== Base ================== */
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--texto);font:var(--tam-texto)/1.55 var(--fuente-texto);
  background-color:var(--fondo);
  background-image:linear-gradient(var(--velo),var(--velo)),var(--fondo-img);
  background-size:auto,var(--fondo-tamano);background-repeat:no-repeat,var(--fondo-repetir);background-position:center}
main{flex:1}
h1,h2,h3,.marca,.btn,label,.badge,.barra nav a,.pag button{font-family:var(--fuente-ui);font-weight:400}
a{color:var(--azul)}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
h1{color:var(--verde);font-size:var(--tam-h1);line-height:1;margin:0 0 .4rem;text-shadow:3px 3px 0 var(--texto);overflow-wrap:anywhere}
h2{color:var(--azul);font-size:var(--tam-h2);margin:2rem 0 .3rem}

/* ================== Cabecera ================== */
.barra{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding:.8rem clamp(1rem,4vw,2.5rem);border-bottom:var(--borde) solid var(--texto);background:var(--fondo)}
.marca{font-size:1.7rem;color:var(--texto);text-decoration:none}
.barra nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.barra nav a{font-size:var(--tam-menu);color:var(--texto);text-decoration:none}
.barra nav a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}

/* ================== Botones ================== */
.btn{display:inline-block;padding:.35rem 1rem;min-height:44px;font-size:var(--tam-menu);line-height:1.5;text-decoration:none;border:var(--borde) solid var(--texto);box-shadow:3px 3px 0 var(--texto);cursor:pointer}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn-verde{background:var(--verde);color:var(--texto)}
.btn-azul{background:var(--azul);color:var(--fondo)}
.barra nav a.btn{color:var(--fondo)}

/* ================== Directorio ================== */
main{width:100%;max-width:var(--ancho-max);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.hero{padding:2.5rem 0 1rem}
.sub{font-size:1.25rem;max-width:36rem;margin:0}

.filtros{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:end;padding:1.2rem 0}
.filtros label{display:flex;flex-direction:column;gap:.2rem;font-size:1.3rem;color:var(--azul)}
.filtros select,.filtros input{font:inherit;font-size:1rem;color:var(--texto);background:#fff;border:var(--borde) solid var(--texto);padding:.5rem .6rem;min-height:44px;width:100%;min-width:16rem;max-width:100%}
#contador{margin:0 0 .6rem auto}

/* 3 columnas en escritorio, 2 en tablet, 1 en móvil */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding-bottom:1.5rem}
.card{display:flex;flex-direction:column;background:var(--tarjeta);border:var(--borde) solid var(--texto);box-shadow:var(--sombra);min-width:0}
.card h3{margin:0;padding:.5rem .9rem;background:var(--verde);color:var(--texto);font-size:var(--tam-nombre-tarjeta);line-height:1.1;border-bottom:var(--borde) solid var(--texto);overflow-wrap:anywhere}
.card .cuerpo{padding:.9rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.badge{align-self:flex-start;background:var(--azul);color:var(--fondo);font-size:1.2rem;padding:0 .6rem}
.card dl{margin:0;display:grid;gap:.4rem}
.card dt{font-family:var(--fuente-ui);color:var(--azul);font-size:1.15rem;line-height:1}
.card dd{margin:0;overflow-wrap:anywhere}
.card .btn{margin-top:auto;align-self:flex-start}
.vacio{text-align:center;padding:2rem 0}

/* ================== Paginado ================== */
.pag{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:0 0 2rem}
.pag button{min-width:44px;min-height:44px;padding:0 .8rem;font-size:1.3rem;color:var(--texto);background:#fff;border:var(--borde) solid var(--texto);box-shadow:3px 3px 0 var(--texto);cursor:pointer}
.pag button:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
.pag button[aria-current="page"]{background:var(--verde)}
.pag button:disabled{opacity:.4;cursor:not-allowed}
.pag .puntos{font-family:var(--fuente-ui);font-size:1.3rem}
.pag .info{display:none;font-family:var(--fuente-ui);font-size:1.3rem}

/* ================== Página About ================== */
.texto{max-width:42rem;padding-bottom:2rem}
.texto .btn{margin:.5rem 0}

/* ================== Footer ================== */
.pie{border-top:var(--borde) solid var(--texto);padding:1.2rem clamp(1rem,4vw,2.5rem);font-size:.95rem;background:var(--fondo)}
.pie p{margin:.2rem 0}
.logos{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin:0 0 1rem;padding:0;list-style:none}
.logos img{height:var(--alto-logo);width:auto;max-width:100%;display:block}

/* ================== Responsive ================== */
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .hero{padding-top:1.5rem}
  .marca{font-size:1.5rem}
  .barra nav a{font-size:1.25rem}
  .filtros label{flex:1 1 100%}
  .filtros select,.filtros input{min-width:0}
  #contador{margin:0}
  .pag .nums{display:none}
  .pag .info{display:block;order:-1;flex-basis:100%;text-align:center}
  .logos img{height:calc(var(--alto-logo) * .8)}
}
@media (prefers-reduced-motion:no-preference){.btn,.pag button{transition:transform .08s,box-shadow .08s}}