/* =========================================================
   RouzethStyle · hoja de estilo de la tienda
   ---------------------------------------------------------
   Sale del <style> gigante que vivía dentro de index.php.
   Al estar en un archivo aparte el navegador la guarda en
   caché y la portada deja de pesar 44 KB en cada visita.

   Orden del archivo:
     1. Variables      2. Base
     3. Barra y cabecera   4. Buscador
     5. Filtros        6. Catálogo y tarjetas
     7. Esqueletos y vacíos
     8. Ficha del producto
     9. Bolsa de compra
    10. Avisos         11. Confianza y pie
    12. Móvil          13. Movimiento reducido
   ========================================================= */

/* =========================================================
   1. VARIABLES
   ========================================================= */
:root {
    /* Lila de la marca */
    --violeta-900: #241633;
    --violeta-800: #33224a;
    --violeta-700: #4d3373;
    --violeta-600: #6c4bb0;
    --violeta-500: #8a68d1;
    --lila-400:    #a98fe0;
    --lila-300:    #c6b3ec;
    --lila-200:    #e2d6f6;
    --lila-100:    #f0e9fa;
    --lila-50:     #f8f4fd;

    --crema:       #faf7f3;
    --blanco:      #ffffff;
    --tinta:       #2c2338;
    --gris:        #8b8496;
    --gris-suave:  #b9b3c4;
    --linea:       #eee7f6;

    --rosa:        #d6437e;   /* un solo acento, para ofertas */
    --verde:       #2f9e6b;   /* disponibilidad */
    --ambar:       #c98a1a;   /* últimas unidades */

    --sombra-suave: 0 18px 40px -24px rgba(76, 51, 115, 0.45);
    --sombra-card:  0 24px 50px -30px rgba(76, 51, 115, 0.55);
    --sombra-alta:  0 40px 90px -40px rgba(36, 22, 51, 0.55);

    --radio-xl: 30px;
    --radio-lg: 22px;
    --radio-md: 16px;
    --radio-sm: 10px;

    /* Alto mínimo de la cabecera, fijo. */
    --cabecera-min: 74px;
    /* Alto REAL de la cabecera. Lo escribe el JavaScript y lo usa la barra
       de filtros para pegarse justo debajo. No se usa en la cabecera misma:
       se realimentaría y nunca volvería a encogerse. */
    --alto-cabecera: 74px;

    /* Una sola curva para todo: el movimiento se siente del mismo material */
    --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   2. BASE
   ========================================================= */
* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Al abrir la bolsa se bloquea el fondo; reservar la barra
       evita que la página salte de ancho en ese momento. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--tinta);
    background-color: var(--crema);
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(138, 104, 209, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 0%, rgba(214, 67, 126, 0.06), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.sin-scroll { overflow: hidden; }

::selection { background: var(--lila-300); color: var(--violeta-900); }

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* Un foco visible y propio de la marca, en lugar del azul del navegador */
:focus-visible {
    outline: 2px solid var(--violeta-500);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Para lectores de pantalla: presente en el documento, fuera de la vista */
.solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto al contenido: el primer elemento enfocable de la página */
.salto-contenido {
    position: fixed; top: 10px; left: 50%;
    transform: translate(-50%, -200%);
    z-index: 200;
    background: var(--violeta-700); color: #fff;
    padding: 10px 20px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 500;
    transition: transform .25s var(--curva);
}
.salto-contenido:focus { transform: translate(-50%, 0); }

.grano {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

.contenedor { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Aparición al entrar en pantalla */
.revelar {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s var(--curva), transform .6s var(--curva);
}
.revelar.visible { opacity: 1; transform: none; }

/* =========================================================
   3. BARRA SUPERIOR Y CABECERA
   ========================================================= */
.top-bar {
    position: relative; z-index: 5;
    display: flex; justify-content: center; align-items: center;
    gap: 10px; padding: 9px 26px;
    font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--violeta-700);
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid var(--linea);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.top-bar .punto { color: var(--lila-300); }
.top-bar b { font-weight: 600; }

.site-header {
    position: sticky; top: 0; z-index: 30;
    background: rgba(250, 247, 243, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linea);
    transition: box-shadow .3s var(--curva), background .3s var(--curva);
}
/* Al bajar, la cabecera se apoya sobre el contenido */
.site-header.flotando {
    box-shadow: 0 10px 30px -22px rgba(76, 51, 115, 0.5);
    background: rgba(250, 247, 243, 0.95);
}

.header-inner {
    max-width: 1240px; margin: 0 auto;
    min-height: var(--cabecera-min);
    padding: 12px 24px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
}

.marca { display: flex; flex-direction: column; line-height: 1; }
.marca .nombre {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem; font-weight: 600;
    color: var(--violeta-800); letter-spacing: -0.01em;
}
.marca .nombre em { font-style: italic; font-weight: 400; color: var(--violeta-600); }
.marca .lema {
    font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gris-suave); margin-top: 5px;
}

/* --- Acciones de la derecha: favoritos, bolsa, panel --- */
.acciones-cabecera { display: flex; align-items: center; gap: 6px; }

.btn-icono {
    position: relative;
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;           /* 44 px: la medida mínima cómoda al tacto */
    border: 0; background: transparent;
    border-radius: 50%;
    color: var(--violeta-700);
    cursor: pointer;
    transition: background .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}
.btn-icono svg { width: 21px; height: 21px; }
.btn-icono:hover { background: var(--lila-100); transform: translateY(-1px); }
.btn-icono:active { transform: translateY(0) scale(0.95); }

/* Contador: nace pequeño y crece al cambiar, para que se note */
.btn-icono .contador {
    position: absolute; top: 4px; right: 3px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    background: var(--rosa); color: #fff;
    font-size: 0.65rem; font-weight: 600; line-height: 1;
    border-radius: 999px;
    border: 2px solid var(--crema);
    transform: scale(0);
    transition: transform .3s var(--curva);
}
.btn-icono .contador.visible { transform: scale(1); }
.btn-icono .contador.late { animation: late .4s var(--curva); }
@keyframes late {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* El botón de buscar solo tiene sentido en el móvil: en escritorio
   el buscador está siempre a la vista. */
.solo-movil { display: none; }

.acceso-admin { color: var(--gris-suave); }
.acceso-admin svg { width: 16px; height: 16px; }
.acceso-admin:hover { color: var(--violeta-600); }

/* =========================================================
   4. BUSCADOR
   ========================================================= */
.buscador {
    position: relative;
    display: flex; align-items: center;
    max-width: 440px; width: 100%;
    margin: 0 auto;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: 0 6px 0 16px;
    transition: border-color .25s var(--curva), box-shadow .25s var(--curva);
}
.buscador:focus-within {
    border-color: var(--lila-300);
    box-shadow: 0 0 0 4px var(--lila-50);
}
.buscador .lupa { width: 17px; height: 17px; color: var(--gris-suave); flex: none; }
.buscador input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: 12px 10px;
    font-family: inherit;
    font-size: 16px;            /* menos de 16 px y el iPhone hace zoom al escribir */
    color: var(--tinta);
}
.buscador input::placeholder { color: var(--gris-suave); }

/* Chrome y Safari ponen su propia X en los campos de búsqueda, y salía
   junto a la nuestra: dos cruces seguidas. Se quita la del navegador y
   se deja la del sitio, que además vacía el filtro al pulsarla. */
.buscador input::-webkit-search-cancel-button,
.buscador input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.btn-limpiar {
    display: none;
    width: 30px; height: 30px; flex: none;
    place-items: center;
    border: 0; background: var(--lila-100); color: var(--violeta-600);
    border-radius: 50%; cursor: pointer;
    transition: background .2s var(--curva);
}
.btn-limpiar.visible { display: grid; }
.btn-limpiar:hover { background: var(--lila-200); }
.btn-limpiar svg { width: 13px; height: 13px; }

/* =========================================================
   5. FILTROS
   ========================================================= */
.barra-filtros {
    position: sticky; top: var(--alto-cabecera); z-index: 20;
    background: rgba(250, 247, 243, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linea);
    padding: 12px 0;
}
.filtros-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 16px;
}

/* La fila de categorías se desplaza de lado y el borde se desvanece,
   para que se entienda que hay más a la derecha. */
.carril {
    position: relative; flex: 1; min-width: 0;
}
.carril::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    background: linear-gradient(to right, transparent, var(--crema));
    pointer-events: none; opacity: 0;
    transition: opacity .25s var(--curva);
}
.carril.hay-mas::after { opacity: 1; }

.chips {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px 0;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    padding: 9px 18px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    border-radius: 999px;
    font-size: 0.84rem; font-weight: 500;
    color: var(--violeta-700);
    cursor: pointer; white-space: nowrap;
    transition: all .22s var(--curva);
}
.chip:hover { border-color: var(--lila-300); background: var(--lila-50); }
.chip.activo {
    background: var(--violeta-600); border-color: var(--violeta-600);
    color: #fff;
    box-shadow: 0 10px 22px -14px var(--violeta-600);
}

.herramientas { display: flex; align-items: center; gap: 8px; flex: none; }

/* Interruptores: ofertas, disponibles, favoritos */
.interruptor {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    border-radius: 999px;
    font-size: 0.8rem; font-weight: 500;
    color: var(--violeta-700);
    cursor: pointer;
    transition: all .22s var(--curva);
}
.interruptor svg { width: 15px; height: 15px; }
.interruptor:hover { border-color: var(--lila-300); }
.interruptor[aria-pressed="true"] {
    background: var(--lila-100); border-color: var(--lila-300);
    color: var(--violeta-700);
}
.interruptor[aria-pressed="true"].oferta {
    background: #fdeef4; border-color: #f3c4d8; color: var(--rosa);
}
.interruptor[aria-pressed="true"].favorito {
    background: #fdeef4; border-color: #f3c4d8; color: var(--rosa);
}
.interruptor[aria-pressed="true"].favorito svg { fill: currentColor; }

.orden {
    appearance: none;
    padding: 9px 34px 9px 15px;
    border: 1px solid var(--linea);
    background: var(--blanco)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4bb0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 12px center / 14px;
    border-radius: 999px;
    font-family: inherit; font-size: 0.8rem; font-weight: 500;
    color: var(--violeta-700);
    cursor: pointer;
    transition: border-color .22s var(--curva);
}
.orden:hover { border-color: var(--lila-300); }

/* Resumen de resultados y filtros puestos */
.resumen {
    max-width: 1240px; margin: 0 auto;
    padding: 18px 24px 0;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    font-size: 0.85rem; color: var(--gris);
}
.resumen .cuenta { font-weight: 600; color: var(--violeta-700); }
.resumen .quitar {
    border: 0; background: none; padding: 0;
    color: var(--violeta-600); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; text-decoration: underline;
    text-decoration-color: var(--lila-300);
    text-underline-offset: 3px;
}
.resumen .quitar:hover { color: var(--rosa); }

/* =========================================================
   6. CATÁLOGO Y TARJETAS
   ========================================================= */
.catalogo { position: relative; z-index: 2; padding: 20px 0 70px; }

.grid-productos {
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px 24px;
}

#zonaCatalogo { transition: opacity .2s var(--curva); }
#zonaCatalogo.cargando { opacity: 0.4; pointer-events: none; }

.card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    overflow: hidden;
    transition: transform .35s var(--curva), box-shadow .35s var(--curva),
                border-color .35s var(--curva);
}
.card:hover {
    transform: translateY(-5px);
    border-color: var(--lila-200);
    box-shadow: var(--sombra-card);
}
.card.agotado { opacity: 0.72; }
.card.agotado:hover { transform: none; }

