/* ==========================================================================
   goodlook — flujo de compra (ficha, carrito, checkout, pedido)
   INVIERNO 2026
   --------------------------------------------------------------------------
   Esta hoja se carga SOLO en las cuatro pantallas por las que pasa alguien que
   está comprando. Por eso casi todo cuelga de `.compra`, la clase que llevan
   esos cuatro <main>: así nada de lo de acá se le escapa a la portada ni al
   panel, que son de otros.

   Qué agrega sobre tienda.css (que es la base y no se toca):
     - la atmósfera invernal (fríos muy sutiles, sombras blandas),
     - la grilla de la ficha, que es la pantalla que vende,
     - los rótulos de marca (COLOR, TALLE) en versalita espaciada,
     - las pastillas de color con su punto de color real,
     - el aire y la jerarquía de carrito, checkout y confirmación.

   Regla que me impuse: NINGÚN color escrito a mano. Todo sale de las variables
   de tienda.css o de un color-mix sobre ellas, porque los valores de esas
   variables los está ajustando otro agente y esto tiene que seguirlo solo.
   ========================================================================== */


/* --- 1. Fichas de la atmósfera ---------------------------------------------
   El encabezado del sitio es pegajoso y tiene dos filas (68 + 46 + bordes):
   cualquier cosa que se pegue tiene que arrancar por debajo de esos 128px, si
   no queda tapada. tienda.css ya usa ese mismo número para `.resumen`.

   Los "fríos" se arman con color-mix sobre --marca en vez de con un violeta
   escrito a mano: si mañana cambia la marca, todo el invierno cambia con ella.
   -------------------------------------------------------------------------- */

.compra {
    --compra-tope: 128px;

    /* Velos de marca, del más tenue al más presente. */
    --compra-velo:    color-mix(in srgb, var(--marca) 4%,  var(--fondo));
    --compra-velo-2:  color-mix(in srgb, var(--marca) 8%,  var(--fondo));
    --compra-linea:   color-mix(in srgb, var(--marca) 18%, var(--borde));

    /* Sombra fría: en vez de un gris neutro, una sombra teñida de violeta.
       Es lo que hace que las cosas se sientan apoyadas sobre papel frío y no
       recortadas con tijera. Muy sutil a propósito. */
    --compra-sombra:  0 1px 2px color-mix(in srgb, var(--marca) 10%, transparent),
                      0 8px 24px -12px color-mix(in srgb, var(--marca) 22%, transparent);
    --compra-sombra-alta: 0 2px 4px color-mix(in srgb, var(--marca) 10%, transparent),
                          0 18px 40px -16px color-mix(in srgb, var(--marca) 30%, transparent);
}

/* Un degradé frío altísimo y casi invisible que baja del encabezado. No es
   "un fondo de color": es el aire de la estación. Se corta a los 420px para
   que el resto de la página siga siendo blanco y las prendas manden. */
.compra {
    background:
        linear-gradient(180deg,
            var(--compra-velo) 0,
            transparent 420px) no-repeat;
}

.compra .seccion {
    padding-bottom: 56px;
}


/* --- 2. Rótulos, migas y pasos ---------------------------------------------
   El rótulo en versalita espaciada es el gesto que más "marca de ropa" aporta
   por línea de CSS: es como se rotula COLOR y TALLE en cualquier ficha de una
   marca de verdad, y ordena la columna sin gritar.
   -------------------------------------------------------------------------- */

.compra-rotulo {
    display: block;
    margin: 0 0 12px;
    font-family: var(--tipografia);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gris);
}

/* El valor elegido va al lado del rótulo, en tinta y sin versalita: el rótulo
   es la etiqueta, el valor es el dato. */
.compra-rotulo-valor {
    margin-left: 8px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    font-size: .8125rem;
    color: var(--tinta);
}

.compra-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
}

.compra-migas a {
    color: var(--gris);
    transition: color var(--transicion);
}

.compra-migas a:hover {
    color: var(--marca);
}

/* Los pasos (1 carrito · 2 checkout · 3 confirmación). Son una guía, no un
   adorno: saber cuánto falta baja el abandono. Por eso el paso activo se lee
   distinto de verdad (relleno de marca) y no sólo un poco más oscuro. */
