/* ==========================================================================
   MR. BARBECHO — Design tokens
   ========================================================================== */
:root {
    --black: #0e0e0e;
    --white: #ffffff;
    --yellow: #eeff2f;      /* amarillo fosforito de marca */
    --yellow-deep: #d3e600;
    --cream: #fafaf7;
    --gray-border: #e8e8e2;
    --text: #1c1c1a;
    --text-muted: #75756d;
    --out-of-stock: #cfcfc7;
    --out-of-stock-red: #a85c54;
}

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

body {
    font-family: 'Work Sans', sans-serif;
    color: var(--text);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
    font-family: 'Archivo Black', 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.05;
}

a { color: inherit; }

::selection { background: var(--yellow); color: var(--black); }

:focus-visible {
    outline: 3px solid var(--yellow-deep);
    outline-offset: 2px;
}

/* ==========================================================================
   TICKER — cinta amarilla en movimiento
   ========================================================================== */
.announcement-bar {
    background-color: var(--yellow);
    color: var(--black);
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 2px solid var(--black);
}

.ticker-track {
    display: inline-flex;
    align-items: center;
    animation: ticker-scroll 22s linear infinite;
    padding: 9px 0;
}

.ticker-track span {
    font-family: 'Archivo Black', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0 24px;
    white-space: nowrap;
}

/* Separador de la cinta: una pequeña ETIQUETA DE PRECIO (el motivo de tienda
   física de la marca) en vez de una estrella genérica. Dibujada con CSS: un
   rectángulo negro con la punta recortada a la izquierda y un "ojal" amarillo,
   ligeramente inclinada para dar sensación hecha a mano. Es decorativa
   (aria-hidden), así que no lleva texto. */
.ticker-track .ticker-sep {
    width: 24px;
    height: 13px;
    padding: 0;
    margin: 0 4px;
    flex: 0 0 auto;
    align-self: center;
    background: var(--black);
    /* Punta a la izquierda (como el pico de una etiqueta colgante) */
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
    transform: rotate(-7deg);
    position: relative;
}
.ticker-track .ticker-sep::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--yellow);
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Cristal esmerilado: negro translúcido + blur, con una línea amarilla que
   aparece al hacer scroll. Además el header se esconde al bajar y reaparece
   al subir (.header-oculto, gestionado por inicializarHeaderScroll). */
.main-header {
    border-bottom: 2px solid var(--black);
    position: sticky;
    top: 0;
    background: rgba(14,14,14,0.88);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    z-index: 100;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: box-shadow 0.5s ease, border-color 0.5s ease,
                transform 0.55s cubic-bezier(.22,1,.36,1);
}

.main-header.header-scrolled {
    box-shadow: 0 10px 30px rgba(0,0,0,0.30);
    border-bottom-color: var(--yellow);
}

/* Escondido al bajar; al subir vuelve con la misma curva suave */
.main-header.header-oculto { transform: translateY(-110%); }

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: padding 0.45s cubic-bezier(.22,1,.36,1);
}

.header-scrolled .header-container { padding: 11px 20px; }

.logo {
    font-family: 'Archivo Black', sans-serif;
    font-size: 19px;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: var(--white);
    position: relative;
    padding-right: 14px;
    display: inline-block;
    transition: font-size 0.3s cubic-bezier(.4,0,.2,1), letter-spacing 0.3s ease;
}

.header-scrolled .logo { font-size: 16px; }

.logo::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 0;
    width: 7px;
    height: 7px;
    background: var(--yellow);
    border-radius: 50%;
    transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}

.logo:hover { letter-spacing: 2.5px; }
.logo:hover::after {
    transform: rotate(180deg) scale(1.6);
    box-shadow: 0 0 10px 2px rgba(238,255,47,0.6);
}

/* Selector de hijo directo a propósito: así no alcanza también al <ul> del
   submenú desplegable (.dropdown-menu), que necesita su propio layout. */
.nav-menu > ul { display: flex; align-items: center; gap: 28px; list-style: none; }

.nav-menu a {
    position: relative;
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    font-weight: 600;
    letter-spacing: 1px;
    padding-bottom: 4px;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.nav-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--yellow);
    letter-spacing: 1.4px;
}

.nav-menu a:hover::before,
.nav-menu a.active::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* Submenú desplegable "Tienda" — Moda Hombre / Moda Mujer */
.nav-item-dropdown {
    position: relative;
    /* El padding extiende la zona "hoverable" hasta el menú, sin dejar hueco muerto
       entre el enlace y el desplegable (así no se cierra al mover el ratón hacia abajo) */
    padding-bottom: 24px;
    margin-bottom: -24px;
}

.nav-item-dropdown::after {
    content: '▾';
    position: absolute;
    top: 1px;
    right: -15px;
    font-size: 10px;
    color: var(--white);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), color 0.25s ease;
}
.nav-item-dropdown:hover::after,
.nav-item-dropdown:focus-within::after {
    color: var(--yellow);
    transform: rotate(180deg);
}

/* El punto de anclaje es el padding-bottom de .nav-item-dropdown (100% incluye
   esa franja "hoverable"), así el menú siempre queda claramente por debajo
   de la cabecera en vez de superponerse a ella. */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px) scale(0.94);
    transform-origin: top center;
    list-style: none;
    background: var(--black);
    border: 2px solid var(--yellow);
    min-width: 210px;
    box-shadow: 6px 6px 0 var(--yellow);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.34,1.56,.64,1), visibility 0.28s;
    z-index: 120;
}

.dropdown-menu li {
    width: 100%;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 22px;
    font-size: 12px;
    letter-spacing: 0.6px;
    border-bottom: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.25s cubic-bezier(.4,0,.2,1);
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 9px solid var(--yellow);
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.nav-item-dropdown:hover .dropdown-menu li,
.nav-item-dropdown:focus-within .dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu li:nth-child(1) { transition-delay: 0.06s; }
.dropdown-menu li:nth-child(2) { transition-delay: 0.14s; }
.dropdown-menu li:nth-child(3) { transition-delay: 0.22s; }
.dropdown-menu li:nth-child(4) { transition-delay: 0.30s; }
.dropdown-menu li:nth-child(5) { transition-delay: 0.38s; }
.dropdown-menu li:nth-child(6) { transition-delay: 0.46s; }

.dropdown-menu a::before {
    content: none;
}

.dropdown-menu li:nth-child(1) a span.dropdown-icon::before { content: '👔'; }
.dropdown-menu li:nth-child(2) a span.dropdown-icon::before { content: '👗'; }
.dropdown-menu li:nth-child(3) a span.dropdown-icon::before { content: '🎒'; }
.dropdown-menu li:nth-child(4) a span.dropdown-icon::before { content: '🩱'; }
.dropdown-menu li:nth-child(5) a span.dropdown-icon::before { content: '🧦'; }
.dropdown-menu li:nth-child(6) a span.dropdown-icon::before { content: '👟'; }
.dropdown-menu .dropdown-icon { font-size: 15px; line-height: 1; }

.dropdown-menu li:not(:last-child) a { border-bottom: 1px dashed rgba(238,255,47,0.3); }

.dropdown-menu a:hover {
    background: var(--yellow);
    color: var(--black);
    padding-left: 28px;
}

@media (max-width: 900px) {
    .dropdown-menu { left: 0; transform: translateY(-10px) scale(0.94); transform-origin: top left; }
    .dropdown-menu::before { left: 24px; }
    .nav-item-dropdown:hover .dropdown-menu,
    .nav-item-dropdown:focus-within .dropdown-menu { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .main-header, .header-container, .logo, .logo::after,
    .nav-menu a, .nav-menu a::before,
    .nav-item-dropdown::after, .dropdown-menu, .dropdown-menu li, .dropdown-menu a {
        transition: none !important;
    }
}

.cart-btn {
    background: var(--yellow);
    color: var(--black);
    border: 2px solid var(--yellow);
    padding: 9px 18px;
    font-family: 'Archivo Black', sans-serif;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}

.cart-btn:hover { background: var(--black); color: var(--yellow); }

.cart-count {
    background: var(--black);
    color: var(--yellow);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 11px;
}

.cart-btn:hover .cart-count { background: var(--yellow); color: var(--black); }

/* ==========================================================================
   ÁREA DE USUARIO — sesión iniciada / iniciar sesión (en el header)
   ========================================================================== */
.user-area { display: flex; align-items: center; }

.login-btn {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--yellow);
    padding: 8px 16px;
    font-family: 'Archivo Black', sans-serif;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}
.login-btn:hover { background: var(--yellow); color: var(--black); }

/* --- Perfil con desplegable (avatar + nombre -> menú con Panel/Salir) --- */
.user-menu { position: relative; }

.user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    border: 2px solid var(--yellow);
    padding: 6px 12px 6px 8px;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
.user-trigger:hover { background: rgba(255,255,255,0.13); }
.user-menu.abierto .user-trigger { background: rgba(255,255,255,0.13); }

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--black);
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-name {
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-caret {
    color: var(--yellow);
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    /* rebote suave al girar (misma sensación que el resto de microinteracciones) */
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.user-menu.abierto .user-caret { transform: rotate(180deg); }

.user-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 258px;
    background: var(--black);
    border: 2px solid var(--yellow);
    box-shadow: 6px 6px 0 var(--yellow);
    z-index: 200;
    /* estado cerrado: invisible y ligeramente desplazado/encogido */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.2s ease,
                transform 0.24s cubic-bezier(0.34, 1.4, 0.5, 1),
                visibility 0.24s;
    pointer-events: none;
}
.user-menu.abierto .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* pico que conecta el menú con el disparador */
.user-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: var(--black);
    border-left: 2px solid var(--yellow);
    border-top: 2px solid var(--yellow);
    transform: rotate(45deg);
}

.user-drop-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 2px solid rgba(238,255,47,0.25);
}
.user-drop-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--black);
    font-family: 'Archivo Black', sans-serif;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-drop-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-drop-name {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    font-family: 'Archivo Black', sans-serif;
    font-size: 13px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-drop-badge {
    background: var(--yellow);
    color: var(--black);
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    flex-shrink: 0;
}
.user-drop-email {
    color: rgba(255,255,255,0.55);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-drop-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
}
.user-drop-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--white);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: left;
    text-decoration: none;
    padding: 11px 12px;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}
.user-drop-item:hover {
    background: rgba(238,255,47,0.12);
    border-left-color: var(--yellow);
    color: var(--yellow);
    padding-left: 17px;
}
.user-drop-ico { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
/* Iconos SVG inline (p.ej. el de "Cerrar sesión"): heredan currentColor,
   así que también se tiñen de rojo con el hover del item */
.user-drop-ico svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }

/* "Cerrar sesión" separado del resto y con un matiz propio */
.user-drop-item-logout { margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.1); border-radius: 0; }
.user-drop-item-logout:hover {
    background: rgba(255,90,90,0.14);
    border-left-color: #ff5a5a;
    color: #ff7a7a;
}

/* ==========================================================================
   MODAL DE INICIO DE SESIÓN

   Lenguaje visual: el modal entra como si fuera un sello que se estampa
   (leve rotación + rebote), y el botón de cerrar es una pestaña cuadrada
   "pegada" a la esquina, igual que las cintas de oferta/agotado de las
   tarjetas de producto — reutiliza un motivo que ya existe en la marca
   en vez de inventar uno nuevo.
   ========================================================================== */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.7);
    backdrop-filter: blur(2px);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.login-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

.login-modal {
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 8px 8px 0 #fb2789;
    width: 100%;
    max-width: 360px;
    padding: 30px 28px 28px;
    position: relative;
    opacity: 0;
    transform: scale(0.9) rotate(-1.5deg);
}
.login-modal-overlay.active .login-modal {
    animation: authStampIn 0.4s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
@keyframes authStampIn {
    0%   { opacity: 0; transform: scale(0.88) rotate(-2deg); }
    60%  { opacity: 1; transform: scale(1.02) rotate(0.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.login-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border: 3px solid var(--black);
    color: var(--yellow);
    font-family: 'Archivo Black', sans-serif;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.login-modal-close:hover { background: var(--yellow); color: var(--black); transform: rotate(90deg); }
.login-modal-close:active { transform: rotate(90deg) scale(0.88); }

.login-modal h3 {
    font-size: 18px;
    margin-bottom: 6px;
}
.login-modal .login-subtitle {
    color: var(--text-muted);
    font-size: 12px;
    font-family: 'Space Mono', monospace;
    margin-bottom: 22px;
}

.login-field { margin-bottom: 16px; }
.login-field label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-family: 'Space Mono', monospace;
}
.login-field input {
    width: 100%;
    padding: 11px;
    border: 2px solid var(--black);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    outline: none;
    background: var(--cream);
    box-shadow: 0 0 0 var(--black);
    transition: background 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.login-field input:focus {
    background: var(--white);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--black);
}

.login-submit-btn {
    width: 100%;
    background: var(--black);
    color: var(--yellow);
    border: none;
    padding: 14px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 4px 4px 0 var(--yellow-deep);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.login-submit-btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--yellow-deep); }
.login-submit-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--yellow-deep); }
.login-submit-btn:disabled { opacity: 0.75; cursor: not-allowed; }
.login-submit-btn:disabled::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 9px;
    vertical-align: -1px;
    border: 2px solid var(--yellow);
    border-top-color: transparent;
    border-radius: 50%;
    animation: authSpin 0.6s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* Pestañas Iniciar sesión / Crear cuenta — indicador negro que se desliza
   entre las dos, en vez de un cambio de fondo instantáneo */
.auth-tabs {
    position: relative;
    display: flex;
    background: var(--cream);
    border: 2px solid var(--black);
    margin-bottom: 18px;
    overflow: hidden;
}
.auth-tabs-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--black);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}
.auth-tabs.is-registro .auth-tabs-indicator { transform: translateX(100%); }
.auth-tab {
    position: relative;
    z-index: 1;
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 6px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.auth-tab:first-child { border-right: 2px solid var(--black); }
.auth-tab.active { color: var(--yellow); }

.auth-error {
    background: #fdeaea;
    border: 2px solid #c81e1e;
    color: #a11a1a;
    font-size: 12px;
    font-family: 'Space Mono', monospace;
    padding: 10px 12px;
    margin-bottom: 16px;
    animation: authErrorIn 0.3s ease;
}
@keyframes authErrorIn {
    0%   { opacity: 0; transform: translateY(-6px); }
    40%  { opacity: 1; transform: translateY(0); }
    55%  { transform: translateX(-4px); }
    75%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

/* Aviso informativo del modal de acceso (no es un error): p.ej. cuando se pide
   iniciar sesión para completar la compra. Usa el amarillo de marca. */
.auth-aviso {
    background: var(--yellow);
    border: 2px solid var(--yellow-deep);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Space Mono', monospace;
    padding: 10px 12px;
    margin-bottom: 16px;
    animation: authErrorIn 0.3s ease;
}

/* "¿Has olvidado tu contraseña?" y "Volver a iniciar sesión": enlaces de
   texto dentro de los formularios del modal de acceso */
.auth-olvido-link {
    display: block;
    width: 100%;
    background: none;
    border: none;
    margin-top: 14px;
    padding: 0;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.auth-olvido-link:hover { color: var(--text); }

.auth-recuperar-texto {
    font-size: 12px;
    font-family: 'Space Mono', monospace;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}
.auth-recuperar-exito { margin-bottom: 0; }

/* Página /restablecer (paso 2 de la recuperación de contraseña) */
.restablecer-panel { max-width: 440px; margin: 0 auto; }

/* Envoltorio de los dos formularios: anima su propia altura para que el
   modal no "salte" al cambiar entre Iniciar sesión y Crear cuenta, que
   tienen un número de campos muy distinto */
.auth-forms-wrap {
    position: relative;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(.4, 0, .2, 1);
}
.login-modal form { display: none; }
.login-modal form.auth-form-activa,
.login-modal form.auth-form-saliendo,
.login-modal form.auth-form-midiendo {
    display: block;
}
.login-modal form.auth-form-saliendo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: authFormSalir 0.26s ease forwards;
}
.login-modal form.auth-form-midiendo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}
.login-modal form.auth-form-activa {
    animation: authFormEntra 0.32s cubic-bezier(.2, 1, .3, 1) both;
}
@keyframes authFormSalir { to { opacity: 0; transform: translateX(-16px); } }
@keyframes authFormEntra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* Casillas "recordarme" y "acepto la política de privacidad" */
.recordar-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
    transition: color 0.15s ease;
}
.recordar-check:hover { color: var(--text); }
.recordar-check input {
    margin-top: 2px;
    width: 15px;
    height: 15px;
    accent-color: var(--black);
    flex-shrink: 0;
    cursor: pointer;
}

/* Bloque "Iniciar sesión con Google" del modal de acceso: el botón oficial de
   Google (lo pinta su propia biblioteca dentro de #googleBtnContainer), un
   aviso de privacidad y un divisor "o con tu email" antes de los formularios.
   Va oculto (hidden) hasta que se confirma que la opción está activa. */
.auth-social { margin-bottom: 18px; }
.auth-google-btn {
    display: flex;
    justify-content: center;
    min-height: 40px;
}
.auth-social-nota {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    margin-top: 10px;
}
.auth-social-nota a { text-decoration: underline; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--gray-border);
}
/* Mientras se envía el token a nuestro servidor, atenuamos el bloque para
   dar sensación de "cargando" (el botón de Google no es controlable por CSS). */
.auth-social-cargando { opacity: 0.55; pointer-events: none; }

/* Check "Mostrar el botón de Google" de la tarjeta del panel: la label genérica
   de .admin-glop-campo es display:block; aquí la volvemos en línea con su check. */
.admin-glop-check {
    display: flex !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    margin-bottom: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
}
.admin-glop-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--black);
    flex-shrink: 0;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .login-modal-overlay,
    .login-modal,
    .login-modal-close,
    .auth-tabs-indicator,
    .login-field input,
    .login-submit-btn,
    .auth-error,
    .auth-forms-wrap,
    .login-modal form.auth-form-activa,
    .login-modal form.auth-form-saliendo {
        animation: none !important;
        transition: none !important;
    }
    .login-modal-overlay.active .login-modal { opacity: 1; transform: none; }
}

/* ==========================================================================
   VENTANA DE DETALLE DE PRODUCTO — se abre al hacer click en una tarjeta
   ========================================================================== */
body.producto-modal-abierto { overflow: hidden; }

.producto-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.72);
    backdrop-filter: blur(3px);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.producto-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

/* El "marco" (borde, sombra, botón de cerrar) se queda con overflow visible
   a propósito: el botón de cerrar sobresale por fuera del borde, y si este
   contenedor recortara el desbordamiento (overflow-y: auto, como tenía antes)
   se cortaba tanto el botón como el propio contenido. El scroll, si hace
   falta, vive en .producto-modal-body, un nivel más adentro. */
