/* ==========================================================================
   FarmAdviseD — estilo común (rediseño 17/18-10-2026)
   Maqueta: columnas centradas de 72rem sobre blanco; bandas a todo el ancho en blanco o lavanda.
   El morado de la marca es solo acento (botones, enlaces, detalles). Los colores de las páginas
   salen de estas variables: herramientas/estilo.py cambió los colores escritos a mano por ellas.
   ========================================================================== */

/* Fuentes servidas desde la propia web (sin peticiones a terceros). SIL Open Font License 1.1:
   Figtree © 2022 The Figtree Project Authors; Bricolage Grotesque © 2022 The Bricolage Grotesque
   Project Authors. Licencias en web/fonts/OFL-*.txt */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/figtree-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/figtree-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Respaldo con las medidas de cada fuente (21-10-2026): mientras llega la fuente, el texto sale en la del sistema
   ajustada (size-adjust y alturas) para ocupar lo mismo; al cambiar a la buena no se mueve nada (antes saltaba el
   catálogo). Medidas sacadas de los .woff2 con fontTools sobre el texto de las páginas, para la familia de Arial
   (Arial, Helvetica, Liberation Sans), Roboto (Android) y DejaVu Sans (Linux). La primera que exista en el equipo */
@font-face { font-family: 'Figtree respaldo A'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
    size-adjust: 98.46%; ascent-override: 96.49%; descent-override: 25.39%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree respaldo R'; src: local('Roboto');
    size-adjust: 99.07%; ascent-override: 95.89%; descent-override: 25.23%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree respaldo D'; src: local('DejaVu Sans');
    size-adjust: 87.59%; ascent-override: 108.46%; descent-override: 28.54%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage respaldo A'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
    size-adjust: 109.59%; ascent-override: 84.86%; descent-override: 24.64%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage respaldo R'; src: local('Roboto');
    size-adjust: 110.27%; ascent-override: 84.34%; descent-override: 24.49%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage respaldo D'; src: local('DejaVu Sans');
    size-adjust: 97.49%; ascent-override: 95.39%; descent-override: 27.69%; line-gap-override: 0%; }

:root {
    /* Color */
    /* Paleta del logo (18-10-2026): morado pastel #C9B6E8 y azul pastel #B5D3F0 para fondos, degradados y
       detalles; sus versiones intensas para texto, enlaces y botones (contraste ≥ 4,5:1 sobre blanco y sobre
       los fondos: morado 6,8 y 5,9; azul 6,1 y 5,3) */
    --pastel-lavanda: #c9b6e8;
    --pastel-azul: #b5d3f0;
    --acento: #6448b0;          /* morado intenso: botones, acentos */
    --acento-fuerte: #4f3792;   /* al pasar el ratón y texto de acento sobre los fondos */
    --acento-claro: #a48bd6;    /* trazos y adornos finos */
    --azul: #2a64a6;            /* azul intenso: enlaces */
    --azul-fuerte: #1f4f87;
    --lavanda: #f2edfa;         /* fondos de sección */
    --lavanda-borde: #dcd0f0;
    --azul-claro: #ebf3fc;
    --azul-borde: #cbdff3;
    --degradado-suave: linear-gradient(135deg, var(--lavanda) 0%, var(--azul-claro) 100%);
    --degradado-pastel: linear-gradient(135deg, var(--pastel-lavanda) 0%, var(--pastel-azul) 100%);
    --degradado-boton: linear-gradient(135deg, var(--acento) 0%, var(--azul) 100%);
    --degradado-boton-fuerte: linear-gradient(135deg, var(--acento-fuerte) 0%, var(--azul-fuerte) 100%);
    --tinta: #221d30;           /* texto principal (casi negro con un punto de morado) */
    --tinta-2: #4d4760;         /* texto secundario */
    --tinta-3: #6a647c;         /* notas y rótulos (contraste ≥ 4,5:1 sobre blanco y lavanda) */
    --fondo: #ffffff;
    --fondo-suave: #faf9fc;
    --borde: #e7e3ee;
    /* Avisos de seguridad: color con significado, aparte del acento */
    --peligro: #a3231a;
    --peligro-fondo: #fdf1ef;
    --peligro-borde: #efc2bb;
    --precaucion: #7a4a00;
    --precaucion-fondo: #fff7e3;
    --precaucion-borde: #eed38f;
    --info: #1c4d8c;
    --info-fondo: #eef4fc;
    --info-borde: #c3d6f0;
    --ok: #1b6643;
    --ok-fondo: #ebf6ef;
    --ok-borde: #b8dcc6;

    /* Tipografía */
    --fuente-titulos: 'Bricolage Grotesque', 'Bricolage respaldo A', 'Bricolage respaldo R', 'Bricolage respaldo D', 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fuente-texto: 'Figtree', 'Figtree respaldo A', 'Figtree respaldo R', 'Figtree respaldo D', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --t-xs: 0.8125rem;
    --t-s: 0.9375rem;
    --t-m: 1.0625rem;
    --t-l: 1.25rem;
    --t-xl: 1.5rem;
    --t-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    --t-3xl: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);

    /* Forma y espacio */
    --radio: 14px;
    --radio-s: 10px;
    --radio-xs: 6px;
    --sombra: 0 1px 2px rgba(34, 29, 48, 0.05), 0 8px 24px -12px rgba(34, 29, 48, 0.14);
    --sombra-alta: 0 2px 6px rgba(34, 29, 48, 0.06), 0 18px 40px -16px rgba(34, 29, 48, 0.22);
    --seccion: clamp(3.5rem, 2.4rem + 4.5vw, 6rem);
    --ancho: 72rem;
    --margen: clamp(1rem, 4vw, 2rem);
    --cabecera-alto: 4.25rem;
}

