/* ═══════════════════════════════════════════════════════════════
   AllShop — estilos de la tienda
   Sigue al dispositivo: claro u oscuro según prefers-color-scheme. Sin fuentes externas ni JS de framework.

   Paleta (10-11-2026) sacada del logo de EvoShop: el violeta y el azul eléctrico de los anillos, el azul
   noche del fondo y el dorado de la estrella.
   - Fríos para vitrinear: el violeta y el azul bajan la tensión y alargan la visita; el fondo nunca es blanco
     ni negro puro, es un lavanda muy suave (claro) o el azul noche del logo (oscuro), para que las fotos
     destaquen y la vista descanse.
   - Cálido para comprar: el dorado de la estrella se reserva para la acción de compra («Agregar al carro»,
     «Continuar», «Ir a pagar»). Es el único color cálido de la página, así que el ojo lo encuentra solo.
   - La oferta va en un rojo coral, separado del dorado: urgencia sin confundirse con el botón.
   - Texto en tinta índigo en vez de negro: menos duro y de la misma familia de la marca.
   Contrastes AA verificados (texto ≥ 4,5:1, incluido el botón dorado con tinta índigo).
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --plano: #f6f4fb; --superficie: #ffffff; --tinta: #1c1940; --tinta-2: #4a4670; --tinta-muda: #67638a;
  --grilla: #e8e4f4; --eje: #cdc6e6; --marca: #5a3fd0; --marca-fuerte: #4429b0; --marca-suave: #efeafe; --sobre-marca: #ffffff;
  --accion: #f2b43c; --accion-fuerte: #e09d1c; --sobre-accion: #1c1940; --estrella: #e8a21c;
  --oferta: #c8283c; --sobre-oferta: #ffffff; --borde: rgba(28, 25, 64, 0.10);
  --sombra: 0 1px 2px rgba(44, 30, 120, .05), 0 6px 20px rgba(44, 30, 120, .06);
  --sombra-alta: 0 2px 4px rgba(44, 30, 120, .06), 0 14px 32px rgba(44, 30, 120, .14);
  --cielo: radial-gradient(120% 140% at 100% 0%, #e6dcff 0%, transparent 55%), radial-gradient(90% 120% at 0% 100%, #dcefff 0%, transparent 60%), #ffffff;
  --degradado: linear-gradient(90deg, #6748d8 0%, #3b82f6 55%, #38bdf8 85%, #f2b43c 100%);
  --radio: 10px; --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plano: #0c0a1d; --superficie: #16132d; --tinta: #f2f0fb; --tinta-2: #c9c4e6; --tinta-muda: #9f99c8;
    --grilla: #241f47; --eje: #3a3466; --marca: #a593ff; --marca-fuerte: #c8bdff; --marca-suave: #251d57; --sobre-marca: #0c0a1d;
    --accion: #ffc457; --accion-fuerte: #ffd486; --sobre-accion: #1a1433; --estrella: #ffc457;
    --oferta: #ff8f8f; --sobre-oferta: #2a0a10; --borde: rgba(200, 189, 255, 0.12);
    --sombra: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-alta: 0 0 0 1px rgba(165, 147, 255, .35), 0 12px 32px rgba(103, 72, 216, .28);
    --cielo: radial-gradient(120% 140% at 100% 0%, rgba(122, 82, 255, .35) 0%, transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(56, 160, 255, .22) 0%, transparent 60%), #16132d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0c0a1d; --superficie: #16132d; --tinta: #f2f0fb; --tinta-2: #c9c4e6; --tinta-muda: #9f99c8;
  --grilla: #241f47; --eje: #3a3466; --marca: #a593ff; --marca-fuerte: #c8bdff; --marca-suave: #251d57; --sobre-marca: #0c0a1d;
  --accion: #ffc457; --accion-fuerte: #ffd486; --sobre-accion: #1a1433; --estrella: #ffc457;
  --oferta: #ff8f8f; --sobre-oferta: #2a0a10; --borde: rgba(200, 189, 255, 0.12);
  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-alta: 0 0 0 1px rgba(165, 147, 255, .35), 0 12px 32px rgba(103, 72, 216, .28);
  --cielo: radial-gradient(120% 140% at 100% 0%, rgba(122, 82, 255, .35) 0%, transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(56, 160, 255, .22) 0%, transparent 60%), #16132d;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--plano); color: var(--tinta); font-family: var(--fuente); font-size: 1rem; line-height: 1.5; }
img { max-width: 100%; height: auto; }
a { color: var(--marca); text-underline-offset: .15em; }
a:hover { color: var(--marca-fuerte); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.2; margin: 1.5rem 0 .75rem; text-wrap: balance; }
h2 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 .75rem; text-wrap: balance; }
h3 { font-size: 1.0625rem; margin: 0 0 .5rem; }

.contenedor { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: .5rem 1rem; z-index: 100; }
.saltar:focus { left: 1rem; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera { background: var(--degradado) top / 100% 3px no-repeat, var(--superficie); border-bottom: 1px solid var(--borde); padding-top: 3px; }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-top: .75rem; padding-bottom: .5rem; }
.logo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: 1.375rem; color: var(--tinta); text-decoration: none; }
.logo svg { fill: var(--marca); }
.logo picture { display: block; }
.logo__img { display: block; height: 72px; width: auto; }
@media (max-width: 40rem) { .logo__img { height: 56px; } }
.pie__evolving { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; font-size: .875rem; color: var(--tinta-2); }
.pie__evolving picture { flex: none; }
.pie__evolving img { display: block; width: 120px; height: auto; }
.buscador { display: flex; flex: 1 1 18rem; max-width: 34rem; }
.buscador input { flex: 1; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--eje); border-right: 0; border-radius: var(--radio) 0 0 var(--radio); background: var(--plano); color: var(--tinta); font: inherit; }
.buscador button { border-radius: 0 var(--radio) var(--radio) 0; }
.carro-boton { display: inline-flex; align-items: center; gap: .4rem; color: var(--tinta); text-decoration: none; font-weight: 600; position: relative; margin-left: auto; }
.carro-boton__n { background: var(--marca); color: var(--sobre-marca); border-radius: 999px; font-size: .75rem; padding: .05rem .45rem; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding-bottom: .625rem; font-size: .9375rem; }
.menu a, .menu summary { color: var(--tinta); text-decoration: none; font-weight: 500; cursor: pointer; }
.menu a:hover, .menu summary:hover { color: var(--marca); }
.menu__mas { position: relative; }
.menu__mas summary { list-style: none; }
.menu__mas summary::after { content: " ▾"; font-size: .75em; }
.menu__panel { position: absolute; z-index: 20; top: 1.75rem; left: 0; display: grid; gap: .35rem; min-width: 12rem; padding: .75rem 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }

/* ── Botones y formularios ────────────────────────────────────────────── */
button, .boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem; border: 0; border-radius: var(--radio); background: var(--marca); color: var(--sobre-marca); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
button:hover, .boton:hover { background: var(--marca-fuerte); color: var(--sobre-marca); }
button:disabled { opacity: .5; cursor: not-allowed; }
.boton--grande { padding: .8rem 1.5rem; font-size: 1.0625rem; width: 100%; }
/* El botón de compra es el único cálido de la página (ver la paleta arriba). */
.boton--grande:not(:disabled) { background: var(--accion); color: var(--sobre-accion); box-shadow: 0 2px 10px color-mix(in srgb, var(--accion) 35%, transparent); }
.boton--grande:not(:disabled):hover { background: var(--accion-fuerte); color: var(--sobre-accion); }
.boton--secundario { background: var(--marca-suave); color: var(--marca-fuerte); }
.boton--secundario:hover { background: var(--marca-suave); color: var(--tinta); }
.boton--texto { background: none; color: var(--marca); padding: .25rem .5rem; }
.boton--texto:hover { background: var(--marca-suave); color: var(--marca-fuerte); }
/* input:not([type]): el InputText de Blazor sin «type» sale como <input> a secas y quedaba con el estilo del navegador. */
select, input:not([type]), input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], textarea {
  padding: .5rem .65rem; border: 1px solid var(--eje); border-radius: 8px; background: var(--superficie); color: var(--tinta); font: inherit; max-width: 100%; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--tinta-2); opacity: .7; }