.producto-modal {
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 14px 14px 0 var(--yellow);
    width: 100%;
    max-width: 1180px;
    max-height: 90vh;
    position: relative;
    opacity: 0;
    transform: scale(0.92) rotate(-1deg);
}
.producto-modal-overlay.active .producto-modal {
    animation: productoStampIn 0.4s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
@keyframes productoStampIn {
    0%   { opacity: 0; transform: scale(0.9) rotate(-1.5deg); }
    60%  { opacity: 1; transform: scale(1.015) rotate(0.4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.producto-modal-body {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.producto-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border: 3px solid var(--black);
    color: var(--yellow);
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 30;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.producto-modal-close:hover { background: var(--yellow); color: var(--black); transform: rotate(90deg); }
.producto-modal-close:active { transform: rotate(90deg) scale(0.88); }

/* La foto ya no ocupa el hueco borde a borde: un panel con aire alrededor
   (fondo crema) enmarca la imagen, que vive en su propio recuadro con borde
   propio, en vez de "ahogarse" contra los bordes de la ventana */
/* El panel se estira con la fila entera (comportamiento normal de grid) para
   que el fondo crema y la línea divisoria lleguen abajo del todo. Quien lleva
   el sticky NO es el recuadro de la foto sino un envoltorio intermedio, y esa
   es la clave para que la foto quede centrada en vertical Y siga al scroll:
   sticky respeta la posición natural del elemento, así que centrar el recuadro
   dentro de una columna de varias pantallas (descripción larga) lo dejaba a
   mitad de esa columna, fuera de la vista al abrir el modal. El envoltorio, en
   cambio, mide como mucho lo que se ve del modal, así que su centro es el
   centro de la pantalla: la foto entra centrada y se queda centrada mientras
   se baja por la descripción. */
.producto-modal-imagen-panel {
    background: var(--cream);
    border-right: 2px solid var(--black);
    padding: 40px;
}

/* height: 100% = el alto de la columna (menos su padding), de modo que con
   textos cortos —cuando no hay scroll— el envoltorio es la columna entera y la
   foto queda centrada en ella, exactamente como antes. El max-height es el
   área visible del scroll (.producto-modal-body mide 90vh) menos los 40px de
   arriba y otros tantos de respiro abajo: en cuanto la columna es más alta que
   la ventana, el envoltorio se queda en ese alto de pantalla y el sticky lo
   pasea por la descripción. */
.producto-modal-imagen-sticky {
    position: sticky;
    top: 40px;
    height: 100%;
    max-height: calc(90vh - 80px);
    display: flex;
    /* En columna porque debajo de la foto va la tira de miniaturas del
       carrusel. La tira no encoge (flex-shrink: 0) y el recuadro de la foto
       sí, de modo que en pantallas bajas es la foto la que cede el sitio en
       vez de salirse la tira del área visible. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.producto-modal-imagen-marco {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 0;
    /* Nunca más alto que su envoltorio: en pantallas bajas la proporción 4/5
       pediría más alto del que se ve y la foto quedaría cortada por abajo. La
       imagen va con object-fit: contain, así que recortar el alto del recuadro
       no la deforma. */
    max-height: 100%;
    border: 2px solid var(--black);
}
.producto-modal.no-stock .producto-modal-imagen-marco { filter: grayscale(55%) brightness(0.92); }

/* --- Carrusel de fotos de la ficha ---------------------------------------
   Las flechas, el contador y la tira de miniaturas solo aparecen cuando el
   producto tiene más de una foto: app.js las oculta con el atributo [hidden],
   que hay que reforzar aquí porque un display propio le ganaría. */
.carrusel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--black);
    color: var(--black);
    font-family: 'Archivo Black', sans-serif;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: background 0.15s ease, transform 0.15s ease;
}
.carrusel-nav:hover { background: var(--yellow); }
.carrusel-nav:active { transform: translateY(-50%) scale(0.9); }
.carrusel-nav-prev { left: 10px; }
.carrusel-nav-sig { right: 10px; }
.carrusel-nav[hidden] { display: none; }

.carrusel-contador {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: var(--black);
    color: var(--yellow);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 3px 7px;
    z-index: 5;
}
.carrusel-contador[hidden] { display: none; }

.producto-modal-miniaturas {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding-bottom: 4px;
    overflow-x: auto;
}
.producto-modal-miniaturas[hidden] { display: none; }

.producto-modal-miniatura {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    padding: 0;
    background: var(--white);
    border: 2px solid var(--black);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.producto-modal-miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.producto-modal-miniatura:hover { opacity: 1; }
.producto-modal-miniatura.activa {
    opacity: 1;
    box-shadow: 4px 4px 0 var(--yellow);
}

.producto-modal-info {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
}

.producto-modal-categoria {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.producto-modal-titulo {
    font-size: 22px;
    margin-bottom: 16px;
}

.producto-modal-info .product-price { font-size: 18px; margin-bottom: 20px; }
.producto-modal-info .price-new { font-size: 20px; }

.producto-modal-descripcion {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--gray-border);
    white-space: pre-line;
}

.producto-modal-cantidad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 20px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.cantidad-stepper {
    display: flex;
    align-items: center;
    border: 2px solid var(--black);
}
.cantidad-btn {
    width: 34px;
    height: 34px;
    background: var(--white);
    border: none;
    font-family: 'Archivo Black', sans-serif;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cantidad-btn:hover:not(:disabled) { background: var(--black); color: var(--yellow); }
.cantidad-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cantidad-valor {
    width: 40px;
    text-align: center;
    font-family: 'Archivo Black', sans-serif;
    font-size: 13px;
    border-left: 2px solid var(--black);
    border-right: 2px solid var(--black);
    line-height: 34px;
}

.producto-modal-add-btn { margin-top: auto; }

.producto-modal-sku {
    margin-top: 16px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

/* Bloque "Detalles": un botón que despliega, con una pequeña animación de
   alto, una bandeja con el texto largo del producto (antes se mostraba
   siempre visible bajo el precio; ahora ese hueco lo ocupa el resumen corto
   y esto queda como algo opcional para quien quiera leer más). */
.producto-modal-detalles {
    margin-top: 22px;
    border-top: 1px dashed var(--gray-border);
    padding-top: 18px;
}

.producto-modal-detalles-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    transition: color 0.15s ease;
}
.producto-modal-detalles-btn:hover { color: var(--text-muted); }

.producto-modal-detalles-icono {
    font-size: 11px;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.producto-modal-detalles-btn.abierto .producto-modal-detalles-icono { transform: rotate(180deg); }

.producto-modal-detalles-tray {
    height: 0;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(.4,0,.2,1);
}

.producto-modal-detalles-texto {
    padding-top: 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-line;
}

/* Lupa de zoom: un recuadro (la lente) marca sobre la propia foto la zona
   que se está apuntando, y a su lado aparece otro panel con esa misma zona
   ampliada. Solo se activa con ratón de verdad y sitio de sobra (ver
   hayEspacioYRaton() en app.js), así que en móvil se anulan directamente. */
.zoom-lens {
    display: none;
    position: absolute;
    border: 2px solid var(--yellow);
    background: rgba(238, 255, 47, 0.25);
    box-shadow: 0 0 0 1px var(--black);
    pointer-events: none;
    z-index: 10;
}
.zoom-lens.activo { display: block; }

.zoom-resultado {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: var(--white);
    background-repeat: no-repeat;
    border-left: 3px solid var(--black);
    box-shadow: -6px 0 0 var(--yellow) inset;
    z-index: 25;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.zoom-resultado.activo { display: block; opacity: 1; transform: translateX(0); }
.zoom-resultado::before {
    content: '🔍 ZOOM';
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--black);
    color: var(--yellow);
    font-family: 'Archivo Black', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 4px 8px;
    z-index: 1;
}

@media (max-width: 720px) {
    .producto-modal { max-height: 92vh; }
    .producto-modal-body { grid-template-columns: 1fr; max-height: 92vh; }
    /* En una sola columna la foto va arriba del todo del texto, no al lado:
       fijarla ahí restaría a la pantalla el sitio que necesita el texto */
    .producto-modal-imagen-panel { padding: 24px; border-right: none; border-bottom: 2px solid var(--black); }
    .producto-modal-imagen-marco { aspect-ratio: 1 / 1; }
    .producto-modal-imagen-sticky { position: static; height: auto; max-height: none; }
    .producto-modal-info { padding: 28px 24px; }
    .zoom-lens, .zoom-resultado { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .producto-modal-overlay, .producto-modal, .producto-modal-close {
        animation: none !important;
        transition: none !important;
    }
    .producto-modal-overlay.active .producto-modal { opacity: 1; transform: none; }
}

/* ==========================================================================
   BOTÓN FLOTANTE DEL CARRITO — siempre visible, esquina inferior derecha
   ========================================================================== */
.cart-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 190;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--yellow);
    border: 3px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.cart-fab:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }

.cart-fab-icon { font-size: 24px; line-height: 1; color: var(--black); }
/* Bolsa SVG del botón: mismo dibujo en todos los sistemas/navegadores
   (el emoji 🛍️ cambiaba según la plataforma) */
.cart-fab-icon svg { width: 26px; height: 26px; display: block; }

.cart-fab .cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--black);
    color: var(--yellow);
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
}

.cart-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.7); }

/* Contador: oculto a cero (un "0" permanente solo mete ruido) y con un latido
   cada vez que cambia, para que el añadido se note con el panel cerrado */
.cart-fab .cart-count.cart-count-vacio { display: none; }
.cart-count-late { animation: cart-late 0.5s cubic-bezier(.22,1,.36,1); }
@keyframes cart-late {
    0% { transform: scale(1); }
    40% { transform: scale(1.55); }
    100% { transform: scale(1); }
}

/* Rebote del botón al "recibir" un producto (animarVueloAlCarrito) */
.cart-fab-rebote { animation: cart-rebote 0.55s cubic-bezier(.28,.84,.42,1); }
@keyframes cart-rebote {
    0% { transform: scale(1); }
    30% { transform: scale(1.22) rotate(-6deg); }
    55% { transform: scale(0.94) rotate(3deg); }
    100% { transform: scale(1); }
}

/* Imagen clonada que vuela de la tarjeta/modal al botón del carrito. El
   estado final (transform hacia el botón) lo fija app.js en línea. */
.cart-vuelo {
    position: fixed;
    z-index: 450; /* por encima del modal de producto (400), que queda abierto */
    object-fit: cover;
    border: 3px solid var(--black);
    box-shadow: 6px 6px 0 var(--black);
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(.5,-0.1,.3,1), opacity 0.65s ease;
    will-change: transform, opacity;
}

@media (max-width: 640px) {
    .cart-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
    .user-name { max-width: 80px; }
    /* Carrito en pantallas pequeñas: mismas proporciones, algo más compacto */
    .cart-item-thumb { width: 62px; height: 62px; }
    .cart-total #cartTotal { font-size: 24px; }
    .checkout-btn { padding: 17px 16px; font-size: 14px; }
}

/* ==========================================================================
   TIENDA — cabecera de sección
   ========================================================================== */
.store-container { max-width: 1200px; margin: 50px auto 80px; padding: 0 20px; }

.section-title { margin-bottom: 40px; position: relative; padding-left: 18px; border-left: 6px solid var(--yellow); }
.section-title h2 { font-size: 26px; }
.section-title p { color: var(--text-muted); font-size: 13px; margin-top: 6px; font-family: 'Space Mono', monospace; }

/* ==========================================================================
   TIENDA — accesos directos a las 4 secciones (Hombre / Mujer / Complementos / Baño)
   Mismo lenguaje "pop-art hard shadow" que .product-card, para que las tarjetas
   de sección se sientan parte del mismo sistema en vez de un componente aparte.
   ========================================================================== */
.store-sections { margin-bottom: 56px; }

.store-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.store-section-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 36px 20px;
    background: var(--white);
    border: 2px solid var(--black);
    text-decoration: none;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.store-section-card:hover,
.store-section-card:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0 var(--yellow);
}

.store-section-card.active {
    background: var(--black);
    border-color: var(--black);
    box-shadow: 6px 6px 0 var(--yellow);
}
.store-section-card.active .store-section-label { color: var(--yellow); }

.store-section-icon { font-size: 34px; line-height: 1; }

.store-section-label {
    font-family: 'Archivo Black', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--black);
}

@media (max-width: 640px) {
    .store-sections-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .store-section-card { padding: 26px 12px; }
    .store-section-icon { font-size: 28px; }
}

/* ==========================================================================
   BARRA DE BÚSQUEDA DEL CATÁLOGO
   ========================================================================== */
.filtros-catalogo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    /* Mismo hueco que entre el título y la barra de búsqueda (.section-title
       margin-bottom), para que el espaciado título→buscador→tarjetas sea uniforme */
    margin-bottom: 40px;
}

.search-bar {
    max-width: 480px;
    width: 100%;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.search-bar:focus-within {
    box-shadow: 4px 4px 0 var(--yellow);
    transform: translate(-2px, -2px);
}

.search-icon {
    padding: 0 4px 0 16px;
    font-size: 15px;
    opacity: 0.6;
    pointer-events: none;
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 14px 8px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--black);
}

.search-bar input::placeholder { color: var(--text-muted); }

.search-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-muted);
    padding: 0 16px;
    line-height: 1;
    transition: color 0.15s ease;
}
.search-clear:hover { color: var(--black); }

.search-resultados {
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.search-resultados strong { color: var(--black); }

/* Interruptor "Mostrar agotados" */
.toggle-agotados {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.toggle-agotados input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: relative;
    width: 42px;
    height: 24px;
    background: var(--cream);
    border: 2px solid var(--black);
    border-radius: 20px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: var(--black);
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(.4,0,.2,1), background 0.2s ease;
}

.toggle-agotados input:checked + .toggle-slider {
    background: var(--yellow);
}
.toggle-agotados input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.toggle-label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--black);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .search-bar { max-width: 100%; }
    .filtros-catalogo { padding: 0 16px; }
}
.clear-filter-link { color: var(--black); font-weight: 700; border-bottom: 2px solid var(--yellow); text-decoration: none; }
.clear-filter-link:hover { background: var(--yellow); }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.loading { grid-column: 1/-1; text-align: center; color: var(--text-muted); padding: 60px; font-family: 'Space Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

/* ==========================================================================
   TARJETA DE PRODUCTO — pop-art hard shadow
   ========================================================================== */
.product-card {
    border: 2px solid var(--black);
    display: flex;
    flex-direction: column;
    background: var(--white);
    position: relative;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}

.product-card:not(.no-stock):hover {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0 var(--yellow);
}

.product-card.no-stock { position: relative; }
.product-card.no-stock .product-img-placeholder { filter: grayscale(55%) brightness(0.92); }
.product-card.no-stock .product-title { opacity: 0.55; }

.product-img-placeholder {
    /* Hueco cuadrado (proporción 917x917) que se adapta al ancho de la tarjeta
       en la rejilla, en lugar de una altura fija; encaja las fotos cuadradas */
    aspect-ratio: 1 / 1;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Space Mono', monospace;
    border-bottom: 2px solid var(--black);
    position: relative;
    overflow: hidden;
}

/* object-fit: contain a propósito (no cover): así se ve la foto entera
   siempre, sea cual sea su proporción, en vez de recortar los bordes para
   rellenar el hueco */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Cinta diagonal "Agotado" — estilo etiqueta de tienda física */
.stock-ribbon {
    position: absolute;
    top: 24px;
    left: -46px;
    width: 170px;
    transform: rotate(-40deg);
    background: linear-gradient(135deg, #fb2789 0%, #c01d69 100%);
    color: var(--white);
    text-align: center;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 7px 0;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    z-index: 3;
    pointer-events: none;
}

/* Pegatina de oferta — burst pop-art con el porcentaje de descuento */
.sale-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 66px;
    height: 66px;
    background: var(--yellow);
    color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo Black', sans-serif;
    transform: rotate(9deg);
    z-index: 3;
    pointer-events: none;
    clip-path: polygon(50% 0%, 61% 14%, 80% 7%, 81% 27%, 100% 34%, 89% 50%, 100% 66%, 81% 73%, 80% 93%, 61% 86%, 50% 100%, 39% 86%, 20% 93%, 19% 73%, 0% 66%, 11% 50%, 0% 34%, 19% 27%, 20% 7%, 39% 14%);
    filter: drop-shadow(3px 3px 0 var(--black));
    animation: sale-pulse 2.6s ease-in-out infinite;
}
.sale-badge .sale-percent { font-size: 15px; line-height: 1; letter-spacing: 0.5px; }
.sale-badge .sale-label { font-size: 7px; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 3px; }

@keyframes sale-pulse {
    0%, 100% { transform: rotate(9deg) scale(1); }
    50% { transform: rotate(9deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .sale-badge { animation: none; }
}

.product-card.on-sale:not(.no-stock):hover {
    box-shadow: 6px 6px 0 var(--yellow);
}

.product-details { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.product-title { font-family: 'Archivo Black', sans-serif; font-size: 14px; margin-bottom: 10px; }
.product-price {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
    margin-bottom: 16px;
    display: inline-block;
    background: var(--yellow);
    padding: 2px 8px;
    width: fit-content;
}

.product-price.on-sale {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: none;
    padding: 0;
}
.price-old {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: #c81e1e;
    text-decoration-thickness: 2px;
}
.price-new {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 17px;
    color: var(--black);
    background: var(--yellow);
    padding: 2px 8px;
}

/* El propio <label> hace de contenedor del <select> (etiquetado implícito),
   así no depende de ids únicos que colisionarían si el mismo producto se
   muestra a la vez en la tarjeta del catálogo y en la ventana de detalle */
.size-selector { display: block; margin-bottom: 16px; cursor: default; }
.size-selector span {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
    letter-spacing: 1px;
    font-family: 'Space Mono', monospace;
}
.size-select {
    width: 100%;
    padding: 9px;
    border: 2px solid var(--black);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    outline: none;
    background: var(--white);
    cursor: pointer;
}

.add-btn {
    background: var(--black);
    border: 2px solid var(--black);
    color: var(--white);
    padding: 12px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    margin-top: auto;
}
.add-btn:hover:not(:disabled) { background: var(--yellow); color: var(--black); border-color: var(--black); }
/* El botón solo se deshabilita cuando el producto está agotado, así que este
   estado ES el botón "Agotado": rojo para que se lea de un vistazo. */
.add-btn:disabled { background: var(--out-of-stock-red); border-color: var(--out-of-stock-red); color: var(--white); cursor: not-allowed; }

/* ==========================================================================
   CARRITO — tratado como un TICKET / recibo
   ========================================================================== */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -470px;
    width: 100%;
    max-width: 435px;
    height: 100%;
    background: var(--white);
    box-shadow: -8px 0 0 var(--black);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transition: right 0.55s cubic-bezier(.22,1,.36,1);
    font-family: 'Space Mono', monospace;
}
.cart-sidebar.active { right: 0; }

.cart-header {
    padding: 24px;
    background: var(--black);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.cart-header h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 19px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Contador de artículos del título (lo inyecta configurarEventosCarrito:
   el markup del carrito vive duplicado en cada página) */
.cart-header-chip {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    background: var(--yellow);
    color: var(--black);
    padding: 3px 10px;
    transform: rotate(-2deg);
}
.cart-header-chip.oculto { display: none; }

.cart-header .close-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: none;
    border: 2px solid var(--yellow);
    font-size: 22px;
    cursor: pointer;
    color: var(--yellow);
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.35s cubic-bezier(.22,1,.36,1);
}
.cart-header .close-btn:hover { background: var(--yellow); color: var(--black); transform: rotate(90deg); }

.cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px 22px 20px;
}

.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px dashed var(--black);
    font-size: 13px;
}

.cart-item-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border: 2px solid var(--black);
    box-shadow: 3px 3px 0 var(--black);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.cart-item:hover .cart-item-thumb { transform: rotate(-3deg) scale(1.04); }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cart-item-info { min-width: 0; flex-grow: 1; overflow-wrap: anywhere; }
.cart-item strong { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; display: block; }
.cart-item-meta { color: #777; font-size: 12px; display: block; margin-top: 3px; }

.cart-item-abajo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}
.cart-item-cantidad {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    background: var(--white);
}
.cart-item-cantidad button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 17px;
    font-weight: 700;
    width: 34px;
    height: 32px;
    line-height: 1;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.cart-item-cantidad button:hover { background: var(--yellow); }
.cart-item-cantidad button:active { transform: scale(0.82); }
.cart-item-cantidad span {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}
.cart-item-precio { font-weight: 700; font-size: 15px; white-space: nowrap; }

.cart-item-quitar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-border);
    background: var(--white);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    color: #999;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cart-item-quitar:hover { background: #c62828; border-color: #c62828; color: var(--white); }

/* Estado vacío con cuerpo: en vez de una frase suelta */
.cart-vacio { text-align: center; padding: 56px 14px; color: #777; }
.cart-vacio-icono {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    border: 2px dashed #aaa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    filter: grayscale(1);
    opacity: 0.65;
}
.cart-vacio-icono svg { width: 40px; height: 40px; }
.cart-vacio-titulo { font-family: 'Archivo Black', sans-serif; font-size: 17px; text-transform: uppercase; color: var(--black); margin-bottom: 8px; }
.cart-vacio-texto { font-size: 13px; line-height: 1.6; margin-bottom: 26px; }
.cart-vacio-btn {
    display: inline-block;
    padding: 14px 24px;
    background: var(--yellow);
    color: var(--black);
    border: 3px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cart-vacio-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }

.cart-footer {
    padding: 22px 24px 28px;
    background: var(--yellow);
    border-top: 2px solid var(--black);
    position: relative;
}
.cart-footer::before {
    content: '';
    position: absolute;
    top: -8px; left: 0; right: 0; height: 8px;
    background-image: radial-gradient(circle at 10px 8px, var(--white) 5px, transparent 6px);
    background-size: 20px 16px;
    background-repeat: repeat-x;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* El importe manda: cifra de ticket grande, animada por animarTotalCarrito */
.cart-total #cartTotal {
    font-size: 28px;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums; /* que no baile al contar */
}
/* Nota bajo el total (la inyecta configurarEventosCarrito) */
.cart-footer-nota {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 16px;
}

/* Botón "Finalizar compra": losa brutal con sombra dura blanca sobre el pie
   amarillo, flecha que entra al pasar el ratón y pulsación física al hacer
   clic. El brillo que lo recorre va aparte, bajo no-preference. */
.checkout-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--black);
    color: var(--yellow);
    border: none;
    padding: 19px 20px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 6px 6px 0 var(--white);
    transition: transform 0.18s cubic-bezier(.22,1,.36,1), box-shadow 0.18s cubic-bezier(.22,1,.36,1);
}
.checkout-btn::after {
    content: '→';
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-8px);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.checkout-btn:hover:not(:disabled) { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--white); }
.checkout-btn:hover:not(:disabled)::after { opacity: 1; transform: none; }
.checkout-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--white); }
.checkout-btn:disabled { background: var(--out-of-stock); color: var(--white); cursor: not-allowed; box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
    /* Barrido de brillo amarillo que recorre la losa cada ~3s */
    .checkout-btn:not(:disabled)::before {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 55%;
        background: linear-gradient(105deg, transparent 15%, rgba(238, 255, 47, 0.30) 50%, transparent 85%);
        transform: translateX(-130%) skewX(-14deg);
        animation: cart-brillo 3.2s cubic-bezier(.4,0,.2,1) infinite;
        pointer-events: none;
    }
    @keyframes cart-brillo {
        0% { transform: translateX(-130%) skewX(-14deg); }
        55%, 100% { transform: translateX(330%) skewX(-14deg); }
    }
}

