/* Estética «Movimiento» (oct. 2026; propuesta 12 del lienzo de interfaz).
   Página blanca, fotos sobre gris claro sin bordes, tipografía grande y botones de píldora negros.
   Se carga al final de base.html (después del CSS de cada página), así que redefine sin tocar el resto.
   Los colores siguen siendo variables de tema.css: el modo oscuro sigue funcionando. */

:root {
  --fondo: #ffffff;            /* la página y las tarjetas son del mismo blanco: sin cajas */
  --superficie: #ffffff;
  --superficie-2: #f5f5f5;
  --texto-suave: #707072;      /* gris de los textos secundarios (4,9:1 sobre blanco) */
  --texto-3: #4b4b4d;
  --borde: #e5e5e5;
  --borde-fuerte: #cacacb;
  --borde-suave: #f0f0f0;
  --foto: #f5f5f5;             /* fondo gris de todas las fotos de producto */
  --foto-ficha: #f5f5f5;
  --ok: #007d48;               /* verde de «bajó» y descuentos */
  --pildora: 999px;
}
:root[data-tema="oscuro"] {
  --fondo: #111111;
  --superficie: #111111;
  --superficie-2: #1f1f1f;
  --borde: #2a2a2a;
  --borde-fuerte: #4a4a4a;
  --borde-suave: #1f1f1f;
  --texto-suave: #a1a1a1;
  --texto-3: #c2c2c2;
  --ok: #34d399;
}

body { font-size: 16px; }

/* Titular grande en mayúsculas (portada y encabezados destacados). */
.titular {
  font-family: "Archivo Black", Inter, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

/* --- Botones: píldoras ------------------------------------------------------------- */
.btn, .btn-sec {
  border-radius: var(--pildora);
  font-weight: 500;
  padding: 0.6rem 1.35rem;
  min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-sec { border: 1px solid var(--borde-fuerte); }
.btn-sec:hover { border-color: var(--texto); }
.chip { border-radius: var(--pildora); }

/* --- Barra de arriba, cabecera y franja ---------------------------------------------- */
.barra-util { display: none; background: var(--superficie-2); font-size: 0.75rem; font-weight: 500; }
.barra-util nav { display: flex; justify-content: flex-end; align-items: center; height: 2.25rem; }
.barra-util a { padding: 0 0.75rem; border-left: 1px solid var(--borde-fuerte); line-height: 1; }
.barra-util a:first-child { border-left: 0; }
.barra-util a:hover { color: var(--texto-suave); }
@media (min-width: 1024px) { .barra-util { display: block; } }

.cabecera-sitio { border-bottom: 0; }
.cabecera-buscar { position: relative; }
.cabecera-buscar input {
  border: 0; background: var(--superficie-2); min-height: 2.5rem; padding-left: 2.6rem; font-size: 0.95rem;
}
.cabecera-buscar input:focus { background: var(--superficie-2); box-shadow: 0 0 0 2px var(--texto); outline: none; }
/* ✕ de «borrar» de los buscadores: gris, no el azul de Chrome. */
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; cursor: pointer; }
.buscar-icono {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  width: 1.15rem; height: 1.15rem; color: var(--texto); pointer-events: none;
}
.cabecera-nav > a { font-size: 1rem; font-weight: 500; }
.cabecera-nav > a:not(.btn):hover { background: none; color: var(--texto-suave); }

/* Cuenta en la cabecera: «Ingresar» como píldora negra (que se note) o el nombre con sesión. */
.cabecera { grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "logo . tema cuenta boton" "buscar buscar buscar buscar buscar" "menu menu menu menu menu"; }
@media (max-width: 1023px) { .en-portada .cabecera { grid-template-areas: "logo . tema cuenta boton" "menu menu menu menu menu"; } }
.cabecera-cuenta { grid-area: cuenta; display: flex; align-items: center; gap: 0.15rem; }
.icono-cabecera { display: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--texto); }
.icono-cabecera:hover { background: var(--superficie-2); }
.icono-cabecera svg { width: 1.4rem; height: 1.4rem; }
.boton-cuenta {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 0.6rem;
  border-radius: var(--pildora); font-size: 0.95rem; font-weight: 500; color: var(--texto); white-space: nowrap;
}
.boton-cuenta:hover { background: var(--superficie-2); }
.boton-cuenta svg { width: 1.35rem; height: 1.35rem; flex: none; }
.boton-ingresar { background: var(--invertido); color: var(--sobre-invertido); padding: 0 1rem 0 0.8rem; }
.boton-ingresar:hover { background: var(--invertido-hover); }
.boton-ingresar svg { width: 1.1rem; height: 1.1rem; }
/* Celular: con sesión, solo el ícono de persona (el nombre no cabe); el tema muestra solo el interruptor
   en pantallas muy angostas, para que «Ingresar» quepa con su texto. */