/* ========== BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Tamaño base 18 px (18-10-2026; antes 16): todo lo que va en rem (texto, títulos, botones, campos y espacios)
   crece un 12,5 % en la misma proporción. En el móvil el cuerpo queda en 18 px */
html {
    font-size: 112.5%;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--cabecera-alto) + 1rem);
}

body {
    font-family: var(--fuente-texto);
    font-size: 1rem;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    color: var(--tinta);
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 { font-weight: 700; }
h2, h3 { font-weight: 650; }
h4 { font-weight: 600; }

p { text-wrap: pretty; }

a { color: var(--azul); }
a:hover { color: var(--azul-fuerte); }

img { max-width: 100%; }

button, input, select, textarea { font: inherit; }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: var(--radio-xs);
}

::selection { background: var(--lavanda-borde); }

.container {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen);
}

/* Iconos de Lucide en línea (herramientas/iconos.py): mismo trazo y tamaño en toda la web */
.icono {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.25em;
}

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== CABECERA (herramientas/cabecera.py; menú en main.js) ========== */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--borde);
}

/* La barra ocupa todo el ancho: logo pegado a la izquierda, menú y sesión hacia la derecha (18-10-2026) */
.cabecera-barra {
    height: var(--cabecera-alto);
    padding: 0 var(--margen);
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tinta);
    text-decoration: none;
    flex: none;
}

.logo:hover { color: var(--tinta); }

/* el logo real (herramientas/logo_desde_captura.py): más alto que ancho, sin recortar */
.logo-icon {
    width: auto;
    height: 2.75rem;
    flex: none;
    display: block;
    object-fit: contain;
}

/* el logo de la portada, en dos capas superpuestas del mismo tamaño (hojas sobre la cruz) */
.logo-capas {
    position: relative;
    aspect-ratio: 443 / 493;
}
.logo-capas img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#mainNav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    min-width: 0;
}

.nav-lista {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    list-style: none;
}

.nav-lista > li > a,
.nav-desplegable-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
    border: 0;
    border-radius: var(--radio-s);
    background: none;
    color: var(--tinta-2);
    font-size: 1rem;
    white-space: nowrap;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.nav-lista > li > a:hover,
.nav-desplegable-boton:hover,
.nav-desplegable.abierto > .nav-desplegable-boton {
    color: var(--tinta);
    background: var(--lavanda);
}

.nav-lista > li > a[aria-current="page"],
.nav-desplegable[data-actual] > .nav-desplegable-boton {
    color: var(--acento);
    font-weight: 600;
}

.nav-desplegable { position: relative; }

.nav-desplegable-boton .icono {
    width: 1rem;
    height: 1rem;
    vertical-align: 0;
    transition: transform 0.15s;
}

.nav-desplegable.abierto .nav-desplegable-boton .icono { transform: rotate(180deg); }

.nav-submenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 15rem;
    list-style: none;
    padding: 0.4rem;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    display: none;
}

/* puente invisible para que el ratón no pierda el desplegable al bajar */
.nav-submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.6rem;
    height: 0.6rem;
}

.nav-desplegable.abierto .nav-submenu { display: block; }

.nav-submenu a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radio-xs);
    color: var(--tinta-2);
    font-size: var(--t-s);
    text-decoration: none;
}

.nav-submenu a:hover {
    background: var(--lavanda);
    color: var(--tinta);
}

.nav-submenu li:first-child a {
    color: var(--acento);
    font-weight: 600;
}

.nav-submenu li:first-child {
    border-bottom: 1px solid var(--borde);
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
}

.menu-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: var(--fondo);
    color: var(--tinta);
    cursor: pointer;
}

.menu-toggle .icono { width: 1.375rem; height: 1.375rem; vertical-align: 0; }
.menu-toggle .menu-cerrar { display: none; }
.menu-toggle[aria-expanded="true"] .menu-abrir { display: none; }
.menu-toggle[aria-expanded="true"] .menu-cerrar { display: inline-flex; }
.menu-toggle > span { display: inline-flex; }

@media (hover: hover) and (min-width: 1101px) {
    .nav-desplegable:hover .nav-submenu { display: block; }
}

/* ========== CABECERAS DE PÁGINA Y PORTADILLAS ========== */
.hero {
    background: var(--degradado-suave);
    color: var(--tinta);
    padding: var(--seccion) var(--margen);
    text-align: center;
}

.hero-content {
    max-width: 52rem;
    margin: 0 auto;
}

.hero h1 {
    font-size: var(--t-3xl);
    margin-bottom: 1rem;
}

.hero p {
    font-size: var(--t-l);
    color: var(--tinta-2);
    margin-bottom: 2rem;
}

.page-header {
    background: var(--degradado-suave);
    color: var(--tinta);
    padding: calc(var(--seccion) * 0.75) var(--margen);
    text-align: center;
    border-bottom: 1px solid var(--lavanda-borde);
}

.page-header-content {
    max-width: 48rem;
    margin: 0 auto;
}

.page-header-content h1 {
    font-size: var(--t-3xl);
    margin-bottom: 0.75rem;
}

