/* vv-ecommerce — sistema base
   Los tokens se reemplazan por tienda. No usar valores mágicos fuera de :root. */

:root {
    --paper: #faf7f2;
    --surface: #fffdf9;
    --ink: #1a1815;
    --muted: #6b645b;
    --line: #e6dfd4;
    --accent: #9c3d21;
    --accent-ink: #fffaf6;
    --ok: #2f6b4f;

    /* Base oscura para piezas que siempre llevan texto blanco encima. */
    --night: #14110e;

    color-scheme: light;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;

    --shadow-sm: 0 1px 2px rgb(26 24 21 / .06);
    --shadow: 0 18px 40px -28px rgb(26 24 21 / .45);

    --wrap: 76rem;
    --gutter: clamp(1rem, 4vw, 2rem);

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-scale: 1;
    --leading: 1.6;
    --tracking: normal;

    --step--1: clamp(.8rem, .77rem + .15vw, .875rem);
    --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
    --step-1: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
    --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
    --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* La escala tipográfica de Apariencia ajusta la raíz: como el resto de
       medidas usa rem, todo el texto crece o decrece en proporción. */
    font-size: calc(100% * var(--font-scale));
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: var(--leading);
    letter-spacing: var(--tracking);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3 {
    margin: 0 0 .55em;
    font-family: var(--font-headings, var(--font));
    line-height: 1.12;
    letter-spacing: -.025em;
    text-wrap: balance;
}

h1 {
    font-size: var(--step-3);
}

h2 {
    font-size: var(--step-2);
}

h3 {
    font-size: var(--step-1);
}

p {
    margin: 0 0 1em;
    text-wrap: pretty;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

code {
    font-size: .9em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .1em .35em;
}

.wrap {
    width: min(100% - (var(--gutter) * 2), var(--wrap));
    margin-inline: auto;
}

.skip {
    position: absolute;
    left: -9999px;
    top: .75rem;
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    z-index: 100;
}

.skip:focus {
    left: var(--gutter);
}

/* Contenido solo para lectores de pantalla y buscadores. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--header-bg, var(--paper));
    backdrop-filter: var(--header-blur, none);
    border-bottom: 1px solid var(--line);
}

.header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
}

/* Acciones de la cabecera: tema y menú móvil, siempre a la derecha. */
.header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-self: end;
}

.header__inner > .brand {
    justify-self: start;
}

/* Variantes de cabecera que fija el tema. */
body.header--compact .header__inner {
    min-height: 3.5rem;
}

body.header--compact .brand__logo {
    width: auto;
    /* En cabecera compacta el logo nunca crece más allá de la franja. */
    max-height: min(var(--logo-h, 2.65rem), 2.2rem);
}

@media (min-width: 60rem) {
    body.header--centered .header__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: .6rem;
        min-height: 0;
        padding-block: .9rem;
        text-align: center;
    }

    body.header--centered .header__actions {
        justify-self: center;
    }

    body.header--centered .nav--desktop {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .45rem;
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-headings, var(--font));
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
    text-decoration: none;
}

.brand__logo {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    /* El ancho se deriva de la proporción del archivo, con dos topes: el
       tamaño elegido en Apariencia y la mitad del viewport en móvil. */
    max-width: min(16rem, 50vw);
    max-height: var(--logo-h, 2.65rem);
    object-fit: contain;
}

/* Dos variantes de logo: el tema decide cuál se pinta. La que no
   corresponde se oculta con display, así tampoco la leen los lectores de
   pantalla ni se descarga dos veces el mismo archivo cuando solo hay uno
   (Theme::logoSources() repite la ruta). */
.brand__logo--dark {
    display: none;
}

html[data-theme="dark"] .brand__logo--light {
    display: none;
}

html[data-theme="dark"] .brand__logo--dark {
    display: block;
}

/* En el pie el fondo es el color de acento, así que la variante se
   intercambia: el logo de letras oscuras se usa con el tema oscuro y el de
   letras blancas con el tema claro. Se usa doble clase porque `.footer__logo`
   se define más abajo en este archivo con la misma especificidad y, a igual
   peso, gana la última regla. */
.footer__logo.footer__logo--light {
    display: none;
}

.footer__logo.footer__logo--dark {
    display: block;
}

html[data-theme="dark"] .footer__logo.footer__logo--light {
    display: block;
}

html[data-theme="dark"] .footer__logo.footer__logo--dark {
    display: none;
}

/* Con logo, la marca se apila: logo arriba y subtítulo debajo. */
.brand--logo {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.brand--logo .brand__name {
    align-items: flex-start;
}

/* Debajo del logo el subtítulo puede partirse en dos líneas en pantallas
   angostas; en escritorio se mantiene en una. */
.brand--logo .brand__tagline {
    white-space: normal;
    text-overflow: clip;
}

body.header--centered .brand--logo,
body.header--centered .brand--logo .brand__name {
    align-items: center;
}

.brand__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.brand__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subtítulo de la cabecera: mismo eje que el nombre, en cuerpo menor y con
   un respiro sutil respecto del título. */
.brand__tagline {
    overflow: hidden;
    margin-top: .18rem;
    color: var(--muted);
    font-family: var(--font);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand__mark {
    width: .55rem;
    height: .55rem;
    border-radius: 2px;
    background: var(--accent);
    transform: rotate(45deg);
}

/* Botón de modo claro/oscuro: mismo lenguaje que el resto de controles. */
.theme-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.theme-toggle:hover {
    border-color: color-mix(in srgb, var(--ink) 28%, var(--line));
    background: color-mix(in srgb, var(--ink) 7%, var(--surface));
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
}

.theme-toggle__sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle__sun {
    display: block;
}

html[data-theme="dark"] .theme-toggle__moon {
    display: none;
}

/* Barra superior: contacto y redes por encima de la cabecera. */
.topbar {
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .78rem;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.35rem;
    padding-block: .1rem;
}

.header-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-contact__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--accent-ink) 86%, transparent);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.header-contact__item:hover,
.header-contact__item:focus-visible {
    background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
    color: var(--accent-ink);
}

