/*
   Fredoka, servida desde este mismo dominio y no desde el CDN de Google.

   Cargarla desde fonts.googleapis.com le manda la IP de cada visitante a
   Google antes de que la persona toque nada, y este sitio publica una política
   de tratamiento de datos bajo la Ley 1581: o se declara ese envío, o no se
   hace. Se eligió no hacerlo. De paso desaparecen tres peticiones a dos
   dominios externos, que son las que más retrasan el primer dibujado.

   Es una fuente variable, así que los tres pesos que usa el sitio (500, 600 y
   700) salen del mismo archivo: 34 KB en total por los dos subconjuntos. El
   "font-weight: 500 700" es lo que declara ese rango; con un peso fijo el
   navegador fingiría los otros dos deformando el trazo.

   Licencia SIL Open Font License 1.1, incluida en fuentes/OFL.txt tal como
   exige: quien redistribuye la fuente redistribuye también su licencia.

   font-display: swap — el texto se ve desde el primer momento con la fuente
   del sistema y cambia cuando la propia llega. La alternativa es texto
   invisible durante los primeros cientos de milisegundos.
*/
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('fuentes/fredoka-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

/*
   Latín extendido. El sitio no lo usa hoy, pero pesa 4 KB y el navegador solo
   lo descarga si aparece un carácter de este rango: no cuesta nada tenerlo y
   evita que una ñ rara o un símbolo de moneda salgan con otra tipografía.
*/
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('fuentes/fredoka-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --espacio-2xs: 0.25rem;
    --espacio-xs: 0.5rem;
    --espacio-sm: 0.75rem;
    --espacio-md: 1rem;
    --espacio-lg: 1.5rem;
    --espacio-xl: 3rem;
    --radio: 0.5rem;
    --ancho-max: 1200px;

    /*
       Aire lateral de todas las secciones. Es una variable y no un valor fijo
       porque cambia en el único punto de quiebre del sitio: en móvil roba
       menos ancho al contenido, en pantallas grandes respira más.
    */
    --espacio-borde: var(--espacio-md);

    --color-texto: #3d2b32;
    --color-suave: #8a6b76;
    --color-borde: #f3d6e3;
    --color-fondo-suave: #fdf1f6;
    --color-acento: #c2387a;
    --color-acento-suave: #f4b8d4;

    --sombra-suave: 0 2px 10px rgba(214, 72, 138, 0.12);
    --fuente-titulo: 'Fredoka', system-ui, sans-serif;
}

/*
   Regla base: el ancho declarado incluye el relleno y el borde. Sin esto,
   un "max-width: 1200px" con relleno lateral mide en pantalla 1248px, y ese
   desfase silencioso es el que metía una quinta columna en el catálogo.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
   El atributo "hidden" del HTML se aplica con la regla [hidden] { display: none }
   de la hoja del navegador, que tiene la especificidad más baja que existe.
   Cualquier clase propia que declare display —un .carrito-fila con display:flex,
   por ejemplo— le gana sin querer, y el elemento se queda a la vista aunque el
   JavaScript diga que está oculto.

   Este es uno de los poquísimos sitios donde !important está justificado: no es
   una preferencia de estilo, es garantizar que "oculto" signifique oculto pase
   lo que pase encima.
*/
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: var(--color-texto);
    line-height: 1.5;
}

a {
    color: inherit;
}

/* --- Foco de teclado --- */

/*
   Solo se dibuja cuando el foco llega por teclado; con el ratón el navegador
   lo omite. El "outline-offset" separa el aro del elemento para que no se
   confunda con su propio borde.
*/
:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* Sobre el rosado del botón el aro de acento se pierde: se oscurece. */
.boton:focus-visible {
    outline-color: var(--color-texto);
}

/* --- Utilidades --- */

/*
   Oculta a la vista pero deja el texto disponible para lectores de pantalla.
   El "position: absolute" aquí no maqueta nada: solo saca el texto del flujo
   para que no ocupe espacio. Es la única excepción a la regla de no usarlo.
*/
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Cabecera --- */

.cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-md);
    padding: var(--espacio-md) var(--espacio-borde);
    border-bottom: 1px solid var(--color-borde);
    max-width: var(--ancho-max);
    margin-inline: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: 1.25rem;
    text-decoration: none;
}

