/* ============================================================
   ESTILO RÚSTICO — identidad S1 (día · Sol & venta) / W4 (noche · Ébano & madera)
   Se carga DESPUÉS de estilo.css: refina sin romper la base.
   Día: crema de estanco, terracota vivo, sol que respira tras el titular.
   Noche: ébano cálido (#141210), madera encendida (#d9a05b), foco que sigue el cursor.
   ============================================================ */

/* ---------- tokens S1 (día) ---------- */
:root {
  --crema: #f8efdf;
  --crema-2: #f2e6cf;
  --crema-3: #eadcc0;
  --madera: #6b3d1e;
  --madera-osc: #33241a;
  --madera-clara: #7d6a52;
  --terracota: #c05a28;
  --terracota-osc: #a8471c;
  --terracota-suave: rgba(192, 90, 40, .13);
  --borde: #e0cdb0;
  --borde-osc: #c9b490;
  --oro: #b98a44;
  --oro-claro: #d9b478;
  --oro-brillo: rgba(217, 180, 120, .28);
  --sombra: 0 1px 2px rgba(120, 60, 25, .07), 0 4px 12px rgba(120, 60, 25, .11);
  --sombra-grande: 0 2px 6px rgba(120, 60, 25, .08), 0 18px 44px rgba(120, 60, 25, .22);
  --serif: 'Fraunces', 'Bitter', Georgia, 'Times New Roman', serif;
  --conf-bg: rgba(255, 250, 240, .6);
}
/* precio: terracota profunda, legible también en tablas chicas */
.precio { color: #a8471c; }

/* ---------- base S1 ---------- */
body {
  background-image:
    radial-gradient(1100px 420px at 82% -10%, rgba(217, 130, 60, .16), transparent 70%),
    repeating-linear-gradient(45deg, rgba(160, 110, 60, .028) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(107, 61, 30, .02) 0 3px, transparent 3px 11px);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { letter-spacing: -.012em; font-weight: 600; }
h2 { font-size: 1.72rem; }

::selection { background: rgba(192, 90, 40, .28); color: inherit; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--madera-clara); border-radius: 8px; border: 3px solid var(--crema); }

.busqueda input::placeholder, .campo input::placeholder, .buscador-input::placeholder { color: var(--madera-clara); opacity: .85; }

/* transición suave al cambiar tema */
.topbar, .drawer, .modal-caja, .precios-caja, .panel, .info-card, .chip, .tab, footer,
.drawer-cab, .drawer-pie, .asistente-pie, #asistente-panel, .buscador-lista, .faq-lista details, .opinion {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* ---------- header traslúcido ---------- */
.topbar {
  background: rgba(248, 239, 223, .86);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 3px solid var(--terracota);
  box-shadow: 0 1px 0 rgba(185, 138, 68, .35), 0 4px 18px rgba(120, 60, 25, .10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--crema); }
}
.marca img { border-radius: 50%; background: none; box-shadow: none; object-fit: contain; }
.nav-principal a { border-radius: 10px; transition: background .18s ease, color .18s ease; }
.nav-principal a:hover { color: var(--terracota-osc); background: var(--crema-3); }

/* ---------- botón de tema ---------- */
#btn-tema {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--borde); background: var(--crema-2);
  font-size: 1.02rem; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
#btn-tema:hover { border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(192, 90, 40, .16); transform: rotate(-14deg) scale(1.06); }
#btn-tema:active { transform: scale(.96); }

