/* =========================================================================
   rampaparaperros.com — Sistema visual
   -------------------------------------------------------------------------
   Autoría: equipo de diseño (Art Director · UI Designer · Frontend ·
   Creative Motion). Mobile-first, accesible (AA), Core Web Vitals primero.

   DIRECCIÓN DE ARTE
   - Marca especialista en RAMPAS/escaleras para perros. Principio
     "Ayudar primero. Recomendar después."
   - Sensación: natural, cálida, confiable, cuidada. Nada infantil.
   - Paleta: primario verde salvia/teal profundo (confianza + salud + calma),
     acento cálido terracota/arcilla (cercanía), neutros crema/hueso y texto
     carbón. Se conservan los colores semáforo (verde/ámbar/rojo).
   - Tipografía: Bricolage Grotesque (titulares) + Public Sans (cuerpo),
     AUTO-ALOJADAS en /assets/fonts/ (woff2 subset latino, font-display:swap).
     0 requests externos (RGPD-safe, mejor LCP). Ver sección 0.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. TIPOGRAFÍA (auto-alojada — 0 requests externos, RGPD-safe)
   Bricolage Grotesque (titulares) + Public Sans (cuerpo). Ficheros woff2 en
   /assets/fonts/. Rutas relativas al CSS (portables local /Pages y prod raíz).
   ------------------------------------------------------------------------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bricolage-grotesque-700.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bricolage-grotesque-800.woff2") format("woff2");}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/public-sans-400.woff2") format("woff2");}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/public-sans-600.woff2") format("woff2");}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/public-sans-700.woff2") format("woff2");}

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* --- Color · marca (verde salvia/teal profundo) --------------------- */
    --verde-700: #1d453d;
    --verde-600: #25574d;   /* hover/activo */
    --verde-500: #2f6f62;   /* PRIMARIO */
    --verde-400: #4c8a7c;
    --verde-100: #d8e9e3;
    --verde-050: #eaf4f0;   /* tinte de sección */

    /* --- Color · acento cálido (terracota/arcilla) --------------------- */
    --arcilla-700: #8f4a2c; /* texto/eyebrow sobre crema (AA) */
    --arcilla-500: #c26a43; /* relleno acento */
    --arcilla-100: #f4e0d3;
    --arcilla-050: #faefe6;

    /* --- Color · neutros crema/hueso + carbón -------------------------- */
    --crema:      #fbf8f2;  /* fondo de página */
    --hueso:      #f3ede2;  /* fondo de sección alterna */
    --superficie: #ffffff;  /* tarjetas */
    --carbon:      #23292b; /* texto principal */
    --carbon-suave:#54606a; /* texto secundario (AA sobre crema) */
    --borde:       #e7e0d3; /* borde cálido */
    --borde-fuerte:#d6cdbb;

    /* --- Color · semáforo (herramientas) ------------------------------- */
    --sem-verde: #2e7d32;
    --sem-ambar: #b26a00;
    --sem-rojo:  #c62828;
    --sem-verde-bg: #e8f5e9;
    --sem-ambar-bg: #fff3e0;
    --sem-rojo-bg:  #fdecea;

    /* --- Color · Amazon (marca del partner) ---------------------------- */
    --amazon:     #ffa41c;
    --amazon-osc: #f0930f;
    --amazon-txt: #1c1200;

    /* --- Tipografía (stacks del sistema, humanistas) ------------------- */
    --fuente-base: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulo: "Bricolage Grotesque", "Seravek", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Escala tipográfica fluida (clamp → responsive sin JS, sin CLS) */
    --txt-xs:   .8125rem;
    --txt-sm:   .9rem;
    --txt-base: 1rem;
    --txt-lg:   1.125rem;
    --txt-xl:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --txt-2xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
    --txt-3xl:  clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);

    /* --- Escala de espaciado ------------------------------------------- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --header-h: 63px;   /* alto del .site-header sticky (para offsets sticky) */

    /* --- Radios --------------------------------------------------------- */
    --radio-sm: 8px;
    --radio:    14px;
    --radio-lg: 22px;
    --radio-full: 999px;

    /* --- Sombras (tintadas en cálido, discretas) ----------------------- */
    --sombra-sm: 0 1px 2px rgba(35, 41, 43, .06);
    --sombra:    0 6px 20px -10px rgba(35, 41, 43, .18);
    --sombra-lg: 0 22px 48px -22px rgba(35, 41, 43, .28);

    /* --- Layout --------------------------------------------------------- */
    --ancho-max: 1140px;
    --ancho-texto: 68ch;

    /* --- Motion --------------------------------------------------------- */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .28s;
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--fuente-base);
    font-size: var(--txt-base);
    line-height: 1.65;
    color: var(--carbon);
    background: var(--crema);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--carbon);
    text-wrap: balance;
}
h1 { font-size: var(--txt-3xl); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--txt-2xl); margin: 0 0 var(--sp-3); }
h3 { font-size: var(--txt-xl); margin: 0 0 var(--sp-2); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--verde-600);
    text-decoration-color: color-mix(in srgb, var(--verde-500) 40%, transparent);
    text-underline-offset: .15em;
    transition: color var(--dur) var(--ease);
}
a:hover { color: var(--verde-700); }