.logo img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.cabecera nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espacio-md);
    /*
       En móvil el nav no cabe al lado del logo. En vez de dejar que envuelva
       solo y quede desalineado a la izquierda, se le ordena ocupar toda la
       línea: baja siempre y queda centrado bajo el logo.
    */
    flex-basis: 100%;
}

/*
   El resumen del carrito, que además lo abre. Va después del nav, y como el nav
   ocupa toda la línea en móvil, este cae solo en la suya y queda centrado.
*/
.carrito-resumen {
    padding: var(--espacio-2xs) var(--espacio-md);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    background-color: #fff;
    /* Los botones no heredan la tipografía del documento: hay que pedírselo. */
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-suave);
    cursor: pointer;
}

/* --- Banner --- */

.banner {
    padding: var(--espacio-xl) var(--espacio-borde);
    text-align: center;
    background-color: var(--color-fondo-suave);
}

.banner h1 {
    margin: 0 0 var(--espacio-sm);
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
}

.banner-apoyo {
    margin: 0 auto var(--espacio-lg);
    max-width: 45ch;
    color: var(--color-suave);
}

.boton {
    display: inline-block;
    padding: var(--espacio-sm) var(--espacio-lg);
    border: none;
    border-radius: var(--radio);
    background-color: var(--color-acento);
    color: #fff;
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--sombra-suave);
}

/* --- Catálogo --- */

#productos {
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding: var(--espacio-xl) var(--espacio-borde);
}

.productos-grid {
    display: grid;
    /*
       El "min(220px, 100%)" es el seguro: si el contenedor llegara a ser más
       angosto que 220px, la columna se limita al 100% en vez de desbordar y
       sacar barra horizontal. Sin él, minmax impone un mínimo rígido.
    */
    /*
       auto-fill y no auto-fit: el catálogo crece de a un producto, y auto-fit
       estiraba una tarjeta sola hasta ocupar toda la fila.
    */
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--espacio-lg);
    margin-top: var(--espacio-lg);
}

.producto {
    /*
       Columna flexible para que las tarjetas de una misma fila se alineen
       entre sí aunque tengan distinto contenido: la imagen arriba y el
       precio abajo, siempre a la misma altura.
    */
    display: flex;
    flex-direction: column;
    padding: var(--espacio-sm);
    border-radius: var(--radio);
    text-align: center;
    background-color: #fff;
    box-shadow: var(--sombra-suave);
}

.insignia {
    display: inline-block;
    /* Como ítem flexible se estiraría a todo el ancho: se encoge a su contenido. */
    align-self: center;
    margin-top: var(--espacio-xs);
    padding: var(--espacio-2xs) var(--espacio-sm);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.insignia--oferta {
    background-color: var(--color-acento);
    color: #fff;
}

.insignia--nuevo {
    background-color: var(--color-acento-suave);
    color: var(--color-texto);
}

.insignia--destacado {
    background-color: #fff;
    color: var(--color-acento);
    border: 1px solid var(--color-acento);
}

/*
   No todas las tarjetas llevan insignia. Con "order" la imagen sube siempre
   al primer lugar, así el borde superior coincide en todas y la insignia
   pasa a quedar entre la imagen y el título. Va en el enlace, que es el
   hijo de la tarjeta; la imagen está dentro.
*/
.producto-imagen {
    display: block;
    order: -1;
}

.producto img {
    display: block;
    width: 100%;
    /*
       Los atributos "width" y "height" del HTML llegan como estilo. El width
       de arriba pisa el primero, pero sin este "auto" la imagen conserva su
       altura real en píxeles: con las dos medidas definidas el navegador
       descarta el aspect-ratio y cada tarjeta queda de un alto distinto.
    */
    height: auto;
    aspect-ratio: 1 / 1;
    /*
       contain y no cover: un envoltorio de mug es tres veces más ancho que
       alto, y cover le cortaba los lados, que es donde van las frases. El
       fondo suave rellena lo que sobra del cuadrado.
    */
    object-fit: contain;
    border-radius: var(--radio);
    background-color: var(--color-fondo-suave);
}

.producto h3 {
    margin: var(--espacio-sm) 0 var(--espacio-sm);
    font-size: 1rem;
}

.producto h3 a {
    color: inherit;
    text-decoration: none;
}

.producto h3 a:hover,
.producto h3 a:focus-visible {
    color: var(--color-acento);
    text-decoration: underline;
}

.formatos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espacio-2xs);
    margin: 0 0 var(--espacio-sm);
    padding: 0;
    list-style: none;
}