/* --- Foto --- */
.card-media {
    position: relative;
    aspect-ratio: 3 / 4;              /* reservado: la página no salta al cargar */
    background: var(--lila-50);
    overflow: hidden;
    cursor: pointer;
    border: 0; padding: 0; width: 100%;
    display: block;
}
.card-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .5s var(--curva), transform .7s var(--curva);
}
.card-media .segunda { opacity: 0; }
/* La segunda foto del producto al pasar el ratón: se ve la prenda puesta
   sin tener que abrir la ficha. */
@media (hover: hover) {
    /* El cambio de foto solo donde hay una segunda. Las prendas con una
       sola foto se limitan al acercamiento: antes se quedaban en blanco. */
    .card:hover .card-media.con-doble .primera { opacity: 0; }
    .card:hover .card-media.con-doble .segunda { opacity: 1; }
    .card:hover .card-media img { transform: scale(1.04); }
}
.card.agotado .card-media img { filter: grayscale(0.55); }

/* --- Etiquetas --- */
.etiquetas {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.etiqueta {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* La etiqueta de oferta es la única que se mueve en toda la página.
   Un brillo que la recorre cada pocos segundos: llama la atención de
   lejos sin parpadear ni dar saltos, que cansan enseguida cuando hay
   sesenta tarjetas en pantalla. Quien pide menos movimiento en su
   sistema la ve quieta (ver el final del archivo). */
.etiqueta.oferta {
    display: inline-flex; align-items: center; gap: 5px;
    padding-left: 9px;
    color: #fff;
    background: linear-gradient(100deg,
        #c7376f 0%, #d6437e 32%, #f07fab 50%, #d6437e 68%, #c7376f 100%);
    background-size: 280% 100%;
    box-shadow: 0 7px 18px -7px rgba(214, 67, 126, 0.85);
    animation: brilloOferta 3.4s ease-in-out infinite;
}
.etiqueta.oferta svg { width: 12px; height: 12px; flex: none; }

@keyframes brilloOferta {
    0%, 12%   { background-position: 115% 0; }
    48%, 100% { background-position: -15% 0; }
}
.etiqueta.agotada { background: rgba(44, 35, 56, 0.82); color: #fff; }
.etiqueta.ultima  { background: rgba(255, 248, 230, 0.92); color: var(--ambar); }
.etiqueta.nueva   { background: rgba(255,255,255,0.92); color: var(--violeta-700); }

/* --- Corazón --- */
.btn-corazon {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--gris);
    cursor: pointer;
    box-shadow: 0 4px 14px -8px rgba(36, 22, 51, 0.5);
    transition: transform .25s var(--curva), color .25s var(--curva), background .25s var(--curva);
}
.btn-corazon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
/* El botón se ve de 38 px pero se toca en 44: lo cómodo con el dedo
   sin que el corazón quede enorme sobre la foto. */
.btn-corazon::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
.btn-corazon:hover { transform: scale(1.1); color: var(--rosa); }
.btn-corazon[aria-pressed="true"] { color: var(--rosa); }
.btn-corazon[aria-pressed="true"] svg { fill: currentColor; animation: late .4s var(--curva); }

/* --- Datos --- */
.card-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

.card-cat {
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--lila-400); font-weight: 500;
}
.card-nombre {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-size: 1.04rem; font-weight: 500; line-height: 1.3;
    color: var(--violeta-900);
    /* Dos líneas como máximo: todas las tarjetas miden igual */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-precio { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.precio { font-size: 1.12rem; font-weight: 600; color: var(--violeta-700); }
.precio-tachado { font-size: 0.86rem; color: var(--gris-suave); text-decoration: line-through; }
.precio-oferta  { font-size: 1.12rem; font-weight: 700; color: var(--rosa); }
.ahorro {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 600;
    background: #fdeef4; color: var(--rosa);
    border: 1px solid #f6cdde;
    padding: 5px 11px; border-radius: 999px;
}
.ahorro svg { width: 13px; height: 13px; }

.card-tallas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.talla-dot {
    min-width: 27px; padding: 4px 7px;
    text-align: center;
    border: 1px solid var(--linea);
    border-radius: 7px;
    font-size: 0.7rem; font-weight: 500;
    color: var(--violeta-700);
    background: var(--lila-50);
}
.talla-dot.agot {
    color: var(--gris-suave); background: transparent;
    text-decoration: line-through;
}
.sin-stock { font-size: 0.76rem; color: var(--gris-suave); }

/* --- Añadir sin abrir la ficha --- */
.card-anadir { margin-top: 12px; }
.btn-anadir {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 14px;
    border: 1px solid var(--lila-200);
    background: var(--lila-50);
    color: var(--violeta-700);
    border-radius: var(--radio-sm);
    font-size: 0.83rem; font-weight: 500;
    cursor: pointer;
    transition: all .22s var(--curva);
}
.btn-anadir svg { width: 15px; height: 15px; }
.btn-anadir:hover {
    background: var(--violeta-600); border-color: var(--violeta-600); color: #fff;
}
/* El instante de confirmación tras añadir desde la tarjeta */
.btn-anadir.confirmado,
.btn-anadir.confirmado:hover {
    background: var(--verde); border-color: var(--verde); color: #fff;
}

/* Las tallas se despliegan dentro de la tarjeta: añadir sin perder el sitio.
   El alto lo pone el JavaScript midiendo el contenido. Se usa max-height
   y no el truco de grid-template-rows de 0fr a 1fr porque ese necesita
   Safari 16 o superior, y aquí entran iPhones más antiguos. */
.tallas-rapidas {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s var(--curva), opacity .25s var(--curva);
}
.card.eligiendo .tallas-rapidas { opacity: 1; }
.card.eligiendo .btn-anadir { display: none; }

.rapidas-titulo {
    font-size: 0.72rem; color: var(--gris);
    margin: 0 0 7px; text-align: center;
}
.rapidas-lista { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rapidas-lista button {
    min-width: 38px; padding: 8px 10px;
    border: 1px solid var(--lila-200);
    background: var(--blanco);
    border-radius: 8px;
    font-size: 0.8rem; font-weight: 500;
    color: var(--violeta-700);
    cursor: pointer;
    transition: all .18s var(--curva);
}
.rapidas-lista button:hover {
    background: var(--violeta-600); border-color: var(--violeta-600); color: #fff;
}
.rapidas-lista button:disabled {
    color: var(--gris-suave); background: var(--lila-50);
    text-decoration: line-through; cursor: not-allowed;
}

/* =========================================================
   7. ESQUELETOS Y ESTADOS VACÍOS
   ========================================================= */
.esqueleto {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    overflow: hidden;
}
.esqueleto .falso-foto { aspect-ratio: 3 / 4; }
.esqueleto .falso-texto { padding: 16px 18px 20px; display: grid; gap: 10px; }
.esqueleto .barra { height: 11px; border-radius: 6px; }
.esqueleto .barra.corta { width: 40%; }
.esqueleto .barra.media { width: 72%; }
.esqueleto .falso-foto,
.esqueleto .barra {
    background: linear-gradient(100deg, var(--lila-50) 20%, var(--lila-100) 40%, var(--lila-50) 60%);
    background-size: 240% 100%;
    animation: brillo 1.4s linear infinite;
}
@keyframes brillo {
    from { background-position: 180% 0; }
    to   { background-position: -60% 0; }
}

.vacio {
    max-width: 440px;
    margin: 70px auto;
    text-align: center;
    color: var(--gris);
}
.vacio .icono {
    width: 68px; height: 68px; margin: 0 auto 18px;
    display: grid; place-items: center;
    background: var(--lila-50); border-radius: 50%;
    color: var(--lila-400);
}
.vacio .icono svg { width: 30px; height: 30px; }
.vacio h3 {
    margin: 0 0 8px;
    font-family: 'Fraunces', serif; font-size: 1.22rem; font-weight: 500;
    color: var(--violeta-800);
}
.vacio p { margin: 0 0 20px; font-size: 0.92rem; line-height: 1.6; }
.vacio .btn-vacio {
    display: inline-block;
    padding: 11px 24px;
    background: var(--violeta-600); color: #fff;
    border: 0; border-radius: 999px;
    font-size: 0.86rem; font-weight: 500; cursor: pointer;
    transition: all .22s var(--curva);
}
.vacio .btn-vacio:hover { background: var(--violeta-700); transform: translateY(-2px); }

/* =========================================================
   8. FICHA DEL PRODUCTO
   ========================================================= */
.ficha-fondo {
    position: fixed; inset: 0; z-index: 100;
    display: none;
    background: rgba(36, 22, 51, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .3s var(--curva);
}
.ficha-fondo.abierta { display: block; opacity: 1; }

.ficha {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    width: min(1040px, calc(100vw - 48px));
    max-height: calc(100vh - 64px);
    background: var(--blanco);
    border-radius: var(--radio-xl);
    overflow: hidden;
    box-shadow: var(--sombra-alta);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    opacity: 0;
    transition: transform .35s var(--curva), opacity .3s var(--curva);
}
.ficha-fondo.abierta .ficha { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* El asa solo existe en el móvil, donde la ficha es una hoja inferior.
   Va posicionada, no como celda de la rejilla: así la ficha tiene
   siempre las mismas dos filas, foto y datos, y se pueden repartir. */
.ficha-asa {
    display: none;
    position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    background: var(--lila-300); border-radius: 999px;
    z-index: 5;
}

.ficha-cerrar {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--violeta-800);
    cursor: pointer;
    box-shadow: 0 6px 18px -10px rgba(36, 22, 51, 0.6);
    transition: transform .2s var(--curva), background .2s var(--curva);
}
.ficha-cerrar svg { width: 16px; height: 16px; }
.ficha-cerrar:hover { transform: rotate(90deg); background: #fff; }

/* --- Galería --- */
.galeria { position: relative; background: var(--lila-50); display: flex; flex-direction: column; }
.galeria-marco {
    position: relative; flex: 1;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    min-height: 0;
}
.galeria-marco .lamina {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--curva);
}
.galeria-marco .lamina.activa { opacity: 1; pointer-events: auto; }
.galeria-marco img.lamina { cursor: zoom-in; }

.galeria-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 4;
    width: 40px; height: 40px;
    display: none; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--violeta-800); cursor: pointer;
    box-shadow: 0 6px 18px -10px rgba(36, 22, 51, 0.6);
    transition: background .2s var(--curva), transform .2s var(--curva);
}
.galeria-flecha svg { width: 16px; height: 16px; }
.galeria-flecha.visible { display: grid; }
.galeria-flecha:hover { background: #fff; }
.galeria-flecha.atras    { left: 14px; }
.galeria-flecha.adelante { right: 14px; }

/* Puntos: en el móvil dicen cuántas fotos hay y en cuál vas */
.galeria-puntos {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    z-index: 4;
    display: none; gap: 6px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
}
.galeria-puntos.visible { display: flex; }
.galeria-puntos button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--lila-300); cursor: pointer;
    transition: all .25s var(--curva);
}
.galeria-puntos button.activo { background: var(--violeta-600); width: 20px; border-radius: 999px; }

.galeria-tiras {
    display: flex; gap: 8px;
    padding: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--blanco);
    border-top: 1px solid var(--linea);
}
.galeria-tiras::-webkit-scrollbar { display: none; }
.galeria-tiras:empty { display: none; }
.galeria-tiras button {
    flex: none;
    width: 54px; height: 70px;
    padding: 0; overflow: hidden;
    border: 2px solid transparent;
    border-radius: 9px;
    background: var(--lila-50);
    cursor: pointer;
    transition: border-color .2s var(--curva), transform .2s var(--curva);
}
.galeria-tiras button img { width: 100%; height: 100%; object-fit: cover; }
.galeria-tiras button:hover { transform: translateY(-2px); }
.galeria-tiras button.activo { border-color: var(--violeta-600); }

/* --- Datos del producto --- */
.ficha-datos {
    padding: 34px 34px 30px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 16px;
}
.ficha-cat {
    font-size: 0.68rem; letter-spacing: 0.17em; text-transform: uppercase;
    color: var(--lila-400); font-weight: 500;
}
.ficha-titulo {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-size: 1.72rem; font-weight: 500; line-height: 1.22;
    color: var(--violeta-900);
}
.ficha-precio { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.ficha-precio .precio,
.ficha-precio .precio-oferta { font-size: 1.6rem; }

.ficha-desc {
    margin: 0;
    font-size: 0.92rem; line-height: 1.68; color: var(--gris);
    white-space: pre-line;
}

.ficha-sep { height: 1px; background: var(--linea); border: 0; margin: 2px 0; }

.ficha-etiqueta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--violeta-700); font-weight: 600;
}
.ficha-etiqueta .ayuda {
    border: 0; background: none; padding: 0;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0;
    text-transform: none;
    color: var(--violeta-600); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--lila-300);
    text-underline-offset: 3px;
}
.ficha-etiqueta .ayuda:hover { color: var(--rosa); }