/* Fundido en vez de display:none/block: la transición de opacidad acompaña al
   deslizamiento del carrito (visibility retrasada mantiene el clic-fuera). */
.sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(14,14,14,0.5);
    backdrop-filter: blur(2px);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}

/* ==========================================================================
   PÁGINA "QUIÉN SOMOS"
   ========================================================================== */
.about-container { max-width: 1000px; margin: 60px auto; padding: 0 20px; }

.about-hero { text-align: center; margin-bottom: 55px; }
.about-hero h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: 1px; }
.about-hero .subtitle { color: var(--text-muted); font-size: 14px; margin-top: 12px; font-family: 'Space Mono', monospace; }

.about-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 70px;
}

@media (max-width: 768px) {
    .about-content-grid { grid-template-columns: 1fr; gap: 30px; }
}

.about-text-block h2 { font-size: 20px; margin-bottom: 12px; }
.about-text-block p { font-size: 15px; line-height: 1.8; color: var(--text); margin-bottom: 20px; text-align: justify; }
.about-text-block strong { background: var(--yellow); padding: 0 3px; }

.about-img-placeholder {

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
}
.about-img-placeholder img { width: 100%; height: 100%; object-fit: cover; }

.pillars-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.pillar-card {
    background-color: var(--cream);
    border-top: 4px solid var(--yellow);
    padding: 26px;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.pillar-card:hover { transform: translateY(-6px); border-color: var(--black); }
.pillar-card h3 { font-size: 13px; letter-spacing: 1px; color: var(--black); margin-bottom: 12px; }
.pillar-card p { font-size: 13px; line-height: 1.6; color: var(--text-muted); }

.title-divider { width: 60px; height: 5px; background-color: var(--yellow); margin-bottom: 25px; }

/* Bloque "Contáctanos" (¿Quién somos?) — botón directo al chat de WhatsApp */
.contact-cta { text-align: center; margin-top: 55px; }
.contact-cta h2 { font-size: 22px; letter-spacing: 1px; }
.contact-cta p { color: var(--text-muted); font-size: 14px; margin: 10px 0 24px; }

.whatsapp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #25d366;
    color: #fff;
    padding: 15px 34px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    border: 2px solid #25d366;
    transition: all 0.2s ease;
}
.whatsapp-cta-btn:hover { background-color: var(--black); border-color: var(--black); color: #25d366; }
.whatsapp-cta-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ==========================================================================
   HOME — TITULAR MÁQUINA DE ESCRIBIR
   ========================================================================== */
.hero-tagline {
    max-width: 1100px;
    margin: 0 auto;
    padding: 55px 20px 15px;
    text-align: center;
}

.tagline {
    font-size: clamp(30px, 6vw, 62px);
    line-height: 1.15;
    color: var(--black);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.35em;
    font-size: 90px;
}

.tagline-static { color: var(--black); padding-top: 150px;}

.tagline-highlight-wrap {
    display: inline-flex;
    align-items: baseline;
    color: var(--black);
    background: var(--yellow);
    padding: 0 0.18em;
    min-height: 1.05em;
}

.tagline-highlight { white-space: pre; }

.tagline-cursor {
    display: inline-block;
    margin-left: 2px;
    animation: cursor-blink 0.9s steps(1) infinite;
}

@keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tagline-cursor { animation: none; }
}

@media (max-width: 640px) {
    .hero-tagline { padding: 40px 16px 5px; }
}

/* ==========================================================================
   HOME — HERO CINEMÁTICO
   ========================================================================== */
.hero-screen {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px;
    padding-top: 100px;
    background-color: var(--white);
    box-sizing: border-box;
    position: relative;
}

.logoytext-screen {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background-color: var(--white);
    box-sizing: border-box;
    position: relative;
}

.scroll-banner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 3px solid var(--black);
    position: relative;
    animation: transformarHero linear both;
    animation-timeline: scroll(root);
    animation-range: exit 0% exit 80%;
}

.scroll-logoytext {

    overflow: hidden;
    position: relative;
    animation: transformarLogoyTexto linear both;
    animation-timeline: scroll(root);
    animation-range: exit 0% exit 80%;
}

.banner-img { width: 100%; height: 100%; object-fit: cover; }

/* Hangtag / etiqueta de marca sobre el hero. Es un elemento real (no un
   ::after con content) para que su texto sea editable desde el panel de
   administración (Personalización > Página de inicio). */
.hero-hangtag {
    position: absolute;
    top: 60px;
    right: 55px;
    background: #fb2789;
    color: white;
    font-family: 'Archivo Black', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 20px;
    border: 2px solid var(--black);
    transform: rotate(6deg);
    box-shadow: 5px 5px 0 var(--black);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 640px) {
    .hero-hangtag { top: 20px; right: 20px; font-size: 10px; padding: 10px 14px; }
}

@keyframes transformarHero {
    from { transform: scale(1) translateY(0); border-radius: 20px; }
    to   { transform: scale(0) translateY(0); border-radius: 34px; opacity: 0.92; }
}

@keyframes transformarLogoyTexto {
    from { transform: scale(0) translateY(0)}
    to   { transform: scale(0.5) translateY(0)}
}

/* El titular es un único h1 (SEO); cada línea es un span.tagline que
   conserva el estilo que antes llevaban los dos h1 */
.tagline-h1 { display: block; }

.welcome-featured {
    max-width: 780px;
    margin: 90px auto;
    padding: 0 20px;
    text-align: center;
}
.welcome-featured h2 { font-size: 30px; color: var(--black); }
.welcome-featured p { font-size: 18px; line-height: 1.8; color: var(--text); margin-bottom: 28px; text-align: justify; }

.hero-cta-btn {
    display: inline-block;
    background-color: var(--black);
    color: var(--yellow);
    padding: 15px 34px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    border: 2px solid var(--black);
}
.hero-cta-btn:hover { background-color: var(--yellow); color: var(--black); }

/* ==========================================================================
   HOME — SECCIONES (novedades, categorías, blog, franja de ventajas)
   ========================================================================== */
.inicio-seccion {
    max-width: 1200px;
    margin: 0 auto 90px;
    padding: 0 20px;
}

/* Cabecera con el título a la izquierda y el "Ver todas →" a la derecha */
.inicio-seccion-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.inicio-ver-todo {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-bottom: 3px solid var(--yellow);
    padding: 2px 4px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.inicio-ver-todo:hover { background-color: var(--yellow); }

/* Tiles de categoría: tipografía grande y hard shadow al pasar por encima */
.inicio-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.inicio-categoria {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 3px solid var(--black);
    background: var(--white);
    padding: 24px 22px;
    text-decoration: none;
    font-family: 'Archivo Black', 'Work Sans', sans-serif;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.inicio-categoria-num {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 2px;
}

.inicio-categoria-flecha { font-size: 22px; }

.inicio-categoria:hover {
    background: var(--yellow);
    box-shadow: 6px 6px 0 var(--black);
    transform: translate(-3px, -3px);
}
.inicio-categoria:hover .inicio-categoria-num { color: var(--black); }

/* Franja de ventajas: banda negra con acentos amarillos */
.inicio-info {
    background: var(--black);
    color: var(--white);
    border-top: 4px solid var(--yellow);
    padding: 60px 20px;
}

.inicio-info-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
}

.inicio-info-icono { font-size: 28px; }
.inicio-info-item h3 { color: var(--yellow); font-size: 16px; margin: 14px 0 10px; }
.inicio-info-item p { font-size: 14px; line-height: 1.7; color: var(--out-of-stock); }

@media (max-width: 640px) {
    .inicio-seccion { margin-bottom: 70px; }
    .inicio-seccion-cabecera { flex-direction: column; align-items: flex-start; }
    .inicio-ver-todo { margin-bottom: 26px; }
}

.featured-link {
    color: var(--black);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--yellow);
}
.featured-link:hover { background: var(--yellow); }

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN
   ========================================================================== */
.admin-panel { margin-top: 10px; }

/* Vistas del panel (inicio / secciones): solo una visible a la vez, con
   una animación de entrada/salida al navegar entre ellas. */
.admin-vista { display: none; }
.admin-vista.admin-vista-activa { display: block; }

.admin-vista.admin-vista-saliendo {
    animation: adminVistaSalida 0.2s ease forwards;
}
.admin-vista.admin-vista-entrando {
    animation: adminVistaEntrada 0.4s cubic-bezier(.22,1,.36,1);
}

@keyframes adminVistaSalida {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-8px) scale(0.99); }
}
@keyframes adminVistaEntrada {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pantalla de inicio del panel: una tarjeta por acción disponible */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.admin-dashboard-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border: 2px solid var(--black);
    padding: 20px;
    text-align: left;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.admin-dashboard-card:hover,
.admin-dashboard-card:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0 var(--yellow);
}

.admin-dashboard-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    font-size: 22px;
    transition: background 0.18s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.admin-dashboard-card:hover .admin-dashboard-icon { background: var(--yellow); transform: scale(1.08) rotate(-4deg); }