strong { font-weight: 700; }

hr {
    border: 0;
    border-top: 1px solid var(--borde);
    margin: var(--sp-6) 0;
}

/* Foco visible y accesible en todo elemento interactivo */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--verde-400);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enlace de salto (accesibilidad de teclado) */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    background: var(--verde-600);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--radio-sm) 0;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* -------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

.site-main { padding-block: var(--sp-6) var(--sp-8); }

/* Secciones apiladas con aire */
.seccion { margin-block: var(--sp-7); }
.seccion:first-child { margin-top: var(--sp-5); }

.seccion__eyebrow {
    display: inline-block;
    font-size: var(--txt-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--arcilla-700);
    margin-bottom: var(--sp-2);
}
.seccion__titulo { margin-bottom: var(--sp-2); }
.seccion__intro {
    color: var(--carbon-suave);
    max-width: var(--ancho-texto);
    font-size: var(--txt-lg);
}

/* Grid utilitaria auto-fit para cards */
.grid-auto {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}
@media (min-width: 560px) {
    .grid-auto { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .grid-auto--3 { grid-template-columns: repeat(3, 1fr); }
    .grid-auto--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   4. CABECERA / NAVEGACIÓN
   ------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--crema) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--borde);
}
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    padding-block: var(--sp-3);
}
.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fuente-titulo);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--carbon);
}
.site-header__logo:hover { color: var(--carbon); }
.site-header__logo strong { color: var(--verde-500); font-weight: 800; }
.site-header__mark {
    flex: none;
    height: 38px;
    width: auto;
    display: block;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-4);
}
.site-nav a {
    text-decoration: none;
    color: var(--carbon);
    font-size: var(--txt-sm);
    font-weight: 600;
    padding: .3rem .1rem;
    border-bottom: 2px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--verde-600); border-bottom-color: var(--verde-400); }
.site-nav__cta {
    background: var(--verde-500);
    color: #fff !important;
    padding: .45rem .9rem !important;
    border-radius: var(--radio-full);
    border-bottom: 0 !important;
    box-shadow: var(--sombra-sm);
}
.site-nav__cta:hover { background: var(--verde-600); }

/* -------------------------------------------------------------------------
   5. BOTONES
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.3rem;
    min-height: 44px;                 /* target táctil AA */
    border: 1px solid transparent;
    border-radius: var(--radio-full);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                filter var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primario {
    background: var(--verde-500);
    color: #fff;
    box-shadow: var(--sombra);
}
.btn-primario:hover { background: var(--verde-600); color: #fff; box-shadow: var(--sombra-lg); }

.btn-secundario {
    background: var(--superficie);
    color: var(--verde-700);
    border-color: var(--borde-fuerte);
}
.btn-secundario:hover { background: var(--verde-050); color: var(--verde-700); }

.btn-amazon {
    background: var(--amazon);
    color: var(--amazon-txt);
    box-shadow: var(--sombra-sm);
}
.btn-amazon:hover { background: var(--amazon-osc); color: var(--amazon-txt); }

.btn-lg { padding: .9rem 1.7rem; font-size: var(--txt-lg); }
.btn-block { width: 100%; }

/* -------------------------------------------------------------------------
   6. HERO (Home)
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: var(--sp-4);
    padding: clamp(2rem, 1rem + 5vw, 4rem) clamp(1.25rem, .5rem + 3vw, 3.5rem);
    border-radius: var(--radio-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--verde-050) 0%, transparent 55%),
        radial-gradient(120% 130% at 0% 100%, var(--arcilla-050) 0%, transparent 50%),
        var(--superficie);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra);
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--verde-050);
    color: var(--verde-700);
    font-size: var(--txt-sm);
    font-weight: 700;
    padding: .35rem .8rem;
    border-radius: var(--radio-full);
    margin-bottom: var(--sp-4);
}
.hero h1 {
    max-width: 20ch;
    margin-bottom: var(--sp-4);
}
.hero__lead {
    font-size: var(--txt-lg);
    color: var(--carbon-suave);
    max-width: 56ch;
    margin-bottom: var(--sp-5);
}
.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.hero__confianza {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--borde);
    list-style: none;
    margin: 0;
}
.hero__confianza li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--carbon-suave);
}
.hero__confianza svg { color: var(--verde-500); flex: none; }

/* -------------------------------------------------------------------------
   7. TARJETAS DE NAVEGACIÓN (hubs por uso)
   ------------------------------------------------------------------------- */
.tarjetas-uso { list-style: none; padding: 0; margin: 0; }
.tarjeta-uso {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
    padding: var(--sp-5);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    text-decoration: none;
    color: var(--carbon);
    box-shadow: var(--sombra-sm);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.tarjeta-uso:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
    color: var(--carbon);
}
.tarjeta-uso__icono {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radio-sm);
    background: var(--verde-050);
    color: var(--verde-600);
    margin-bottom: var(--sp-2);
}
.tarjeta-uso__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--txt-lg); }
.tarjeta-uso__texto { font-size: var(--txt-sm); color: var(--carbon-suave); margin: 0; }
.tarjeta-uso__flecha {
    margin-top: auto;
    font-weight: 700;
    color: var(--verde-600);
    font-size: var(--txt-sm);
}