.page-header-content p {
    font-size: var(--t-m);
    color: var(--tinta-2);
}

/* ========== BOTONES ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--degradado-boton);
    color: #fff;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radio-s);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--t-s);
    line-height: 1.2;
    margin-top: 1.5rem;
    transition: background-color 0.15s, box-shadow 0.15s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--degradado-boton-fuerte);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(79, 55, 146, 0.55);
}

.btn-large {
    padding: 1rem 1.75rem;
    font-size: var(--t-m);
}

.btn-secundario {
    background: var(--fondo);
    color: var(--acento);
    border: 1px solid var(--lavanda-borde);
}

.btn-secundario:hover {
    background: var(--lavanda);
    border-color: var(--acento-claro);
    color: var(--acento-fuerte);
    box-shadow: none;
}

/* ========== TELEGRAM SECTION ========== */
.telegram-section {
    padding: 5rem 5%;
    background: var(--fondo-suave);
}

.telegram-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.telegram-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.telegram-content h2 {
    font-size: 2.5rem;
    color: var(--tinta);
    margin-bottom: 1.5rem;
}

.telegram-content p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--tinta-2);
}

.telegram-content em {
    color: var(--acento);
}

/* ========== CONTACT SECTION ========== */
.contact-section {
    padding: 5rem 5%;
    background: white;
}

.contact-container {
    max-width: 900px;
    margin: 0 auto;
}

.contact-section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--tinta);
}

.contact-section .subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--tinta-2);
    margin-bottom: 1rem;
}

.contact-section .description {
    text-align: center;
    color: var(--tinta-3);
    margin-bottom: 3rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--tinta);
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--acento);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.required {
    color: var(--peligro);
}

.submit-btn {
    background: var(--acento);
    color: white;
    padding: 1rem 3rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(100, 72, 176, 0.4);
}

/* ========== NEWSLETTER ========== */
.newsletter-section {
    padding: var(--seccion) var(--margen);
    background: var(--degradado-suave);
    color: var(--tinta);
}

.newsletter-container {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3rem;
}

.newsletter-content {
    flex: 1 1 18rem;
    min-width: 0;
}

.newsletter-content h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-2xl);
    margin-bottom: 0.5rem;
}

.newsletter-content h2 .icono { color: var(--acento); }

.newsletter-content p {
    color: var(--tinta-2);
    font-size: var(--t-m);
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 28rem;
}

.newsletter-form input:not([type="checkbox"]) {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--lavanda-borde);
    border-radius: var(--radio-s);
    background: var(--fondo);
    color: var(--tinta);
    font-size: 1rem;
    outline: none;
}

.newsletter-form .newsletter-privacidad {
    flex-basis: 100%;
    min-width: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--t-s);
    color: var(--tinta-2);
}

.newsletter-form .newsletter-privacidad input {
    flex: none;
    padding: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--acento);
}

.newsletter-form .newsletter-privacidad a {
    color: var(--acento);
    text-decoration: underline;
}

.newsletter-form input:not([type="checkbox"]):focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--lavanda-borde);
}

.newsletter-form button {
    padding: 0.85rem 1.4rem;
    background: var(--degradado-boton);
    color: #fff;
    border: none;
    border-radius: var(--radio-s);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.newsletter-form button:hover { background: var(--degradado-boton-fuerte); }

/* ========== SERVICES SECTION ========== */
.services-section {
    padding: 5rem 5%;
    background: white;
}

.service-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 3rem;
    padding: 3rem;
    margin-bottom: 3rem;
    background: var(--fondo-suave);
    border-radius: 20px;
    align-items: center;
}

.service-card-reverse {
    grid-template-columns: 1fr 150px;
}

.service-card-reverse .service-content {
    order: 1;
}

.service-card-reverse .service-icon {
    order: 2;
}

.service-icon {
    font-size: 5rem;
    text-align: center;
}

.service-content h3 {
    font-size: 2rem;
    color: var(--tinta);
    margin-bottom: 1rem;
}

.service-content p {
    color: var(--tinta-2);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.service-features {
    list-style: none;
    margin-bottom: 1.5rem;
}

.service-features li {
    padding: 0.5rem 0;
    color: var(--tinta-2);
}

/* ========== PIE ========== */
footer {
    background: linear-gradient(180deg, var(--fondo-suave) 0%, var(--lavanda) 100%);
    color: var(--tinta-2);
    border-top: 1px solid var(--borde);
    padding: var(--seccion) var(--margen) 2rem;
}

.footer-container {
    max-width: var(--ancho);
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.footer-brand h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-xl);
    margin-bottom: 0.75rem;
}

.footer-brand h3 .icono { color: var(--acento); }
.footer-brand h3 .logo-icon { width: auto; height: 2rem; }

.logo-pie {
    display: block;
    width: auto;
    height: 1.8rem;
    margin: 0 auto 0.6rem;
}

.footer-brand .tagline {
    font-size: var(--t-m);
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 0.5rem;
}

.footer-brand .description {
    color: var(--tinta-3);
    font-size: var(--t-s);
    margin-bottom: 1rem;
}

.footer-column h4 {
    font-family: var(--fuente-texto);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 1rem;
}

.footer-column ul { list-style: none; }

.footer-column a {
    color: var(--tinta-2);
    text-decoration: none;
    display: inline-block;
    padding: 0.3rem 0;
    font-size: var(--t-s);
    transition: color 0.15s;
}