/* El autocompletado del navegador pinta su propio fondo claro: se tapa con el de la tienda. */
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--tinta); box-shadow: 0 0 0 1000px var(--superficie) inset; caret-color: var(--tinta); }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
label { display: grid; gap: .25rem; font-size: .875rem; color: var(--tinta-2); }
label.casilla, label.radio { display: flex; align-items: center; gap: .5rem; color: var(--tinta); font-size: .9375rem; }
label.casilla input, label.radio input { width: auto; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: 1rem; margin: 0 0 1rem; display: grid; gap: .75rem; }
legend { font-weight: 700; padding: 0 .4rem; }
.error { color: var(--oferta); font-size: .8125rem; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0 0 1.25rem; padding: .875rem 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.filtros label { min-width: 0; }
.filtros input[type="search"] { min-width: 14rem; }

/* ── Páginas ──────────────────────────────────────────────────────────── */
main { padding-bottom: 3rem; }
.bajada { font-size: 1.0625rem; color: var(--tinta-2); max-width: 46rem; }
.seccion { margin-top: 2.5rem; }
.seccion__titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.migas { margin-top: 1rem; font-size: .875rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: .4rem; }
.aviso { padding: .625rem .875rem; border-radius: var(--radio); background: var(--marca-suave); }
.aviso--atencion { background: #fff3c4; color: #3d3200; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aviso--atencion { background: #3d3200; color: #fff3c4; } }
:root[data-theme="dark"] .aviso--atencion { background: #3d3200; color: #fff3c4; }
.pie__chico { font-size: .8125rem; color: var(--tinta-muda); }
.agotado { color: var(--oferta); font-weight: 600; font-size: .8125rem; }
.precio-antes { color: var(--tinta-muda); margin-right: .35rem; }

.portada { margin: 1.5rem 0 0; padding: 2rem 1.5rem; border-radius: 16px; background: var(--cielo); border: 1px solid var(--borde); }
.portada h1 { margin-top: 0; max-width: 40rem; }
.portada p { max-width: 42rem; color: var(--tinta-2); font-size: 1.0625rem; }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.portada__nota { font-weight: 600; color: var(--marca); }
.categorias { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.categorias a { display: inline-block; padding: .45rem .9rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; text-decoration: none; color: var(--tinta); font-weight: 500; }
.categorias a:hover { border-color: var(--marca); color: var(--marca); }
.explica { padding: 1.5rem; border-radius: 16px; background: var(--marca-suave); }
.explica p { margin: 0; max-width: 48rem; }

/* ── Grilla y tarjeta ─────────────────────────────────────────────────── */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.tarjeta:hover, .tarjeta:focus-within { box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--marca) 35%, transparent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .tarjeta, .tarjeta:hover, .tarjeta:focus-within { transition: none; transform: none; } }
.tarjeta__enlace { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.tarjeta__imagen { position: relative; aspect-ratio: 4 / 3; background: var(--plano); display: grid; place-items: center; color: var(--tinta-muda); font-size: .875rem; }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__oferta { position: absolute; top: .5rem; left: .5rem; background: var(--oferta); color: var(--sobre-oferta); font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; }
.tarjeta__cuerpo { padding: .75rem .875rem 1rem; display: grid; gap: .2rem; flex: 1; }
.tarjeta__marca { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-muda); }
.tarjeta__nombre { margin: 0; font-size: 1rem; line-height: 1.3; }
.tarjeta__pie { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding-top: .5rem; }
.tarjeta__precio { font-weight: 700; }

/* ── Ficha de producto ────────────────────────────────────────────────── */
.producto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 1rem; }
@media (max-width: 48rem) { .producto { grid-template-columns: 1fr; } }
.producto__imagen { aspect-ratio: 4 / 3; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; display: grid; place-items: center; color: var(--tinta-muda); overflow: hidden; }
.producto__imagen img { width: 100%; height: 100%; object-fit: cover; }
.producto__marca { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-muda); }
.producto__info h1 { margin-top: .25rem; }
.producto__precio { font-size: 1.5rem; margin: .5rem 0; }
.comprar { display: grid; gap: .75rem; padding: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.comprar__fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.comprar__fila label { width: 7rem; }
.comprar__fila .boton { flex: 1; width: auto; }
.opciones { display: grid; gap: .4rem; padding: .75rem; }
.opcion { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 8px; color: var(--tinta); cursor: pointer; }
.opcion input { width: auto; }
.opcion__precio { margin-left: auto; font-weight: 600; }
.opcion--agotada { opacity: .6; }
.caracteristicas { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 1rem 0; }
.caracteristicas dt { font-weight: 600; color: var(--tinta-2); }
.caracteristicas dd { margin: 0; }

/* ── Carro, checkout, pedido ──────────────────────────────────────────── */
.carro, .checkout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 52rem) { .carro, .checkout { grid-template-columns: 1fr; } }
.carro__tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.carro__tabla th, .carro__tabla td { padding: .6rem .75rem; border-bottom: 1px solid var(--grilla); text-align: left; vertical-align: top; }
.carro__tabla thead th { font-size: .8125rem; color: var(--tinta-2); }
/* Un paquete por bodega (sql/010): los productos que viajan juntos y pagan un envío. */
.carro__paquete th { background: var(--plano); font-weight: 700; border-top: 2px solid var(--borde); }
.carro__paquete-envio { display: block; font-weight: 400; }
.resumen__paquete { margin: .5rem 0 .25rem; font-weight: 700; }
.carro__tabla tbody th { font-weight: 500; display: grid; gap: .15rem; }
.carro__cantidad { display: flex; gap: .4rem; align-items: center; }
.carro__cantidad input { width: 4.5rem; }
.carro__agotada { opacity: .7; }
.resumen { position: sticky; top: 1rem; padding: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); display: grid; gap: .5rem; }
.resumen h2 { margin-bottom: .25rem; }
.resumen__fila { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.resumen__total { font-weight: 700; font-size: 1.125rem; border-top: 1px solid var(--grilla); padding-top: .5rem; }
.checkout__form { display: grid; gap: 1rem; }
.campos-direccion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.campos-direccion .ancho-2 { grid-column: span 2; }
@media (max-width: 36rem) { .campos-direccion { grid-template-columns: 1fr; } .campos-direccion .ancho-2 { grid-column: auto; } }
.radios { display: grid; gap: .4rem; }
.medios { gap: .5rem; }
.ir-a-pagar { padding: 1.5rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); display: grid; gap: 1rem; max-width: 28rem; }
.reintento { display: grid; gap: .75rem; padding: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 1rem; }
.pedido { display: grid; gap: 1rem; }
.pedido__estado { margin: 0; }
.seguimiento { display: grid; gap: .75rem; max-width: 28rem; padding: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.consulta { margin-top: 2rem; max-width: 40rem; padding: 1.25rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.consulta h2 { margin-top: 0; }
.consulta__form { display: grid; gap: .75rem; }
.consulta textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--eje); border-radius: var(--radio); background: var(--plano); color: var(--tinta); font: inherit; resize: vertical; }
.consulta__form .boton { justify-self: start; }
.texto { max-width: 46rem; }
.texto p { color: var(--tinta-2); }
.texto ul { color: var(--tinta-2); padding-left: 1.25rem; display: grid; gap: .5rem; }
.texto li::marker { color: var(--marca); }
.texto strong { color: var(--tinta); }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { margin-top: 3rem; background: var(--superficie); border-top: 1px solid var(--borde); padding: 2rem 0; font-size: .9375rem; }
.pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.pie__lista { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; }