/* -------------------------------------------------------------------------
   8. BLOQUE DESTACADO / HERRAMIENTAS
   ------------------------------------------------------------------------- */
.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: var(--sp-5);
    box-shadow: var(--sombra-sm);
    height: 100%;
}
.panel--acento {
    background: linear-gradient(160deg, var(--verde-500), var(--verde-700));
    border-color: transparent;
    color: #fff;
}
.panel--acento h2, .panel--acento h3 { color: #fff; }
.panel--acento p { color: color-mix(in srgb, #fff 82%, transparent); }
.panel--acento .btn-secundario { background: #fff; color: var(--verde-700); }

/* Pasos "cómo elegimos" */
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; }
.paso {
    position: relative;
    padding-left: 3.4rem;
    min-height: 2.6rem;
}
.paso::before {
    counter-increment: paso;
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    background: var(--verde-050);
    color: var(--verde-700);
    font-family: var(--fuente-titulo);
    font-weight: 800;
    border-radius: var(--radio-full);
}
.paso h3 { margin-bottom: .2rem; }
.paso p { color: var(--carbon-suave); font-size: var(--txt-sm); }

/* Aviso de afiliación junto a los botones de Amazon (uno por pantalla). */
.aviso-afiliado {
    margin-top: var(--sp-4);
    font-size: .8rem;
    line-height: 1.5;
    color: var(--carbon-suave);
}

/* -------------------------------------------------------------------------
   10. CABECERA DE PÁGINA (categoría / herramientas / guía)
   ------------------------------------------------------------------------- */
.cabecera-pagina { margin-bottom: var(--sp-6); }
.cabecera-pagina h1 { margin-bottom: var(--sp-3); }
.cabecera-pagina__intro {
    font-size: var(--txt-lg);
    color: var(--carbon-suave);
    max-width: var(--ancho-texto);
}

/* -------------------------------------------------------------------------
   11. PRODUCTOS (listado de categoría / tarjetas del recomendador)
   ------------------------------------------------------------------------- */
.productos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--sp-4);
}
@media (min-width: 720px) {
    .productos { grid-template-columns: repeat(2, 1fr); }
}

.producto {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.producto:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.producto__cuerpo { display: flex; flex-direction: column; gap: var(--sp-3); }
.producto__nombre { font-size: var(--txt-lg); margin: 0; }

.producto__specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
}
.spec, .producto__specs li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--hueso);
    color: var(--carbon-suave);
    border-radius: var(--radio-full);
    padding: .2rem .7rem;
    font-size: var(--txt-xs);
    font-weight: 600;
}
.producto__veredicto {
    margin: 0;
    padding-left: var(--sp-3);
    border-left: 3px solid var(--verde-400);
    color: var(--carbon);
    font-style: italic;
}
.producto__accion {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
}

/* Tarjeta de producto del recomendador (con semáforo/ángulo) */
.card-producto {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: var(--sp-5);
    margin: var(--sp-4) 0;
    box-shadow: var(--sombra-sm);
}
.card-producto--principal {
    border-color: var(--verde-400);
    box-shadow: 0 0 0 2px var(--verde-050), var(--sombra);
}
.card-producto__etiqueta {
    font-size: var(--txt-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--arcilla-700);
    margin: 0 0 var(--sp-2);
}
.card-producto h3 { margin: 0 0 var(--sp-2); }
.card-producto__angulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: var(--sp-2) 0;
    font-weight: 600;
}
.card-producto__datos { color: var(--carbon-suave); margin: var(--sp-2) 0; }
.card-producto__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-3);
}

