/* ============================================================
   Isa entre libros — tema (edita las variables para recolorear)
   ============================================================ */
/* Paleta "Lila boutique" (Propuesta 1 · ver PALETAS.md; la berry original
   del manual queda documentada allí por si se quiere volver). */
:root {
  --cream:    #F6F4FA;   /* fondo lila crema */
  --cream-2:  #EBE7F6;   /* lavanda sutil (superficies suaves) */
  --peach:    #EBE7F6;   /* degradado del hero (lavanda) */
  --ink:      #33304A;   /* texto principal (berenjena) */
  --muted:    #6E6C86;   /* texto secundario (contraste AA sobre lila) */
  --berry:    #7A6BB5;   /* acento principal (lila boutique) */
  --berry-d:  #5C4F94;   /* acento oscuro (hover) */
  --gold:     #6F9B7C;   /* detalle dorado (rellenos/bordes) — se conserva */
  --gold-ink: #4E7A5C;   /* dorado para texto pequeño (contraste AA) */
  --whats:    #25D366;   /* verde WhatsApp */
  --line:     #E2DEEF;   /* bordes */
  --surface:  #FDFDFF;   /* fondo de tarjetas, inputs, chips… */
  --shadow:   0 14px 34px rgba(65, 60, 115, .13);
  --radius:   22px;
  --focus:    0 0 0 3px rgba(122,107,181,.35);   /* anillo de foco */
}

/* ============================================================
   Modo oscuro — se activa con [data-theme="dark"] en <html>
   ============================================================ */
[data-theme="dark"] {
  --cream:    #14131D;
  --cream-2:  #1F1D2C;
  --ink:      #EFE9F6;
  --muted:    #A3A1B8;
  --berry:    #B4A8E8;   /* acento legible sobre fondo oscuro */
  --berry-d:  #C6BCF0;
  --gold:     #8FC4A0;
  --gold-ink: #A9D6B8;
  --line:     #343247;
  --surface:  #211F30;
  --shadow:   0 8px 28px rgba(0,0,0,.55);
}
/* Rellenos de acento: en oscuro usan un lila sólido con texto blanco */
[data-theme="dark"] .chip[aria-current="true"],
[data-theme="dark"] .gen[aria-current="true"],
[data-theme="dark"] .paginacion button[aria-current="true"],
[data-theme="dark"] .btn-primary { background: #7A6BB5; border-color: #7A6BB5; color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: #6A5CA5; }
[data-theme="dark"] .skip-link { background: #7A6BB5; }
/* Badges y stock más brillantes sobre oscuro */
[data-theme="dark"] .badge.ok, [data-theme="dark"] .tag.stock-ok { background: #16321f; color: #7CD9A0; }
[data-theme="dark"] .badge.no, [data-theme="dark"] .tag.stock-0 { background: #3a1f1f; color: #E89A9A; }
[data-theme="dark"] .m-stock.ok { color: #7CD9A0; }
[data-theme="dark"] .m-stock.no { color: #E89A9A; }
[data-theme="dark"] .status.ok { color: #7CD9A0; }
[data-theme="dark"] .status.err { color: #E89A9A; }
/* Bandas decorativas con su versión oscura */
[data-theme="dark"] .destacados-propios { background: linear-gradient(180deg,#1a2b20 0%,#181724 100%); }
[data-theme="dark"] .destacados-propios .destacados-sub { color: var(--gold-ink); }

* { box-sizing: border-box; }

/* ---------- Accesibilidad: foco visible por teclado ---------- */
:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 2px;
}
/* Elementos con su propio fondo: anillo suave en vez de outline duro */
.card:focus-visible, .chip:focus-visible, .m-thumb:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Salto al contenido (visible solo al tabular) */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--berry); color: #fff; padding: 10px 16px;
  border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* Texto solo para lectores de pantalla y buscadores (no ocupa espacio visual) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Respeta a quien prefiere menos animación */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* El atributo [hidden] SIEMPRE oculta, aunque una clase defina display
   (p.ej. .login-overlay{display:flex} o .admin-grid{display:grid}). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 480px at 82% -140px, var(--peach), transparent),
    var(--cream);
  background-attachment: fixed;
  line-height: 1.55;
}
/* En modo oscuro el halo durazno estorba: lo apagamos */
[data-theme="dark"] body { background: var(--cream); }
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Cabecera ---------- */
.site-header {
  background: rgba(246, 244, 250, .82);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .site-header { background: rgba(20, 19, 29, .82); }
.header-inner {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px; flex-wrap: wrap;
}
/* La marca es un enlace al inicio (patrón habitual: logo = volver arriba) */
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; border-radius: 14px;
}
.brand:hover .brand-name { color: var(--berry-d); }

/* ---------- Sello de la marca (logo oficial, siempre monocromo) ----------
   Par de tintas: .seal-light (berry, tema claro) / .seal-dark (blanca, tema oscuro) */
.seal-dark { display: none; }
[data-theme="dark"] .seal-light { display: none; }
[data-theme="dark"] .seal-dark { display: block; }

.brand-seal { width: 54px; height: 54px; flex: 0 0 auto; }
.brand-seal img { width: 100%; height: 100%; object-fit: contain; }
.brand-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700; font-size: 24px; margin: 0; color: var(--berry);
  letter-spacing: .2px;
}
.brand-tag { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.search-box { flex: 1; min-width: 240px; position: relative; }
.search-box input {
  width: 100%; padding: 12px 44px 12px 18px; font-size: 15px;
  border: 2px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search-box input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(111,155,124,.25);
}
/* Botón para limpiar la búsqueda (aparece solo si hay texto) */
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--cream-2); color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1; display: none; align-items: center; justify-content: center;
}
.search-box.has-text .search-clear { display: flex; }
.search-clear:hover { background: var(--line); color: var(--ink); }

/* ---------- Autocompletado del buscador ---------- */
.sugerencias {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.sug {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink); text-align: left;
}
.sug:hover, .sug.on { background: var(--cream-2); }
.sug .sug-tipo { flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gold-ink); }
.sug .sug-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug .sug-txt small { color: var(--muted); }
.sug .sug-gen { color: var(--berry); }

/* Badge pequeño sobre botones de la cabecera (favoritos / pedido) */
.theme-toggle { position: relative; }
.mini-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--berry); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; padding: 0 4px;
}

/* ---------- Navegación por categorías ---------- */
.cats-nav { background: var(--cream); border-bottom: 1px solid var(--line); }
.cats-inner {
  display: flex; gap: 8px; padding: 12px 20px 10px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}

/* ---------- Scroll horizontal con estilo de la marca ----------
   Barra fina y redondeada; en berry al pasar el cursor. */
.cats-inner::-webkit-scrollbar, .row-scroll::-webkit-scrollbar { height: 6px; }
.cats-inner::-webkit-scrollbar-track, .row-scroll::-webkit-scrollbar-track { background: transparent; }
.cats-inner::-webkit-scrollbar-thumb, .row-scroll::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
}
.cats-inner:hover::-webkit-scrollbar-thumb, .row-scroll:hover::-webkit-scrollbar-thumb { background: var(--berry); }
.row-scroll { scrollbar-color: var(--line) transparent; }