.admin-dashboard-card-body { flex-grow: 1; min-width: 0; }
.admin-dashboard-card-titulo {
    display: block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.admin-dashboard-card-desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

.admin-dashboard-arrow {
    flex-shrink: 0;
    font-family: 'Archivo Black', sans-serif;
    font-size: 18px;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.admin-dashboard-card:hover .admin-dashboard-arrow { transform: translateX(6px); }

/* Botón de volver, dentro de cada sección */
.admin-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 0;
    margin-bottom: 22px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    transition: color 0.15s ease;
}
.admin-back-btn:hover { color: var(--text-muted); }

.admin-back-arrow {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.admin-back-btn:hover .admin-back-arrow { transform: translateX(-6px); }

.admin-seccion-header { margin-bottom: 4px; }
.admin-seccion-header h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.admin-usuarios-resultados {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.admin-table-wrap {
    overflow-x: auto;
    border: 2px solid var(--black);
}

.admin-table {
    width: 100%;
    min-width: 880px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table thead {
    background: var(--black);
    color: var(--yellow);
}
.admin-table th {
    text-align: left;
    padding: 12px 14px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.admin-table td {
    padding: 12px 14px;
    border-top: 1px solid var(--gray-border);
    overflow-wrap: break-word;
    vertical-align: top;
}
.admin-table tbody tr:hover { background: var(--cream); }

.admin-table-loading {
    text-align: center;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    padding: 24px 14px !important;
}

/* La columna de Acciones queda fija a la derecha: aunque el resto de la
   tabla necesite scroll horizontal (nombres/direcciones largas), los
   botones de "Eliminar"/"Hacer admin" siempre quedan visibles, en vez de
   cortarse fuera del recuadro. */
.admin-table th.admin-col-acciones,
.admin-table td.admin-col-acciones {
    position: sticky;
    right: 0;
    box-shadow: -1px 0 0 var(--black);
}
.admin-table th.admin-col-acciones { background: var(--black); }
.admin-table td.admin-col-acciones { background: var(--white); }
.admin-table tbody tr:hover td.admin-col-acciones { background: var(--cream); }

.admin-acciones-celda {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.admin-acciones-celda .admin-action-btn { width: 100%; }
.admin-action-btn + .admin-action-btn { margin-left: 0; }

.admin-badge {
    display: inline-block;
    background: var(--yellow);
    color: var(--black);
    font-family: 'Archivo Black', sans-serif;
    font-size: 9px;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.admin-tag-tu-cuenta {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.admin-action-btn {
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
    padding: 6px 10px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.admin-action-btn:hover:not(:disabled) { background: var(--black); color: var(--yellow); }
.admin-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-action-btn + .admin-action-btn { margin-left: 6px; }

.admin-action-btn-danger { border-color: #c81e1e; color: #a11a1a; }
.admin-action-btn-danger:hover:not(:disabled) { background: #c81e1e; color: var(--white); }

/* Sección "Acciones" del panel: tarjetas de ajustes generales (no
   navegables como .admin-dashboard-card, son controles en sí mismas) */
.admin-accion-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--white);
    border: 2px solid var(--black);
    padding: 22px 24px;
    flex-wrap: wrap;
}

.admin-accion-card-info {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.admin-accion-card-icono {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    font-size: 22px;
}

.admin-accion-card-texto { min-width: 0; }
.admin-accion-card-titulo {
    display: block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.admin-accion-card-desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 46ch;
}

.admin-accion-card-control {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.admin-mantenimiento-estado {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.admin-mantenimiento-estado.admin-mantenimiento-activo { color: #a11a1a; font-weight: 700; }

@media (max-width: 640px) {
    .admin-accion-card { flex-direction: column; align-items: stretch; }
    .admin-accion-card-control { justify-content: space-between; }
}

/* ==========================================================================
   BLOG — LISTADO PÚBLICO (blog.html)
   Mismo lenguaje "pop-art hard shadow" que las tarjetas de producto, para
   que el blog se sienta parte de la misma tienda y no una sección aparte.
   ========================================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid var(--black);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    /* fill "backwards" a propósito (no forwards): cubre el retardo escalonado
       sin dejar el transform del keyframe "pegado", que anularía el hover */
    animation: blogCardIn 0.45s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes blogCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.blog-card:hover,
.blog-card:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0 var(--yellow);
}

.blog-card-portada {
    position: relative;
    height: 220px;
    background: var(--cream);
    border-bottom: 2px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    overflow: hidden;
}
.blog-card-portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.blog-card:hover .blog-card-portada img { transform: scale(1.05); }

.blog-card-cuerpo {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.blog-card-meta {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-card-titulo {
    font-family: 'Archivo Black', sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

.blog-card-resumen {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-leer {
    margin-top: auto;
    padding-top: 8px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.blog-card-flecha {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.blog-card:hover .blog-card-flecha { transform: translateX(6px); }

/* ==========================================================================
   BLOG — ENTRADA INDIVIDUAL (blog-entrada.html)
   ========================================================================== */
.blog-post-container {
    max-width: 820px;
    margin: 50px auto 90px;
    padding: 0 20px;
}

.blog-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    transition: color 0.15s ease;
}
.blog-volver:hover { color: var(--text-muted); }
.blog-volver:hover .admin-back-arrow { transform: translateX(-6px); }

.blog-post { animation: blogCardIn 0.45s cubic-bezier(.22,1,.36,1) backwards; }

.blog-post-cabecera { text-align: center; margin-bottom: 34px; }
.blog-post-cabecera h1 {
    font-size: clamp(26px, 5vw, 40px);
    letter-spacing: 1px;
    margin-top: 12px;
}
.blog-post-cabecera .title-divider { margin: 22px auto 0; }

.blog-post-meta {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-post-portada {
    position: relative;
    margin: 0 0 42px;
    border: 3px solid var(--black);
    box-shadow: 10px 10px 0 var(--yellow);
}
.blog-post-portada img { display: block; width: 100%; }

/* Insignia "sello" con la fecha de publicación, sobre la esquina inferior
   izquierda de la portada — mismo lenguaje pop-art que .stock-ribbon/.sale-badge */
.blog-fecha-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: var(--black);
    color: var(--yellow);
    font-family: 'Archivo Black', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 2px solid var(--black);
    box-shadow: 3px 3px 0 var(--yellow);
    z-index: 2;
    transform: rotate(-2deg);
    pointer-events: none;
}
.blog-post-portada .blog-fecha-badge { font-size: 11px; padding: 8px 13px; }

/* Botón de "me gusta", bajo el título de la entrada. Corazón hueco cuando no
   se ha marcado, relleno y con un pequeño "pop" al marcarlo; si quien hace
   clic no tiene sesión iniciada, se abre el modal de login (ver activarBotonLikeBlog). */
.blog-post-acciones {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.blog-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--white);
    border: 2px solid var(--black);
    padding: 9px 18px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--black);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.blog-like-btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--yellow);
}
.blog-like-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.blog-like-btn .blog-like-icon { font-size: 16px; line-height: 1; }
.blog-like-btn.blog-like-btn-activo {
    background: var(--black);
    color: var(--yellow);
}
.blog-like-btn.blog-like-btn-activo .blog-like-icon {
    color: #fb2789;
    animation: blogLikePop 0.35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes blogLikePop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .blog-like-btn.blog-like-btn-activo .blog-like-icon { animation: none; }
}

/* --- Bloques del contenido (los pinta renderizarBloquesBlog, y el editor
       del panel reutiliza estas mismas clases para editar "en real") --- */
.blog-parrafo {
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 22px;
}

.blog-post-contenido a,
.blog-parrafo a {
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--yellow);
}
.blog-post-contenido a:hover,
.blog-parrafo a:hover { background: var(--yellow); }

.blog-post-contenido mark,
.blog-parrafo mark {
    background: var(--yellow);
    padding: 0 3px;
}

.blog-titulo-seccion {
    font-family: 'Archivo Black', 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.15;
    font-size: 22px;
    margin: 36px 0 16px;
    position: relative;
    padding-left: 16px;
    border-left: 6px solid var(--yellow);
}
.blog-titulo-seccion.blog-titulo-h3,
h3.blog-titulo-seccion { font-size: 17px; border-left-width: 4px; }

.blog-al-centro { text-align: center; }
.blog-al-derecha { text-align: right; }

.blog-imagen { margin: 34px auto; }
.blog-imagen img {
    display: block;
    width: 100%;
    border: 2px solid var(--black);
}
.blog-imagen-normal { max-width: 560px; }
.blog-imagen-ancho { max-width: 100%; }
.blog-imagen-completo { max-width: 100%; }
.blog-imagen-completo img {
    border-width: 3px;
    box-shadow: 10px 10px 0 var(--yellow);
}
.blog-imagen figcaption {
    margin-top: 12px;
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.blog-cita {
    position: relative;
    background: var(--cream);
    border-left: 6px solid var(--yellow);
    padding: 24px 28px 24px 58px;
    margin: 32px 0;
}
.blog-cita::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    left: 16px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 44px;
    line-height: 1;
    color: var(--black);
}
.blog-cita p {
    font-size: 17px;
    line-height: 1.7;
    font-style: italic;
}
.blog-cita cite {
    display: block;
    margin-top: 12px;
    font-family: 'Space Mono', monospace;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-lista {
    margin: 0 0 22px 24px;
    font-size: 16px;
    line-height: 1.85;
}
.blog-lista li { padding-left: 4px; }
.blog-lista li::marker { color: var(--yellow-deep); font-weight: 700; }
/* Solo en el editor: el <ul> editable se ve numerado sin cambiar de etiqueta */
.blog-lista-ordenada { list-style: decimal; }

.blog-separador {
    text-align: center;
    font-size: 14px;
    letter-spacing: 16px;
    padding-left: 16px; /* compensa el letter-spacing del último carácter */
    color: var(--black);
    margin: 40px 0;
    user-select: none;
}

.blog-destacado {
    background: var(--yellow);
    border: 2px solid var(--black);
    box-shadow: 6px 6px 0 var(--black);
    padding: 22px 26px;
    margin: 34px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    transform: rotate(-0.4deg);
}
.blog-destacado mark { background: var(--white); }

@media (max-width: 640px) {
    .blog-post-container { margin-top: 34px; }
    .blog-cita { padding: 20px 20px 20px 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card, .blog-post { animation: none !important; }
    .blog-card, .blog-card-portada img, .blog-card-flecha { transition: none !important; }
    .blog-destacado { transform: none; }
}

/* ==========================================================================
   BLOG — PANEL DE ADMINISTRACIÓN (tabla de entradas)
   ========================================================================== */
.admin-seccion-header-blog {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-primary-btn {
    background: var(--black);
    color: var(--yellow);
    border: none;
    padding: 12px 22px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--yellow-deep);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.admin-primary-btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--yellow-deep); }
.admin-primary-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--yellow-deep); }
.admin-primary-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Botón secundario (mismo relieve que el primario pero invertido): usado
   junto a "Guardar" para acciones auxiliares como "Enviar WhatsApp de prueba". */
.admin-secondary-btn {
    background: var(--yellow);
    color: var(--black);
    border: 2px solid var(--black);
    padding: 10px 20px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--black);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.admin-secondary-btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.admin-secondary-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--black); }
.admin-secondary-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.admin-table-blog { min-width: 720px; }
.admin-col-numerica {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    white-space: nowrap;
}

.blog-estado {
    display: inline-block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 2px solid var(--black);
}
.blog-estado-publicado { background: var(--yellow); color: var(--black); }
.blog-estado-borrador { background: var(--white); color: var(--text-muted); border-color: var(--text-muted); }

/* ==========================================================================
   BLOG — EDITOR POR BLOQUES (vista "blogEditor" del panel)
   ========================================================================== */
.blog-editor { margin-top: 10px; }

.blog-editor-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 22px 0 8px;
}

.blog-editor-titulo,
.blog-editor-resumen {
    width: 100%;
    padding: 13px 14px;
    border: 2px solid var(--black);
    background: var(--cream);
    outline: none;
    box-shadow: 0 0 0 var(--black);
    transition: background 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.blog-editor-titulo {
    font-family: 'Archivo Black', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.blog-editor-resumen {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}
.blog-editor-titulo:focus,
.blog-editor-resumen:focus {
    background: var(--white);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--black);
}

.blog-editor-portada {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.blog-editor-portada-preview {
    width: 190px;
    height: 106px;
    border: 2px solid var(--black);
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    overflow: hidden;
    flex-shrink: 0;
}
.blog-editor-portada-preview img { width: 100%; height: 100%; object-fit: cover; }
.blog-editor-portada-acciones { display: flex; flex-direction: column; gap: 8px; }

/* El lienzo replica el ancho de lectura de la entrada publicada, así el
   texto rompe línea igual que lo verá el visitante */
.blog-editor-lienzo {
    border: 2px solid var(--black);
    background: var(--white);
    padding: 36px 42px;
    min-height: 240px;
}
.blog-editor-lienzo:empty::before {
    content: 'La entrada está vacía: añade un bloque con los botones de abajo ↓';
    display: block;
    text-align: center;
    padding: 60px 20px;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* Cada bloque del lienzo: al pasar por encima aparece un borde discontinuo
   y su barrita de controles (mover, opciones, eliminar) */
.blog-bloque {
    position: relative;
    border: 2px dashed transparent;
    padding: 8px 12px;
    margin: 0 -12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.blog-bloque:hover,
.blog-bloque:focus-within {
    border-color: var(--black);
    background: rgba(238, 255, 47, 0.06);
}
.blog-bloque.blog-bloque-movido {
    border-color: var(--black);
    background: rgba(238, 255, 47, 0.35);
}

/* Dentro del lienzo los bloques no llevan sus márgenes "de página": el
   espaciado lo pone el propio padding de cada bloque editable */
.blog-bloque .blog-parrafo,
.blog-bloque .blog-lista,
.blog-bloque .blog-cita,
.blog-bloque .blog-destacado,
.blog-bloque .blog-imagen,
.blog-bloque .blog-titulo-seccion,
.blog-bloque .blog-separador { margin-top: 0; margin-bottom: 0; }

.blog-bloque-controles {
    position: absolute;
    top: -15px;
    right: 8px;
    display: flex;
    align-items: stretch;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 6;
    box-shadow: 3px 3px 0 rgba(14,14,14,0.25);
}
.blog-bloque:hover .blog-bloque-controles,
.blog-bloque:focus-within .blog-bloque-controles {
    opacity: 1;
    transform: translateY(0);
}

.blog-bloque-tipo {
    display: flex;
    align-items: center;
    background: var(--black);
    color: var(--yellow);
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 9px;
}

.blog-bloque-btn {
    width: 28px;
    height: 28px;
    background: var(--black);
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.blog-bloque-btn-texto {
    width: auto;
    padding: 0 8px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 8px;
    letter-spacing: 0.5px;
}
.blog-bloque-btn:hover { background: var(--yellow); color: var(--black); }
.blog-bloque-btn-danger:hover { background: #c81e1e; color: var(--white); }

.blog-bloque-editable { outline: none; min-height: 1.5em; cursor: text; }
.blog-bloque-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.blog-bloque-imagen { display: flex; flex-direction: column; gap: 10px; }
.blog-bloque-imagen-preview {
    border: 2px solid var(--black);
    background: var(--cream);
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: max-width 0.25s cubic-bezier(.4,0,.2,1);
}
.blog-bloque-imagen-preview span {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 20px;
    text-align: center;
}
.blog-bloque-imagen-preview img { display: block; width: 100%; }
/* El ancho elegido se previsualiza en el propio lienzo */
.blog-bloque-imagen-preview.blog-imagen-normal { max-width: 420px; }
.blog-bloque-imagen-preview.blog-imagen-ancho { max-width: 100%; }
.blog-bloque-imagen-preview.blog-imagen-completo { max-width: 100%; box-shadow: 6px 6px 0 var(--yellow); }

.blog-bloque-imagen input,
.blog-cita input {
    border: 2px solid var(--black);
    background: var(--cream);
    padding: 8px 10px;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    outline: none;
}
.blog-cita input { width: 100%; margin-top: 12px; font-style: normal; }

.blog-palette {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.blog-palette-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.blog-palette button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--white);
    border: 2px solid var(--black);
    padding: 9px 13px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-palette button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--yellow);
}
.blog-palette button:active { transform: translate(0, 0); box-shadow: 0 0 0 var(--yellow); }

.blog-editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--black);
}
.blog-editor-footer-acciones { display: flex; align-items: center; gap: 12px; }

/* Barra flotante de formato: aparece sobre el texto seleccionado */
.blog-format-toolbar {
    position: absolute;
    z-index: 450;
    display: flex;
    background: var(--black);
    box-shadow: 4px 4px 0 var(--yellow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.blog-format-toolbar.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.blog-format-toolbar button {
    width: 34px;
    height: 32px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.15);
    color: var(--white);
    font-size: 13px;
    font-family: 'Work Sans', sans-serif;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.blog-format-toolbar button:last-child { border-right: none; }
.blog-format-toolbar button:hover { background: var(--yellow); color: var(--black); }
.blog-format-toolbar .blog-format-marcar {
    color: var(--black);
    background: var(--yellow);
    font-weight: 700;
}
.blog-format-toolbar .blog-format-marcar:hover { background: var(--yellow-deep); }

/* Ventana de vista previa: misma mecánica que la ventana de producto (el
   marco con overflow visible para no recortar el botón de cerrar, y el
   scroll un nivel más adentro) */
.blog-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.72);
    backdrop-filter: blur(3px);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.blog-preview-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

.blog-preview-ventana {
    position: relative;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 14px 14px 0 var(--yellow);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    opacity: 0;
    transform: scale(0.92) rotate(-1deg);
}
.blog-preview-overlay.active .blog-preview-ventana {
    animation: productoStampIn 0.4s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.blog-preview-ventana::before {
    content: 'VISTA PREVIA';
    position: absolute;
    top: -14px;
    left: 24px;
    background: #fb2789;
    color: var(--white);
    font-family: 'Archivo Black', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 6px 12px;
    border: 2px solid var(--black);
    transform: rotate(-3deg);
    box-shadow: 3px 3px 0 var(--black);
    z-index: 10;
    pointer-events: none;
}

.blog-preview-scroll {
    max-height: 90vh;
    overflow-y: auto;
    padding: 48px 52px;
}

@media (max-width: 720px) {
    .blog-editor-lienzo { padding: 24px 20px; }
    .blog-bloque { margin: 0; }
    .blog-preview-scroll { padding: 36px 22px; }
    .blog-editor-footer { flex-direction: column; align-items: stretch; }
    .blog-editor-footer-acciones { justify-content: stretch; }
    .blog-editor-footer-acciones .admin-primary-btn { flex-grow: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-bloque, .blog-bloque-controles, .blog-format-toolbar,
    .blog-preview-overlay, .blog-preview-ventana,
    .admin-primary-btn, .blog-palette button, .blog-bloque-imagen-preview {
        animation: none !important;
        transition: none !important;
    }
    .blog-preview-overlay.active .blog-preview-ventana { opacity: 1; transform: none; }
}

/* ==========================================================================
   PIE DE PÁGINA — enlaces legales, contacto, columnas de navegación
   ========================================================================== */
.site-footer {
    background: var(--black);
    color: var(--white);
    margin-top: 60px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 40px 32px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-brand .footer-logo {
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--yellow);
}
.footer-brand p {
    margin-top: 14px;
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #b8b8b0;
    max-width: 280px;
}

.footer-col h4 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a,
.footer-link-btn {
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    color: #d8d8d2;
    text-decoration: none;
    transition: color 0.15s ease;
}
.footer-col a:hover,
.footer-link-btn:hover { color: var(--yellow); }
.footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.footer-bottom {
    border-top: 1px solid #2a2a26;
    padding: 20px 40px 28px;
}
.footer-bottom p {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #8a8a82;
    text-align: center;
}

@media (max-width: 860px) {
    .footer-container { grid-template-columns: 1fr 1fr; padding: 44px 24px 28px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .footer-container { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PÁGINAS LEGALES — Aviso Legal, Política de Privacidad, Política de Cookies
   ========================================================================== */
.legal-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}
.legal-container .legal-hero { margin-bottom: 40px; }
.legal-container .legal-hero h1 { font-size: 32px; }
.legal-container .legal-hero .subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 10px;
}
.legal-content h2 {
    font-size: 17px;
    margin-top: 38px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--yellow);
    display: inline-block;
}
.legal-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 14px;
}
.legal-content ul {
    margin: 0 0 14px 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.legal-content li { font-size: 14.5px; line-height: 1.6; }
.legal-content strong { font-weight: 700; }
.legal-content a { color: var(--text); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.legal-identidad {
    background: var(--cream);
    border: 2px solid var(--black);
    padding: 18px 22px;
    margin-bottom: 20px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    line-height: 2;
}
.legal-identidad strong { display: inline-block; min-width: 150px; }

.legal-tabla-cookies {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 22px;
    font-size: 13px;
}
.legal-tabla-cookies th,
.legal-tabla-cookies td {
    border: 1px solid var(--gray-border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.legal-tabla-cookies th {
    background: var(--black);
    color: var(--white);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.legal-tabla-cookies td { font-family: 'Work Sans', sans-serif; }
.legal-tabla-cookies code {
    font-family: 'Space Mono', monospace;
    background: var(--cream);
    padding: 2px 6px;
    border-radius: 3px;
}
@media (max-width: 600px) {
    .legal-tabla-cookies { display: block; overflow-x: auto; }
}

/* ==========================================================================
   AVISO / BANNER DE COOKIES — franja inferior fija, se muestra en la
   primera visita hasta que el usuario decide (Aceptar / Rechazar / Configurar)
   ========================================================================== */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: var(--black);
    color: var(--white);
    border-top: 3px solid var(--yellow);
    padding: 22px 28px;
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(.2, .9, .3, 1);
}
.cookie-banner.visible { transform: translateY(0); }

.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.cookie-banner-texto { flex: 1 1 420px; }
.cookie-banner-texto p {
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.65;
    color: #d8d8d2;
}
.cookie-banner-texto a {
    color: var(--yellow);
    text-decoration: underline;
}
.cookie-banner-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cookie-btn {
    font-family: 'Archivo Black', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 12px 20px;
    border: 2px solid var(--white);
    background: transparent;
    color: var(--white);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.cookie-btn:hover { transform: translateY(-2px); }
.cookie-btn-aceptar {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
}
.cookie-btn-aceptar:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); }
.cookie-btn-rechazar:hover { background: var(--white); color: var(--black); }
.cookie-btn-configurar {
    border-color: transparent;
    text-decoration: underline;
    padding: 12px 6px;
}
.cookie-btn-configurar:hover { color: var(--yellow); background: transparent; }

/* Panel de configuración (categorías con interruptores) */
body.cookie-modal-abierto { overflow: hidden; }
.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.72);
    backdrop-filter: blur(3px);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.cookie-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}
.cookie-modal {
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 14px 14px 0 var(--yellow);
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    padding: 40px 36px 32px;
    opacity: 0;
    transform: scale(0.92) rotate(-1deg);
}
.cookie-modal-overlay.active .cookie-modal {
    animation: productoStampIn 0.4s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.cookie-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border: 3px solid var(--black);
    color: var(--yellow);
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cookie-modal-close:hover { background: var(--yellow); color: var(--black); transform: rotate(90deg); }

.cookie-modal h2 { font-size: 20px; margin-bottom: 10px; }
.cookie-modal > p {
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.cookie-modal > p a { color: var(--text); text-decoration: underline; }

.cookie-categoria {
    border: 2px solid var(--gray-border);
    padding: 16px 18px;
    margin-bottom: 14px;
}
.cookie-categoria-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cookie-categoria-titulo {
    font-family: 'Archivo Black', sans-serif;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.cookie-categoria-obligatoria {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.cookie-categoria p {
    font-family: 'Work Sans', sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 8px;
}

.cookie-modal-acciones {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.cookie-modal-acciones .cookie-btn {
    border-color: var(--black);
    color: var(--black);
}
.cookie-modal-acciones .cookie-btn-aceptar { background: var(--yellow); border-color: var(--black); color: var(--black); }
.cookie-modal-acciones .cookie-btn-aceptar:hover { background: var(--yellow-deep); }
.cookie-modal-acciones .cookie-btn:not(.cookie-btn-aceptar):hover { background: var(--black); color: var(--white); }

@media (max-width: 640px) {
    .cookie-banner { padding: 18px 18px 20px; }
    .cookie-banner-inner { gap: 16px; }
    .cookie-banner-acciones { width: 100%; }
    .cookie-banner-acciones .cookie-btn { flex: 1 1 auto; }
    .cookie-modal { padding: 32px 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner, .cookie-modal-overlay, .cookie-modal, .cookie-btn {
        animation: none !important;
        transition: none !important;
    }
    .cookie-modal-overlay.active .cookie-modal { opacity: 1; transform: none; }
}

/* ==========================================================================
   CHECKOUT — modal de finalizar pedido (ver crearModalCheckout en app.js)
   Reutiliza el lenguaje del modal de login (overlay, campos, botón) pero
   más ancho para el formulario de envío en dos columnas.
   ========================================================================== */

/* Asistente por pasos: panel a pantalla centrada sobre un fondo desenfocado */
.checkout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 14, 14, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 500; /* por encima del carrito y de cualquier modal */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.checkout-overlay.active { opacity: 1; visibility: visible; }

.checkout-panel {
    position: relative;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 10px 10px 0 var(--yellow);
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden; /* overflow-y:auto fuerza overflow-x a 'auto' si no se fija explícitamente */
    padding: 28px 30px 26px;
    transform: translateY(26px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.checkout-overlay.active .checkout-panel { transform: none; }

/* El botón de cerrar "sello" (login-modal-close) sobresale del recuadro a
   propósito en los modales de login, pero aquí el panel necesita scroll
   propio (overflow-y) y esa parte sobresaliente quedaría recortada por el
   overflow-x forzado de arriba. Aquí se ancla DENTRO del padding en vez de
   a caballo del borde. */
.checkout-panel > .login-modal-close {
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    font-size: 16px;
}

/* Indicador de progreso 1-2-3 (se oculta en la pantalla de éxito) */
.checkout-progreso {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 2px 30px 26px 0;
    padding: 0;
}
.checkout-progreso-oculto { display: none; }

.checkout-progreso-paso {
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkout-progreso-paso:not(:last-child) { flex: 1; }
.checkout-progreso-paso:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--gray-border);
    margin: 0 14px;
    transition: background-color 0.3s ease;
}
.checkout-progreso-paso.completado:not(:last-child)::after { background: var(--black); }

.checkout-progreso-num {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 2px solid var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    background: var(--white);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-progreso-paso.activo .checkout-progreso-num {
    background: var(--yellow);
    box-shadow: 3px 3px 0 var(--black);
}
.checkout-progreso-paso.completado .checkout-progreso-num {
    background: var(--black);
    color: var(--yellow);
}

.checkout-progreso-etiqueta {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.checkout-progreso-paso.activo .checkout-progreso-etiqueta { color: var(--black); font-weight: 700; }

/* Pasos: solo uno visible; entra/sale deslizándose según la dirección
   (misma mecánica que las vistas del panel de administración) */
.checkout-paso { display: none; }
.checkout-paso-activo { display: block; }
.checkout-paso-entra-der { animation: checkoutEntraDer 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.checkout-paso-entra-izq { animation: checkoutEntraIzq 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.checkout-paso-sale-izq { animation: checkoutSaleIzq 0.18s ease forwards; }
.checkout-paso-sale-der { animation: checkoutSaleDer 0.18s ease forwards; }

@keyframes checkoutEntraDer { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
@keyframes checkoutEntraIzq { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }
@keyframes checkoutSaleIzq { to { opacity: 0; transform: translateX(-38px); } }
@keyframes checkoutSaleDer { to { opacity: 0; transform: translateX(38px); } }

/* Paso 1: líneas del pedido con control de cantidad */
.checkout-lineas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.checkout-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 2px solid var(--black);
    background: var(--cream);
    padding: 10px 14px;
}
/* min-width:0 permite que el flex item se encoja por debajo de su contenido
   (por defecto un flex item nunca es más pequeño que su texto sin cortar),
   así un nombre de producto largo no empuja el ancho del panel */
.checkout-linea-info { min-width: 0; overflow-wrap: anywhere; }
.checkout-linea-info strong { display: block; font-size: 14px; }
.checkout-linea-info small {
    color: var(--text-muted);
    font-size: 11px;
    font-family: 'Space Mono', monospace;
}
.checkout-linea-derecha { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.checkout-cantidad {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--black);
    background: var(--white);
}
.checkout-cant-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.checkout-cant-btn:hover { background: var(--yellow); }
.checkout-cant-num {
    min-width: 28px;
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
}
.checkout-linea-precio {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    white-space: nowrap;
}
.checkout-quitar {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.checkout-quitar:hover { opacity: 1; color: #c62828; }

/* Paso 3: tarjetas de método de pago */
.checkout-metodos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

/* Con Google Pay visible son 4 métodos: cuadrícula 2×2 en vez de 3+1 suelto
   (en navegadores sin :has() queda la fila de 3 + 1, perfectamente usable) */
.checkout-metodos:has(.checkout-metodo[data-metodo="googlepay"]:not([hidden])) {
    grid-template-columns: repeat(2, 1fr);
}

.checkout-metodo {
    position: relative;
    border: 2px solid var(--black);
    background: var(--white);
    cursor: pointer;
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: 'Work Sans', sans-serif;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.checkout-metodo:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--black); }
.checkout-metodo.seleccionado {
    background: var(--yellow);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--black);
}
.checkout-metodo.seleccionado::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 9px;
    font-weight: 700;
}
/* display:flex del propio botón pisaría el atributo hidden sin esta regla
   (abrirCheckout oculta así los métodos que api/pago_metodos.php no ofrece) */
.checkout-metodo[hidden] { display: none; }

.checkout-metodo-icono { font-size: 24px; }
.checkout-metodo-icono svg { display: block; }
.checkout-metodo-nombre {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.checkout-metodo-desc {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
}
.checkout-metodo.seleccionado .checkout-metodo-desc { color: var(--black); }

/* Botonera inferior de cada paso */
.checkout-acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}
.checkout-acciones .login-submit-btn { width: auto; margin-top: 0; padding: 14px 26px; }

.checkout-btn-secundario {
    border: 2px solid var(--black);
    background: var(--white);
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 13px 18px;
    transition: background-color 0.15s ease;
}
.checkout-btn-secundario:hover { background: var(--cream); }

.checkout-titulo {
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.checkout-resumen {
    border: 2px solid var(--black);
    background: var(--cream);
    padding: 12px 14px;
    margin-bottom: 18px;
}

.checkout-resumen-linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 4px 0;
}
.checkout-resumen-linea small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}
.checkout-resumen-total {
    border-top: 2px solid var(--black);
    margin-top: 6px;
    padding-top: 8px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
}
.checkout-campo-ancho { grid-column: 1 / -1; }

/* El textarea de la nota hereda el mismo aspecto que los inputs del login */
.login-field textarea {
    width: 100%;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 10px 12px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    resize: vertical;
}
.login-field textarea:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--yellow);
}

.checkout-aviso {
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
}

/* Pantalla de éxito: check dibujándose (trazo SVG) + textos en cascada */
.checkout-exito { text-align: center; padding: 14px 0 6px; }

.checkout-check {
    width: 86px;
    height: 86px;
    display: block;
    margin: 4px auto 20px;
}
.checkout-check-circulo {
    stroke: var(--black);
    stroke-width: 3;
    stroke-dasharray: 152;
    stroke-dashoffset: 152;
    animation: checkoutTrazo 0.5s ease forwards;
}
.checkout-check-marca {
    stroke: var(--black);
    stroke-width: 4;
    stroke-linecap: square;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: checkoutTrazo 0.35s 0.45s ease forwards;
}
@keyframes checkoutTrazo { to { stroke-dashoffset: 0; } }

.checkout-exito-num {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 15px;
    background: var(--yellow);
    border: 2px solid var(--black);
    padding: 4px 14px;
    margin: 4px 0 12px;
    animation: checkoutAparece 0.4s 0.55s ease backwards;
}
.checkout-exito-texto {
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 430px;
    margin: 0 auto 20px;
    animation: checkoutAparece 0.4s 0.7s ease backwards;
}
.checkout-exito-btn {
    width: auto !important;
    padding: 14px 30px;
    animation: checkoutAparece 0.4s 0.85s ease backwards;
}
@keyframes checkoutAparece {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .checkout-panel { padding: 22px 16px 20px; max-height: calc(100vh - 20px); }
    .checkout-overlay { padding: 10px; }
    .checkout-progreso-etiqueta { display: none; } /* solo números en móvil */
    .checkout-metodos { grid-template-columns: 1fr; }
    .checkout-linea { flex-wrap: wrap; }
    .checkout-acciones { flex-wrap: wrap-reverse; justify-content: center; }
    .checkout-acciones .login-submit-btn { flex: 1; }
}

@media (max-width: 520px) {
    .checkout-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-overlay,
    .checkout-panel,
    .checkout-progreso-num,
    .checkout-metodo { transition: none; }
    .checkout-paso-entra-der,
    .checkout-paso-entra-izq,
    .checkout-paso-sale-izq,
    .checkout-paso-sale-der,
    .checkout-exito-num,
    .checkout-exito-texto,
    .checkout-exito-btn { animation: none; }
    .checkout-check-circulo,
    .checkout-check-marca { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   ADMIN — sección TPV Glop (conexión con el TPV + pedidos de la web)
   ========================================================================== */

.admin-glop-config {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 28px;
}
.admin-glop-config .admin-accion-card-desc { max-width: none; }

.admin-glop-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: end;
}

.admin-glop-campo label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.admin-glop-campo input[type="text"] {
    width: 100%;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 9px 11px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
}
.admin-glop-campo input[type="text"]:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--yellow);
}

/* Campo que ocupa todo el ancho del formulario (p. ej. el textarea de las
   frases del panel rotativo en la sección "Personalización"). */
.admin-glop-campo-ancho {
    grid-column: 1 / -1;
}
.admin-glop-campo textarea {
    width: 100%;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 9px 11px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}
.admin-glop-campo textarea:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--yellow);
}

.admin-glop-campo-activo {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* Verde de "conexión activa" (el rojo de .admin-mantenimiento-activo aquí
   significaría lo contrario de lo que queremos transmitir) */
.admin-mantenimiento-estado.admin-glop-conectado { color: #1a7f37; font-weight: 700; }

.admin-glop-meta {
    border-top: 2px solid var(--gray-border);
    padding-top: 12px;
    font-size: 12.5px;
    line-height: 1.6;
}
.admin-glop-meta > p { margin-bottom: 6px; }

.admin-glop-chip {
    display: inline-block;
    border: 1.5px solid var(--black);
    background: var(--cream);
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 7px;
    margin: 1px 2px 1px 0;
}

.admin-glop-log {
    list-style: none;
    max-height: 180px;
    overflow-y: auto;
    border: 1.5px solid var(--gray-border);
    background: var(--cream);
    padding: 8px 12px;
}
.admin-glop-log li {
    padding: 4px 0;
    border-bottom: 1px dashed var(--gray-border);
    font-size: 12px;
}
.admin-glop-log li:last-child { border-bottom: none; }
.admin-glop-log-fecha {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-right: 6px;
}

.admin-glop-estado {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border: 1.5px solid var(--black);
}
.admin-glop-estado-procesando { background: var(--yellow); }
.admin-glop-estado-pendiente  { background: var(--cream); }
.admin-glop-estado-completado { background: #c8f7c5; }
.admin-glop-estado-cancelado  { background: #fdeaea; color: #a11a1a; border-color: #a11a1a; }

@media (max-width: 760px) {
    .admin-glop-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CUENTA ATRÁS DE OFERTAS (tienda: tarjetas y ventana de detalle)
   Un único reloj JS actualiza todos los contadores, ver iniciarRelojOfertas()
   ========================================================================== */
/* Cuenta atrás de la oferta: chapa negra con sombra dura amarilla y el tiempo
   en cajas (días/horas/min/seg) en vez de una línea de texto, para que se vea
   desde lejos en la tarjeta. En la última hora se pone en rosa y late
   (.urgente, lo activa pintarTiempoOferta en app.js). */
.oferta-contador {
    display: flex;
    align-items: center;
    /* Centrado: en la tarjeta la chapa es estrecha y el "Termina en" se va a
       una línea propia encima de las cajas; alineado a la izquierda quedaba
       descolgado respecto a ellas. */
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--black);
    color: var(--yellow);
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--yellow);
    padding: 6px 9px;
    margin: 8px 0 12px;
    width: fit-content;
    max-width: 100%;
}
.oferta-contador-icono { font-size: 13px; }
.oferta-contador-texto { opacity: 0.85; }

.oferta-contador-tiempo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.oferta-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
    padding: 3px 4px 2px;
    background: var(--yellow);
    color: var(--black);
}
.oferta-seg b {
    font-family: 'Archivo Black', sans-serif;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    /* Cifras tabulares: que el ancho no baile con cada segundo */
    font-variant-numeric: tabular-nums;
}
.oferta-seg i {
    font-style: normal;
    font-size: 7px;
    letter-spacing: 0.5px;
    opacity: 0.75;
}
.oferta-seg-sep {
    font-size: 13px;
    line-height: 1.6;
    animation: ofertaParpadeo 1s steps(1, end) infinite;
}
@keyframes ofertaParpadeo {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.25; }
}

/* Última hora: la chapa cambia de color y respira, sin tocar el layout */
.oferta-contador.urgente {
    background: #fb2789;
    color: var(--white);
    box-shadow: 4px 4px 0 var(--black);
    animation: ofertaLatido 1.6s ease-in-out infinite;
}
.oferta-contador.urgente .oferta-seg { background: var(--white); }
@keyframes ofertaLatido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* En la ficha del producto hay sitio de sobra: se agranda */
.producto-modal-info .oferta-contador { font-size: 11px; padding: 8px 12px; }
.producto-modal-info .oferta-seg { min-width: 38px; padding: 4px 6px 3px; }
.producto-modal-info .oferta-seg b { font-size: 20px; }
.producto-modal-info .oferta-seg i { font-size: 8px; }

@media (prefers-reduced-motion: reduce) {
    .oferta-seg-sep, .oferta-contador.urgente { animation: none; }
}

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN — SECCIÓN "PRODUCTOS"
   (tabla del catálogo, editor de producto y editor de ofertas/descuentos)
   ========================================================================== */
.admin-productos-buscador { margin: 14px 0; }
.admin-productos-buscador input {
    width: 100%;
    max-width: 420px;
    padding: 11px 14px;
    border: 2px solid var(--black);
    background: var(--cream);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    outline: none;
}
.admin-productos-buscador input:focus { background: var(--white); }

.admin-table-productos { min-width: 820px; }

.admin-producto-celda {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.admin-producto-celda small { color: var(--text-muted); }

.admin-producto-miniatura {
    width: 44px;
    height: 44px;
    border: 2px solid var(--black);
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}
.admin-producto-miniatura img { width: 100%; height: 100%; object-fit: cover; }

.admin-stock-agotado {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    color: #a11a1a;
    display: block;
}

.admin-promo-chip {
    display: inline-block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 10px;
    background: var(--yellow);
    border: 2px solid var(--black);
    padding: 1px 6px;
    white-space: nowrap;
}

/* ----- Lista de ofertas ---------------------------------------------------- */
.admin-promos-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 34px;
}

.admin-promo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 4px 4px 0 var(--gray-border);
    padding: 14px 18px;
}

.admin-promo-item-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.admin-promo-item-descuento {
    font-family: 'Archivo Black', sans-serif;
    font-size: 16px;
    background: var(--yellow);
    border: 2px solid var(--black);
    padding: 8px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-promo-item-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.admin-promo-item-texto strong {
    font-family: 'Archivo Black', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.admin-promo-item-texto small {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    color: var(--text-muted);
}

.admin-promo-estado {
    display: inline-block;
    width: fit-content;
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 7px;
    border: 1.5px solid var(--black);
}
.admin-promo-estado-vigente    { background: var(--yellow); }
.admin-promo-estado-programada { background: #d9ecff; }
.admin-promo-estado-pausada    { background: var(--cream); color: var(--text-muted); border-color: var(--text-muted); }
.admin-promo-estado-caducada   { background: #fdeaea; color: #a11a1a; border-color: #a11a1a; }

.admin-promo-item-acciones { flex-direction: row; flex-wrap: wrap; }
.admin-promo-item-acciones .admin-action-btn { width: auto; }

/* ----- Formulario del editor de producto / oferta -------------------------- */
.admin-producto-form { margin-top: 10px; }

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 16px;
}

.admin-form-campo { display: flex; flex-direction: column; gap: 6px; }
.admin-form-campo-ancho { grid-column: 1 / -1; }

.admin-form-campo label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.admin-form-campo input,
.admin-form-campo select,
.admin-form-campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--black);
    background: var(--cream);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    outline: none;
    transition: background 0.15s ease;
}
.admin-form-campo textarea { resize: vertical; line-height: 1.6; }
.admin-form-campo input:focus,
.admin-form-campo select:focus,
.admin-form-campo textarea:focus { background: var(--white); }

/* Campos que el propio editor calcula y no se teclean (el stock y la
   disponibilidad de un producto con variantes, que son el resumen de estas):
   se ven inertes a propósito, para que no parezca que el campo está roto. */
.admin-form-campo input:disabled,
.admin-form-campo select:disabled {
    background: var(--gray-border);
    border-style: dashed;
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 1; /* Safari/iOS los aclara tanto que no se leen */
}

.admin-toggles-fila {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

/* ----- Variantes en el editor de producto ---------------------------------- */
.admin-variantes-header { margin-top: 34px; }

.admin-variantes-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}
.admin-variantes-lista:empty::before {
    content: 'Sin variantes: el producto se vende como "Talla Única" con el precio y stock generales.';
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.admin-variante-fila {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 12px 14px;
    flex-wrap: wrap;
}

.admin-variante-foto {
    width: 62px;
    height: 62px;
    border: 2px solid var(--black);
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 8.5px;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-muted);
    overflow: hidden;
    flex-shrink: 0;
}
.admin-variante-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Fotos adicionales del producto (carrusel) en el editor del panel: una tira
   de miniaturas donde el ORDEN de la lista es el orden del carrusel, por eso
   cada una lleva sus flechas para moverla. */
.admin-producto-imagenes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-producto-imagenes-ayuda { margin-bottom: 10px; }
.admin-producto-imagenes-vacio {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
}
.admin-producto-imagen {
    width: 96px;
    border: 2px solid var(--black);
    background: var(--cream);
}
.admin-producto-imagen img {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-bottom: 2px solid var(--black);
}
.admin-producto-imagen-acciones {
    display: flex;
}
.admin-producto-imagen-acciones .admin-action-btn {
    flex: 1;
    padding: 4px 0;
    font-size: 10px;
    border: none;
    border-right: 1px solid var(--black);
}
.admin-producto-imagen-acciones .admin-action-btn:last-child { border-right: none; }
.admin-producto-imagen-acciones .admin-action-btn[disabled] { opacity: 0.35; cursor: default; }

.admin-variante-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
    gap: 8px 10px;
    flex: 1;
    min-width: 260px;
}
.admin-variante-campos label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.admin-variante-campos input,
.admin-variante-campos select {
    padding: 7px 8px;
    border: 2px solid var(--black);
    background: var(--cream);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    outline: none;
}
.admin-variante-campos input:focus,
.admin-variante-campos select:focus { background: var(--white); }

.admin-variante-acciones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* ----- Editor de ofertas ---------------------------------------------------- */
.admin-oferta-ambito {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.admin-oferta-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}
.admin-oferta-radio input { accent-color: var(--black); width: 16px; height: 16px; }

.admin-oferta-productos { margin-top: 14px; }
.admin-oferta-productos > input {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    border: 2px solid var(--black);
    border-bottom: none;
    background: var(--cream);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    outline: none;
}

.admin-oferta-productos-lista {
    border: 2px solid var(--black);
    background: var(--white);
    max-height: 320px;
    overflow-y: auto;
}

.admin-oferta-producto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-border);
    cursor: pointer;
}
.admin-oferta-producto:last-child { border-bottom: none; }
.admin-oferta-producto:hover { background: var(--cream); }
.admin-oferta-producto input { accent-color: var(--black); width: 16px; height: 16px; flex-shrink: 0; }
.admin-oferta-producto .admin-producto-miniatura { width: 34px; height: 34px; font-size: 14px; }
.admin-oferta-producto-nombre { font-size: 13.5px; min-width: 0; }
.admin-oferta-producto-nombre small {
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
}

@media (max-width: 900px) {
    .admin-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-promo-item-acciones { width: 100%; }
}

/* ==========================================================================
   "MI PERFIL" (perfil.html) — autoservicio de los datos de la cuenta
   ========================================================================== */
.perfil-panel { max-width: 720px; }

.perfil-cabecera {
    display: flex;
    align-items: center;
    gap: 18px;
    border: 2px solid var(--black);
    background: var(--cream);
    padding: 18px 20px;
    margin-bottom: 30px;
}
.perfil-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--black);
    font-family: 'Archivo Black', sans-serif;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 0 var(--black);
}
.perfil-cabecera-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.perfil-cabecera-nombre {
    font-family: 'Archivo Black', sans-serif;
    font-size: 17px;
    letter-spacing: 0.3px;
}
.perfil-cabecera-email {
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    color: var(--text-muted);
}
.perfil-cabecera-alta {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.perfil-subtitulo { margin: 26px 0 4px; }
.perfil-subtitulo:first-of-type { margin-top: 0; }
.perfil-envio-nota { margin-bottom: 14px; }
.perfil-acciones { justify-content: flex-end; }

@media (max-width: 480px) {
    .perfil-cabecera { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   "MIS PEDIDOS" (mis-pedidos.html) — historial de compras del cliente
   ========================================================================== */
.pedidos-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pedidos-lista .loading a { color: var(--black); border-bottom: 2px solid var(--yellow); text-decoration: none; }

/* Cada pedido es un <button>: toda la fila es clicable y abre el detalle */
.pedido-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 12px 16px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 5px 5px 0 var(--gray-border);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pedido-card:hover,
.pedido-card:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--yellow);
    border-color: var(--black);
}

/* Collage de fotos: 1 producto = una foto entera; 2-4 = celdas repartidas;
   más de 4 = las 4 primeras + un "+N" superpuesto en la última */
.pedido-card-collage {
    display: grid;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border: 2px solid var(--black);
    overflow: hidden;
    background: var(--cream);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
}
.pedido-card-collage-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.pedido-card-collage-2 { grid-template-rows: 1fr; } /* 2 mitades verticales a toda altura, no un 2×2 con hueco */
.pedido-card-collage-3 .pedido-collage-celda:first-child { grid-column: 1 / -1; }

.pedido-collage-celda {
    position: relative;
    overflow: hidden;
    background: var(--cream);
}
.pedido-collage-celda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pedido-collage-sinfoto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    opacity: 0.5;
}
.pedido-collage-mas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 14, 14, 0.62);
    color: var(--white);
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 13px;
}

.pedido-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.pedido-card-num {
    font-family: 'Archivo Black', sans-serif;
    font-size: 13.5px;
    letter-spacing: 0.3px;
}
.pedido-card-resumen {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pedido-card-fecha {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.pedido-card-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.pedido-card-total { font-family: 'Space Mono', monospace; font-weight: 700; white-space: nowrap; }

.pedido-card-flecha {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.pedido-card:hover .pedido-card-flecha { transform: translateX(4px); color: var(--black); }

@media (max-width: 520px) {
    .pedido-card { flex-wrap: wrap; }
    .pedido-card-derecha { flex-direction: row; align-items: center; gap: 10px; margin-left: 80px; }
    .pedido-card-flecha { display: none; }
}

/* ---- Ventana de detalle del pedido ------------------------------------- */
.pedido-detalle-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 14, 14, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pedido-detalle-overlay.active { opacity: 1; visibility: visible; }

.pedido-detalle-panel {
    position: relative;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 10px 10px 0 var(--yellow);
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden; /* overflow-y:auto fuerza overflow-x a 'auto' si no se fija explícitamente */
    padding: 28px 30px 26px;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pedido-detalle-overlay.active .pedido-detalle-panel { transform: none; }
/* Anclado dentro del padding (no a caballo del borde): con overflow-y:auto
   la parte que sobresaliera quedaría recortada (mismo motivo que en checkout) */
.pedido-detalle-panel > .login-modal-close { top: 14px; right: 14px; width: 32px; height: 32px; font-size: 16px; }

/* Barra de progreso del curso normal (pendiente→procesando→enviado→completado) */
.pedido-progreso {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 18px 30px 26px 0;
    padding: 0;
}
.pedido-progreso-paso { display: flex; align-items: center; gap: 8px; }
.pedido-progreso-paso:not(:last-child) { flex: 1; }
.pedido-progreso-paso:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--gray-border);
    margin: 0 10px;
}
.pedido-progreso-paso.completado:not(:last-child)::after { background: var(--black); }
.pedido-progreso-num {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 2px solid var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    background: var(--white);
}
.pedido-progreso-paso.activo .pedido-progreso-num { background: var(--yellow); box-shadow: 3px 3px 0 var(--black); }
.pedido-progreso-paso.completado .pedido-progreso-num { background: var(--black); color: var(--yellow); }
.pedido-progreso-etiqueta {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.pedido-progreso-paso.activo .pedido-progreso-etiqueta { color: var(--black); font-weight: 700; }

/* Camino interrumpido (cancelado/reembolsado/fallido): un aviso en vez de
   pasos, ya que aquí no hay progreso que enseñar */
.pedido-interrumpido {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 26px;
    padding: 14px 16px;
    border: 2px solid #a11a1a;
    background: #fdeaea;
    color: #a11a1a;
}
.pedido-interrumpido-icono { font-size: 22px; }
.pedido-interrumpido-texto {
    font-family: 'Archivo Black', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pedido-interrumpido-reembolsado { border-color: var(--black); background: var(--cream); color: var(--black); }
.pedido-interrumpido-fallido { border-color: #a11a1a; background: #fdeaea; color: #a11a1a; }

/* Líneas de artículos del detalle (con foto, a diferencia de las del checkout) */
.pedido-detalle-linea {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--gray-border);
}
.pedido-detalle-linea:last-child { border-bottom: none; }
.pedido-detalle-linea-foto {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 2px solid var(--black);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
}
.pedido-detalle-linea-foto img { width: 100%; height: 100%; object-fit: cover; }
.pedido-detalle-linea-info { flex: 1; min-width: 0; }
.pedido-detalle-linea-info strong { display: block; font-size: 13.5px; }
.pedido-detalle-linea-info small { color: var(--text-muted); font-size: 11px; font-family: 'Space Mono', monospace; }
.pedido-detalle-linea-precio { font-family: 'Space Mono', monospace; font-weight: 700; white-space: nowrap; }

.pedido-detalle-meta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--black);
    font-size: 13px;
}
.pedido-detalle-meta p { margin-bottom: 8px; line-height: 1.5; }
.pedido-detalle-meta p:last-child { margin-bottom: 0; }
.pedido-detalle-meta a { color: var(--black); border-bottom: 2px solid var(--yellow); text-decoration: none; }

@media (max-width: 640px) {
    .pedido-detalle-panel { padding: 22px 16px 20px; max-height: calc(100vh - 20px); }
    .pedido-detalle-overlay { padding: 10px; }
    .pedido-progreso-etiqueta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pedido-card,
    .pedido-detalle-overlay,
    .pedido-detalle-panel { transition: none; }
}

/* ==========================================================================
   ADMIN — sección "Pedidos" (misma tarjeta+collage que "Mis pedidos", con
   controles de gestión: estado y seguimiento)
   ========================================================================== */
.pedido-card-admin {
    display: block;
    width: 100%;
    cursor: default;
    padding: 16px 18px;
}
/* Aquí la tarjeta no es clicable (los controles de dentro sí lo son):
   se anula el efecto "botón" que sí tiene la de "Mis pedidos" */
.pedido-card-admin:hover,
.pedido-card-admin:focus-visible {
    transform: none;
    box-shadow: 5px 5px 0 var(--gray-border);
}

.pedido-card-admin-cabecera {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.pedido-card-admin-cliente {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pedido-card-admin-cliente strong { color: var(--text); }

.pedido-card-admin-articulos {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    padding: 10px 0;
    border-top: 1px dashed var(--gray-border);
    border-bottom: 1px dashed var(--gray-border);
    margin-bottom: 16px;
}

.pedido-card-admin-controles {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    align-items: end;
}
.pedido-card-admin-campo label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: var(--text-muted);
}
.pedido-card-admin-campo select {
    width: 100%;
    height: 46px;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 0 12px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.pedido-card-admin-campo select:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }

.pedido-card-admin-tpv {
    margin-top: 14px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* El botón "Reenviar al TPV" es una acción de rescate, no algo del día a día:
   se queda pequeño y discreto al lado del estado de descarga. */
.pedido-card-admin-tpv .admin-secondary-btn {
    font-size: 11px;
    padding: 5px 10px;
}

@media (max-width: 640px) {
    .pedido-card-admin-controles { grid-template-columns: 1fr; }
}

/* Campo de seguimiento: deliberadamente grande y prominente (a diferencia de
   los inputs compactos del resto del panel), ya que es un dato que se
   escribe una vez por envío y conviene que sea fácil de ver/pegar */
.admin-pedido-tracking {
    display: flex;
    gap: 10px;
}
.admin-pedido-tracking-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 0 16px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
}
.admin-pedido-tracking-input:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }
.admin-pedido-tracking .admin-primary-btn { flex-shrink: 0; height: 46px; margin: 0; }

/* ==========================================================================
   ENTREGA EN EL CHECKOUT (envío a domicilio / recogida en tienda) + desglose
   ========================================================================== */

/* El selector de entrega reutiliza las tarjetas del método de pago pero con
   dos opciones (2 columnas en vez de 3) */
.checkout-entrega { grid-template-columns: repeat(2, 1fr); }

/* Nota bajo el subtotal del paso 1: el envío se suma en el último paso */
.checkout-nota-envio {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* Línea de IVA del desglose: informativa, en tono apagado */
.checkout-resumen-iva { color: var(--text-muted); font-size: 13px; }

/* ==========================================================================
   PEDIDOS (admin): artículos en lista con foto + distintivo de entrega
   ========================================================================== */

/* La lista reutiliza .pedido-detalle-linea (mismas filas que el detalle de
   "Mis pedidos"), aquí como <ul> sin viñetas */
.pedido-admin-lineas {
    list-style: none;
    margin: 12px 0;
    padding: 0 0 0 2px;
}

.pedido-card-admin-entrega {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    margin-top: 2px;
}

/* Formulario de la tarjeta "Gastos de envío" de Acciones */
.admin-envio-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-envio-form input {
    width: 90px;
    border: 2px solid var(--black);
    padding: 9px 10px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    text-align: right;
}
.admin-envio-form input:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }
.admin-envio-euro { font-weight: 700; }
.admin-envio-form .admin-primary-btn { margin: 0; }

/* ==========================================================================
   "YA LO HE RECIBIDO" (detalle de Mis pedidos)
   ========================================================================== */

.pedido-detalle-acciones { margin-top: 18px; }
.pedido-detalle-acciones:empty { margin-top: 0; }

.pedido-recibido-texto {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--text-muted);
    text-align: center;
}

.pedido-recibido-btn { width: 100%; }

/* ==========================================================================
   CUPONES — campo del checkout (paso Pago)
   ========================================================================== */

.checkout-cupon { margin-bottom: 14px; }

.checkout-cupon-form { display: flex; gap: 8px; }
.checkout-cupon-form input {
    flex: 1;
    min-width: 0;
    border: 2px solid var(--black);
    padding: 10px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
}
.checkout-cupon-form input:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }
.checkout-cupon-form .checkout-btn-secundario { flex-shrink: 0; }

/* Chip del cupón aplicado: fondo amarillo de marca con la ✕ para quitarlo */
.checkout-cupon-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--yellow);
    border: 2px solid var(--black);
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 600;
}
.checkout-cupon-chip button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
}
.checkout-cupon-chip button:hover { transform: scale(1.2); }

.checkout-cupon-msg {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #b3261e;
}

/* Línea de descuento en desgloses (checkout y detalle de Mis pedidos) */
.checkout-cupon-descuento { color: #1a7a2e; font-weight: 600; }
.checkout-cupon-aviso { color: var(--text-muted); font-size: 12.5px; }

/* ==========================================================================
   CUPONES — gestión en el panel (sección Pedidos)
   ========================================================================== */

.admin-cupones-card { flex-direction: column; align-items: stretch; }

/* Cabecera propia (icono+texto a la izquierda, botón a la derecha) en vez de
   meter el botón dentro de .admin-accion-card-info: así el texto largo de la
   descripción envuelve sin invadir el hueco del botón (que antes quedaba
   flotando encima del párrafo en pantallas estrechas) */
.admin-cupones-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}
.admin-cupones-nuevo-btn { flex-shrink: 0; }

.admin-cupones-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.admin-cupon-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid var(--gray-border);
    padding: 10px 14px;
    background: var(--white);
}

.admin-cupon-codigo {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    background: var(--yellow);
    border: 2px solid var(--black);
    padding: 3px 10px;
    white-space: nowrap;
}

.admin-cupon-detalle { flex: 1; min-width: 0; }
.admin-cupon-detalle strong { display: block; font-size: 13.5px; }
.admin-cupon-detalle small { color: var(--text-muted); font-size: 11.5px; font-family: 'Space Mono', monospace; }

.admin-cupon-estado {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.admin-cupon-estado-activo     { background: #d8f5de; color: #1a7a2e; }
.admin-cupon-estado-inactivo   { background: var(--gray-border); color: var(--text-muted); }
.admin-cupon-estado-programado { background: #e3ecfd; color: #2456b0; }
.admin-cupon-estado-caducado   { background: #ffe9d6; color: #a35a00; }
.admin-cupon-estado-agotado    { background: #fde3e3; color: #b3261e; }

.admin-cupon-botones { display: flex; gap: 6px; flex-shrink: 0; }

/* "Eliminar" debe leerse como destructivo YA en su estado normal (no solo al
   pasar el ratón, que en táctil nunca se ve): mismo look "sombra dura" que el
   resto de botones del panel pero en rojo, igual que .admin-action-btn-danger
   hace con los botones planos de las tablas. */
.admin-cupon-borrar {
    background: var(--white);
    color: #a11a1a;
    border: 2px solid #a11a1a;
    box-shadow: 4px 4px 0 #a11a1a;
}
.admin-cupon-borrar:hover:not(:disabled) {
    background: #a11a1a;
    color: var(--white);
    box-shadow: 6px 6px 0 #7a1414;
}
.admin-cupon-borrar:active:not(:disabled) { box-shadow: 0 0 0 #7a1414; }

/* El formulario reutiliza .admin-glop-form (grid de campos); los checks van
   alineados con los inputs */
.admin-cupon-form { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--gray-border); }
.admin-cupon-check { display: flex; align-items: flex-end; padding-bottom: 6px; }

/* Guardar/Cancelar deben leerse como un par (acción + su cancelación), no como
   dos acciones independientes: .admin-glop-campo-activo por defecto usa
   space-between (pensado para "Guardar" + una acción SUELTA como "Enviar
   prueba"), aquí se anulan y se agrupan con un hueco pequeño, como ya hace
   .blog-editor-footer-acciones con Guardar+Volver en los editores. */
.admin-cupon-form .admin-glop-campo-activo {
    justify-content: flex-start;
    gap: 12px;
}

@media (max-width: 640px) {
    .admin-cupon-fila { flex-wrap: wrap; }
    .admin-cupon-botones { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   PORTADA 2.0 — cartel editorial neo-brutalista "ácido"
   Rediseño de index.html. Bloque autónomo y con prefijo .hm- para que gane
   a las reglas antiguas de .hero-screen / .inicio-* sin tocarlas. Las
   animaciones se activan con html.hm-anim (lo pone un script en <head> antes
   del primer pintado; si hay prefers-reduced-motion, no se activa y todo
   queda visible/estático). Los hooks de JS del inicio se conservan intactos.
   ========================================================================== */

.hm { overflow-x: clip; }

/* --- Sistema de revelado al hacer scroll (data-reveal) y de entrada
       orquestada al cargar (data-load). Sólo se ocultan si hm-anim está
       activo; sin él (JS caído o movimiento reducido) todo se ve. --- */
html.hm-anim [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
html.hm-anim [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hm-hero {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 60px) 24px clamp(26px, 4vw, 48px);
    overflow: clip;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Wordmark gigante de fondo, recortado por el borde, con parallax */
/* Letrero de fondo del hero: el nombre de la marca en hueco, deslizándose
   despacio de derecha a izquierda en bucle. El desplazamiento va en la pista
   interior y NO en este contenedor a propósito: el contenedor lleva el
   parallax del scroll, que app.js aplica como transform en línea, y los dos
   transforms se pisarían. */
.hm-hero-wordmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    margin: 0;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}
.hm-hero-wordmark-track {
    display: flex;
    width: max-content;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(120px, 26vw, 360px);
    line-height: 0.8;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 2px var(--gray-border);
    text-stroke: 2px var(--gray-border);
    white-space: nowrap;
    /* Cuatro copias: al llegar a la mitad (dos copias) vuelve al principio y
       el salto no se ve. Muy lento: es un fondo, no debe robar atención. */
    animation: hmLetrero 90s linear infinite;
}
.hm-hero-wordmark-track > span { padding-right: 0.28em; }
@keyframes hmLetrero {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Imagen principal: primero, completa, a su resolución nativa */
.hm-hero-media {
    position: relative;
    z-index: 1;
    /* Aire generoso bajo la foto: el titular es enorme y pegado a la imagen
       agobiaba la vista. */
    margin: 0 0 clamp(80px, 9vw, 140px);
    width: 100%;
    display: flex;
    justify-content: center;
}

.hm-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Antetítulo tipo etiqueta con punto que late */
.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    border: 2px solid var(--black);
    background: var(--white);
    padding: 7px 14px;
    box-shadow: 3px 3px 0 var(--black);
}
.hm-eyebrow-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #fb2789;
    box-shadow: 0 0 0 3px rgba(251,39,137,0.22);
    animation: hm-pulse 1.6s ease-in-out infinite;
}
@keyframes hm-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.55); opacity: 0.6; }
}

/* Titular: reaprovecha las clases del typewriter, pero manda .hm-hero-title */
.hm-hero-title {
    margin: 24px 0 0;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -0.01em;
}
.hm-hero-title .hm-line { display: block; }
.hm-hero-title .tagline-static {
    color: var(--black);
    padding-top: 0;                 /* anula el padding-top:150px heredado */
    font-size: clamp(52px, 9vw, 116px);
    display: inline-block;
}
.hm-hero-title .tagline-highlight-wrap {
    display: inline-flex;
    align-items: baseline;
    margin-top: 0.06em;
    color: var(--black);
    background: var(--yellow);
    padding: 0.02em 0.16em;
    font-size: clamp(38px, 6.6vw, 82px);
    box-shadow: 6px 6px 0 var(--black);
    border: 3px solid var(--black);
    min-height: 1em;
}
.hm-hero-title .tagline-highlight { white-space: pre; }
.hm-hero-title .tagline-cursor {
    display: inline-block;
    margin-left: 3px;
    font-weight: 400;
    animation: cursor-blink 0.9s steps(1) infinite;
}

.hm-hero-sub {
    margin: 26px auto 0;
    max-width: 52ch;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.65;
    color: var(--text-muted);
}

.hm-hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* El hueco lo manda el botón magnético (data-magnetico): sigue al cursor
       con FUERZA 0.28, así que puede desplazarse hasta 0.14 × su ancho (~36px
       en "Explorar la tienda") y su sombra crece a 8px al pasar por encima.
       Con menos separación, al moverse se montaba sobre "Ver novedades".
       Vertical mucho menor: al apilarse en pantallas estrechas no hace falta. */
    gap: 16px 56px;
    margin-top: 34px;
}

/* Botones (compartidos por hero y bienvenida) */
.hm-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 28px;
    border: 3px solid var(--black);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s cubic-bezier(.22,1,.36,1), background-color 0.3s ease, color 0.3s ease;
}
.hm-btn span { transition: transform 0.25s cubic-bezier(.16,1,.3,1); }
.hm-btn-primary { background: var(--black); color: var(--yellow); box-shadow: 5px 5px 0 var(--yellow-deep); }
.hm-btn-primary:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--yellow-deep); }
.hm-btn-primary:hover span { transform: translateX(5px); }
.hm-btn-ghost { background: var(--white); color: var(--black); box-shadow: 5px 5px 0 var(--black); }
.hm-btn-ghost:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--black); background: var(--yellow); }

/* Mini-estadísticas monoespaciadas */
.hm-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 40px;
    margin: 40px 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 2px solid var(--gray-border);
}
.hm-hero-stats li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.hm-hero-stats li span {
    font-family: 'Archivo Black', sans-serif;
    font-size: 26px;
    letter-spacing: 0;
    color: var(--black);
}

/* Póster: el marco se ajusta a la imagen (no la recorta). El tope va por
   debajo de la resolución nativa (1170px) a propósito: la foto ocupaba
   demasiado y así deja respirar al titular; nunca se amplía, así que la
   nitidez sólo puede mejorar. */
.hm-poster {
    position: relative;
    display: inline-block;
    max-width: min(100%, 980px);
    border: 3px solid var(--black);
    box-shadow: 14px 14px 0 var(--black);
    background: var(--yellow);
    overflow: visible;
    will-change: transform;
}
.hm-poster-img {
    display: block;
    width: 100%;
    height: auto;          /* mantiene la proporción nativa, sin recorte */
    max-width: 100%;
}
/* Reposiciona la etiqueta rosa (hereda color/estilo global .hero-hangtag).
   right/top positivos para que cuelgue del borde superior del póster sin que
   el overflow:clip del hero la recorte. */
.hm-poster .hero-hangtag {
    top: -16px;
    right: 14px;
    left: auto;
    font-size: 13px;
    z-index: 3;
    animation: hm-tag-sway 4s ease-in-out infinite;
}
@keyframes hm-tag-sway {
    0%, 100% { transform: rotate(6deg); }
    50% { transform: rotate(1deg) translateY(-3px); }
}

/* Indicador de scroll */
.hm-scrollcue {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(28px, 4vw, 46px);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}
.hm-scrollcue-line {
    width: 54px; height: 2px; background: var(--black);
    position: relative; overflow: hidden;
}
.hm-scrollcue-line::after {
    content: ''; position: absolute; inset: 0;
    background: var(--yellow-deep);
    animation: hm-cue 1.8s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes hm-cue {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}
.hm-scrollcue:hover { color: var(--black); }

/* --------------------------------------------------------------------------
   BANDA-MARQUESINA
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   MANIFIESTO — banda negra con una declaración de marca y una palabra que gira
   (sustituye a la antigua marquesina en bucle). La palabra amarilla que rota es
   el elemento con carácter; todo lo demás se mantiene tranquilo a propósito.
   -------------------------------------------------------------------------- */
.hm-manifiesto {
    margin-top: clamp(24px, 4vw, 44px);
    background: var(--black);
    color: var(--white);
    border-top: 3px solid var(--yellow);
    padding: clamp(52px, 9vw, 120px) 24px;
    overflow: hidden;
}
.hm-manifiesto-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.hm-mf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: clamp(11px, 1.2vw, 13px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: clamp(20px, 3vw, 34px);
}
.hm-mf-eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--yellow);
    border-radius: 50%;
}
.hm-mf-frase {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 0.98;
    margin: 0;
}
.hm-mf-linea {
    display: block;
    font-size: clamp(30px, 6.4vw, 74px);
    color: var(--white);
}
/* La palabra que gira: su propia línea, más grande y en amarillo — el foco.
   --mf-h es la altura de cada palabra (un pelín > 1em para que Archivo Black,
   muy pesada, no se recorte arriba/abajo); el visor, cada palabra y el paso del
   giro usan la MISMA variable, así el bucle encaja exacto sin saltos. */
.hm-mf-rot {
    --mf-h: 1.14em;
    display: block;
    height: var(--mf-h);
    overflow: hidden;
    /* El tamaño lo manda la frase más larga que gira ("para tu día a día"):
       con el visor recortando por los lados, una medida mayor la cortaría en
       pantallas medianas. */
    font-size: clamp(30px, 6.6vw, 82px);
    color: var(--yellow);
    margin: 0.03em 0;
}
.hm-mf-rot-track {
    display: flex;
    flex-direction: column;
    /* 8 palabras + una novena que repite la primera → 8 pasos y vuelta al
       principio sin salto. Pausa en cada palabra y giro rápido entre ellas;
       si se añaden o quitan palabras hay que rehacer los pasos de hmMfRot. */
    animation: hmMfRot 18s cubic-bezier(.7, 0, .2, 1) infinite;
}
.hm-mf-rot-track span {
    display: block;
    height: var(--mf-h);
    line-height: var(--mf-h);
    white-space: nowrap;
}
@keyframes hmMfRot {
    0%, 9%       { transform: translateY(0); }
    12.5%, 21.5% { transform: translateY(calc(-1 * var(--mf-h))); }
    25%, 34%     { transform: translateY(calc(-2 * var(--mf-h))); }
    37.5%, 46.5% { transform: translateY(calc(-3 * var(--mf-h))); }
    50%, 59%     { transform: translateY(calc(-4 * var(--mf-h))); }
    62.5%, 71.5% { transform: translateY(calc(-5 * var(--mf-h))); }
    75%, 84%     { transform: translateY(calc(-6 * var(--mf-h))); }
    87.5%, 96.5% { transform: translateY(calc(-7 * var(--mf-h))); }
    100%         { transform: translateY(calc(-8 * var(--mf-h))); }
}
/* El pie del manifiesto es ahora la promesa de marca, no una nota al pie:
   texto más grande, barra amarilla a la izquierda y la segunda frase
   destacada en blanco con dos palabras marcadas en amarillo. */
.hm-mf-pie {
    max-width: 720px;
    margin: clamp(26px, 3.8vw, 44px) 0 0;
    padding-left: clamp(16px, 2vw, 22px);
    border-left: 4px solid var(--yellow);
    font-family: 'Work Sans', sans-serif;
    font-size: clamp(15px, 1.8vw, 20px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}
.hm-mf-pie-fuerte {
    display: block;
    margin-top: 0.5em;
    color: var(--white);
    font-weight: 600;
    font-size: 1.1em;
}
.hm-mf-pie-fuerte em {
    font-style: normal;
    background: var(--yellow);
    color: var(--black);
    padding: 0 0.2em;
    /* Para que el resaltado no se corte feo al partirse en dos líneas */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Texto solo para lectores de pantalla (la palabra rotativa es aria-hidden). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   BIENVENIDA
   -------------------------------------------------------------------------- */
.hm-intro {
    max-width: 900px;
    margin: clamp(70px, 10vw, 120px) auto;
    padding: 0 24px;
    text-align: center;
}
.hm-kicker {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text);
    padding-bottom: 6px;
    border-bottom: 3px solid var(--yellow);
}
.hm-intro-titulo {
    margin: 22px 0 26px;
    font-size: clamp(30px, 5vw, 52px);
    color: var(--black);
}
.hm-intro-texto p {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 20px;
    text-align: center;
}
.hm-intro-texto strong { color: var(--black); }
.hm-intro .hm-btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   SECCIONES (novedades, categorías, blog)
   -------------------------------------------------------------------------- */
.hm-seccion {
    max-width: 1280px;
    margin: 0 auto clamp(64px, 9vw, 110px);
    padding: 0 24px;
}
.hm-seccion-cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 38px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--black);
}
.hm-seccion-titulo .hm-kicker { border-bottom: none; padding: 0; color: var(--text-muted); }
.hm-seccion-titulo h2 {
    margin-top: 8px;
    font-size: clamp(26px, 4vw, 44px);
    color: var(--black);
}
/* Llamada a la acción de cada cabecera de sección. Tiene que competir con un
   titular en Archivo Black, así que no basta con un subrayadito: la parte
   importante va sobre un bloque amarillo macizo con sombra dura (el mismo
   lenguaje que los botones de la casa) y la flecha en un círculo negro. */
.hm-seccion-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-top: 16px;
    font-family: 'Work Sans', sans-serif;
    font-size: clamp(16px, 1.9vw, 21px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--black);
    text-decoration: none;
}

.hm-marcado {
    background: var(--yellow);
    box-shadow: 3px 3px 0 var(--black);
    padding: 3px 9px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    /* Si la frase parte en dos líneas, que el bloque se pinte en las dos */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.hm-seccion-cta:hover .hm-marcado,
.hm-seccion-cta:focus-visible .hm-marcado {
    box-shadow: 6px 6px 0 var(--black);
    transform: translate(-2px, -2px);
}

.hm-seccion-cta-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--black);
    color: var(--yellow);
    font-size: 15px;
    line-height: 1;
    transition: transform 0.18s ease;
}
.hm-seccion-cta:hover .hm-seccion-cta-flecha,
.hm-seccion-cta:focus-visible .hm-seccion-cta-flecha { transform: translateX(5px); }

.hm-vertodo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--black);
    white-space: nowrap;
    padding: 8px 12px;
    border: 2px solid var(--black);
    background: var(--white);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hm-vertodo span { transition: transform 0.2s ease; }