/* Punto de semáforo */
.semaforo-dot {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

/* -------------------------------------------------------------------------
   12. FORMULARIOS / HERRAMIENTAS (.tool-form)
   ------------------------------------------------------------------------- */
.tool {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: clamp(1.25rem, .8rem + 2vw, 2.25rem);
    box-shadow: var(--sombra-sm);
}
.tool > h1 { margin-bottom: var(--sp-3); }

.tool-form {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}
@media (min-width: 640px) {
    .tool-form { grid-template-columns: repeat(2, 1fr); align-items: end; }
    .tool-form > button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
}
.tool-form label {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-weight: 600;
    font-size: var(--txt-sm);
    color: var(--carbon);
}
.tool-form input,
.tool-form select,
.tool-form textarea {
    font: inherit;
    font-weight: 400;
    color: var(--carbon);
    background: var(--crema);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    padding: .7rem .8rem;
    min-height: 44px;
    width: 100%;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tool-form input:focus,
.tool-form select:focus,
.tool-form textarea:focus {
    outline: none;
    border-color: var(--verde-500);
    box-shadow: 0 0 0 3px var(--verde-050);
}
.tool-form button[type="submit"] {
    /* reutiliza el look de .btn .btn-primario */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .8rem 1.6rem;
    border: 0;
    border-radius: var(--radio-full);
    background: var(--verde-500);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--sombra);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tool-form button[type="submit"]:hover { background: var(--verde-600); transform: translateY(-1px); }

/* -------------------------------------------------------------------------
   13. SEMÁFORO / RESULTADOS
   ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: var(--radio-full);
    font-size: var(--txt-sm);
    font-weight: 700;
}
.badge--verde { background: var(--sem-verde-bg); color: var(--sem-verde); }
.badge--ambar { background: var(--sem-ambar-bg); color: var(--sem-ambar); }
.badge--rojo  { background: var(--sem-rojo-bg);  color: var(--sem-rojo); }

.resultado {
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    background: var(--crema);
    border: 1px solid var(--borde);
    border-left-width: 6px;
    border-radius: var(--radio);
}
.resultado > h2 { margin-top: 0; }
.resultado--verde { border-left-color: var(--sem-verde); }
.resultado--ambar { border-left-color: var(--sem-ambar); }
.resultado--rojo  { border-left-color: var(--sem-rojo); }
.resultado__angulo { font-size: var(--txt-2xl); font-weight: 800; margin: var(--sp-2) 0; }
.resultado__nota { font-size: var(--txt-sm); color: var(--carbon-suave); }

/* -------------------------------------------------------------------------
   14. AVISOS / CALLOUTS / DISCLAIMERS
   ------------------------------------------------------------------------- */
.callout {
    display: flex;
    gap: .7rem;
    padding: var(--sp-4);
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--hueso);
    font-size: var(--txt-sm);
    margin-block: var(--sp-4);
}
.callout__icono { flex: none; font-size: 1.15rem; line-height: 1.4; }
.callout p:last-child { margin-bottom: 0; }
.callout--info   { background: var(--verde-050); border-color: var(--verde-100); }
.callout--warn   { background: var(--sem-ambar-bg); border-color: #f0d6a8; }
.callout--danger { background: var(--sem-rojo-bg); border-color: #f2c3bd; }

.aviso {
    padding: var(--sp-5);
    background: var(--superficie);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio);
    color: var(--carbon-suave);
}

/* -------------------------------------------------------------------------
   15. GUÍAS
   ------------------------------------------------------------------------- */
.guias { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .guias { grid-template-columns: repeat(2, 1fr); } }
.guias__item {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: var(--sp-5);
    box-shadow: var(--sombra-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.guias__item:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.guias__item h2 { margin: 0 0 var(--sp-2); font-size: var(--txt-lg); }
.guias__item h2 a { text-decoration: none; }
.guias__item p { color: var(--carbon-suave); font-size: var(--txt-sm); margin: 0; }
/* "Guía rápida" (home): toda la tarjeta clicable (stretched-link sobre el enlace del h2). */
.guias--clic .guias__item { position: relative; }
.guias--clic .guias__item h2 a::after { content: ""; position: absolute; inset: 0; }
.guias--clic .guias__item:hover { box-shadow: var(--sombra); }
.guias--clic .guias__item:hover h2 { text-decoration: underline; }

.guia { max-width: var(--ancho-texto); }
.guia__cuerpo { font-size: var(--txt-lg); }
.guia__cuerpo h2 { margin-top: var(--sp-6); }
.guia__cuerpo h3 { margin-top: var(--sp-5); }
.guia__cuerpo p { margin-block: var(--sp-3); }
.guia__cuerpo ul, .guia__cuerpo ol { margin-block: var(--sp-3); padding-left: 1.35em; }
.guia__cuerpo li { margin-block: .3em; }
.guia__cuerpo img { border-radius: var(--radio); margin-block: var(--sp-4); }
/* Consejo / aviso destacado dentro de la guía (marcador <blockquote>). */
.guia__cuerpo blockquote {
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--verde-050);
    border-left: 4px solid var(--verde-500);
    border-radius: var(--radio-sm);
}
.guia__cuerpo blockquote p { margin: 0; }
/* Tablas comparativas: cabecera verde, filas cebra, esquinas redondeadas.
   Mantener pocas columnas; en móvil hace scroll horizontal. */
.guia__cuerpo table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--sp-4) 0;
    font-size: var(--txt-base);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(35, 41, 43, .05);
}
.guia__cuerpo thead th {
    background: var(--verde-500);
    color: #fff;
    font-weight: 700;
}
.guia__cuerpo th, .guia__cuerpo td {
    padding: .6rem .85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--borde);
}
/* Filas en blanco (sin rayado): solo separadores y cabecera verde. */
.guia__cuerpo tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
    .guia__cuerpo table { display: block; overflow-x: auto; }
}