.compra-pasos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.compra-paso-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    color: var(--gris);
    background: transparent;
    border: 1px solid transparent;
}

/* El numerito en su redondel. */
.compra-paso-item::before {
    content: attr(data-paso);
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--fondo-hueco);
    color: var(--gris);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: 0;
}

.compra-paso-item--activo {
    color: var(--tinta);
    background: var(--compra-velo-2);
    border-color: var(--compra-linea);
    font-weight: 600;
}

.compra-paso-item--activo::before {
    background: var(--marca);
    color: #fff;
}

/* Un paso ya cumplido se marca con un tilde en vez del número. */
.compra-paso-item--hecho::before {
    content: "✓";
    background: color-mix(in srgb, var(--exito) 14%, var(--fondo));
    color: var(--exito);
}

/* Títulos de la sección de compra: la serif de la marca, apretada y grande. */
.compra-titulo {
    font-family: var(--tipografia-titulo);
    font-size: clamp(1.9rem, 4.4vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -.015em;
    margin: 0 0 10px;
}

.compra-titulo-seccion {
    font-family: var(--tipografia-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}

.compra-bajada {
    color: var(--gris);
    font-size: .9375rem;
    margin: 0 0 24px;
}


/* --- 3. La ficha: la vidriera ----------------------------------------------
   En el celular es una columna: foto grande primero, después los datos. En
   escritorio son dos, y la foto se lleva la parte del león (1.15 contra .85)
   porque lo que vende es la prenda, no la ficha técnica.
   -------------------------------------------------------------------------- */

.ficha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}

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

/* Categoría arriba del nombre: ubica la prenda en el catálogo de un vistazo. */
.ficha-categoria {
    display: block;
    margin: 0 0 8px;
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--marca);
    font-weight: 600;
}

/* El precio manda en la columna. Cuando todavía no hay precio cargado, el
   mismo bloque baja de tamaño y de peso: "Consultar precio" no puede gritar
   como grita un número. */
.ficha-precio {
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    line-height: 1;
    margin: 0 0 6px;
}

.ficha-precio--sin-precio {
    font-family: var(--tipografia);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gris);
    letter-spacing: -.01em;
}

.ficha-precio-nota {
    margin: 0 0 20px;
    font-size: .8125rem;
    color: var(--gris);
}

/* Cada bloque de decisión (color, talle, cantidad) respira parejo. */
.ficha-bloque {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.ficha-bloque legend {
    padding: 0;
}

.ficha-acciones {
    display: grid;
    gap: 10px;
    margin: 26px 0 0;
}


/* --- 4. Galería ------------------------------------------------------------
   Celular: la foto grande y las miniaturas debajo en fila.
   Escritorio: las miniaturas pasan a una tira vertical A LA IZQUIERDA de la
   foto, que es como lo resuelven las marcas de ropa. El truco es que en el HTML
   la foto grande sigue yendo PRIMERO (que es el orden correcto para leer en el
   celular y para un lector de pantalla) y acá sólo se reubica con la grilla.
   -------------------------------------------------------------------------- */

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

.compra-galeria .galeria-principal {
    border-radius: var(--radio);
    background: var(--fondo-hueco);
    box-shadow: var(--compra-sombra);
    overflow: hidden;
}

/* 4/5 es la proporción de foto de moda: vertical, cuerpo entero. */
.compra-galeria .galeria-principal img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.compra-galeria .galeria-principal .sin-foto {
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
}

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

.compra-galeria .galeria-miniaturas img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    cursor: pointer;
    background: var(--fondo-hueco);
    transition: border-color var(--transicion), opacity var(--transicion);
    opacity: .78;
}

.compra-galeria .galeria-miniaturas img:hover {
    opacity: 1;
}

/* La miniatura activa se marca con el violeta de la marca y un anillo, no sólo
   con un borde: tiene que cantar cuál se está mirando. */
.compra-galeria .galeria-miniaturas img.activa {
    opacity: 1;
    border-color: var(--marca);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 28%, transparent);
}


