/* =====================================================================
   goodlook — hoja de estilos de la tienda
   ---------------------------------------------------------------------
   Está escrita a mano, sin frameworks: no hay Bootstrap ni Tailwind que
   descargar. Todo lo que ves acá se sirve desde tu propio servidor.

   Organización:
     1. Variables de color y medidas
     2. Reset y tipografía
     3. Estructura (contenedor, grillas)
     4. Encabezado y navegación
     5. Botones
     6. Tarjetas de producto
     7. Formularios
     8. Avisos (éxito / error)
     9. Carrito y checkout
    10. Pie de página
    11. Adaptación a celular
   ===================================================================== */


/* --- 0. Tipografía de títulos ----------------------------------------
   Playfair Display, servida desde nuestro propio servidor (ver la carpeta
   /fuentes). Es una serif de trazo contrastado: es la que le da al sitio el
   aire de revista de moda en vez de parecer una planilla.

   font-display: swap hace que el texto se vea desde el primer instante con la
   tipografía de respaldo y cambie cuando termina de cargar. Sin eso, el título
   quedaría invisible unos milisegundos.
   -------------------------------------------------------------------- */

@font-face {
    font-family: "Playfair Display";
    src: url("/fuentes/playfair-display.woff2") format("woff2");
    font-weight: 500 800;   /* es una fuente variable: un archivo, todos los pesos */
    font-style: normal;
    font-display: swap;
}


/* --- 1. Variables ---------------------------------------------------- */

:root {
    /* Violeta de goodlook, tomado de la identidad de la marca en Instagram.
       Se usa en los botones principales, el chip de categoría activa y los
       destacados. Cambiando estas dos líneas cambia el color de todo el sitio. */
    --marca:        #6d5b9e;
    --marca-oscuro: #5a4a85;

    --tinta:        #0a0a0a;
    --tinta-suave:  #3f3f46;
    --gris:         #71717a;
    --gris-claro:   #a1a1aa;
    --borde:        #e4e4e7;
    --fondo:        #ffffff;
    --fondo-suave:  #fafafa;
    --fondo-hueco:  #f4f4f5;

    --whatsapp:     #25d366;
    --mercadopago:  #009ee3;
    --exito:        #15803d;
    --exito-fondo:  #f0fdf4;
    --error:        #b91c1c;
    --error-fondo:  #fef2f2;
    --aviso:        #b45309;
    --aviso-fondo:  #fffbeb;

    --ancho-maximo: 1240px;
    --radio:        10px;
    --radio-chico:  6px;

    --sombra:       0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --sombra-alta:  0 10px 30px rgba(0, 0, 0, .10);

    --transicion:   160ms ease;

    /* Palo seco: menús, botones, textos largos, precios. Se lee cómodo y rápido. */
    --tipografia: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Arial, sans-serif;

    /* Serif de títulos. Los respaldos son serifs elegantes que ya vienen
       instaladas: si por lo que sea no carga Playfair, sigue viéndose bien. */
    --tipografia-titulo: "Playfair Display", "Bodoni 72", Didot, Georgia,
                         "Times New Roman", serif;
}


/* --- 2. Reset y tipografía ------------------------------------------- */

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

body {
    margin: 0;
    font-family: var(--tipografia);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

/* Los títulos van en serif y GRANDES. Es la diferencia entre una tienda que
   parece un catálogo de repuestos y una que parece una marca de ropa. */
h1, h2 {
    margin: 0 0 .4em;
    font-family: var(--tipografia-titulo);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.015em;
}

h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

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

a:hover { text-decoration: underline; }

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

small { font-size: .8125rem; }

.apagado  { color: var(--gris); }
.centrado { text-align: center; }
.chico    { font-size: .875rem; }

/* Texto visible sólo para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* --- 3. Estructura --------------------------------------------------- */

.contenedor {
    width: 100%;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 20px;
}

.seccion { padding: 48px 0; }

.seccion-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.grilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 28px 20px;
}


/* --- 4. Encabezado --------------------------------------------------- */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--borde);
}

.encabezado-fila {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 68px;
}

.marca {
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.04em;
    white-space: nowrap;
    flex: 0 0 auto;
}

.marca:hover { text-decoration: none; opacity: .75; }

.marca img {
    height: 26px;
    width: auto;
    display: block;
    transition: opacity var(--transicion);
}

@media (max-width: 640px) {
    .marca img { height: 22px; }
}