/* -------------------------------------------------------------------------
   15b. PÁGINAS INSTITUCIONALES / DE CONFIANZA / LEGALES (tabla `paginas`)
   ------------------------------------------------------------------------- */
.pagina { max-width: var(--ancho-texto); }
.pagina__cuerpo { font-size: var(--txt-lg); }
.pagina__cuerpo h2 { margin-top: var(--sp-6); }
.pagina__cuerpo ul { padding-left: 1.25em; }
.pagina__cuerpo li { margin-block: var(--sp-2); }
.pagina__cuerpo code {
    background: var(--hueso);
    border: 1px solid var(--borde);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
}
.pagina__entradilla {
    font-size: var(--txt-lg);
    color: var(--carbon-suave);
    border-left: 4px solid var(--verde-300, var(--verde-600));
    padding-left: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.pagina__nota { color: var(--carbon-suave); font-size: var(--txt-sm); }

/* Aviso destacado de "borrador pendiente de revisión legal". */
.aviso-legal-borrador {
    background: #fff8e6;
    border: 1px solid #f0d488;
    border-left: 4px solid #d99a00;
    border-radius: var(--radio);
    padding: var(--sp-4) var(--sp-5);
    margin-block: var(--sp-5);
    color: #6b5300;
    font-size: var(--txt-base);
}
.aviso-legal-borrador p { margin: 0; }
.aviso-legal-borrador code {
    background: rgba(255, 255, 255, 0.6);
    border-color: #e5c766;
}

/* -------------------------------------------------------------------------
   16. AUXILIAR DE CATEGORÍA (widget de herramientas)
   ------------------------------------------------------------------------- */
.categoria__herramientas {
    margin-top: var(--sp-6);
    padding: var(--sp-5);
    background: var(--verde-050);
    border: 1px solid var(--verde-100);
    border-radius: var(--radio);
    text-align: center;
}
.categoria__herramientas p { margin: 0; font-weight: 600; }

/* -------------------------------------------------------------------------
   17. ERROR
   ------------------------------------------------------------------------- */
.error { text-align: center; padding-block: var(--sp-8); }
.error h1 { margin-bottom: var(--sp-3); }

/* -------------------------------------------------------------------------
   18. PIE
   ------------------------------------------------------------------------- */
.site-footer {
    margin-top: var(--sp-8);
    border-top: 1px solid var(--borde);
    background: var(--hueso);
    padding-block: var(--sp-6);
    font-size: var(--txt-sm);
    color: var(--carbon-suave);
}
.site-footer__afiliacion {
    /* Sin tarjeta: el aviso se integra en el pie en vez de flotar sobre él. */
    max-width: var(--ancho-texto);
    margin: 0 0 var(--sp-4);
}
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-5) 0 var(--sp-3);
}
.site-footer__nav a { color: var(--carbon-suave); text-decoration: none; font-weight: 600; }
.site-footer__nav a:hover { color: var(--verde-600); text-decoration: underline; }
.site-footer__copy { color: var(--carbon-suave); margin: 0; }