.formatos li {
    padding: var(--espacio-2xs) var(--espacio-xs);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-size: 0.75rem;
    color: var(--color-suave);
}

.precios {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--espacio-sm);
    /* El margen automático empuja el precio al fondo de la tarjeta. */
    margin: auto 0 0;
}

.precio-antes {
    color: var(--color-suave);
    font-size: 0.875rem;
}

.precio-ahora {
    font-weight: 700;
}

/*
   El botón ocupa todo el ancho de la tarjeta: es el destino obvio del dedo en
   móvil. Sin sombra propia, que la tarjeta ya tiene la suya y dos se estorban.
*/
.boton-agregar {
    width: 100%;
    margin-top: var(--espacio-sm);
    padding: var(--espacio-xs) var(--espacio-sm);
    font-size: 0.875rem;
    box-shadow: none;
}

.catalogo-aviso {
    margin: var(--espacio-lg) 0 0;
    text-align: center;
    color: var(--color-suave);
}

/* --- Campos de formulario --- */

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2xs);
}

.campo input {
    padding: var(--espacio-sm);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    /* Los campos no heredan la tipografía del documento: hay que pedírselo. */
    font: inherit;
    color: inherit;
}

.campo-acepto {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-xs);
    font-size: 0.875rem;
    color: var(--color-suave);
}

.campo-acepto input {
    /* Baja la casilla hasta la primera línea del texto, que puede ocupar dos. */
    margin-top: 0.2em;
    flex-shrink: 0;
    accent-color: var(--color-acento);
}

/* --- Checkout dentro del carrito --- */

.carrito-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-sm);
    border-top: 1px solid var(--color-borde);
    padding-top: var(--espacio-md);
    margin-top: var(--espacio-md);
}

.carrito-checkout h3 {
    margin: 0;
    font-size: 1rem;
}

.campo-opcional {
    color: var(--color-suave);
    font-weight: 400;
}

/*
   El aviso nace vacío y un elemento vacío no ocupa alto, pero sí cuenta como
   hijo del contenedor con gap. Sin :empty dejaría un hueco permanente.
*/
.carrito-aviso {
    margin: var(--espacio-sm) 0 0;
    color: var(--color-acento);
    font-size: 0.875rem;
}

.carrito-aviso:empty {
    display: none;
}

/* --- FAQ --- */

#faq {
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding: var(--espacio-xl) var(--espacio-borde);
}

#faq details {
    padding: var(--espacio-sm) var(--espacio-md);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    margin-top: var(--espacio-sm);
}

#faq summary {
    font-family: var(--fuente-titulo);
    font-weight: 500;
    cursor: pointer;
}

#faq p {
    margin: var(--espacio-sm) 0 0;
    color: var(--color-suave);
}

/* --- Panel del carrito --- */

.carrito-panel {
    /* El navegador le pone borde y relleno propios al dialog: se los quita. */
    border: none;
    padding: 0;
    /*
       Un dialog se centra solo con márgenes automáticos. Con el izquierdo en
       auto y los demás en cero queda pegado a la derecha y a toda la altura de
       la ventana: es el panel lateral, sin una gota de posicionamiento absoluto.
    */
    margin: 0 0 0 auto;
    width: min(26rem, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    background-color: #fff;
    color: var(--color-texto);
}

/* El fondo oscuro que el propio dialog dibuja detrás cuando está abierto. */
.carrito-panel::backdrop {
    background-color: rgba(61, 43, 50, 0.5);
}

/*
   El relleno vive aquí y no en el dialog a propósito: así un clic en el margen
   cae sobre el fondo y cierra el panel, en vez de caer en el borde del diálogo
   y no hacer nada.
*/
.carrito-cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-md);
    height: 100%;
    padding: var(--espacio-lg) var(--espacio-borde);
}

.carrito-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-md);
}

.carrito-encabezado h2 {
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
}

.carrito-cerrar {
    padding: var(--espacio-2xs) var(--espacio-xs);
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-suave);
    cursor: pointer;
}

/*
   La lista es lo único que crece y se desplaza. El total se queda pegado abajo
   aunque el carrito lleve veinte plantillas.
*/
.carrito-lista {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carrito-linea {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-sm);
    padding: var(--espacio-sm) 0;
    border-bottom: 1px solid var(--color-borde);
}