/* Flechas de los carruseles (solo escritorio; en móvil se desliza con el dedo) */
.row-wrap { position: relative; }
.row-arrow {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--berry);
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(65,60,115,.18);
  transition: border-color .15s, transform .15s, opacity .15s;
}
.row-arrow:hover { border-color: var(--berry); transform: translateY(-50%) scale(1.06); }
.row-arrow.prev { left: -14px; }
.row-arrow.next { right: -14px; }
.row-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .row-arrow { display: none; } }
.chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.chip:hover { border-color: var(--berry); color: var(--berry); }
.chip[aria-current="true"] { background: var(--berry); border-color: var(--berry); color: #fff; }
.chip .n { opacity: .6; font-size: 12px; margin-left: 4px; }
.chip[aria-current="true"] .n { opacity: .85; }
.chip-propios { border-color: var(--gold); color: var(--berry-d); font-weight: 600; }
.chip-propios[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: #3a2c08; }

/* ---------- Desplegable de géneros ----------
   Cada chip de categoría abre este panel debajo de la barra (no puede ir
   dentro de .cats-inner: ese contenedor recorta con overflow). */
.chip .caret { font-size: 9px; margin-left: 5px; opacity: .75; display: inline-block; transition: transform .15s; }
.chip[aria-expanded="true"] { border-color: var(--berry); color: var(--berry); }
.chip[aria-expanded="true"] .caret { transform: rotate(180deg); }
.chip[aria-current="true"] .caret { opacity: .9; }

.gen-panel { padding: 0 20px 16px; }
.gen-panel[hidden] { display: none; }
.gen-caja {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px; box-shadow: var(--shadow);
}
.gen-desc {
  margin: 2px 4px 10px; padding: 0 7px; font-size: 13.5px;
  color: var(--muted); line-height: 1.45;
}
.gen-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px; max-height: 258px; overflow-y: auto;
}
.gen {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 14px;
  background: none; border: 0; border-radius: 10px; padding: 7px 11px; color: var(--ink);
  transition: background .12s, color .12s;
}
.gen:hover { background: var(--cream-2); color: var(--berry-d); }
.gen[aria-current="true"] { background: var(--berry); color: #fff; font-weight: 600; }
.gen .n { font-size: 12px; opacity: .6; flex: 0 0 auto; }
.gen[aria-current="true"] .n { opacity: .85; }
.gen-todo {
  grid-column: 1 / -1; font-weight: 600; color: var(--berry-d);
  border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; margin-bottom: 5px;
}
.gen-pie {
  margin: 6px 0 0; padding: 8px 11px 2px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
@media (max-width: 640px) {
  .gen-panel { padding: 0 16px 14px; }
  .gen-lista { grid-template-columns: 1fr; max-height: 240px; }
}

/* Botón "Admin" (solo visible al servir la tienda en local) */
.admin-link {
  flex: 0 0 auto; color: var(--berry); font-weight: 600; text-decoration: none;
  border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px;
  background: var(--surface); white-space: nowrap; font-size: 14px;
}
.admin-link:hover { border-color: var(--berry); }

/* ---------- Barra de filtros ---------- */
.toolbar { border-bottom: 1px solid var(--line); background: var(--cream); }
.toolbar-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; flex-wrap: wrap;
}
.seccion { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; color: var(--ink); }
.control {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer;
}
.check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); cursor: pointer; }
.count { margin-left: auto; font-size: 13px; color: var(--muted); }

