/* =====================================================================
   SITIO PÚBLICO — Capa de diseño
   =====================================================================
   Va DESPUÉS de output.css (el Tailwind ya compilado). No lo reemplaza:
   lo afina.

   Qué cambia y por qué:

   · Ritmo. Antes cada sección elegía su propio espaciado y sus propios
     radios (2rem aquí, 2.5rem allá). Ahora hay una escala y todo la usa.

   · Jerarquía. Casi todos los títulos eran font-black en mayúsculas, así
     que ninguno destacaba. Se abre la escala: los grandes pesan más y
     los chicos respiran.

   · El oro. Es el color de la marca y solo aparecía en subrayados. Ahora
     marca lo que importa.

   Lo que NO cambia: la paleta (azul #1e2d5c, rojo #b91c1c, oro #d8a21f),
   la tipografía Outfit, y que todo termine en WhatsApp.
   ===================================================================== */

:root{
  --s-azul:#1e2d5c; --s-azul-osc:#16244d; --s-azul-claro:#2a3d6e;
  --s-rojo:#b91c1c; --s-rojo-osc:#991b1b;
  --s-oro:#d8a21f;  --s-oro-claro:#e8b843;
  --s-tinta:#111827; --s-gris:#6b7280; --s-gris-2:#9ca3af;
  --s-linea:#e5e7eb; --s-fondo:#f8fafc; --s-blanco:#fff;

  --s-r:14px; --s-r-lg:20px; --s-r-xl:28px;
  --s-sh:0 1px 2px rgba(17,24,39,.04), 0 8px 24px -12px rgba(17,24,39,.12);
  --s-sh-alto:0 4px 12px -2px rgba(17,24,39,.08), 0 20px 40px -16px rgba(30,45,92,.22);

  --s-sec:clamp(3.5rem, 7vw, 6rem);   /* aire vertical entre secciones */
}

/* ---------------------------------------------------------------
   TIPOGRAFÍA
   --------------------------------------------------------------- */
body{ font-family:'Outfit',system-ui,sans-serif; color:var(--s-tinta);
      -webkit-font-smoothing:antialiased; }

/* Corta el desplazamiento horizontal accidental: el pie de DaisyUI
   empujaba el ancho en el teléfono y descentraba el contenido.

   Va en <html> y con `clip`, no en el body y con `hidden`. Con hidden el
   elemento se vuelve un contenedor con scroll propio, y entonces
   position:sticky de sus hijos se pega a esa caja —que no se desplaza—
   en vez de a la pantalla: la barra superior se iba hacia arriba al
   bajar. `clip` recorta igual pero no crea contenedor de scroll.
   El hidden queda de respaldo para navegadores viejos. */
html{ overflow-x:hidden; overflow-x:clip; }

.s-h1{ font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:800;
       line-height:1.05; letter-spacing:-.035em; }
.s-h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:800;
       line-height:1.12; letter-spacing:-.03em; }
.s-h3{ font-size:clamp(1.05rem,1.7vw,1.25rem); font-weight:700;
       letter-spacing:-.015em; }
.s-lead{ font-size:clamp(1rem,1.5vw,1.15rem); color:var(--s-gris);
         line-height:1.6; max-width:60ch; }
.s-eyebrow{ font-size:.75rem; font-weight:700; letter-spacing:.16em;
            text-transform:uppercase; color:var(--s-oro); }

/* ---------------------------------------------------------------
   SECCIONES
   Un solo patrón para el encabezado de sección. Antes uno iba
   centrado con subrayado dorado y el siguiente alineado a la
   izquierda: se leía como dos sitios distintos.
   --------------------------------------------------------------- */
.s-sec{ padding:var(--s-sec) 0; }
.s-sec-alt{ background:var(--s-fondo); }
.s-wrap{ max-width:1240px; margin:0 auto; padding:0 1.5rem; }
@media(max-width:640px){ .s-wrap{ padding:0 1.15rem; } }

.s-head{ margin-bottom:clamp(2rem,4vw,3rem); max-width:62ch; }
.s-head.centrado{ margin-left:auto; margin-right:auto; text-align:center; }
.s-head .s-eyebrow{ display:block; margin-bottom:.6rem; }
.s-head p{ margin-top:.85rem; }

/* ---------------------------------------------------------------
   PORTADA
   Antes era una caja azul plana flotando sobre negro: si el video
   tardaba —o no cargaba— quedaba un hueco oscuro. Ahora el degradado
   sostiene la composición aunque el video nunca aparezca.
   --------------------------------------------------------------- */