.hm-vertodo:hover { background: var(--yellow); box-shadow: 4px 4px 0 var(--black); transform: translate(-2px,-2px); }
.hm-vertodo:hover span { transform: translateX(4px); }

/* Categorías: tiles tipográficos con relleno diagonal al pasar por encima */
.hm-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.hm-cat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 30px 26px;
    border: 3px solid var(--black);
    background: var(--white);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(.22,1,.36,1), box-shadow 0.32s cubic-bezier(.22,1,.36,1);
}
.hm-cat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--yellow);
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(.22,1,.36,1);
    z-index: 0;
}
.hm-cat-nombre, .hm-cat-flecha { position: relative; z-index: 1; }
.hm-cat-nombre {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(18px, 2vw, 23px);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--black);
}
.hm-cat-flecha {
    font-size: 24px;
    color: var(--black);
    transition: transform 0.28s cubic-bezier(.16,1,.3,1);
}
.hm-cat:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--black); }
.hm-cat:hover::before { transform: translateY(0); }
.hm-cat:hover .hm-cat-flecha { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   VENTAJAS — banda negra
   -------------------------------------------------------------------------- */
.hm-ventajas {
    background: var(--black);
    color: var(--white);
    border-top: 4px solid var(--yellow);
    padding: clamp(56px, 8vw, 90px) 24px;
}
.hm-ventajas-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(28px, 4vw, 52px);
}
.hm-ventaja { padding-top: 20px; border-top: 2px solid rgba(255,255,255,0.16); }
.hm-ventaja-kicker {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--yellow);
}
.hm-ventaja h3 {
    margin: 14px 0 12px;
    font-size: clamp(20px, 2.4vw, 27px);
    color: var(--white);
}
.hm-ventaja p { font-size: 15px; line-height: 1.7; color: var(--out-of-stock); }