.ficha-tallas { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla {
    position: relative;
    min-width: 52px; padding: 11px 15px;
    border: 1px solid var(--lila-200);
    background: var(--blanco);
    border-radius: var(--radio-sm);
    font-size: 0.88rem; font-weight: 500;
    color: var(--violeta-700);
    cursor: pointer;
    transition: all .2s var(--curva);
}
.pastilla:hover { border-color: var(--violeta-500); transform: translateY(-2px); }
.pastilla.elegida {
    background: var(--violeta-600); border-color: var(--violeta-600); color: #fff;
    box-shadow: 0 10px 22px -14px var(--violeta-600);
}
.pastilla.agotada {
    color: var(--gris-suave); background: var(--lila-50);
    text-decoration: line-through; cursor: not-allowed;
    border-style: dashed;
}
.pastilla.agotada:hover { transform: none; border-color: var(--lila-200); }
.pastilla .quedan {
    display: block;
    font-size: 0.6rem; font-weight: 500; letter-spacing: 0.02em;
    color: var(--ambar); margin-top: 2px;
}
.pastilla.elegida .quedan { color: rgba(255,255,255,0.85); }

/* Guía de tallas: se abre dentro de la ficha, sin otra ventana encima */
.guia-tallas {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s var(--curva), opacity .25s var(--curva);
}
.guia-tallas.abierta { opacity: 1; }
.guia-caja {
    margin-top: 10px; padding: 14px 16px;
    background: var(--lila-50);
    border: 1px solid var(--lila-200);
    border-radius: var(--radio-md);
}
.guia-caja table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.guia-caja th, .guia-caja td { padding: 7px 4px; text-align: left; }
.guia-caja th {
    font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--violeta-600); font-weight: 600;
    border-bottom: 1px solid var(--lila-200);
}
.guia-caja td { color: var(--gris); border-bottom: 1px solid rgba(201, 179, 236, 0.3); }
.guia-caja tr:last-child td { border-bottom: 0; }
.guia-caja .nota { margin: 10px 0 0; font-size: 0.73rem; color: var(--gris-suave); line-height: 1.5; }