.header-contact__icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.header-contact__text {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En pantallas estrechas la barra muestra solo iconos y la cabecera se
   queda con dos columnas: marca y acciones. */
@media (max-width: 59.99rem) {
    .header__inner {
        grid-template-columns: 1fr auto;
        padding-block: .55rem;
    }

    .header-contact__text {
        display: none;
    }
}
.nav--desktop {
    display: none;
    align-self: stretch;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    column-gap: 1.4rem;
    row-gap: .15rem;
    font-size: .95rem;
}

.nav--desktop a {
    color: var(--muted);
    text-decoration: none;
}

.nav--desktop a:hover {
    color: var(--ink);
}

.nav__group {
    position: relative;
    display: flex;
    align-items: center;
}

.nav__group-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--muted);
    text-decoration: none;
}

.nav__group-link::after {
    content: "";
    width: .35rem;
    height: .35rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .18s ease;
}

.nav__group:hover .nav__group-link,
.nav__group:focus-within .nav__group-link {
    color: var(--ink);
}

.nav__group:hover .nav__group-link::after,
.nav__group:focus-within .nav__group-link::after {
    transform: rotate(225deg) translateY(-1px);
}

.menu__group > summary::-webkit-details-marker {
    display: none;
}

.nav--desktop .nav__home {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
}

.nav--desktop .nav__home:hover,
.nav--desktop .nav__home:focus-visible {
    border-color: var(--ink);
    background: var(--paper);
    color: var(--ink);
}

.nav__home svg {
    display: block;
}

/* Megamenú de categorías: tres columnas (categorías padre, subcategorías o
   productos, y espacio promocional). Se abre al pasar el puntero y al llegar
   con el teclado; no hay clic de por medio ni zona muerta entre el enlace y
   el panel, porque el hueco forma parte del área que mantiene el hover. */

.nav__group--empty .nav__group-link::after {
    display: none;
}

.nav__group--mega {
    position: static;
    /* Ocupa todo el alto de la cabecera y gana algo de ancho a los lados:
       el puntero baja desde el enlace hasta el panel sin salir de la zona
       de hover. */
    align-self: stretch;
    padding-inline: .6rem;
    margin-inline: -.6rem;
}

.nav__mega-shell {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    padding-top: .65rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.35rem);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.nav__group--mega:hover .nav__mega-shell,
.nav__group--mega:focus-within .nav__mega-shell,
.nav__group--mega.is-open .nav__mega-shell {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

/* El panel ocupa solo su ancho: si toda la franja de la cabecera fuese
   interactiva, el menú seguiría abierto con el puntero a los lados. */
.nav__mega {
    pointer-events: auto;
}

/* Puente de hover del ancho del panel, para cruzar el hueco entre la
   cabecera y el panel sin apuntar con precisión. */
.nav__mega-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(66rem, calc(100vw - 2rem));
    height: .65rem;
    transform: translateX(-50%);
    pointer-events: auto;
}

/* Mientras el cierre está en espera el disparador sigue marcado como activo. */
.nav__group--mega.is-open .nav__group-link {
    color: var(--ink);
}

.nav__group--mega.is-open .nav__group-link::after {
    transform: rotate(225deg) translateY(-1px);
}

/* Escape cierra el menú aunque el foco siga en el disparador. */
.nav__group--mega.is-suppressed .nav__mega-shell {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Páginas anidadas: el superior es un enlace normal y sus hijas se abren en
   un desplegable, igual que Categorías (puntero y teclado). */
.nav__group--pages {
    align-self: stretch;
}

.nav__pages-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    display: grid;
    gap: .1rem;
    min-width: 15rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: .4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, .3rem);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.nav__group--pages:hover .nav__pages-menu,
.nav__group--pages:focus-within .nav__pages-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
    transition-delay: 0s;
}

/* Doble clase para ganar a `.nav--desktop a`. */
.nav__group--pages .nav__pages-item {
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .9rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__group--pages .nav__pages-item:hover,
.nav__group--pages .nav__pages-item:focus-visible {
    background: var(--paper);
    color: var(--ink);
}

.nav__mega {
    display: grid;
    grid-template-columns: minmax(15rem, .82fr) minmax(17rem, 1.18fr) minmax(13rem, 15rem);
    width: min(66rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 6rem));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-align: left;
}

.nav__mega-col {
    min-width: 0;
    min-height: 0;
    padding: 1.1rem 1.1rem 1rem;
    overflow-y: auto;
}

.nav__mega-col--roots {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 60%, var(--surface));
}

.nav__mega-col--panel {
    display: flex;
    flex-direction: column;
    padding-inline: 1.25rem;
}