/* --------------------------------------------------------------------------
   ENTRADA ORQUESTADA AL CARGAR (data-load) — sólo con html.hm-anim
   -------------------------------------------------------------------------- */
html.hm-anim .hm-hero [data-load] {
    opacity: 0;
    animation: hm-load-up 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
/* Los retrasos dejan pasar primero la cortina de entrada (~0.9s) */
html.hm-anim .hm-hero [data-load="1"] { animation-delay: 0.95s; }
html.hm-anim .hm-hero [data-load="2"] { animation-delay: 1.06s; }
html.hm-anim .hm-hero [data-load="3"] { animation-delay: 1.20s; }
html.hm-anim .hm-hero [data-load="4"] { animation-delay: 1.32s; }
html.hm-anim .hm-hero [data-load="5"] { animation-delay: 1.44s; }
html.hm-anim .hm-hero [data-load="poster"] {
    opacity: 0;
    animation: hm-load-poster 1.25s cubic-bezier(.22,1,.36,1) 0.72s forwards;
}
@keyframes hm-load-up {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}
/* OJO: el fotograma final lleva insets NEGATIVOS a propósito. Con fill
   forwards el clip-path final se queda aplicado para siempre, y con inset(0)
   recortaba la etiqueta rosa (sobresale por arriba) y la sombra dura del
   póster. El margen de -60px les da sitio sin afectar al efecto de revelado. */
@keyframes hm-load-poster {
    from { opacity: 0; transform: translateY(30px) scale(0.97); clip-path: inset(-60px -60px 100% -60px); }
    to { opacity: 1; transform: none; clip-path: inset(-60px -60px -60px -60px); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hm-hero-wordmark { bottom: auto; top: 46%; opacity: 0.5; }
    .hm-seccion-cab { align-items: flex-start; }
}
@media (max-width: 640px) {
    .hm-poster { box-shadow: 8px 8px 0 var(--black); }
    .hm-seccion-cab { flex-direction: column; gap: 14px; }
    .hm-hero-title .tagline-highlight-wrap { box-shadow: 4px 4px 0 var(--black); }
    .hm-hero-stats { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-hero-wordmark-track,
    .hm-mf-rot-track,
    .hm-eyebrow-dot,
    .hm-scrollcue-line::after,
    .hm-poster .hero-hangtag { animation: none; }
    .hm-poster .hero-hangtag { transform: rotate(6deg); }
    /* Sin animación, la palabra rotativa se queda en la primera (frase legible). */
    .hm-mf-rot-track { transform: translateY(0); }
}

/* Campo "Imagen principal" del panel de Personalización (tarjeta Página de inicio) */
.admin-inicio-imagen {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.admin-inicio-imagen img {
    width: 240px;
    max-width: 100%;
    height: auto;
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    background: var(--gray-border);
    display: block;
}
.admin-inicio-imagen-acciones { flex: 1 1 240px; display: flex; flex-direction: column; gap: 12px; }
.admin-inicio-imagen-nota { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.admin-inicio-imagen-botones { display: flex; gap: 10px; flex-wrap: wrap; }

/* Placeholder cuando el pop-up aún no tiene imagen */
.admin-popup-sin-imagen {
    width: 240px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--text-muted);
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--cream);
}

/* Selector de posición del pop-up (radios como chips) */
.admin-popup-posiciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.admin-popup-pos { position: relative; cursor: pointer; }
.admin-popup-pos input { position: absolute; opacity: 0; pointer-events: none; }
.admin-popup-pos span {
    display: block;
    text-align: center;
    padding: 12px 10px;
    border: 2px solid var(--black);
    background: var(--white);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.admin-popup-pos:hover span { transform: translate(-2px,-2px); box-shadow: 3px 3px 0 var(--black); }
.admin-popup-pos input:checked + span { background: var(--yellow); box-shadow: 3px 3px 0 var(--black); }
.admin-popup-pos input:focus-visible + span { outline: 3px solid var(--yellow-deep); outline-offset: 2px; }

/* El interruptor del pop-up vive dentro de .admin-glop-campo, cuyo
   `label { display:block }` rompía la fila del toggle (el slider pasaba a
   inline e ignoraba su tamaño, dejando solo el punto negro sobre el texto).
   Restauramos su maquetación en fila y la caja del slider. */
.admin-glop-campo label.toggle-agotados { display: flex; margin-bottom: 0; }
.admin-glop-campo label.toggle-agotados .toggle-label { text-transform: none; letter-spacing: normal; }

/* ==========================================================================
   POP-UP DE BIENVENIDA DE LA PORTADA (se construye en app.js)
   ========================================================================== */
.mb-popup-cont {
    position: fixed;
    z-index: 1200;
}
/* Centro: modal con fondo oscuro que ocupa toda la pantalla */
.mb-popup-modal {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
/* Esquinas: tarjeta flotante que no bloquea la página */
.mb-popup-cont:not(.mb-popup-modal) { pointer-events: none; }
.mb-popup-cont:not(.mb-popup-modal) .mb-popup { pointer-events: auto; }
.mb-popup-superior-izquierda { top: 96px; left: 20px; }
.mb-popup-superior-derecha  { top: 96px; right: 20px; }
.mb-popup-inferior-izquierda { bottom: 20px; left: 20px; }
.mb-popup-inferior-derecha  { bottom: 96px; right: 20px; } /* por encima del carrito flotante */

.mb-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14,14,14,0.62);
    opacity: 0;
    transition: opacity 0.32s ease;
}
.mb-popup-visible .mb-popup-overlay { opacity: 1; }

.mb-popup {
    position: relative;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 10px 10px 0 var(--black);
    line-height: 0;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.34s ease, transform 0.34s cubic-bezier(.16,1,.3,1);
}
.mb-popup-visible .mb-popup { opacity: 1; transform: none; }

.mb-popup-modal .mb-popup { max-width: min(92vw, 440px); max-height: 88vh; }
.mb-popup-cont:not(.mb-popup-modal) .mb-popup { max-width: min(86vw, 320px); }

.mb-popup-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 88vh;
    object-fit: contain;
}

.mb-popup-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border: 3px solid var(--black);
    background: var(--yellow);
    color: var(--black);
    font-size: 24px;
    line-height: 1;
    font-family: 'Archivo Black', sans-serif;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--black);
    transition: transform 0.15s ease, background-color 0.15s ease;
    z-index: 1;
}
.mb-popup-close:hover { transform: rotate(90deg); background: #fb2789; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
    .mb-popup, .mb-popup-overlay { transition: none; }
    .mb-popup { transform: none; }
    .mb-popup-close { transition: none; }
    .mb-popup-close:hover { transform: none; }
}