/* ── Guías de salud ── */
.portada--chica { padding-bottom: .5rem; }
.portada--chica p { max-width: 48rem; }
.seccion__texto { color: var(--tinta-2); max-width: 48rem; margin: 0 0 1rem; }
.guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }
.guia-tarjeta { display: grid; gap: .4rem; align-content: start; padding: 1rem 1.1rem; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; }
.guia-tarjeta:hover { border-color: var(--marca); }
.guia-tarjeta h2, .guia-tarjeta h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.guia-tarjeta p { margin: 0; color: var(--tinta-2); font-size: .9375rem; }
.guia-tarjeta__mas { color: var(--marca); font-weight: 600; font-size: .9375rem; }
.guia .guia__resumen { font-size: 1.1rem; color: var(--tinta-2); }
.fuentes { font-size: .9375rem; color: var(--tinta-2); display: grid; gap: .5rem; padding-left: 1.4rem; }
.fuentes a { white-space: nowrap; margin-left: .4rem; }
.aviso--nota { font-size: .9375rem; }
.evidencia { margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--marca-suave); border-radius: var(--radio); }
.evidencia h2 { margin: 0 0 .25rem; }
.evidencia__intro { margin: 0 0 .75rem; color: var(--tinta-2); }
.evidencia__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.evidencia__lista li { display: grid; gap: .1rem; }
.evidencia__lista a { font-weight: 600; }
.evidencia__lista span { color: var(--tinta-2); font-size: .9375rem; }