.navegacion {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.navegacion a {
    font-size: .9rem;
    font-weight: 500;
    color: var(--tinta-suave);
    transition: color var(--transicion);
}

.navegacion a:hover,
.navegacion a.activo {
    color: var(--tinta);
    text-decoration: none;
}

/* Buscador del encabezado */
.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fondo-hueco);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 14px;
    min-width: 180px;
    transition: border-color var(--transicion), background var(--transicion);
}

.buscador:focus-within {
    background: var(--fondo);
    border-color: var(--tinta);
}

.buscador input {
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    font-size: .875rem;
    width: 100%;
}

/* Icono del carrito con su globito de cantidad */
.icono-carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .9rem;
}

.globito {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tinta);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

/* Menú de categorías bajo el encabezado */
.categorias {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 0;
    border-bottom: 1px solid var(--borde);
    scrollbar-width: none;
}

.categorias::-webkit-scrollbar { display: none; }

.categoria-chip {
    flex: 0 0 auto;
    padding: 7px 15px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--tinta-suave);
    background: var(--fondo);
    transition: all var(--transicion);
}

.categoria-chip:hover {
    border-color: var(--tinta);
    text-decoration: none;
}

.categoria-chip.activo {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}


/* --- Hero de la portada ----------------------------------------------
   La foto ocupa todo el ancho y es lo primero que se ve al abrir el sitio.

   Hay DOS imágenes distintas y no una sola redimensionada:
     · hero.jpg        2400x1200, la modelo apoyada a la derecha y aire a la
                       izquierda para el texto. Para pantallas anchas.
     · hero-movil.jpg  1200x1600, vertical. En un celular la pantalla es
                       vertical y la foto entra entera; usar la horizontal
                       ahí dejaría a la modelo del tamaño de una uña.
   -------------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(78vh, 660px);

    /* Este color es el del fondo del estudio de la foto: se ve mientras la
       imagen carga, así no hay un parpadeo blanco. */
    background-color: #d3d4cf;
    background-image: url("/img/hero.jpg");
    background-size: cover;
    background-position: 72% center;

    border-bottom: 1px solid var(--borde);
}

.hero-texto {
    max-width: 34ch;
}

.hero-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    margin-bottom: 18px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--marca);
}

.hero-titulo {
    font-family: var(--tipografia-titulo);
    font-size: clamp(2.8rem, 6.2vw, 5.2rem);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.025em;
    margin-bottom: 20px;
}

.hero-bajada {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tinta-suave);
    margin-bottom: 26px;
}

.hero-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* La flechita que invita a seguir bajando. */
.hero-flecha {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    color: var(--tinta-suave);
    opacity: .55;
    animation: rebote 2.4s ease-in-out infinite;
}

@keyframes rebote {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(7px); }
}

/* Quien haya pedido menos animaciones en su sistema, no ve el rebote. */
@media (prefers-reduced-motion: reduce) {
    .hero-flecha { animation: none; }
}

@media (max-width: 900px) {
    .hero {
        background-image: url("/img/hero-movil.jpg");
        background-position: center 12%;
        min-height: 88vh;
        align-items: flex-end;
        padding-bottom: 44px;
    }

    /* Sobre la foto vertical el texto va abajo, con un velo blanco degradado
       para que se lea sin tapar la cara de la modelo. */
    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                    rgba(255, 255, 255, .97) 0%,
                    rgba(255, 255, 255, .90) 26%,
                    rgba(255, 255, 255, 0) 58%);
    }

    .hero .contenedor { position: relative; z-index: 1; }

    .hero-texto { max-width: none; }
    .hero-flecha { display: none; }
}


/* --- Banda de marca ---------------------------------------------------
   Franja oscura con el logo de Miwok. Separa la foto del hero de la grilla
   de productos y deja claro de entrada qué marca se vende acá.
   -------------------------------------------------------------------- */

.banda-marca {
    position: relative;
    overflow: hidden;
    background: var(--tinta);
    color: #fff;
    padding: 64px 0;
    text-align: center;
}

/* El logo enorme del fondo, casi transparente: da textura y profundidad
   sin competir con el logo chico que sí se lee. */
.banda-marca-fondo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    max-width: none;
    opacity: .05;
    pointer-events: none;
}

.banda-marca-contenido {
    position: relative;
    z-index: 1;
}

.banda-marca-etiqueta {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 22px;
}

.banda-marca-logo {
    height: 46px;
    width: auto;
    margin: 0 auto 24px;
}

.banda-marca-texto {
    max-width: 46ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

@media (max-width: 640px) {
    .banda-marca { padding: 48px 0; }
    .banda-marca-logo { height: 34px; }
    .banda-marca-fondo { width: 220%; }
    .banda-marca-texto { font-size: .9375rem; }
}


/* --- 5. Botones ------------------------------------------------------ */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transicion), transform var(--transicion);
}