@media (max-width: 480px) {
    /* En móvil, las esquinas inferiores centran la tarjeta para no chocar con el carrito */
    .mb-popup-cont:not(.mb-popup-modal) { left: 50%; right: auto; transform: translateX(-50%); }
    .mb-popup-cont:not(.mb-popup-modal) .mb-popup { max-width: 90vw; }
    .mb-popup-superior-izquierda, .mb-popup-superior-derecha { top: 84px; }
}

/* ==========================================================================
   BIBLIOTECA DE MEDIOS (panel de administración) — galería tipo WordPress
   ========================================================================== */

/* Botón destructivo genérico (mismo look "sombra dura" del panel, en rojo) */
.admin-danger-btn {
    background: var(--white);
    color: #a11a1a;
    border: 2px solid #a11a1a;
    box-shadow: 4px 4px 0 #a11a1a;
    padding: 11px 18px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.admin-danger-btn:hover:not(:disabled) { background: #a11a1a; color: var(--white); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #7a1414; }
.admin-danger-btn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 0 0 0 #7a1414; }
.admin-danger-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Filtros de la biblioteca (buscador + interruptor de recortes de WordPress).
   Hacen falta porque la galería incluye el archivo heredado de wp-content. */
.admin-galeria-filtros {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.admin-galeria-filtros input[type="search"] {
    flex: 1 1 260px;
    padding: 10px 14px;
    border: 3px solid var(--black);
    background: var(--white);
    font-family: inherit;
    font-size: 0.9rem;
}
.admin-galeria-filtros input[type="search"]:focus {
    outline: none;
    box-shadow: 4px 4px 0 var(--black);
}
.admin-galeria-filtros .toggle-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Selección múltiple y acciones en lote del panel ---------------------
   Casillas por elemento + barra que aparece encima de la lista en cuanto hay
   algo marcado. Misma pinta en todas las secciones (productos, blog,
   usuarios, galería). */
.admin-sel {
    width: 16px;
    height: 16px;
    accent-color: var(--black);
    cursor: pointer;
    flex-shrink: 0;
}
.admin-sel-todos-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.admin-sel-todos { width: 15px; height: 15px; accent-color: var(--black); cursor: pointer; }
.admin-galeria-todos {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    margin-bottom: 10px;
}
/* Celda de nombre/título con su casilla delante */
.admin-titulo-celda {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.admin-lote {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--yellow);
    border: 2px solid var(--black);
    box-shadow: 5px 5px 0 var(--black);
}
.admin-lote[hidden] { display: none; }
.admin-lote-info {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.admin-lote-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
}
.admin-lote .admin-action-btn { background: var(--white); }

/* Rejilla de miniaturas */
.admin-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.admin-galeria-grid .loading { grid-column: 1 / -1; }

.admin-galeria-celda { position: relative; }
.admin-galeria-marca {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: var(--white);
    border: 2px solid var(--black);
}

.admin-galeria-item {
    position: relative;
    /* display/width explícitos: en la biblioteca la miniatura ya no es hija
       directa de la rejilla (va dentro de .admin-galeria-celda, junto a su
       casilla de selección), y un <button> sin esto vuelve a su tamaño
       "de contenido" — cada foto salía de un tamaño distinto. */
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--black);
    background: var(--cream);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.admin-galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-galeria-item:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--black); z-index: 1; }
.admin-galeria-item:focus-visible { outline: 3px solid var(--yellow-deep); outline-offset: 2px; }

/* Aviso "sin texto alternativo" (SEO pendiente), como en WordPress */
.admin-galeria-item[data-sin-alt="1"]::after {
    content: 'ALT';
    position: absolute;
    top: 6px;
    right: 6px;
    background: #fb2789;
    color: var(--white);
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border: 1px solid var(--black);
}
.admin-galeria-item-nombre {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(14,14,14,0.82);
    color: var(--white);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    padding: 5px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.admin-galeria-item:hover .admin-galeria-item-nombre { opacity: 1; }

/* Modal de detalle */
.admin-galeria-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.admin-galeria-modal[hidden] { display: none; }
.admin-galeria-modal-overlay { position: absolute; inset: 0; background: rgba(14,14,14,0.66); }
.admin-galeria-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    max-height: 90vh;
    overflow: auto;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 12px 12px 0 var(--black);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.admin-galeria-modal-media {
    background: #171717;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-right: 3px solid var(--black);
}
.admin-galeria-modal-media img { max-width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.admin-galeria-modal-form { padding: 24px; }
.admin-galeria-modal-form h4 {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 14px;
}
.admin-galeria-modal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px; height: 40px;
    border: 3px solid var(--black);
    background: var(--yellow);
    color: var(--black);
    font-size: 24px;
    font-family: 'Archivo Black', sans-serif;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--black);
    z-index: 2;
}
.admin-galeria-modal-x:hover { background: #fb2789; color: var(--white); }

.admin-galeria-info {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gray-border);
}
.admin-galeria-info > div { display: flex; gap: 10px; font-family: 'Space Mono', monospace; font-size: 12px; }
.admin-galeria-info dt { color: var(--text-muted); min-width: 96px; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-galeria-info dd { color: var(--black); word-break: break-word; }

.admin-galeria-campo { margin-bottom: 14px; }
.admin-galeria-campo label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    color: var(--text);
}
.admin-galeria-campo input[type="text"],
.admin-galeria-campo textarea {
    width: 100%;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 9px 11px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}
.admin-galeria-campo input[type="text"]:focus,
.admin-galeria-campo textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }
.admin-galeria-url-fila { display: flex; gap: 8px; }
.admin-galeria-url-fila input { flex: 1; min-width: 0; }

.admin-galeria-modal-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 720px) {
    .admin-galeria-modal-panel { grid-template-columns: 1fr; }
    .admin-galeria-modal-media { border-right: none; border-bottom: 3px solid var(--black); }
    .admin-galeria-modal-media img { max-height: 40vh; }
}

/* ==========================================================================
   SELECTOR DE IMAGEN REUTILIZABLE (elegir de la galería o subir nueva)
   ========================================================================== */
.imgpick {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.imgpick[hidden] { display: none; }
.imgpick-overlay { position: absolute; inset: 0; background: rgba(14,14,14,0.66); }
.imgpick-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 12px 12px 0 var(--black);
}
.imgpick-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 3px solid var(--black);
}
.imgpick-cab h4 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 15px; }
.imgpick-x {
    width: 34px; height: 34px;
    border: 2px solid var(--black);
    background: var(--yellow);
    color: var(--black);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    font-family: 'Archivo Black', sans-serif;
    cursor: pointer;
}
.imgpick-x:hover { background: #fb2789; color: var(--white); }
.imgpick-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 20px 6px;
}
.imgpick-buscar {
    flex: 1;
    min-width: 160px;
    border: 2px solid var(--black);
    background: var(--white);
    padding: 9px 11px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
}
.imgpick-buscar:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }
.imgpick-estado { padding: 0 20px; }
.imgpick-estado:empty { display: none; }
.imgpick-grid {
    overflow: auto;
    padding: 10px 20px 20px;
    margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    /* Imprescindible: esta rejilla vive dentro de un panel de alto limitado
       (.imgpick-panel, 86vh). Con filas automáticas, el navegador repartía el
       alto disponible entre TODAS las filas en vez de dejarlas a su tamaño y
       hacer scroll: con cientos de imágenes cada fila quedaba en unos pocos
       píxeles y las miniaturas se veían como tiras aplastadas y superpuestas
       (las celdas, cuadradas por aspect-ratio, se salían de su fila). Fijando
       las filas a max-content cada una mide lo que su contenido y lo que
       sobra se desplaza con el scroll del propio panel. align-content: start
       evita además que se estiren cuando hay pocas imágenes. */
    grid-auto-rows: max-content;
    align-content: start;
}
.imgpick-grid .loading { padding: 40px; }

/* ==========================================================================
   PORTADA 3.0 — capa "épica": cortina de entrada, cursor custom, titular
   letra a letra, tilt 3D del póster, barra de progreso, grano de película,
   marquesina reactiva al scroll y stats descifrándose. TODO condicionado a
   html.hm-anim (sin JS o con prefers-reduced-motion, nada de esto existe
   visualmente y la página queda estática y usable).
   ========================================================================== */

/* --- Cortina de entrada -------------------------------------------------- */
.hm-cortina { display: none; }
html.hm-anim .hm-cortina {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--yellow);
    border-bottom: 6px solid var(--black);
    animation: hm-cortina-sube 0.9s cubic-bezier(.76,0,.24,1) 0.55s forwards;
    pointer-events: none;
}
html.hm-anim .hm-cortina-marca {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(28px, 6vw, 72px);
    letter-spacing: 2px;
    color: var(--black);
    animation: hm-cortina-marca 0.5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hm-cortina-marca {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes hm-cortina-sube {
    to { transform: translateY(-101%); visibility: hidden; }
}

/* --- Barra de progreso de lectura ---------------------------------------- */
.hm-progreso { display: none; }
html.hm-anim .hm-progreso {
    display: block;
    position: fixed;
    top: 0; left: 0;
    height: 4px;
    width: 0;
    background: var(--yellow);
    border-right: 3px solid var(--black);
    z-index: 1500;
    pointer-events: none;
    visibility: hidden; /* app.js la enseña en cuanto hay scroll (evita el punto del borde a 0%) */
}

/* --- Grano de película (textura sutil con feTurbulence) ------------------- */
.hm-grano { display: none; }
html.hm-anim .hm-grano {
    display: block;
    position: fixed;
    inset: -60px;
    z-index: 1450;
    pointer-events: none;
    opacity: 0.025; /* muy sutil: a 0.05 ensuciaba los blancos del póster */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: hm-grano-salto 0.9s steps(3) infinite;
}
@keyframes hm-grano-salto {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-25px, 18px); }
    66% { transform: translate(20px, -22px); }
    100% { transform: translate(0, 0); }
}

/* --- Titular letra a letra (spans .hm-ltr creados por app.js) ------------- */
html.hm-anim .hm-ltr {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.55em) rotate(6deg);
    animation: hm-ltr-in 0.75s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: inherit; /* la fija app.js por letra vía style */
}
@keyframes hm-ltr-in {
    to { opacity: 1; transform: none; }
}

/* --- Póster: tilt 3D + brillo que lo recorre ------------------------------ */
html.hm-anim .hm-hero-media { perspective: 1100px; }
html.hm-anim .hm-poster { transform-style: preserve-3d; }
.hm-poster-brillo { display: none; }
html.hm-anim .hm-poster-brillo {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.38) 50%, transparent 58%);
    background-size: 260% 100%;
    background-position: 120% 0;
    animation: hm-brillo-pasa 1.4s ease-out 1.75s both;
}
.hm-poster:hover .hm-poster-brillo { animation: hm-brillo-pasa 0.9s ease-out both; }
@keyframes hm-brillo-pasa {
    from { background-position: 120% 0; }
    to { background-position: -60% 0; }
}

/* --- Título de sección: barrido amarillo al entrar en pantalla ------------ */
.hm-seccion-titulo h2 { position: relative; display: inline-block; }
.hm-seccion-titulo h2::after {
    content: '';
    position: absolute;
    left: -6px; right: -6px;
    bottom: 0.05em;
    height: 0.38em;
    background: var(--yellow);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
}
html.hm-anim .hm-seccion-cab.is-in .hm-seccion-titulo h2::after {
    transition: transform 0.7s cubic-bezier(.16,1,.3,1) 0.25s;
    transform: scaleX(1);
}
html:not(.hm-anim) .hm-seccion-titulo h2::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .hm-cortina, .hm-progreso, .hm-grano, .hm-poster-brillo { display: none !important; }
}

/* ==========================================================================
   CAPA ÉPICA GLOBAL — animaciones compartidas por TODAS las páginas
   (tienda, novedades, blog, quién somos, perfil, pedidos, legales).
   Filosofía idéntica a la portada: revelados al hacer scroll, entradas al
   cargar y microinteracciones, siempre respetando prefers-reduced-motion
   (los bloques de movimiento van dentro de no-preference; sin JS no se
   oculta nada porque .g-oculto solo lo pone app.js).
   ========================================================================== */

/* --- Revelado al hacer scroll (aplicado por inicializarReveladosGlobales):
       app.js solo marca .g-oculto en elementos AÚN por debajo del viewport,
       así nunca hay parpadeo del contenido visible al cargar. --- */
.g-oculto {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.g-oculto.g-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {

    /* --- Entrada de página: el contenido principal funde al cargar (solo
           opacidad: sin transform no se crean containing blocks raros). --- */
    main { animation: g-page-in 0.7s ease both; }
    @keyframes g-page-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* --- Cabeceras de sección (todas las páginas usan .section-title) --- */
    .section-title { animation: g-title-in 0.9s cubic-bezier(.22,1,.36,1) 0.1s both; }
    @keyframes g-title-in {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: none; }
    }

    /* --- Líneas del carrito: pequeña cascada cada vez que se repinta la
           lista (feedback al añadir/quitar productos). --- */
    .cart-item { animation: g-item-in 0.45s cubic-bezier(.22,1,.36,1) both; }
    .cart-item:nth-child(2) { animation-delay: 0.05s; }
    .cart-item:nth-child(3) { animation-delay: 0.10s; }
    .cart-item:nth-child(4) { animation-delay: 0.15s; }
    .cart-item:nth-child(5) { animation-delay: 0.20s; }
    .cart-item:nth-child(n+6) { animation-delay: 0.25s; }
    @keyframes g-item-in {
        from { opacity: 0; transform: translateX(18px); }
        to { opacity: 1; transform: none; }
    }

    /* La línea recién añadida (actualizarUI la marca) cambia la cascada por
       un destello amarillo: se localiza de un vistazo al abrirse el panel.
       Va DESPUÉS de la regla .cart-item para ganarle el animation en cascada. */
    .cart-item.cart-item-nueva { animation: cart-destello 1.2s ease-out both; }
    @keyframes cart-destello {
        0% { background: var(--yellow); box-shadow: 0 0 0 6px var(--yellow); }
        100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
    }
}