.carrito-linea img {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radio);
    background-color: var(--color-fondo-suave);
}

.carrito-linea-datos {
    flex: 1;
    /* Sin esto un título largo estira la fila en vez de partirse en dos líneas. */
    min-width: 0;
}

.carrito-linea-titulo {
    margin: 0;
    font-size: 0.9375rem;
}

.carrito-linea-unitario {
    margin: var(--espacio-2xs) 0 var(--espacio-xs);
    font-size: 0.8125rem;
    color: var(--color-suave);
}

.carrito-controles {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
}

.carrito-paso {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-borde);
    border-radius: 50%;
    background-color: #fff;
    font: inherit;
    color: var(--color-texto);
    cursor: pointer;
}

.carrito-cantidad {
    min-width: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

.carrito-eliminar {
    /* El margen automático lo empuja al extremo opuesto de los controles. */
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-suave);
    text-decoration: underline;
    cursor: pointer;
}

.carrito-linea-subtotal {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.carrito-vacio {
    flex: 1;
    margin: 0;
    color: var(--color-suave);
}

.carrito-cupon {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2xs);
    font-size: 0.875rem;
}

.carrito-cupon-fila {
    display: flex;
    gap: var(--espacio-xs);
}

.carrito-cupon input {
    flex: 1;
    /* Sin esto el campo se niega a encogerse y desborda el panel en móvil. */
    min-width: 0;
    padding: var(--espacio-xs) var(--espacio-sm);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font: inherit;
    color: inherit;
}

.carrito-cupon-boton {
    padding: var(--espacio-xs) var(--espacio-md);
    font-size: 0.875rem;
    box-shadow: none;
}

.carrito-cupon-aviso {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-acento);
}

/* Sin texto no debe dejar un hueco en blanco entre el campo y las cuentas. */
.carrito-cupon-aviso:empty {
    display: none;
}

/* El "Quitar el cupón" comparte estilo con el de las líneas, pero no su empujón. */
.carrito-cupon .carrito-eliminar {
    align-self: flex-start;
    margin-left: 0;
}

.carrito-cuentas {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2xs);
    padding-top: var(--espacio-md);
    border-top: 1px solid var(--color-borde);
}

.carrito-fila {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-md);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-suave);
}

.carrito-descuento {
    color: var(--color-acento);
}

.carrito-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--espacio-md);
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 1.125rem;
}

/* --- Páginas legales --- */

.legal {
    max-width: 70ch;
    margin-inline: auto;
    padding: var(--espacio-xl) var(--espacio-borde);
}

.legal h1 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    margin: 0 0 var(--espacio-sm);
}

.legal-fecha {
    margin: 0 0 var(--espacio-xl);
    color: var(--color-suave);
    font-size: 0.875rem;
}

.legal h2 {
    margin: var(--espacio-xl) 0 var(--espacio-sm);
    font-size: 1.125rem;
}

.legal section:first-of-type h2 {
    margin-top: 0;
}

.legal p,
.legal li {
    color: var(--color-texto);
}

.legal ul {
    padding-left: var(--espacio-lg);
}

/* --- Pie --- */

.pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-lg);
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding: var(--espacio-xl) var(--espacio-borde);
    border-top: 1px solid var(--color-borde);
}

.pie-redes {
    display: flex;
    gap: var(--espacio-sm);
    margin: var(--espacio-sm) 0 0;
    padding: 0;
    list-style: none;
}

.pie-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--color-fondo-suave);
    color: var(--color-acento);
    transition: background-color 0.2s;
}

.pie-redes a:hover {
    background-color: var(--color-acento);
    color: #fff;
}

.pie h2 {
    margin: 0 0 var(--espacio-sm);
    font-size: 1rem;
}

.pie p {
    margin: 0 0 var(--espacio-2xs);
    color: var(--color-suave);
}

.pie-enlaces {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-suave);
}

.pie-copy {
    flex-basis: 100%;
    font-size: 0.8125rem;
}

/* --- Punto de quiebre --- */

/*
   Todo lo de arriba es la versión de móvil. Este bloque solo añade lo que
   sobra a partir de 40rem (640px): más aire lateral y la cabecera en una
   sola fila. Se escribe con "min-width" y no con "max-width" para no tener
   que deshacer estilos: aquí solo se suma.

   El quiebre está en "rem" a propósito. Si el usuario agranda la letra del
   navegador, el diseño cambia a la versión de móvil, que es justo lo que
   necesita a esa escala.
*/
/* --- Panel de ventas (admin.html) --- */