/* -------------------------------------------------------------------------
   19. CREATIVE MOTION — scroll reveal (progresivo, no bloqueante)
   -------------------------------------------------------------------------
   El contenido es visible por defecto. Solo si JS marca <html class="js">
   se prepara la animación; se revela al entrar en viewport (IntersectionObserver
   en main.js). Sin JS o sin soporte → todo visible (no rompe SEO/CWV).
   ------------------------------------------------------------------------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    will-change: opacity, transform;
}
.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------
   20. ACCESIBILIDAD: movimiento reducido
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    .btn:hover, .producto:hover, .tarjeta-uso:hover, .guias__item:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   21. BANNER DE COOKIES (privacy-first, informativo + opt-out)
   -------------------------------------------------------------------------
   Fijo abajo, no bloquea el render (parte con [hidden]; analitica.js lo
   muestra solo si no hay elección guardada). Sin dependencias externas.
   ------------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;                      /* por encima de header (100) y nav (50) */
    background: var(--verde-700);
    color: #fff;
    box-shadow: var(--sombra-lg);
    border-top: 3px solid var(--verde-400);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1.4rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.cookie-banner__texto {
    margin: 0;
    flex: 1 1 320px;
    font-size: var(--txt-sm, .95rem);
    line-height: 1.5;
    color: #fff;
}
.cookie-banner__texto a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}
.cookie-banner__texto a:hover { color: var(--verde-100); }

.cookie-banner__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    flex: 0 0 auto;
}
.cookie-banner__btn { min-width: 130px; }
/* El "Rechazar" (secundario) es claro sobre el fondo verde del banner. */
.cookie-banner .btn-secundario {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}
.cookie-banner .btn-secundario:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

@media (max-width: 640px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; }
    .cookie-banner__acciones { justify-content: stretch; }
    .cookie-banner__btn { flex: 1 1 auto; }
}

/* -------------------------------------------------------------------------
   14. LISTADO EN RANKING + FICHA CON NOTA  (diseño «guía de consumo»)
   Filas numeradas con nota calculada a la derecha, sidebar de filtros y
   ficha con tabla comparada contra la media del catálogo.
   ------------------------------------------------------------------------- */

/* --- Nota calculada (compartida listado/ficha) --- */
.nota { display: flex; align-items: baseline; gap: .3rem; line-height: 1; }
.nota__valor { font-family: "Bricolage Grotesque", Georgia, serif;
    font-weight: 700; font-size: 2.1rem; color: var(--verde-500); }
.nota__max { font-weight: 600; font-size: .78rem; color: var(--carbon-suave); }
.nota--media .nota__valor { color: var(--carbon-suave); }
.nota--sin { font-size: .82rem; color: var(--carbon-suave); font-weight: 600; }
.nota__enlace { font-size: .72rem; color: var(--carbon-suave); text-decoration: underline; }

/* --- Cabecera del hub con sello de metodología --- */
.hub-cabecera { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5);
    align-items: end; }
.hub-metodo { display: flex; flex-direction: column; gap: .35rem;
    padding: .8rem 1.1rem; border-left: 3px solid var(--verde-500); }
.hub-metodo__titulo { font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--verde-500); }
.hub-metodo__dato { font-size: .84rem; font-weight: 600; line-height: 1.4;
    color: var(--carbon); }

/* --- Rejilla listado: filtros + resultados --- */
.listado { display: grid; grid-template-columns: 244px 1fr; gap: var(--sp-5);
    align-items: start; }
@media (max-width: 900px) { .listado { grid-template-columns: 1fr; } }

.listado__barra { display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-3); padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--borde); }
.listado__conteo { font-size: .9rem; color: var(--carbon-suave); }
.listado__conteo b { color: var(--carbon); }
.listado__orden { display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--carbon-suave); margin-left: auto; }
.listado__orden select { font: inherit; padding: .3rem .5rem; border: 1px solid var(--borde);
    border-radius: 8px; background: #fff; color: var(--carbon); }

/* --- Fila de producto en ranking --- */
.ranking { display: flex; flex-direction: column; }
.rank { display: grid; grid-template-columns: 2rem 160px 1fr 172px; gap: var(--sp-4);
    align-items: start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--borde); }
.rank__pos { font-family: "Bricolage Grotesque", Georgia, serif;
    font-weight: 700; font-size: 1.05rem; color: var(--borde-fuerte); padding-top: .25rem; }