/* --- 5. Colores ------------------------------------------------------------
   Son enlaces (cada color tiene su URL, se puede compartir y el botón "atrás"
   funciona) disfrazados de pastilla con el punto del color real.

   El punto se pinta desde CSS leyendo data-color con selectores de atributo,
   con la bandera `i` para que no importe si viene "Negro" o "negro". Se hace
   así, y no con un th:style en la plantilla, porque el nombre del color lo
   carga a mano quien sube el producto y no quiero lógica de presentación
   metida en la plantilla. Si el color no está en la lista, queda el punto
   neutro de abajo, que nunca queda mal.
   -------------------------------------------------------------------------- */

.compra-colores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compra-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;            /* zona táctil cómoda en el celular */
    padding: 8px 16px 8px 10px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
    font-size: .875rem;
    color: var(--tinta-suave);
    transition: border-color var(--transicion), background var(--transicion),
                color var(--transicion);
}

.compra-color-chip:hover {
    border-color: var(--gris-claro);
    color: var(--tinta);
}

/* El punto de color, con un aro interior para que el blanco y los claros no
   se pierdan sobre el fondo blanco. */
.compra-color-chip::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--compra-punto, var(--gris-claro));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent);
}

.compra-color-chip.activo {
    border-color: var(--marca);
    background: var(--compra-velo-2);
    color: var(--tinta);
    font-weight: 600;
}

/* Un color agotado se sigue mostrando (saber que existe es información útil),
   pero apagado y con el nombre tachado. */
.compra-color-chip--agotado {
    color: var(--gris-claro);
    text-decoration: line-through;
    background: var(--fondo-suave);
}

.compra-color-chip--agotado::before {
    opacity: .45;
}