.footer-column a:hover { color: var(--azul); }

/* restos del pie antiguo que aún usa contacto.html */
.social-links { display: flex; gap: 0.75rem; }

.footer-newsletter p {
    color: var(--tinta-3);
    margin-bottom: 1rem;
    font-size: var(--t-s);
}

.footer-newsletter-form { display: flex; gap: 0.5rem; }

.footer-newsletter-form input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    font-size: var(--t-s);
    min-width: 0;
}

.footer-newsletter-form button {
    padding: 0.7rem 1rem;
    background: var(--acento);
    color: #fff;
    border: 0;
    border-radius: var(--radio-s);
    font-weight: 600;
    cursor: pointer;
}

.footer-bottom {
    max-width: var(--ancho);
    margin: 0 auto;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    color: var(--tinta-3);
    font-size: var(--t-xs);
}

/* ========== LLAMADAS A LA ACCIÓN ========== */
.cta-section {
    background: var(--degradado-suave);
    color: var(--tinta);
    padding: var(--seccion) var(--margen);
    text-align: center;
}

.cta-content {
    max-width: 44rem;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: var(--t-2xl);
    margin-bottom: 0.75rem;
}

.cta-content p {
    font-size: var(--t-m);
    color: var(--tinta-2);
    margin-bottom: 0.5rem;
}

/* ========== ADAPTACIÓN A PANTALLAS ========== */
@media (max-width: 1100px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Cabecera: hamburguesa cuando el menú no cabe en una línea (medido el 18-10-2026) */
@media (max-width: 1100px) {
    .cabecera-barra { gap: 1rem; }

    .menu-toggle { display: inline-flex; }

    /* el menú es un panel bajo la barra */
    #mainNav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0.75rem var(--margen) 1.25rem;
        background: var(--fondo);
        border-bottom: 1px solid var(--borde);
        box-shadow: 0 18px 30px -20px rgba(34, 29, 48, 0.35);
        max-height: calc(100dvh - var(--cabecera-alto));
        overflow-y: auto;
    }

    #mainNav.active { display: flex; }

    .nav-lista {
        flex-direction: column;
        align-items: stretch;
        gap: 0.125rem;
    }

    .nav-lista > li > a,
    .nav-desplegable-boton {
        width: 100%;
        justify-content: space-between;
        padding: 0.8rem 0.75rem;
        font-size: var(--t-m);
    }

    .nav-submenu {
        position: static;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0 0 0.25rem 0.75rem;
        background: none;
    }

    .nav-submenu::before { content: none; }

    .nav-submenu a { padding: 0.65rem 0.75rem; font-size: var(--t-m); }

    .auth-buttons,
    .user-menu { width: 100%; }

    .auth-buttons .btn-login,
    .user-btn { width: 100%; justify-content: center; padding: 0.8rem 1rem; }

    .user-dropdown {
        position: static;
        box-shadow: none;
        border: 0;
        margin-top: 0.25rem;
    }

    body.menu-abierto { overflow: hidden; }
}

@media (max-width: 968px) {

    .telegram-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .telegram-image { margin: 0 auto; }

    .service-card,
    .service-card-reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .newsletter-container {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .newsletter-form {
        width: 100%;
        max-width: 100%;
    }

    /* en columna, la base de 18rem sería altura */
    .newsletter-content,
    .newsletter-form { flex: none; }
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand { grid-column: 1 / -1; }

    .newsletter-form { flex-direction: column; }

    .newsletter-form input:not([type="checkbox"]),
    .newsletter-form .newsletter-privacidad { flex: none; }

    .newsletter-form button { width: 100%; }
}

/* ========== SESIÓN EN LA CABECERA ========== */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--fondo);
    color: var(--acento);
    border: 1px solid var(--lavanda-borde);
    padding: 0.5rem 0.95rem;
    border-radius: var(--radio-s);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-login:hover {
    background: var(--lavanda);
    border-color: var(--acento-claro);
    color: var(--acento-fuerte);
}

.btn-login .icono { width: 1.1rem; height: 1.1rem; vertical-align: 0; }

/* ========== MENÚ DE USUARIO ========== */
.user-menu { position: relative; }

.user-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--fondo);
    color: var(--tinta);
    border: 1px solid var(--borde);
    padding: 0.45rem 0.8rem;
    border-radius: var(--radio-s);
    cursor: pointer;
    font-size: var(--t-s);
    font-weight: 500;
    transition: background-color 0.15s;
}

.user-btn:hover { background: var(--lavanda); }

.user-btn .icono { width: 1.1rem; height: 1.1rem; vertical-align: 0; }

.user-icon {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lavanda);
    color: var(--acento);
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    min-width: 13rem;
    padding: 0.4rem;
    margin-top: 0.5rem;
    display: none;
    z-index: 1000;
}

.user-dropdown.active { display: block; }

.user-dropdown a,
.user-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radio-xs);
    text-align: left;
    color: var(--tinta-2);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--t-s);
    transition: background-color 0.15s;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
    background: var(--lavanda);
    color: var(--tinta);
}

.user-dropdown button {
    margin-top: 0.3rem;
    border-top: 1px solid var(--borde);
    border-radius: 0 0 var(--radio-xs) var(--radio-xs);
    color: var(--peligro);
}