.boton:hover {
    opacity: .88;
    text-decoration: none;
}

.boton:active { transform: translateY(1px); }

.boton:disabled,
.boton[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.boton-secundario {
    background: var(--fondo);
    color: var(--tinta);
    border-color: var(--borde);
}

.boton-secundario:hover { border-color: var(--tinta); opacity: 1; }

.boton-fantasma {
    background: none;
    color: var(--tinta-suave);
    border-color: transparent;
    padding: 8px 12px;
}

.boton-fantasma:hover { color: var(--tinta); background: var(--fondo-hueco); }

.boton-whatsapp    { background: var(--whatsapp); }
.boton-mercadopago { background: var(--mercadopago); }

.boton-peligro {
    background: var(--fondo);
    color: var(--error);
    border-color: var(--borde);
}

.boton-peligro:hover { border-color: var(--error); opacity: 1; }

.boton-ancho { width: 100%; }
.boton-grande { padding: 15px 28px; font-size: 1rem; }
.boton-chico { padding: 7px 14px; font-size: .8125rem; }


/* --- 6. Tarjetas de producto ----------------------------------------- */

.tarjeta {
    display: flex;
    flex-direction: column;
    position: relative;
}

.tarjeta:hover { text-decoration: none; }

.tarjeta-foto {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--fondo-hueco);
    margin-bottom: 12px;
}

.tarjeta-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.tarjeta:hover .tarjeta-foto img { transform: scale(1.04); }

/* Marco cuando el producto no tiene foto cargada todavía */
.sin-foto {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--gris-claro);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* El nombre del producto va en serif, como los títulos: es lo que hace que la
   grilla se lea como una vidriera y no como una lista de inventario. */
.tarjeta-nombre {
    font-family: var(--tipografia-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 5px;
}

/* El precio SÍ va en palo seco: los números se leen mejor y sin ambigüedad. */
.tarjeta-precio {
    font-size: 1.05rem;
    font-weight: 700;
}

.tarjeta-talles {
    font-size: .8rem;
    color: var(--gris);
    margin-top: 4px;
}

/* Etiquetas sobre la foto */
.etiqueta {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.etiqueta-agotado {
    background: rgba(10, 10, 10, .75);
    left: auto;
    right: 10px;
}

.agotado .tarjeta-foto img { opacity: .5; }


/* --- 7. Formularios -------------------------------------------------- */

.campo { margin-bottom: 18px; }

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 600;
}

.campo .ayuda {
    display: block;
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--gris);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    font: inherit;
    font-size: .9375rem;
    background: var(--fondo);
    color: var(--tinta);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, .08);
}

textarea { resize: vertical; min-height: 90px; }

/* Campo con error de validación */
.campo-error input,
.campo-error select,
.campo-error textarea {
    border-color: var(--error);
}

.mensaje-error {
    display: block;
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--error);
    font-weight: 500;
}

.opciones { display: grid; gap: 10px; }

.opcion {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    cursor: pointer;
    transition: border-color var(--transicion), background var(--transicion);
}

.opcion:hover { border-color: var(--gris-claro); }

.opcion input { margin-top: 3px; flex: 0 0 auto; width: auto; }

.opcion:has(input:checked) {
    border-color: var(--tinta);
    background: var(--fondo-suave);
}

.opcion-titulo { font-weight: 600; font-size: .9375rem; }
.opcion-detalle { font-size: .8125rem; color: var(--gris); }

/* Selector de talles de la ficha de producto */
.talles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.talle {
    position: relative;
    min-width: 52px;
    padding: 11px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    text-align: center;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: all var(--transicion);
}

.talle input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}

.talle:has(input:checked) {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.talle.sin-stock {
    color: var(--gris-claro);
    background: var(--fondo-hueco);
    cursor: not-allowed;
    text-decoration: line-through;
}


/* --- 8. Avisos ------------------------------------------------------- */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--radio-chico);
    border: 1px solid;
    font-size: .9rem;
    margin-bottom: 20px;
}

.aviso-exito {
    background: var(--exito-fondo);
    border-color: #bbf7d0;
    color: var(--exito);
}

.aviso-error {
    background: var(--error-fondo);
    border-color: #fecaca;
    color: var(--error);
}

.aviso-atencion {
    background: var(--aviso-fondo);
    border-color: #fde68a;
    color: var(--aviso);
}

.aviso-neutro {
    background: var(--fondo-hueco);
    border-color: var(--borde);
    color: var(--tinta-suave);
}


/* --- 9. Carrito y checkout ------------------------------------------- */

.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