/* Mapa de colores. Los nombres son los que se usan de verdad al cargar ropa. */
.compra-color-chip[data-color="negro" i]        { --compra-punto: #16161a; }
.compra-color-chip[data-color="blanco" i]       { --compra-punto: #fdfdfd; }
.compra-color-chip[data-color="crudo" i],
.compra-color-chip[data-color="natural" i],
.compra-color-chip[data-color="hueso" i]        { --compra-punto: #efe7d8; }
.compra-color-chip[data-color="beige" i],
.compra-color-chip[data-color="arena" i]        { --compra-punto: #d9c7ab; }
.compra-color-chip[data-color="gris" i]         { --compra-punto: #9a9aa2; }
.compra-color-chip[data-color="gris melange" i],
.compra-color-chip[data-color="melange" i]      { --compra-punto: #b9b9c0; }
.compra-color-chip[data-color="marron" i],
.compra-color-chip[data-color="marrón" i],
.compra-color-chip[data-color="chocolate" i]    { --compra-punto: #6b4a35; }
.compra-color-chip[data-color="camel" i]        { --compra-punto: #b98a52; }
.compra-color-chip[data-color="rojo" i]         { --compra-punto: #c0392b; }
.compra-color-chip[data-color="bordo" i],
.compra-color-chip[data-color="borravino" i]    { --compra-punto: #7b2436; }
.compra-color-chip[data-color="rosa" i]         { --compra-punto: #e8a0b4; }
.compra-color-chip[data-color="fucsia" i]       { --compra-punto: #d6337f; }
.compra-color-chip[data-color="naranja" i]      { --compra-punto: #e4772e; }
.compra-color-chip[data-color="amarillo" i]     { --compra-punto: #e8c33c; }
.compra-color-chip[data-color="verde" i]        { --compra-punto: #3f7d52; }
.compra-color-chip[data-color="verde militar" i],
.compra-color-chip[data-color="militar" i],
.compra-color-chip[data-color="oliva" i]        { --compra-punto: #6b6f45; }
.compra-color-chip[data-color="azul" i]         { --compra-punto: #2f5597; }
.compra-color-chip[data-color="azul marino" i],
.compra-color-chip[data-color="marino" i],
.compra-color-chip[data-color="navy" i]         { --compra-punto: #1f2d4d; }
.compra-color-chip[data-color="celeste" i]      { --compra-punto: #8ec2e0; }
.compra-color-chip[data-color="violeta" i],
.compra-color-chip[data-color="lila" i]         { --compra-punto: var(--marca); }
.compra-color-chip[data-color="plata" i],
.compra-color-chip[data-color="gris claro" i]   { --compra-punto: #ccccd4; }


/* --- 6. Talles -------------------------------------------------------------
   Más grandes que los de tienda.css: en el celular se tocan con el pulgar y
   44px es el mínimo cómodo. Además van en versalita, como en las etiquetas.
   -------------------------------------------------------------------------- */

.compra-talles {
    gap: 10px;
}

.compra-talles .talle {
    min-width: 58px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--fondo);
}

.compra-talles .talle:hover:not(.sin-stock) {
    border-color: var(--tinta);
}

/* El talle sin stock se tacha con una diagonal, que es el gesto universal en
   las fichas de ropa, además del texto tachado que ya trae tienda.css. */
.compra-talles .talle.sin-stock {
    overflow: hidden;
}

.compra-talles .talle.sin-stock::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top left,
        transparent calc(50% - .5px),
        var(--gris-claro) calc(50% - .5px),
        var(--gris-claro) calc(50% + .5px),
        transparent calc(50% + .5px));
    opacity: .7;
}

.compra-ayuda {
    display: block;
    margin-top: 10px;
}

/* La cantidad no necesita ser ancha: son uno o dos dígitos. */
.compra-cantidad {
    max-width: 150px;
    margin-bottom: 0;
}


/* --- 7. Bloque de envío y devoluciones -------------------------------------
   Va abajo de los botones y contesta las tres preguntas que frenan una compra:
   cómo llega, cuánto sale y qué pasa si no le queda bien. Con iconitos SVG
   dibujados a mano en la plantilla (nada de librerías ni de CDN).
   -------------------------------------------------------------------------- */

.compra-servicios {
    margin-top: 28px;
    padding: 4px 0 0;
    border-top: 1px solid var(--borde);
    display: grid;
    gap: 2px;
    list-style: none;
}

.compra-servicio {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    font-size: .875rem;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--borde);
}

.compra-servicio:last-child {
    border-bottom: 0;
}

.compra-servicio svg {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--marca);
    flex: 0 0 auto;
}

.compra-servicio strong {
    display: block;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 2px;
}

.compra-servicio span {
    color: var(--gris);
    font-size: .8125rem;
}

.compra-marca {
    color: var(--marca);
}

/* La descripción, en su propio bloque separado por una línea. */
.compra-descripcion {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}

.compra-descripcion p {
    color: var(--tinta-suave);
    font-size: .9375rem;
    line-height: 1.65;
    white-space: pre-line;
    margin: 0;
}


/* --- 8. Carrito ------------------------------------------------------------
   Más aire entre líneas que en una tabla: cada ítem es una prenda, no un
   renglón de una planilla.
   -------------------------------------------------------------------------- */

.compra-linea {
    grid-template-columns: 96px 1fr auto;
    gap: 18px;
    padding: 22px 0;
    align-items: start;
}

.compra-linea:first-child {
    padding-top: 6px;
}

.compra-linea-foto {
    display: block;
    width: 96px;
    border-radius: var(--radio-chico);
    overflow: hidden;
    background: var(--fondo-hueco);
}

.compra-linea-foto img,
.compra-linea-foto .linea-carrito-foto {
    width: 96px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform var(--transicion);
}

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

.compra-linea-nombre {
    font-size: 1rem;
    display: inline-block;
    margin-bottom: 4px;
}

.compra-linea-nombre:hover {
    color: var(--marca);
}

.compra-linea-descripcion {
    margin: 0 0 12px;
}

.compra-linea-precio {
    text-align: right;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.compra-quitar {
    margin-top: 10px;
}

.compra-volver {
    display: inline-block;
    margin-top: 26px;
    font-size: .875rem;
    color: var(--gris);
}

.compra-volver:hover {
    color: var(--marca);
}


/* --- 9. Resumen (carrito y checkout) ---------------------------------------
   tienda.css ya lo deja pegajoso a 128px. Acá sólo se le da la sombra fría y
   se ordena la tipografía de los totales.
   -------------------------------------------------------------------------- */

.compra-resumen {
    box-shadow: var(--compra-sombra);
}

.compra-resumen-titulo {
    font-family: var(--tipografia-titulo);
    font-size: 1.1rem;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borde);
}

.compra-lineas-productos {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borde);
    font-size: .875rem;
}

.compra-lineas-productos .resumen-linea {
    padding: 0;
    border: 0;
    align-items: start;
    gap: 14px;
}

.compra-envio-gratis {
    color: var(--exito);
    font-weight: 600;
}

.compra-progreso {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

.compra-progreso p {
    margin: 8px 0 0;
    font-size: .8125rem;
}

.compra-cta {
    margin-top: 22px;
}

.compra-nota-cta {
    margin: 12px 0 0;
    font-size: .75rem;
    color: var(--gris);
    text-align: center;
}


/* --- 10. Checkout ----------------------------------------------------------
   Tarjetas separadas por tema (datos / entrega / pago). Es el lugar donde se
   cae la venta: cuanto más obvio el orden, menos gente se baja.
   -------------------------------------------------------------------------- */

.compra-tarjeta {
    border: 1px solid var(--borde);
    background: var(--fondo);
    border-radius: var(--radio);
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: var(--compra-sombra);
}

/* Numerito de la tarjeta, para que se lea como una secuencia de pasos. */
.compra-tarjeta-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tipografia-titulo);
    font-size: 1.15rem;
    margin: 0 0 18px;
}

.compra-tarjeta-titulo::before {
    content: attr(data-numero);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--compra-velo-2);
    color: var(--marca);
    font-family: var(--tipografia);
    font-size: .75rem;
    font-weight: 700;
}

.compra-tarjeta .campo:last-child {
    margin-bottom: 0;
}

/* El título de cada opción (retiro / envío / forma de pago) va en su propio
   renglón y el detalle debajo. En tienda.css son los dos en línea, y entonces
   "Retiro por el local" y "Sin cargo…" se leían como una sola frase corrida. */
.compra .opcion-titulo {
    display: block;
    margin-bottom: 2px;
}

.compra .opcion-detalle {
    display: block;
    line-height: 1.5;
}

/* Zona táctil cómoda: en el celular la opción entera se toca con el pulgar.
   El display:flex va explícito acá porque el de tienda.css no está llegando a
   la página (queda el redondel del radio en un renglón y el texto en otro).
   Está anotado en el informe para quien es dueño de esa hoja; mientras tanto,
   el checkout no puede quedar desalineado. */
.compra .opcion {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
}

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

/* El texto de la opción tiene que poder achicarse. Sin el min-width:0 su ancho
   mínimo es el de la palabra más larga, y en un celular angosto eso empuja al
   redondel del radio a un renglón aparte, arriba del título. */
.compra .opcion > span {
    flex: 1;
    min-width: 0;
}

/* Los campos de envío aparecen y desaparecen según la forma de entrega. Con
   `hidden` el navegador ya los saca; esto sólo evita que quede un hueco. */
#campos-envio[hidden] {
    display: none;
}


/* --- 11. Confirmación del pedido -------------------------------------------
   Acá la pantalla tiene UN héroe: el botón de WhatsApp. Es por ahí que se
   cierra la venta, así que todo lo demás (el detalle, los totales) queda
   deliberadamente más callado y más abajo.
   -------------------------------------------------------------------------- */

.compra-cabecera-pedido {
    text-align: center;
    padding: 8px 0 28px;
}

.compra-tilde {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--exito) 12%, var(--fondo));
    color: var(--exito);
}

.compra-tilde svg {
    width: 28px;
    height: 28px;
}

.compra-numero-pedido {
    font-size: .8125rem;
    color: var(--gris);
    margin: 0 0 18px;
}

.compra-numero-pedido strong {
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

/* El bloque héroe: fondo de marca muy suave, el botón grande y verde adentro
   y una sola frase que explica para qué sirve tocarlo. */
.compra-heroe {
    text-align: center;
    background: var(--compra-velo-2);
    border: 1px solid var(--compra-linea);
    border-radius: var(--radio);
    padding: 28px 22px;
    margin: 0 0 36px;
    box-shadow: var(--compra-sombra);
}

.compra-heroe h2 {
    font-family: var(--tipografia-titulo);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    margin: 0 0 8px;
}

.compra-heroe p {
    color: var(--tinta-suave);
    font-size: .9375rem;
    max-width: 46ch;
    margin: 0 auto 20px;
}

/* El botón héroe: más alto que un botón normal, con la sombra verde de
   WhatsApp para que se despegue del papel. */
.compra-heroe .boton-whatsapp {
    width: 100%;
    max-width: 380px;
    padding: 18px 28px;
    font-size: 1.05rem;
    gap: 10px;
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--whatsapp) 65%, transparent);
}

.compra-heroe .boton-whatsapp svg {
    width: 22px;
    height: 22px;
}

.compra-heroe-nota {
    margin: 16px 0 0;
    font-size: .75rem;
    color: var(--gris);
}

.compra-pedido-dato {
    margin: 0 0 16px;
}

.compra-pedido-dato:last-child {
    margin-bottom: 0;
}

.compra-pedido-dato dt {
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 4px;
}

.compra-pedido-dato dd {
    margin: 0;
    font-size: .9375rem;
    color: var(--tinta-suave);
}

.compra-pedido-items {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borde);
}

.compra-pedido-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
}

.compra-pedido-item-precio {
    font-weight: 700;
    white-space: nowrap;
}

/* El link para volver a ver el pedido: se selecciona de una con doble clic. */
.compra-link-pedido {
    display: block;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    color: var(--tinta-suave);
    word-break: break-all;
    user-select: all;
}


/* --- 12. Escritorio --------------------------------------------------------- */

@media (min-width: 900px) {

    .compra .seccion {
        padding-top: 28px;
    }

    /* La foto se lleva más de la mitad. */
    .ficha {
        grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
        gap: 56px;
    }

    /* Miniaturas verticales a la izquierda de la foto grande. La foto sigue
       primera en el HTML: acá sólo se la manda a la columna 2. */
    .compra-galeria {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .compra-galeria .galeria-principal {
        grid-column: 2;
        grid-row: 1;
    }

    .compra-galeria .galeria-miniaturas {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 10px;
        /* Una prenda puede tener ocho fotos: sin este tope, la tira de
           miniaturas se estira más que la foto grande y descuadra la ficha.
           Con el tope, las que sobran se alcanzan con la rueda del mouse. */
        max-height: min(72vh, 620px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding-right: 4px;
    }

    .compra-linea {
        grid-template-columns: 112px 1fr auto;
    }

    .compra-linea-foto,
    .compra-linea-foto img,
    .compra-linea-foto .linea-carrito-foto {
        width: 112px;
    }
}


/* --- 13. Celular ------------------------------------------------------------
   La mayoría compra desde el teléfono. Acá se desarma todo a una columna y se
   agrandan las zonas que se tocan con el dedo.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {

    .compra .dos-columnas {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* El resumen deja de estar pegado: en una columna quedaría flotando sobre
       el contenido en vez de al costado. */
    .compra .resumen {
        position: static;
    }

    /* Los pasos, en pantallas muy angostas, sólo con el número y sin borde:
       ocupan una línea y no se parten en dos. */
    .compra-pasos {
        gap: 2px;
        margin-bottom: 22px;
    }

    .compra-paso-item {
        padding: 6px 10px 6px 6px;
        font-size: .625rem;
    }

    .compra-linea {
        grid-template-columns: 80px 1fr;
        gap: 14px;
        padding: 18px 0;
    }

    .compra-linea-foto,
    .compra-linea-foto img,
    .compra-linea-foto .linea-carrito-foto {
        width: 80px;
    }

    /* El precio y el botón de quitar bajan a una fila propia debajo del
       nombre, alineados a la izquierda: si quedaran en una tercera columna
       la línea se aplastaría. */
    .compra-linea-precio {
        grid-column: 2;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .compra-quitar {
        margin-top: 0;
    }

    .compra-heroe {
        padding: 24px 16px;
    }

    .compra-tarjeta {
        padding: 18px 16px;
    }
}

@media (max-width: 380px) {
    /* En pantallas muy chicas el rótulo de los pasos sobra: queda el número. */
    .compra-paso-texto {
        display: none;
    }
}


/* --- 14. Movimiento ---------------------------------------------------------
   Si el sistema pide menos movimiento, se apagan las transiciones. Acá no hay
   nada animado que sea información, así que no se pierde nada.
   -------------------------------------------------------------------------- */

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

    .compra-linea-foto:hover img {
        transform: none;
    }
}