.rank__foto { display: block; aspect-ratio: 1; border-radius: 10px;
    border: 1px solid var(--borde); background: #fff; overflow: hidden; }
.rank__foto img { width: 100%; height: 100%; object-fit: contain; display: block; padding: .4rem; }
.rank__cuerpo { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.rank__nombre { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.rank__nombre a { color: inherit; text-decoration: none; }
.rank__nombre a:hover { text-decoration: underline; }
.rank__veredicto { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--carbon-suave);
    max-width: 46ch; text-wrap: pretty; }
.rank__specs { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.rank__specs li { padding: .22rem .55rem; border-radius: 6px; background: var(--hueso);
    font-size: .76rem; font-weight: 600; color: var(--carbon-suave); }
.rank__specs li.es-destacado { background: var(--verde-050); color: var(--verde-700); }
.rank__accion { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.rank__accion .nota { justify-content: flex-end; }
.rank__incompleto { font-size: .76rem; color: var(--arcilla-700);
    background: var(--arcilla-050); border: 1px solid var(--arcilla-100);
    border-radius: 6px; padding: .25rem .5rem; }

@media (max-width: 760px) {
    .rank { grid-template-columns: 1.6rem 88px 1fr; gap: var(--sp-3); }
    .rank__accion { grid-column: 1 / -1; }
    .rank__accion .nota { justify-content: flex-start; }
    .hub-cabecera { grid-template-columns: 1fr; }
}

/* --- Ficha: rejilla principal + aparte de nota --- */
.ficha__layout { display: grid; grid-template-columns: 1fr 292px; gap: var(--sp-6);
    align-items: start; }
@media (max-width: 900px) { .ficha__layout { grid-template-columns: 1fr; } }

.ficha__aparte { display: flex; flex-direction: column; gap: .85rem; padding: var(--sp-4);
    border-radius: 14px; background: var(--crema); border: 1px solid var(--borde);
    position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 900px) { .ficha__aparte { position: static; } }
.ficha__aparte .nota__valor { font-size: 2.7rem; }

/* --- Desglose de la nota por ejes --- */
.ejes { display: flex; flex-direction: column; gap: .5rem; }
.eje { display: flex; flex-direction: column; gap: .25rem; }
.eje__fila { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600;
    color: var(--carbon-suave); }
.eje__valor { color: var(--carbon); }
.eje__barra { height: 3px; border-radius: 2px; background: var(--borde); overflow: hidden; }
.eje__relleno { display: block; height: 100%; background: var(--verde-500); border-radius: 2px; }
.eje--sin .eje__fila { color: var(--carbon-suave); }

/* --- Tabla de specs comparada con la media --- */
.specs-comp { width: 100%; border-collapse: collapse; border: 1px solid var(--borde);
    border-radius: 10px; overflow: hidden; }
.specs-comp thead th { padding: .55rem .9rem; background: var(--hueso); text-align: left;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--carbon-suave); }
.specs-comp td { padding: .6rem .9rem; border-top: 1px solid var(--borde); font-size: .88rem; }
.specs-comp .sc-dato { color: var(--carbon-suave); }
.specs-comp .sc-valor { font-weight: 700; color: var(--carbon); }
.specs-comp .sc-media { color: var(--carbon-suave); font-variant-numeric: tabular-nums; }
.specs-comp .sc-nd { color: var(--borde-fuerte); }
.sc-marca { display: inline-block; margin-left: .4rem; padding: .1rem .4rem; border-radius: 5px;
    background: var(--verde-050); color: var(--verde-700); font-size: .68rem; font-weight: 700; }

/* --- Pros y contras en dos tarjetas --- */
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 700px) { .balance { grid-template-columns: 1fr; } }
.balance__caja { padding: var(--sp-4); border-radius: 12px; }
.balance__caja--pros { background: var(--verde-050); border: 1px solid var(--verde-100); }
.balance__caja--contras { background: var(--arcilla-050); border: 1px solid var(--arcilla-100); }
.balance__caja h3 { margin: 0 0 .6rem; font-size: .95rem; }
.balance__caja--pros h3 { color: var(--verde-700); }
.balance__caja--contras h3 { color: var(--arcilla-700); }
.balance__caja ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.65; }

/* --- «¿Le sirve a tu perro?» calculadora en la ficha --- */
.encaja { padding: var(--sp-4); border-radius: 12px; border: 1.5px dashed var(--verde-100); }
.encaja h2 { margin: 0 0 .3rem; }
.encaja__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
    margin: var(--sp-3) 0; }
@media (max-width: 600px) { .encaja__campos { grid-template-columns: 1fr; } }
.encaja__campo { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem;
    font-weight: 600; color: var(--carbon-suave); }
.encaja__salida { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem;
    border-radius: 9px; background: var(--verde-050); font-size: .9rem; line-height: 1.5; }