.linea-carrito {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--borde);
}

.linea-carrito-foto {
    width: 88px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radio-chico);
    background: var(--fondo-hueco);
}

.linea-carrito-nombre { font-weight: 600; font-size: .9375rem; }

.cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    overflow: hidden;
}

.cantidad button {
    width: 34px;
    height: 34px;
    border: 0;
    background: var(--fondo);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    color: var(--tinta-suave);
}

.cantidad button:hover { background: var(--fondo-hueco); }

.cantidad input {
    width: 44px;
    border: 0;
    border-left: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    border-radius: 0;
    text-align: center;
    padding: 7px 0;
    font-weight: 600;
}

/* Panel lateral con el total */
.resumen {
    position: sticky;
    top: 92px;
    padding: 24px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-suave);
}

.resumen-linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: .9375rem;
}

.resumen-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Barra de progreso hacia el envío gratis */
.progreso-envio {
    height: 5px;
    border-radius: 999px;
    background: var(--borde);
    overflow: hidden;
    margin: 8px 0 4px;
}

.progreso-envio > div {
    height: 100%;
    background: var(--exito);
    transition: width 300ms ease;
}

/* Estado vacío */
.vacio {
    text-align: center;
    padding: 72px 20px;
    color: var(--gris);
}

.vacio h2 { color: var(--tinta); }


/* --- Ficha de producto ------------------------------------------------ */

.producto-detalle {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
}

.galeria { display: grid; gap: 12px; }

.galeria-principal {
    aspect-ratio: 4 / 5;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo-hueco);
}

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

.galeria-miniaturas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 10px;
}

.galeria-miniaturas img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radio-chico);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transicion);
}

.galeria-miniaturas img:hover,
.galeria-miniaturas img.activa { border-color: var(--tinta); }

.precio-grande {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 6px 0 22px;
}


/* --- 10. Pie de página ------------------------------------------------ */

.pie {
    margin-top: 72px;
    padding: 48px 0 32px;
    border-top: 1px solid var(--borde);
    background: var(--fondo-suave);
    font-size: .9rem;
}

.pie-grilla {
    display: grid;
    grid-template-columns: 1.4fr repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

.pie h4 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris);
    margin-bottom: 12px;
}

.pie ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.pie a { color: var(--tinta-suave); }
.pie a:hover { color: var(--tinta); }

.pie-legal {
    padding-top: 24px;
    border-top: 1px solid var(--borde);
    color: var(--gris);
    font-size: .8125rem;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--sombra-alta);
    transition: transform var(--transicion);
}

.whatsapp-flotante:hover { transform: scale(1.06); text-decoration: none; }


/* --- Paginación ------------------------------------------------------- */

.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
}

.paginacion a,
.paginacion span {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    font-size: .875rem;
    font-weight: 500;
}

.paginacion a:hover { border-color: var(--tinta); text-decoration: none; }

.paginacion .actual {
    background: var(--tinta);
    border-color: var(--tinta);
    color: #fff;
    font-weight: 700;
}

.paginacion .desactivado {
    color: var(--gris-claro);
    background: var(--fondo-hueco);
}


/* --- Línea de tiempo del pedido --------------------------------------- */

.estado-pedido {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

.estado-PENDIENTE { background: var(--aviso-fondo);  color: var(--aviso); }
.estado-PAGADO    { background: var(--exito-fondo);  color: var(--exito); }
.estado-ENVIADO   { background: #eff6ff;             color: #1d4ed8; }
.estado-ENTREGADO { background: var(--fondo-hueco);  color: var(--tinta-suave); }
.estado-CANCELADO { background: var(--error-fondo);  color: var(--error); }


/* --- 11. Celular ------------------------------------------------------ */

@media (max-width: 900px) {
    .dos-columnas,
    .producto-detalle {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .resumen { position: static; }

    .pie-grilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .encabezado-fila { height: 60px; gap: 14px; }

    .buscador { display: none; }

    .navegacion { gap: 14px; }

    .navegacion .oculto-celular { display: none; }

    .grilla-productos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    .seccion { padding: 32px 0; }

    .linea-carrito { grid-template-columns: 68px 1fr; }

    .linea-carrito-foto { width: 68px; }

    .linea-carrito > *:last-child { grid-column: 1 / -1; }

    .pie-grilla { grid-template-columns: 1fr; gap: 24px; }

    .pie-legal { flex-direction: column; gap: 8px; }
}


/* --- Impresión (para imprimir un pedido) ------------------------------ */

@media print {
    .encabezado, .pie, .whatsapp-flotante, .boton { display: none !important; }
    body { font-size: 12pt; }
}