/* ---------- botones con cuerpo ---------- */
.btn { transition: transform .12s ease, filter .18s ease, box-shadow .18s ease; }
.btn-terracota, .btn-agregar, .btn-carrito, #sel-toggle {
  background: linear-gradient(180deg, #cc6330 0%, #a8471c 100%);
  box-shadow: 0 5px 16px rgba(168, 71, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-terracota:hover, .btn-agregar:hover, .btn-carrito:hover, #sel-toggle:hover {
  background: linear-gradient(180deg, #d56d38 0%, #a8471c 100%);
  filter: brightness(1.05);
  box-shadow: 0 7px 20px rgba(168, 71, 28, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-terracota:active, .btn-agregar:active { transform: translateY(1px); }

/* ---------- hero: sol S1 (visible día y noche — de noche en dorado) ---------- */
.hero { position: relative; overflow: hidden; }
.hero .sol, .hero .sol-rays { display: none; }
.hero .sol {
  display: block; position: absolute; top: -30px; right: 3%; width: 330px; height: 330px; border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, rgba(235, 150, 70, .5), rgba(192, 90, 40, .18) 58%, transparent 72%);
  filter: blur(2px); z-index: 0; pointer-events: none;
}
.hero .sol-rays {
  display: block; position: absolute; top: -60px; right: calc(3% - 30px); width: 390px; height: 390px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(220, 130, 60, .16) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask-image: radial-gradient(circle, transparent 52%, #000 60%);
  mask-image: radial-gradient(circle, transparent 52%, #000 60%);
  animation: girar 120s linear infinite; z-index: 0; pointer-events: none;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero .sol { animation: respirar 7s ease-in-out infinite; }
}
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.05); opacity: 1; } }
/* luna nocturna (dueño 10/09/2026): de noche el sol se convierte en luna creciente
   con halo suave y estrellitas que titilan — sobre la viñeta ébano */
html[data-tema="noche"] .hero .sol {
  background: transparent;
  box-shadow: inset -46px 16px 0 0 rgba(240, 232, 218, .58), 0 0 70px rgba(217, 160, 91, .28);
  filter: blur(1.2px);
}
html[data-tema="noche"] .hero .sol-rays {
  background: radial-gradient(circle, rgba(217, 160, 91, .16), transparent 62%);
  animation: respirar 9s ease-in-out infinite;
}
html[data-tema="noche"] .hero .sol-rays::before {
  content: ''; position: absolute; top: 20%; left: 10%; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(232, 220, 198, .85);
  box-shadow: 42px 28px 0 0 rgba(232, 220, 198, .8), 96px -12px 0 -1px rgba(232, 220, 198, .6),
              152px 42px 0 -1px rgba(232, 220, 198, .7), 222px 12px 0 0 rgba(232, 220, 198, .5),
              58px 74px 0 -1px rgba(232, 220, 198, .55), 196px 84px 0 -1px rgba(232, 220, 198, .65),
              264px 58px 0 -1px rgba(232, 220, 198, .4), 130px 108px 0 -1px rgba(232, 220, 198, .5);
  animation: titilar 4.5s ease-in-out infinite;
}
@keyframes titilar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hero .wrap { position: relative; z-index: 1; }

/* frase de match en el hero, con subrayado análogo */
.hero-match { color: #f4e3c2; font-family: var(--serif); font-style: italic; font-size: 1.12rem; margin: 0 auto 1.1em; max-width: 640px; }
.match-heroline { position: relative; color: #eeb877; white-space: normal; }
.match-heroline svg { position: absolute; left: -1%; right: -1%; bottom: -.14em; width: 102%; height: .16em; color: #eeb877; opacity: .9; }
.match-heroline svg path { vector-effect: non-scaling-stroke; }

.hero h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.hero h1 em { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.hero .sello { background: #f6ead1; border: 1px solid rgba(150, 100, 45, .5); color: #241a10; letter-spacing: .8px; }

/* ---------- títulos con filete ---------- */
.titulo-seccion h2 { position: relative; display: inline-block; }
.titulo-seccion h2::after {
  content: ''; display: block; width: 68px; height: 2px; margin-top: 7px;
  background: linear-gradient(90deg, var(--terracota), transparent); border-radius: 2px;
}

/* ---------- chips y cards ---------- */
.chip { border-width: 1.5px; transition: border-color .18s ease, transform .12s ease, background .18s ease; }
.chip:hover { transform: translateY(-1px); }
.chip.activo {
  background: linear-gradient(180deg, #6b3d1e 0%, #4a2a12 100%);
  border-color: #4a2a12; box-shadow: 0 3px 10px rgba(74, 42, 18, .28);
}
.card-producto {
  border-width: 1px; box-shadow: var(--sombra);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card-producto:hover { transform: translateY(-3px); border-color: var(--terracota); box-shadow: var(--sombra-grande); }
.card-producto .foto img, .card-producto .foto video { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.card-producto:hover .foto img { transform: scale(1.045); }
.badge { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.swatch { transition: transform .15s ease; }
.swatch:hover { transform: scale(1.15); }
.swatch.seleccionado { box-shadow: 0 0 0 2.5px var(--terracota); }

/* ---------- corazoncitos de match ---------- */
.match-btn { position: absolute; top: 8px; right: 8px; z-index: 4; width: 38px; height: 38px;
             border-radius: 50%; border: 1.5px solid var(--borde); background: var(--conf-bg);
             font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
             transition: transform .15s ease, border-color .2s ease; padding: 0; }
.match-btn:hover { transform: scale(1.12); border-color: var(--terracota); }
/* en vista lista el precio vive arriba a la derecha: el corazón se va a la esquina
   de la foto chiquita para no taparlo (dueño 10/09/2026) */
.vista-lista .match-btn { top: auto; right: auto; bottom: 14px; left: 86px; }
@media (max-width: 640px) {
  .vista-lista .match-btn { bottom: 12px; left: 62px; width: 32px; height: 32px; font-size: .95rem; }
}
.match-btn.on { border-color: var(--terracota); animation: pop .38s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .match-btn.on { animation: none; } }
body.modo-sel .match-btn { display: none; }
.match-cont { display: inline-flex; align-items: center; gap: 7px; background: var(--crema-2);
              border: 1.5px solid var(--borde); color: var(--madera-osc);
              border-radius: 999px; padding: 8px 13px; font-weight: 700; font-size: .84rem;
              cursor: pointer; margin-right: 8px; }
.match-cont:hover { border-color: var(--terracota); }
.match-cont.bounce { animation: rebote .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rebote { 40% { transform: scale(1.18); } }
.match-toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(16px);
               background: var(--madera-osc); color: #fff6ec; border: 1px solid rgba(217, 140, 64, .5);
               padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: .9rem; z-index: 130;
               opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.match-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#match-panel { position: fixed; top: 74px; right: 14px; z-index: 120; width: min(340px, calc(100vw - 28px));
               background: var(--crema); border: 1.5px solid var(--borde); border-radius: 18px;
               box-shadow: var(--sombra-grande); padding: 16px; display: none; }
#match-panel.abierto { display: block; }
#match-panel h4 { margin: 0 0 4px; font-size: 1.05rem; }
#match-panel .mp-sub { font-size: .76rem; color: var(--madera-clara); margin: 0 0 10px; }
#match-panel ul { list-style: none; margin: 0 0 12px; padding: 0; max-height: 40vh; overflow-y: auto;
                  display: flex; flex-direction: column; gap: 8px; }
#match-panel li { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; align-items: baseline; }
#match-panel li b { font-family: var(--serif); color: var(--terracota-osc); font-size: .95rem; }
#match-panel li button { background: none; border: none; color: #b0483a; cursor: pointer; font-size: .78rem; padding: 0; text-decoration: underline; }
#match-panel .mp-btn { display: block; text-align: center; background: #25d366; color: #06331a; border: none;
                       border-radius: 999px; padding: 11px 18px; font-weight: 700; font-size: .9rem; text-decoration: none; }
#match-panel .mp-vaciar { background: none; border: none; color: var(--madera-clara); font-size: .76rem; cursor: pointer;
                          text-decoration: underline; margin-top: 8px; display: block; width: 100%; }
#match-panel .mp-vacio { text-align: center; color: var(--madera-clara); font-size: .88rem; padding: 16px 6px; }

/* ---------- paneles ---------- */
.panel, .info-card { border-width: 1px; box-shadow: var(--sombra); }
.drawer { box-shadow: -10px 0 44px rgba(0, 0, 0, .3); }
.modal-caja { box-shadow: 0 24px 70px rgba(50, 25, 10, .35); }
footer { box-shadow: inset 0 3px 0 rgba(217, 180, 120, .18); }

/* ---------- filtros ---------- */
.fp-btn { border-width: 1.5px; }
.fp-atermico.activo { box-shadow: 0 4px 16px rgba(192, 90, 40, .22), 0 0 0 1px rgba(185, 138, 68, .25); }

/* ============================================================
   MODO NOCTURNO — W4 · ÉBANO & MADERA
   ============================================================ */
html[data-tema="noche"] {
  color-scheme: dark;
  --crema: #141210;
  --crema-2: #1d1915;
  --crema-3: #28221b;
  --madera: #e8dcc6;
  --madera-osc: #ece4d8;
  --madera-clara: #a99f90;
  --terracota: #d9a05b;
  --terracota-osc: #e0b478;
  --terracota-suave: rgba(217, 160, 91, .14);
  --verde: #7c9d6f;
  --verde-osc: #a9d0b3;
  --verde-suave: rgba(124, 157, 111, .16);
  --borde: #3f372c;
  --borde-osc: #57493a;
  --sombra: 0 2px 10px rgba(0, 0, 0, .5);
  --sombra-grande: 0 14px 44px rgba(0, 0, 0, .65);
  --oro: #c99b52;
  --oro-claro: #e3c185;
  --oro-brillo: rgba(201, 155, 82, .26);
  --conf-bg: rgba(255, 255, 255, .035);
}
html[data-tema="noche"] body {
  background-image:
    radial-gradient(1100px 420px at 82% -10%, rgba(217, 160, 91, .07), transparent 70%),
    repeating-linear-gradient(45deg, rgba(201, 155, 82, .02) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(201, 155, 82, .014) 0 3px, transparent 3px 11px);
}
/* foco de luz que sigue el cursor (solo con mouse; en celu queda un halo fijo) */
html[data-tema="noche"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(560px circle at var(--mx, 72%) var(--my, 18%), rgba(217, 160, 91, .09), transparent 62%);
}
html[data-tema="noche"] a:not(.btn) { color: var(--terracota-osc); }
html[data-tema="noche"] .precio { color: var(--terracota); }

/* header nocturno */
html[data-tema="noche"] .topbar { background: rgba(18, 15, 12, .86); }
html[data-tema="noche"] .nav-principal a:hover { background: var(--crema-3); }
html[data-tema="noche"] .redes-header a:hover { background: rgba(217, 160, 91, .14); }
/* (el sol ya no se esconde de noche: tiene versión dorada arriba, en el bloque del hero) */
/* palabra clave del hero con foil de oro */
html[data-tema="noche"] .hero h1 em,
html[data-tema="noche"] .match-heroline {
  background: linear-gradient(105deg, #eccf96 0%, #d9a05b 35%, #f4e2b2 55%, #c08a3e 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-tema="noche"] .match-heroline svg { color: #d9a05b; }

/* superficies que en estilo.css eran #fff */
html[data-tema="noche"] .busqueda input,
html[data-tema="noche"] .card-producto,
html[data-tema="noche"] .chip,
html[data-tema="noche"] .stepper,
html[data-tema="noche"] .panel,
html[data-tema="noche"] .info-card,
html[data-tema="noche"] .drawer-cab,
html[data-tema="noche"] .drawer-pie,
html[data-tema="noche"] .faq-lista details,
html[data-tema="noche"] .opinion,
html[data-tema="noche"] .comp-item,
html[data-tema="noche"] .oferta-modal-card,
html[data-tema="noche"] .buscador-input,
html[data-tema="noche"] .buscador-lista,
html[data-tema="noche"] #asistente-panel,
html[data-tema="noche"] .asistente-pie,
html[data-tema="noche"] .campo input,
html[data-tema="noche"] .campo select,
html[data-tema="noche"] .color-card {
  background: var(--crema-2); color: var(--madera-osc);
}
html[data-tema="noche"] .btn-carrito .contador { background: var(--crema); color: var(--terracota); }
html[data-tema="noche"] .busqueda input { border-color: var(--borde); }
html[data-tema="noche"] .stepper button { color: var(--madera); }
html[data-tema="noche"] .fp-btn { background: var(--crema-2); }
html[data-tema="noche"] .fp-atermico.activo {
  background: #d8ecdb;
  border-color: #9dc4a5; color: #102b18;
}
html[data-tema="noche"] .fp-atermico.activo small { color: #2e5d3c; }
html[data-tema="noche"] .fp-hormigon.activo {
  background: linear-gradient(135deg, #3b3a37, #2c2b28);
  border-color: #8b8983; color: #d9d6d0;
}
html[data-tema="noche"] .fp-hormigon.activo small { color: #a3a09a; }
html[data-tema="noche"] #asistente-msgs .msg.bot { background: var(--crema-3); }
html[data-tema="noche"] .faq-lista details p,
html[data-tema="noche"] .op-texto { color: #d9cbb4; }
html[data-tema="noche"] .badge-ho { background: rgba(216, 207, 193, .16); color: #d8cfc1; }
html[data-tema="noche"] .swatch { border-color: var(--crema-2); }
html[data-tema="noche"] ::-webkit-scrollbar-thumb { border-color: var(--crema); }
html[data-tema="noche"] ::selection { background: rgba(217, 160, 91, .4); }
html[data-tema="noche"] #match-panel { background: var(--crema-2); }

/* barras y flotantes */
html[data-tema="noche"] footer { background: #0d0b09; color: #cfc4b0; }
html[data-tema="noche"] .toast { background: var(--crema-3); border: 1px solid var(--oro); color: var(--madera-osc); }
html[data-tema="noche"] #asistente-btn { background: linear-gradient(180deg, #3a2f22, #261e14); }
html[data-tema="noche"] #asistente-btn:hover { background: linear-gradient(180deg, #4a3c2b, #2e2418); }
html[data-tema="noche"] .asistente-cab { background: linear-gradient(180deg, #3a2f22, #261e14); }
html[data-tema="noche"] .fabrica-float { background: linear-gradient(135deg, #3a2f22, #241d13); }
html[data-tema="noche"] #btn-instalar-pwa { background: linear-gradient(180deg, #3a2f22, #261e14); }
html[data-tema="noche"] #sel-bar { background: var(--crema-3); }
html[data-tema="noche"] #sel-salir { background: var(--crema-2); color: var(--madera-osc); }

/* fondos translúcidos claros */
html[data-tema="noche"] .ficha-nav { background: rgba(24, 20, 16, .94); color: var(--madera); }
html[data-tema="noche"] .sel-x { background: rgba(24, 20, 16, .94); }
html[data-tema="noche"] #nav-modulos button { background: rgba(24, 20, 16, .94); color: var(--madera); }
html[data-tema="noche"] #frase-flotante { background: rgba(24, 20, 16, .93); color: var(--madera-osc); }
html[data-tema="noche"] .gal-btn { background: var(--crema-3); color: var(--madera); }
html[data-tema="noche"] .buscador-op { color: var(--madera-osc); border-bottom-color: var(--crema-3); }
html[data-tema="noche"] .buscador-op:hover, html[data-tema="noche"] .buscador-op.activa { background: var(--crema-3); }
html[data-tema="noche"] .adm-picker-caja { background: var(--crema-2); }

/* hero nocturno: viñeta profunda */
html[data-tema="noche"] .hero {
  background-image:
    linear-gradient(180deg, rgba(10, 7, 4, .82) 0%, rgba(16, 11, 7, .62) 70%, rgba(10, 7, 4, .8) 100%),
    url('../assets/img/hero.jpg');
}
/* el texto del hero de manuales/landings heredaba --crema (que de noche es casi negro):
   sobre la viñeta oscura se perdía — forzamos tono claro fijo */
html[data-tema="noche"] .hero { color: #f2e7d3; }
html[data-tema="noche"] .hero h1 { color: #fff6ea; }

/* fotos de producto: jamás filtradas */
html[data-tema="noche"] .card-producto .foto { background: #100d0a; }
html[data-tema="noche"] .ficha .foto-grande, html[data-tema="noche"] .gal-viewer { background: #100d0a; }
html[data-tema="noche"] .item-carrito .mini-foto { background: var(--crema-3); }

/* ============================================================
   ARQUITECTURA S1 — hero editorial, bandas de venta, logos
   ============================================================ */

/* logos: más presencia, en los cuatro puestos clave */
.marca img { width: 62px; height: 62px; }
/* bordes suaves: anillo cojín + sombra gentil, en los cuatro puestos */
.marca img, .footer-badge, .drawer-badge {
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 250, 240, .55), 0 6px 16px rgba(120, 60, 25, .22);
}
html[data-tema="noche"] .marca img,
html[data-tema="noche"] .footer-badge,
html[data-tema="noche"] .drawer-badge {
  box-shadow: 0 0 0 4px rgba(16, 12, 8, .55), 0 6px 18px rgba(0, 0, 0, .5), 0 0 22px rgba(217, 160, 91, .18);
}
.hero-badge { width: 92px; height: 92px; margin-bottom: 14px; border-radius: 50%;
              box-shadow: 0 0 0 5px rgba(255, 250, 240, .16), 0 10px 26px rgba(0, 0, 0, .4); }
.footer-badge { width: 76px; height: 76px; margin-bottom: 10px; display: block; }
.drawer-badge { width: 34px; height: 34px; margin-right: 10px; }
.drawer-cab h3 { display: inline; vertical-align: middle; }

/* hero S1: una columna centrada — sin foto (dueño 09/09/2026: la portada estaba muy cargada) */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; align-items: center; }
.hero-texto { text-align: center; max-width: 780px; margin: 0 auto; }
.hero-texto h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.02; margin: 0 auto 14px;
  max-width: 680px; color: #fff6ea; text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.hero-texto h1 em { font-style: italic; color: #eeb877; display: inline; }
.hero-sub { max-width: 560px; margin: 0 auto 1.6em; font-size: 1.02rem; opacity: .95; color: #f4e8d4; }
.hero .ctas { justify-content: center; }
.hero-lead { position: relative; border-radius: 26px; overflow: hidden; min-height: 380px;
             box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,240,220,.14); }
.hero-lead img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-sello { position: absolute; left: 14px; bottom: 14px; background: rgba(26,17,10,.78);
              border: 1px solid rgba(238,184,119,.5); color: #f4e3c2; border-radius: 999px;
              padding: 8px 16px; font-size: .74rem; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; }
.k-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 auto 14px; max-width: 560px; }

/* visor rotatorio de productos en el hero: medallón circular que cambia cada 6 s con fundido */
.hero-visor { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.visor-foto { width: 168px; height: 168px; border-radius: 50%; overflow: hidden; padding: 0; cursor: pointer;
              border: 4px solid rgba(255, 246, 234, .38); background: #241a10;
              box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 240, 220, .12);
              transition: transform .3s ease; }
.visor-foto:hover { transform: scale(1.05); }
.visor-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .8s ease; }
.visor-foto img.cambiando { opacity: 0; }
.visor-nombre { font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: #f4e3c2;
                background: rgba(26, 17, 10, .62); border: 1px solid rgba(238, 184, 119, .42);
                border-radius: 999px; padding: 5px 16px; max-width: 280px; text-align: center; }
@media (max-width: 640px) {
  .visor-foto { width: 136px; height: 136px; }
  .hero-visor { margin-top: 18px; }
}
.k-eyebrow .raya { flex: 1; height: 1px; background: rgba(238,184,119,.4); }
.k-eyebrow .txt { font-size: .68rem; letter-spacing: 3.2px; text-transform: uppercase; color: #eeb877; font-weight: 600; }
.hero-match { font-size: 1.14rem; margin: 0 0 12px; font-family: var(--serif); font-style: italic; color: #f4e3c2; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-lead { min-height: 260px; }
  .hero { padding: 54px 0 44px; }
}

/* bandas S1 (prueba, pasos, urgencia) */
.s1-bandas { padding: 44px 0 26px; }
.p-nota { text-align: center; font-size: .84rem; color: var(--madera-clara); margin: 12px 0 0; line-height: 1.5; }
.p-nota b { color: var(--madera-osc); }
.prueba { display: flex; align-items: stretch; gap: 18px; padding: 22px 8px;
          border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.p-item { flex: 1 1 140px; text-align: center; }
.p-num { display: block; font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--terracota); line-height: 1; }
.p-txt { display: block; font-size: .78rem; color: var(--madera-clara); margin-top: 6px; line-height: 1.4; }
.p-sep { width: 1px; background: var(--borde); align-self: stretch; }
.pasos { margin: 34px 0 0; }
.pasos h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--madera); margin: 0 0 16px; }
.paso-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.paso { background: var(--conf-bg); border: 1px solid var(--borde); border-radius: 16px; padding: 18px; }
.p-num2 { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center;
          background: var(--terracota); color: #fff6ec; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
html[data-tema="noche"] .p-num2 { color: #241a0d; }
.paso b { display: block; font-size: 1rem; color: var(--madera-osc); margin-bottom: 4px; }
.paso p { margin: 0; font-size: .84rem; color: var(--madera-clara); line-height: 1.5; }
.urgencia { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 18px 20px;
            background: linear-gradient(135deg, rgba(192,90,40,.13), rgba(217,140,64,.07));
            border: 1.5px solid rgba(192,90,40,.35); border-radius: 18px; }
html[data-tema="noche"] .urgencia { background: linear-gradient(135deg, rgba(217,160,91,.12), rgba(217,160,91,.04)); border-color: rgba(217,160,91,.35); }
.u-sol { font-size: 2rem; line-height: 1; }
.u-txt { font-size: .95rem; color: var(--madera-osc); line-height: 1.5; }
.u-txt b { color: var(--terracota-osc); }

/* cinta corrediza de obras y productos */
.marquee-fotos { overflow: hidden; padding: 20px 0 24px; border-top: 1px dashed var(--borde-osc);
                 -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                 mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-fotos .pista { display: flex; gap: 14px; width: max-content; animation: correr 34s linear infinite; }
.marquee-fotos:hover .pista { animation-play-state: paused; }
.marquee-fotos figure { margin: 0; width: 158px; flex: 0 0 auto; }
.marquee-fotos figure img { width: 158px; height: 112px; object-fit: cover; border-radius: 12px; display: block;
                            box-shadow: 0 5px 14px rgba(30,18,8,.18); }
.marquee-fotos figcaption { font-size: .6rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--madera-clara);
                            margin-top: 6px; text-align: center; }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-fotos .pista { animation: none; } }

/* titulo de la cinta + fila de clientes (gira al revés) */
.marquee-fotos .mq-titulo { text-align: center; margin: 0 0 14px; font-size: .74rem; font-weight: 700;
                            letter-spacing: 2.6px; text-transform: uppercase; color: var(--madera-clara); }
.marquee-fotos .mq-titulo b { color: var(--madera-osc); font-weight: 700; }
.marquee-fotos .pista.invertida { animation-direction: reverse; margin-top: 16px; }

/* novedades de la fábrica (cargadas desde el panel admin) */
.novedades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.nov-card { background: var(--conf-bg); border: 1px solid var(--borde); border-radius: 16px; padding: 14px;
            display: flex; flex-direction: column; gap: 6px; }
.nov-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; }
.nov-tipo { align-self: flex-start; font-size: .68rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700;
            background: #d8ecdb; color: #102b18; border-radius: 999px; padding: 3px 10px; }
.nov-card b { color: var(--madera-osc); font-size: .95rem; }
.nov-card p { margin: 0; font-size: .85rem; color: var(--madera-clara); line-height: 1.45; }
.nov-card small { color: var(--madera-clara); font-size: .72rem; }

/* lista de precios: enlace plano al pie del catálogo (sin botón verde) */
.link-precio { background: none; border: none; cursor: pointer; padding: 4px 2px;
               color: var(--madera); font-size: .95rem; font-weight: 600;
               text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link-precio:hover { color: var(--terracota-osc); }

/* toggle de vista del catálogo: grilla (predeterminada) o lista compacta con foto */
.vista-toggle { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.vt-btn { border: 1.5px solid var(--borde); background: var(--conf-bg); color: var(--madera-clara);
          border-radius: 9px; width: 36px; height: 31px; cursor: pointer; font-size: .95rem; line-height: 1;
          transition: all .15s ease; }
.vt-btn:hover { border-color: var(--madera-clara); }
.vt-btn.activo { background: var(--terracota); color: #fff6ec; border-color: var(--terracota); font-weight: 700; }
html[data-tema="noche"] .vt-btn.activo { color: #241a0d; }

/* vista lista: una card por fila — foto chica a la izquierda, datos al centro, precio y pedido a la derecha */
.grid-productos.vista-lista { grid-template-columns: 1fr; gap: 10px; }
.vista-lista .card-producto { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto;
                              gap: 3px 14px; align-items: center; padding: 10px 12px;
                              grid-template-areas:
                                "foto nombre precio"
                                "foto medidas agregar"
                                "foto colores agregar"
                                "foto nota agregar"; }
.vista-lista .card-producto .foto { grid-area: foto; width: 104px; height: 104px; aspect-ratio: auto; border-radius: 12px; }
.vista-lista .card-producto .nombre { grid-area: nombre; align-self: end; min-height: 0; font-size: .98rem; line-height: 1.2; }
.vista-lista .card-producto .medidas { grid-area: medidas; align-self: start; }
.vista-lista .card-producto .selector-color { grid-area: colores; }
.vista-lista .card-producto .nota-card { display: none; } /* lista compacta: la nota completa vive en la ficha */
.vista-lista .card-producto .medio { grid-area: precio; justify-self: end; align-self: end; }
.vista-lista .card-producto .medio .precio { font-size: 1.1rem; }
.vista-lista .card-producto .fila-agregar { grid-area: agregar; justify-self: end; align-self: center; gap: 8px; }
@media (max-width: 640px) {
  .vista-lista .card-producto { grid-template-columns: 84px minmax(0, 1fr); padding: 8px;
    grid-template-areas: "foto nombre" "foto medidas" "foto precio" "foto agregar"; }
  .vista-lista .card-producto .foto { width: 84px; height: 84px; }
  .vista-lista .card-producto .medio { justify-self: start; align-self: end; }
  .vista-lista .card-producto .fila-agregar { justify-self: start; align-self: start; }
}

/* banda de confianza */
.confianza-sec { padding-top: 20px; }
.confianza { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 24px;
             padding: 22px 24px; background: var(--conf-bg); border: 1px solid var(--borde); border-radius: 18px; }
.c-item { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--madera-clara); line-height: 1.45; }
.c-item b { color: var(--madera-osc); }
.c-item .ico { font-size: 1.05rem; line-height: 1.2; }

/* recorrido de fotos con apoyo sostenido (card) */
.card-producto .foto { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card-producto .foto img { -webkit-touch-callout: none; }
.card-producto .foto.recorriendo { outline: 3px solid var(--terracota); outline-offset: -3px; }
.card-producto .foto.recorriendo::after { opacity: 0; }

/* ficha en celu: foto protagonista más alta y controles tocables */
@media (max-width: 640px) {
  .ficha .foto-grande { aspect-ratio: 1 / 1.02; }
  .gal-btn { width: 44px; height: 44px; font-size: 1.4rem; }
  .gal-thumb { width: 66px; height: 66px; }
  .gal-bar { gap: 14px; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .topbar, .drawer, .modal-caja, .precios-caja, .panel, .info-card, .chip, .tab, footer,
  .drawer-cab, .drawer-pie, .asistente-pie, #asistente-panel, .buscador-lista,
  .faq-lista details, .opinion, .card-producto, #btn-tema, .btn, .match-btn { transition: none; }
  .card-producto:hover .foto img { transform: none; }
  html:not([data-tema="noche"]) .hero .sol, html:not([data-tema="noche"]) .hero .sol-rays { animation: none; }
}

/* ---------- destacado pileta (banner grande antes del catálogo) ---------- */
.destacado-pileta {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center;
  background: linear-gradient(135deg, var(--crema-2), var(--verde-suave));
  border: 1px solid var(--borde); border-radius: 22px; padding: 26px;
  box-shadow: var(--sombra);
}
.destacado-pileta .dp-foto { position: relative; cursor: pointer; border-radius: 16px; overflow: hidden; border: 2px solid var(--borde); }
.destacado-pileta .dp-foto img { width: 100%; height: 100%; min-height: 300px; max-height: 420px; object-fit: cover; display: block; transition: transform .5s ease; }
.destacado-pileta .dp-foto:hover img { transform: scale(1.04); }
.dp-badge { position: absolute; left: 12px; bottom: 12px; background: rgba(16, 43, 24, .85); color: #e9f3ea; font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: .03em; }
.dp-kicker { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--verde-osc); background: var(--verde-suave); border: 1px solid var(--verde); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.dp-info h3 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--madera); margin: 0 0 10px; }
.dp-desc { color: var(--madera-clara); font-size: .95rem; line-height: 1.6; margin: 0 0 12px; }
.dp-desc strong { color: var(--madera); }
.dp-colores { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--madera); font-size: .9rem; font-weight: 600; margin: 0 0 10px; }
.dp-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde-osc); vertical-align: -3px; }
.dp-precio { font-size: 1.9rem; font-weight: 800; color: var(--terracota); margin: 0 0 14px; }
.dp-precio small { display: block; font-size: .8rem; font-weight: 600; color: var(--madera-clara); margin-top: 2px; }
.dp-cta { font-size: 1rem; padding: 12px 22px; }
@media (max-width: 760px) {
  .destacado-pileta { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .destacado-pileta .dp-foto img { min-height: 220px; max-height: 300px; }
}