.aviso-stock {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 500;
}
.aviso-stock svg { width: 15px; height: 15px; flex: none; }
.aviso-stock.disponible { color: var(--verde); }
.aviso-stock.poco { color: var(--ambar); }
.aviso-stock.nada { color: var(--gris); }

.ficha-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.btn-grande {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    padding: 15px 22px;
    border: 0; border-radius: 999px;
    font-size: 0.93rem; font-weight: 600;
    cursor: pointer;
    transition: all .25s var(--curva);
}
.btn-grande svg { width: 18px; height: 18px; }
.btn-grande.principal {
    background: var(--violeta-600); color: #fff;
    box-shadow: 0 18px 34px -20px var(--violeta-600);
}
.btn-grande.principal:hover:not(:disabled) {
    background: var(--violeta-700); transform: translateY(-2px);
    box-shadow: 0 22px 42px -20px var(--violeta-700);
}
.btn-grande.whatsapp {
    background: var(--blanco); color: #1d8a53;
    border: 1px solid #bfe3cf;
}
.btn-grande.whatsapp:hover:not(:disabled) { background: #f2fbf6; transform: translateY(-2px); }
/* Ya hay unidades de esta talla en la bolsa: el botón baja el tono,
   porque la acción principal pasa a ser ir a la bolsa, no seguir añadiendo. */
.btn-grande.en-bolsa:not(:disabled) {
    background: var(--blanco);
    color: var(--violeta-700);
    border: 1px solid var(--lila-300);
    box-shadow: none;
}
.btn-grande.en-bolsa:not(:disabled):hover {
    background: var(--lila-50);
    border-color: var(--violeta-500);
    transform: translateY(-2px);
}

/* El instante de confirmación, para que el clic se note */
.btn-grande.confirmado,
.btn-grande.confirmado:disabled {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
    box-shadow: 0 18px 34px -20px var(--verde);
    animation: confirmar .4s var(--curva);
}
@keyframes confirmar {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.025); }
    100% { transform: scale(1); }
}