/* ---------- Destacados (más vendidos) ---------- */
.destacados { padding-top: 26px; }
.destacados[hidden] { display: none; }
.destacados-tit { font-family: "Fraunces", serif; font-size: 22px; color: var(--berry); margin: 0; }
/* Subtítulos en manuscrita (Caveat): eco del trazo a mano del sello */
.destacados-sub { margin: 2px 0 14px; color: var(--muted); font-family: "Caveat", cursive; font-size: 20px; line-height: 1.25; }
.row-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 170px;
  gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* aire arriba y a los lados: la tarjeta se eleva al pasar el cursor y el
     contenedor de scroll recortaría la elevación y su sombra */
  padding: 12px 6px 14px; margin: -12px -6px 0;
}
.row-scroll .card { scroll-snap-align: start; }

/* "Otros productos" — banda destacada con acento salvia, primera en la portada */
.destacados-propios {
  background: linear-gradient(180deg, #EAF3EC 0%, var(--cream) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 20px 14px;
  margin-top: 22px;
}
.destacados-propios .destacados-tit { color: var(--berry-d); }
.destacados-propios .destacados-sub { color: #4E7A5C; }
/* "Los recomendados de Isa": mismo formato que Más vendidos, título en el acento oscuro */
.destacados-reco .destacados-tit { color: var(--berry-d); }
/* Corazones del nivel de recomendación (de medio en medio) */
.est { display: inline-flex; gap: 1px; font-size: 20px; line-height: 1; }
.est .s { color: var(--line); }
.est .s.on { color: var(--berry); }
.est .s.half { background: linear-gradient(90deg, var(--berry) 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-reco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--cream-2); border: 1px solid var(--line); font-size: 14px; }
.m-reco[hidden] { display: none; }
.m-reco-tit { flex-basis: 100%; font-weight: 700; color: var(--berry-d); }
.m-reco-num { color: var(--muted); }
.grid-tit { font-family: "Fraunces", serif; font-size: 22px; color: var(--berry); margin: 26px 0 0; }
.grid-tit[hidden] { display: none; }

/* ---------- Grid de tarjetas ---------- */
.grid {
  display: grid; gap: 22px; padding: 28px 0;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.card {
  position: relative;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s, border-color .18s; cursor: pointer;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #CBC4E8; }
/* Dentro de un carrusel la elevación es más contenida */
.row-scroll .card:hover { transform: translateY(-4px); }

/* Botón "quitar" (usado en Vistos recientemente) */
.card .card-quitar {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.card:hover .card-quitar, .card:focus-within .card-quitar { opacity: 1; }
.card-quitar:hover { color: #9A3434; border-color: #9A3434; }
@media (hover: none) { .card .card-quitar { opacity: 1; } }
.card-best {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  background: var(--gold); color: #3a2c08; font-size: 11px; font-weight: 800;
  padding: 4px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.card-img {
  aspect-ratio: 2 / 3; background: var(--cream-2); border-radius: 15px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img .ph { color: var(--muted); font-size: 32px; }
.card-body { padding: 12px 4px 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-ink); font-weight: 700; }
.card-title {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 15px;
  margin: 0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-author { font-size: 13px; color: var(--muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; }
.card-price { font-weight: 800; color: var(--berry); font-size: 17px; }
.badge { font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.badge.ok { background: #E7F5EC; color: #1E7A45; }
.badge.no { background: #F6E7E7; color: #9A3434; }
.badge.pocas { background: #E6F1E9; color: #3F6A4E; }
[data-theme="dark"] .badge.pocas { background: #1c3126; color: #A9D6B8; }

/* Etiquetas sobre la portada de la tarjeta */
.card-nuevo {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  background: var(--berry); color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.card-reco {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  background: var(--gold); color: #3a2c08; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
/* Corazón de favorito en la tarjeta */
.card-fav {
  position: absolute; right: 18px; bottom: 88px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s, transform .15s;
}
.card:hover .card-fav, .card:focus-within .card-fav, .card-fav.on { opacity: 1; }
.card-fav:hover { transform: scale(1.1); }
.card-fav.on { color: var(--berry); border-color: var(--berry); }
@media (hover: none) { .card-fav { opacity: 1; } }

/* ---------- Paginación ---------- */
.paginacion { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 8px 0 48px; }
.paginacion button {
  min-width: 38px; padding: 8px 12px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--ink);
}
.paginacion button:hover:not(:disabled) { border-color: var(--berry); color: var(--berry); }
.paginacion button[aria-current="true"] { background: var(--berry); color: #fff; border-color: var(--berry); }
.paginacion button:disabled { opacity: .4; cursor: default; }
.paginacion .dots { padding: 8px 4px; color: var(--muted); }

/* ---------- Skeletons de carga ---------- */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.sk {
  background: linear-gradient(90deg, var(--cream-2) 25%, #E4E0F2 37%, var(--cream-2) 63%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear; border-radius: 8px;
}
.sk-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.sk-img { aspect-ratio: 2 / 3; border-radius: 15px; }
.sk-body { padding: 12px 4px 4px; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 11px; }
.sk-line.sm { width: 40%; height: 9px; }
.sk-line.lg { width: 90%; }
.sk-line.md { width: 65%; }
.sk-foot { height: 16px; width: 50%; margin-top: 6px; }

/* ---------- Estado vacío ---------- */
.vacio { text-align: center; color: var(--muted); padding: 60px 20px; }
.vacio .vacio-ico { display: block; width: 96px; margin: 0 auto 14px; opacity: .85; }
.vacio .vacio-ico img { width: 100%; }
.vacio .vacio-msg { margin: 0 0 16px; font-size: 15px; }
.vacio .btn-reset {
  border: 1px solid var(--berry); color: var(--berry); background: var(--surface);
  padding: 9px 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
}
.vacio .btn-reset:hover { background: var(--berry); color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: none; cursor: pointer;
}
.btn-whats { background: var(--whats); color: #fff; }
.btn-whats:hover { filter: brightness(.95); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(40,30,25,.55); backdrop-filter: blur(2px); animation: modalFade .18s ease-out; }
.modal-card {
  position: relative; background: var(--cream); border-radius: 18px;
  max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow);
  animation: modalPop .22s ease-out;
}
@keyframes modalFade { from { opacity: 0; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal-close {
  position: absolute; top: 10px; right: 14px; z-index: 2;
  border: 1px solid var(--line); background: var(--surface); width: 42px; height: 42px; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: border-color .15s, color .15s;
}
.modal-close:hover { border-color: var(--berry); color: var(--berry); }
.modal-body { display: grid; grid-template-columns: 280px 1fr; gap: 26px; padding: 28px; }
.modal-gallery { display: flex; flex-direction: column; gap: 10px; }
.modal-img { background: var(--cream-2); border-radius: 12px; overflow: hidden; aspect-ratio: 2/3; }
/* contain: la portada se ve completa, sin recortes (las bandas quedan en crema) */
.modal-img img { width: 100%; height: 100%; object-fit: contain; }
.m-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.m-thumb {
  width: 52px; height: 70px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; cursor: pointer; background: var(--cream-2);
}
.m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-thumb.on { border-color: var(--berry); box-shadow: 0 0 0 2px rgba(122,107,181,.3); }
.modal-info h2 { font-family: "Fraunces", serif; font-size: 24px; margin: 4px 0 2px; line-height: 1.2; }
.m-cat { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-ink); font-weight: 600; margin: 0; }
.m-author { color: var(--muted); margin: 0 0 12px; }
.m-price { font-size: 26px; font-weight: 700; color: var(--berry); margin: 0; }
.m-stock { margin: 4px 0 14px; font-size: 14px; }
.m-stock.ok { color: #1E7A45; } .m-stock.no { color: #9A3434; }
.m-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 16px; font-size: 14px; }
.m-meta dt { color: var(--muted); }
.m-meta dd { margin: 0; }
.m-desc { font-size: 14px; color: var(--ink); margin: 0 0 6px; white-space: pre-line; }
/* Vista recortada: muestra solo unas lineas; el boton "Ver mas" la expande. */
.m-desc.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-desc-toggle {
  display: block; margin: 0 0 4px; padding: 6px 0;
  background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--berry);
}
.m-desc-toggle:hover { text-decoration: underline; }
.modal-info .btn-whats { margin-top: 14px; }

/* ---------- Ficha: acciones, relacionados y carrito ---------- */
.m-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-right: 40px; }
.m-acts { display: flex; gap: 8px; }
.m-act {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.m-act:hover { color: var(--berry); border-color: var(--berry); }
.m-act.on { color: var(--berry); border-color: var(--berry); }

.btn-carrito {
  background: var(--surface); color: var(--berry); border: 2px solid var(--berry);
  margin-top: 10px; width: 100%;
}
.btn-carrito:hover { background: var(--berry); color: #fff; }
.btn-carrito.added { background: var(--berry); color: #fff; }
.modal-info .btn-whats { width: 100%; }

.m-relacionados { padding: 0 28px 26px; }
.m-relacionados h3 { font-family: "Fraunces", serif; font-size: 17px; color: var(--berry); margin: 4px 0 10px; }
.rel-row { display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rel-row::-webkit-scrollbar { height: 6px; }
.rel-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.rel-card { border: none; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.rel-card img, .rel-card .rel-ph {
  width: 108px; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.rel-card b { display: block; font-size: 12px; line-height: 1.25; margin-top: 6px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-card small { color: var(--berry); font-weight: 700; font-size: 12px; }

/* Carrito */
.cart-card { max-width: 480px; }
.cart-body { padding: 26px 24px 24px; }
.cart-body h2 { font-family: "Fraunces", serif; margin: 0 0 2px; color: var(--berry); }
.cart-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.cart-items { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow: auto; }
.cart-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.cart-item img { width: 38px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--cream-2); flex: 0 0 auto; }
.cart-item .ci-main { flex: 1; min-width: 0; }
.cart-item .ci-main b { display: block; font-size: 13.5px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-item .ci-main small { color: var(--berry); font-weight: 700; }
.ci-qty { display: flex; align-items: center; gap: 6px; }
.ci-qty button {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink);
}
.ci-qty button:hover { border-color: var(--berry); color: var(--berry); }
.ci-qty span { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; }
.ci-rm { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 17px; padding: 4px; }
.ci-rm:hover { color: #9A3434; }
.cart-vacio { color: var(--muted); text-align: center; padding: 26px 10px; font-size: 14.5px; }
.cart-foot { margin-top: 16px; }
.cart-total { font-size: 15px; margin-bottom: 12px; }
.cart-total b { color: var(--berry); font-size: 18px; }
.cart-foot .btn-whats { width: 100%; }

/* ---------- Volver arriba ---------- */
.btn-arriba {
  position: fixed; left: 22px; bottom: 22px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--berry);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(65,60,115,.22); transition: transform .15s, border-color .15s;
}
.btn-arriba:hover { transform: translateY(-3px); border-color: var(--berry); }

/* ---------- Sobre Isa ---------- */
.sobre { padding-top: 36px; }
.sobre-card {
  display: flex; gap: 26px; align-items: center;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow);
}
.sobre-foto { flex: 0 0 auto; }
.sobre-foto img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 3px solid var(--peach); }
.sobre-texto p { margin: 8px 0 0; color: var(--ink); font-size: 15px; line-height: 1.65; white-space: pre-line; }
@media (max-width: 640px) { .sobre-card { flex-direction: column; text-align: center; padding: 22px 18px; } }

/* ---------- FAQ ---------- */
.faq { padding-top: 36px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-width: 760px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 18px; transition: border-color .15s;
}
.faq-item[open] { border-color: var(--berry); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 0; font-weight: 700; font-size: 14.5px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; color: var(--berry); font-weight: 600; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-a { padding: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.6; white-space: pre-line; }

/* ---------- FAB WhatsApp ---------- */
.fab-whats {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; background: var(--whats); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(37,211,102,.5); transition: transform .15s;
}
.fab-whats:hover { transform: scale(1.06); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--cream-2); margin-top: 20px; padding: 28px 0; }
.site-footer p { margin: 2px 0; }
.site-footer #footName { font-family: "Fraunces", serif; font-weight: 600; color: var(--berry); font-size: 17px; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-hand { font-family: "Caveat", cursive; font-size: 18px; color: var(--berry-d); }
[data-theme="dark"] .footer-hand { color: var(--berry); }
.footer-seal { width: 76px; height: 76px; flex: 0 0 auto; }
.footer-seal img { width: 100%; height: 100%; object-fit: contain; }
.muted { color: var(--muted); font-size: 13px; }

/* ============================================================
   Hero / banner principal
   ============================================================ */
.hero { padding-top: 18px; }

/* Carrusel: el banner principal + un banner por cada ventaja */
.hero-slider { position: relative; overflow: hidden; border-radius: 34px; }
.hero-track { display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.33, .8, .33, 1); }
.hero-slide { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; }
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(253,253,255,.88); color: #5C4F94; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
  box-shadow: 0 4px 14px rgba(65,60,115,.2); transition: background .15s, transform .15s;
}
.hero-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.hero-nav.prev { left: 14px; }
.hero-nav.next { right: 14px; }
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  display: flex; gap: 8px; justify-content: center;
}
.hero-dots button {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
  background: rgba(92,79,148,.28); cursor: pointer; transition: width .2s, background .2s;
}
.hero-dots button[aria-current="true"] { width: 26px; background: #7A6BB5; }

/* Banners de ventajas (claros en ambos temas, como el banner principal) */
.hero-vent {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 6px; padding: 44px 90px 56px;
  background: linear-gradient(135deg, #EFEBF8 0%, #E4DEF3 100%);
  border: 2px solid #DCD6EE; border-radius: 34px; color: #33304A;
}
.hero-vent.alt { background: linear-gradient(135deg, #ECF4EE 0%, #DCEAE1 100%); border-color: #CFE2D5; }
.hero-vent .hv-deco {
  position: absolute; right: -26px; bottom: -48px; font-size: 230px; line-height: 1;
  opacity: .12; pointer-events: none; user-select: none;
}
.hero-vent .hv-ico {
  width: 74px; height: 74px; border-radius: 22px; background: #FDFDFF;
  display: flex; align-items: center; justify-content: center; font-size: 36px;
  box-shadow: 0 6px 18px rgba(65,60,115,.14); margin-bottom: 10px;
}
.hero-vent .hv-tit {
  font-family: "Fraunces", serif; font-weight: 700; margin: 0;
  font-size: clamp(26px, 3.8vw, 42px); line-height: 1.08; color: #33304A;
}
.hero-vent .hv-txt {
  font-family: "Caveat", cursive; font-size: clamp(20px, 2.4vw, 26px);
  color: #5C4F94; margin: 2px 0 10px;
}
.hero-vent.alt .hv-txt { color: #4E7A5C; }
.hero-vent .hv-det {
  font-size: 15.5px; line-height: 1.6; color: #5D5877; margin: 0 0 20px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* el texto no debe meterse debajo de las portadas de la derecha */
.hero-vent .hv-tit, .hero-vent .hv-txt, .hero-vent .hv-det { max-width: 600px; }
/* Abanico de portadas reales (las inyecta app.js) */
.hero-vent .hv-imgs {
  position: absolute; right: 52px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; z-index: 1; pointer-events: none;
}
.hv-b {
  width: 122px; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.8); background: var(--cream-2);
  box-shadow: 0 14px 30px rgba(65,60,115,.25);
}
.hv-b.p1 { transform: rotate(-7deg) translateX(12px); }
.hv-b.p2 { transform: translateY(-12px); z-index: 2; }
.hv-b.p3 { transform: rotate(7deg) translateX(-12px); }

.hero-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #EFEBF8 0%, #E4DEF3 100%);
  border: 2px solid #DCD6EE; border-radius: 34px; padding: 46px 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 34px;
  box-shadow: var(--shadow);
}
.hero-card.has-img { background-size: cover; background-position: center; border-color: transparent; }
.hero-card.has-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(40,24,58,.82), rgba(40,24,58,.4));
}
.hero-card.has-img .hero-content, .hero-card.has-img .hero-title { color: #fff; }
.hero-card.has-img .hero-sub { color: rgba(255,255,255,.9); }
/* halo dorado decorativo */
.hero-card::before {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px;
  border-radius: 50%; background: radial-gradient(circle, rgba(111,155,124,.28), transparent 70%);
  pointer-events: none;
}
/* Sello en marca de agua (tinta berry muy tenue, según el manual) */
.hero-seal {
  position: absolute; right: -50px; bottom: -72px; width: 300px; z-index: 1;
  opacity: .08; pointer-events: none; user-select: none;
}
.hero-card.has-img .hero-seal { display: none; }
/* Texto con color fijo: el hero es claro en ambos temas */
.hero-content { position: relative; z-index: 2; max-width: 620px; color: #33304A; }
.hero-eyebrow {
  display: inline-flex; align-items: center; letter-spacing: .3px;
  font-family: "Caveat", cursive; font-size: 19px; font-weight: 600;
  color: #7A6BB5; background: rgba(122,107,181,.12);
  padding: 5px 16px; border-radius: 999px;
}
.hero-title {
  font-family: "Fraunces", serif; font-weight: 700;
  font-size: clamp(30px, 4.6vw, 48px); line-height: 1.06; margin: 16px 0 12px; color: #33304A;
}
.hero-sub {
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.55; font-weight: 500;
  color: #6E6C86; margin: 0 0 26px; max-width: 500px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-btn-primary { background: #7A6BB5; color: #fff; box-shadow: 0 8px 20px rgba(122,107,181,.32); transition: transform .15s, filter .15s; }
.hero-btn-primary:hover { filter: brightness(1.04); transform: translateY(-2px); }
.hero-btn-ghost { background: #FDFDFF; color: #7A6BB5; border: 2px solid #DBD5EE; transition: border-color .15s, transform .15s; }
.hero-btn-ghost:hover { border-color: #7A6BB5; transform: translateY(-2px); }
/* Abanico de portadas del hero */
.hero-deco { position: relative; z-index: 2; flex: 0 0 auto; display: flex; justify-content: center; }
.hero-books { display: flex; }
.hb {
  width: 130px; aspect-ratio: 2/3; border-radius: 14px; color: #fff;
  box-shadow: 0 20px 40px rgba(65,60,115,.3); display: flex; align-items: flex-end; padding: 13px;
  font-family: "Fraunces", serif; font-size: 14px; line-height: 1.2;
}
.hb.b1 { transform: rotate(-8deg) translateY(10px); background: linear-gradient(160deg,#3f5b8a,#1e2a44); }
.hb.b2 { transform: translateY(-14px); z-index: 2; margin: 0 -16px; background: linear-gradient(160deg,#7A6BB5,#332B61); }
.hb.b3 { transform: rotate(8deg) translateY(10px); background: linear-gradient(160deg,#4c6b4a,#22331f); }
/* Portadas reales inyectadas por app.js (sustituyen a los libros de muestra) */
img.hb { padding: 0; object-fit: cover; border: 2px solid rgba(255,255,255,.75); background: var(--cream-2); }

/* Tarjetas de comunidad bajo el banner (club, libro del mes, reto) */
.com-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.comc {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface); border: 2px solid var(--line); border-radius: 18px;
  padding: 13px 16px; cursor: pointer; font: inherit; color: var(--ink);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.comc:hover, .comc:focus-visible { transform: translateY(-3px); border-color: var(--berry); box-shadow: var(--shadow); }
.comc-ico {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  background: var(--peach); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
[data-theme="dark"] .comc-ico { background: #232135; }
.comc-cover {
  width: 40px; height: 58px; object-fit: cover; border-radius: 7px; flex: 0 0 auto;
  box-shadow: 0 4px 10px rgba(65,60,115,.28);
}
.comc-txt { min-width: 0; }
.comc-txt b { display: block; font-size: 15px; line-height: 1.25; }
.comc-txt small {
  display: block; color: var(--muted); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comc-mas { margin-left: auto; color: var(--berry); font-weight: 800; font-size: 19px; flex: 0 0 auto; }

/* Ventana informativa de las tarjetas */
.info-card { max-width: 560px; }
.info-body { padding: 30px 30px 28px; }
.im-ico { display: block; font-size: 38px; line-height: 1; margin-bottom: 8px; }
.im-tit { font-family: "Fraunces", serif; font-size: 26px; margin: 0; color: var(--ink); }
.im-caveat { font-family: "Caveat", cursive; font-size: 21px; color: var(--berry-d); margin: 2px 0 14px; }
[data-theme="dark"] .im-caveat { color: var(--berry); }
.im-txt p { margin: 0 0 12px; line-height: 1.65; color: var(--ink); }
.im-cta { margin-top: 8px; }
.im-libro { display: flex; gap: 16px; align-items: flex-start; margin: 6px 0 14px; }
.im-cover { width: 104px; border-radius: 10px; flex: 0 0 auto; box-shadow: var(--shadow); }
.im-libro-tit { font-family: "Fraunces", serif; font-size: 19px; margin: 4px 0 2px; }
.im-libro-aut { color: var(--muted); margin: 0 0 8px; font-size: 14px; }
.im-libro-precio { font-weight: 800; color: var(--berry-d); font-size: 18px; margin: 0; }
[data-theme="dark"] .im-libro-precio { color: var(--berry); }
.im-reto { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 7px; }
.im-reto li { background: var(--cream-2); border-radius: 10px; padding: 8px 12px; font-size: 14px; line-height: 1.4; }
.im-reto b { color: var(--berry-d); }
[data-theme="dark"] .im-reto b { color: var(--berry); }

/* ============================================================
   Banner de comunidad + redes sociales
   ============================================================ */
.comunidad { margin-top: 48px; }
.comunidad-inner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #7A6BB5 0%, #5C4F94 100%);
  border-radius: 30px; padding: 40px 44px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
/* Sello en tinta blanca sobre berry (versión permitida por el manual) */
.comunidad-seal {
  position: absolute; right: -34px; top: 50%; transform: translateY(-50%);
  width: 230px; opacity: .14; pointer-events: none; user-select: none;
}
.comunidad-text, .comunidad-redes, .comunidad-covers { position: relative; z-index: 1; }
.comunidad-text h2 { font-family: "Fraunces", serif; color: #fff; margin: 0 0 6px; font-size: 28px; }
.comunidad-text p { margin: 0; color: rgba(255,255,255,.9); font-size: 14.5px; max-width: 460px; }
.comunidad-redes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Abanico de portadas reales del catálogo */
.comunidad-covers { display: flex; align-items: center; padding: 10px 6px; }
.comunidad-covers:empty { display: none; }
.comunidad-covers .cc {
  width: 96px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.4); box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.comunidad-covers .cc:nth-child(1) { transform: rotate(-9deg) translateY(10px); }
.comunidad-covers .cc:nth-child(2) { transform: rotate(-3deg) translateY(-8px); margin-left: -30px; z-index: 1; }
.comunidad-covers .cc:nth-child(3) { transform: rotate(4deg) translateY(6px); margin-left: -30px; z-index: 2; }
.comunidad-covers .cc:nth-child(4) { transform: rotate(10deg) translateY(-4px); margin-left: -30px; z-index: 3; }
/* En la banda berry, iconos en círculos claros translúcidos */
.comunidad-redes .social-ico { background: rgba(255,255,255,.16); box-shadow: none; }
.comunidad-redes .social-ico:hover { background: rgba(255,255,255,.3); }

.social-ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.14); transition: transform .15s, filter .15s;
}
.social-ico:hover { transform: translateY(-3px); filter: brightness(1.06); }
.social-ico.ig { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.social-ico.tt { background: #111; }
.social-ico.fb { background: #1877F2; }
.social-ico.yt { background: #FF0000; }
.social-ico.wa { background: var(--whats); }

/* Footer con redes */
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-social { display: flex; gap: 10px; }
.footer-social .social-ico { width: 40px; height: 40px; box-shadow: none; }

/* Enlace discreto al panel de administración */
.footer-bottom { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.admin-access {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); text-decoration: none; opacity: .75;
  padding: 6px 12px; border-radius: 999px; transition: color .15s, opacity .15s, background .15s;
}
.admin-access:hover { color: var(--berry); opacity: 1; background: var(--cream-2); }

/* ============================================================
   Toggle de tema (claro/oscuro)
   ============================================================ */
.theme-toggle {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .15s;
}
.theme-toggle:hover { border-color: var(--berry); color: var(--berry); transform: rotate(-12deg); }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* ============================================================
   Explora por categoría (tarjetas con portada)
   ============================================================ */
.cat-showcase { padding-top: 28px; }
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 14px;
}
.cat-card {
  position: relative; height: 140px; border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; display: block; width: 100%; padding: 0;
  background: var(--cream-2); text-align: left; color: #fff;
}
.cat-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,20,25,.15) 0%, rgba(40,20,25,.78) 100%); }
.cat-card:hover .cat-card-bg { transform: scale(1.07); }
.cat-card-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px; }
.cat-card-label b { display: block; font-family: "Fraunces", serif; font-size: 16px; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cat-card-label span { font-size: 12px; opacity: .9; }
/* De qué va la categoría (2 líneas como mucho, para no tapar la portada) */
.cat-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
  opacity: .88; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
@media (max-width: 700px) { .cat-card-desc { display: none; } }

/* ============================================================
   Testimonios
   ============================================================ */
.testimonios { padding-top: 36px; }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 14px; }
.testi-card {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; box-shadow: var(--shadow); position: relative;
}
.testi-card::before {
  content: "\201C"; position: absolute; top: 6px; right: 18px;
  font-family: "Fraunces", serif; font-size: 60px; color: var(--gold); opacity: .35; line-height: 1;
}
.testi-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
/* Citas en Fraunces itálica, como pide el manual para frases */
.testi-text { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: 15.5px; color: var(--ink); margin: 0 0 16px; line-height: 1.55; }
.testi-author { display: flex; align-items: center; gap: 11px; }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--berry), var(--gold)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.testi-author b { display: block; font-size: 14px; color: var(--ink); }
.testi-author small { color: var(--muted); font-size: 12px; }

/* ============================================================
   Aparición al hacer scroll (reveal)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-track { transition: none; }
}

/* ---------- Responsive ---------- */
/* Evita el scroll horizontal accidental en móvil (p. ej. sellos decorativos y
   diapositivas del carrusel que asoman fuera de pantalla). Usamos 'clip' (no
   'hidden') tanto en html como en body para cortarlo de raíz sin convertirlos
   en contenedores de scroll, así el encabezado 'sticky' sigue funcionando. */
html { overflow-x: clip; }
body { overflow-x: clip; }

@media (max-width: 760px) {
  .wrap { padding: 0 16px; }

  /* Cabecera más compacta; la búsqueda baja a su propia fila a lo ancho.
     La marca crece para empujar los 3 botones juntos arriba a la derecha. */
  .header-inner { gap: 10px 10px; padding: 12px 16px; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand-seal { width: 44px; height: 44px; }
  .brand-name { font-size: 18px; }
  /* En móvil el eslogan ensancha la marca y empuja los botones a otra fila;
     se oculta aquí y se conserva en escritorio. */
  .brand-tag { display: none; }
  .search-box { min-width: 100%; order: 3; }
  /* En iOS, fuente <16px hace zoom al enfocar: la subimos */
  .search-box input { font-size: 16px; padding: 11px 44px 11px 15px; }

  .cats-inner { padding: 10px 16px; gap: 7px; }
  /* Chips con área táctil más cómoda */
  .chip { padding: 9px 15px; font-size: 14px; }

  /* Barra de filtros: el título ocupa toda la fila y los controles debajo */
  .toolbar-inner { padding: 10px 16px; gap: 10px; row-gap: 8px; }
  .seccion { flex-basis: 100%; font-size: 17px; }
  .control { flex: 1; min-width: 0; font-size: 15px; padding: 11px 12px; }
  .check { font-size: 14px; }
  .count { flex-basis: 100%; margin-left: 0; text-align: right; }

  .destacados { padding-top: 20px; }
  .row-scroll { grid-auto-columns: 150px; gap: 14px; }
  .row-scroll { padding: 10px 4px 12px; margin: -10px -4px 0; }

  .hero-card { padding: 34px 28px; }
  .hero-nav { display: none; } /* en táctil se desliza con el dedo */
  .hero-vent { padding: 34px 28px 50px; }
  .hero-vent .hv-imgs { right: 22px; }
  .hv-b { width: 98px; }
  .hero-vent .hv-tit, .hero-vent .hv-txt, .hero-vent .hv-det { max-width: 430px; }
  .hb { width: 112px; }
  .com-cards { grid-template-columns: 1fr; }
  .comunidad-inner { padding: 24px 22px; }
  /* Botones de acción (favoritos, carrito, tema) más compactos y juntos.
     La marca (flex:1) ya los empuja a la derecha, sin margin-left que los parta. */
  .theme-toggle { margin-left: 0; width: 40px; height: 40px; }
  .cat-card { height: 112px; }
}

@media (max-width: 640px) {
  /* Ficha (modal): una columna, márgenes ajustados, CTA a lo ancho */
  .modal { padding: 0; align-items: flex-end; }
  .modal-card { max-width: 100%; border-radius: 18px 18px 0 0; max-height: 94vh; }
  .modal-body { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px 24px; }
  .modal-img { max-width: 190px; margin: 4px auto 0; }
  .modal-info h2 { font-size: 21px; }
  .m-price { font-size: 23px; }
  .modal-close { top: 8px; right: 10px; width: 44px; height: 44px; }
  .btn-whats { width: 100%; padding: 14px 18px; }
  /* CTA siempre a la vista mientras se lee la ficha */
  .modal-info .btn-whats {
    position: sticky; bottom: 10px; margin-top: 16px;
    box-shadow: 0 6px 18px rgba(37,211,102,.45);
  }

  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 20px 0; }
  .card-title { font-size: 14.5px; }
  /* Tarjeta angosta: precio arriba y disponibilidad debajo, sin apretujarse */
  .card-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fab-whats { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .destacados-propios { padding: 18px 16px 12px; }

  /* Hero apilado y centrado en móvil */
  .hero-card { flex-direction: column-reverse; text-align: center; padding: 30px 22px; gap: 22px; }
  .hero-vent { align-items: center; text-align: center; padding: 26px 22px 48px; }
  .hero-vent .hv-deco { font-size: 170px; right: -34px; bottom: -40px; }
  /* portadas arriba del texto, como en el banner principal */
  .hero-vent .hv-imgs { position: static; transform: none; order: -1; margin-bottom: 2px; }
  .hv-b { width: 76px; }
  .hv-b.p2 { transform: translateY(-8px); }
  .hero-vent .hv-ico { width: 56px; height: 56px; font-size: 26px; border-radius: 16px; margin-bottom: 4px; }
  .hero-vent .hv-tit, .hero-vent .hv-txt { max-width: 100%; }
  .hero-vent .hv-det { max-width: 100%; font-size: 14.5px; -webkit-line-clamp: 4; }
  .hero-content { max-width: 100%; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-btn-primary, .hero-btn-ghost { flex: 1 1 auto; }
  .hb { width: 96px; padding: 10px; font-size: 12.5px; }
  .comunidad-inner { flex-direction: column-reverse; text-align: center; }
  .comunidad-text p { margin-left: auto; margin-right: auto; }
  .comunidad-redes { justify-content: center; }
  .comunidad-covers { justify-content: center; padding: 4px 0 0; }
  .comunidad-covers .cc { width: 78px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-brand { flex-direction: column; gap: 10px; }
  .footer-social { justify-content: center; }
  .comunidad-seal { width: 180px; right: -50px; opacity: .1; }
  .hero-seal { width: 220px; right: -60px; bottom: -60px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .testimonios { padding-top: 26px; }
}

/* Móviles estrechos: garantiza 2 columnas sin que el texto apriete */
@media (max-width: 380px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .brand-tag { display: none; }
  /* Cabecera aún más compacta para que los 3 botones no bajen de fila */
  .header-inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand-seal { width: 40px; height: 40px; }
  .brand-name { font-size: 16px; }
  .theme-toggle { width: 38px; height: 38px; }
}

/* ===== "Toda la saga" en la ficha ===== */
.m-saga .rel-card { position: relative; }
.saga-num {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--berry); color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.rel-card.saga-actual { outline: 2px solid var(--berry); outline-offset: 1px; cursor: default; opacity: .85; }
.rel-card.saga-actual::after {
  content: "Estás viendo este"; position: absolute; bottom: 6px; left: 6px; right: 6px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 4px; border-radius: 6px;
}