/* --- Foto de producto: zoom suave al pasar por la tarjeta (la foto del
       modal comparte .product-img-placeholder, por eso se acota a la card) --- */
.product-card .product-img-placeholder { overflow: hidden; }
.product-card .product-img-placeholder img {
    transition: transform 0.7s cubic-bezier(.22,1,.36,1);
}
.product-card:not(.no-stock):hover .product-img-placeholder img { transform: scale(1.07); }

/* --- Transición entre páginas (inicializarTransicionesPagina): al pulsar un
       enlace interno, el body funde a negro-suave ANTES de navegar y la
       página siguiente entra con el fundido de main (g-page-in). Solo con
       movimiento permitido; pageshow limpia la clase al volver del bfcache. --- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    body { transition: opacity 0.28s ease; }
    html.pagina-saliendo body { opacity: 0; }
}

/* ==========================================================================
   ADAPTACIÓN MÓVIL / TABLET
   La navegación de escritorio se sustituye por un botón hamburguesa + panel
   lateral (los crea inicializarMenuMovil en app.js clonando los enlaces del
   header, así nunca se desincronizan). Además: rejilla de producto a 2
   columnas en el móvil, inputs a 16px (evita el zoom automático de iOS al
   enfocar) y feedback táctil en tarjetas y botones.
   ========================================================================== */

body { -webkit-tap-highlight-color: transparent; }

/* --- Botón hamburguesa (oculto en escritorio; lo inyecta app.js) --- */
.menu-movil-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-left: 10px;
    background: transparent;
    border: 2px solid var(--yellow);
    cursor: pointer;
    flex-shrink: 0;
}
.menu-movil-btn span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--yellow);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.25s ease;
    transform-origin: center;
}
/* Las tres barras se convierten en una X */
.menu-movil-btn.activo span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-movil-btn.activo span:nth-child(2) { opacity: 0; }
.menu-movil-btn.activo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Panel lateral --- */
.menu-movil-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.6);
    backdrop-filter: blur(3px);
    z-index: 240;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.menu-movil-overlay.activo { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }

.menu-movil {
    position: fixed;
    top: 0;
    right: 0;
    width: min(84vw, 360px);
    height: 100vh;
    height: 100dvh; /* barras del navegador móvil */
    background: var(--black);
    border-left: 3px solid var(--yellow);
    z-index: 250;
    padding: 86px 30px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(105%);
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}
.menu-movil.activo { transform: none; }
body.menu-movil-abierto { overflow: hidden; }

.menu-movil-lista { display: flex; flex-direction: column; }

/* Enlaces principales: tipografía grande de cartel, entran en cascada */
.menu-movil-enlace {
    font-family: 'Archivo Black', sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--white);
    text-decoration: none;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.45s cubic-bezier(.22,1,.36,1), transform 0.45s cubic-bezier(.22,1,.36,1), color 0.2s ease;
}
.menu-movil.activo .menu-movil-enlace { opacity: 1; transform: none; }
.menu-movil-enlace:active, .menu-movil-enlace.activo-pagina { color: var(--yellow); }

/* Sub-enlaces (categorías de la tienda) */
.menu-movil-sub {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--out-of-stock);
    text-decoration: none;
    padding: 9px 0 9px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.45s cubic-bezier(.22,1,.36,1), transform 0.45s cubic-bezier(.22,1,.36,1), color 0.2s ease;
}
.menu-movil.activo .menu-movil-sub { opacity: 1; transform: none; }
.menu-movil-sub:active { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
    .menu-movil, .menu-movil-overlay,
    .menu-movil-enlace, .menu-movil-sub, .menu-movil-btn span { transition: none !important; }
    .menu-movil .menu-movil-enlace, .menu-movil .menu-movil-sub { opacity: 1; transform: none; }
}

/* El área de la derecha del header (sesión + hamburguesa) en una sola fila */
.header-actions { display: flex; align-items: center; }

/* --- El header pasa a hamburguesa en tablet/móvil --- */
@media (max-width: 920px) {
    .nav-menu { display: none; }
    .menu-movil-btn { display: inline-flex; }
    .header-container { padding: 14px 16px; }
}

/* Compactación extra para que logo + sesión + hamburguesa quepan en una fila
   en pantallas de móvil estrechas */
@media (max-width: 640px) {
    .logo { font-size: 15px; letter-spacing: 1px; padding-right: 11px; }
    .header-scrolled .logo { font-size: 14px; }
    .menu-movil-btn { width: 40px; height: 40px; margin-left: 8px; }
}

/* --- Móvil: rejilla de tienda a 2 columnas + tipografía compacta --- */
@media (max-width: 640px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .product-title { font-size: 12px; margin-bottom: 8px; }
    .product-price { font-size: 14px; }

    /* iOS hace zoom al enfocar inputs con fuente < 16px: se fuerza 16px en
       los formularios que usa el público (login/registro/checkout). */
    .login-field input,
    .login-modal textarea,
    .login-modal select { font-size: 16px; }

    /* Área de usuario compacta para convivir con la hamburguesa */
    .user-area .cart-btn, .user-area button { padding: 8px 12px; font-size: 11px; }
}

/* --- Feedback táctil: en pantallas sin hover, las tarjetas y botones
       responden al toque con una pequeña presión --- */
@media (pointer: coarse) {
    .product-card:active { transform: scale(0.975); }
    .hm-btn:active, .hm-cat:active, .hm-vertodo:active { transform: scale(0.97); }
    .blog-card:active { transform: scale(0.985); }
}

/* ==========================================================================
   VALORACIONES — estrellas compartidas (tarjetas, ventana de detalle,
   testimonios), reseñas del producto, formulario de valoración y botón de
   "Mis pedidos". Colores de marca: amarillo fosforito sobre negro.
   ========================================================================== */

/* --- Estrellas de solo lectura (media) --- */
.valoracion-estrellas { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.valoracion-estrellas .estrella { font-size: 15px; color: var(--gray-border); position: relative; }
.valoracion-estrellas .estrella-llena { color: #f5b800; }
/* Media estrella: relleno a la izquierda con un pseudo-elemento recortado. */
.valoracion-estrellas .estrella-media { color: var(--gray-border); }
.valoracion-estrellas .estrella-media::before {
    content: '★'; position: absolute; left: 0; top: 0;
    width: 50%; overflow: hidden; color: #f5b800;
}
.valoracion-cuenta { margin-left: 6px; font-size: 12px; color: var(--text-muted); font-family: 'Work Sans', sans-serif; }

/* Estrellas bajo el título en la tarjeta de producto */
.product-valoracion { margin: -2px 0 8px; }

/* --- Estrellas + reseñas en la ventana de detalle del producto --- */
.producto-modal-valoracion {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 0; margin: 0 0 14px; cursor: pointer;
}
.producto-modal-valoracion .estrella { font-size: 18px; }
.producto-modal-valoracion-media { font-family: 'Archivo Black', sans-serif; font-size: 14px; color: var(--text); }
.producto-modal-valoracion:hover { opacity: 0.85; }

.producto-modal-resenas { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--gray-border); }
.producto-modal-resenas-titulo {
    font-family: 'Archivo Black', sans-serif; font-size: 15px; text-transform: uppercase;
    letter-spacing: 0.04em; margin: 0 0 14px;
}
.producto-modal-resenas-resumen { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.producto-modal-resenas-resumen .estrella { font-size: 20px; }
.producto-modal-resenas-media { font-family: 'Archivo Black', sans-serif; font-size: 16px; }
.producto-modal-resenas-vacio { font-size: 14px; color: var(--text-muted); }
.producto-modal-resenas-lista { display: flex; flex-direction: column; gap: 14px; }
.resena {
    background: var(--cream); border: 1px solid var(--gray-border);
    border-radius: 12px; padding: 14px 16px; animation: resenaEntra 0.5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes resenaEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.resena-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.resena-autor { font-weight: 700; font-size: 14px; }
.resena-cab .estrella { font-size: 13px; }
.resena-texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.producto-modal-resenas-cta {
    margin: 14px 0 0; font-size: 13px; color: var(--text-muted);
    background: var(--yellow); border-radius: 10px; padding: 12px 14px;
}
.producto-modal-resenas-cta a { color: var(--black); font-weight: 700; text-decoration: underline; }

/* --- Botón "Valorar producto" en el detalle de "Mis pedidos" --- */
.pedido-valorar-btn {
    margin-top: 8px; align-self: flex-start;
    background: var(--black); color: var(--yellow); border: none;
    font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 12px;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pedido-valorar-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(14,14,10,0.22); }
.pedido-valorar-btn:active { transform: scale(0.96); }

/* --- Formulario de valoración (modal) --- */
.valoracion-overlay {
    position: fixed; inset: 0; z-index: 2600;
    background: rgba(14,14,10,0.62); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease;
}
.valoracion-overlay.active { opacity: 1; visibility: visible; }
.valoracion-modal {
    position: relative; background: var(--white); border-radius: 20px;
    width: 100%; max-width: 440px; padding: 34px 30px 30px;
    box-shadow: 0 24px 60px rgba(14,14,10,0.32);
    transform: translateY(24px) scale(0.96); transition: transform 0.34s cubic-bezier(.22,1,.36,1);
}
.valoracion-overlay.active .valoracion-modal { transform: none; }
.valoracion-selector { display: flex; justify-content: center; gap: 6px; margin: 8px 0 18px; }
.valoracion-estrella-btn {
    background: none; border: none; cursor: pointer; padding: 2px;
    font-size: 40px; line-height: 1; color: var(--gray-border);
    transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), color 0.15s ease;
}
.valoracion-estrella-btn.activa { color: #f5b800; transform: scale(1.12); }
.valoracion-estrella-btn:hover { transform: scale(1.22); }
.valoracion-comentario {
    width: 100%; border: 2px solid var(--gray-border); border-radius: 12px;
    padding: 12px 14px; font-family: 'Work Sans', sans-serif; font-size: 15px;
    resize: vertical; transition: border-color 0.2s ease;
}
.valoracion-comentario:focus { outline: none; border-color: var(--black); }
.valoracion-modal .login-submit-btn { margin-top: 16px; }
.valoracion-gracias { text-align: center; padding: 20px 0; animation: resenaEntra 0.5s ease both; }
.valoracion-gracias-icono { font-size: 52px; display: block; margin-bottom: 10px; animation: valoracionPop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
.valoracion-gracias h3 { font-family: 'Archivo Black', sans-serif; margin: 0 0 6px; }
.valoracion-gracias p { margin: 0; color: var(--text-muted); }
@keyframes valoracionPop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ==========================================================================
   TESTIMONIOS — sección de reseñas de clientes en la portada
   ========================================================================== */
.hm-testimonios-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.hm-testimonio {
    position: relative; background: var(--white);
    border: 2px solid var(--black); border-radius: 18px;
    padding: 30px 26px 26px; margin: 0;
    box-shadow: 6px 6px 0 var(--black);
    display: flex; flex-direction: column; gap: 12px;
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
.hm-testimonio:hover { transform: translate(-3px, -4px); box-shadow: 10px 12px 0 var(--yellow-deep); }
.hm-testimonio-comillas {
    position: absolute; top: 6px; right: 18px;
    font-family: 'Archivo Black', sans-serif; font-size: 90px; line-height: 1;
    color: var(--yellow); z-index: 0; pointer-events: none; user-select: none;
}
.hm-testimonio .valoracion-estrellas,
.hm-testimonio-texto,
.hm-testimonio-autor { position: relative; z-index: 1; }
.hm-testimonio .valoracion-estrellas .estrella { font-size: 17px; }
.hm-testimonio-texto {
    margin: 0; font-size: 16px; line-height: 1.6; color: var(--text);
    font-style: normal; flex-grow: 1;
}
.hm-testimonio-autor { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; margin-top: 4px; }
.hm-testimonio-avatar {
    grid-row: span 2; width: 44px; height: 44px; border-radius: 50%;
    background: var(--black); color: var(--yellow);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Archivo Black', sans-serif; font-size: 18px;
}
.hm-testimonio-nombre { font-weight: 700; font-size: 15px; color: var(--text); }
.hm-testimonio-fuente { font-size: 12px; color: var(--text-muted); }

/* Entrada escalonada de las tarjetas cuando la rejilla entra en pantalla.
   La rejilla NO se mueve ni se desvanece por su cuenta (se neutraliza su
   data-reveal): así su transform no se "suma" al de las tarjetas y la entrada
   queda limpia. Toda la animación la hacen las tarjetas, una a una, con una
   animación por keyframes (no transición) para que su estado final NO fije el
   transform y el efecto hover siga funcionando después. */
html.hm-anim .hm-testimonios-grid[data-reveal],
html.hm-anim .hm-galeria-grid[data-reveal] {
    opacity: 1;
    transform: none;
    will-change: auto;
}
/* Ocultas hasta que la rejilla entra en pantalla (la clase .is-in la pone el
   observador de revelado compartido). */
html.hm-anim .hm-testimonios-grid:not(.is-in) .hm-testimonio,
html.hm-anim .hm-galeria-grid:not(.is-in) .hm-galeria-item {
    opacity: 0;
}
html.hm-anim .hm-testimonios-grid.is-in .hm-testimonio,
html.hm-anim .hm-galeria-grid.is-in .hm-galeria-item {
    /* 'backwards' mantiene el estado inicial durante el retardo del escalonado;
       sin 'forwards', al terminar la tarjeta vuelve a su estilo normal (opacidad
       1, sin transform) y el hover puede volver a mover la tarjeta. */
    animation: hmCardIn 0.7s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 0.09s);
}
@keyframes hmCardIn {
    from { opacity: 0; transform: translateY(32px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   GALERÍA DE LA TIENDA — rejilla tipo mosaico en la portada + visor (lightbox)
   ========================================================================== */
.hm-galeria-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 220px; gap: 14px;
}
/* La primera foto ocupa 2×2 para dar ritmo al mosaico. */
.hm-galeria-item:first-child { grid-column: span 2; grid-row: span 2; }
.hm-galeria-item {
    position: relative; overflow: hidden; border-radius: 16px;
    border: none; padding: 0; cursor: pointer; background: var(--gray-border);
    box-shadow: 0 4px 16px rgba(14,14,10,0.08);
}
.hm-galeria-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}
.hm-galeria-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(14,14,10,0.55), transparent 45%);
    opacity: 0; transition: opacity 0.35s ease;
}
.hm-galeria-item:hover img { transform: scale(1.08); }
.hm-galeria-item:hover::after { opacity: 1; }
.hm-galeria-pie {
    position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
    color: var(--white); font-size: 13px; font-weight: 600;
    transform: translateY(8px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.hm-galeria-item:hover .hm-galeria-pie { transform: none; opacity: 1; }

/* Visor a pantalla completa */
.galeria-lightbox {
    position: fixed; inset: 0; z-index: 2700;
    background: rgba(8,8,6,0.92); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 40px;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.galeria-lightbox.active { opacity: 1; visibility: visible; }
.galeria-lightbox-figura {
    margin: 0; max-width: 90vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 12px;
    transform: scale(0.94); transition: transform 0.34s cubic-bezier(.22,1,.36,1);
}
.galeria-lightbox.active .galeria-lightbox-figura { transform: none; }
.galeria-lightbox-figura img {
    max-width: 100%; max-height: 78vh; object-fit: contain;
    border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.galeria-lightbox-figura figcaption { color: var(--white); font-size: 14px; text-align: center; }
.galeria-lightbox-cerrar {
    position: absolute; top: 20px; right: 24px; z-index: 2;
    background: none; border: none; color: var(--white); font-size: 40px; line-height: 1; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%; transition: background 0.2s ease;
}
.galeria-lightbox-cerrar:hover { background: rgba(255,255,255,0.15); }
.galeria-lightbox-nav {
    background: rgba(255,255,255,0.12); border: none; color: var(--white);
    font-size: 34px; line-height: 1; width: 56px; height: 56px; border-radius: 50%;
    cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease;
}
.galeria-lightbox-nav:hover { background: var(--yellow); color: var(--black); transform: scale(1.08); }
.galeria-lightbox-prev { position: absolute; left: 24px; }
.galeria-lightbox-next { position: absolute; right: 24px; }

/* ==========================================================================
   UBICACIÓN / MAPA de la tienda física
   ========================================================================== */
.hm-ubicacion-panel {
    display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 0;
    border: 2px solid var(--black); border-radius: 22px; overflow: hidden;
    box-shadow: 8px 8px 0 var(--black); background: var(--white);
}
.hm-ubicacion-info { padding: 40px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hm-ubicacion-nombre { font-family: 'Archivo Black', sans-serif; font-size: 22px; margin: 0; }
.hm-ubicacion-dir { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--text); margin: 4px 0 14px; }
.hm-ubicacion-datos { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.hm-ubicacion-datos li { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.hm-ubicacion-datos a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.hm-ubicacion-datos a:hover { border-color: var(--black); }
.hm-ubicacion-mapa { position: relative; min-height: 340px; background: var(--cream); }
.hm-ubicacion-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hm-ubicacion-mapa-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 54px; opacity: 0.35;
}
.hm-ubicacion-mapa.cargado .hm-ubicacion-mapa-ph { display: none; }

/* --- Responsive de las tres secciones nuevas --- */
@media (max-width: 860px) {
    .hm-ubicacion-panel { grid-template-columns: 1fr; box-shadow: 5px 5px 0 var(--black); }
    .hm-ubicacion-info { padding: 30px 26px; }
    .hm-ubicacion-mapa { min-height: 300px; }
    .hm-galeria-item:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 620px) {
    .hm-galeria-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
    .hm-galeria-item:first-child { grid-column: span 2; grid-row: span 1; }
    .galeria-lightbox { padding: 16px; }
    .galeria-lightbox-prev { left: 8px; }
    .galeria-lightbox-next { right: 8px; }
    .galeria-lightbox-nav { width: 46px; height: 46px; font-size: 28px; }
    .valoracion-estrella-btn { font-size: 34px; }
}

/* Movimiento reducido: sin transiciones ni animaciones "vivas" en lo nuevo;
   las tarjetas se muestran directamente (sin escalonado). */
@media (prefers-reduced-motion: reduce) {
    .hm-testimonio, .hm-galeria-item img, .valoracion-estrella-btn,
    .galeria-lightbox-figura, .valoracion-modal { transition: none !important; }
    .hm-galeria-item:hover img { transform: none; }
    html.hm-anim .hm-testimonios-grid .hm-testimonio,
    html.hm-anim .hm-galeria-grid .hm-galeria-item {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN — testimonios y galería de la portada
   ========================================================================== */

/* Botón de reordenar (flechas), compartido por testimonios y galería */
.admin-orden-btn {
    background: var(--white); border: 1px solid var(--gray-border); border-radius: 8px;
    width: 30px; height: 28px; cursor: pointer; font-size: 12px; color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-orden-btn:hover:not(:disabled) { background: var(--yellow); border-color: var(--black); }
.admin-orden-btn:disabled { opacity: 0.35; cursor: default; }

/* --- Lista de testimonios en el panel --- */
.admin-testimonios-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.admin-testimonio-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
    background: var(--cream); border: 1px solid var(--gray-border); border-radius: 12px; padding: 14px 16px;
}
.admin-testimonio-item-orden { display: flex; flex-direction: column; gap: 4px; }
.admin-testimonio-item-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.admin-testimonio-item-estrellas { color: #f5b800; font-size: 14px; letter-spacing: 1px; }
.admin-testimonio-item-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.admin-testimonio-item-acciones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.admin-testimonio-item-acciones button { padding: 6px 12px; font-size: 12px; }
.admin-galeria-inicio-vacio { font-size: 14px; color: var(--text-muted); padding: 8px 2px; margin: 0; }
.admin-testimonio-form { margin-top: 6px; }

/* --- Rejilla de la galería de la portada en el panel --- */
.admin-galeria-inicio-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px;
}
.admin-galeria-inicio-item {
    position: relative; margin: 0; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--gray-border); aspect-ratio: 1 / 1; background: var(--cream);
}
.admin-galeria-inicio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-galeria-inicio-acciones {
    position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between;
    gap: 4px; padding: 6px; background: linear-gradient(to top, rgba(14,14,10,0.75), transparent);
}
.admin-galeria-inicio-acciones .admin-orden-btn { width: 26px; height: 26px; }
.admin-galeria-inicio-borrar {
    background: rgba(255,255,255,0.92); color: #c0392b; border: none; border-radius: 8px;
    width: 26px; height: 26px; cursor: pointer; font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.admin-galeria-inicio-borrar:hover { background: #c0392b; color: var(--white); }

@media (max-width: 620px) {
    .admin-testimonio-item { grid-template-columns: auto 1fr; }
    .admin-testimonio-item-acciones { grid-column: 1 / -1; flex-direction: row; }
}