/* Franja de la tienda de prueba (Tienda:ModoPrueba): fija arriba, imposible de confundir con la tienda real. */
.franja-prueba { position: sticky; top: 0; z-index: 60; background: #b45309; color: #fff; text-align: center; padding: .45rem 1rem; font-size: .9375rem; line-height: 1.35; }
.franja-prueba strong { font-weight: 700; }

/* Calificación del mismo modelo en Mercado Libre (sql/004): rotulada siempre como dato de ML. */
.calificacion-ml { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; margin: .25rem 0 .75rem; font-size: .9375rem; color: var(--tinta-2); }
.calificacion-ml__estrellas { color: var(--estrella); letter-spacing: .05em; font-size: 1.05rem; }
.calificacion-ml__numero { font-weight: 700; color: var(--tinta); }
.calificacion-ml--compacta { margin: .1rem 0 .35rem; font-size: .8125rem; }
.calificacion-ml--compacta .calificacion-ml__estrellas { font-size: .875rem; }

/* Ficha completa (sql/005): galería sin JS y consejos de uso. */
.producto__fotos { display: grid; gap: .75rem; align-content: start; }
.producto__imagen img { object-fit: contain; background: #fff; }
/* Visor de la ficha sin JS: radios ocultos (siguen enfocables con el teclado), miniaturas como etiquetas. */
.visor { display: grid; gap: .5rem; }
.visor__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.visor__foto { display: none; }
#foto-0:checked ~ .visor__marco .visor__foto--0 { display: block; }
#foto-1:checked ~ .visor__marco .visor__foto--1 { display: block; }
#foto-2:checked ~ .visor__marco .visor__foto--2 { display: block; }
#foto-3:checked ~ .visor__marco .visor__foto--3 { display: block; }
#foto-4:checked ~ .visor__marco .visor__foto--4 { display: block; }
#foto-5:checked ~ .visor__marco .visor__foto--5 { display: block; }
#foto-6:checked ~ .visor__marco .visor__foto--6 { display: block; }
#foto-7:checked ~ .visor__marco .visor__foto--7 { display: block; }
#foto-8:checked ~ .visor__marco .visor__foto--8 { display: block; }
#foto-9:checked ~ .visor__marco .visor__foto--9 { display: block; }
#foto-10:checked ~ .visor__marco .visor__foto--10 { display: block; }
#foto-11:checked ~ .visor__marco .visor__foto--11 { display: block; }
.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.galeria__mini { display: block; aspect-ratio: 1; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; }
.galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.galeria__mini:hover { outline: 2px solid var(--borde); outline-offset: 1px; }
#foto-0:checked ~ .galeria .galeria__mini--0,
#foto-1:checked ~ .galeria .galeria__mini--1,
#foto-2:checked ~ .galeria .galeria__mini--2,
#foto-3:checked ~ .galeria .galeria__mini--3,
#foto-4:checked ~ .galeria .galeria__mini--4,
#foto-5:checked ~ .galeria .galeria__mini--5,
#foto-6:checked ~ .galeria .galeria__mini--6,
#foto-7:checked ~ .galeria .galeria__mini--7,
#foto-8:checked ~ .galeria .galeria__mini--8,
#foto-9:checked ~ .galeria .galeria__mini--9,
#foto-10:checked ~ .galeria .galeria__mini--10,
#foto-11:checked ~ .galeria .galeria__mini--11 { outline: 2px solid var(--marca); outline-offset: 1px; }
#foto-0:focus-visible ~ .galeria .galeria__mini--0,
#foto-1:focus-visible ~ .galeria .galeria__mini--1,
#foto-2:focus-visible ~ .galeria .galeria__mini--2,
#foto-3:focus-visible ~ .galeria .galeria__mini--3,
#foto-4:focus-visible ~ .galeria .galeria__mini--4,
#foto-5:focus-visible ~ .galeria .galeria__mini--5,
#foto-6:focus-visible ~ .galeria .galeria__mini--6,
#foto-7:focus-visible ~ .galeria .galeria__mini--7,
#foto-8:focus-visible ~ .galeria .galeria__mini--8,
#foto-9:focus-visible ~ .galeria .galeria__mini--9,
#foto-10:focus-visible ~ .galeria .galeria__mini--10,
#foto-11:focus-visible ~ .galeria .galeria__mini--11 { outline: 3px dashed var(--marca); outline-offset: 2px; }
.producto__descripcion p { margin: 0 0 .6rem; }
.consejos { margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; }
.consejos h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.consejos ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }