/*
 * Bena Pets — tema.
 *
 * Los valores no son aproximaciones: salen de medir benapets.com en producción.
 * Tipografías Instrument Serif y Geist; paleta obsidian / ivory / bone / ink /
 * parchment con los mismos valores hexadecimales.
 */

:root {
    --obsidian: #0e0d0c;
    --ink: #12110f;
    --ivory: #fcfaf6;
    --bone: #f6f2eb;
    --parchment: #efe9df;
    --line: rgba(18, 17, 15, 0.12);
    --line-inverse: rgba(252, 250, 246, 0.18);
    --muted: rgba(18, 17, 15, 0.62);
    --muted-inverse: rgba(252, 250, 246, 0.72);
    --accent: #b4553a;

    --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;

    --gutter: clamp(1.25rem, 5vw, 4.5rem);
    --section-y: clamp(4.5rem, 9vw, 8.5rem);
    --measure: 42rem;
    --header-h: 72px;
}

/* Preferencias de cookies: visible sin tapar la compra ni el menú. */
.bena-footer__cookie-button {
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.bena-footer__cookie-button:hover,
.bena-footer__cookie-button:focus-visible {
    color: #fff;
}

.bena-cookie-consent {
    position: fixed;
    z-index: 10000;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    width: min(60rem, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: 1rem 1.15rem;
    border: 1px solid #cfc7bb;
    background: #f8f4ed;
    box-shadow: 0 1rem 3.5rem rgb(26 24 20 / 24%);
    color: #171612;
}

.bena-cookie-consent[hidden] {
    display: none;
}

.bena-cookie-consent__copy {
    max-width: 41rem;
}

.bena-cookie-consent__copy h2 {
    margin: 0 0 0.35rem;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 400;
    line-height: 1.05;
}

.bena-cookie-consent__copy > p:last-child {
    margin: 0;
    color: #5f5b54;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.bena-cookie-consent__copy a {
    color: #171612;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bena-cookie-consent__actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
}

.bena-cookie-consent__actions button {
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #171612;
    cursor: pointer;
    font: 500 0.6875rem/1 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bena-cookie-consent__necessary {
    background: transparent;
    color: #171612;
}

.bena-cookie-consent__accept {
    background: #171612;
    color: #fff;
}

.bena-cookie-consent__actions button:hover,
.bena-cookie-consent__actions button:focus-visible {
    outline: 2px solid #bd5f40;
    outline-offset: 2px;
}

@media (max-width: 50rem) {
    .bena-cookie-consent {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        grid-template-columns: 1fr;
        gap: 0.8rem;
        width: calc(100% - 1.5rem);
        padding: 0.9rem;
    }

    .bena-cookie-consent__actions {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 0.5rem;
    }

    .bena-cookie-consent__actions button {
        width: 100%;
        min-height: 3rem;
        padding: 0.55rem;
        font-size: 0.625rem;
        line-height: 1.25;
    }
}

/* Club Bena se ofrece después de decidir las cookies, nunca encima de ellas. */
.bena-club-popover {
    position: fixed;
    z-index: 9990;
    right: 1.25rem;
    bottom: 6.5rem;
    width: min(27rem, calc(100% - 2.5rem));
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
    padding: 1.6rem;
    border: 1px solid #d6cec1;
    background: #f8f4ed;
    box-shadow: 0 1.5rem 4.5rem rgb(20 18 15 / 28%);
    color: #171612;
}

.bena-club-popover[hidden],
.bena-club-codebar[hidden],
.bena-checkout-cupon[hidden] {
    display: none;
}

.bena-club-popover__close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #171612;
    cursor: pointer;
    font: 300 1.65rem/1 var(--sans);
}

.bena-club-popover .bena-overline {
    margin: 0 2.5rem 0.8rem 0;
    color: var(--accent);
}

.bena-club-popover h2 {
    margin: 0;
    max-width: 19rem;
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

.bena-club-popover > p:not(.bena-overline, .bena-club-popover__terms, .bena-club-popover__status) {
    margin: 1rem 0 0;
    color: #625d55;
    font-size: 0.9rem;
    line-height: 1.55;
}

.bena-club-popover__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    margin-top: 1.2rem;
}

.bena-club-popover__form > label:not(.bena-honeypot) {
    grid-column: 1 / -1;
    color: #655f57;
    font-size: 0.75rem;
}

.bena-club-popover__form input[type="email"] {
    min-width: 0;
    height: 3.1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #cfc6b8;
    background: #fffdf8;
    color: #171612;
    font: inherit;
    font-size: 0.9rem;
}

.bena-club-popover__form button,
.bena-club-popover__shop,
.bena-club-popover__coupon button {
    display: inline-grid;
    place-items: center;
    min-height: 3.1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #171612;
    background: #171612;
    color: #fff;
    cursor: pointer;
    font: 500 0.68rem/1.2 var(--sans);
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.bena-club-popover__terms {
    margin: 0.9rem 0 0;
    color: #777067;
    font-size: 0.7rem;
    line-height: 1.45;
}

.bena-club-popover__terms a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bena-club-popover__coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
    margin: -0.4rem -0.4rem 1.3rem;
    padding: 1rem;
    background: var(--obsidian);
    color: var(--ivory);
}

.bena-club-popover__coupon span {
    grid-column: 1 / -1;
    color: rgba(252, 250, 246, 0.65);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bena-club-popover__coupon strong {
    align-self: center;
    overflow: hidden;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bena-club-popover__coupon button {
    min-height: 2.45rem;
    border-color: rgba(252, 250, 246, 0.55);
    background: transparent;
}

.bena-club-popover__shop {
    margin-top: 1.15rem;
}

.bena-club-popover__status {
    min-height: 1px;
    margin: 0.6rem 0 0;
    color: #4e6848;
    font-size: 0.75rem;
}

/* El código confirmado permanece arriba mientras siga vigente para que la
   persona pueda copiarlo desde el catálogo, carrito o checkout. */
.bena-club-codebar {
    position: fixed;
    z-index: 9990;
    top: calc(var(--header-h) + 0.75rem);
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: max-content;
    max-width: calc(100% - 2.5rem);
    min-height: 3.25rem;
    padding: 0.55rem 0.65rem 0.55rem 1rem;
    transform: translateX(-50%);
    border: 1px solid rgba(252, 250, 246, 0.2);
    background: var(--obsidian);
    box-shadow: 0 0.9rem 2.5rem rgb(20 18 15 / 22%);
    color: var(--ivory);
    font-size: 0.8rem;
}

.bena-club-codebar strong {
    margin-left: 0.25rem;
    letter-spacing: 0.08em;
}

.bena-club-codebar button {
    min-height: 2.15rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(252, 250, 246, 0.5);
    background: transparent;
    color: var(--ivory);
    cursor: pointer;
    font: 500 0.65rem/1 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* El código junto a «¿Tienes un cupón?» del checkout. No es fijo como la barra
   de arriba: aquí acompaña al aviso de Woo, en el flujo de la página, para que
   se lea como parte del formulario y no como un anuncio encima. */
.bena-checkout-cupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(20, 18, 15, 0.14);
    background: var(--ivory, #fffdf8);
    font-size: 0.82rem;
}

.bena-checkout-cupon strong {
    letter-spacing: 0.08em;
}

.bena-checkout-cupon button {
    min-height: 2.15rem;
    margin-left: auto;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--obsidian, #14120f);
    background: var(--obsidian, #14120f);
    color: var(--ivory, #fffdf8);
    cursor: pointer;
    font: 500 0.65rem/1 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 40rem) {
    .bena-checkout-cupon button {
        width: 100%;
        margin-left: 0;
    }
}

.bena-club-codebar .bena-club-codebar__close {
    width: 2rem;
    padding: 0;
    border: 0;
    font-size: 1.3rem;
}

@media (max-width: 40rem) {
    /* En el móvil el flotante deja de flotar: se pega abajo como una hoja.
       ----------------------------------------------------------------
       Antes seguía flotando —a 5.6rem del borde y con 0.75rem a los lados—, y
       eso en un teléfono no se lee como una capa: se lee como una tarjeta
       perdida a media pantalla, tapando contenido y con el borde inferior
       metiéndose bajo la barra del navegador. Rony lo vio en dos capturas, la
       de registrarse y la de confirmar el correo.

       Pegado abajo se entiende de inmediato: es algo que pide una acción. El
       `env(safe-area-inset-bottom)` evita que el último botón quede debajo de
       la barra de gestos del iPhone, y el fondo oscuro se hace con una sombra
       enorme en vez de con otro elemento: no hay que tocar el HTML ni ocultar
       nada al cerrar. */
    .bena-club-popover {
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 85svh;
        padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 0 0 100vmax rgb(18 17 15 / 45%);
    }

    /* El botón de WhatsApp vive en z-index 9999 y el flotante en 9990, así que
       le pasa POR ENCIMA y queda un círculo verde plantado sobre el panel. Se
       aparta mientras está abierto y vuelve al cerrarlo. */
    .bena-con-popup .bpec-whatsapp-float {
        opacity: 0;
        pointer-events: none;
    }

    .bena-club-popover__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .bena-club-popover__form button {
        width: 100%;
    }

    .bena-club-codebar {
        top: calc(var(--header-h) + 0.5rem);
        gap: 0.55rem;
        width: calc(100% - 1.5rem);
        max-width: none;
        padding-left: 0.75rem;
    }

    .bena-club-codebar > span:first-child {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

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

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

body {
    margin: 0;
    background: var(--bone);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.92;
    margin: 0;
    text-wrap: balance;
}

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

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

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------- utilidades */

.bena-wrap {
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bena-section {
    padding-block: var(--section-y);
}

.bena-section--ivory {
    background: var(--ivory);
}

.bena-section--bone {
    background: var(--bone);
}

.bena-section--parchment {
    background: var(--parchment);
}

.bena-section--obsidian {
    background: var(--obsidian);
    color: var(--ivory);
}

.bena-overline {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 1.25rem;
}

/* Sobre fondo oscuro el texto apagado tiene que invertirse, si no queda tinta
   negra sobre una fotografía negra. */
.bena-section--obsidian .bena-overline,
.bena-hero .bena-overline,
.bena-materials .bena-overline {
    color: rgba(252, 250, 246, 0.75);
}

.bena-lead {
    max-width: var(--measure);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.65;
    color: var(--muted);
    margin-top: 1.5rem;
}

.bena-section--obsidian .bena-lead,
.bena-materials .bena-lead {
    color: rgba(252, 250, 246, 0.88);
}

.bena-h2 {
    font-size: clamp(2.5rem, 5.4vw, 4.25rem);
}

.bena-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.2s ease;
}

.bena-link:hover {
    opacity: 0.6;
}

.bena-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2rem;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    background: var(--ivory);
    color: var(--ink);
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.bena-button:hover {
    background: var(--parchment);
}

.bena-button--ghost {
    background: transparent;
    color: inherit;
    border-color: transparent;
    padding-inline: 1rem;
}

.bena-button--ghost:hover {
    background: transparent;
    opacity: 0.65;
}

/* ------------------------------------------------------------------ cabecera */

.bena-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    color: var(--ivory);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.bena-header.is-solid,
.bena-header.is-menu-open {
    background: var(--ivory);
    color: var(--ink);
    box-shadow: 0 1px 0 var(--line);
}

.bena-header__inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.bena-nav__list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.bena-nav__list a {
    position: relative;
    padding-block: 0.35rem;
}

.bena-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.25s ease;
}

.bena-nav__list a:hover::after {
    width: 100%;
}

.bena-wordmark {
    justify-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
}

.bena-wordmark__dot {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: var(--accent);
    align-self: center;
}

.bena-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8125rem;
}

.bena-actions__currency {
    color: inherit;
    opacity: 0.75;
    white-space: nowrap;
}

.bena-actions a,
.bena-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.bena-actions a:hover,
.bena-actions button:hover {
    opacity: 0.6;
}

.bena-actions svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}

.bena-cart-count {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.bena-menu-toggle {
    display: none;
}

/* --------------------------------------------------------- buscador global */

.bena-search {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: grid;
    align-items: start;
}

.bena-search[hidden] {
    display: none;
}

.bena-search__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(14, 13, 12, 0.58);
    opacity: 0;
    cursor: default;
    transition: opacity 0.24s ease;
}

.bena-search.is-open .bena-search__backdrop {
    opacity: 1;
}

.bena-search__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: clamp(1.5rem, 4vw, 3.25rem) var(--gutter) clamp(1.75rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--line);
    background: var(--ivory);
    box-shadow: 0 24px 70px rgba(18, 17, 15, 0.16);
    opacity: 0;
    transform: translateY(-1.5rem);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
}

.bena-search.is-open .bena-search__panel {
    opacity: 1;
    transform: translateY(0);
}

.bena-search__header,
.bena-search__form,
.bena-search__note {
    width: min(70rem, 100%);
    margin-inline: auto;
}

.bena-search__header {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: start;
}

.bena-search__header p {
    margin: 0 0 0.45rem;
    color: var(--accent);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bena-search__header h2 {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4.25rem);
}

.bena-search__close {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.bena-search__close:hover {
    background: var(--parchment);
}

.bena-search__close svg,
.bena-search__icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.bena-search__form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--ink);
}

.bena-search__icon {
    display: grid;
    place-items: center;
    padding-inline: 0.25rem 1rem;
}

.bena-search__form input[type="search"] {
    min-width: 0;
    height: 4.5rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

.bena-search__form input[type="search"]::placeholder {
    color: rgba(18, 17, 15, 0.34);
}

.bena-search__form button[type="submit"] {
    min-height: 2.9rem;
    padding: 0.8rem 1.3rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--ivory);
    font: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.bena-search__note {
    margin-top: 0.85rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

@media (max-width: 40rem) {
    .bena-search__panel {
        padding-top: 1.25rem;
    }

    .bena-search__header h2 {
        font-size: 2.25rem;
    }

    .bena-search__form {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bena-search__form input[type="search"] {
        height: 4rem;
        font-size: 1.35rem;
    }

    .bena-search__form button[type="submit"] {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0.8rem 0 1rem;
    }

    .bena-search__note {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bena-search__backdrop,
    .bena-search__panel {
        transition: none;
    }
}

/* ---------------------------------------------------------------------- hero */

.bena-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 92svh;
    overflow: hidden;
    background: var(--obsidian);
    color: var(--ivory);
    padding-block: clamp(3rem, 8vw, 6rem);
    /* La cabecera flota sobre el hero. Con el contenido apoyado abajo, en una
       pantalla corta —un 360x640, o una ventana de escritorio poco alta— deja
       de caber en 92svh y se sube hasta meterse bajo ella: el overline acaba
       tapado por el logotipo. Reservar su altura hace que el hero crezca en
       vez de solaparse. Donde ya cabía no cambia nada, porque flex-end sigue
       apoyando el contenido contra el borde inferior. */
    padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
}

.bena-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

/* El póster del <video> obedece a object-fit igual que la reproducción, así
   que la foto de respaldo se recorta exactamente como el vídeo: al arrancar no
   hay reencuadre. La regla vale para los dos para que el hero siga bien puesto
   si algún día vuelve a ser una imagen. */
.bena-hero__media img,
.bena-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* El velo del sitio en producción: denso abajo, donde se apoya la tipografía,
   y claro en el centro para que la fotografía no quede aplanada en un fondo.
   Arriba vuelve a cerrarse un poco, lo justo para que la cabecera fija se lea.
   El degradado lateral que había antes oscurecía media foto sin necesidad. */
.bena-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(14, 13, 12, 0.85) 0%,
        rgba(14, 13, 12, 0.25) 55%,
        rgba(14, 13, 12, 0.4) 100%
    );
}

.bena-hero__inner {
    max-width: 46rem;
}

.bena-hero__title {
    font-size: clamp(3.25rem, 7.6vw, 6.5rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
}

.bena-hero__lead {
    max-width: 34rem;
    margin-top: 1.75rem;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.65;
    color: rgba(252, 250, 246, 0.75);
}

.bena-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.bena-promises--hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.5rem;
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    color: rgba(252, 250, 246, 0.7);
}

.bena-promises--hero li + li::before {
    content: "|";
    margin-right: 1.5rem;
    opacity: 0.35;
}

/* En móvil las tres promesas tienen el mismo ancho y comparten una sola línea
   visual. El flex anterior dejaba la tercera en una fila nueva y conservaba su
   separador, que aparecía como una barra huérfana a la izquierda. */
@media (max-width: 40rem) {
    .bena-promises--hero {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(252, 250, 246, 0.28);
        font-size: 0.75rem;
        line-height: 1.35;
        text-align: center;
    }

    .bena-promises--hero li {
        display: grid;
        place-items: start center;
        min-width: 0;
        padding-inline: 0.65rem;
    }

    .bena-promises--hero li + li {
        border-left: 1px solid rgba(252, 250, 246, 0.22);
    }

    .bena-promises--hero li + li::before {
        content: none;
    }
}

.bena-hero__explore {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(3rem, 8vw, 6rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(252, 250, 246, 0.55);
}

.bena-hero__explore::after {
    content: "";
    width: 1px;
    height: 3.5rem;
    background: currentColor;
}

/* -------------------------------------------------------------- colecciones */

.bena-section__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.bena-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.75rem);
}

.bena-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bena-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bena-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bena-card {
    display: block;
    position: relative;
}

.bena-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--parchment);
}

.bena-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bena-card:hover .bena-card__media img {
    transform: scale(1.04);
}

.bena-card__title {
    display: block;
    margin-top: 1.1rem;
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.bena-card__meta {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--muted);
}


/* ------------------------------------------------------------------ próximamente */

.bena-soon-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    min-height: clamp(26rem, 42vw, 36rem);
    background: var(--bone);
    padding-block: clamp(5rem, 9vw, 7.5rem);
}

.bena-soon-section__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.bena-soon-section__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La pareja duerme en la mitad baja del encuadre. Bajando el punto de
       anclaje entran sus caras por debajo del texto, y arriba queda el muro
       claro, que es donde el titular necesita silencio. */
    object-position: center 55%;
}

/* El velo pesa arriba, bajo el texto, y se abre hacia abajo para que la
   fotografía respire. Sin él sería tinta oscura sobre una foto con detalle:
   legible a ratos y fea siempre. */
.bena-soon-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(246, 242, 235, 0.95) 0%,
        rgba(246, 242, 235, 0.88) 46%,
        rgba(246, 242, 235, 0.7) 80%,
        rgba(246, 242, 235, 0.58) 100%
    );
}

.bena-soon {
    position: relative;
    max-width: 46rem;
}

@media (max-width: 48rem) {
    .bena-soon-section {
        min-height: 0;
    }

    /* En vertical el recorte es más estrecho: si no se sube el anclaje, el
       encuadre se queda en el sofá y desaparecen los animales. */
    .bena-soon-section__media img {
        object-position: center 62%;
    }

    .bena-soon-section::before {
        background: linear-gradient(
            180deg,
            rgba(246, 242, 235, 0.96) 0%,
            rgba(246, 242, 235, 0.92) 55%,
            rgba(246, 242, 235, 0.78) 100%
        );
    }
}

/* ------------------------------------------------------------- materiales */

.bena-materials {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--obsidian);
    color: var(--ivory);
    padding-block: clamp(5rem, 10vw, 9rem);
}

.bena-materials__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.bena-materials__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La foto tiene al perro y al gato en el tercio superior y piso vacío
       abajo; con el recorte centrado por defecto, un monitor ancho y bajo
       (min-height:70svh) se comía las orejas del gato y la cara del perro
       por arriba. Anclado arriba, el recorte cae sobre el piso vacío. */
    object-position: center top;
}

.bena-materials::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(14, 13, 12, 0.96) 0%, rgba(14, 13, 12, 0.86) 38%, rgba(14, 13, 12, 0.5) 72%, rgba(14, 13, 12, 0.25) 100%);
}

.bena-materials__title {
    max-width: 22ch;
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
}

/* ------------------------------------------------------------ por mascota */

.bena-pet {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    color: var(--ivory);
}

.bena-pet img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bena-pet:hover img {
    transform: scale(1.04);
}

.bena-pet__body {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(to top, rgba(14, 13, 12, 0.75) 0%, rgba(14, 13, 12, 0) 60%);
}

.bena-pet__title {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1;
}

.bena-pet__meta {
    display: block;
    font-size: 0.9375rem;
    color: rgba(252, 250, 246, 0.8);
    max-width: 32ch;
}

.bena-pet__cta {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- estándar */

.bena-standard {
    background: var(--parchment);
}

.bena-standard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.bena-standard__copy p + p {
    margin-top: 1.25rem;
}

.bena-standard__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* --------------------------------------------------------------- condiciones */

.bena-terms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line);
    padding-top: 2.5rem;
}

.bena-terms h3 {
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
}

.bena-terms p {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/* ------------------------------------------------------------------ club */

.bena-club {
    border-top: 1px solid var(--line);
    background: var(--parchment);
}

.bena-club__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.bena-club__badge {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--obsidian);
    color: var(--ivory);
    text-align: center;
    padding: 2rem;
}

.bena-club__badge strong {
    display: block;
    font-family: var(--serif);
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    line-height: 1;
    font-weight: 400;
}

.bena-club__badge span {
    margin-top: 1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-inverse);
}

.bena-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

.bena-form input[type="email"] {
    flex: 1 1 16rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
}

.bena-form button {
    padding: 0.95rem 1.75rem;
    border: 0;
    background: var(--ink);
    color: var(--ivory);
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.bena-form button:hover {
    opacity: 0.85;
}

/* ------------------------------------------------------------------- pie */

.bena-footer {
    background: var(--obsidian);
    color: var(--ivory);
    padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}

.bena-footer a:hover {
    opacity: 0.65;
}

.bena-footer__top {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--line-inverse);
}

.bena-footer__brand p {
    margin-top: 1rem;
    max-width: 26rem;
    color: var(--muted-inverse);
    font-size: 0.9375rem;
}

.bena-footer__col h3 {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-inverse);
    margin-bottom: 1.1rem;
}

.bena-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    font-size: 0.9375rem;
}

.bena-promises--footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
    padding-block: 2.5rem;
    border-bottom: 1px solid var(--line-inverse);
}

.bena-promises--footer strong {
    display: block;
    font-weight: 500;
    font-size: 0.9375rem;
}

.bena-promises--footer span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--muted-inverse);
}

.bena-payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 2.5rem;
    border-bottom: 1px solid var(--line-inverse);
}

.bena-payments ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.bena-payments li {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--line-inverse);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted-inverse);
}

.bena-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    font-size: 0.8125rem;
    color: var(--muted-inverse);
}

.bena-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------- WooCommerce básico */

.woocommerce-page main,
.bena-page {
    padding-top: calc(var(--header-h) + var(--section-y));
    padding-bottom: var(--section-y);
    background: var(--ivory);
}

.bena-page__title {
    font-size: clamp(2.5rem, 5.4vw, 4rem);
    margin-bottom: 2rem;
}

.bena-prose {
    max-width: 44rem;
    font-size: 1.0625rem;
}

.bena-prose h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.125rem);
    margin-top: 2.75rem;
    margin-bottom: 0.9rem;
}

.bena-prose p,
.bena-prose ul,
.bena-prose ol {
    margin-top: 1.1rem;
    color: rgba(18, 17, 15, 0.78);
}

.bena-prose a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bena-prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
}

.bena-prose th,
.bena-prose td {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--line);
}

.bena-tax-note {
    color: var(--muted);
}

/* ------------------------------------------------------------------ móvil */

@media (max-width: 60rem) {
    .bena-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bena-terms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bena-standard__grid,
    .bena-club__grid,
    .bena-footer__top {
        grid-template-columns: 1fr;
    }

    .bena-promises--footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 46rem) {
    .bena-nav,
    .bena-actions__currency {
        display: none;
    }

    /* El menú abierto es un panel bajo la cabecera.
       Antes no existía: el JavaScript le ponía `display:block` a mano y la
       lista seguía siendo la fila horizontal del escritorio, así que en un
       móvil los enlaces se salían por la derecha y empujaban la bolsa a una
       segunda línea. El panel se dibuja aquí; el JavaScript sólo pone la
       clase. */
    .bena-nav.is-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0.25rem var(--gutter) 0.75rem;
        background: var(--ivory);
        color: var(--ink);
        border-top: 1px solid var(--line);
        box-shadow: 0 14px 28px rgba(18, 17, 15, 0.1);
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .bena-nav.is-open .bena-nav__list {
        display: block;
        font-size: 1rem;
    }

    .bena-nav.is-open .bena-nav__list li + li {
        border-top: 1px solid var(--line);
    }

    .bena-nav.is-open .bena-nav__list a {
        display: block;
        /* 48 px de alto libre: es el mínimo que se toca sin fallar. */
        padding-block: 0.95rem;
    }

    .bena-nav.is-open .bena-nav__list a::after {
        content: none;
    }

    .bena-menu-toggle {
        display: inline-flex;
        background: none;
        border: 0;
        padding: 0;
        color: inherit;
        cursor: pointer;
    }

    .bena-header__inner {
        grid-template-columns: auto 1fr auto;
    }

    .bena-wordmark {
        justify-self: center;
    }

    .bena-grid--2,
    .bena-grid--3,
    .bena-grid--4 {
        grid-template-columns: 1fr;
    }

    .bena-hero__explore {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .bena-card__media img,
    .bena-pet img {
        transition: none;
    }
}

/* ================================================================
   Portada — ajustes para replicar benapets.com

   Este bloque va al final a propósito: corrige reglas anteriores sin
   tener que reescribirlas, y deja en un solo sitio todo lo que se
   afinó comparando contra el sitio en producción.
   ================================================================ */

/* --- botones que faltaban ------------------------------------------------ */

/* Secundario: el de «Todas las colecciones» y «Lee nuestro estándar».
   Sobre fondo claro es un contorno; sobre oscuro hereda el color del texto,
   así que sirve en las dos superficies sin una variante aparte. */
.bena-button--outline {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    opacity: 0.9;
}

.bena-button--outline:hover {
    background: var(--ink);
    opacity: 1;
    color: var(--ivory);
    border-color: var(--ink);
}

.bena-section--ivory .bena-button--outline:hover,
.bena-section--bone .bena-button--outline:hover,
.bena-standard .bena-button--outline:hover {
    color: var(--ivory);
}

/* Sobre la fotografía oscura de materiales el botón es macizo y claro: es la
   única llamada de esa sección y tiene que ganar contra la imagen. */
.bena-button--inverse {
    background: var(--ivory);
    color: var(--ink);
    border-color: transparent;
}

.bena-button--inverse:hover {
    background: var(--parchment);
    color: var(--ink);
}

.bena-button--ghost-ink {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.35em;
    text-decoration-thickness: 1px;
}

/* --- encabezados --------------------------------------------------------- */

/* El filete corto delante del antetítulo. En el sitio anterior lo dibuja el
   componente Eyebrow; aquí es un pseudoelemento y no un carácter, para que no
   lo lea el lector de pantalla. */
.bena-overline--rule {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.bena-overline--rule::before {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

.bena-section__heading--center {
    justify-content: center;
    text-align: center;
}

.bena-section__heading--center .bena-lead {
    margin-inline: auto;
}

/* --- colecciones --------------------------------------------------------- */

/* Las columnas las decide la plantilla según cuántas categorías con producto
   existan. Cuatro tarjetas escritas a mano sobre un catálogo de tres es como
   el sitio anterior llegó a publicar tres enlaces rotos. */
.bena-grid--auto {
    grid-template-columns: repeat(var(--bena-cols, 4), minmax(0, 1fr));
}

/* 4:5, el mismo alto de tarjeta que el sitio en producción.
   `display: block` no es decorativo: el contenedor es un <span>, y sobre un
   elemento en línea `aspect-ratio` no hace nada. Sin esto cada tarjeta tomaba
   el alto de su propia foto —la de Paseo medía 830 px y la de Cuidado otra
   cosa— y la fila quedaba desigual. Venía así desde antes; se ve al medirlo,
   no al mirarlo. */
.bena-card__media {
    display: block;
    aspect-ratio: 4 / 5;
}

/* --- lo más elegido ------------------------------------------------------ */

.bena-destacados ul.products {
    margin: 0;
}

/* --- materiales ---------------------------------------------------------- */

/* En producción esta banda está centrada y ocupa 70svh, con un velo plano en
   vez de un degradado lateral: la fotografía se ve entera y el texto flota
   encima. La versión anterior la tenía alineada a la izquierda con la foto
   medio tapada, que es de donde venía la sensación de «no es igual». */
.bena-materials {
    display: grid;
    align-items: center;
    min-height: 70svh;
    padding-block: clamp(5rem, 11vw, 9rem);
}

.bena-materials::before {
    background: rgba(14, 13, 12, 0.55);
}

.bena-materials__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bena-materials__title {
    max-width: 20ch;
    margin-top: 2rem;
    font-family: var(--serif);
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ivory);
}

.bena-materials .bena-lead {
    max-width: 54ch;
    margin-inline: auto;
}

.bena-materials .bena-button {
    margin-top: 2.5rem;
}

/* --- por mascota --------------------------------------------------------- */

/* Texto a la izquierda y «Ver» abajo a la derecha, en la misma línea de base. */
.bena-pet__body {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.bena-pet__cta {
    flex-shrink: 0;
    margin-top: 0;
    padding-bottom: 0.35rem;
    color: rgba(252, 250, 246, 0.75);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bena-pet__cta::after {
    content: " \2192";
}

.bena-pet:hover .bena-pet__cta {
    transform: translateX(0.25rem);
}

/* --- nuestro estándar ---------------------------------------------------- */

/* El collage va a la derecha en escritorio y arriba en móvil, como en
   producción. Y entero: es un mosaico de cuatro fotos, recortarlo a 4:5 le
   cortaba dos. */
.bena-standard__copy {
    order: 2;
}

.bena-standard__media {
    order: 1;
}

.bena-standard__media img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--bone);
}

@media (min-width: 62.0625rem) {
    .bena-standard__copy {
        order: 1;
    }

    .bena-standard__media {
        order: 2;
    }
}

/* --- condiciones --------------------------------------------------------- */

.bena-terms__icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 1rem;
    color: var(--clay, #a8724c);
}

/* --- instagram ----------------------------------------------------------- */

.bena-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bena-gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--parchment);
}

.bena-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bena-gallery__item:hover img {
    transform: scale(1.05);
}

.bena-gallery__caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--ivory);
    background: linear-gradient(to top, rgba(14, 13, 12, 0.72) 0%, rgba(14, 13, 12, 0) 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bena-gallery__item:hover .bena-gallery__caption,
.bena-gallery__item:focus-visible .bena-gallery__caption {
    opacity: 1;
}

/* En un móvil no hay hover: el pie se muestra siempre o no se muestra nunca. */
@media (hover: none) {
    .bena-gallery__caption {
        opacity: 1;
    }
}

/* --- formulario en línea -------------------------------------------------- */

/* El campo del sitio en producción no es una caja: es una línea con el botón
   al final, sobre la misma raya. Ocupa una fila en vez de tres y deja de
   parecer un formulario de contacto pegado dentro de una tarjeta. */
.bena-form--linea {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1rem;
    max-width: 30rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.35rem;
}

.bena-form--linea input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.9375rem;
}

.bena-form--linea input[type="email"]:focus-visible {
    outline: none;
}

.bena-form--linea:focus-within {
    border-bottom-color: currentColor;
    box-shadow: 0 1px 0 0 currentColor;
}

.bena-form--linea button {
    flex-shrink: 0;
    padding: 0.5rem 0;
    background: transparent;
    color: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
}

.bena-form--linea button:hover {
    opacity: 0.65;
}

/* --- club bena ----------------------------------------------------------- */

.bena-h2--small {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.08;
}

.bena-club__grid {
    align-items: center;
}

.bena-club__badge {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: auto;
    text-align: left;
    padding: clamp(1.75rem, 3vw, 2.35rem);
    border: 1px solid rgba(252, 250, 246, 0.09);
    border-radius: 0.5rem;
    box-shadow: 0 24px 70px rgba(18, 17, 15, 0.12);
}

/* Con `.bena-club__watermark` a secas ganaba `.bena-club__badge span`, que es
   más específico, y el «10» salía a 11 px como si fuera texto legal. */
.bena-club__badge .bena-club__watermark {
    position: absolute;
    top: -2.75rem;
    right: -0.75rem;
    margin: 0;
    font-family: var(--serif);
    font-size: 9rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(252, 250, 246, 0.05);
    pointer-events: none;
}

.bena-club__badge .bena-overline {
    position: relative;
    margin-bottom: 0;
    color: #d7ad86;
}

.bena-club__pitch {
    position: relative;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: rgba(252, 250, 246, 0.8);
}

.bena-club__badge .bena-form--linea {
    position: relative;
    max-width: none;
    margin-top: 1rem;
    border-bottom-color: rgba(252, 250, 246, 0.28);
    color: var(--ivory);
}

.bena-club__badge .bena-form--linea input[type="email"]::placeholder {
    color: rgba(252, 250, 246, 0.45);
}

.bena-club__terms {
    position: relative;
    margin-top: 1.1rem;
    font-size: 0.75rem;
    color: rgba(252, 250, 246, 0.5);
}

/* --- pie ----------------------------------------------------------------- */

/* Dos bloques, no cuatro columnas: la marca a la izquierda con sitio para el
   sello, y los enlaces agrupados a la derecha. Con 1.4fr y tres columnas
   iguales, la carta y el formulario quedaban estrujados contra «Comprar». */