.btn-grande .icono-tic { display: none; }
.btn-grande.confirmado .icono-tic   { display: block; }
.btn-grande.confirmado .icono-bolsa { display: none; }

.btn-grande:disabled {
    background: var(--lila-100); color: var(--gris-suave);
    box-shadow: none; cursor: not-allowed;
    border-color: var(--linea);
}

.ficha-extras {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding-top: 6px;
    font-size: 0.76rem; color: var(--gris);
}
.ficha-extras span { display: inline-flex; align-items: center; gap: 6px; }
.ficha-extras svg { width: 14px; height: 14px; color: var(--lila-400); }

.btn-compartir {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: none; padding: 0;
    font-size: 0.78rem; font-weight: 500; color: var(--violeta-600);
    cursor: pointer;
}
.btn-compartir svg { width: 14px; height: 14px; }
.btn-compartir:hover { color: var(--rosa); }

/* =========================================================
   9. BOLSA DE COMPRA
   ========================================================= */
.bolsa-fondo {
    position: fixed; inset: 0; z-index: 110;
    display: none;
    background: rgba(36, 22, 51, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s var(--curva);
}
.bolsa-fondo.abierta { display: block; opacity: 1; }

.bolsa {
    position: absolute; top: 0; right: 0;
    width: min(420px, 100vw);
    height: 100%;
    background: var(--crema);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .38s var(--curva);
    box-shadow: -30px 0 70px -40px rgba(36, 22, 51, 0.6);
}
.bolsa-fondo.abierta .bolsa { transform: none; }

.bolsa-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--linea);
    background: var(--blanco);
}
.bolsa-cabecera h2 {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-size: 1.5rem; font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.1;
    /* Degradado del lila de la marca al rosa del acento. El color de
       antes queda de reserva: si el navegador no recorta el fondo
       sobre el texto, se lee igual en lila oscuro. */
    color: var(--violeta-700);
}
/* El degradado solo donde el navegador sabe recortar el fondo sobre el
   texto. Sin esta comprobación, uno que no supiera dejaría el título
   transparente, es decir invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bolsa-cabecera h2 {
        background: linear-gradient(100deg,
            var(--violeta-700) 0%, var(--violeta-500) 55%, var(--rosa) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
/* La cursiva de "Style", el mismo gesto que el logotipo de la cabecera */
.bolsa-cabecera h2 em { font-style: italic; font-weight: 400; }
.bolsa-cabecera .cuantas { font-size: 0.78rem; color: var(--gris); margin-top: 2px; }

