/* ═══════════════════════════════════════════════════════════════
   AllShop — estilos de la tienda
   Claro por defecto, con modo oscuro propio. Sin fuentes externas ni JS de framework.
   La paleta es la de PetShop (validada en claro y oscuro); el acento es índigo.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --plano: #f6f5f2; --superficie: #ffffff; --tinta: #1d1b18; --tinta-2: #52514e; --tinta-muda: #6f6d68;
  --grilla: #e5e3dc; --eje: #c3c2b7; --marca: #3b4fd8; --marca-fuerte: #2a3bb0; --marca-suave: #e8ebfb; --sobre-marca: #ffffff;
  --oferta: #b42318; --borde: rgba(11, 11, 11, 0.10);
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .05);
  --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: #0d0d0d; --superficie: #1a1a19; --tinta: #f0efec; --tinta-2: #c3c2b7; --tinta-muda: #9a988f;
    --grilla: #2c2c2a; --eje: #383835; --marca: #8d9bff; --marca-fuerte: #b3bdff; --marca-suave: #1d2350; --sobre-marca: #0b0b0b;
    --oferta: #ff8a80; --borde: rgba(255, 255, 255, 0.10); --sombra: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0d0d0d; --superficie: #1a1a19; --tinta: #f0efec; --tinta-2: #c3c2b7; --tinta-muda: #9a988f;
  --grilla: #2c2c2a; --eje: #383835; --marca: #8d9bff; --marca-fuerte: #b3bdff; --marca-suave: #1d2350; --sobre-marca: #0b0b0b;
  --oferta: #ff8a80; --borde: rgba(255, 255, 255, 0.10); --sombra: none;
}

*, *::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(--superficie); border-bottom: 1px solid var(--borde); }
.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__img { display: block; height: 60px; width: auto; }
@media (max-width: 40rem) { .logo__img { height: 48px; } }
.pie__evolving { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; font-size: .875rem; color: var(--tinta-2); }
.pie__evolving img { 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%; }
.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); }
select, input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], 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%;
}
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(--superficie); 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); }
.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: #fff; 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); }
.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); }
.texto { max-width: 46rem; }
.texto p { color: var(--tinta-2); }

/* ── 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; }