.bena-footer__top {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.bena-footer__lockup {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* El sello es un círculo con ilustración, letra y lema dentro. A tamaño de
   cabecera se convierte en una mancha, por eso solo aparece aquí, donde hay
   espacio para leerlo. */
.bena-footer__badge {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
}

.bena-footer__lockup .bena-wordmark {
    font-size: 1.6rem;
}

.bena-footer__tagline {
    margin-top: 1.5rem;
    max-width: 38ch;
    font-size: 1.0625rem;
    color: rgba(252, 250, 246, 0.6);
}

.bena-footer__note {
    margin-top: 1.5rem;
    max-width: 34ch;
    font-size: 0.8125rem;
    color: rgba(252, 250, 246, 0.55);
}

.bena-footer__brand .bena-form--linea {
    margin-top: 0.75rem;
    border-bottom-color: rgba(252, 250, 246, 0.28);
}

.bena-footer__brand .bena-form--linea input[type="email"] {
    background: transparent !important;
    color: var(--ivory);
}

.bena-footer__brand .bena-form--linea input[type="email"]::placeholder {
    color: rgba(252, 250, 246, 0.4);
}

.bena-newsletter__notice {
    max-width: 38rem;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0;
    border-top: 1px solid rgba(252, 250, 246, 0.2);
    border-bottom: 1px solid rgba(252, 250, 246, 0.2);
    color: rgba(252, 250, 246, 0.82);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.bena-newsletter__terms {
    max-width: 46ch;
    margin-top: 0.75rem;
    color: rgba(252, 250, 246, 0.46);
    font-size: 0.6875rem;
    line-height: 1.55;
}

.bena-footer__contacto {
    margin-top: 2rem;
    display: grid;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: rgba(252, 250, 246, 0.6);
}

.bena-footer__contacto a {
    width: fit-content;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.bena-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.bena-footer__col h2 {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(252, 250, 246, 0.6);
    margin: 0 0 1.1rem;
}

/* --- marcas de pago ------------------------------------------------------ */

.bena-payments {
    align-items: flex-start;
}

.bena-payments .bena-overline {
    margin-bottom: 0;
    color: rgba(252, 250, 246, 0.6);
}

.bena-payment-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.bena-payment-marks ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Las marcas van sobre blanco porque así están definidas sus normas de uso:
   el azul de Visa y el rojo de Mastercard pierden contraste sobre obsidiana. */
.bena-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 1.75rem;
    padding: 0.2rem;
    overflow: hidden;
    border-radius: 0.15rem;
    background: #fff;
}

.bena-mark--ancha {
    width: 3.5rem;
}

.bena-mark svg {
    width: 100%;
    height: 100%;
}

.bena-payment-marks__pronto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bena-payment-marks__pronto span {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(252, 250, 246, 0.5);
}

.bena-payments__nota {
    margin-top: 0.9rem;
    max-width: 46ch;
    font-size: 0.8125rem;
    color: rgba(252, 250, 246, 0.6);
}

.bena-payments__moneda {
    text-align: right;
    font-size: 0.875rem;
}

.bena-payments__moneda p:last-child {
    margin-top: 0.5rem;
}

/* --- línea legal --------------------------------------------------------- */

.bena-footer__legal {
    gap: 1rem 2rem;
}

.bena-footer__legal ul {
    margin: 0;
}

.bena-footer__social {
    margin-left: auto;
}

@media (max-width: 62rem) {
    .bena-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }

    .bena-payments__moneda {
        text-align: left;
    }

    .bena-footer__social {
        margin-left: 0;
    }
}

@media (max-width: 40rem) {
    .bena-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bena-promises--footer {
        grid-template-columns: minmax(0, 1fr);
    }

    /* En un teléfono el campo y el botón en la misma línea dejan al correo
       cuatro caracteres visibles. */
    .bena-form--linea {
        flex-wrap: wrap;
        border-bottom: 0;
        padding-bottom: 0;
    }

    .bena-form--linea input[type="email"] {
        flex-basis: 100%;
        border-bottom: 1px solid currentColor;
    }

    .bena-form--linea button {
        padding-top: 0.75rem;
    }
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 62rem) {
    .bena-grid--auto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bena-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bena-materials {
        min-height: 0;
    }
}

@media (max-width: 48rem) {
    .bena-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* El título y el «Ver» uno debajo del otro: en una tarjeta de 320 px, en
       fila, el título se parte palabra por palabra. */
    .bena-pet__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .bena-pet__cta {
        padding-bottom: 0;
    }
}

@media (max-width: 32rem) {
    .bena-grid--auto {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================================
   Carrito lateral
   ================================================================ */

.bena-sin-scroll,
.bena-sin-scroll body {
    overflow: hidden;
}

/* El body FIJO, no solo con `overflow: hidden`.
   En iOS Safari `overflow: hidden` sobre <html>/<body> no bloquea el scroll de
   fondo y encima tira la posición: al abrir el carrito la página de detrás
   saltaba, y otra vez al cerrar. Fijándolo en negativo a la altura exacta del
   scroll —el `top` lo pone el JS— la página no se mueve ni un píxel, y al
   soltar se devuelve donde estaba. */
.bena-sin-scroll body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.bena-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.bena-drawer[hidden] {
    display: none;
}

.bena-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 13, 12, 0.45);
    opacity: 0;
    transition: opacity 0.26s ease;
}

.bena-drawer.is-open .bena-drawer__backdrop {
    opacity: 1;
}

.bena-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(30rem, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--ivory);
    box-shadow: -24px 0 70px rgba(18, 17, 15, 0.18);
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.bena-drawer.is-open .bena-drawer__panel {
    transform: translateX(0);
}

/* Mientras el servidor recalcula, el panel deja de aceptar clics —sin esto,
   tres pulsaciones rápidas en «+» mandan tres peticiones y la última en
   llegar decide la cantidad, que no tiene por qué ser la última pulsada— y
   una capa propia lo tapa por dentro.
   Antes esto se hacía bajando la opacidad del panel ENTERO. El panel no tiene
   más fondo que `background: var(--ivory)`, así que atenuar su opacidad
   atenúa también ese fondo, y lo que hay detrás —la página, el header fijo
   del sitio— se transparenta a través del carrito mientras carga. Es la
   misma trampa que ya se corrigió en /carrito/ con el overlay de blockUI:
   una capa PROPIA y opaca encima del contenido, no un cristal sobre todo el
   panel. Mismo lenguaje visual: tono cálido del sitio y un aro que gira. */
/* Bloquear los clics es inmediato; tapar el panel, no. Son dos cosas distintas
   y antes iban en la misma clase: por eso el velo salía siempre, incluso cuando
   la respuesta tardaba 100 ms. */
.bena-drawer__panel.is-bloqueado {
    pointer-events: none;
}

.bena-drawer__panel.is-cargando {
    pointer-events: none;
}

.bena-drawer__panel.is-cargando::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--ivory);
    opacity: 0.92;
}

.bena-drawer__panel.is-cargando::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.875rem 0 0 -0.875rem;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: bena-cart-gira 0.7s linear infinite;
}

.bena-drawer__contenido {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.bena-drawer__cabecera {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.5rem clamp(1.25rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--line);
}

.bena-drawer__cabecera .bena-overline {
    margin: 0;
    color: var(--ink);
}

.bena-drawer__cuenta {
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-drawer__cerrar {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--line);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease;
}

.bena-drawer__cerrar:hover {
    background: var(--parchment);
}

.bena-drawer__cerrar svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.bena-drawer__envio {
    padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem);
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--line);
}

.bena-drawer__barra {
    display: block;
    height: 2px;
    margin-top: 0.7rem;
    background: var(--line);
}

.bena-drawer__barra i {
    display: block;
    height: 100%;
    background: var(--ink);
    transition: width 0.4s ease;
}

.bena-drawer__lista {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.5rem clamp(1.25rem, 3vw, 1.75rem);
}

.bena-drawer__articulo {
    display: flex;
    gap: 1rem;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.bena-drawer__miniatura {
    flex-shrink: 0;
    width: 4.5rem;
}

.bena-drawer__miniatura img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--parchment);
}

.bena-drawer__datos {
    flex: 1 1 auto;
    min-width: 0;
}

.bena-drawer__fila {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bena-drawer__fila--acciones {
    align-items: center;
    margin-top: 0.9rem;
}

.bena-drawer__nombre {
    font-size: 0.9375rem;
    line-height: 1.35;
}

.bena-drawer__precio {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.9375rem;
}

.bena-drawer__precio del {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-drawer__ahorro-articulo {
    display: block;
    margin-top: 0.2rem;
    color: #2f6b46;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.bena-drawer__variacion {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
}

.bena-stepper button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.bena-stepper button:hover {
    background: var(--parchment);
}

.bena-stepper > span {
    min-width: 2rem;
    text-align: center;
    font-size: 0.875rem;
}

.bena-drawer__quitar {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    cursor: pointer;
}

.bena-drawer__quitar:hover {
    color: var(--ink);
}

.bena-drawer__pie {
    flex-shrink: 0;
    padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem) 1.5rem;
    border-top: 1px solid var(--line);
    background: var(--bone);
}

.bena-drawer__cupon .bena-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.bena-drawer__cupon-campo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.bena-drawer__cupon-campo input {
    flex: 1 1 10rem;
    min-width: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    font: inherit;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.bena-drawer__cupon-campo button {
    padding: 0.65rem 1.1rem;
    border: 0;
    background: var(--ink);
    color: var(--ivory);
    font: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.bena-drawer__aviso {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: #a1281e;
}

.bena-drawer__totales {
    margin: 1.25rem 0 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.bena-drawer__totales > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.bena-drawer__totales dt,
.bena-drawer__totales dd {
    margin: 0;
}

.bena-drawer__totales dd {
    text-align: right;
}

.bena-drawer__ahorro dt,
.bena-drawer__ahorro dd {
    color: #2f6b46;
    font-weight: 500;
}

.bena-drawer__cupon-quitar {
    display: block;
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.bena-drawer__cupon-quitar:hover,
.bena-drawer__cupon-quitar:focus-visible {
    color: var(--ink);
}

.bena-drawer__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.bena-drawer__total strong {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
}

.bena-drawer__ahorro-total {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(47, 107, 70, 0.25);
    background: rgba(47, 107, 70, 0.07);
    color: #2f6b46;
}

.bena-drawer__ahorro-total svg {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bena-drawer__ahorro-total strong,
.bena-drawer__ahorro-total small {
    display: block;
}

.bena-drawer__ahorro-total strong {
    font-size: 0.9375rem;
    font-weight: 500;
}

.bena-drawer__ahorro-total small {
    margin-top: 0.15rem;
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.68;
}

/* Base e IVA van separados del bloque de arriba por una línea: arriba está lo
   que se compra, abajo cómo se compone el total. Sin esa separación las seis
   filas se leen como una lista sola y cuesta encontrar dónde termina la
   compra y empieza la factura. */
.bena-drawer__totales--base {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
}

.bena-drawer__pendiente {
    margin-top: 0.55rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted);
}

.bena-drawer__pendiente {
    margin-top: 0.25rem;
}

.bena-drawer__pagar {
    display: flex;
    width: 100%;
    margin-top: 1.1rem;
    background: var(--ink);
    color: var(--ivory);
}

.bena-drawer__pagar:hover {
    background: var(--obsidian);
}

.bena-drawer__seguir {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    cursor: pointer;
}

.bena-drawer__confianza {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
}

.bena-drawer__confianza svg {
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.bena-drawer__pie .bena-payment-marks {
    justify-content: center;
    margin-top: 0.9rem;
}

.bena-drawer__vacio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.75rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    font-size: 0.9375rem;
    color: var(--muted);
}

.bena-drawer__vacio-titulo {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--ink);
}

.bena-drawer__vacio .bena-button {
    margin-top: 0.75rem;
    background: var(--ink);
    color: var(--ivory);
}

/* En teléfonos, el resumen puede crecer con cupones y varios métodos de pago.
   Hacer desplazable todo el panel evita reducir la lista de productos a una
   franja mínima y también evita dos áreas de desplazamiento anidadas. */
@media (max-width: 32rem) {
    .bena-drawer__contenido {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .bena-drawer__cabecera {
        position: sticky;
        top: 0;
        z-index: 2;
        flex-shrink: 0;
        background: var(--ivory);
    }

    .bena-drawer__lista {
        flex: 0 0 auto;
        overflow: visible;
    }

    .bena-drawer__pie {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bena-drawer__panel,
    .bena-drawer__backdrop,
    .bena-drawer__barra i {
        transition: none;
    }
}

/* «Quitar» o cambiar la cantidad repinta `bena-drawer__contenido` entero de
   un innerHTML —los totales, el IVA y la barra de envío cambian con
   cualquier línea, así que se vuelve a dibujar todo junto—. Sin esto, cada
   cambio hacía que las fotos de los productos que quedaban en la lista
   desaparecieran y volvieran a aparecer de un salto, porque son nodos nuevos
   sin ninguna transición. Aquí no se toca el JS: se anima cada hijo directo
   del contenido en cuanto entra al documento, que es exactamente cuándo
   ocurre esto —de la misma reconstrucción del panel—, sea la apertura
   normal o un repintado por «Quitar»/cantidad. Funciona igual en cualquier
   ancho: no depende de ningún media query. */
.bena-drawer__contenido > * {
    animation: bena-cart-entra 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .bena-drawer__contenido > *,
    .bena-drawer__panel.is-cargando::before {
        animation: none;
    }
}

/* ================================================================
   Carrito, pago y cuenta como páginas

   Son páginas de WordPress con un shortcode dentro, así que caían en
   la caja de lectura de un artículo: 704 px de ancho para una tabla
   de cinco columnas. Aquí recuperan el ancho de la tienda.
   ================================================================ */

.bena-page--tienda .bena-prose {
    max-width: none;
}

.bena-page--tienda .bena-article {
    max-width: none;
}

.woocommerce-account .bena-page--tienda .bena-prose,
.woocommerce-cart .bena-page--tienda .bena-prose,
.woocommerce-checkout .bena-page--tienda .bena-prose {
    max-width: none;
}

/* --- carrito como página -------------------------------------------------- */

/* La tabla a la izquierda y los totales a la derecha. WooCommerce los apila,
   y en un escritorio de 1100 px eso deja media pantalla en blanco y obliga a
   bajar para ver cuánto se paga. */
.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals {
    width: auto;
    float: none;
}

/* El campo de cantidad heredaba el `width: 100%` de los formularios y salía de
   360 px para un número de dos cifras. Sin el resto —borde, alto, fondo—
   quedaba como una caja de navegador sin estilo, la única del carrito. */
.woocommerce .quantity input[type="number"],
.woocommerce .quantity .qty {
    width: 5rem;
    min-width: 0;
    height: 2.75rem;
    padding: 0 0.5rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    font: inherit;
    font-size: 0.9375rem;
    text-align: center;
}

@media (max-width: 62rem) {
    .woocommerce-cart .woocommerce {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- checkout en pasos ---------------------------------------------------- */

/* Reduce espacio entre header y "Finalizar compra" — profesional y compacto */
.woocommerce-page.woocommerce-checkout main,
.woocommerce-page.woocommerce-cart main,
.woocommerce-page.woocommerce-account main {
    padding-top: calc(var(--header-h) + 1.5rem);
}

.woocommerce-checkout .bena-page__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
}

.bena-checkout__intro {
    max-width: 46ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    color: var(--muted);
}

.bena-checkout__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

/* Tres cajas, colocadas a mano: en escritorio los datos y el pago siguen
   siendo una sola columna de arriba abajo y el resumen ocupa la derecha
   entera. El orden del HTML no manda aquí; manda en el móvil. */
.bena-checkout__flujo {
    grid-column: 1;
    grid-row: 1;
}

.bena-checkout__pago {
    grid-column: 1;
    grid-row: 2;
}

.bena-checkout__resumen {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.bena-checkout .col2-set,
.bena-checkout .col2-set .col-1,
.bena-checkout .col2-set .col-2 {
    display: block;
    width: auto;
    float: none;
}

.bena-paso + .bena-paso,
.bena-checkout__pago > .bena-paso,
.bena-checkout__flujo > .bena-paso {
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.bena-checkout__flujo > .woocommerce-billing-fields > .bena-paso:first-of-type,
.bena-checkout__flujo .bena-billing > .bena-paso:first-of-type {
    margin-top: 0;
}

/* El número dentro de un círculo, como en producción. Va en un <span> aparte y
   marcado como decorativo: un lector de pantalla que lee «1 Contacto» no gana
   nada, ya sabe que es el primer encabezado. */
.bena-paso__titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-family: var(--sans);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
}

.bena-paso__titulo span {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* Los encabezados que WooCommerce imprime por su cuenta sobran: los pasos ya
   los sustituyen. */
.bena-checkout .woocommerce-billing-fields > h3,
.bena-checkout #ship-to-different-address {
    display: none;
}

.bena-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
}

.bena-campos .form-row-wide,
.bena-campos .form-row[class*="notes"],
.bena-campos #billing_address_1_field,
.bena-campos #billing_address_2_field,
.bena-campos #billing_company_field,
.bena-campos #billing_country_field,
.bena-campos #billing_email_field {
    grid-column: 1 / -1;
}

/* El correo antes que el celular. WooCommerce ordena los campos por su
   prioridad interna (celular 100, correo 110) y esa prioridad gana sobre el
   orden en que la plantilla los pide. Con `order` la rejilla decide, y el
   correo queda primero: es el dato con el que se recupera un carrito
   abandonado en el paso siguiente. */
.bena-paso #billing_email_field {
    order: -1;
}

.bena-checkout .form-row {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
}

.bena-checkout .form-row label {
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-checkout .form-row .required {
    color: #a1281e;
    text-decoration: none;
}

.bena-checkout .form-row .description,
.bena-checkout .form-row small {
    font-size: 0.75rem;
    color: var(--muted);
}

.bena-checkout input.input-text,
.bena-checkout textarea,
.bena-checkout select,
.bena-checkout .select2-container .select2-selection--single {
    width: 100%;
    padding: 0.85rem 0.95rem;
    height: auto;
    border: 1px solid var(--line);
    background: var(--ivory);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
}

.bena-checkout input.input-text:focus,
.bena-checkout select:focus,
.bena-checkout textarea:focus {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
}

/* Ocultar el bloque de errores grande de arriba solo si hay campos inválidos */
.woocommerce:has(form.checkout .woocommerce-invalid) .woocommerce-notices-wrapper,
.woocommerce:has(form.checkout .woocommerce-invalid) .woocommerce-error {
    display: none !important;
}

/* Campos inválidos (validación fallida) */
.bena-checkout .form-row.woocommerce-invalid input.input-text,
.bena-checkout .form-row.woocommerce-invalid select,
.bena-checkout .form-row.woocommerce-invalid textarea,
.bena-checkout .form-row.woocommerce-invalid .select2-container .select2-selection--single {
    border-color: #d93025;
    background-color: #fcf4f4;
}

.bena-checkout .form-row.woocommerce-invalid label {
    color: #d93025;
}

/* Texto de "Obligatorio" debajo del campo */
.bena-checkout .form-row.woocommerce-invalid::after {
    content: "Este campo es obligatorio.";
    display: block;
    color: #d93025;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* --- Módulos de Landing Page (Comparación y Testimonios) --- */

.bena-comparison-block,
.bena-testimonials-carousel {
    width: 100%;
    margin: 3rem auto;
    padding: 0 1rem;
    max-width: 600px; /* Optimal for mobile/tablet focus */
}

.bena-testimonials-carousel {
    overflow: hidden;
}

.bena-comparison-block h2,
.bena-testimonials-carousel h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--ink);
    font-weight: 700;
}

.bena-comparison-grid {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.bena-comp-item {
    flex: 1 1 200px;
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
}

.bena-comp-bena {
    border: 2px solid #5a9b7c; /* Brand color highlight */
    background: #f4fbf7;
    transform: scale(1.02);
}

.bena-comp-item h3 {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 600;
}

.bena-comp-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bena-comp-item ul li {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.bena-icon-check::before { content: '✅'; }
.bena-icon-cross::before { content: '❌'; }

/* Carrusel de testimonios básico */
.bena-carousel-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.bena-testimonial-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
    flex: 0 0 80%;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}

.bena-testimonial-stars {
    color: #FFC107;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.bena-testimonial-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-style: italic;
    color: #444;
}

.bena-testimonial-card strong {
    font-size: 0.9rem;
    color: var(--ink);
}

@media (max-width: 46rem) {
    .bena-testimonial-card {
        flex-basis: 100%;
        scroll-snap-align: start;
    }
}

/* Gráfico de barras de reseñas custom */
.bena-reviews-custom {
    margin-top: 2rem;
}
.bena-reviews-summary {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
}

.bena-rs-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.bena-rs-score {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ink);
}

.bena-rs-stars {
    color: #FFC107;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.bena-rs-count {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}

.bena-rs-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.bena-rs-bar-label {
    width: 30px;
    font-weight: 600;
    color: #444;
}

.bena-rs-bar-track {
    flex: 1;
    height: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}

.bena-rs-bar-fill {
    height: 100%;
    background: #5a9b7c; /* Brand color */
    border-radius: 5px;
}

.bena-rs-bar-count {
    width: 30px;
    text-align: right;
    color: #888;
}

/* Ocultar SOLAMENTE el gráfico feo del plugin, PERO mantener los botones de filtro */
body #reviews .wcpr-overall-rating-and-rating-count,
body .wcpr-overall-rating-and-rating-count,
body #reviews .woocommerce-Reviews-title,
body .woocommerce-Reviews-title {
    display: none !important;
}

/* Separación para los filtros del plugin */
.wcpr-filter-container {
    margin-bottom: 2rem !important;
    border: none !important;
    padding: 0 !important;
}

/* Rating Superior en el Producto */
.bena-top-rating {
    margin-bottom: 1.5rem;
}
.bena-top-rating a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--ink);
}
.bena-top-rating .bena-rs-stars {
    font-size: 1rem;
}
.bena-top-rating .bena-rs-top-score {
    font-weight: 700;
}
.bena-top-rating .bena-rs-top-count {
    color: var(--muted);
    text-decoration: underline;
    font-size: 0.9rem;
}

/* --- paso 3: entrega ----------------------------------------------------- */

.bena-envio__opcion {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.bena-envio__opcion:hover {
    border-color: var(--ink);
}

.bena-envio__opcion:has(input:checked) {
    border-color: var(--ink);
    background: var(--bone);
}

.bena-envio__opcion input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ink);
}

.bena-envio__datos {
    flex: 1 1 auto;
    min-width: 0;
}

.bena-envio__nombre {
    display: block;
    font-size: 0.9375rem;
}

.bena-envio__detalle {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-envio__precio {
    flex-shrink: 0;
    font-size: 0.9375rem;
}

.bena-envio__aviso,
.bena-envio__nota {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--muted);
    background: var(--bone);
}

.bena-envio__nota {
    margin-top: 0.75rem;
    background: transparent;
    padding-inline: 0;
    font-size: 0.8125rem;
}

/* --- paso 4: pago -------------------------------------------------------- */

.bena-checkout #payment {
    background: transparent;
}

.bena-checkout #payment ul.payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    border: 0;
}

.bena-checkout #payment li.wc_payment_method {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    background: var(--ivory);
}

.bena-checkout #payment li.wc_payment_method:has(input:checked) {
    border-color: var(--ink);
    background: var(--bone);
}

.bena-checkout #payment li.wc_payment_method > label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    cursor: pointer;
}

.bena-checkout #payment li.wc_payment_method input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ink);
}

.bena-checkout #payment .payment_box {
    margin-top: 0.9rem;
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
    color: var(--muted);
}

.bena-checkout #payment .payment_box::before {
    display: none;
}

/* Tarjetas guardadas de PayPhone. La casilla vive dentro de la caja del método
   de tarjeta y la lista de tarjetas dentro de la de «tarjeta guardada», así que
   heredan el color apagado del `.payment_box`; se les devuelve el color de
   texto para que la etiqueta que hay que leer y marcar no parezca una nota al
   pie. */
.bena-checkout #payment .bpec-guardar-tarjeta,
.bena-checkout #payment .bpec-tarjetas {
    margin: 0.75rem 0 0;
    color: var(--ink);
}

.bena-checkout #payment .bpec-guardar-tarjeta label,
.bena-checkout #payment .bpec-tarjetas label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}

.bena-checkout #payment .bpec-guardar-tarjeta input[type="checkbox"],
.bena-checkout #payment .bpec-tarjetas input[type="radio"] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--ink);
}

.bena-checkout #payment .bpec-guardar-tarjeta small {
    display: block;
    margin-top: 0.35rem;
    padding-left: 1.6rem;
    color: var(--muted);
    line-height: 1.45;
}

.bena-checkout #payment .bpec-tarjetas {
    list-style: none;
    padding: 0;
}

.bena-checkout #payment .bpec-tarjetas li + li {
    margin-top: 0.5rem;
}

.bena-metodos-nota {
    margin-top: 1rem;
    max-width: 42rem;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* El enlace para cambiar la contraseña sustituye a un bloque de tres campos:
   tiene que verse como una acción, no como una nota al pie perdida. */
.bena-cuenta-clave {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1rem;
    background: var(--sand, #f4f1ea);
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.6;
}

.bena-cuenta-clave a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* La tira de valoración, en el orden de Amazon: nota, estrellas y conteo. Va
   en una sola línea que no se parte, porque partida deja las estrellas
   huérfanas encima del número y se lee como si fueran dos cosas distintas. */
.bena-top-rating .woocommerce-review-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.bena-rs-top-score {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}

.bena-top-rating .bena-rs-stars .star-rating {
    font-size: 0.85rem;
    color: var(--clay, #b4552d);
}

.bena-rs-top-count {
    font-size: 0.875rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bena-top-rating .woocommerce-review-link:hover .bena-rs-top-count {
    color: var(--ink);
}

.bena-top-rating--vacia .bena-rs-top-count {
    text-decoration: underline;
}

.bena-checkout #payment .place-order {
    padding: 0;
    margin-top: 1.5rem;
}

.bena-checkout #place_order {
    width: 100%;
    padding: 1.1rem 2rem;
    border: 0;
    background: var(--ink);
    color: var(--ivory);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.bena-checkout #place_order:hover {
    background: var(--obsidian);
}

.bena-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* --- resumen del pedido -------------------------------------------------- */

.bena-checkout__resumen {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
}

table.bena-resumen {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line);
    background: var(--bone);
}

.bena-resumen__titulo {
    padding: 1.25rem 1.35rem 0;
    text-align: left;
    caption-side: top;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

table.bena-resumen td,
table.bena-resumen th {
    padding: 0.5rem 1.35rem;
    border: 0;
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
}

table.bena-resumen tbody tr:first-child td {
    padding-top: 1.25rem;
}

table.bena-resumen tbody tr:last-child td {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.bena-resumen__foto {
    width: 4rem;
}

/* `inline-block`, no `block`: en bloque el <span> se estiraba a toda la celda
   —64 px— mientras la foto mide 52, así que la chapa de la cantidad se anclaba
   al borde de la CELDA y no al de la foto, y se metía 7 px dentro del nombre
   del producto, tapándole las primeras letras. Encogido a la foto, la chapa cae
   donde debe y el nombre se lee entero. */
.bena-resumen__miniatura {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.bena-resumen__miniatura img {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    background: var(--parchment);
}

/* La cantidad va como chapa sobre la esquina, no como columna: una columna
   entera para el número «1» es la mitad del ancho de una tarjeta de resumen. */
.bena-resumen__cantidad {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    display: grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--ivory);
    font-size: 0.6875rem;
    font-style: normal;
}

.bena-resumen__nombre {
    font-size: 0.875rem;
    line-height: 1.35;
}

.bena-resumen__nombre .variation {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-resumen__nombre .variation dt,
.bena-resumen__nombre .variation dd {
    display: inline;
    margin: 0;
}

.bena-resumen__precio {
    text-align: right;
    white-space: nowrap;
    font-size: 0.875rem;
}

table.bena-resumen tfoot th {
    font-size: 0.875rem;
    color: var(--muted);
}

table.bena-resumen tfoot td {
    text-align: right;
    font-size: 0.875rem;
}

table.bena-resumen tfoot tr:first-child th,
table.bena-resumen tfoot tr:first-child td {
    padding-top: 1.1rem;
}

table.bena-resumen tfoot tr.order-total th,
table.bena-resumen tfoot tr.order-total td {
    padding-top: 1rem;
    padding-bottom: 1.35rem;
    border-top: 1px solid var(--line);
}

table.bena-resumen tfoot tr.order-total th {
    font-size: 1rem;
    color: var(--ink);
}

table.bena-resumen tfoot tr.order-total td {
    font-family: var(--serif);
    font-size: 1.5rem;
}

table.bena-resumen tfoot tr.order-total .woocommerce-Price-amount {
    font-weight: 400;
}

table.bena-resumen tfoot tr.bena-resumen__total--con-nota th,
table.bena-resumen tfoot tr.bena-resumen__total--con-nota td {
    padding-bottom: 0.55rem;
}

table.bena-resumen tfoot tr.bena-resumen__nota td {
    padding-top: 0;
    padding-bottom: 0.55rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted);
}

table.bena-resumen tfoot tr.bena-resumen__nota--envio td {
    padding-bottom: 1.35rem;
}

/* El IVA se declara DEBAJO del total, no como línea que se suma: los precios
   ya lo llevan dentro, así que sumarlo aparte obligaba a poner las demás
   líneas sin impuesto y a cambiar de moneda a mitad del resumen. Es una nota
   legal, y se ve como las otras notas del pie. */
table.bena-resumen tfoot tr.bena-resumen__nota--iva td {
    padding-bottom: 0.55rem;
}

table.bena-resumen tfoot tr.bena-resumen__nota--iva:last-child td {
    padding-bottom: 1.35rem;
}

.cart_totals tr.bena-carrito__iva-nota td {
    padding-top: 0;
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
}

.bena-drawer__iva {
    margin: 0.35rem 0 0;
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
}

/* WooCommerce cuelga «(incluye $4.37 IVA 15%)» del número principal. Aquí ya
   se explica el impuesto en una nota legible, así que ocultamos el duplicado. */
table.bena-resumen tfoot tr.order-total .includes_tax {
    display: none;
}

@media (max-width: 62rem) {
    .bena-checkout__cols {
        grid-template-columns: minmax(0, 1fr);
    }

    /* En móvil el resumen iba primero, y ocupaba la pantalla entera: se abría
       el checkout y no se veía ni un campo del formulario. Ahora va en medio,
       entre los datos y el pago. No al final: el botón «Realizar pedido» está
       dentro del paso de Pago, así que el resumen habría quedado debajo del
       botón. Así se rellena, se ve cuánto se paga, y se paga. */
    .bena-checkout__resumen {
        position: static;
        margin: 0 0 2rem;
    }

    .bena-checkout__cols {
        display: flex;
        flex-direction: column;
    }

    .bena-checkout__flujo { order: 1; }
    .bena-checkout__resumen { order: 2; }
    .bena-checkout__pago { order: 3; }
}

@media (max-width: 40rem) {
    .bena-campos {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- mi cuenta ----------------------------------------------------------- */

.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

/* La pantalla de acceso no tiene menú lateral: sin esto queda una columna
   vacía de quince rem y el formulario arrinconado a la derecha. */
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
    display: block;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
    border-top: 1px solid var(--line);
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    color: var(--muted);
}

.woocommerce-MyAccount-navigation li a:hover {
    color: var(--ink);
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: var(--ink);
    font-weight: 500;
}

.woocommerce-MyAccount-content > p:first-child {
    font-size: 1.0625rem;
}

.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
}

/* Los dos formularios de acceso, uno al lado del otro y con caja propia. */
.woocommerce-account .u-columns.col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}

.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
    width: auto;
    float: none;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--line);
    background: var(--bone);
}

.woocommerce form .form-row {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.woocommerce form .form-row label {
    font-size: 0.8125rem;
    color: var(--muted);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
}

.woocommerce form .form-row .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button {
    padding: 0.9rem 1.75rem;
    border: 0;
    background: var(--ink);
    color: var(--ivory);
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

.woocommerce-LostPassword {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

@media (max-width: 62rem) {
    .woocommerce-account .woocommerce,
    .woocommerce-account .u-columns.col2-set {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================================
   WooCommerce
   El tema desactiva las hojas de WooCommerce para no heredar su
   aspecto genérico. Todo lo que la tienda necesita se define aquí.
   ================================================================ */

.woocommerce-page main,
.woocommerce main {
    padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem));
    padding-bottom: var(--section-y);
    background: var(--ivory);
}

/* Carrito, checkout y cuenta usan page.php, que ya vive dentro del <main> de
   WooCommerce. Evita sumar otra vez la altura de la cabecera y el espaciado de
   sección en el contenedor interior. */
.woocommerce-page main > .bena-page {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

.woocommerce main > .bena-wrap,
.woocommerce-page main > .bena-wrap {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.woocommerce-page h1,
.woocommerce h1.entry-title,
.woocommerce-products-header__title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    margin-bottom: 2rem;
}

/* --------------------------------------------------------- avisos */

.woocommerce-notices-wrapper:empty {
    display: none;
}

.woocommerce-notices-wrapper {
    clear: both;
    min-width: 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    clear: both;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--ink);
    background: var(--parchment);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* WooCommerce enfoca el aviso automáticamente al añadir un producto. El
   contorno global de foco duplicaba visualmente su borde aunque el aviso no
   sea un control interactivo. */
.woocommerce-message[tabindex="-1"]:focus,
.woocommerce-info[tabindex="-1"]:focus,
.woocommerce-error[tabindex="-1"]:focus {
    outline: 0;
}

/* Los avisos de WooCommerce imprimen el enlace de acción antes del texto.
   Flex permite colocarlo visualmente al final sin dejar un float invadiendo
   la galería o el resumen del producto. */
.woocommerce-message,
.woocommerce-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.woocommerce-error {
    border-left-color: #8a3a2a;
    background: #f8ece8;
}

.woocommerce-error li + li {
    margin-top: 0.4rem;
}

.woocommerce-message .button,
.woocommerce-info .button {
    order: 2;
    flex: 0 0 auto;
    float: none;
    margin: 0;
}

@media (max-width: 46rem) {
    .woocommerce-message,
    .woocommerce-info {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }

    .woocommerce-message .button,
    .woocommerce-info .button {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.8rem 1rem;
        text-align: center;
    }
}

/* ------------------------------------------------------- formularios */

.woocommerce form .form-row {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.1rem;
    padding: 0;
}

.woocommerce form .form-row label {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.woocommerce form .form-row .required {
    color: var(--accent);
    text-decoration: none;
    border: 0;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"] {
    width: 100%;
    height: auto;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color 0.15s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--ink);
    outline: none;
}

.woocommerce form .form-row textarea {
    min-height: 6rem;
    resize: vertical;
}

.woocommerce .form-row .description,
.woocommerce form .form-row span.description {
    order: 3;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 100%;
}

/* Consulta para compradores con o sin cuenta. Los dos datos caben en una
   fila en escritorio y el botón conserva una única acción clara. */
.woocommerce form.woocommerce-form-track-order {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    max-width: 44rem;
}

.woocommerce form.woocommerce-form-track-order > p:first-child,
.woocommerce form.woocommerce-form-track-order > .form-row:last-child {
    grid-column: 1 / -1;
}

.woocommerce form.woocommerce-form-track-order .form-row-first,
.woocommerce form.woocommerce-form-track-order .form-row-last {
    width: 100%;
    margin-right: 0;
}

@media (max-width: 46rem) {
    .woocommerce form.woocommerce-form-track-order {
        grid-template-columns: 1fr;
    }

    .woocommerce form.woocommerce-form-track-order > * {
        grid-column: 1;
    }
}

/* Select2, que WooCommerce usa para provincia y país. */
.woocommerce .select2-container--default .select2-selection--single {
    height: auto;
    border: 1px solid var(--line);
    border-radius: 0;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.4;
    color: var(--ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
}

.select2-dropdown {
    border-color: var(--line);
    border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--ink);
}

/* ---------------------------------------------------------- checkout */

.woocommerce-checkout .col2-set {
    width: 100%;
}

@media (min-width: 62rem) {
    /* Rejilla del checkout de serie, para cualquier pantalla que todavía use
       la plantilla original de WooCommerce (pedido recibido, pago de un pedido
       pendiente). El checkout en pasos monta su propia rejilla por dentro y se
       excluye con :not(): dos rejillas anidadas dejaban la columna del flujo
       en 150 px. */
    .woocommerce-checkout form.checkout:not(.bena-checkout) {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
    }

    .woocommerce-checkout form.checkout:not(.bena-checkout) > .col2-set {
        grid-column: 1;
    }

    .woocommerce-checkout form.checkout:not(.bena-checkout) > #order_review_heading,
    .woocommerce-checkout form.checkout:not(.bena-checkout) > #order_review {
        grid-column: 2;
    }

    .woocommerce-checkout form.checkout:not(.bena-checkout) > #order_review_heading {
        align-self: start;
    }

    /* Los pares nombre/apellido del checkout en pasos ya los coloca la rejilla
       de .bena-campos; estos anchos calculados son para el resto. */
    .woocommerce form:not(.bena-checkout) .form-row-first,
    .woocommerce form:not(.bena-checkout) .form-row-last {
        width: calc(50% - 0.5rem);
        display: inline-flex;
        vertical-align: top;
    }

    .woocommerce form:not(.bena-checkout) .form-row-first {
        margin-right: 1rem;
    }
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

#order_review {
    padding: 1.5rem;
    background: var(--bone);
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    text-align: left;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    font-weight: 500;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    border-bottom: 0;
    padding-top: 1rem;
    font-size: 1.0625rem;
}

.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table th:last-child {
    text-align: right;
}

.woocommerce .includes_tax,
.woocommerce small.includes_tax {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ------------------------------------------------------------ pagos */

#payment {
    background: transparent;
    border-radius: 0;
}

#payment ul.payment_methods {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

#payment ul.payment_methods li {
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    background: #fff;
    margin-bottom: 0.6rem;
}

#payment ul.payment_methods li label {
    display: inline;
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
}

#payment ul.payment_methods li input[type="radio"] {
    margin-right: 0.5rem;
}

#payment div.payment_box {
    margin: 0.6rem 0 0;
    padding: 0.75rem 0 0;
    background: transparent;
    border-top: 1px solid var(--line);
    font-size: 0.875rem;
    color: var(--muted);
}

#payment div.payment_box::before {
    display: none;
}

.woocommerce-privacy-policy-text {
    font-size: 0.8125rem;
    color: var(--muted);
}

.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* ----------------------------------------------------------- botones */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2rem;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--ivory);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover {
    background: var(--ink);
    color: var(--ivory);
    opacity: 0.85;
}

.woocommerce #place_order {
    width: 100%;
}

.woocommerce a.button.wc-backward,
.woocommerce .button.wc-forward {
    background: transparent;
    color: var(--ink);
}

/* -------------------------------------------------------------- cesta */

/**
 * La tabla del carrito, rediseñada.
 *
 * El tema descarta todo el CSS de WooCommerce a propósito (`woocommerce_
 * enqueue_styles` devuelve vacío, en functions.php), así que esta tabla salía
 * con el estilo por defecto del navegador: sin tarjeta, sin jerarquía, con la
 * fila entera apretada en una línea. Se convierte cada `<tr>` en una fila
 * flex —imagen, nombre, precio unitario atenuado, cantidad, subtotal en
 * negrita, quitar— porque eso es lo que un carrito necesita decir de un
 * vistazo: cuántos hay, qué vale CADA uno y qué se paga por esa línea. El
 * subtotal manda visualmente; el precio unitario queda como referencia.
 */
.woocommerce-cart table.cart {
    border: 0;
}

/* Los encabezados de columna no dicen nada que la fila no diga ya sola. */
.woocommerce-cart table.cart thead {
    display: none;
}

.woocommerce-cart table.cart tbody tr.cart_item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.woocommerce-cart table.cart tbody tr.cart_item:first-child {
    border-top: 1px solid var(--line);
}

.woocommerce-cart table.cart td {
    padding: 0;
    border: 0;
}

.woocommerce-cart table.cart td.product-thumbnail {
    order: 1;
    flex: 0 0 auto;
}

.woocommerce-cart table.cart td.product-thumbnail img {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    background: var(--parchment);
}

.woocommerce-cart table.cart td.product-name {
    order: 2;
    flex: 1 1 14rem;
    min-width: 0;
}

.woocommerce-cart table.cart td.product-name a {
    /* `.bena-prose a` subraya todo enlace dentro de una página de contenido;
       el carrito hereda ese envoltorio sin ser prosa, y aquí no aplica. */
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.3;
    text-decoration: none;
}

.woocommerce-cart table.cart td.product-name a:hover {
    color: var(--accent);
}

.woocommerce-cart table.cart td.product-price {
    order: 3;
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--muted);
}

.woocommerce-cart table.cart td.product-quantity {
    order: 4;
    flex: 0 0 auto;
}

.woocommerce-cart table.cart td.product-subtotal {
    order: 5;
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    font-size: 1.0625rem;
    font-weight: 500;
}

/* Quitar es lo último que se lee en la fila, a propósito: es la acción que
   menos se quiere que salte a la vista antes que el propio producto. */
.woocommerce-cart table.cart td.product-remove {
    order: 6;
    flex: 0 0 auto;
}

.woocommerce-cart table.cart td.product-remove a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--muted);
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
    background: var(--parchment);
    color: var(--ink);
}

/* La fila de «¿Tienes un cupón?» / «Actualizar carrito» ya no es parte de la
   tabla de productos: es su propia franja, separada con aire. */
.woocommerce-cart table.cart td.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
}

.woocommerce-cart .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

@media (max-width: 40rem) {
    .woocommerce-cart table.cart tbody tr.cart_item {
        position: relative;
        padding-right: 2.5rem;
    }

    .woocommerce-cart table.cart td.product-thumbnail img {
        width: 4.5rem;
        height: 4.5rem;
    }

    .woocommerce-cart table.cart td.product-price {
        order: 5;
        flex-basis: 100%;
    }

    .woocommerce-cart table.cart td.product-remove {
        position: absolute;
        top: 1.5rem;
        right: 0;
    }

    .woocommerce-cart table.cart td.actions {
        justify-content: flex-start;
    }
}

.woocommerce .cart_totals {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bone);
    border: 1px solid var(--line);
    max-width: 26rem;
    margin-left: auto;
}

.woocommerce .cart_totals h2 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 1rem;
}

.woocommerce .coupon input.input-text {
    height: 2.75rem;
    flex: 1 1 10rem;
    max-width: 16rem;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    font: inherit;
    font-size: 0.875rem;
    display: inline-block;
    margin-right: 0.5rem;
}

/**
 * «Finalizar compra» frente al botón de PayPal.
 *
 * Los dos salían del mismo tamaño, uno debajo del otro: dos botones iguales
 * compitiendo, y PayPal —con su propia marca amarilla— ganaba. El texto de
 * cada uno (`inc/cart-page.php`, ganchados en `woocommerce_proceed_to_
 * checkout` a las prioridades 15 y 21, antes y después de los dos botones)
 * dice lo que el tamaño no puede: uno lleva a las cuatro formas de pago, el
 * otro es solo el atajo de una. El botón de PayPal en sí no se puede
 * repintar —lo dibuja el SDK de PayPal dentro de su propio iframe—, pero SÍ
 * se puede achicar su caja, y el SDK lo respeta.
 */
/* Los cinco elementos de aquí abajo imprimen en el orden en que WooCommerce y
   PayPal Payments registran sus propios hooks —el mismo número de prioridad
   (20) para el botón de «Finalizar compra» y el de PayPal, así que cuál sale
   primero depende de qué plugin cargó antes, no de nada que se pueda fijar
   desde el tema—. En vez de perseguir esa carrera, el orden VISUAL se decide
   aquí con flexbox, que no depende del orden de impresión. */
.wc-proceed-to-checkout {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}

.wc-proceed-to-checkout > .ppcp-messages { order: 1; }
.wc-proceed-to-checkout > .bena-cart-formas-pago { order: 2; }
.wc-proceed-to-checkout > .checkout-button { order: 3; }
.wc-proceed-to-checkout > .bena-cart-o { order: 4; }
.wc-proceed-to-checkout > .ppc-button-wrapper { order: 5; }

.bena-cart-formas-pago {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--muted);
    text-align: center;
}

.woocommerce-cart .checkout-button {
    width: 100%;
}

.bena-cart-o {
    position: relative;
    margin: 1rem 0 0.6rem;
    text-align: center;
}

.bena-cart-o::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
}

.bena-cart-o span {
    position: relative;
    padding: 0 0.75rem;
    background: var(--bone);
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ppc-button-wrapper {
    max-width: 20rem;
    margin: 0 auto;
}

/* ---------------------------------------------------------- catálogo */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Columna flexible para que el botón caiga siempre al fondo: con nombres de
   uno y de dos renglones —y «Seleccionar opciones» ocupando dos donde «Añadir
   al carrito» ocupa uno— los botones quedaban a alturas distintas y la fila
   entera se veía desalineada. */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    width: auto;
    float: none;
    text-align: left;
}

.woocommerce ul.products li.product .button {
    margin-top: auto;
}

/* Cuadrada, no 3:4.
   Las 81 portadas del catálogo son collages cuadrados con el titular escrito
   dentro de la propia foto. En una caja 3:4 el `cover` escala por altura y se
   come 112 px de ancho: «BEBEDERO ELÉCTRICO CON FILTRO» se leía «BEDERO
   ELÉCTRICO / ON FILTRO», y el nombre del producto es justo lo que ese collage
   viene a decir. El 3:4 venía de cuando las fotos eran verticales; ya no lo son. */
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 0 1rem;
    background: var(--parchment);
    transition: opacity 0.3s ease;
}

.woocommerce ul.products li.product:hover a img {
    opacity: 0.9;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    padding: 0;
    margin: 0 0 0.35rem;
}

.woocommerce ul.products li.product .price {
    display: block;
    color: var(--ink);
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product .price del {
    opacity: 0.5;
    margin-right: 0.4rem;
}

.woocommerce ul.products li.product .button {
    font-size: 0.6875rem;
    padding: 0.7rem 1.25rem;
}

/* ------------------------------------------------------ paginación */

.woocommerce nav.woocommerce-pagination {
    display: flex;
    clear: both;
    justify-content: center;
    width: 100%;
    margin: clamp(2.75rem, 6vw, 4.75rem) 0 0;
    padding: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
    border: 0;
}

.woocommerce nav.woocommerce-pagination .page-numbers li > a,
.woocommerce nav.woocommerce-pagination .page-numbers li > span {
    display: grid;
    min-width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    margin: 0;
    padding: 0.35rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce nav.woocommerce-pagination .page-numbers li > span.current {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--ivory);
}

.woocommerce nav.woocommerce-pagination .page-numbers li > a:hover,
.woocommerce nav.woocommerce-pagination .page-numbers li > a:focus-visible {
    border-color: var(--ink);
    background: var(--parchment);
}

.woocommerce nav.woocommerce-pagination .page-numbers li > a.prev,
.woocommerce nav.woocommerce-pagination .page-numbers li > a.next {
    min-width: 3.25rem;
    font-size: 1rem;
}

.woocommerce span.onsale {
    top: 0.75rem;
    left: 0.75rem;
    right: auto;
    min-height: 0;
    min-width: 0;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    border-radius: 0;
    background: var(--accent);
    color: var(--ivory);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* En la ficha individual el ahorro ya se explica junto al precio. Ocultamos
   la insignia nativa para que no se convierta en una franja redundante al ser
   hija directa de la cuadrícula del producto. Las etiquetas del catálogo se
   mantienen visibles. */
.single-product div.product > span.onsale {
    display: none;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 2rem;
}

/* Rediseño premium del select de ordenamiento */
.woocommerce .woocommerce-ordering select {
    appearance: none;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0.5rem 2rem 0.5rem 0;
    font-family: inherit;
    font-size: 0.875rem;
    color: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1rem;
}

.woocommerce .woocommerce-ordering select:focus {
    outline: none;
    border-bottom-color: var(--text);
}

/* ------------------------------------------------------ ficha producto */

.woocommerce div.product {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

/* Colocación explícita: galería y resumen comparten la primera fila, y todo
   lo demás ocupa el ancho completo debajo. Sin esto, la auto-colocación mete
   el acordeón en la columna izquierda y el resumen pegajoso se le encima. */
.woocommerce div.product > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.woocommerce div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
}

.woocommerce div.product > .summary {
    grid-column: 2;
    grid-row: 1;
}

.woocommerce div.product .woocommerce-product-gallery {
    width: 100%;
    float: none;
}

.woocommerce div.product .summary {
    width: 100%;
    float: none;
    margin: 0;
}

.bena-product-videos {
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

.bena-product-videos > .bena-h2 {
    margin-bottom: 1.5rem;
}

.bena-product-videos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1.25rem;
}

.bena-product-video {
    display: grid;
    place-items: center;
    margin: 0;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    background: #111;
}

.bena-product-video video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(75vh, 45rem);
}

.bena-product-video figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.woocommerce div.product .product_title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

.woocommerce div.product p.price {
    font-size: 1.25rem;
    color: var(--ink);
    margin-bottom: 1.25rem;
}

.woocommerce div.product form.cart {
    margin: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.woocommerce div.product .quantity input.qty {
    width: 4.5rem;
    padding: 0.9rem 0.5rem;
    text-align: center;
    border: 1px solid var(--line);
}

.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 2rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0 1.5rem 0 0;
    padding: 0 0 0.75rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 1px solid var(--ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 0;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ink);
}

/* ------------------------------------------------------------ cuenta */

.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: auto;
    float: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.85rem 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    color: var(--ink);
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: auto;
    float: none;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    max-width: 26rem;
    border: 1px solid var(--line);
    padding: 1.75rem;
    background: #fff;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 2rem 0 1rem;
}

/* ------------------------------------------------------------ móvil */

@media (max-width: 62rem) {
    /* Tres en la tablet: con dos, entre 736 y 992 px cada tarjeta se iba a 336
       px y la rejilla parecía un catálogo de dos productos. La escalera queda
       4 en escritorio, 3 en tablet, 2 en teléfono. */
    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .woocommerce div.product,
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }

    /* En una sola columna hay que soltar la colocación explícita: si el
       resumen sigue pidiendo la columna 2, la grilla inventa una columna
       implícita y el texto se parte palabra por palabra. */
    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > .summary {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #order_review {
        position: static;
    }
}

@media (max-width: 46rem) {
    /* Dos columnas, no una.
       A una columna cada ficha ocupaba 589 px de una pantalla de 812: 1,38
       productos por pantalla, o sea que había que arrastrar el dedo una pantalla
       entera por producto para ver el catálogo. Con dos entran tres de golpe y
       se pueden comparar, que es como se mira una tienda en el teléfono. */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 0.75rem;
    }

    /* La tipografía baja con la tarjeta: 1.375rem de serif en una tarjeta de
       160 px parte cualquier nombre en cinco líneas. */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 1.0625rem;
        line-height: 1.25;
    }

    .woocommerce ul.products li.product .price {
        font-size: 0.875rem;
        margin-bottom: 0.6rem;
    }

    .woocommerce ul.products li.product .button {
        display: block;
        width: 100%;
        padding: 0.65rem 0.4rem;
        text-align: center;
    }

    .woocommerce ul.products li.product a img {
        margin-bottom: 0.7rem;
    }

    .woocommerce .cart_totals {
        max-width: none;
    }
}

/* ================================================================
   Ficha de producto
   ================================================================ */

.bena-anchor {
    display: block;
    height: 0;
    scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Nada de sticky en el resumen: en una grilla, un elemento pegajoso se ancla
   al contenedor entero, no a su fila, así que al bajar se monta encima del
   acordeón. La barra de compra flotante ya resuelve el «botón siempre a mano». */
.woocommerce div.product .summary {
    position: static;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--parchment);
}

.woocommerce div.product .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
    width: 100%;
    margin: 0;
    float: none;
}

.woocommerce div.product .flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
    opacity: 1;
}

/* -------------------------------------------------------- resumen */

.bena-product__hook {
    margin: -0.4rem 0 1.1rem;
    max-width: 34ch;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--muted);
}

.woocommerce div.product .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
    color: var(--accent);
    font-size: 0.9em;
    margin: 0;
}

.woocommerce div.product .woocommerce-review-link {
    color: var(--muted);
}

.woocommerce div.product p.price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.woocommerce div.product p.price del {
    opacity: 0.45;
    font-size: 0.8em;
}

.woocommerce div.product p.price ins {
    text-decoration: none;
    font-weight: 400;
}

.bena-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: var(--accent);
    color: var(--ivory);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bena-product__save {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
}

.bena-product__save-text {
    font-size: 0.875rem;
    color: var(--muted);
}

.bena-benefits {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.6rem;
}

.bena-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bena-benefits svg {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    color: var(--accent);
}

.woocommerce div.product form.cart {
    margin: 0 0 1.25rem;
    align-items: stretch;
}

.woocommerce div.product form.cart .button {
    flex: 1 1 12rem;
    padding-block: 1.05rem;
    font-size: 0.8125rem;
}

.woocommerce div.product .quantity input.qty {
    height: 100%;
}

/* Variantes: colores y tallas como opciones grandes, no como selects tristes. */
.woocommerce div.product form.cart .variations {
    width: 100%;
    margin-bottom: 1rem;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
    display: block;
    text-align: left;
    padding: 0 0 0.5rem;
    border: 0;
}

.woocommerce div.product form.cart .variations label {
    font-size: 0.875rem;
    font-weight: 500;
}

.woocommerce div.product form.cart .reset_variations {
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-assurances {
    list-style: none;
    margin: 0 0 1rem;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.65rem;
}

.bena-assurances li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.bena-assurances li > span,
.bena-assurances li strong,
.bena-assurances li small {
    display: block;
}

.bena-assurances li strong {
    color: var(--ink);
    font-weight: 500;
}

.bena-assurances li small {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted);
}

.bena-assurances svg {
    flex: 0 0 auto;
    color: var(--ink);
    opacity: 0.7;
}

.bena-product__ask {
    margin: 0;
    font-size: 0.875rem;
}

.bena-product__ask a {
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.15rem;
}

/* ------------------------------------------------------- acordeón */

.bena-accordion {
    grid-column: 1 / -1;
    max-width: 52rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
}

.bena-accordion__item {
    border-bottom: 1px solid var(--line);
}

.bena-accordion__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.0625rem;
    font-weight: 500;
}

.bena-accordion__item summary::-webkit-details-marker {
    display: none;
}

.bena-accordion__item summary i {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.bena-accordion__item summary i::before,
.bena-accordion__item summary i::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.bena-accordion__item summary i::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 1px;
}

.bena-accordion__item summary i::after {
    top: 0;
    left: 6px;
    width: 1px;
    height: 14px;
}

.bena-accordion__item[open] summary i::after {
    transform: rotate(90deg);
    opacity: 0;
}

.bena-accordion__body {
    padding: 0 0 1.5rem;
    max-width: 44rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(18, 17, 15, 0.78);
}

.bena-accordion__body > *:first-child {
    margin-top: 0;
}

.bena-steps {
    counter-reset: paso;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.bena-steps li {
    counter-increment: paso;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.bena-steps li::before {
    content: counter(paso);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.bena-specs {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.bena-specs dt {
    font-weight: 500;
    color: var(--ink);
}

.bena-specs dd {
    margin: 0;
}

.bena-specs__solo {
    grid-column: 1 / -1;
}

/* ------------------------------------------------------------ FAQ */

.bena-faq {
    grid-column: 1 / -1;
    max-width: 52rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.bena-faq .bena-h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    margin-bottom: 1.25rem;
}

.bena-faq .bena-accordion {
    margin-top: 0;
}

/* --------------------------------------------- relacionados / upsell */

.woocommerce .related,
.woocommerce .upsells {
    grid-column: 1 / -1;
    margin-top: clamp(3rem, 6vw, 5rem);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    margin-bottom: 1.75rem;
}

/* ------------------------------------------------- barra fija móvil */

.bena-buybar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--ivory);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
}

.bena-buybar__info {
    min-width: 0;
    line-height: 1.25;
}

.bena-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.bena-club__notice {
    margin: 0 0 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ivory);
    font-size: 0.875rem;
    line-height: 1.5;
}

.bena-buybar__info strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bena-buybar__info span,
.bena-buybar__info .price {
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-buybar__cta {
    flex: 0 0 auto;
    background: var(--ink);
    color: var(--ivory);
    padding: 0.8rem 1.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bena-buybar__cta:hover {
    background: var(--ink);
    opacity: 0.88;
}

/* El atributo hidden tiene que ganarle al display:flex de abajo, si no la
   barra se queda siempre puesta y tapa el pie. */
.bena-buybar[hidden] {
    display: none !important;
}

/* El boton de WhatsApp sube y baja con la barra, asi que el movimiento se
   acompana: sin la transicion teletransporta y se lee como un fallo. */
.bpec-whatsapp-float {
    transition: transform 0.15s ease, box-shadow 0.15s ease, bottom 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bpec-whatsapp-float {
        transition: none;
    }
}

@media (max-width: 62rem) {
    .single-product .bena-buybar:not([hidden]) {
        display: flex;
    }

    /* Solo cuando la barra esta puesta. Antes bastaba con estar en una ficha:
       el boton se subia nada mas abrir el producto y se quedaba flotando a
       media pantalla, apartandose de una barra que todavia estaba escondida. */
    .bena-con-buybar .bpec-whatsapp-float {
        bottom: 5.5rem;
    }

    .woocommerce div.product .summary {
        position: static;
    }
}

@media (max-width: 46rem) {
    .bena-specs {
        grid-template-columns: 1fr;
        gap: 0.1rem 0;
    }

    .bena-specs dd {
        margin-bottom: 0.75rem;
        color: var(--muted);
    }

    .woocommerce div.product .flex-control-thumbs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .woocommerce div.product form.cart {
        flex-direction: column;
        align-items: stretch;
    }

    /* El basis de 12rem funciona como ancho en escritorio, pero se convierte
       en altura cuando el formulario cambia a columna. */
    .woocommerce div.product form.cart .button {
        flex: 0 0 auto;
        width: 100%;
        min-height: 3.25rem;
    }

    .woocommerce div.product .quantity input.qty {
        width: 100%;
        padding-block: 0.9rem;
    }
}

/* ================================================================
   Mi cuenta — panel y módulos

   Esta capa final sustituye la apariencia genérica de WooCommerce por un
   sistema único: navegación, resumen, tablas, direcciones y formularios.
   ================================================================ */

.woocommerce-account .bena-account-page__eyebrow {
    margin-bottom: 0.65rem;
    color: var(--accent);
}

.woocommerce-account .bena-page__title {
    margin-bottom: 0;
    font-size: clamp(2.75rem, 5vw, 4.25rem);
}

.bena-account-page__intro {
    max-width: 38rem;
    margin: 0.9rem 0 clamp(2rem, 4vw, 3.25rem);
    color: var(--muted);
    font-size: 1rem;
}

.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    width: auto;
    float: none;
}

.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
    min-height: 31rem;
    padding: clamp(1.35rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    background: #fff;
}

/* ------------------------------------------------ navegación */

.woocommerce-account .bena-account-nav {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
}

.bena-account-nav__profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.2rem;
    border-bottom: 1px solid var(--line);
    background: var(--bone);
}

.bena-account-nav__avatar {
    display: grid;
    width: 2.85rem;
    height: 2.85rem;
    flex: 0 0 2.85rem;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--ivory);
    font-family: var(--serif);
    font-size: 1.45rem;
    line-height: 1;
}