@media (max-width: 639px) { .boton-cuenta:not(.boton-ingresar) .boton-cuenta-texto { display: none; } .boton-cuenta:not(.boton-ingresar) { padding: 0 0.5rem; } }
@media (max-width: 399px) { .cabecera:has(.boton-ingresar) .interruptor-texto { display: none; } .boton-ingresar { padding: 0 0.85rem 0 0.7rem; font-size: 0.9rem; } }

@media (min-width: 1024px) {
  /* Logo · menú al centro · buscador · cuenta · tema. */
  .cabecera { grid-template-columns: 1fr auto 1fr auto auto; grid-template-areas: "logo menu buscar cuenta tema"; min-height: 3.75rem; }
  .icono-cabecera { display: grid; }
  .cabecera-buscar { justify-self: end; width: min(100%, 15rem); }
  .cabecera-nav, .menu-abierto .cabecera-nav { gap: 0.25rem; }
  .cabecera-nav > a { padding: 0 0.75rem; }
  .cabecera-nav .menu-cuenta { display: none; }
  .menu-instagram { padding: 0 0.5rem; }
}
/* La portada ya no tiene buscador gigante en el banner oscuro, pero conserva el suyo: la cabecera
   sigue igual que antes (se oculta mientras se ve el de la portada). */

.franja-aviso {
  background: var(--superficie-2); text-align: center; padding: 0.65rem 1rem; line-height: 1.35;
}
.franja-aviso p { font-size: 0.9rem; font-weight: 500; }
.franja-aviso a { font-size: 0.75rem; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.contenido-principal { padding-top: 1.75rem; }
@media (min-width: 1024px) { .contenido-principal { padding-left: 2.25rem; padding-right: 2.25rem; max-width: 1920px; } }
@media (min-width: 1024px) {
  .cabecera, .barra-util nav, .pie, .avisos { max-width: 1920px; padding-left: 2.25rem; padding-right: 2.25rem; }
}

/* Títulos de sección: grandes y en peso medio. */
.contenido-principal h2.text-lg, .contenido-principal h2.text-xl { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }

/* --- Tarjeta de producto (catalogo/_tarjeta.html) ------------------------------------ */
.tarjeta { display: flex; flex-direction: column; color: var(--texto); }
.tarjeta .foto { aspect-ratio: 1 / 1; overflow: hidden; }
.tarjeta .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.tarjeta-cuerpo { display: flex; flex: 1; flex-direction: column; padding: 0.75rem 0 0.5rem; gap: 0.1rem; }
.tarjeta-etiqueta { font-size: 0.95rem; font-weight: 500; color: var(--ok); }
.tarjeta-titulo { font-size: 1rem; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tarjeta-sub { font-size: 0.95rem; color: var(--texto-suave); }
.tarjeta .tarjeta-pie { padding-top: 0.5rem; }
.tarjeta-precio { font-size: 1.05rem; font-weight: 600; }
.tarjeta-descuento { margin-left: 0.35rem; font-size: 0.9rem; font-weight: 500; color: var(--ok); }
.tarjeta-nota { font-size: 0.85rem; color: var(--texto-suave); }
.tarjeta-agotado { font-size: 0.85rem; font-weight: 500; color: var(--error); }
.tarjeta:hover .tarjeta-titulo { text-decoration: underline; text-underline-offset: 3px; }
/* Grillas de productos: menos espacio entre columnas, más entre filas. */
.grid:has(> .tarjeta) { column-gap: 0.75rem; row-gap: 1.75rem; }

/* --- Portada (catalogo/home.html) ---------------------------------------------------- */
.portada { background: none; color: var(--texto); border-radius: 0; overflow: visible; }
.portada-cuerpo { text-align: center; padding: 2.5rem 0 0.5rem; }
@media (min-width: 640px) { .portada-cuerpo { padding: 4rem 0 1rem; } }
.portada-ante { font-size: 1rem; font-weight: 500; margin-bottom: 0.75rem; }
.portada h1.titular { font-size: clamp(2rem, 8.4vw, 6rem); }
.portada-texto { color: var(--texto-2); max-width: 36rem; margin: 1.25rem auto 0; }
.portada-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.portada form[data-sugerencias] { max-width: 34rem; margin: 1.25rem auto 0; }
.portada-buscar { background: var(--superficie-2); color: var(--texto); border-radius: var(--pildora); }
.portada form button { border-radius: var(--pildora); background: var(--invertido); color: var(--sobre-invertido); }
.portada-nota { color: var(--texto-suave); }

/* Banner de la mascota (templates/catalogo/home.html). La imagen es clara en ambos temas, así que los
   colores del texto son fijos. Celular: versión vertical, con el encabezado encima del aire de arriba (la
   mascota parte al 29% del alto) y el resto del texto debajo; se corta lo de más abajo del cubo.
   Desde 1024 px: el banner apaisado y el texto a la izquierda, encima de la imagen, como en el diseño. */
.portada-banner { position: relative; overflow: hidden; background: #f0f0f0; color: #111; }
.portada-banner-imagen { display: block; width: 100%; height: auto; aspect-ratio: 1116 / 1640; object-fit: cover; object-position: top; }
.portada-lema { display: none; }
.portada-banner .portada-cuerpo { position: static; text-align: left; padding: 0 1.25rem 2rem; }  /* static: el encabezado se ubica respecto del banner */
.portada-encabezado { position: absolute; top: 0; left: 0; right: 0; padding: 1.5rem 1.25rem 0; }
.portada-banner .portada-ante { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.6rem; }
@media (min-width: 640px) { .portada-banner .portada-ante { letter-spacing: 0.22em; } }
.portada-banner h1.titular { font-size: clamp(1.75rem, 9.6vw, 4.6rem); color: #111; }
@media (max-width: 379px) { .portada-banner .portada-ante { letter-spacing: 0.06em; } }
/* Tablet: la imagen vertical a todo el ancho sería altísima: va a la derecha y el texto a la izquierda. */
@media (min-width: 640px) and (max-width: 1023px) {
  .portada-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: center; }
  .portada-banner picture { display: block; grid-column: 2; grid-row: 1; }
  .portada-banner .portada-cuerpo { grid-column: 1; grid-row: 1; padding: 2rem 0 2rem 2rem; }
  .portada-encabezado { position: static; padding: 0; }
  .portada-banner h1.titular { font-size: clamp(2.4rem, 6.4vw, 3.6rem); }
}
.portada-banner .portada-texto { margin: 1rem 0 0; color: #2b2b2b; font-size: 1rem; max-width: 30rem; }
.portada-banner form[data-sugerencias] { margin: 1.25rem 0 0; max-width: 30rem; }
.portada-banner .portada-buscar { background: #fff; color: #111; }
.portada-banner form button { background: #111; color: #fff; }
.portada-banner .portada-botones { justify-content: flex-start; }
.portada-banner .btn { background: #111; color: #fff; }
.portada-banner .btn:hover { background: #333; }
@media (min-width: 1024px) {
  .portada-banner { min-height: 32rem; }
  .portada-banner-imagen { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: right center; }
  .portada-encabezado { position: static; padding: 0; }
  .portada-banner .portada-cuerpo {
    position: relative; width: min(46%, 40rem); padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 6rem) clamp(2rem, 5.75vw, 7rem);
  }
  .portada-banner .portada-ante { font-size: clamp(0.8rem, 1vw, 1rem); }
  .portada-banner h1.titular { font-size: clamp(3.2rem, 5vw, 5.4rem); }
  .portada-banner .portada-texto { font-size: clamp(1rem, 1.2vw, 1.2rem); }
  .portada-lema {
    display: block; position: absolute; top: 2.25rem; right: 3.5rem; margin: 0;
    font-size: 0.85rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .portada-lema span { margin: 0 0.9rem; }
}

/* «Ofertas de hoy»: carrusel claro, con tarjetas como las del catálogo. */
.ofertas-hoy { margin-top: 3.5rem; }
.ofertas-hoy-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ofertas-hoy-cabeza h2 { font-size: 1.5rem; font-weight: 500; }
.ofertas-hoy-cabeza .flechas { display: flex; align-items: center; gap: 0.75rem; }
.ofertas-hoy-cabeza a { font-weight: 500; }
.cinta { display: block; background: none; border: 0; padding: 0; }
@media (min-width: 640px) { .cinta { padding: 0; } }
.cinta-flecha {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--superficie-2); color: var(--texto); font-size: 1.6rem;
}
.cinta-flecha:hover { background: var(--borde); }
@media (max-width: 639px) { .cinta-flecha { display: none; } }
.carrusel-pista { gap: 0.75rem; }
.cinta-item {
  flex: 0 0 min(72%, 17rem); flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  background: none; border: 0; border-radius: 0; color: var(--texto);
}
.cinta-item:hover { background: none; border: 0; }
.cinta-item:hover .cinta-nombre { text-decoration: underline; text-underline-offset: 3px; }
.cinta-foto { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; background: var(--foto); font-size: 3rem; }
.cinta-foto img { padding: 8%; }
.cinta-texto { padding-top: 0.75rem; gap: 0.15rem; }
.cinta-baja { order: -1; color: var(--ok); font-size: 0.95rem; font-weight: 500; }
.cinta-nombre { font-size: 1rem; font-weight: 500; white-space: normal; }
.cinta-precio { color: var(--texto); font-size: 1.05rem; font-weight: 600; }
.cinta-puntos { margin-top: 1rem; }
.cinta-puntos button { background: var(--borde-fuerte); }
.cinta-puntos button.activo { background: var(--texto); }

/* Chips (Explora, Marcas, enlaces de listados): píldoras con borde gris. */
.seccion-chips { margin-top: 3.5rem; }
.chips > a, .chip-enlace, .relacionados-listado a, .temporada-enlaces a {
  border: 1px solid var(--borde-fuerte); border-radius: var(--pildora); background: none;
  min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 1.1rem; font-size: 0.95rem; font-weight: 500;
}
.chips > a:hover, .chip-enlace:hover, .relacionados-listado a:hover { border-color: var(--texto); }
.chips > a { gap: 0.35rem; }  /* en flex se pierde el espacio entre la marca y su cantidad */

/* Bloques de la portada (temporada, guía, boletín, Instagram): gris, sin bordes. */
.temporada, .enlace-guia, .boletin, .tarjeta-instagram, .caja-alerta, .alerta-busqueda {
  border: 0; border-radius: 0; background: var(--superficie-2);
}
.temporada { padding: 1.5rem; margin-top: 3.5rem; }
.temporada-texto h2, .boletin-texto h2 { font-size: 1.35rem; font-weight: 500; }
.temporada-boton, .tarjeta-instagram-boton { border-radius: var(--pildora); }
.enlace-guia { padding: 1.5rem; margin-top: 3.5rem; }
.enlace-guia:hover { background: var(--borde-suave); }
.enlace-guia-texto strong { font-size: 1.2rem; font-weight: 500; }
.boletin { margin-top: 3.5rem; padding: 2rem 1.5rem; }
.boletin-form input, .boletin-form select { border-radius: var(--pildora); padding: 0 1.1rem; min-height: 2.75rem; }
.boletin-form .btn { min-height: 2.75rem; }
.tarjeta-instagram { margin-top: 3.5rem; padding: 1.5rem; }

/* --- Catálogo (catalogo/catalogo.html) ----------------------------------------------- */
/* Escritorio: el panel va suelto al costado, sin caja. En el celular conserva su fondo: abierto es una
   hoja fija sobre la página (catalogo.css) y sin fondo se veían los productos por detrás. */
@media (min-width: 1024px) { #filtros > aside > details { border: 0; padding: 0 1rem 0 0; background: none; } }
#filtros .filtros-titulo { font-size: 1.1rem; font-weight: 500; }
#filtros .filtro-seccion { border-top: 1px solid var(--borde); }
#filtros .filtro-seccion > summary { font-size: 1rem; font-weight: 500; min-height: 3.25rem; }
#filtros .opcion { font-size: 1rem; }
#filtros .opcion input { accent-color: var(--texto); }
#filtros select, #orden { border-radius: var(--pildora); border-color: var(--borde-fuerte); padding: 0.45rem 0.9rem; }
.filtros-contador, .filtro-n { background: var(--invertido); color: var(--sobre-invertido); }
.talla-opcion span { border-radius: 0.375rem; border-color: var(--borde-fuerte); padding: 0.55rem 0.125rem; font-size: 0.9rem; }
.chip-activo { border-color: var(--borde-fuerte); border-radius: var(--pildora); font-size: 0.9rem; color: var(--texto); }
.contenido-principal h1.text-2xl { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; }
.alerta-busqueda { padding: 1rem 1.25rem; }
@media (max-width: 1023px) {
  /* Cerrado: una píldora «Filtros». Abierto: hoja que sube desde abajo, con fondo. */
  #panel-filtros { border: 1px solid var(--borde-fuerte); border-radius: var(--pildora); padding: 0 1.25rem; background: var(--superficie); }
  #panel-filtros > summary { min-height: 2.75rem; }
  #panel-filtros[open] { border: 0; border-radius: 1rem 1rem 0 0; padding: 0 1.25rem; }
  /* Abierto: ✕ para cerrar (la flecha girada no se entendía). */
  #panel-filtros[open] > summary .filtros-flecha { position: relative; width: 1.5rem; height: 1.5rem; border: 0; transform: none; }
  #panel-filtros[open] > summary .filtros-flecha::before, #panel-filtros[open] > summary .filtros-flecha::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 2px; background: var(--texto);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #panel-filtros[open] > summary .filtros-flecha::after { transform: translate(-50%, -50%) rotate(-45deg); }
}
.intro-pie { border-top-color: var(--borde); }

/* --- Ficha de producto (catalogo/producto.html) -------------------------------------- */
.producto-imagen { border: 0 !important; border-radius: 0.5rem; }
/* La foto fija (sticky) queda aislada y mix-blend-mode no alcanza su fondo: el blanco de la foto se
   oscurece con un filtro hasta el gris del recuadro (245/255 ≈ 0,961; en oscuro, el #e4e4e7). */
.producto-imagen img { padding: 6%; mix-blend-mode: normal; filter: brightness(var(--foto-brillo, 0.961)); }
:root[data-tema="oscuro"] .producto-imagen img { --foto-brillo: 0.894; }
.btn-whatsapp { width: 100%; }
.columna-compra > p.uppercase { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; color: var(--texto-suave); }
.columna-compra h1 { font-size: 1.85rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.columna-compra .chip { background: none; border: 1px solid var(--borde); color: var(--texto-3); }
/* Cajas de la columna de compra: sin borde, separadas por líneas, como un acordeón. */
.columna-compra > .rounded-2xl, #cuadro-tallas, #lista-ofertas, #opiniones form {
  border: 0 !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: none !important;
}
.columna-compra > .rounded-2xl { margin-top: 1.25rem; padding-top: 0.5rem; }
#mejor-precio { font-size: 1.85rem; font-weight: 600; }
#mejor-precio-texto { font-size: 0.95rem; }
.consejo-compra { border-radius: 0; }
.talla { border-radius: 0.375rem; padding: 0.8rem 0.25rem; font-size: 0.95rem; }
.talla[aria-pressed="true"] { background: var(--superficie); color: var(--texto); border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.escalas { border-radius: var(--pildora); }
.escalas button { border-radius: var(--pildora); }
#donde-comprar { border-top: 1px solid var(--borde); padding-top: 1.25rem; }
#donde-comprar h2, #historial h2, #opiniones h2, #otros-colores h2, .seccion-ficha h2 { font-size: 1.35rem; font-weight: 500; }
#lista-ofertas .oferta { padding-left: 0; padding-right: 0; border-color: var(--borde); }
#lista-ofertas .oferta .text-xl { font-size: 1.1rem; font-weight: 600; }
.oferta .btn { min-height: 2.5rem; padding: 0.45rem 1.1rem; }
.btn-whatsapp { border-radius: var(--pildora); min-height: 3.25rem; font-weight: 600; }
.caja-alerta { padding: 1.25rem; border-radius: 0; }
.caja-alerta > p.font-semibold { font-size: 1.1rem; font-weight: 500; }
#guardar-en-lista .btn-sec { min-height: 3.25rem; width: 100%; }
#guardar-en-lista select, #guardar-en-lista input { border-radius: var(--pildora); min-height: 3.25rem; padding: 0 1.1rem; }
@media (min-width: 1024px) {
  /* Foto más ancha que la columna de compra (60/40). */
  .grid:has(> .columna-compra) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 3rem; }
  .producto-imagen { top: 6rem; }
  .columna-compra { max-width: 32rem; }
}
.carrusel { grid-auto-columns: minmax(11rem, 17rem); gap: 0.75rem; }
.carrusel-genero { border-radius: var(--pildora); }

/* --- Mis listas (listas/mis_listas.html) ----------------------------------------------- */
.tarjeta-lista { display: flex; flex-direction: column; gap: 0.15rem; color: var(--texto); }
.tarjeta-lista:hover .tarjeta-titulo { text-decoration: underline; text-underline-offset: 3px; }
.grid:has(> .tarjeta-lista) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); align-content: start; column-gap: 0.75rem; row-gap: 1.75rem; }
.lista-mosaico {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px; aspect-ratio: 1 / 1; margin-bottom: 0.6rem; overflow: hidden; border-radius: 0.5rem; background: var(--foto);
}
.lista-mosaico .foto { display: grid; place-items: center; overflow: hidden; }
.lista-mosaico .foto:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.lista-mosaico img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.lista-vacia { font-size: 3rem; color: var(--texto-tenue); }
.grid:has(> .tarjeta-lista) + form { border: 0; background: var(--superficie-2); }

/* --- Pie --------------------------------------------------------------------------- */
.pie-pagina { border-top: 1px solid var(--borde); margin-top: 5rem; }
.pie { padding-top: 2.5rem; padding-bottom: 2.5rem; gap: 1.25rem; }
.pie-enlaces a, .pie-marcas a { color: var(--texto-suave); }
.pie-enlaces a:hover, .pie-marcas a:hover { color: var(--texto); }
.pie-explorar summary { font-size: 1rem; font-weight: 500; color: var(--texto); }

/* --- Cajas del resto del sitio (cuenta, ingreso, alertas, listas, guías, tiendas) ---------------
   Antes: blancas con borde. Ahora: gris claro sin borde, como los bloques de la portada. Las de
   «Eliminar cuenta» conservan su borde rojo; la foto de la ficha tiene su propio fondo. */
.contenido-principal :is(.rounded-xl, .rounded-2xl).border:not(.producto-imagen):not(.border-red-200) {
  border-color: transparent; background-color: var(--superficie-2);
}
.contenido-principal :is(.rounded-xl, .rounded-2xl).border-red-200 { background-color: var(--superficie); }
.guia-tarjeta, .guia-lista, .conversor, .lista-tiendas a { border-color: transparent; background: var(--superficie-2); border-radius: 0.5rem; }
.guia-tarjeta:hover, .lista-tiendas a:hover { border-color: var(--texto); }

/* --- Varios -------------------------------------------------------------------------- */
/* Esquinas más rectas en las cajas que quedan (gráfico, formularios, mensajes). */
.rounded-2xl, .rounded-xl { border-radius: 0.5rem; }
.campo input, .campo select, .campo textarea { border-radius: 0.5rem; }
.volver-arriba { box-shadow: none; }
.rangos-grafico button[aria-pressed="true"] { background: var(--invertido); }