.bolsa-lista {
    flex: 1; overflow-y: auto;
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 14px;
}

.linea-bolsa {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 13px;
    padding: 13px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-md);
    animation: entrar .3s var(--curva);
}
@keyframes entrar {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.linea-bolsa.saliendo { opacity: 0; transform: translateX(30px); transition: all .25s var(--curva); }

.linea-bolsa .foto {
    width: 72px; height: 94px;
    border-radius: var(--radio-sm);
    overflow: hidden; background: var(--lila-50);
}
.linea-bolsa .foto img { width: 100%; height: 100%; object-fit: cover; }

.linea-bolsa .datos { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.linea-bolsa .nombre {
    font-size: 0.88rem; font-weight: 500; color: var(--violeta-900);
    line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.linea-bolsa .talla { font-size: 0.74rem; color: var(--gris); }
.linea-bolsa .importe { font-size: 0.92rem; font-weight: 600; color: var(--violeta-700); }
.linea-bolsa .aviso {
    font-size: 0.7rem; color: var(--ambar); font-weight: 500;
    display: flex; align-items: center; gap: 5px;
}

.linea-bolsa .lado {
    display: flex; flex-direction: column; align-items: flex-end;
    justify-content: space-between; gap: 8px;
}
.cantidad {
    display: flex; align-items: center; gap: 2px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--lila-50);
}
.cantidad button {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 0; background: none;
    color: var(--violeta-700); cursor: pointer;
    border-radius: 50%;
    transition: background .18s var(--curva);
}
.cantidad button:hover:not(:disabled) { background: var(--lila-200); }
.cantidad button:disabled { color: var(--gris-suave); cursor: not-allowed; }
.cantidad svg { width: 12px; height: 12px; }
.cantidad .n { min-width: 20px; text-align: center; font-size: 0.84rem; font-weight: 600; }

.btn-quitar {
    border: 0; background: none; padding: 4px;
    color: var(--gris-suave); cursor: pointer;
    transition: color .2s var(--curva);
}
.btn-quitar svg { width: 15px; height: 15px; }
.btn-quitar:hover { color: var(--rosa); }

.bolsa-vacia { text-align: center; margin: auto 0; padding: 30px 10px; color: var(--gris); }
.bolsa-vacia .icono {
    width: 64px; height: 64px; margin: 0 auto 16px;
    display: grid; place-items: center;
    background: var(--lila-100); border-radius: 50%; color: var(--lila-400);
}
.bolsa-vacia .icono svg { width: 28px; height: 28px; }
.bolsa-vacia h3 {
    margin: 0 0 7px;
    font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 500;
    color: var(--violeta-800);
}
.bolsa-vacia p { margin: 0; font-size: 0.86rem; line-height: 1.6; }

.bolsa-pie {
    padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linea);
    background: var(--blanco);
    display: flex; flex-direction: column; gap: 13px;
}
.bolsa-total {
    display: flex; align-items: baseline; justify-content: space-between;
}
.bolsa-total .etiqueta {
    font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gris); font-weight: 500;
}
.bolsa-total .cifra {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem; font-weight: 600; color: var(--violeta-800);
}
.bolsa-nota { font-size: 0.73rem; color: var(--gris-suave); line-height: 1.5; margin: 0; }