/* ========== AUTH SECTION ========== */
.auth-section {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 5%;
    background: linear-gradient(135deg, var(--fondo-suave) 0%, #e9ecef 100%);
}

.auth-container {
    width: 100%;
    max-width: 500px;
}

.auth-box {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.auth-box h1 {
    font-size: 2rem;
    color: var(--tinta);
    margin-bottom: 0.5rem;
    text-align: center;
}

.auth-subtitle {
    text-align: center;
    color: var(--tinta-2);
    margin-bottom: 2rem;
}

/* ========== FORM STYLES ========== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.password-input {
    position: relative;
}

.password-input input {
    padding-right: 50px;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.toggle-password:hover {
    opacity: 1;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--tinta-2);
}

.checkbox-label input {
    width: auto;
    margin-top: 3px;
}

.checkbox-label a {
    color: var(--acento);
}

.forgot-password {
    color: var(--acento);
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-password:hover {
    text-decoration: underline;
}

.btn-full {
    width: 100%;
}

/* ========== AUTH DIVIDER ========== */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 2rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borde);
}

.auth-divider span {
    padding: 0 1rem;
    color: var(--tinta-3);
    font-size: 0.9rem;
}

/* ========== AUTH FOOTER ========== */
.auth-footer {
    text-align: center;
    color: var(--tinta-2);
}

.auth-footer a {
    color: var(--acento);
    font-weight: 600;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* ========== RESPONSIVE AUTH ========== */
@media (max-width: 768px) {
    .auth-buttons {
        display: none;
    }

    nav.active .auth-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 1rem;
    }

    .auth-box {
        padding: 2rem 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .auth-section {
        padding: 1rem;
    }

    .auth-box h1 {
        font-size: 1.5rem;
    }
}

/* ========== ACCOUNT SECTION ========== */
.account-section {
    padding: 3rem 5%;
    background: var(--fondo-suave);
    min-height: calc(100vh - 400px);
}

.account-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
}

/* ========== ACCOUNT SIDEBAR ========== */
.account-sidebar {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.user-avatar {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 1.5rem;
}

.avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--acento);
    border-radius: 50%;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.user-avatar h3 {
    color: var(--tinta);
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
}

.user-avatar p {
    color: var(--tinta-2);
    font-size: 0.85rem;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-nav a,
.account-nav button {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    color: var(--tinta-2);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
}

.account-nav a:hover,
.account-nav button:hover {
    background: var(--fondo-suave);
    color: var(--acento);
}

/* «Cerrar sesión» es un botón (no lleva a ninguna página) con el mismo aspecto que los enlaces */
.account-nav button {
    width: 100%;
    font: inherit;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.account-nav a.active {
    background: var(--acento);
    color: white;
}

.account-nav a span,
.account-nav button span {
    font-size: 1.2rem;
}

/* ========== ACCOUNT MAIN ========== */
.account-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.account-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* Aviso bajo un campo de formulario (contacto: datos de salud, 19-10-2026) */
.campo-aviso { margin-top: 0.5rem; font-size: 0.9rem; color: var(--tinta-2); line-height: 1.5; }

/* Borrar mi cuenta (19-10-2026) */
.cuenta-borrar { display: grid; gap: 1rem; border: 1px solid var(--peligro-borde); }
.cuenta-borrar h2 { color: var(--peligro); margin-bottom: 0; }
.cuenta-borrar p { color: var(--tinta-2); line-height: 1.6; }
.cuenta-borrar form { display: grid; gap: 1rem; }
.cuenta-borrar .submit-btn { background: var(--peligro-fondo); color: var(--peligro); border: 1px solid var(--peligro-borde); justify-self: start; width: auto; }
.cuenta-borrar .cuenta-borrar-confirmar { background: var(--peligro); color: #fff; border-color: var(--peligro); }

.account-card h2 {
    color: var(--tinta);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--borde);
    font-size: 1.3rem;
}

.form-hint {
    display: block;
    color: var(--tinta-3);
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.btn-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268);
}

.btn-secondary:hover {
    box-shadow: 0 10px 25px rgba(108, 117, 125, 0.4);
}

/* ========== ORDERS ========== */
.orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--borde);
}

.orders-header h2 {
    margin: 0;
    padding: 0;
    border: none;
}

.orders-filter select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-card {
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.order-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--fondo-suave);
    border-bottom: 1px solid var(--borde);
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.order-number {
    font-weight: 600;
    color: var(--tinta);
}

.order-date {
    font-size: 0.85rem;
    color: var(--tinta-2);
}

.order-status {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-pendiente {
    background: #fff3cd;
    color: #856404;
}

.status-confirmado {
    background: #d1ecf1;
    color: #0c5460;
}

.status-enviado {
    background: #d4edda;
    color: #155724;
}

.status-entregado {
    background: #d4edda;
    color: #155724;
}

.status-cancelado {
    background: #f8d7da;
    color: #721c24;
}

.order-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

.order-total span {
    color: var(--tinta-2);
    margin-right: 0.5rem;
}

.order-total strong {
    color: var(--acento);
    font-size: 1.2rem;
}

.btn-small {
    padding: 0.5rem 1rem;
    background: var(--acento);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.btn-small:hover {
    transform: translateY(-2px);
}

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 3rem;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h3 {
    color: var(--tinta);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--tinta-2);
    margin-bottom: 1.5rem;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: var(--tinta-2);
}

.no-results {
    text-align: center;
    padding: 2rem;
    color: var(--tinta-2);
}

/* ========== RESPONSIVE ACCOUNT ========== */
@media (max-width: 968px) {
    .account-container {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        position: static;
    }

    .orders-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .account-card {
        padding: 1.5rem;
    }

    .order-body {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}
/* ========== SEARCH SECTION ========== */
.search-section {
    padding: 2rem 5%;
    background: var(--fondo-suave);
    min-height: calc(100vh - 300px);
}

.search-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
}

/* ========== FILTERS SIDEBAR ========== */
.filters-sidebar {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: fit-content;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--borde);
}

