/* =========================================================================
   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: stack humanista del SISTEMA (0 requests externos → 0 CLS por
     swap de fuente, mejor LCP). Ningún recurso externo (CSP lo bloquea).
   ========================================================================= */

/* -------------------------------------------------------------------------
   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: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fuente-titulo: "Seravek", "Gill Sans Nova", "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;

    /* --- 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;
    width: 30px;
    height: 30px;
    color: var(--verde-500);
}

.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);
    border-color: var(--verde-400);
    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); }

/* -------------------------------------------------------------------------
   9. BREADCRUMBS
   ------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: var(--txt-sm);
    color: var(--carbon-suave);
    margin-bottom: var(--sp-5);
}
.breadcrumbs a { color: var(--carbon-suave); text-decoration: none; }
.breadcrumbs a:hover { color: var(--verde-600); text-decoration: underline; }

/* -------------------------------------------------------------------------
   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; }

.guia { max-width: var(--ancho-texto); }
.guia__cuerpo { font-size: var(--txt-lg); }
.guia__cuerpo h2 { margin-top: var(--sp-6); }
.guia__cuerpo img { border-radius: var(--radio); margin-block: var(--sp-4); }

/* -------------------------------------------------------------------------
   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 {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: var(--sp-4);
    max-width: var(--ancho-texto);
}
.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; }
}