.encaja__salida[data-sem="AMBAR"] { background: #fdf4e3; }
.encaja__salida[data-sem="ROJO"]  { background: #fdeaea; }
/* Sin datos aún: fondo e icono neutros (no verde, que sugeriría "correcto"). */
.encaja__salida[data-sem="NEUTRO"] { background: var(--hueso); }
.encaja__icono { flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--sem-verde); color: #fff; display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; }
.encaja__salida[data-sem="AMBAR"] .encaja__icono { background: var(--sem-ambar); }
.encaja__salida[data-sem="ROJO"]  .encaja__icono { background: var(--sem-rojo); }
.encaja__salida[data-sem="NEUTRO"] .encaja__icono { background: var(--carbon-suave); }

/* --- «Si esta no te encaja» --- */
.alternativas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 700px) { .alternativas { grid-template-columns: 1fr; } }
.alt { display: flex; gap: .75rem; padding: .8rem; border: 1px solid var(--borde);
    border-radius: 10px; text-decoration: none; color: inherit; }
.alt:hover { border-color: var(--verde-400); }
.alt__foto { flex: none; width: 62px; height: 62px; border-radius: 8px; background: #fff;
    object-fit: contain; }
.alt__nombre { font-size: .86rem; font-weight: 700; line-height: 1.35; margin-bottom: .2rem; }
.alt__meta { font-size: .78rem; color: var(--carbon-suave); }

/* -------------------------------------------------------------------------
   15. BARRA LATERAL DE FILTROS DE CATEGORÍA
   ------------------------------------------------------------------------- */
.listado__lateral { display: flex; flex-direction: column; gap: var(--sp-4); }

.filtros { display: flex; flex-direction: column; gap: var(--sp-5);
    padding: var(--sp-4); border: 1px solid var(--borde); border-radius: 14px;
    background: var(--superficie); }
.filtros__cabecera { display: flex; align-items: center; justify-content: space-between; }
.filtros__titulo { font-weight: 800; font-size: .95rem; color: var(--carbon); }
.filtros__limpiar { font-size: .82rem; font-weight: 600; color: var(--verde-500); }

.filtros__grupo { border: 0; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .5rem; }
.filtros__leyenda { padding: 0; font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--carbon-suave); }
.filtros__ayuda { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--carbon-suave); }

/* Deslizador de peso */
.filtros__rango { width: 100%; accent-color: var(--verde-500); margin: 0; }
.filtros__rango-pies { display: flex; justify-content: space-between; align-items: baseline;
    font-size: .74rem; color: var(--carbon-suave); font-variant-numeric: tabular-nums; }
.filtros__rango-pies output { font-weight: 700; font-size: .84rem; color: var(--carbon); }

/* Casillas con conteo */
.filtros__check { display: flex; align-items: center; gap: .55rem; cursor: pointer;
    font-size: .88rem; color: var(--carbon); }
.filtros__check input { width: 1rem; height: 1rem; accent-color: var(--verde-500);
    cursor: pointer; flex: none; }
.filtros__check-texto { flex: 1; min-width: 0; }
.filtros__n { font-size: .74rem; color: var(--carbon-suave);
    font-variant-numeric: tabular-nums; }

/* Pastillas de material (checkbox oculto + label estilada) */
.filtros__pastillas { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtros__pastilla-input { position: absolute; opacity: 0; width: 0; height: 0; }
.filtros__pastilla { display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: 999px; background: var(--hueso);
    border: 1px solid transparent; font-size: .82rem; font-weight: 600;
    color: var(--carbon); cursor: pointer; }
.filtros__pastilla:hover { border-color: var(--verde-400); }
.filtros__pastilla-input:checked + .filtros__pastilla {
    background: var(--verde-500); color: #fff; }
.filtros__pastilla-input:checked + .filtros__pastilla .filtros__n { color: rgba(255,255,255,.75); }
.filtros__pastilla-input:focus-visible + .filtros__pastilla {
    outline: 2px solid var(--verde-500); outline-offset: 2px; }

.filtros__aplicar { align-self: flex-start; }

/* Tarjeta de ayuda del lateral (una sola columna, sin icono flotado) */
.lateral-ayuda { padding: var(--sp-4); border-radius: 12px;
    background: var(--verde-050); border: 1px solid var(--verde-100);
    display: flex; flex-direction: column; gap: .45rem; }
.lateral-ayuda__titulo { margin: 0; font-weight: 700; font-size: .92rem; color: var(--carbon); }
.lateral-ayuda__texto { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--carbon-suave); }
.lateral-ayuda__cta { font-size: .85rem; font-weight: 700; color: var(--verde-500);
    text-decoration: none; }
.lateral-ayuda__cta:hover { text-decoration: underline; }

/* En móvil los filtros se pliegan para no empujar el listado */
@media (max-width: 900px) {
    .filtros { gap: var(--sp-4); }
}