.filters-header h2 {
    margin: 0;
    font-size: 1.17em;
    color: var(--tinta);
}

.btn-clear-filters {
    background: none;
    border: none;
    color: var(--acento);
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-clear-filters:hover {
    text-decoration: underline;
}

.filter-group {
    margin-bottom: 1.2rem;
}

.filter-group label,
.filter-group .filter-rotulo {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--tinta);
    font-size: 0.9rem;
}

.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="number"] {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 0.9rem;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--acento);
}

.price-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-range input {
    width: calc(50% - 1rem);
}

.price-range span {
    color: var(--tinta-2);
}

/* Multiselect */
.filter-multiselect {
    max-height: 200px;
    overflow: hidden;
}

.multiselect-container {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 0.5rem;
}

.checkbox-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    cursor: pointer;
    font-size: 0.85rem;
}

.checkbox-filter input {
    width: auto;
}

.btn-show-more {
    background: none;
    border: none;
    color: var(--acento);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.5rem 0;
    width: 100%;
    text-align: left;
}

.btn-apply-filters {
    width: 100%;
    padding: 0.8rem;
    background: var(--acento);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: transform 0.3s;
}

.btn-apply-filters:hover {
    transform: translateY(-2px);
}

/* ========== PRODUCTS MAIN ========== */
.products-main {
    position: relative;
}

.search-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-stats span {
    color: var(--tinta-2);
    font-size: 0.95rem;
}

.sort-options {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-options label {
    color: var(--tinta-2);
    font-size: 0.9rem;
}

.sort-options select {
    padding: 0.5rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
}

.btn-mobile-filters {
    display: none;
    width: 100%;
    padding: 0.8rem;
    background: var(--acento);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1rem;
}

/* ========== PRODUCTS GRID ========== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.product-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--fondo-suave);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}

.discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.product-info {
    padding: 1.2rem;
}

.product-brand {
    color: var(--acento);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.product-title {
    font-size: 1rem;
    color: var(--tinta);
    margin: 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-category {
    font-size: 0.8rem;
    color: var(--tinta-3);
    margin-bottom: 0.8rem;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.price-current {
    font-size: 1.3rem;
    font-weight: bold;
    color: #2ecc71;
}

.price-old {
    font-size: 0.95rem;
    color: var(--tinta-3);
    text-decoration: line-through;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-details,
.btn-amazon {
    flex: 1;
    padding: 0.6rem;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-details {
    background: var(--fondo-suave);
    color: var(--tinta);
    border: 1px solid var(--borde);
}

.btn-details:hover {
    background: var(--acento);
    color: white;
    border-color: var(--acento);
}

.btn-amazon {
    background: #ff9900;
    color: white;
    border: none;
}

.btn-amazon:hover {
    background: #e68a00;
}

/* ========== NO PRODUCTS ========== */
.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 15px;
}

.no-products-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-products h3 {
    color: var(--tinta);
    margin-bottom: 0.5rem;
}

.no-products p {
    color: var(--tinta-2);
}