.s-hero{ position:relative; min-height:clamp(520px,72vh,680px);
         display:flex; align-items:center; overflow:hidden;
         background:linear-gradient(135deg, var(--s-azul-osc) 0%, var(--s-azul) 55%, #2b3f75 100%); }
.s-hero video, .s-hero img.fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.42; }
.s-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,28,61,.94) 0%, rgba(16,28,61,.72) 42%, rgba(16,28,61,.25) 100%); }
.s-hero .s-wrap{ position:relative; z-index:2; width:100%; }
.s-hero-txt{ max-width:640px; color:#fff; }
.s-hero-txt .s-h1{ color:#fff; text-wrap:balance; }
.s-hero-txt p{ color:rgba(255,255,255,.86); margin-top:1.1rem;
               font-size:clamp(1rem,1.6vw,1.2rem); max-width:50ch; }
.s-hero .barra{ width:56px; height:4px; background:var(--s-oro);
                border-radius:99px; margin-bottom:1.5rem; }
.s-hero-acc{ display:flex; gap:.85rem; flex-wrap:wrap; margin-top:2rem; }

/* Sello de confianza sobre la portada */
.s-sello{ display:inline-flex; align-items:center; gap:.5rem;
          background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2);
          color:#fff; border-radius:99px; padding:.4rem .9rem;
          font-size:.8rem; font-weight:600; backdrop-filter:blur(6px);
          margin-bottom:1.4rem; }
.s-sello i{ color:var(--s-oro); }

/* ---------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------- */
.s-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
        font-weight:700; font-size:.95rem; letter-spacing:.01em;
        padding:.85rem 1.7rem; border-radius:99px; border:2px solid transparent;
        text-decoration:none; cursor:pointer; font-family:inherit;
        transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.s-btn:hover{ transform:translateY(-2px); }
.s-btn-rojo{ background:var(--s-rojo); color:#fff;
             box-shadow:0 8px 20px -8px rgba(185,28,28,.6); }
.s-btn-rojo:hover{ background:var(--s-rojo-osc); color:#fff;
                   box-shadow:0 14px 28px -10px rgba(185,28,28,.55); }
.s-btn-oro{ background:var(--s-oro); color:var(--s-azul-osc);
            box-shadow:0 8px 20px -8px rgba(216,162,31,.55); }
.s-btn-oro:hover{ background:var(--s-oro-claro); color:var(--s-azul-osc); }
.s-btn-linea{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.s-btn-linea:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.s-btn-wa{ background:#25D366; color:#fff; box-shadow:0 8px 20px -8px rgba(37,211,102,.55); }
.s-btn-wa:hover{ background:#1da851; color:#fff; }
.s-btn-sm{ padding:.55rem 1.1rem; font-size:.85rem; }

/* ---------------------------------------------------------------
   BARRA DE VENTAJAS
   --------------------------------------------------------------- */
.s-ventajas{ background:var(--s-azul); border-top:3px solid var(--s-oro); }
.s-ventajas .rej{ display:grid; gap:.5rem;
                  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
                  padding:2.5rem 0; }
.s-ventaja{ display:flex; gap:1rem; align-items:flex-start; padding:.5rem 1.25rem;
            color:#fff; position:relative; }
.s-ventaja + .s-ventaja::before{
  content:''; position:absolute; left:0; top:15%; bottom:15%;
  width:1px; background:rgba(255,255,255,.16); }
@media(max-width:767px){ .s-ventaja + .s-ventaja::before{ display:none; } }
.s-ventaja i{ font-size:1.4rem; color:var(--s-oro); margin-top:.15rem; flex-shrink:0; }
.s-ventaja h3{ font-size:.95rem; font-weight:700; letter-spacing:.01em; margin:0 0 .15rem; }
.s-ventaja p{ font-size:.85rem; color:rgba(255,255,255,.7); margin:0; line-height:1.45; }

/* ---------------------------------------------------------------
   TARJETAS DE PRODUCTO
   --------------------------------------------------------------- */
.s-rej{ display:grid; gap:1.5rem;
        grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); }
.s-rej-3{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.s-rej-4{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

.s-card{ background:#fff; border:1px solid var(--s-linea); border-radius:var(--s-r-lg);
         overflow:hidden; display:flex; flex-direction:column;
         transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
         text-decoration:none; color:inherit; height:100%; }
.s-card:hover{ transform:translateY(-4px); box-shadow:var(--s-sh-alto);
               border-color:transparent; }
.s-card .foto{ position:relative; aspect-ratio:4/3; overflow:hidden;
               background:var(--s-fondo); }
.s-card .foto img{ width:100%; height:100%; object-fit:cover; display:block;
                   transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.s-card:hover .foto img{ transform:scale(1.06); }
.s-card .cuerpo{ padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.s-card .nombre{ font-weight:700; font-size:1.02rem; line-height:1.3;
                 letter-spacing:-.01em; margin-bottom:.3rem; }
.s-card .desc{ font-size:.86rem; color:var(--s-gris); line-height:1.5;
               display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
               overflow:hidden; }
.s-card .precio{ margin-top:auto; padding-top:1rem; display:flex;
                 align-items:baseline; gap:.4rem; }
.s-card .precio .n{ font-size:1.5rem; font-weight:800; color:var(--s-azul);
                    letter-spacing:-.03em; }
.s-card .precio .u{ font-size:.78rem; color:var(--s-gris-2); font-weight:600; }

/* Distintivos sobre la foto */
.s-tag{ position:absolute; display:inline-flex; align-items:center; gap:.35rem;
        font-size:.72rem; font-weight:700; padding:.3rem .7rem; border-radius:99px;
        backdrop-filter:blur(8px); }
.s-tag-cat{ top:.85rem; right:.85rem; background:rgba(30,45,92,.88); color:#fff; }
.s-tag-ok{ top:.85rem; left:.85rem; background:rgba(255,255,255,.94); color:#15803d; }

.s-tag-ok .punto{ width:6px; height:6px; border-radius:50%; background:#22c55e; }

/* Existencias para una fecha concreta. Un número pega más que un
   "disponible" genérico, y el rojo avisa cuando ya casi no queda.
   Van en el mismo lugar que .s-tag-ok, al que sustituyen. */
.s-tag-poco{ top:.85rem; left:.85rem; background:rgba(185,28,28,.94); color:#fff; }
.s-tag-poco .punto{ width:6px; height:6px; border-radius:50%; background:#fff; }
.s-tag-no{ top:.85rem; left:.85rem; background:rgba(75,85,99,.94); color:#fff; }
.s-tag-oro{ top:.85rem; left:.85rem; background:var(--s-oro); color:var(--s-azul-osc); }

/* Escala de mayoreo: información que vende sola */
.s-mayoreo{ margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--s-linea);
            font-size:.78rem; color:var(--s-gris); }
.s-mayoreo strong{ color:var(--s-rojo); }

/* ---------------------------------------------------------------
   CATEGORÍAS
   --------------------------------------------------------------- */
.s-cat{ position:relative; aspect-ratio:1; border-radius:var(--s-r-lg);
        overflow:hidden; display:block; text-decoration:none;
        background:var(--s-azul); }
.s-cat img{ width:100%; height:100%; object-fit:cover;
            transition:transform .55s cubic-bezier(.2,.8,.3,1); }
.s-cat:hover img{ transform:scale(1.08); }
.s-cat::after{ content:''; position:absolute; inset:0;
               background:linear-gradient(to top, rgba(16,28,61,.92) 8%, rgba(16,28,61,.15) 62%); }
.s-cat .txt{ position:absolute; inset:auto 0 0 0; padding:1.1rem; z-index:2; color:#fff; }
.s-cat .txt h3{ font-size:1rem; font-weight:700; margin:0; letter-spacing:-.01em; }
.s-cat .txt span{ font-size:.78rem; color:rgba(255,255,255,.72); }

/* ---------------------------------------------------------------
   GALERÍA
   Antes las fotos venían con proporciones distintas y la cuadrícula
   quedaba dentada. Un mosaico con proporción fija se lee ordenado.
   --------------------------------------------------------------- */
/* Filas de altura fija: sin esto, la foto que ocupa 2x2 crece de
   alto sin control y rompe el ritmo del mosaico. */
.s-galeria{ display:grid; gap:.85rem;
            grid-template-columns:repeat(4,1fr);
            grid-auto-rows:190px; }
@media(max-width:1024px){ .s-galeria{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){ .s-galeria{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } }
.s-galeria .item{ position:relative; border-radius:var(--s-r);
                  overflow:hidden; background:var(--s-fondo); }
/* La primera manda: ocupa cuatro celdas y da jerarquía al bloque.
   La clase la decide PHP, no `:first-child`, porque el mosaico solo
   cuadra con cinco fotos exactas: con cuatro dejaba un hueco abajo
   a la derecha. Con menos, todas van del mismo tamaño. */
.s-galeria .item.grande{ grid-column:span 2; grid-row:span 2; }
.s-galeria img, .s-galeria video{ width:100%; height:100%; object-fit:cover; display:block;
                                  transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.s-galeria .item:hover img{ transform:scale(1.05); }
.s-galeria .pie{ position:absolute; inset:auto 0 0 0; padding:.85rem;
                 background:linear-gradient(to top, rgba(16,28,61,.85), transparent);
                 color:#fff; font-size:.82rem; font-weight:600; }

/* ---------------------------------------------------------------
   FRANJA DE CIERRE
   --------------------------------------------------------------- */
.s-cta{ background:linear-gradient(120deg, var(--s-azul-osc), var(--s-azul) 60%, #2b3f75);
        color:#fff; text-align:center; padding:var(--s-sec) 1.5rem;
        position:relative; overflow:hidden; }
.s-cta::before{ content:''; position:absolute; inset:0; opacity:.07;
                background-image:radial-gradient(#fff 1.4px, transparent 1.4px);
                background-size:22px 22px; }
.s-cta > *{ position:relative; z-index:2; }
.s-cta h2{ color:#fff; }
.s-cta p{ color:rgba(255,255,255,.8); margin:.85rem auto 2rem; max-width:52ch; }

/* ---------------------------------------------------------------
   DETALLES
   --------------------------------------------------------------- */
.s-sep{ height:1px; background:var(--s-linea); border:none; margin:0; }
.s-fondo-claro{ background:var(--s-fondo); }

/* Barra flotante de WhatsApp: siempre a la mano, nunca encima del texto */
/* Los flotantes se apartan mientras se desplaza.
   En el teléfono el par WhatsApp + asistente se planta sobre la esquina
   y tapa lo que haya debajo: en el armador caía justo encima de una
   muestra de color, así que tocarla abría WhatsApp. Se van al bajar y
   vuelven medio segundo después de parar, que es cuando se buscan. */
.s-wa-flota, .as-lanza{ transition:opacity .2s ease, transform .2s ease; }
body.flota-fuera .s-wa-flota,
body.flota-fuera .as-lanza{
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .s-wa-flota, .as-lanza{ transition:none; }
}

.s-wa-flota{ position:fixed; right:1.15rem; bottom:1.15rem; z-index:60;
             width:56px; height:56px; border-radius:50%; background:#25D366;
             color:#fff; display:flex; align-items:center; justify-content:center;
             font-size:1.5rem; box-shadow:0 10px 26px -8px rgba(37,211,102,.75);
             text-decoration:none; transition:transform .2s ease; }
.s-wa-flota:hover{ transform:scale(1.08); color:#fff; }
@media print{ .s-wa-flota{ display:none; } }

/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .s-card:hover, .s-btn:hover{ transform:none; }
}

/* ---------------------------------------------------------------
   CATÁLOGO
   Antes cada medida vivía en un <style> dentro de catalog.php:
   1680px de ancho aquí, radios de 2.5rem allá. Se veía como otro
   sitio. Ahora usa la misma escala que el resto.
   --------------------------------------------------------------- */
.s-banner{ background:linear-gradient(120deg, var(--s-azul-osc), var(--s-azul) 65%, #2b3f75);
           color:#fff; padding:clamp(3rem,6vw,4.5rem) 0;
           position:relative; overflow:hidden; }
.s-banner::before{ content:''; position:absolute; inset:0; opacity:.07;
                   background-image:radial-gradient(#fff 1.3px, transparent 1.3px);
                   background-size:22px 22px; }
.s-banner .s-wrap{ position:relative; z-index:2; }
.s-banner h1{ color:#fff; }
.s-banner p{ color:rgba(255,255,255,.8); margin-top:.7rem; }

.s-cat-layout{ display:grid; gap:2.25rem; align-items:start;
               grid-template-columns:270px minmax(0,1fr); }
@media(max-width:1024px){ .s-cat-layout{ grid-template-columns:1fr; } }

.s-filtros{ background:#fff; border:1px solid var(--s-linea);
            border-radius:var(--s-r-lg); overflow:hidden; }
@media(min-width:1025px){ .s-filtros{ position:sticky; top:6rem; } }
.s-filtros .cab{ padding:1rem 1.25rem; border-bottom:1px solid var(--s-linea);
                 background:var(--s-fondo); display:flex; justify-content:space-between;
                 align-items:center; font-weight:700; font-size:.92rem; }
.s-filtros .cuerpo{ padding:1.25rem; }
.s-filtros label.op{ display:flex; align-items:center; gap:.65rem; padding:.5rem .6rem;
                     border-radius:10px; cursor:pointer; font-size:.9rem;
                     transition:background .15s; }
.s-filtros label.op:hover{ background:var(--s-fondo); }
.s-filtros label.op.on{ background:#eef2fb; color:var(--s-azul); font-weight:600; }
.s-filtros .buscar{ position:relative; }
.s-filtros .buscar input{ width:100%; padding:.7rem .9rem .7rem 2.4rem;
                          border:1.5px solid var(--s-linea); border-radius:10px;
                          font-family:inherit; font-size:.9rem; }
.s-filtros .buscar input:focus{ outline:none; border-color:var(--s-azul); }
.s-filtros .buscar i{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
                      color:var(--s-gris-2); font-size:.85rem; }

.s-barra{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
          flex-wrap:wrap; margin-bottom:1.5rem; padding-bottom:1rem;
          border-bottom:1px solid var(--s-linea); }
.s-barra .n{ font-weight:700; font-size:1.05rem; }
.s-barra select{ border:1.5px solid var(--s-linea); border-radius:10px;
                 padding:.5rem .8rem; font-family:inherit; font-size:.88rem;
                 background:#fff; cursor:pointer; }
.s-barra select:focus{ outline:none; border-color:var(--s-azul); }

.s-vacio{ text-align:center; padding:4rem 1.5rem; background:#fff;
          border:2px dashed var(--s-linea); border-radius:var(--s-r-xl); }
.s-vacio i{ font-size:2.4rem; color:var(--s-gris-2); margin-bottom:1rem; display:block; }

/* =====================================================================
   CAPA MODERNA
   =====================================================================
   Lo anterior ordenó el sitio. Esto le da carácter.

   Tres recursos, usados con medida:
     · Profundidad — el fondo deja de ser plano
     · Vidrio      — la barra superior flota sobre el contenido
     · Revelado    — el contenido entra al entrar en pantalla

   Nada de esto cambia la marca: son los mismos colores y la misma
   tipografía, mejor puestos.
   ===================================================================== */

/* ---------------------------------------------------------------
   FONDO CON PROFUNDIDAD
   Dos manchas de color muy tenues detrás del contenido. En lugar de
   un gris plano, el fondo tiene aire.
   --------------------------------------------------------------- */
.s-sec-alt{
  background:
    radial-gradient(900px 500px at 12% -5%,  rgba(30,45,92,.055), transparent 60%),
    radial-gradient(700px 450px at 105% 105%, rgba(216,162,31,.075), transparent 58%),
    var(--s-fondo);
}

/* ---------------------------------------------------------------
   BARRA SUPERIOR DE VIDRIO
   Antes era un bloque azul sólido pegado arriba. Ahora deja pasar el
   contenido por debajo y se compacta al bajar: da sensación de capa,
   no de techo.
   --------------------------------------------------------------- */
.navbar{
  background:rgba(22,36,77,.82) !important;
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(216,162,31,.35) !important;
  box-shadow:0 1px 24px -8px rgba(0,0,0,.5) !important;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.navbar.compacta{
  background:rgba(16,28,61,.95) !important;
  box-shadow:0 6px 28px -10px rgba(0,0,0,.65) !important;
}
@media (prefers-reduced-transparency: reduce){
  .navbar{ background:var(--s-azul-osc) !important; backdrop-filter:none; }
}

/* ---------------------------------------------------------------
   REVELADO AL DESPLAZAR
   Sin librería: un IntersectionObserver de quince líneas pone la
   clase .visto. Discreto a propósito — 14px de recorrido, no rebotes.
   --------------------------------------------------------------- */
/* El prefijo html.js no es adorno: sin él, un navegador sin JavaScript
   se quedaría con la página entera en opacity:0. La clase la pone el
   propio script, así que si no corre, no se esconde nada. */
html.js .reveal{ opacity:0; transform:translateY(14px);
         transition:opacity .6s cubic-bezier(.2,.7,.3,1),
                    transform .6s cubic-bezier(.2,.7,.3,1); }
html.js .reveal.visto{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.07s; }
.reveal-d2{ transition-delay:.14s; }
.reveal-d3{ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------------------------------------------------------------
   PORTADA CON MÁS AIRE
   --------------------------------------------------------------- */
.s-hero{ min-height:clamp(560px,78vh,720px); }
.s-hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 78% 18%, rgba(216,162,31,.20), transparent 62%),
    radial-gradient(520px 380px at 8% 88%,  rgba(185,28,28,.16),  transparent 60%);
}
.s-hero-txt .s-h1{ font-weight:800; letter-spacing:-.04em; }
/* La segunda línea del titular en oro: el ojo cae ahí y es donde está
   el diferenciador —el lugar. */
.s-hero-txt .s-h1 .dorado{
  background:linear-gradient(100deg, var(--s-oro) 10%, #f2cf7a 55%, var(--s-oro));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Dato de confianza bajo los botones */
.s-hero-datos{ display:flex; gap:2rem; margin-top:2.5rem; flex-wrap:wrap; }
.s-hero-dato .n{ font-size:1.6rem; font-weight:800; color:#fff;
                 letter-spacing:-.03em; line-height:1; }
.s-hero-dato .t{ font-size:.78rem; color:rgba(255,255,255,.62);
                 margin-top:.25rem; letter-spacing:.02em; }

/* Flecha que invita a bajar */
.s-baja{ position:absolute; left:50%; bottom:1.75rem; transform:translateX(-50%);
         z-index:3; color:rgba(255,255,255,.5); font-size:1.1rem;
         animation:s-flota 2.4s ease-in-out infinite; }
@keyframes s-flota{ 0%,100%{ transform:translate(-50%,0); }
                    50%{ transform:translate(-50%,7px); } }
@media (prefers-reduced-motion: reduce){ .s-baja{ animation:none; } }

/* ---------------------------------------------------------------
   TARJETAS CON MÁS PRESENCIA
   --------------------------------------------------------------- */
.s-card{ border-radius:var(--s-r-xl); position:relative; }
.s-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
  box-shadow:inset 0 0 0 1.5px rgba(30,45,92,.16);
}
.s-card:hover::after{ opacity:1; }
.s-card:hover{ transform:translateY(-6px); }
.s-card .foto{ border-radius:var(--s-r-xl) var(--s-r-xl) 0 0; }

/* El precio con un fondo suave: se despega del resto del texto */
.s-card .precio{ align-items:center; }
.s-card .precio .n{ font-size:1.65rem; }

.s-tag{ box-shadow:0 2px 10px -2px rgba(0,0,0,.3); }

/* ---------------------------------------------------------------
   CATEGORÍAS CON MÁS FUERZA
   --------------------------------------------------------------- */
.s-cat{ border-radius:var(--s-r-xl); }
.s-cat .txt h3{ font-size:1.05rem; }
.s-cat .txt span{ display:inline-flex; align-items:center; gap:.3rem;
                  opacity:0; transform:translateY(6px);
                  transition:opacity .25s ease, transform .25s ease; }
.s-cat:hover .txt span{ opacity:1; transform:none; }
.s-cat::before{
  content:''; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(to top, rgba(216,162,31,.35), transparent 55%);
  transition:opacity .3s ease;
}
.s-cat:hover::before{ opacity:1; }

/* ---------------------------------------------------------------
   GALERÍA
   --------------------------------------------------------------- */
.s-galeria .item{ border-radius:var(--s-r-lg); }
.s-galeria .item::after{
  content:''; position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top, rgba(16,28,61,.55), transparent 55%);
  transition:opacity .3s ease;
}
.s-galeria .item:hover::after{ opacity:1; }

/* ---------------------------------------------------------------
   FRANJA DE CIERRE
   --------------------------------------------------------------- */
.s-cta{ border-radius:0; }
.s-cta::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 380px at 50% 0%, rgba(216,162,31,.18), transparent 62%);
}

/* ---------------------------------------------------------------
   PIE DE PÁGINA
   --------------------------------------------------------------- */
footer .footer{ background:var(--s-azul-osc) !important; }
footer .footer-title{ color:var(--s-oro) !important; opacity:1 !important; }

/* ---------------------------------------------------------------
   BOTÓN FLOTANTE CON LATIDO
   Un pulso muy lento: recuerda que está sin ser molesto.
   --------------------------------------------------------------- */
.s-wa-flota::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.55; z-index:-1;
  animation:s-pulso 2.8s cubic-bezier(.3,0,.7,1) infinite;
}
@keyframes s-pulso{ 0%{ transform:scale(1); opacity:.5; }
                    70%,100%{ transform:scale(1.7); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .s-wa-flota::before{ animation:none; opacity:0; } }

/* ---------------------------------------------------------------
   FORMULARIOS DEL SITIO PÚBLICO
   No existían: cada página inventaba los suyos con utilidades de
   Tailwind sueltas (h-16, rounded-2xl, bg-gray-50/50) y ninguno
   coincidía con otro.
   --------------------------------------------------------------- */
.s-campo{ margin-bottom:1.15rem; }
.s-etq{ display:block; font-size:.78rem; font-weight:700; color:var(--s-azul);
        letter-spacing:.04em; margin-bottom:.4rem; }
.s-inp{
  width:100%; padding:.85rem 1rem; font:inherit; font-size:.97rem;
  color:var(--s-tinta); background:#fcfdff;
  border:1.5px solid var(--s-linea); border-radius:12px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.s-inp:focus{ outline:none; border-color:var(--s-azul); background:#fff;
              box-shadow:0 0 0 4px rgba(30,45,92,.09); }
.s-inp::placeholder{ color:#9aa3b5; }
.s-inp.err{ border-color:var(--s-rojo); box-shadow:0 0 0 4px rgba(185,28,28,.1); }
textarea.s-inp{ resize:vertical; min-height:120px; }
select.s-inp{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:14px;
  padding-right:2.5rem; }
.s-nota{ font-size:.8rem; color:var(--s-gris); text-align:center; margin-top:.85rem; }

.s-rej-2{ display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ---------------------------------------------------------------
   PÁGINA DE CONTACTO
   --------------------------------------------------------------- */
.s-contacto{ display:grid; gap:1.5rem; grid-template-columns:1.6fr 1fr; align-items:start; }
@media(max-width:900px){ .s-contacto{ grid-template-columns:1fr; } }

.s-form-caja{ background:#fff; border:1px solid var(--s-linea); border-radius:var(--s-r-lg);
              padding:2rem; box-shadow:0 20px 44px -32px rgba(16,28,61,.45); }
@media(max-width:640px){ .s-form-caja{ padding:1.35rem; } }

.s-datos{ background:#fff; border:1px solid var(--s-linea); border-radius:var(--s-r-lg);
          padding:1.5rem; margin-bottom:1.25rem; }
.s-dato{ display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 0;
         border-bottom:1px solid var(--s-linea); }
.s-dato:last-child{ border-bottom:none; padding-bottom:0; }
.s-dato:first-child{ padding-top:0; }
.s-dato i{ width:38px; height:38px; flex-shrink:0; border-radius:11px;
           display:grid; place-items:center; font-size:.95rem;
           background:linear-gradient(140deg,#eef2ff,#dfe6fb); color:var(--s-azul); }
.s-dato h3{ font-size:.82rem; font-weight:700; color:var(--s-azul); margin:0 0 .15rem; }
.s-dato p{ font-size:.9rem; color:var(--s-gris); margin:0; overflow-wrap:anywhere; }

.s-urgente{ background:linear-gradient(135deg,var(--s-azul-osc),var(--s-azul));
            color:#fff; border-radius:var(--s-r-lg); padding:1.75rem; text-align:center;
            margin-bottom:1.25rem; }
.s-urgente i{ font-size:2rem; color:#25D366; margin-bottom:.6rem; display:block; }
.s-urgente h3{ color:#fff; font-size:1.15rem; font-weight:700; margin:0 0 .35rem; }
.s-urgente p{ color:rgba(255,255,255,.75); font-size:.88rem; margin:0 0 1.25rem; }

.s-atajo{ display:grid; gap:.5rem; }
.s-atajo a{ display:flex; align-items:center; gap:.65rem; text-decoration:none;
            background:#fff; border:1px solid var(--s-linea); border-radius:12px;
            padding:.85rem 1rem; font-size:.9rem; font-weight:600; color:var(--s-azul);
            transition:border-color .18s, transform .18s; }
.s-atajo a:hover{ border-color:var(--s-azul); transform:translateX(3px); }
.s-atajo a i{ color:var(--s-oro); }

/* Cintas de leyenda sobre el banner azul (cobertura). */
.s-cintas{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.25rem; }
.s-cintas span{ display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:.3rem .8rem; font-size:.8rem; font-weight:600;
  color:rgba(255,255,255,.9); }
.s-cintas i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* ---------------------------------------------------------------
   FICHA DE PRODUCTO
   --------------------------------------------------------------- */
.s-miga{ display:flex; align-items:center; gap:.5rem; font-size:.85rem;
         color:var(--s-gris); margin-bottom:1.5rem; flex-wrap:wrap; }
.s-miga a{ color:var(--s-azul); text-decoration:none; font-weight:600; }
.s-miga a:hover{ text-decoration:underline; }
.s-miga i{ font-size:.6rem; color:var(--s-gris-2); }

.s-ficha{ display:grid; grid-template-columns:1fr 1fr; gap:0;
          background:#fff; border:1px solid var(--s-linea);
          border-radius:var(--s-r-lg); overflow:hidden;
          box-shadow:0 24px 50px -34px rgba(16,28,61,.4); }
@media(max-width:860px){ .s-ficha{ grid-template-columns:1fr; } }

.s-ficha-foto{ background:linear-gradient(150deg,#f7f9fd,#eef2f9);
               display:grid; place-items:center; padding:2.5rem; min-height:360px; }
.s-ficha-foto img{ max-width:100%; max-height:380px; width:auto;
                   border-radius:var(--s-r);
                   filter:drop-shadow(0 24px 34px rgba(16,28,61,.22)); }

.s-ficha-datos{ padding:2.25rem; }
@media(max-width:640px){ .s-ficha-datos{ padding:1.5rem; } }

.s-ficha-precio{ display:flex; align-items:baseline; gap:.5rem; margin:1rem 0 1.25rem; }
.s-ficha-precio .n{ font-size:2.1rem; font-weight:800; color:var(--s-azul);
                    letter-spacing:-.03em; }
.s-ficha-precio .u{ font-size:.88rem; color:var(--s-gris); font-weight:600; }

/* La escala de mayoreo completa, no solo el primer tramo: aquí sí hay
   espacio para enseñarla entera. */
.s-escala{ border:1px solid var(--s-linea); border-radius:var(--s-r);
           padding:1rem 1.15rem; margin:1.25rem 0; background:#fcfdff; }
.s-escala .cab{ font-size:.75rem; font-weight:700; letter-spacing:.08em;
                text-transform:uppercase; color:var(--s-oro); margin-bottom:.6rem; }
.s-escala .lin{ display:flex; justify-content:space-between; gap:1rem;
                font-size:.9rem; padding:.3rem 0; color:var(--s-gris); }
.s-escala .lin strong{ color:var(--s-azul); font-variant-numeric:tabular-nums; }

.s-stock{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
          border-radius:var(--s-r); padding:.9rem 1.15rem; margin:1.25rem 0;
          font-size:.92rem; font-weight:600; }
.s-stock.ok{ background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.s-stock.no{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }

.s-ficha-acc{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.5rem; }
.s-ficha-acc .s-btn{ flex:1; min-width:190px; }

/* Contorno oscuro: la variante .s-btn-linea es blanca, pensada para el
   hero sobre foto, y aquí se perdía sobre el fondo claro. */
.s-btn-linea-osc{ background:#fff; color:var(--s-azul);
                  border:1.5px solid var(--s-linea); }
.s-btn-linea-osc:hover{ border-color:var(--s-azul); background:#f7f9fd; }

/* ---------------------------------------------------------------
   PÁGINAS LEGALES
   Texto largo que alguien va a leer de verdad cuando tenga una duda
   o un problema: medida de lectura corta, jerarquía clara y aire.
   --------------------------------------------------------------- */
.s-legal{ max-width:44rem; padding-top:2.5rem; padding-bottom:4rem; }
.s-legal h2{
  font-size:1.15rem; font-weight:700; color:var(--s-azul);
  margin:2.25rem 0 .75rem; letter-spacing:-.01em;
  padding-bottom:.5rem; border-bottom:1px solid var(--s-linea);
}
.s-legal h2:first-of-type{ margin-top:1rem; }
.s-legal p{ color:#374151; line-height:1.7; margin-bottom:.9rem; }
.s-legal ul{ margin:0 0 1.1rem; padding-left:1.15rem; }
.s-legal li{ color:#374151; line-height:1.7; margin-bottom:.5rem; }
.s-legal strong{ color:var(--s-tinta); }
.s-legal a{ color:var(--s-rojo); font-weight:600; }
.s-actualizado{
  display:inline-block; background:var(--s-fondo); border:1px solid var(--s-linea);
  border-radius:999px; padding:.3rem .85rem; font-size:.8rem; color:var(--s-gris);
  margin-bottom:.5rem;
}
.s-legal-cta{
  margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--s-linea);
  text-align:center;
}
.s-legal-cta .s-btn{ display:inline-flex; }

/* ---------------------------------------------------------------------
   TESTIMONIOS

   Nada de fotos de gente ni de comillas gigantes: el mensaje es el
   contenido y lo demás estorba. Una cita, quién la dijo y cuándo.
   --------------------------------------------------------------------- */
.s-resenas{ display:grid; gap:1.15rem;
            grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr)); }

.s-resena{ margin:0; background:var(--s-blanco); border:1px solid var(--s-linea);
           border-radius:var(--s-r); padding:1.35rem 1.4rem;
           box-shadow:var(--s-sh); display:flex; flex-direction:column; gap:.7rem; }

.s-resena .estrellas{ color:var(--s-oro); font-size:.82rem; letter-spacing:.1em; }

.s-resena blockquote{ margin:0; font-size:.97rem; line-height:1.65;
                      color:var(--s-tinta); flex:1; }
.s-resena blockquote::before{ content:'\201C'; }
.s-resena blockquote::after{ content:'\201D'; }

.s-resena figcaption{ display:flex; flex-direction:column; gap:.1rem;
                      padding-top:.7rem; border-top:1px solid var(--s-linea); }
.s-resena figcaption strong{ font-size:.9rem; color:var(--s-azul); }
.s-resena figcaption span{ font-size:.78rem; color:var(--s-gris-2);
                           text-transform:capitalize; }

/* ---------------------------------------------------------------------
   CÓMO RENTAR

   Cuatro pasos numerados. La línea que los une existe solo en pantalla
   ancha —en móvil se apilan y la línea estorbaría—. Nada de tarjetas
   pesadas: el número manda y el texto respira.
   --------------------------------------------------------------------- */
.s-pasos{ list-style:none; margin:0; padding:0;
          display:grid; gap:1.5rem; position:relative;
          grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

/* La línea punteada que conecta los pasos, solo donde caben en fila. */
@media(min-width:900px){
  .s-pasos::before{ content:''; position:absolute; top:26px; left:11%; right:11%;
                    height:2px; background:repeating-linear-gradient(90deg,
                      var(--s-linea) 0 8px, transparent 8px 16px); z-index:0; }
}

.s-paso{ position:relative; z-index:1; text-align:center;
         display:flex; flex-direction:column; align-items:center; gap:.5rem;
         padding:0 .5rem; }
.s-paso .num{ width:54px; height:54px; border-radius:50%;
              background:var(--s-azul); color:#fff;
              display:flex; align-items:center; justify-content:center;
              font-size:1.35rem; font-weight:800;
              box-shadow:0 6px 16px -6px rgba(30,45,92,.5);
              border:4px solid var(--s-blanco); }
.s-paso > i{ font-size:1.15rem; color:var(--s-oro); margin-top:.2rem; }
.s-paso h3{ font-size:1rem; font-weight:700; color:var(--s-tinta);
            letter-spacing:-.01em; margin:.1rem 0 0; }
.s-paso p{ font-size:.88rem; color:var(--s-gris); line-height:1.55;
           max-width:24ch; margin:0; }

.s-pasos-cta{ margin-top:2.5rem; display:flex; align-items:center;
              justify-content:center; gap:1.25rem; flex-wrap:wrap; }
.s-pasos-cta span{ display:inline-flex; align-items:center; gap:.5rem;
                   font-weight:700; color:var(--s-azul); font-size:.95rem; }
.s-pasos-cta span i{ color:var(--s-oro); }

/* Envío incluido, pegado al precio de cada producto. */
.s-incluye{ display:flex; align-items:center; gap:.4rem;
            margin:.55rem 0 0; font-size:.8rem; font-weight:600;
            color:#0f7b4f; line-height:1.35; }
.s-incluye i{ color:#0f7b4f; flex:none; }