.bolsa-pagos {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s var(--curva), opacity .25s var(--curva);
}
.bolsa-pagos.abierta { opacity: 1; }
.pagos-caja {
    padding: 14px;
    background: var(--lila-50);
    border: 1px solid var(--lila-200);
    border-radius: var(--radio-md);
    text-align: center;
}
.pagos-caja img {
    width: 150px; height: 150px; object-fit: contain;
    margin: 0 auto 10px; cursor: zoom-in;
    border-radius: var(--radio-sm); background: #fff; padding: 6px;
}
.pagos-caja p { margin: 0 0 5px; font-size: 0.78rem; color: var(--gris); }
.pagos-caja strong { color: var(--violeta-700); }

/* =========================================================
   10. AVISOS Y ZOOM
   ========================================================= */
.avisos {
    position: fixed; z-index: 140;
    left: 50%; bottom: 26px; transform: translateX(-50%);
    display: flex; flex-direction: column-reverse; gap: 9px;
    pointer-events: none;
    width: min(400px, calc(100vw - 32px));
}
.aviso {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 18px;
    background: var(--violeta-800); color: #fff;
    border-radius: 999px;
    font-size: 0.86rem; font-weight: 500;
    box-shadow: 0 20px 44px -22px rgba(36, 22, 51, 0.8);
    animation: subir .32s var(--curva);
}
.aviso.saliendo { animation: bajar .3s var(--curva) forwards; }
.aviso svg { width: 17px; height: 17px; flex: none; color: var(--lila-300); }
.aviso .texto { flex: 1; min-width: 0; }
.aviso button {
    pointer-events: auto;
    border: 0; background: none; padding: 0;
    color: var(--lila-300); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.aviso button:hover { color: #fff; }
@keyframes subir {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes bajar {
    to { opacity: 0; transform: translateY(12px) scale(0.96); }
}

.zoom-fondo {
    position: fixed; inset: 0; z-index: 150;
    display: none; place-items: center;
    background: rgba(20, 12, 30, 0.93);
    padding: 24px;
    cursor: zoom-out;
}
.zoom-fondo.abierta { display: grid; }
.zoom-fondo img {
    max-width: 100%; max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radio-md);
    cursor: zoom-out;          /* pulsar la foto la reduce */
    animation: zoomEntra .3s var(--curva);
}
@keyframes zoomEntra {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: none; }
}
.zoom-fondo .pie {
    position: absolute; bottom: 26px; left: 0; right: 0;
    text-align: center; color: rgba(255,255,255,0.65); font-size: 0.8rem;
}
.zoom-fondo .cerrar {
    position: absolute; top: 22px; right: 24px;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.14); color: #fff;
    cursor: pointer;
}
.zoom-fondo .cerrar svg { width: 18px; height: 18px; }

/* =========================================================
   11. CONFIANZA Y PIE
   ========================================================= */
.confianza {
    position: relative; z-index: 2;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    background: rgba(255, 255, 255, 0.5);
    padding: 26px 0;
}
.confianza-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
}
.confianza-item { display: flex; align-items: center; gap: 13px; }
.confianza-item .icono {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    background: var(--lila-100); border-radius: 12px;
    color: var(--violeta-600);
}
.confianza-item .icono svg { width: 20px; height: 20px; }
.confianza-item strong {
    display: block; font-size: 0.86rem; font-weight: 600; color: var(--violeta-800);
}
.confianza-item span { font-size: 0.76rem; color: var(--gris); line-height: 1.45; }

.pasos { position: relative; z-index: 2; padding: 64px 0 20px; }
.pasos-titulo { text-align: center; margin-bottom: 40px; }
.pasos-titulo .kicker {
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--lila-400); font-weight: 500; margin: 0 0 10px;
}
.pasos-titulo h2 {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 500;
    color: var(--violeta-900);
}
.pasos-grid {
    max-width: 1000px; margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.paso {
    padding: 28px 24px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    text-align: center;
    transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
.paso:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); }
.paso .numero {
    width: 40px; height: 40px; margin: 0 auto 16px;
    display: grid; place-items: center;
    background: var(--violeta-600); color: #fff;
    border-radius: 50%;
    font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600;
}
.paso h3 {
    margin: 0 0 8px;
    font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 500;
    color: var(--violeta-900);
}
.paso p { margin: 0; font-size: 0.86rem; line-height: 1.62; color: var(--gris); }

.cierre { position: relative; z-index: 2; padding: 64px 24px 72px; }
.cierre-caja {
    max-width: 900px; margin: 0 auto;
    padding: 50px 40px;
    text-align: center;
    border-radius: var(--radio-xl);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(214, 67, 126, 0.16), transparent 52%),
        linear-gradient(135deg, #6f58a6 0%, #9179cc 48%, #c7b6ec 100%);
    color: #fff;
    box-shadow: var(--sombra-card);
}
.cierre-caja h2 {
    margin: 0 0 12px;
    font-family: 'Fraunces', serif;
    font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 500; line-height: 1.22;
}
.cierre-caja p {
    margin: 0 auto 28px; max-width: 460px;
    font-size: 0.95rem; line-height: 1.66; color: rgba(255,255,255,0.88);
}
.cierre-caja .btn-cierre {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 15px 30px;
    background: #fff; color: var(--violeta-700);
    border-radius: 999px;
    font-size: 0.92rem; font-weight: 600;
    transition: transform .25s var(--curva), box-shadow .25s var(--curva);
}
.cierre-caja .btn-cierre svg { width: 18px; height: 18px; }
.cierre-caja .btn-cierre:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -20px rgba(36, 22, 51, 0.6);
}