/* ========== PAGINATION ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pagination button {
    padding: 0.6rem 1rem;
    border: 1px solid var(--borde);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.pagination button:hover {
    background: var(--acento);
    color: white;
    border-color: var(--acento);
}

.pagination button.active {
    background: var(--acento);
    color: white;
    border-color: var(--acento);
}

.pagination-dots {
    color: var(--tinta-2);
}

/* ========== LOADING ========== */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 15px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--acento);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    text-align: center;
    padding: 2rem;
    color: var(--peligro);
    background: var(--peligro-fondo);
    border-radius: 10px;
    grid-column: 1 / -1;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 968px) {
    .search-container {
        grid-template-columns: 1fr;
    }

    .filters-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        max-height: 100vh;
        z-index: 1001;
        transition: left 0.3s;
        border-radius: 0;
    }

    .filters-sidebar.mobile-open {
        left: 0;
    }

    .btn-mobile-filters {
        display: block;
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .product-image {
        height: 150px;
    }

    .product-info {
        padding: 0.8rem;
    }

    .product-title {
        font-size: 0.9rem;
    }

    .product-actions {
        flex-direction: column;
    }

    .search-stats {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* Etiqueta de producto sanitario en tarjetas de listado */
.etiqueta-sanitario {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #8a4b00;
    background: #fff1d6;
    border: 1px solid #f0c27a;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    margin: 0.2rem 0;
}

/* ===== Buscador en lenguaje natural ===== */
.motor-caja { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.motor-caja input { flex: 1 1 260px; min-width: 0; padding: 0.85rem 1.1rem; border: 2px solid #d9c8ee; border-radius: 999px; font-size: 1rem; }
.motor-caja input:focus { outline: none; border-color: var(--acento); }
.motor-caja button { padding: 0.85rem 1.6rem; border: 0; border-radius: 999px; background: var(--acento); color: #fff; font-weight: 600; cursor: pointer; }
.motor-ayuda { font-size: 0.85rem; color: var(--tinta-2); margin: -0.6rem 0 1rem; }
.motor-respuesta { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.motor-respuesta:empty { display: none; }
.motor-avisos { background: #fff8e6; border: 2px solid #f0b429; border-radius: 12px; padding: 0.9rem 1.2rem; }
.motor-avisos h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #7a4b00; }
.motor-avisos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.motor-avisos li { border-left: 4px solid #f0b429; padding-left: 0.7rem; }
.motor-avisos li p { margin: 0; }
.motor-entendido p { margin: 0.2rem 0; }
.motor-nota { font-size: 0.88rem; color: var(--tinta-2); }
.motor-resultados h3 { margin: 0 0 0.75rem; }
.motor-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.motor-producto { display: flex; gap: 0.8rem; background: #fff; border-radius: 12px; padding: 0.8rem; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.motor-producto-imagen img { width: 80px; height: 80px; object-fit: contain; border-radius: 8px; background: var(--fondo-suave); }
.motor-producto-info { flex: 1; min-width: 0; }
.motor-producto-info h4 { margin: 0.15rem 0 0.3rem; font-size: 0.95rem; }
.motor-producto-info h4 a { color: var(--tinta); text-decoration: none; }
.motor-producto-marca { font-size: 0.7rem; text-transform: uppercase; font-weight: 600; color: var(--acento); }
.motor-producto-info p { margin: 0.2rem 0; font-size: 0.85rem; color: var(--tinta-2); }
.motor-producto-aviso { color: #8a4b00 !important; }
.motor-producto-consejo { color: #1f618d !important; }
.motor-descartados { background: #fff; border-radius: 12px; padding: 0.8rem 1.1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.motor-descartados h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.motor-grupo { border-top: 1px solid var(--borde); padding: 0.5rem 0; }
.motor-grupo summary { cursor: pointer; }
.motor-grupo-n { color: var(--acento); font-weight: 600; }
.motor-grupo ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.motor-grupo li { margin: 0.25rem 0; font-size: 0.9rem; }
.motor-grupo-mas { margin: 0.3rem 0 0 1.2rem; font-size: 0.85rem; color: var(--tinta-2); }
.motor-descartado-marca { font-size: 0.8rem; color: var(--acento); margin-left: 0.3rem; }
.motor-cargando, .motor-vacio, .motor-error { color: var(--tinta-2); }
.motor-error { color: #a5281b; }
.pie-avisos { margin: 0.5rem 0; font-size: 0.9rem; color: var(--tinta-2); font-style: italic; text-align: center; }

/* Secciones sin contenido todavía (blog, guías): solo cabecera y este aviso */
.proximamente {
    max-width: 640px;
    margin: 3rem auto 4rem;
    padding: 3rem 2rem;
    text-align: center;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.proximamente-icono {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.proximamente h2 {
    color: var(--acento-fuerte);
    margin-bottom: 0.8rem;
}

.proximamente p {
    color: var(--tinta-2);
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .proximamente {
        margin: 2rem 16px 3rem;
        padding: 2rem 1.2rem;
    }
}

/* Lo que lleva el atributo hidden no se ve nunca, aunque su clase le dé otro display (17-10-2026) */
[hidden] {
    display: none !important;
}

/* ========== GUÍAS DE CATEGORÍA: barra lateral en móvil ==========
   Los títulos largos de producto empujaban la página hacia los lados (ya pasaba antes del 18-10-2026) */
.category-main,
.category-sidebar,
.sidebar-product-card,
.sidebar-product-info { min-width: 0; }

.sidebar-product-title { overflow-wrap: anywhere; }

@media (max-width: 1024px) {
    body .category-content { grid-template-columns: minmax(0, 1fr); }
}

/* Tablas de las guías: si no caben, se desplazan dentro de su hueco y no ensanchan la página */
.category-main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* pies antiguos sin columnas (contacto, servicios…): sin hueco vacío encima del copyright */
.footer-container:not(:has(*)) { display: none; }
footer:not(:has(.footer-brand, .footer-column)) { padding-top: 2.5rem; }
footer:not(:has(.footer-brand, .footer-column)) .footer-bottom { border-top: 0; padding-top: 0; }

/* Resultados del buscador: por qué sale cada producto (18-10-2026) */
.motor-producto-info p.motor-producto-porque {
    color: var(--acento-fuerte);
    font-size: var(--t-xs);
    line-height: 1.4;
}

/* Con el tamaño base de 18 px (18-10-2026) algunas palabras largas ya no cabían en el móvil */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
body .category-hero h1 { font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.5rem); }
.subcat-card { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 768px) {
    body .subcategories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.legal-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Imagen propia del producto (20-10-2026, js/imagen-propia.js): envase dibujado con la marca y el nombre. Ocupa el
   mismo sitio que la foto; por debajo de 120 px de ancho solo el envase */
.imagen-propia {
    container-type: size;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 0.9rem 0.8rem;
    background: var(--degradado-suave);
    text-align: center;
    overflow: hidden;
}
.imagen-propia-texto { order: 2; display: flex; flex-direction: column; gap: 0.15rem; max-width: 100%; }   /* debajo: arriba está el botón de favorito */
.imagen-propia-marca {
    font-family: var(--fuente-texto);
    font-size: max(9px, 5.6cqmin);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acento);
}
.imagen-propia-nombre {
    font-family: var(--fuente-titulos);
    font-size: max(11px, 8cqmin);
    font-weight: 600;
    line-height: 1.15;
    color: var(--tinta);
    text-wrap: balance;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.imagen-propia-envase { position: relative; flex: 1 1 0; min-height: 0; width: 100%; }
.imagen-propia-envase svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@container (max-width: 119px) {
    .imagen-propia-texto { display: none; }
}
.product-image-section .imagen-propia { max-width: 400px; height: auto; aspect-ratio: 1; border-radius: var(--radio); }
.motor-producto-imagen .imagen-propia { width: 80px; height: 80px; border-radius: 8px; padding: 6px; }
.sidebar-product-card .imagen-propia { width: 60px; height: 60px; flex: none; border-radius: 8px; padding: 5px; }

/* Foto de la marca en tarjeta lavanda (20-10-2026, fotoProducto en js/imagen-propia.js). La foto se enlaza tal cual;
   multiply funde su fondo blanco con el lavanda de la tarjeta (lo transparente deja ver la tarjeta) y apenas cambia
   los colores del producto. Mismo encuadre en todas: caja fija, foto centrada con margen y entera (contain) */
.foto-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.9rem;
    background: var(--lavanda);
    isolation: isolate;
    overflow: hidden;
}
.foto-marca img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    object-fit: contain;
    background: none;
    border-radius: 0;
    mix-blend-mode: multiply;
}
.product-image .foto-marca { padding: 1.1rem; }
.foto-marca.favorito-image { background: var(--lavanda); }
.product-image-section .foto-marca { max-width: 400px; height: auto; aspect-ratio: 1; padding: 1.75rem; border-radius: var(--radio); }
.motor-producto-imagen .foto-marca { width: 80px; height: 80px; flex: none; padding: 6px; border-radius: 8px; }
.sidebar-product-card .foto-marca { width: 60px; height: 60px; flex: none; padding: 5px; border-radius: 8px; }
/* Foto de ambiente (modelo, manos, textura…), cuando el producto no tiene foto del envase: entera, ocupando la
   tarjeta (con un filo de 0,5 rem), con las esquinas redondeadas y sin mezcla */
.foto-marca.foto-ambiente { padding: 0.5rem; }
.foto-marca.foto-ambiente img { object-fit: cover; mix-blend-mode: normal; border-radius: var(--radio-s); }
/* Con recorte (rectángulo con márgenes transparentes): el marco recorta y redondea; la foto, agrandada, va dentro */
.foto-recorte { position: relative; display: block; flex: 1 1 auto; align-self: stretch; min-width: 0; overflow: hidden;
                 border-radius: var(--radio-s); }
.foto-marca .foto-recorte img { position: absolute; max-width: none; max-height: none; border-radius: 0; }
.motor-producto-imagen .foto-marca.foto-ambiente,
.sidebar-product-card .foto-marca.foto-ambiente { padding: 0; }
.motor-producto-imagen .foto-marca.foto-ambiente img,
.sidebar-product-card .foto-marca.foto-ambiente img,
.motor-producto-imagen .foto-recorte,
.sidebar-product-card .foto-recorte { border-radius: 8px; }

/* ========== COMPARADOR Y PRODUCTOS PARECIDOS (22-10-2026; js/comparar.js) ========== */
.btn-comparar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--lavanda-borde);
    border-radius: var(--radio-s);
    background: var(--fondo);
    color: var(--acento-fuerte);
    font: inherit;
    font-size: var(--t-s);
    font-weight: 600;
    cursor: pointer;
}
.btn-comparar:hover { border-color: var(--acento); }
.btn-comparar[aria-pressed="true"] { background: var(--lavanda); border-color: var(--acento); }
.btn-comparar .icono { width: 1.1em; height: 1.1em; }
.product-actions .btn-comparar { flex: none; }

/* La barra fija de abajo: cuántos hay y el enlace a /comparar */
.comparar-barra {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    border: 1px solid var(--lavanda-borde);
    border-radius: 999px;
    background: var(--fondo);
    box-shadow: var(--sombra-alta);
    color: var(--tinta);
    font-size: var(--t-s);
    font-weight: 600;
}
.comparar-barra .btn { padding: 0.55rem 1.1rem; border-radius: 999px; }
.comparar-barra-vaciar { border: 0; background: none; color: var(--tinta-3); font: inherit; font-weight: 500; cursor: pointer; padding: 0.4rem; }
@media (max-width: 480px) {
    .comparar-barra { left: 1rem; right: 1rem; transform: none; justify-content: space-between; border-radius: var(--radio); }
}

/* Productos parecidos en la ficha */
.parecidos-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* en el móvil, dos por fila */
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.parecido {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: var(--fondo);
    overflow: hidden;
}
.parecido a { color: var(--tinta); text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.parecido a:hover .parecido-nombre { color: var(--acento-fuerte); }
.parecido .foto-marca, .parecido .imagen-propia { height: auto; aspect-ratio: 1; padding: 0.75rem; }
.parecido-texto { display: grid; gap: 0.15rem; padding: 0.6rem 0.75rem 0.75rem; }
.parecido-marca { color: var(--tinta-3); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.parecido-nombre { font-size: var(--t-s); font-weight: 600; line-height: 1.3; }
.parecidos-nota { color: var(--tinta-3); font-size: 0.85rem; margin: 0.75rem 0 0; }
@media (min-width: 640px) { .parecidos-lista { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); } }