.bena-account-nav__identity {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.bena-account-nav__identity small {
    color: var(--muted);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bena-account-nav__identity strong {
    overflow: hidden;
    margin-top: 0.2rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woocommerce-account .bena-account-nav ul {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0.65rem;
    border: 0;
    list-style: none;
}

.woocommerce-account .bena-account-nav li {
    margin: 0;
    border: 0;
}

.woocommerce-account .bena-account-nav li a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    min-height: 3.85rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid transparent;
    color: var(--muted);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.woocommerce-account .bena-account-nav li a:hover {
    border-color: var(--line);
    background: var(--bone);
    color: var(--ink);
}

.woocommerce-account .bena-account-nav li.is-active a {
    border-color: rgba(180, 85, 58, 0.2);
    background: rgba(180, 85, 58, 0.08);
    color: var(--ink);
}

.bena-account-nav__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--ivory);
    color: var(--ink);
}

.is-active .bena-account-nav__icon {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.bena-account-nav__icon svg,
.bena-account-stats__icon svg,
.bena-account-shortcuts__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.bena-account-nav__copy {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.bena-account-nav__copy strong {
    font-size: 0.8125rem;
    font-weight: 500;
}

.bena-account-nav__copy small {
    overflow: hidden;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bena-account-nav__arrow {
    opacity: 0;
    color: var(--accent);
    font-size: 0.875rem;
    transform: translateX(-0.25rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bena-account-nav a:hover .bena-account-nav__arrow,
.bena-account-nav .is-active .bena-account-nav__arrow {
    opacity: 1;
    transform: none;
}

.bena-account-nav__help {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.2rem 1.15rem;
    border-top: 1px solid var(--line);
    background: var(--bone);
    line-height: 1.4;
}

.bena-account-nav__help span {
    color: var(--muted);
    font-size: 0.75rem;
}

.bena-account-nav__help a {
    width: max-content;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------ encabezados */

.bena-account-module__header {
    padding-bottom: clamp(1.35rem, 3vw, 2rem);
    margin-bottom: clamp(1.35rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
}

.bena-account-module__header .bena-account-module__eyebrow {
    margin: 0 0 0.7rem;
    color: var(--accent);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bena-account-module__header h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
}

.bena-account-module__header > p:last-child {
    max-width: 42rem;
    margin: 0.8rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* ------------------------------------------------ resumen */

.bena-account-welcome {
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-start;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    background: var(--obsidian);
    color: var(--ivory);
}

.bena-account-welcome::after {
    position: absolute;
    width: 15rem;
    height: 15rem;
    right: -6rem;
    bottom: -8rem;
    border: 1px solid rgba(252, 250, 246, 0.12);
    border-radius: 50%;
    content: "";
}

.bena-account-welcome__copy {
    position: relative;
    z-index: 1;
    max-width: 34rem;
}

.bena-account-welcome__copy > p {
    margin: 0 0 0.8rem;
    color: rgba(252, 250, 246, 0.62);
    font-size: 0.6875rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.bena-account-welcome__copy h2 {
    margin: 0;
    color: var(--ivory);
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.bena-account-welcome__copy > span {
    display: block;
    max-width: 32rem;
    margin-top: 1rem;
    color: rgba(252, 250, 246, 0.72);
    font-size: 0.9375rem;
}

.bena-account-welcome__logout {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(252, 250, 246, 0.6);
    color: rgba(252, 250, 246, 0.78);
    font-size: 0.75rem;
    text-decoration: none !important;
}

.bena-account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
    border: 1px solid var(--line);
    background: var(--ivory);
}

.bena-account-stats article {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
    padding: 1.15rem;
}

.bena-account-stats article + article {
    border-left: 1px solid var(--line);
}

.bena-account-stats__icon,
.bena-account-shortcuts__icon {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    place-items: center;
    background: var(--parchment);
    color: var(--ink);
}

.bena-account-stats article > div {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.bena-account-stats strong {
    font-size: 0.9375rem;
    font-weight: 500;
}

.bena-account-stats article span:last-child {
    color: var(--muted);
    font-size: 0.75rem;
}

.bena-account-shortcuts {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.bena-account-shortcuts > header {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 1rem;
}

.bena-account-shortcuts > header p,
.bena-account-support p {
    margin: 0 0 0.35rem;
    color: var(--accent);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.bena-account-shortcuts > header h3,
.bena-account-support h3 {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
}

.bena-account-shortcuts > header > span {
    color: var(--muted);
    font-size: 0.8125rem;
}

.bena-account-shortcuts__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.bena-account-shortcuts__grid > a {
    position: relative;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    gap: 0 0.85rem;
    align-items: center;
    min-height: 6.5rem;
    padding: 1rem;
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.bena-account-shortcuts__grid > a:hover {
    border-color: rgba(180, 85, 58, 0.45);
    background: var(--bone);
    transform: translateY(-2px);
}

.bena-account-shortcuts__grid strong {
    align-self: end;
    font-size: 0.875rem;
    font-weight: 500;
}

.bena-account-shortcuts__grid > a > span:nth-of-type(2) {
    grid-column: 2 / 3;
    align-self: start;
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.bena-account-shortcuts__grid em {
    grid-column: 3;
    grid-row: 1 / 3;
    color: var(--accent);
    font-style: normal;
}

.bena-account-support {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    background: var(--bone);
}

.bena-account-support > div > span {
    display: block;
    margin-top: 0.6rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.bena-account-support > a {
    flex: 0 0 auto;
    padding: 0.85rem 1.15rem;
    background: var(--ink);
    color: var(--ivory);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

/* ------------------------------------------------ avisos y vacíos */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--bone);
    color: var(--ink);
    font-size: 0.875rem;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
    order: 2;
    flex: 0 0 auto;
}

.bena-account-payment-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: clamp(1.15rem, 3vw, 1.6rem);
    border: 1px solid var(--line);
    background: var(--bone);
}

.bena-account-payment-note__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    background: var(--ivory);
    color: var(--ink);
}

.bena-account-payment-note__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.bena-account-payment-note__copy strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.bena-account-payment-note__copy span {
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.bena-account-payment-note > a {
    flex: 0 0 auto;
    padding: 0.8rem 1rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--ivory);
    font-size: 0.6875rem;
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
}

/* ------------------------------------------------ tablas */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--line);
    border-collapse: collapse;
    background: #fff;
    font-size: 0.875rem;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
    background: var(--bone);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    padding: 1rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child > * {
    border-bottom: 0;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
    color: var(--accent);
    font-weight: 500;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status {
    font-weight: 500;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-PaymentMethod--actions .button {
    display: inline-flex;
    margin: 0.15rem 0.15rem 0.15rem 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    color: var(--ink);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account .woocommerce-PaymentMethod--actions .button:hover {
    border-color: var(--ink);
}

/* ------------------------------------------------ direcciones */

.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:not(.form-row) {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.875rem;
}

.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    width: auto;
    min-height: 14rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    background: var(--bone);
}

.woocommerce-account .woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.woocommerce-account .woocommerce-Address-title h2 {
    margin: 0;
    font-size: 1.65rem;
}

.woocommerce-account .woocommerce-Address-title .edit {
    flex: 0 0 auto;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    color: var(--ink);
    font-size: 0.6875rem;
    text-decoration: none;
}

.woocommerce-account .woocommerce-Address address {
    color: var(--muted);
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.7;
}

/* ------------------------------------------------ formularios */

.woocommerce-account .woocommerce-MyAccount-content form.edit-account,
.woocommerce-account .woocommerce-MyAccount-content form > .woocommerce-address-fields {
    max-width: 48rem;
}

.woocommerce-account form.edit-account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.woocommerce-account form.edit-account .form-row,
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
    margin: 0;
}

.woocommerce-account form.edit-account .form-row-wide,
.woocommerce-account form.edit-account fieldset,
.woocommerce-account form.edit-account > p:last-of-type,
.woocommerce-account form.edit-account > .clear {
    grid-column: 1 / -1;
}

.woocommerce-account form.edit-account > .clear,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .clear {
    display: none;
}

.woocommerce-account form.edit-account fieldset {
    display: grid;
    gap: 1rem;
    margin: 0.5rem 0 0;
    padding: 1.25rem;
    border: 1px solid var(--line);
    background: var(--bone);
}

.woocommerce-account form.edit-account legend {
    padding: 0 0.5rem;
    font-family: var(--serif);
    font-size: 1.5rem;
}

.woocommerce-account #account_display_name_description {
    display: block;
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-MyAccount-content form h2 {
    margin: 0 0 1.5rem;
    font-size: 1.75rem;
}

/* El encabezado del módulo ya nombra la dirección que se está editando. */
.woocommerce-edit-address .woocommerce-MyAccount-content form > h2 {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row label {
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea {
    min-height: 3rem;
    border-color: rgba(18, 17, 15, 0.2);
    background: var(--ivory);
}

.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content > .button,
.woocommerce-account .woocommerce-MyAccount-content .wc-forward {
    display: inline-flex;
    justify-content: center;
    min-height: 2.9rem;
    align-items: center;
    padding: 0.8rem 1.15rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--ivory);
    font: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content > .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .wc-forward:hover {
    opacity: 0.82;
}

/* ------------------------------------------------ acceso */

.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: 64rem;
}

.woocommerce-account:not(.logged-in) .u-columns.col2-set {
    align-items: start;
}

/* --- acceder o crear cuenta: uno u otro ----------------------------------- */

/* Centrado, no pegado a la izquierda: es la única cosa de la pantalla y en un
   monitor ancho arrinconada a un lado parece que falta algo al lado derecho. */
.bena-acceso {
    max-width: 34rem;
    margin-inline: auto;
}

.bena-acceso__invitacion {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/*
 * Solo se ve un panel. El alta está escondida por defecto; cuando es el
 * objetivo de la URL (`#crear-cuenta`) aparece ella y desaparece el acceso.
 * Volver a `#acceder` deja de apuntar al alta y todo vuelve a su sitio.
 *
 * El truco está en el ORDEN DEL HTML: el alta va primero para que el selector
 * `~` («hermano posterior») pueda alcanzar al acceso. Al revés haría falta
 * `:has()`, que en un navegador viejo dejaría la pantalla de acceso rota. Como
 * nunca se ven los dos, el orden no se nota.
 *
 * `.is-open` cubre el alta fallida: WooCommerce repinta la página con el aviso
 * pero sin el fragmento, así que `:target` no dispararía y el error quedaría
 * escondido detrás del formulario de acceso.
 */
.bena-acceso__alta {
    display: none;
}

.bena-acceso__alta:target,
.bena-acceso__alta.is-open {
    display: block;
}

.bena-acceso__alta:target ~ .bena-acceso__entrar,
.bena-acceso__alta.is-open ~ .bena-acceso__entrar {
    display: none;
}

/* Que el panel no quede debajo de la cabecera fija al saltar al ancla. */
.bena-acceso__alta,
.bena-acceso__entrar {
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* La cabecera de la página acompaña al panel: con el formulario centrado y el
   título pegado a la izquierda, la pantalla se lee torcida. Solo sin sesión;
   con sesión hay menú lateral y el título manda a la izquierda. */
.woocommerce-account:not(.logged-in) .bena-account-page__eyebrow,
.woocommerce-account:not(.logged-in) .bena-page__title,
.woocommerce-account:not(.logged-in) .bena-account-page__intro,
.woocommerce-account:not(.logged-in) .bena-acceso h2 {
    text-align: center;
}

.woocommerce-account:not(.logged-in) .bena-account-page__intro {
    margin-inline: auto;
}

/* El contenedor de WooCommerce tiene ancho máximo pero nace pegado a la
   izquierda: sin esto la tarjeta se centra dentro de un marco descentrado y
   queda 80 px corrida. Solo sin sesión; con sesión ese contenedor es la rejilla
   del menú lateral y centrarlo lo descuadraría. */
.woocommerce-account:not(.logged-in) .woocommerce {
    margin-inline: auto;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register,
.woocommerce-account:not(.logged-in) .woocommerce-form-lost-password,
.woocommerce-account:not(.logged-in) form.lost_reset_password {
    max-width: none;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--line);
    background: #fff;
}

/* ------------------------------------------------ adaptable */

@media (max-width: 68rem) {
    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: minmax(14rem, 15rem) minmax(0, 1fr);
        gap: 1.25rem;
    }

    .bena-account-nav__copy small {
        display: none;
    }

    .woocommerce-account .bena-account-nav li a {
        min-height: 3.3rem;
    }

    .bena-account-stats {
        grid-template-columns: 1fr;
    }

    .bena-account-stats article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 52rem) {
    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: minmax(0, 1fr);
    }

    .woocommerce-account .bena-account-nav {
        position: static;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .bena-account-nav__profile {
        border: 1px solid var(--line);
        background: #fff;
    }

    /* Dos columnas, no un carrusel.
       ---------------------------------------------------------------
       Era una fila con desplazamiento y cada opción de 12.5rem: en una
       pantalla de 375 px se ven menos de dos y NADA indica que haya más.
       Rony: «las opciones se deslizan pero no hay nada que lo indique y las
       personas se van a confundir».

       Se podría haber añadido una flecha o un degradado al borde, pero eso es
       resolver un problema que no hace falta tener: son cinco o seis opciones
       y en dos columnas caben todas a la vista. Lo que no se desliza no se
       pierde. */
    .woocommerce-account .bena-account-nav ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.65rem 0 0.2rem;
    }

    .woocommerce-account .bena-account-nav li {
        min-width: 0;
    }

    .woocommerce-account .bena-account-nav li a {
        grid-template-columns: 2rem minmax(0, 1fr);
        min-height: 3.9rem;
        border-color: var(--line);
        background: #fff;
    }

    .bena-account-nav__copy small {
        display: block;
    }

    .bena-account-nav__arrow,
    .bena-account-nav__help {
        display: none;
    }

    .bena-account-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bena-account-stats article + article {
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}

@media (max-width: 46rem) {
    .woocommerce-account .bena-page__title {
        font-size: 3rem;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        min-height: 0;
        padding: 1.15rem;
    }

    .bena-account-welcome {
        display: grid;
        gap: 1.25rem;
    }

    .bena-account-welcome__logout {
        width: max-content;
    }

    .bena-account-stats {
        grid-template-columns: 1fr;
    }

    .bena-account-stats article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .bena-account-shortcuts > header,
    .bena-account-support {
        display: grid;
        align-items: start;
    }

    .bena-account-shortcuts > header > span {
        display: none;
    }

    .bena-account-shortcuts__grid,
    .woocommerce-account .woocommerce-Addresses,
    .woocommerce-account form.edit-account,
    .woocommerce-account .woocommerce-address-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .woocommerce-account form.edit-account .form-row,
    .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
        grid-column: 1 / -1;
    }

    .bena-account-support > a {
        width: 100%;
        text-align: center;
    }

    .bena-account-payment-note {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bena-account-payment-note > a {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
        display: block;
        width: 100%;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table {
        border: 0;
        background: transparent;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
        display: none;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr {
        margin-bottom: 0.85rem;
        padding: 0.45rem 0.85rem;
        border: 1px solid var(--line);
        background: #fff;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.65rem 0;
        text-align: right;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table th::before,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table td::before {
        flex: 0 0 42%;
        color: var(--muted);
        content: attr(data-title);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
    }

    .woocommerce-account .woocommerce-orders-table__cell-order-actions,
    .woocommerce-account .woocommerce-PaymentMethod--actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        white-space: normal;
    }

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
        display: grid;
        justify-items: start;
    }
}

/* ------------------------------------------------------------------
   Descuento por cantidad y paquete «Mejor juntos».

   Las filas son enlaces, no botones: añaden la cantidad por sí solas
   aunque el JavaScript no llegue. El bloque completo desaparece cuando
   el margen del producto no aguanta el descuento, así que aquí no hay
   ningún estado «vacío» que dibujar.
   ------------------------------------------------------------------ */

.bena-volume {
    margin: 0 0 1.25rem;
}

.bena-volume__title {
    margin: 0 0 0.6rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.bena-volume__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

/* Con tallas la fila es un <button>, no un <a>: hay que apagarle los estilos
   propios del botón para que se vea igual que en un producto simple. */
button.bena-volume__row {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.bena-volume[hidden] {
    display: none;
}

.bena-volume__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.1rem 1rem;
    align-items: baseline;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.bena-volume__row:hover,
.bena-volume__row:focus-visible {
    border-color: var(--accent);
    background: var(--bone);
}

.bena-volume__qty {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.9375rem;
    font-weight: 500;
}

.bena-volume__total {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

.bena-volume__unit {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-volume__save {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.75rem;
    color: var(--accent);
    text-align: right;
    white-space: nowrap;
}

.bena-volume__note {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted);
}

.bena-bundle {
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    padding: clamp(1.4rem, 3vw, 2.25rem);
    border: 1px solid var(--line);
    background: var(--bone);
}

.bena-bundle__title {
    margin: 0 0 0.35rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
}

.bena-bundle__lead {
    margin: 0 0 1.4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted);
}

.bena-bundle__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(0.6rem, 2vw, 1.5rem);
}

.bena-bundle__item {
    margin: 0;
    min-width: 0;
}

.bena-bundle__media {
    display: block;
    background: var(--ivory);
}

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

.bena-bundle__plus {
    align-self: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
}

.bena-bundle__name {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
}

.bena-bundle__name:hover,
.bena-bundle__name:focus-visible {
    text-decoration: underline;
}

.bena-bundle__price {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
}

.bena-bundle__price del,
.bena-bundle__total del {
    margin-right: 0.35rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bena-bundle__price ins,
.bena-bundle__total ins {
    text-decoration: none;
    font-weight: 500;
}

.bena-bundle__cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.bena-bundle__total {
    margin: 0;
    font-size: 1.0625rem;
}

.bena-bundle__total > span {
    margin-right: 0.35rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.bena-bundle__save {
    margin: 0;
    font-size: 0.875rem;
    color: var(--accent);
}

.bena-bundle__cta {
    margin-left: auto;
}

@media (max-width: 640px) {
    .bena-bundle__cta {
        margin-left: 0;
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   Selector de talla.

   Las tallas son productos hermanos enlazados, no variaciones (el porqué
   está en BPEC_Tallas). Se ven como un selector porque para quien compra
   eso es lo que son.
   ------------------------------------------------------------------ */

.bena-tallas {
    margin: 0 0 1.1rem;
}

.bena-tallas__title {
    margin: 0 0 0.55rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.bena-tallas__actual {
    margin-left: 0.4rem;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.8125rem;
    color: var(--ink);
}

.bena-tallas__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.bena-tallas__opcion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48 px de alto: el mínimo que se toca sin fallar en un móvil. */
    min-width: 3.25rem;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    color: inherit;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.bena-tallas__opcion:hover,
.bena-tallas__opcion:focus-visible {
    border-color: var(--accent);
    background: var(--bone);
}

.bena-tallas__opcion.is-actual {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--ivory);
    cursor: default;
}

/* Agotada se enseña, no se esconde: saber que existe esa talla y que ahora
   no está es más útil que hacerla desaparecer del selector. */
.bena-tallas__opcion.is-agotada {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------
   Producto con variaciones (tallas).

   Se ve exactamente igual que el selector de tallas hermanas: para quien
   compra son la misma cosa, aunque por dentro una sea una variación de
   WooCommerce y la otra un producto enlazado.
   ------------------------------------------------------------------ */

/* El `display:flex` de `form.cart` está pensado para un producto simple,
   donde la cantidad y el botón son hijos directos del formulario. En uno con
   variaciones los hijos son la tabla y el envoltorio, así que ese flex no
   ordenaba nada: la cantidad se estiraba a todo el ancho y el botón caía
   debajo. La fila de compra real es la de dentro. */
.woocommerce div.product form.variations_form.cart {
    display: block;
}

.woocommerce div.product .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
    flex: 0 0 auto;
}

.woocommerce div.product .woocommerce-variation-add-to-cart .button {
    flex: 1 1 12rem;
    padding-block: 1.05rem;
    font-size: 0.8125rem;
}

@media (max-width: 46rem) {
    /* En productos simples el botón ocupa toda la fila. En una variación
       comparte la fila con la cantidad: conservar width:100% sumaba ambos
       anchos y sacaba 58 px del producto fuera de la pantalla. */
    .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .button {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}

/* La tabla de variaciones deja de comportarse como tabla. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

.woocommerce div.product form.cart table.variations {
    margin: 0 0 1.1rem;
}

.woocommerce div.product form.cart table.variations th label {
    display: block;
    margin: 0 0 0.55rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Con las pastillas puestas el <select> sobra a la vista, pero se queda en el
   DOM y sigue siendo el que manda: es el que WooCommerce escucha. */
.bena-select-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* «Limpiar» existe para volver al estado sin elegir. Con pastillas eso no le
   sirve a nadie: siempre hay una talla marcada y se cambia pulsando otra.
   Lleva `!important` porque el JavaScript de WooCommerce le escribe
   `display:inline` como estilo EN LÍNEA, y eso gana a cualquier hoja. */
.woocommerce div.product form.cart .reset_variations {
    display: none !important;
}

.bena-tallas--variacion {
    margin: 0;
}

.bena-tallas__opcion[disabled] {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    cursor: not-allowed;
}

/* El precio de la talla elegida ya sustituyó al rango en el resumen. La clase
   la pone el JavaScript sólo cuando esa sustitución funcionó: si fallara, el
   precio de WooCommerce sigue visible y nadie se queda sin verlo. */
body.bena-precio-en-resumen .woocommerce-variation-price {
    display: none;
}

/* --- ver la contraseña ---------------------------------------------------- */

/* El tema descarta los estilos de WooCommerce enteros (functions.php) y su botón
   de «ver contraseña» se quedaba desnudo: un rectángulo de 16x6 px colgando
   DEBAJO del campo, sin icono. El botón y su comportamiento los pone
   WooCommerce —su JS alterna la clase `display-password` y el tipo del input—,
   así que aquí solo hay que vestirlo y ponerlo en su sitio.

   El icono va con `mask` y no con `background-image` para que herede el color
   del texto: sigue valiendo si cambia la paleta, y el estado «contraseña a la
   vista» se distingue por el ojo tachado, no por un color.

   OJO al escribir el SVG: las comillas van SIMPLES. Con dobles cierran el
   url("...") antes de tiempo, el navegador descarta la regla entera y el icono
   no aparece —sin ningún error visible. */
/* La fuerza de la contraseña, con un color que se entiende sin leer.
   ------------------------------------------------------------------
   WooCommerce ya calcula si es débil, media o fuerte, pero lo dice solo con un
   párrafo de texto gris igual en los tres casos. Rony: «me parece muy estático,
   hazlo realmente visual y significativo, rojo cuando es baja, amarilla cuando
   es media y verde cuando es alta».

   La barra se dibuja con un degradado sobre el propio aviso, así que no hace
   falta tocar el HTML de WooCommerce: crece con la fuerza y el texto se tiñe
   del mismo color. Las clases las pone WooCommerce solo —`short`, `bad`,
   `good`, `strong`— según su propio cálculo.

   Y el aviso se queda pequeño, como pediste: una franja de 4 px y una línea de
   texto. La sugerencia larga de WordPress ocupaba media pantalla en el móvil. */
.woocommerce-password-strength {
    position: relative;
    margin: 0.5rem 0 0;
    padding: 0.55rem 0 0;
    border-top: 4px solid var(--line);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    background: none;
}

.woocommerce-password-strength::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    height: 4px;
    border-radius: 2px;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.woocommerce-password-strength.short::before {
    width: 25%;
    background: #c0392b;
}

.woocommerce-password-strength.bad::before {
    width: 50%;
    background: #d35400;
}

.woocommerce-password-strength.good::before {
    width: 75%;
    background: #d4a017;
}

.woocommerce-password-strength.strong::before {
    width: 100%;
    background: #1d7a45;
}

.woocommerce-password-strength.short { color: #c0392b; }
.woocommerce-password-strength.bad { color: #d35400; }
.woocommerce-password-strength.good { color: #a97b0d; }
.woocommerce-password-strength.strong { color: #1d7a45; }

/* La sugerencia larga de WordPress —«usa mayúsculas, números y símbolos como
   ! " ? $ % ^ y )»— ocupaba media pantalla de móvil y nadie la lee entera. La
   barra de color ya dice lo mismo de un vistazo. */
.woocommerce-password-hint {
    display: block;
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted);
}

.password-input {
    position: relative;
    display: block;
}

/* Sitio para el icono: sin esto una contraseña larga pasa por debajo del ojo. */
.password-input input[type="password"],
.password-input input[type="text"] {
    padding-right: 2.9rem;
}

.show-password-input {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    /* El dibujo mide 1.25rem, pero el botón es mayor: en un móvil un blanco de
       2.1rem se falla con el pulgar. Cabe dentro del campo, que mide 49 px. */
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
}

.show-password-input::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--muted);
    -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2.5%2012S6%205.6%2012%205.6%2021.5%2012%2021.5%2012%2018%2018.4%2012%2018.4%202.5%2012%202.5%2012Z'/><circle%20cx='12'%20cy='12'%20r='3.1'/></svg>") no-repeat center;
    mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2.5%2012S6%205.6%2012%205.6%2021.5%2012%2021.5%2012%2018%2018.4%2012%2018.4%202.5%2012%202.5%2012Z'/><circle%20cx='12'%20cy='12'%20r='3.1'/></svg>") no-repeat center;
    -webkit-mask-size: 1.25rem 1.25rem;
    mask-size: 1.25rem 1.25rem;
    transition: background-color 0.15s ease;
}

.show-password-input:hover::after,
.show-password-input:focus-visible::after {
    background-color: var(--ink);
}

/* WooCommerce pone esta clase cuando la contraseña está a la vista. */
.show-password-input.display-password::after {
    background-color: var(--ink);
    -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2.5%2012S6%205.6%2012%205.6%2021.5%2012%2021.5%2012%2018%2018.4%2012%2018.4%202.5%2012%202.5%2012Z'/><circle%20cx='12'%20cy='12'%20r='3.1'/><path%20d='M4.2%2019.8%2019.8%204.2'/></svg>");
    mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2.5%2012S6%205.6%2012%205.6%2021.5%2012%2021.5%2012%2018%2018.4%2012%2018.4%202.5%2012%202.5%2012Z'/><circle%20cx='12'%20cy='12'%20r='3.1'/><path%20d='M4.2%2019.8%2019.8%204.2'/></svg>");
}

/* --- pantalla de carga ---------------------------------------------------- */

/*
 * El sello de Bena botando mientras carga, y otra vez mientras se procesa el
 * pedido.
 *
 * La animación `bena-cargando-salir` con cuatro segundos de retraso NO es un
 * adorno: es la red de seguridad. Retira la capa sola aunque theme.js no
 * llegue nunca a cargar —red móvil mala, justo cuando esta capa más se ve—.
 * Sin ella, un archivo JS que no baja dejaría la tienda detrás de un logo
 * botando para siempre. `is-listo` solo le quita el retraso para que se vaya ya.
 *
 * `is-visible` la trae de vuelta al pagar y cancela la animación; ahí el freno
 * es un temporizador en el JS, porque durante un pago sí hay que esperar más
 * de cuatro segundos.
 */
.bena-cargando {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--ivory);
    animation: bena-cargando-salir 0.4s ease 4s forwards;
}

.bena-cargando.is-listo {
    animation-delay: 0s;
}

.bena-cargando.is-visible {
    animation: none;
    opacity: 1;
    visibility: visible;
}

@keyframes bena-cargando-salir {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.bena-cargando__sello {
    width: 4.5rem;
    height: 4.5rem;
    animation: bena-cargando-rebote 1.05s cubic-bezier(0.32, 0, 0.38, 1) infinite;
}

@keyframes bena-cargando-rebote {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.1rem); }
}

.bena-cargando__nota {
    margin: 0;
    max-width: 22rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

/* Sin nota no debe quedar un hueco entre el sello y nada. */
.bena-cargando__nota:empty {
    display: none;
}

/* Quien pide menos movimiento ve el sello quieto: la capa sigue cumpliendo su
   trabajo, que es decir «espera», no botar. */
@media (prefers-reduced-motion: reduce) {
    .bena-cargando__sello {
        animation: none;
    }
}

/* ------------------------------------------------------------------
   Falta elegir una opción.

   Este tema descarta el CSS de WooCommerce, así que las clases `disabled`
   y `wc-variation-selection-needed` que WooCommerce pone en el botón no
   pintaban nada: el botón se veía comprable, se pulsaba, y no ocurría nada
   ni se explicaba por qué. Aquí se le da el aspecto que le falta, y el JS
   le cambia el texto a «Elige color» o «Elige talla».
   ------------------------------------------------------------------ */
.woocommerce div.product form.cart .single_add_to_cart_button.bena-falta-elegir {
    background: transparent;
    color: var(--bena-ink, #1b1b1b);
    border: 1px solid currentColor;
    opacity: 0.55;
    cursor: pointer;
}

.woocommerce div.product form.cart .single_add_to_cart_button.bena-falta-elegir:hover {
    opacity: 0.75;
}

/* Al pulsar el botón sin elegir, el selector parpadea una vez: dice dónde
   hay que tocar sin sacar un aviso que tape la ficha. */
.bena-falta-elegir__aviso {
    animation: bena-señalar 1.4s ease;
    border-radius: 0.5rem;
}

@keyframes bena-señalar {
    0%, 100% { box-shadow: 0 0 0 0 rgba(27, 27, 27, 0); }
    20%, 60% { box-shadow: 0 0 0 3px rgba(27, 27, 27, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .bena-falta-elegir__aviso { animation: none; box-shadow: 0 0 0 3px rgba(27, 27, 27, 0.18); }
}

/* Aviso de color surtido, encima del botón de compra. Tono de nota, no de
   error: no es un problema del pedido, es cómo lo vende el proveedor. */
.bena-surtido {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(27, 27, 27, 0.14);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(27, 27, 27, 0.78);
    background: rgba(27, 27, 27, 0.025);
}

.bena-surtido svg {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    opacity: 0.6;
}

/* ------------------------------------------------------------------
   Aviso pequeño al añadir al carrito, en vez del banner de WooCommerce.

   El formulario de la ficha de producto, a diferencia de las tarjetas de
   colección, no pasaba por AJAX: se enviaba de verdad y WooCommerce
   reimprimía la página entera con un aviso enorme arriba («Se ha añadido...
   VER CARRITO»). Ahora se intercepta en theme.js y se avisa aquí abajo, sin
   recargar ni tapar la ficha.
   ------------------------------------------------------------------ */
.bena-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 10010;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    background: var(--obsidian);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 30px rgba(14, 13, 12, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: calc(100vw - 2.5rem);
}

.bena-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.bena-toast svg {
    flex: 0 0 auto;
    color: var(--accent);
}

/* En móvil el botón flotante de WhatsApp vive abajo a la derecha (18px de
   borde, 52px de lado): el aviso sube para no superponerse con él. */
@media (max-width: 46rem) {
    .bena-toast {
        bottom: 5.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bena-toast {
        transition: opacity 0.15s linear;
    }
}

/* ------------------------------------------------------------------
   La página /carrito/, fluida al quitar o actualizar productos.

   WooCommerce reemplaza `.woocommerce-cart-form` y `.cart_totals` enteros de
   golpe en cada cambio (class-wc-ajax.php + assets/js/frontend/cart.js:
   `.replaceWith()`, sin transición ninguna), y cubre la tabla mientras tanto
   con un overlay blanco liso (`overlayCSS: {background:'#fff'}`, sin mensaje:
   `message: null`). El resultado es justo lo que se ve mal: la tabla
   desaparece de golpe detrás de un velo plano, y cuando vuelve, cada imagen
   es un nodo nuevo que aparece de un salto, sin ningún aviso de que algo
   estaba cargando entre medio.

   No se toca el JS de WooCommerce —list mueve el pedido, el cupón, el envío;
   tocarlo es un repuesto que otra actualización del plugin puede romper—.
   Basta con CSS: una animación de entrada que el navegador dispara solo cada
   vez que WooCommerce mete estos bloques de nuevo en el documento (son nodos
   nuevos, así que la animación se reproduce igual que en la primera carga),
   y un overlay con el tono cálido del sitio y un aro que gira en vez del
   blanco liso y silencioso de antes.
   ------------------------------------------------------------------ */
.woocommerce-cart-form,
.woocommerce-cart .cart_totals {
    animation: bena-cart-entra 0.35s ease both;
}

@keyframes bena-cart-entra {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* El overlay de blockUI es un div suelto que WooCommerce inserta y saca del
   documento en cada carga; `!important` hace falta porque su color y opacidad
   vienen fijados en `style=""` desde el propio JS del plugin. */
.woocommerce-cart-form.processing .blockUI.blockOverlay,
.woocommerce-cart .cart_totals.processing .blockUI.blockOverlay {
    background: var(--ivory) !important;
    opacity: 0.82 !important;
}

.woocommerce-cart-form.processing .blockUI.blockOverlay::after,
.woocommerce-cart .cart_totals.processing .blockUI.blockOverlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: bena-cart-gira 0.7s linear infinite;
}

@keyframes bena-cart-gira {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-cart-form,
    .woocommerce-cart .cart_totals {
        animation: none;
    }

    .woocommerce-cart-form.processing .blockUI.blockOverlay::after,
    .woocommerce-cart .cart_totals.processing .blockUI.blockOverlay::after {
        animation: none;
    }
}

/* El aviso de «usamos la dirección de tu cuenta» en el checkout. */
.bena-direccion-guardada {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: #f2efe8;
    border-left: 3px solid var(--accent, #b4553a);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink);
}

.bena-direccion-guardada a {
    color: var(--muted);
}

/* La salida del formulario de dirección. */
.bena-volver {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
}

.bena-volver a {
    color: var(--muted);
    text-decoration: none;
}

.bena-volver a:hover,
.bena-volver a:focus-visible {
    color: var(--ink);
}

.bena-direccion__acciones {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.bena-direccion__cancelar {
    font-size: 0.875rem;
    color: var(--muted);
}

/* El zoom de iOS al tocar un campo.
   ------------------------------------------------------------------
   Rony: «cuando termino de escribir mi correo se hace un zoom y se entrecorta».
   No es su teléfono: Safari en iOS hace zoom automático sobre CUALQUIER campo
   cuya letra mida menos de 16 px, y todos los de la tienda están entre 14 y 15.
   Al salir del campo la página se queda ampliada, y eso es lo que se ve como
   que «se entrecorta».

   La solución no es desactivar el zoom con `user-scalable=no` —eso le quita a
   la gente la posibilidad de ampliar la página, que para muchos es la única
   forma de leerla—: es que los campos midan 16 px justos mientras se escribe.
   Solo en pantallas táctiles; en escritorio el tamaño de diseño se queda. */
@media (hover: none) and (max-width: 64rem) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* El asterisco rojo, con su explicación al pasar el ratón.
   ------------------------------------------------------------------
   Rony: «hay un asterisco rojo, pues fíjate que al acercar el mouse no pasa
   nada, no da un flotante chiquito dando indicaciones».

   La primera versión de esto apuntaba a `abbr.required`, que es lo que
   WooCommerce usaba antes y lo que dice media internet. En esta versión ya no:
   pinta `<span class="required" aria-hidden="true">*</span>`, sin `abbr` y sin
   `title`. O sea que no solo faltaba el globo del tema — tampoco había globo
   nativo, porque no hay atributo que enseñar. Se comprobó en el navegador antes
   de escribir esta regla.

   Por eso el texto va escrito aquí y no con `attr(title)`: no hay title del que
   sacarlo. La tienda es solo en español, así que no se pierde nada.

   `pointer-events: none` en el globo evita el parpadeo infinito: sin eso el
   globo se mete debajo del cursor, el `:hover` del asterisco se pierde, el globo
   desaparece, vuelve el hover… y así. */
.woocommerce form .form-row .required,
.bena-checkout .form-row .required {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted currentColor;
}

.woocommerce form .form-row .required::after,
.bena-checkout .form-row .required::after {
    content: "Obligatorio";
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    padding: 0.35rem 0.6rem;
    border-radius: 3px;
    background: var(--obsidian, #12110f);
    color: var(--ivory, #fcfaf6);
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.woocommerce form .form-row .required:hover::after,
.bena-checkout .form-row .required:hover::after {
    opacity: 1;
}

/* En el móvil no hay ratón: el globo no llegaría nunca y encima se quedaría
   pegado tras un toque. La ayuda de cada campo ya está bajo la casilla. */
@media (hover: none) {
    .woocommerce form .form-row .required::after,
    .bena-checkout .form-row .required::after {
        content: none;
    }

    .woocommerce form .form-row .required,
    .bena-checkout .form-row .required {
        border-bottom: 0;
        cursor: auto;
    }
}

/* El destello blanco del checkout.
   ------------------------------------------------------------------
   Al cambiar de método de pago —o de provincia— WooCommerce recalcula por AJAX
   y mientras tanto tapa el resumen y el bloque de pagos con un overlay blanco
   al 60%. En una conexión buena eso dura 200 ms, y 200 ms de blanco no se leen
   como «cargando»: se leen como que la página parpadeó. Rony lo describió como
   «un flash blanco, como que se recarga».

   No se quita el velo, porque cuando la respuesta SÍ tarda hace falta: se
   retrasa. El overlay queda transparente y el tinte lo pone un pseudoelemento
   que empieza a aparecer a los 350 ms. Una respuesta normal termina antes y no
   se ve nada; una lenta lo tiñe suave y enseña el aro.

   El tinte va en `::before` y no en el propio overlay porque su `opacity` viene
   en el atributo `style` desde el JS del plugin: para ganarle haría falta un
   `!important`, y un `!important` sobre `opacity` deja muerta la animación. */
.woocommerce-checkout .blockUI.blockOverlay {
    background: transparent !important;
    opacity: 1 !important;
}

.woocommerce-checkout .blockUI.blockOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ivory);
    opacity: 0;
    /* 0,6 s y no 0,35: el refresco que WooCommerce hace al abrir el checkout
       tarda 334 ms medidos en producción, justo en el borde del umbral
       anterior. Unas veces asomaba el velo y otras no, y ese parpadeo sin
       motivo se lee como si la página se hubiera recargado sola —lo notó Rony
       antes de que ninguna medición lo dijera—. Por debajo de 0,6 s el cambio
       ya se percibe como instantáneo y el velo sobra; por encima, sigue
       apareciendo, que es cuando de verdad hace falta avisar. */
    animation: bena-velo-checkout 0.25s ease-out 0.6s forwards;
}

.woocommerce-checkout .blockUI.blockOverlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation:
        bena-velo-checkout 0.25s ease-out 0.6s forwards,
        bena-cart-gira 0.7s linear 0.6s infinite;
}

@keyframes bena-velo-checkout {
    to {
        opacity: 0.72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-checkout .blockUI.blockOverlay::after {
        animation: bena-velo-checkout 0.25s ease-out 0.35s forwards;
    }
}

/* --------------------------------------------------- transportadoras */

/* Una franja sobria: son marcas ajenas y no deben competir con la nuestra,
   pero tienen que leerse, que para eso están. */
.bena-couriers {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.bena-couriers__title {
    margin: 0 0 0.9rem;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.bena-couriers__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bena-couriers__item {
    display: flex;
    flex: 1 1 9.5rem;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    min-height: 3.25rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--line);
    background: var(--ivory);
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--ink);
}

/* Los logos llegan en proporciones dispares —Gintracom es casi cuadrado,
   Laarcourier muy apaisado—. Limitar alto y ancho a la vez, con `contain`,
   los deja ópticamente parejos sin recortar ninguno. */
.bena-couriers__item img {
    display: block;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.bena-couriers__note {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}

@media (max-width: 30rem) {
    .bena-couriers__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* El resumen no puede desbordar la pantalla, pase lo que pase.

   Aquí hubo un `white-space: nowrap` en las celdas del pie, puesto para que
   «Ahorro por ofertas» no se partiera en tres líneas. En emulación no se notaba,
   pero en un iPhone real —con la letra del sistema más grande— esos mínimos que
   no pueden ceder empujaban la tabla fuera del ancho y los importes quedaban
   fuera de la pantalla: se veían las etiquetas y ninguna cifra. Lo de las tres
   líneas ya está resuelto de raíz dando `colspan` a la etiqueta, así que el
   nowrap sobraba y solo hacía daño.

   La regla ahora es que la tabla nunca gana al contenedor: los nombres largos
   parten y las cifras se quedan a la derecha. */
table.bena-resumen {
    width: 100%;
    max-width: 100%;
}

table.bena-resumen tfoot th {
    width: auto;
    white-space: normal;
    hyphens: none;
}

/* `break-word` y no `anywhere`: el segundo deja que la columna se encoja hasta
   su mínimo absoluto y parte el nombre letra por letra —con la letra grande de
   un móvil, «Comedero» bajaba en vertical, una letra por línea—. `break-word`
   solo parte la palabra que de verdad no cabe. */
table.bena-resumen .bena-resumen__nombre {
    overflow-wrap: break-word;
}

/* La miniatura se mide en píxeles, no en `rem`, y con `min-width`.
   En `rem` crecía con la letra del sistema —78 px con la letra grande de un
   móvil— y, como la tabla ya no puede pasarse del ancho, el navegador cobraba
   ese exceso encogiendo lo único que cedía: la propia foto, que se quedaba en
   0 px de ancho y 78 de alto, una raya negra al lado del nombre. Una foto no
   es texto: no tiene por qué crecer con él. */
table.bena-resumen .bena-resumen__foto {
    width: 52px;
    min-width: 52px;
}

table.bena-resumen .bena-resumen__miniatura img {
    width: 44px;
    min-width: 44px;
    height: 44px;
}

/* La chapa sobresale de la foto, así que la celda necesita ese hueco a la
   derecha: sin él el número queda pegado a la primera letra del nombre y se
   lee «3Botella». En píxeles como la foto, por lo mismo. */
table.bena-resumen .bena-resumen__foto {
    padding-right: 12px;
}

table.bena-resumen .bena-resumen__cantidad {
    top: -6px;
    right: -6px;
}

/* WooCommerce cuelga «(incluye $6.06 IVA 15%)» del total; con el IVA ya en su
   propia fila, repetirlo ahí dice dos veces lo mismo y hace dudar de si se
   cobró aparte. */
.cart_totals tr.order-total .includes_tax {
    display: none;
}

/* ================================================================
   Pago con QR y envío del comprobante
   ================================================================ */

.bpec-qr {
    margin: 1.1rem 0 0;
    max-width: 100%;
    padding: clamp(0.6rem, 3vw, 1.1rem);
    background: var(--ivory);
    border: 1px solid var(--line);
    text-align: center;
}

.bpec-qr__monto {
    margin: 0 0 0.85rem;
    font-size: 1rem;
}

.bpec-qr__monto strong {
    font-weight: 500;
}

/* 300 px es el mínimo con el que el código sigue leyéndose —medido bajando la
   imagen y decodificándola, a 240 ya no se lee—, pero el mínimo va dentro de un
   `min()` y no suelto: en el teléfono la caja de la pasarela deja unos 268 px
   útiles, y un `min-width: 300px` a secas empujaba la imagen fuera de la
   pantalla. `min(300px, 100%)` se rinde antes de desbordar.
   Que en el móvil el código salga algo más chico no cuesta nada: ahí no se
   escanea —el código está en la misma pantalla con la que habría que
   escanearlo—, para eso está el botón de deUna justo debajo. */
.bpec-qr__img {
    display: block;
    width: 100%;
    min-width: min(300px, 100%);
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}

.bpec-qr__boton {
    display: block;
    margin: 1rem auto 0;
    max-width: min(320px, 100%);
    padding: 0.9rem 1.25rem;
    background: var(--obsidian);
    color: var(--ivory);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.bpec-qr__boton:hover,
.bpec-qr__boton:focus {
    background: var(--accent);
    color: var(--ivory);
}

.bpec-qr__ayuda,
.bpec-qr__titular,
.bpec-qr__siguiente {
    margin: 0.7rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bpec-qr__continuar {
    display: block;
    width: min(320px, 100%);
    margin: 1.25rem auto 0;
    padding: 1rem 1.25rem;
    border: 0;
    background: var(--accent);
    color: var(--ivory);
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.bpec-qr__continuar:hover,
.bpec-qr__continuar:focus-visible {
    background: var(--ink);
    color: var(--ivory);
}

.bpec-qr__siguiente {
    max-width: 320px;
    margin-inline: auto;
}

/* --- la sección de la página de gracias --- */

.bpec-pago {
    margin: 2rem 0;
    padding: clamp(1.25rem, 4vw, 2rem);
    background: var(--bone);
    border: 1px solid var(--line);
}

.bpec-pago__titulo {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    margin: 0 0 0.6rem;
}

.bpec-pago__intro {
    margin: 0 0 1rem;
    max-width: var(--measure);
}

.bpec-pago .bpec-qr {
    max-width: 26rem;
    margin-inline: auto;
}

.bpec-pago__form {
    max-width: 26rem;
    margin: 1.5rem auto 0;
    text-align: center;
}

.bpec-pago__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.bpec-pago__file {
    display: block;
    width: 100%;
    padding: 0.9rem;
    background: var(--ivory);
    border: 1px solid var(--line);
    font: inherit;
}

.bpec-pago__nota {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.bpec-pago__error {
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.9rem;
    background: rgba(180, 85, 58, 0.1);
    border-left: 3px solid var(--accent);
    font-size: 0.875rem;
    text-align: left;
}

.bpec-pago__enviar,
.woocommerce .bpec-pago__enviar {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--obsidian);
    color: var(--ivory);
    border: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.bpec-pago__enviar:hover,
.woocommerce .bpec-pago__enviar:hover {
    background: var(--accent);
}

.bpec-pago--listo {
    background: var(--ivory);
    border-left: 3px solid #2f7a3f;
}

/* -------------------------------------------------- Ficha de garantía
   Siete campos, tres de ellos de archivo. Sin esto el formulario salía con
   los `input type=file` desnudos del navegador, que en el móvil se ven como
   un botón gris minúsculo y no dejan claro que hay que subir varias fotos. */

.bpec-claims {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.bpec-claim__intro {
    max-width: var(--measure);
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bpec-claim {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--bone);
    border-left: 3px solid var(--accent);
}

.bpec-claim__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0 0 0.5rem;
}

.bpec-claim__state {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--parchment);
    border-radius: 999px;
}

.bpec-claim__state--resuelto { background: #d8ecdc; }
.bpec-claim__state--rechazado { background: #f0dcd6; }

.bpec-claim__body,
.bpec-claim__answer { margin: 0.25rem 0 0; font-size: 0.95rem; line-height: 1.6; }
.bpec-claim__closed { color: var(--muted); font-size: 0.95rem; }

.bpec-claim-form {
    max-width: var(--measure);
    margin-top: 1.5rem;
}

.bpec-claim-form p { margin: 0 0 1.35rem; }

.bpec-claim-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.bpec-claim-form__hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.bpec-claim-form select,
.bpec-claim-form textarea,
.bpec-claim-form input[type="tel"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 2px;
}

.bpec-claim-form textarea { resize: vertical; }

.bpec-claim-form input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.85rem;
    font-size: 0.9rem;
    background: var(--bone);
    border: 1px dashed var(--line);
    border-radius: 2px;
    cursor: pointer;
}

.bpec-claim-form input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ivory);
    background: var(--obsidian);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.bpec-claim-form button {
    padding: 0.9rem 1.75rem;
    font-size: 0.95rem;
}

/* Las condiciones dentro de la ficha. Van con fondo propio y no como un
   párrafo más: lo que protege no es que estén escritas, es que se lean. */

.bpec-claim-form__condiciones {
    margin: 0 0 1.5rem;
    padding: 1.15rem 1.35rem;
    background: var(--bone);
    border-left: 3px solid var(--accent);
}

.bpec-claim-form__condiciones-titulo {
    margin: 0 0 0.65rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.bpec-claim-form__condiciones ul {
    margin: 0;
    padding-left: 1.1rem;
}

.bpec-claim-form__condiciones li {
    margin-bottom: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--muted);
}

.bpec-claim-form__acepto {
    margin: 0.9rem 0 0 !important;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.bpec-claim-form__acepto label {
    display: inline;
    font-weight: 600;
}

.bpec-claim-form__acepto input { margin-right: 0.45rem; }

/* Aviso antifraude del checkout. Va justo encima del botón de pagar porque
   ahí es donde se lee: más arriba se pierde entre los campos, y más abajo ya
   se pulsó. Discreto a propósito —no es una alarma, es una garantía—. */

.bpec-antifraude {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--bone);
    border: 1px solid var(--line);
    border-radius: 2px;
}

.bpec-antifraude__titulo {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.bpec-antifraude__titulo::before {
    content: "✓";
    margin-right: 0.4rem;
    color: #2f7a3f;
}

.bpec-antifraude__texto {
    margin: 0;
    flex: 1 1 16rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted);
}

.bpec-antifraude__texto a { color: inherit; }