.nav__mega-kicker {
    margin: 0 0 .5rem;
    padding-inline: .5rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mega-roots {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Separación sutil entre categorías padre, tal como se pidió: una línea
   horizontal de un solo píxel dentro de la primera columna. */
.mega-roots li + li {
    border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

.nav__mega .mega-root {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .5rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
}

.nav__mega .mega-root:hover,
.nav__mega .mega-root:focus-visible,
.nav__mega .mega-root.is-active {
    background: var(--surface);
    color: var(--accent);
}

.mega-root__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    transition: color .15s ease, border-color .15s ease;
}

.nav__mega .mega-root:hover .mega-root__icon,
.nav__mega .mega-root:focus-visible .mega-root__icon,
.nav__mega .mega-root.is-active .mega-root__icon {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--accent);
}

.mega-root__svg {
    width: 1.1rem;
    height: 1.1rem;
}

.mega-root__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-root__count {
    margin-left: auto;
    color: var(--muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.mega-root__chev {
    flex: 0 0 auto;
    width: .38rem;
    height: .38rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .45;
    transform: rotate(-45deg);
}

.mega-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mega-panel[hidden] {
    display: none;
}

.mega-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .5rem .45rem;
}

.mega-panel__title {
    margin: 0;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 600;
}

.mega-panel__meta {
    margin: 0;
    color: var(--muted);
    font-size: .75rem;
    white-space: nowrap;
}

.mega-panel__empty {
    margin: .25rem .5rem 1rem;
    color: var(--muted);
    font-size: .85rem;
}

.mega-list {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.nav__mega .mega-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem .5rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .9rem;
    text-decoration: none;
}

.nav__mega .mega-list a:hover,
.nav__mega .mega-list a:focus-visible {
    background: var(--paper);
    color: var(--accent);
}

.mega-list__count {
    margin-left: auto;
    color: var(--muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.mega-product__media {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    object-fit: cover;
}

.mega-product__media--empty {
    position: relative;
}

.mega-product__media--empty::after {
    content: "";
    position: absolute;
    inset: 35%;
    border: 1px solid var(--muted);
    border-radius: 2px;
    opacity: .5;
}

.mega-product__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-product__price {
    margin-left: auto;
    color: var(--muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nav__mega .mega-all {
    display: block;
    flex: 0 0 auto;
    margin-top: .45rem;
    padding: .6rem .5rem 0;
    border-top: 1px solid var(--line);
    color: var(--accent);
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
}

.nav__mega .mega-all:hover,
.nav__mega .mega-all:focus-visible {
    text-decoration: underline;
}

.mega-promo {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.2rem;
    border-left: 1px solid var(--line);
    background:
        radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
        var(--paper);
}

.mega-promo__kicker {
    margin: 0;
    color: var(--accent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mega-promo__badge {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin: .35rem 0 .5rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 999px;
    color: var(--accent);
}

.mega-promo__title {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.mega-promo__text {
    margin: 0;
    color: var(--muted);
    font-size: .83rem;
}

.nav__mega .mega-promo__cta {
    margin-top: auto;
    padding-top: .5rem;
    color: var(--accent);
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
}

.nav__mega .mega-promo__cta:hover,
.nav__mega .mega-promo__cta:focus-visible {
    text-decoration: underline;
}

@media (max-width: 74rem) {
    .nav__mega {
        grid-template-columns: minmax(13rem, .9fr) minmax(14rem, 1.1fr) minmax(11rem, 13rem);
    }

    .nav--desktop {
        column-gap: 1.1rem;
        font-size: .92rem;
    }
}

.menu__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .8rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.menu__group > summary:hover {
    background: var(--paper);
}

.menu__group > summary::after {
    content: "+";
    color: var(--muted);
}

.menu__group[open] > summary::after {
    content: "−";
}

/* Categorías dentro del menú móvil: cada una se abre por su cuenta. */
.menu__sub > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.menu__sub > summary::-webkit-details-marker {
    display: none;
}

.menu__sub > summary:hover {
    background: var(--paper);
}

.menu__sub > summary::after {
    content: "+";
    color: var(--muted);
    font-weight: 400;
}

.menu__sub[open] > summary::after {
    content: "−";
}

.menu__sub-list {
    display: grid;
    gap: .1rem;
    margin-left: 1.15rem;
    padding-left: .55rem;
    border-left: 1px solid var(--line);
}

.menu__sub-list .menu__child {
    padding-left: .8rem;
}

/* Páginas anidadas en el menú móvil: el nivel ya está marcado por la raya
   vertical, así que no hace falta el margen extra del submenú de categorías. */
.menu__panel > .menu__sub--pages > .menu__sub-list {
    margin-left: .8rem;
}

.menu__submenu {
    display: grid;
    gap: .1rem;
    padding-left: .8rem;
}

.menu__submenu a {
    padding: .55rem .8rem;
    font-size: .92rem;
}

.menu__home {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.menu__home svg {
    color: var(--muted);
}

.menu__panel .menu__parent {
    font-weight: 600;
}

.menu__panel .menu__child {
    padding-left: 1.55rem;
    color: var(--muted);
    font-size: .88rem;
}

.menu {
    position: relative;
}

.menu__button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.menu__button::-webkit-details-marker {
    display: none;
}

.menu[open] .menu__button {
    border-color: var(--ink);
}

.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .6rem);
    width: min(19rem, calc(100vw - (var(--gutter) * 2)));
    max-height: calc(100dvh - 6rem);
    padding: .4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.menu__panel a {
    display: block;
    padding: .7rem .8rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
}

.menu__panel a:hover {
    background: var(--paper);
}

/* Hero y secciones */

.hero {
    padding-block: clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 2rem);
}

.eyebrow {
    margin-bottom: .9rem;
    font-family: var(--font-subheadings, var(--font));
    color: var(--accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 18ch;
}

.hero__lead {
    max-width: 48ch;
    margin-top: 1rem;
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1.45;
}

.hero__actions {
    margin-top: 1.6rem;
}

/* Hero con slider */

.hero--slider {
    --hero-box-gap: clamp(1rem, 3vw, 2rem);
    position: relative;
    padding: 0;
    overflow: clip;
    background: var(--night);
}

.hero--slider.is-boxed {
    background: var(--paper);
}

.hero-slider {
    position: relative;
    display: grid;
}

.hero-slide {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    align-items: end;
    min-height: clamp(26rem, 62vw, 40rem);
    background: var(--night);
    color: #fff;
}

.hero-slide--boxed {
    width: min(100% - (var(--gutter) * 2), var(--wrap));
    margin-block: var(--hero-box-gap);
    margin-inline: auto;
    min-height: clamp(22rem, 48vw, 34rem);
    border-radius: var(--radius-lg);
    overflow: clip;
    box-shadow: var(--shadow);
}

.hero-slide--boxed .hero-slide__content.wrap {
    width: 100%;
    padding-inline: var(--gutter);
}

.hero-slide[hidden] {
    display: none;
}

.hero-slide__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .42) 48%, rgb(0 0 0 / .12) 100%);
}

.hero-slide__content {
    position: relative;
    z-index: 1;
    padding-block: clamp(4rem, 10vw, 7rem) clamp(4rem, 8vw, 5.5rem);
}

.hero-slide h1 {
    max-width: 20ch;
    color: #fff;
}

.hero-slide .eyebrow {
    color: rgb(255 255 255 / .78);
}

.hero-slide .hero__lead {
    color: rgb(255 255 255 / .86);
}

.hero-slide.is-entering {
    z-index: 2;
}

.hero-slide.is-leaving {
    z-index: 1;
    pointer-events: none;
}

.hero--effect-fade .hero-slide.is-entering {
    animation: hero-fade-in var(--hero-transition, .7s) ease both;
}

.hero--effect-fade .hero-slide.is-leaving {
    animation: hero-fade-out var(--hero-transition, .7s) ease both;
}

.hero--effect-slide .hero-slide.is-entering {
    animation: hero-fade-in var(--hero-transition, .7s) ease both;
}

.hero--effect-slide .hero-slide.is-leaving {
    animation: hero-fade-out var(--hero-transition, .7s) ease both;
}

.hero--effect-slide .hero-slide.is-entering .hero-slide__image {
    animation: hero-image-in var(--hero-transition, .7s) cubic-bezier(.22, .61, .36, 1) both;
}

.hero--effect-slide .hero-slide.is-leaving .hero-slide__image {
    animation: hero-image-out var(--hero-transition, .7s) cubic-bezier(.22, .61, .36, 1) both;
}

.hero--effect-slide .hero-slide.is-entering .hero-slide__content {
    animation: hero-content-in var(--hero-transition, .7s) cubic-bezier(.22, .61, .36, 1) both;
}

.hero--effect-slide .hero-slide.is-leaving .hero-slide__content {
    animation: hero-content-out var(--hero-transition, .7s) cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hero-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes hero-image-in {
    from {
        transform: translateX(2.5%) scale(1.06);
    }

    to {
        transform: none;
    }
}

@keyframes hero-image-out {
    from {
        transform: none;
    }

    to {
        transform: translateX(-2.5%) scale(1.06);
    }
}

@keyframes hero-content-in {
    from {
        opacity: 0;
        transform: translateX(2rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hero-content-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateX(-1.5rem);
    }
}

.hero-slider__controls[hidden] {
    display: none;
}

.hero-slider__controls {
    position: absolute;
    right: var(--gutter);
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem;
    background: rgb(0 0 0 / .35);
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.hero--slider.is-boxed .hero-slider__controls {
    right: max(calc(var(--gutter) + .75rem), calc((100% - var(--wrap)) / 2 + .75rem));
    bottom: calc(var(--hero-box-gap) + 1rem);
}

.hero-slider__arrow {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
    background: rgb(255 255 255 / .16);
}

.hero-slider__dots {
    display: flex;
    gap: .25rem;
}

.hero-slider__dots button {
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .38);
    cursor: pointer;
}

.hero-slider__dots button[aria-current="true"] {
    background: #fff;
}

.hero-slider__dots button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Índice de secciones de la portada */

.page-index {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.page-index__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    row-gap: .5rem;
    padding-block: .55rem;
    min-width: 0;
}

.page-index__links {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    gap: .35rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* En móvil la fila de enlaces no cabe: se convierte en una tira que avanza
   dentro del ancho del contenedor, sin arrastrar la página entera. */
@media (max-width: 59.99rem) {
    .page-index__links {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-padding-inline: .25rem;
    }

    .page-index__links::-webkit-scrollbar {
        display: none;
    }

    .page-index__links li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

.page-index__links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    padding: .3rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.page-index__links a:hover {
    background: var(--paper);
    border-color: var(--muted);
}

.page-index__links a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Llamada a la acción */

.cta-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.cta-panel h2 {
    margin-bottom: .25rem;
}

.cta-panel__text {
    max-width: 58ch;
    margin: 0;
    color: var(--muted);
}

.cta-panel__action {
    margin: 0;
}

.section {
    padding-block: clamp(2rem, 5vw, 3.5rem);
    scroll-margin-top: 5.5rem;
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.section__head h2 {
    margin: 0;
}

/* Categorías */

/* Misma lógica que la tarjeta de producto: foto arriba, texto debajo. */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cat:hover {
    border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.cat:focus-within {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 3px;
}

.cat__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: var(--cat-ratio, 16 / 10);
    overflow: clip;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.cat__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: .9rem;
    object-fit: contain;
    object-position: center;
    transition: transform .3s ease;
}

.cat:hover .cat__image {
    transform: scale(1.05);
}

/* Categoría sin foto: un icono tenue sobre el tono de fondo. */

.cat__mark {
    color: color-mix(in srgb, var(--ink) 28%, transparent);
}

.cat__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.05rem 1.1rem;
}

.cat__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.012em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cat__desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cat__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .6rem;
}

.cat__count {
    color: var(--muted);
    font-size: .74rem;
    white-space: nowrap;
}

.cat__cta {
    margin-left: auto;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .18s ease, transform .18s ease;
}

.cat:hover .cat__cta {
    color: var(--accent);
    transform: translateX(2px);
}

/* Productos */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min, 17rem)), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: clip;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product:hover {
    border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.product:focus-within {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 3px;
}

.product__media {
    position: relative;
    aspect-ratio: var(--card-ratio, 1 / 1);
    overflow: clip;
    background: color-mix(in srgb, var(--surface) 60%, var(--paper));
    border-bottom: 1px solid var(--line);
}

.product__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: .9rem;
    object-fit: contain;
    object-position: center;
    transition: transform .3s ease;
}

.product:hover .product__media img {
    transform: scale(1.05);
}

.product__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem 1.05rem 1.1rem;
}

.product__brand {
    align-self: flex-start;
    margin: 0;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product__name {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    min-height: 2.7em;
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.product__name a {
    color: var(--ink);
    text-decoration: none;
}

.product__name a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.price {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.price--sale {
    color: var(--accent);
}

.price__old {
    margin-left: .45rem;
    color: var(--muted);
    font-size: .8em;
    font-weight: 400;
}

.product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .55rem;
}

.product__stock {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .74rem;
}

.product__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--muted);
}

.product__stock.is-in .product__dot {
    background: var(--ok);
}

.product__stock.is-out .product__dot {
    background: #b42318;
}

.product__cta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: auto;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .18s ease, transform .18s ease;
}

.product:hover .product__cta {
    color: var(--accent);
    transform: translateX(2px);
}

/* Tablet: tres columnas fijas; móvil: dos columnas */

@media (min-width: 48rem) and (max-width: 63.99rem) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 47.99rem) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .9rem;
    }

    .product__media img {
        padding: .55rem;
    }

    .product__body {
        gap: .35rem;
        padding: .75rem .8rem .85rem;
    }

    .product__brand {
        font-size: .62rem;
    }

    .product__name {
        font-size: .88rem;
        min-height: 4.05em;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .price {
        font-size: 1.05rem;
    }

    .product__foot {
        padding-top: .45rem;
    }

    .product__cta {
        display: none;
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: .24rem .55rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product__badges {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.badge--muted {
    background: var(--muted);
}

.badge--ok {
    background: var(--ok);
}

/* Jerarquía de páginas en el listado del panel. */
.table__branch {
    margin-right: .35rem;
    color: var(--muted);
}

.table__note {
    display: inline-block;
    margin-left: .4rem;
    color: var(--muted);
    font-size: .78rem;
}

/* Tonos de demostración para medios sin imagen */

.tone-1 {
    background: linear-gradient(150deg, #efe8dc, #f8f4ec);
}

.tone-2 {
    background: linear-gradient(150deg, #dfe8e1, #f2f6f1);
}

.tone-3 {
    background: linear-gradient(150deg, #ece1d6, #f9f1e8);
}

.tone-4 {
    background: linear-gradient(150deg, #e3e1ea, #f4f3f8);
}

/* Botones */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .55rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.btn--primary:hover {
    background: color-mix(in srgb, var(--accent) 86%, #000);
}

.btn--secondary {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.btn--secondary:hover {
    border-color: var(--ink);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
}

.btn--ghost:hover {
    background: var(--surface);
}

/* WhatsApp mantiene su color de marca aunque no sea el botón principal. */
.btn--whatsapp {
    background: #17864a;
    border-color: #17864a;
    color: #fff;
}

.btn--whatsapp:hover {
    background: #147a43;
    border-color: #147a43;
    color: #fff;
}

.btn--sm {
    min-height: 2.25rem;
    padding: .35rem .85rem;
    font-size: .9rem;
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Formularios */

.form-demo {
    display: grid;
    gap: 1rem;
    max-width: 26rem;
}

.field {
    display: grid;
    gap: .35rem;
}

.field label {
    font-size: .9rem;
    font-weight: 600;
}

.input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.input:focus-visible {
    border-color: var(--accent);
}

.help {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .95rem;
}

.check input {
    margin-top: .3rem;
    accent-color: var(--accent);
}

/* Utilidades de la guía */

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.swatches li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}

.swatch {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.display {
    margin: 0 0 .4em;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.small {
    color: var(--muted);
    font-size: .9rem;
}

.alert {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
}

/* Footer: mismo fondo que la barra superior (--accent) y texto derivado de
   --accent-ink, que es el color calculado para contrastar sobre el acento. */

.site-footer {
    margin-top: clamp(2rem, 6vw, 4rem);
    padding-block: 2.5rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--accent-ink) 18%, transparent);
    background: var(--accent);
    color: color-mix(in srgb, var(--accent-ink) 88%, transparent);
    font-size: .9rem;
}

.footer__grid {
    display: grid;
    gap: 2rem;
}

.footer__brand {
    margin-bottom: .3rem;
    color: var(--accent-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

.footer__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 13rem);
    max-height: 3.4rem;
    margin-bottom: .45rem;
    object-fit: contain;
}

.footer__nav ul {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__title {
    margin: 0 0 .55rem;
    color: var(--accent-ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer__nav a {
    color: color-mix(in srgb, var(--accent-ink) 88%, transparent);
    text-decoration: none;
}

.footer__nav a:hover {
    color: var(--accent-ink);
    text-decoration: underline;
}

.footer__legal {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
    font-size: .82rem;
}

.footer__legal p {
    margin: 0;
}

.footer__legal a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: .18em;
}

.footer__legal a:hover {
    text-decoration-thickness: 2px;
}

/* Migas, cabecera de página y paginación */

/* Migas de pan: una cinta redondeada, en línea con las formas suaves de la
   tienda, con separadores discretos y el tramo actual resaltado. */

.breadcrumbs {
    margin-bottom: 1.5rem;
    font-size: .78rem;
}

.breadcrumbs ol {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem;
    max-width: 100%;
    margin: 0;
    padding: .25rem .6rem .25rem .3rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    list-style: none;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.breadcrumbs__item > a,
.breadcrumbs__item > span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .55rem;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.breadcrumbs__item > a:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
}

.breadcrumbs__item.is-current > span {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--ink);
    font-weight: 600;
}

.breadcrumbs__item:not(:last-child)::after {
    content: "›";
    margin-inline: .05rem .1rem;
    color: color-mix(in srgb, var(--muted) 45%, transparent);
    line-height: 1;
}

/* En pantallas angostas la cinta se quita: al pasar a dos líneas, el borde
   redondeado estorba más de lo que aporta. */
@media (max-width: 47.99rem) {
    .breadcrumbs ol {
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .breadcrumbs__item > a,
    .breadcrumbs__item > span {
        padding-inline: .25rem;
    }
}

.page-head {
    padding-block: clamp(1.5rem, 3.5vw, 2.4rem) 0;
}

.page-head h1 {
    margin-bottom: .3rem;
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
}

.page-head__meta {
    margin: 0 0 .8rem;
    color: var(--muted);
    font-size: .9rem;
}

.page-head__lead {
    max-width: 68ch;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.55;
}

/* Descripción de categoría */

.page-head + .section {
    padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Detalle de producto */

.product-detail {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.product-detail__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.product-detail__media img {
    display: block;
    width: 100%;
    height: 100%;
    padding: .85rem;
    object-fit: contain;
    object-position: center;
}

.product-detail__info h1 {
    max-width: 26ch;
    font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.product-detail__body {
    min-width: 0;
    max-width: 68ch;
    overflow-x: auto;
}

.product-detail__title {
    margin: 0 0 .9rem;
    font-size: var(--step-1);
}

.product-detail__lead {
    max-width: 46ch;
    margin-top: .75rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* Precio, disponibilidad y acciones forman un solo bloque: el título y la
   bajada quedan arriba, sin competir con el precio. */
.product-buy {
    display: grid;
    gap: .7rem;
    margin-top: 1.6rem;
}

.product-buy .stock {
    margin: 0;
}

.product-buy .product-actions {
    margin: 0;
}

.product-buy .product-contact-email {
    margin: 0;
}

.price--lg {
    margin: 0;
    font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.stock {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1rem;
    color: var(--ok);
    font-size: .9rem;
    font-weight: 600;
}

.stock__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
}

.stock--out {
    color: var(--muted);
}

/* Especificaciones de la ficha: etiquetas pequeñas, valores legibles. */
.product-detail .specs {
    margin-top: 1.6rem;
    padding-block: .9rem;
    gap: .45rem 1rem;
    font-size: .85rem;
}

.product-detail .specs dt {
    padding-top: .1rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-detail .specs dd {
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.product-back {
    margin-top: 1.25rem;
    font-size: .9rem;
}

.link-arrow {
    color: var(--muted);
    text-decoration: none;
}

.link-arrow:hover {
    color: var(--accent);
}

/* Descripción plegable: el primer párrafo queda a la vista. */
.prose-fold {
    margin-top: .35rem;
}

.prose-fold > summary {
    cursor: pointer;
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
    list-style: none;
}

.prose-fold > summary::-webkit-details-marker {
    display: none;
}

.prose-fold > summary::after {
    content: " +";
    font-weight: 700;
}

.prose-fold[open] > summary {
    margin-bottom: 1rem;
}

.prose-fold[open] > summary::after {
    content: " –";
}

.prose {
    max-width: 65ch;
    overflow-wrap: anywhere;
    /* Ancho máximo de una imagen flotante; cada variante de diseño lo ajusta. */
    --prose-float: min(45%, 22rem);
}

/* Ancho de la columna de lectura en las páginas (campo «Diseño»). */
.wrap--page-center {
    width: min(100% - (var(--gutter) * 2), 65ch);
}

.wrap--page-wide {
    width: min(100% - (var(--gutter) * 2), 70rem);
}

.prose--center,
.prose--wide {
    max-width: none;
}

.prose--center {
    --prose-float: min(46%, 24rem);
}

.prose--wide {
    --prose-float: min(44%, 30rem);
}

.prose > :first-child {
    margin-top: 0;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose p {
    margin: 0 0 1em;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    margin: 1.6em 0 .55em;
    font-family: var(--font-headings);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.prose h1,
.prose h2 {
    font-size: var(--step-1);
}

.prose h3 {
    font-size: 1.15rem;
}

.prose h4 {
    font-size: 1rem;
}

.prose ul,
.prose ol {
    margin: 0 0 1em;
    padding-left: 1.4rem;
}

.prose li {
    margin-bottom: .35em;
}

.prose li > ul,
.prose li > ol {
    margin: .35em 0 0;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.prose a:hover {
    text-decoration-thickness: 2px;
}

.prose strong,
.prose b {
    font-weight: 650;
}

.prose blockquote {
    margin: 1.25em 0;
    padding: .35rem 0 .35rem 1.1rem;
    border-left: 3px solid var(--accent);
    color: var(--muted);
}

.prose blockquote > :last-child {
    margin-bottom: 0;
}

.prose hr {
    margin: 1.75em 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.prose table {
    width: 100%;
    margin: 0 0 1.25em;
    border-collapse: collapse;
    font-size: .95rem;
}

.prose th,
.prose td {
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.prose th {
    background: var(--surface);
    font-weight: 650;
}

/* Imágenes del contenido: el ancho manda, la altura se ajusta sola. */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.prose img.img-right {
    float: right;
    max-width: var(--prose-float);
    margin: .2rem 0 1rem 1.5rem;
}

.prose img.img-left {
    float: left;
    max-width: var(--prose-float);
    margin: .2rem 1.5rem 1rem 0;
}

.prose img.img-center {
    display: block;
    margin: 0 auto 1.25rem;
}

@media (max-width: 40rem) {
    .prose img.img-right,
    .prose img.img-left {
        float: none;
        max-width: 100%;
        margin: 0 0 1rem;
    }
}

.prose caption {
    margin-bottom: .45rem;
    color: var(--muted);
    font-size: .85rem;
    text-align: left;
}

.prose pre {
    margin: 0 0 1.25em;
    padding: .85rem 1rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .88rem;
    line-height: 1.5;
}

.prose code {
    padding: .1em .35em;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    font-size: .9em;
}

.prose pre code {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
}

.prose p:last-child {
    margin-bottom: 0;
}

.specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1.25rem;
    margin: 1.25rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}

.specs dt {
    color: var(--muted);
}

.specs dd {
    margin: 0;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 2rem;
}

.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: .9rem;
    text-decoration: none;
}

.pagination a:hover {
    border-color: var(--ink);
}

.pagination [aria-current="page"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.pagination .pagination__gap {
    border-color: transparent;
}

/* Responsive */

@media (min-width: 48rem) {
    .footer__grid {
        grid-template-columns: 2fr 1fr;
    }

    .footer__grid--pages {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

@media (min-width: 60rem) {
    .nav--desktop {
        display: flex;
    }

    .menu {
        display: none;
    }

    .hero h1 {
        max-width: 20ch;
    }

    .product-detail {
        grid-template-columns: 1.05fr .95fr;
        gap: 2rem 3rem;
    }

    .product-detail--with-description {
        grid-template-areas:
            "media info"
            "body body";
    }

    .product-detail--with-description .product-detail__media {
        grid-area: media;
    }

    .product-detail--with-description .product-detail__info {
        grid-area: info;
    }

    .product-detail--with-description .product-detail__body {
        grid-area: body;
        margin-top: .5rem;
        padding-top: 1.75rem;
        border-top: 1px solid var(--line);
    }
}

/* Entrada suave de la portada */

@keyframes home-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.page-home .hero-slide:first-child .hero-slide__content > *,
.page-home .hero:not(.hero--slider) .wrap > * {
    animation: home-rise .55s cubic-bezier(.22, .61, .36, 1) both;
}

.page-home .hero-slide:first-child .hero-slide__content > :nth-child(2),
.page-home .hero:not(.hero--slider) .wrap > :nth-child(2) {
    animation-delay: 60ms;
}

.page-home .hero-slide:first-child .hero-slide__content > :nth-child(3),
.page-home .hero:not(.hero--slider) .wrap > :nth-child(3) {
    animation-delay: 120ms;
}

.page-home .hero-slide:first-child .hero-slide__content > :nth-child(4),
.page-home .hero:not(.hero--slider) .wrap > :nth-child(4) {
    animation-delay: 180ms;
}

.page-home main > .section {
    animation: home-rise .5s ease-out both;
}

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

/* Contacto y leads */

.section--contact {
    scroll-margin-top: 6rem;
}

/* En la ficha de producto el formulario no debe gritar más que el producto. */
.section--contact-product {
    padding-block-start: clamp(1rem, 2.5vw, 1.75rem);
}

.section--contact-product .contact-panel__head h2 {
    font-size: var(--step-1);
}

.contact-panel {
    max-width: 48rem;
    margin-inline: auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-margin-top: 6rem;
}

.contact-panel__head h2 {
    margin-bottom: .35rem;
    font-size: var(--step-2);
}

.contact-panel__lead {
    max-width: 60ch;
    margin: 0;
    color: var(--muted);
}

.contact-channels {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0;
}

.contact-form {
    display: grid;
    gap: 1rem;
}

.contact-form__grid {
    display: grid;
    gap: 1rem;
}

.contact-form .field {
    display: grid;
    gap: .35rem;
}

.contact-form .field label {
    font-size: .9rem;
    font-weight: 600;
}

.contact-consent {
    align-items: flex-start;
    font-size: .9rem;
    line-height: 1.45;
}

.contact-notice {
    margin: 1rem 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted);
}

.contact-notice a {
    color: inherit;
    text-decoration: underline;
}

.contact-hours {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: .85rem;
}

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 .75rem;
}

.product-contact-email {
    margin: 0 0 1rem;
    font-size: .9rem;
}

.product-contact-email a {
    color: var(--muted);
}

.textarea {
    resize: vertical;
    min-height: 7rem;
}

.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

.flash {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.flash ul {
    margin: .35rem 0 0;
    padding-left: 1.2rem;
}

.flash--success {
    border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}

.flash--error {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

@media (min-width: 40rem) {
    .contact-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Barra de contacto móvil */

.mobile-contact {
    display: none;
}

/* La barra solo aparece cuando los botones de la ficha ya no se ven;
   así no se repiten los mismos tres accesos en pantalla. */
@media (max-width: 48rem) {
    body.has-mobile-bar {
        padding-bottom: 4.75rem;
    }

    .mobile-contact.is-visible {
        position: fixed;
        inset: auto 0 0;
        z-index: 40;
        display: grid;
        grid-auto-flow: column;
        gap: .5rem;
        padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(10px);
    }

    .mobile-contact .btn {
        justify-content: center;
        padding: .65rem .7rem;
        font-size: .85rem;
    }
}

/* Secciones libres de la portada */
.section--block {
    padding-block: clamp(2.25rem, 5vw, 3.75rem);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section--block-cover {
    position: relative;
}

.section--block-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    pointer-events: none;
}

.section--block-cover > .wrap {
    position: relative;
}

.block-panel {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.section--block-image-right .block-panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.section--block-image-left .block-panel {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.section--block-image-left .block-panel__media {
    order: -1;
}

.section--block-text-only .block-panel {
    grid-template-columns: minmax(0, 1fr);
    max-width: 52rem;
    margin-inline: auto;
}

.block-panel__body h2 {
    margin: 0 0 .6rem;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.15;
}

.block-panel__lead {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 1.05rem;
}

.block-panel__content {
    color: var(--ink);
}

.block-panel__content > :first-child {
    margin-top: 0;
}

.block-panel__content > :last-child {
    margin-bottom: 0;
}

.block-panel__content ul,
.block-panel__content ol {
    padding-left: 1.25rem;
}

.block-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.4rem 0 0;
}

.block-panel__media {
    margin: 0;
}

.block-panel__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

@media (max-width: 47.99rem) {
    .section--block-image-right .block-panel,
    .section--block-image-left .block-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .section--block-image-left .block-panel__media {
        order: 0;
    }
}

/* Variante compacta de categorías: fila con miniatura, nombre y conteo. */

.cat-grid--compact {
    grid-template-columns: minmax(0, 1fr);
}

.cat-grid--compact .cat {
    flex-direction: row;
    align-items: center;
    gap: .9rem;
    padding: .6rem .9rem .6rem .6rem;
}

.cat-grid--compact .cat__media {
    flex: 0 0 3.4rem;
    width: 3.4rem;
    aspect-ratio: 1 / 1;
    border-bottom: 0;
    border-radius: var(--radius-sm);
}

.cat-grid--compact .cat__image {
    position: static;
    width: 100%;
    height: 100%;
    padding: .15rem;
    object-fit: contain;
}

.cat-grid--compact .cat__mark svg {
    width: 18px;
    height: 18px;
}

.cat-grid--compact .cat__body {
    flex: 1;
    gap: .1rem;
    padding: 0;
}

.cat-grid--compact .cat__desc,
.cat-grid--compact .cat__cta {
    display: none;
}

.cat-grid--compact .cat__foot {
    padding-top: 0;
}

@media (min-width: 48rem) {
    .cat-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Buscador de la tienda */

.search-form {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .18rem .18rem .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.search-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.search-form__input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
}

.search-form__input:focus {
    outline: none;
}

.search-form__input::placeholder {
    color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.search-form__submit {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    transition: filter .15s ease;
}

.search-form__submit:hover {
    filter: brightness(1.08);
}

.search-form--menu {
    margin-bottom: .75rem;
}

.search-form--page {
    max-width: 30rem;
    margin-top: 1rem;
}

/* En escritorio el buscador acompaña a la barra de secciones de la portada. */
.search-form--index {
    flex: 0 0 auto;
    width: 17rem;
    margin-left: auto;
}

@media (max-width: 59.99rem) {
    .search-form--index {
        display: none;
    }
}

/* Catálogo con árbol de categorías al costado */

.catalog {
    display: grid;
    gap: 1.75rem;
    align-items: start;
}

.catalog__main {
    min-width: 0;
}

.cat-side {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.cat-side__group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.cat-side__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    padding: .8rem 1rem;
    background: color-mix(in srgb, var(--ink) 92%, #000);
    color: var(--paper);
    font-family: var(--font-subheadings, var(--font));
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

a.cat-side__head:hover {
    background: var(--ink);
    color: #fff;
}

.cat-side__head.is-active {
    background: var(--accent);
    color: var(--accent-ink);
}

.cat-side__head .cat-side__count {
    color: inherit;
    opacity: .7;
}

.cat-side__title {
    margin: 0;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cat-side__list {
    margin: 0;
    padding: .35rem 0;
    list-style: none;
}

.cat-side__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 1rem;
    border-left: 2px solid transparent;
    color: var(--ink);
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.cat-side__link:hover {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.cat-side__link.is-active {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-weight: 600;
}

.cat-side__count {
    color: var(--muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.cat-side__link.is-active .cat-side__count {
    color: var(--accent);
}

@media (min-width: 60rem) {
    .catalog {
        grid-template-columns: 15.5rem minmax(0, 1fr);
        gap: 2.5rem;
    }

    .cat-side {
        position: sticky;
        top: 5.5rem;
    }
}

/* En móvil el catálogo va primero y el árbol de categorías queda al final. */

@media (max-width: 59.99rem) {
    .catalog__main {
        order: -1;
    }
}

/* Botón flotante de WhatsApp */

.wa-float {
    position: fixed;
    right: clamp(.9rem, 2vw, 1.5rem);
    bottom: clamp(.9rem, 2vw, 1.5rem);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem .7rem .85rem;
    border-radius: 999px;
    background: #17864a;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 12px 26px -12px rgb(9 74 36 / .65), 0 2px 6px rgb(0 0 0 / .16);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.wa-float:hover {
    background: #147a43;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgb(9 74 36 / .7), 0 3px 8px rgb(0 0 0 / .18);
}

.wa-float:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.wa-float svg {
    flex: 0 0 auto;
}

@media (max-width: 40rem) {
    .wa-float {
        padding: .8rem;
    }

    .wa-float__label {
        display: none;
    }
}

/* En la ficha de producto el móvil ya tiene su barra de contacto. */
@media (max-width: 48rem) {
    body.has-mobile-contact .wa-float {
        display: none;
    }
}

/* Modo oscuro: piezas que no se resuelven solo con los tokens de color */

html[data-theme="dark"] .cat__media {
    background: color-mix(in srgb, var(--surface) 60%, var(--paper));
}

html[data-theme="dark"] .tone-1 {
    background: linear-gradient(150deg, #2b2621, #211d19);
}

html[data-theme="dark"] .tone-2 {
    background: linear-gradient(150deg, #212a24, #1a211c);
}

html[data-theme="dark"] .tone-3 {
    background: linear-gradient(150deg, #2c2420, #221c18);
}

html[data-theme="dark"] .tone-4 {
    background: linear-gradient(150deg, #25242c, #1c1b22);
}

/* La cabecera del árbol era tinta sobre papel; en oscuro se invierte el peso. */
html[data-theme="dark"] .cat-side__head {
    background: color-mix(in srgb, var(--ink) 10%, var(--surface));
    color: var(--ink);
}

html[data-theme="dark"] a.cat-side__head:hover {
    background: color-mix(in srgb, var(--ink) 18%, var(--surface));
    color: var(--ink);
}

html[data-theme="dark"] .cat-side__head.is-active {
    background: var(--accent);
    color: var(--accent-ink);
}

/* Con varias páginas en la cabecera la barra deja de caber antes de que el
   texto se parta en dos líneas: por debajo de este ancho se usa el menú
   lateral, que ya contiene las mismas entradas. */
@media (max-width: 71.99rem) {
    .nav--desktop {
        display: none;
    }

    .menu {
        display: block;
    }
}