/* Botón flotante de WhatsApp */
.wa-flotante {
    position: fixed; z-index: 90;
    right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: #25d366; color: #fff;
    border-radius: 50%;
    box-shadow: 0 16px 32px -14px rgba(37, 211, 102, 0.7);
    transition: transform .25s var(--curva);
}
.wa-flotante svg { width: 27px; height: 27px; }
.wa-flotante:hover { transform: scale(1.08); }

/* =========================================================
   12. MÓVIL
   ========================================================= */
@media (max-width: 1000px) {
    /* Una sola columna: la foto arriba y los datos abajo.
       minmax(0, 1fr) en la segunda fila es lo que permite que los datos
       se encojan y se deslicen. Sin eso, la fila crecía hasta el alto de
       su contenido, la ficha recortaba lo que sobraba y las tallas y los
       botones quedaban fuera de la pantalla, sin manera de llegar. */
    .ficha {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    .ficha-datos {
        min-height: 0;                 /* sin esto la celda no se encoge */
        overscroll-behavior: contain;  /* al llegar al final no arrastra la página de detrás */
    }

    /* La foto se queda en poco menos de la mitad de la pantalla: antes
       ocupaba el 62 % y no dejaba sitio para elegir la talla. */
    .galeria-marco {
        aspect-ratio: 4 / 5;
        max-height: 44vh;
        max-height: 44dvh;
    }

    .galeria-tiras { display: none; }
    .galeria-puntos.visible { display: flex; }

    /* Los botones, siempre a la vista al pie de la hoja: son la acción
       de la pantalla y no deberían exigir que primero deslices. */
    .ficha-acciones {
        position: sticky; bottom: 0;
        margin: 4px -20px -22px;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        background: var(--blanco);
        border-top: 1px solid var(--linea);
    }
}

/* Teléfonos bajos (un iPhone SE mide 667). Con la foto al 44 % no
   quedaba sitio y el selector de talla caía debajo de la barra de
   botones: había que deslizar para verlo, sin que nada lo indicara.
   La foto cede altura; se sigue viendo entera porque recorta al centro. */
@media (max-width: 1000px) and (max-height: 740px) {
    .galeria-marco {
        max-height: 28vh;
        max-height: 28dvh;
    }
    .ficha-datos { padding-top: 18px; gap: 12px; }
    .ficha-titulo { font-size: 1.25rem; }
    .ficha-acciones { padding-top: 10px; gap: 8px; }
    .ficha-acciones .btn-grande { padding-top: 13px; padding-bottom: 13px; }
}

@media (max-width: 860px) {
    :root { --cabecera-min: 64px; }

    .solo-movil { display: inline-grid; }

    .header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 10px 18px;
    }

    /* El buscador va plegado: abierto a todas horas dejaba la cabecera
       en 175 px pegada arriba, un tercio de la pantalla del teléfono. */
    .buscador { display: none; }
    .site-header.buscando .buscador {
        display: flex;
        grid-column: 1 / -1;
        max-width: none;
    }

    .marca .nombre { font-size: 1.3rem; }
    .marca .lema { font-size: 0.55rem; letter-spacing: 0.18em; }

    .filtros-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 18px; }
    .herramientas { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .interruptor, .orden { padding-top: 11px; padding-bottom: 11px; }
    .herramientas::-webkit-scrollbar { display: none; }
    .orden { flex: none; }

    .grid-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
        padding: 0 18px;
    }
    .resumen { padding: 16px 18px 0; }

    .card-info { padding: 13px 13px 15px; gap: 7px; }
    .card-nombre { font-size: 0.92rem; }
    .precio, .precio-oferta { font-size: 1rem; }
    /* En el móvil no hay "pasar el ratón": el botón se ve siempre */
    .btn-anadir { padding: 10px 12px; font-size: 0.78rem; }

    .ficha {
        top: auto; bottom: 0; left: 0;
        transform: translateY(100%);
        width: 100%;
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    }
    .ficha-fondo.abierta .ficha { transform: none; }
    .ficha-datos { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
    .ficha-titulo { font-size: 1.4rem; }
    .ficha-precio .precio, .ficha-precio .precio-oferta { font-size: 1.35rem; }

    /* Asa de arrastre: indica que la hoja se puede cerrar hacia abajo */
    .ficha-asa { display: block; }

    .confianza-inner { grid-template-columns: 1fr; gap: 16px; padding: 0 18px; }
    .pasos { padding: 46px 0 10px; }
    .cierre { padding: 46px 18px 54px; }
    .cierre-caja { padding: 38px 24px; }

    .wa-flotante { width: 48px; height: 48px; right: 16px; }
    .wa-flotante svg { width: 24px; height: 24px; }
}


@media (max-width: 420px) {
    .grid-productos { gap: 14px 10px; }
    .card-media .etiquetas { top: 8px; left: 8px; }
    .etiqueta { font-size: 0.62rem; padding: 4px 9px; }
    .btn-corazon { width: 34px; height: 34px; top: 8px; right: 8px; }
    .btn-corazon::after { inset: -5px; }
    .btn-corazon svg { width: 16px; height: 16px; }
    .linea-bolsa { grid-template-columns: 60px minmax(0, 1fr) auto; }
    .linea-bolsa .foto { width: 60px; height: 78px; }
}

/* =========================================================
   13. MOVIMIENTO REDUCIDO
   Quien lo pide en su sistema no debería marearse con la web.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .revelar { opacity: 1; transform: none; }

    /* Sin el brillo, la etiqueta se quedaría en el tono claro donde se
       detuviera la animación: se le fija el rosa de la marca. */
    .etiqueta.oferta { background: var(--rosa); }
}