.admin {
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding: var(--espacio-xl) var(--espacio-borde);
}

.admin-entrar {
    display: grid;
    gap: var(--espacio-md);
    max-width: 24rem;
}

.admin-mensaje {
    color: var(--color-suave);
}

.admin-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-sm);
    margin-block: var(--espacio-md);
}

.boton-secundario {
    background-color: #fff;
    color: var(--color-acento);
    box-shadow: inset 0 0 0 1px var(--color-acento);
}

/* A 360 px seis columnas no caben: se desplaza la tabla, no la página. */
.admin-tabla-marco {
    overflow-x: auto;
}

.admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-tabla caption {
    text-align: left;
    color: var(--color-suave);
    padding-block-end: var(--espacio-xs);
}

.admin-tabla th,
.admin-tabla td {
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 1px solid var(--color-borde);
    text-align: left;
    vertical-align: top;
}

.admin-tabla tr[data-estado="aprobada"] td:last-child {
    color: var(--color-acento);
    font-weight: 600;
}

@media (min-width: 40rem) {
    :root {
        --espacio-borde: var(--espacio-lg);
    }

    .cabecera {
        justify-content: space-between;
    }

    .cabecera nav {
        /* "auto" devuelve el nav a su ancho natural: vuelve a caber al lado del logo. */
        flex-basis: auto;
    }

    .pie {
        gap: var(--espacio-xl);
    }
}

/* --- Página del pedido --- */

.pedido-mensaje {
    font-size: 1.125rem;
}

.pedido-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-sm);
    margin-top: var(--espacio-lg);
}

/* --- Recuperar mis compras --- */

.recuperar-form {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-md);
    max-width: 28rem;
    margin-block: var(--espacio-lg);
}

.recuperar-form .boton {
    align-self: flex-start;
}

/* Página de cada producto (/producto/<slug>), la arma api/rutas/producto.js. */
.producto-pagina {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: var(--espacio-lg) var(--espacio-borde) var(--espacio-xl);
}

.producto-volver {
    margin: 0 0 var(--espacio-md);
}

.producto-detalle {
    display: grid;
    /* minmax(0, …): sin él la columna crece al ancho natural de la imagen y la página se sale en móvil. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-lg);
    align-items: start;
}

/* Un envoltorio de mug es ancho y bajo: a lo ancho de la columna, sin recortarlo. */
.producto-detalle-imagen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radio);
    background-color: var(--color-fondo-suave);
    box-shadow: var(--sombra-suave);
}

.producto-detalle-info h1 {
    margin: 0 0 var(--espacio-xs);
    font-family: var(--fuente-titulo);
    font-size: 1.75rem;
    line-height: 1.2;
}

.producto-detalle-info .precios {
    justify-content: flex-start;
    margin: var(--espacio-sm) 0 var(--espacio-md);
    font-size: 1.25rem;
}

.producto-detalle-info .boton {
    display: inline-block;
    margin-bottom: var(--espacio-md);
    text-decoration: none;
}

.producto-detalle-info p {
    line-height: 1.6;
}

.producto-cancion {
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio);
    background-color: var(--color-fondo-suave);
}

.producto-incluye {
    margin-top: var(--espacio-xl);
    padding: var(--espacio-lg);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.producto-incluye h2 {
    margin-top: 0;
}

.producto-incluye li {
    margin-bottom: var(--espacio-xs);
    line-height: 1.5;
}

@media (min-width: 40rem) {
    .producto-detalle {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

/* Para qué producto y a qué tamaño, en dos columnas cortas junto al precio. */
.producto-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-sm) var(--espacio-lg);
    margin: 0 0 var(--espacio-md);
}

.producto-ficha dt {
    font-size: 0.75rem;
    color: var(--color-suave);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.producto-ficha dd {
    margin: 0;
    font-weight: 600;
}

/* Las visitas en el panel: tres tablas cortas, en columna en el celular y lado a lado en pantalla grande. */
.admin-subtitulo {
    margin: var(--espacio-xl) 0 var(--espacio-xs);
}

.admin-visitas {
    display: grid;
    gap: var(--espacio-lg);
}

@media (min-width: 40rem) {
    .admin-visitas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}