/* =====================================================================
   CAPA COMPARTIDA — componentes del sitio público
   =====================================================================
   Va DESPUÉS de sitio.css. No lo reemplaza: le agrega las piezas que
   cada página venía inventando por su cuenta.

   El problema que resuelve: había 67 reglas de "tarjeta" repartidas en
   cinco archivos (index, catalog, contact, calendar, map). Cada pantalla
   nueva costaba trescientas líneas y salía distinta a las demás. Aquí
   viven una sola vez: banner, chips, estado vacío, barra móvil,
   selector de cantidad, ficha técnica, separadores.

   Criterio de diseño: NO es minimalismo. La esencia del negocio es que
   los precios se vean, así que no se esconde información para que
   "respire" — se ordena y se le da textura para que quepa sin apretar.

   La paleta es la de siempre y no se le agrega ningún color:
       azul #1e2d5c · rojo #b91c1c · oro #d8a21f
   El verde queda reservado EXCLUSIVAMENTE para lo que de verdad abre
   WhatsApp. Antes teñía los botones "Cotizar" y los badges
   "Disponible", y pesaba más que el azul de la marca: el sitio se veía
   de WhatsApp, no de El Chichonal. Ahora "disponible" es dorado.
   ===================================================================== */

:root{
  /* El gris chico no pasaba contraste sobre blanco (2.5:1). Se oscurece
     lo justo para leerse sin cambiar el aire del diseño. */
  --s-gris-2:#6f7889;

  /* Colores de categoría. No son nuevos: son los tres de la marca en
     distintas intensidades, para que el catálogo se lea como un sistema
     y no como trece cajas grises. */
  --c-1:#1e2d5c;  /* azul       */
  --c-2:#2a3d6e;  /* azul claro */
  --c-3:#b91c1c;  /* rojo       */
  --c-4:#991b1b;  /* rojo oscuro*/
  --c-5:#d8a21f;  /* oro        */
  --c-6:#a9762a;  /* oro tostado*/

  --s-foco:0 0 0 3px rgba(216,162,31,.55);   /* anillo de foco, dorado */
  --s-toque:44px;                             /* área mínima tocable   */
}

/* ---------------------------------------------------------------
   ACCESIBILIDAD
   Nada de esto se ve hasta que hace falta, pero sin ello el sitio
   es inusable con teclado y difícil con dedos grandes.
   --------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:none; box-shadow:var(--s-foco); border-radius:8px; }

/* Todo lo que se toca mide al menos 44px de alto. */
.u-toque{ min-height:var(--s-toque); display:inline-flex;
          align-items:center; justify-content:center; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important;
                        transition-duration:.01ms !important; }
}

/* ---------------------------------------------------------------
   BANNER COMPACTO
   El anterior medía 340px y solo cargaba un título: en el teléfono
   se comía la primera pantalla entera sin decir nada. Este mide la
   mitad y trae un hueco (.u-banner-tools) para lo que esa página
   necesite — el buscador, el mes, el teléfono.
   --------------------------------------------------------------- */
.u-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--s-azul-osc), var(--s-azul) 62%, #2b3f75);
  padding:clamp(1.75rem,4vw,2.6rem) 0 clamp(1.5rem,3vw,2rem); }

/* Trama de puntos: ya existía en la portada y no se usaba en ningún
   otro lado. Es textura de marca gratis. */
.u-banner::before{
  content:''; position:absolute; inset:0; opacity:.07; pointer-events:none;
  background-image:radial-gradient(#fff 1.4px,transparent 1.4px);
  background-size:22px 22px; }

/* Dos luces de color muy tenues, para que el azul no sea un bloque plano. */
.u-banner::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 300px at 88% 6%, rgba(216,162,31,.20), transparent 62%),
             radial-gradient(420px 280px at 4% 96%, rgba(185,28,28,.18), transparent 60%); }

.u-banner .s-wrap{ position:relative; z-index:2; }
.u-banner-fila{ display:flex; gap:1.5rem; align-items:flex-end;
                justify-content:space-between; flex-wrap:wrap; }
.u-banner h1{ color:#fff; font-size:clamp(1.7rem,4vw,2.7rem); font-weight:800;
              line-height:1.06; letter-spacing:-.035em; margin:.35rem 0 0; }
.u-banner p{ color:rgba(255,255,255,.78); margin-top:.5rem;
             font-size:clamp(.92rem,1.4vw,1.05rem); max-width:54ch; }
.u-banner .s-eyebrow{ display:block; }
.u-banner-tools{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* Migas de pan dentro del banner, en claro. */
.u-migas{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
          font-size:.8rem; color:rgba(255,255,255,.62); margin-bottom:.15rem; }
.u-migas a{ color:rgba(255,255,255,.82); text-decoration:none; font-weight:600; }
.u-migas a:hover{ color:var(--s-oro-claro); }
.u-migas i{ font-size:.6rem; opacity:.5; }

/* Marca de agua: la mascota, enorme y casi invisible, en la esquina.
   Es lo que hace que el banner se sienta "de ellos" y no de plantilla. */
.u-marca-agua{
  position:absolute; right:-2%; bottom:-30%; width:min(300px,34vw);
  opacity:.06; pointer-events:none; z-index:1; filter:grayscale(1) brightness(3); }
@media(max-width:640px){ .u-marca-agua{ width:200px; right:-8%; bottom:-24%; } }

/* ---------------------------------------------------------------
   SEPARADOR DE ONDA
   Entre secciones, en vez de una rayita gris. Bacalar es laguna:
   la onda es del lugar, no un adorno genérico.
   --------------------------------------------------------------- */
.u-onda{ display:block; width:100%; height:clamp(28px,4vw,54px);
         margin:0; line-height:0; }
.u-onda svg{ display:block; width:100%; height:100%; }

/* ---------------------------------------------------------------
   CHIPS
   En el teléfono los filtros eran ocho radios apilados: había que
   pasar todo eso ANTES de ver un solo producto. Como chips en una
   tira que se desliza, los productos salen de inmediato.
   --------------------------------------------------------------- */
.u-chips{ display:flex; gap:.5rem; overflow-x:auto; padding:.35rem .15rem .7rem;
          scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.u-chips::-webkit-scrollbar{ display:none; }
.u-chip{ flex:none; display:inline-flex; align-items:center; gap:.45rem;
         padding:.55rem 1rem; min-height:40px; border-radius:99px;
         background:#fff; border:1.5px solid var(--s-linea);
         color:var(--s-tinta); font-size:.87rem; font-weight:600;
         text-decoration:none; white-space:nowrap; cursor:pointer;
         transition:background .16s, border-color .16s, color .16s, transform .16s; }
.u-chip i{ font-size:.85rem; color:var(--cc,var(--s-azul)); transition:color .16s; }
.u-chip:hover{ border-color:var(--cc,var(--s-azul)); transform:translateY(-1px);
               color:var(--s-tinta); }
.u-chip.on{ background:var(--cc,var(--s-azul)); border-color:var(--cc,var(--s-azul));
            color:#fff; box-shadow:0 8px 18px -10px rgba(17,24,39,.5); }
.u-chip.on i{ color:#fff; }
.u-chip .n{ font-size:.74rem; opacity:.65; font-weight:700; }

/* ---------------------------------------------------------------
   HOJA INFERIOR
   Para los filtros completos en el teléfono: sube desde abajo en vez
   de empujar el contenido.
   --------------------------------------------------------------- */
.u-hoja-fondo{ position:fixed; inset:0; background:rgba(16,24,40,.5);
               opacity:0; pointer-events:none; transition:opacity .25s; z-index:80; }
.u-hoja-fondo.abierta{ opacity:1; pointer-events:auto; }
.u-hoja{ position:fixed; left:0; right:0; bottom:0; z-index:81;
         background:#fff; border-radius:var(--s-r-xl) var(--s-r-xl) 0 0;
         max-height:82vh; overflow-y:auto; padding:0 0 1.25rem;
         transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
         box-shadow:0 -12px 40px -12px rgba(17,24,39,.35); }
.u-hoja.abierta{ transform:none; }
.u-hoja-cab{ position:sticky; top:0; background:#fff; z-index:2;
             display:flex; align-items:center; justify-content:space-between;
             padding:1rem 1.25rem; border-bottom:1px solid var(--s-linea); }
.u-hoja-cab h3{ font-size:1.05rem; font-weight:800; margin:0; }
.u-hoja-cab button{ width:36px; height:36px; border-radius:50%; border:none;
                    background:var(--s-fondo); color:var(--s-gris); cursor:pointer; }
.u-hoja-agarre{ width:42px; height:4px; border-radius:99px; background:var(--s-linea);
                margin:.6rem auto .2rem; }

/* ---------------------------------------------------------------
   ETIQUETAS DE ESTADO Y DE TIENDA
   "Disponible" salía verde en las trece tarjetas. Cuando todo dice lo
   mismo, no dice nada — y además el verde no es de la marca. Ahora el
   estado solo aparece cuando hay una fecha puesta, y es dorado.
   --------------------------------------------------------------- */
.u-etq{ display:inline-flex; align-items:center; gap:.35rem;
        padding:.3rem .65rem; border-radius:99px;
        font-size:.72rem; font-weight:800; letter-spacing:.03em;
        line-height:1; white-space:nowrap; }
.u-etq-oro{ background:var(--s-oro); color:var(--s-azul-osc); }
.u-etq-rojo{ background:var(--s-rojo); color:#fff; }
.u-etq-azul{ background:var(--s-azul); color:#fff; }
.u-etq-gris{ background:#eef0f4; color:var(--s-gris); }
.u-etq-hueca{ background:rgba(255,255,255,.92); color:var(--s-azul);
              border:1.5px solid currentColor; }

/* Sello de tienda: "MÁS RENTADO", "RINDE PARA 10". Le da sensación de
   negocio con movimiento, que es lo que un catálogo plano no tiene. */
.u-sello{ display:inline-flex; align-items:center; gap:.35rem;
          padding:.28rem .6rem; border-radius:7px;
          font-size:.68rem; font-weight:800; letter-spacing:.06em;
          text-transform:uppercase; line-height:1; }
.u-sello-oro{ background:linear-gradient(135deg,var(--s-oro-claro),var(--s-oro));
              color:var(--s-azul-osc); box-shadow:0 3px 10px -3px rgba(216,162,31,.7); }
.u-sello-rojo{ background:linear-gradient(135deg,#d32a2a,var(--s-rojo));
               color:#fff; box-shadow:0 3px 10px -3px rgba(185,28,28,.6); }

/* ---------------------------------------------------------------
   TRATAMIENTO DE FOTO
   Las fotos del catálogo son de orígenes muy distintos: unas de
   estudio y otras collages con el texto quemado encima. No se pueden
   arreglar por CSS, pero con el mismo encuadre, un velo inferior y un
   remate dorado dejan de romper la retícula.
   --------------------------------------------------------------- */
.u-foto{ position:relative; aspect-ratio:4/3; overflow:hidden;
         background:linear-gradient(160deg,#eef1f7,#dfe5ef); }
.u-foto img{ width:100%; height:100%; object-fit:cover; display:block;
             transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.u-foto::after{ content:''; position:absolute; inset:auto 0 0 0; height:38%;
                background:linear-gradient(to top,rgba(16,24,40,.28),transparent);
                pointer-events:none; }
/* Remate dorado en la esquina: detalle chico, mucha marca. */
.u-foto::before{ content:''; position:absolute; left:0; bottom:0; z-index:2;
                 width:44px; height:3px; background:var(--s-oro);
                 transform:scaleX(0); transform-origin:left;
                 transition:transform .3s ease; }
.u-card-link:hover .u-foto::before{ transform:scaleX(1); }
.u-card-link:hover .u-foto img{ transform:scale(1.06); }

/* La tarjeta completa es un enlace. Antes solo el botón "Cotizar" lo
   era, así que llegar a la ficha del producto no era evidente. */
.u-card-link{ display:flex; flex-direction:column; flex:1;
              text-decoration:none; color:inherit; }
.u-card-link:hover{ color:inherit; }

/* ---------------------------------------------------------------
   ESTADO VACÍO
   Filtrar y no encontrar nada era un callejón sin salida. Con la
   mascota y un botón se vuelve un contacto.
   --------------------------------------------------------------- */
.u-vacio{ text-align:center; padding:clamp(2.5rem,6vw,4rem) 1.5rem;
          background:#fff; border:1.5px dashed var(--s-linea);
          border-radius:var(--s-r-xl); }
.u-vacio img{ width:78px; height:auto; opacity:.35; margin:0 auto .9rem;
              display:block; filter:grayscale(1); }
.u-vacio i.ico{ font-size:2.2rem; color:var(--s-oro); display:block; margin-bottom:.8rem; }
.u-vacio h3{ font-size:1.15rem; font-weight:800; margin:0 0 .4rem; }
.u-vacio p{ color:var(--s-gris); font-size:.95rem; margin:0 auto 1.5rem; max-width:42ch; }

/* ---------------------------------------------------------------
   BARRA MÓVIL PEGADA
   En la ficha había que volver a subir para cotizar. Esta se queda
   abajo con el precio y la acción.
   --------------------------------------------------------------- */
.u-barra-movil{ display:none; }
@media(max-width:860px){
  .u-barra-movil{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    align-items:center; gap:.85rem; padding:.7rem .9rem;
    padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border-top:1px solid var(--s-linea);
    box-shadow:0 -6px 24px -10px rgba(17,24,39,.25); }
  .u-barra-movil .info{ flex:1; min-width:0; }
  .u-barra-movil .n{ font-size:1.25rem; font-weight:800; color:var(--s-azul);
                     line-height:1; display:block; }
  .u-barra-movil .t{ font-size:.72rem; color:var(--s-gris); font-weight:600; }
  .u-barra-movil .s-btn{ flex:none; padding:.8rem 1.3rem; }
  /* Deja aire para que la barra no tape el pie ni el botón flotante. */
  body.con-barra-movil{ padding-bottom:76px; }
  body.con-barra-movil .s-wa-flota{ bottom:calc(76px + .9rem); }
}

/* ---------------------------------------------------------------
   SELECTOR DE CANTIDAD
   La ficha enseñaba "desde 100 piezas $13.50" pero no dejaba elegir
   cantidad: el cliente veía el descuento y no podía usarlo. Esto
   recalcula en vivo y arma el mensaje de WhatsApp con esa cantidad.
   --------------------------------------------------------------- */
.u-cant{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.u-cant-ctrl{ display:inline-flex; align-items:center;
              border:1.5px solid var(--s-linea); border-radius:99px;
              background:#fff; overflow:hidden; }
.u-cant-ctrl button{ width:var(--s-toque); height:var(--s-toque); border:none;
                     background:transparent; color:var(--s-azul); cursor:pointer;
                     font-size:1rem; transition:background .15s; }
.u-cant-ctrl button:hover{ background:var(--s-fondo); }
.u-cant-ctrl button:disabled{ color:var(--s-gris-2); cursor:not-allowed; }
.u-cant-ctrl input{ width:66px; border:none; text-align:center;
                    font-size:1.05rem; font-weight:800; color:var(--s-tinta);
                    font-family:inherit; background:transparent;
                    -moz-appearance:textfield; }
.u-cant-ctrl input::-webkit-outer-spin-button,
.u-cant-ctrl input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.u-cant-rapido{ display:flex; gap:.4rem; flex-wrap:wrap; }
.u-cant-rapido button{ padding:.4rem .8rem; border-radius:99px; cursor:pointer;
                       border:1.5px solid var(--s-linea); background:#fff;
                       font-size:.82rem; font-weight:700; color:var(--s-gris);
                       font-family:inherit; transition:all .15s; }
.u-cant-rapido button:hover{ border-color:var(--s-azul); color:var(--s-azul); }

/* Total en vivo. El ahorro va en dorado: es la buena noticia. */
.u-total{ background:linear-gradient(135deg,#f9fafc,#eef2f9);
          border:1.5px solid var(--s-linea); border-radius:var(--s-r-lg);
          padding:1.1rem 1.25rem; margin-top:1rem; }
.u-total .fila{ display:flex; justify-content:space-between; align-items:baseline;
                gap:1rem; font-size:.9rem; color:var(--s-gris); }
.u-total .fila + .fila{ margin-top:.45rem; }
.u-total .gran{ margin-top:.7rem; padding-top:.7rem;
                border-top:1px dashed var(--s-linea);
                display:flex; justify-content:space-between; align-items:baseline; }
.u-total .gran .et{ font-size:.85rem; font-weight:700; color:var(--s-gris); }
.u-total .gran .n{ font-size:1.85rem; font-weight:800; color:var(--s-azul);
                   letter-spacing:-.02em; line-height:1; }
.u-total .ahorro{ display:inline-flex; align-items:center; gap:.4rem;
                  margin-top:.6rem; padding:.35rem .7rem; border-radius:99px;
                  background:rgba(216,162,31,.16); color:#8a6410;
                  font-size:.8rem; font-weight:700; }

/* ---------------------------------------------------------------
   FICHA TÉCNICA
   La descripción era una línea suelta ("SILLA PLEGABLE CALIBRE 18.").
   En lista se lee y se compara.
   --------------------------------------------------------------- */
.u-specs{ list-style:none; padding:0; margin:1.25rem 0 0;
          border-top:1px solid var(--s-linea); }
.u-specs li{ display:flex; align-items:center; gap:.75rem;
             padding:.7rem .25rem; border-bottom:1px solid var(--s-linea);
             font-size:.9rem; }
.u-specs li i{ width:22px; text-align:center; color:var(--s-oro); flex:none; }
.u-specs li .et{ color:var(--s-gris); flex:1; }
.u-specs li .va{ font-weight:700; color:var(--s-tinta); text-align:right; }

/* ---------------------------------------------------------------
   ESQUELETO DE CARGA
   --------------------------------------------------------------- */
.u-skel{ background:linear-gradient(90deg,#eef1f6 25%,#e2e7f0 37%,#eef1f6 63%);
         background-size:400% 100%; animation:u-brillo 1.4s ease infinite;
         border-radius:var(--s-r); }
@keyframes u-brillo{ 0%{ background-position:100% 50%; }
                     100%{ background-position:0 50%; } }

/* ---------------------------------------------------------------
   PANEL LATERAL / TARJETA DE APOYO
   --------------------------------------------------------------- */
.u-panel{ background:#fff; border:1px solid var(--s-linea);
          border-radius:var(--s-r-xl); overflow:hidden; box-shadow:var(--s-sh); }
.u-panel-cab{ padding:1rem 1.25rem; border-bottom:1px solid var(--s-linea);
              display:flex; align-items:center; gap:.6rem;
              font-weight:800; font-size:.95rem;
              background:linear-gradient(135deg,#fbfcfe,#f3f6fb); }
.u-panel-cab i{ color:var(--s-oro); }
.u-panel-cuerpo{ padding:1.25rem; }

/* Panel azul, para cerrar con una acción. */
.u-panel-azul{ background:linear-gradient(135deg,var(--s-azul-osc),var(--s-azul));
               color:#fff; border:none; position:relative; overflow:hidden; }
.u-panel-azul::before{ content:''; position:absolute; inset:0; opacity:.08;
  background-image:radial-gradient(#fff 1.3px,transparent 1.3px); background-size:20px 20px; }
.u-panel-azul > *{ position:relative; z-index:2; }
.u-panel-azul h3{ color:#fff; }
.u-panel-azul p{ color:rgba(255,255,255,.78); }

/* ---------------------------------------------------------------
   BRILLO DEL BOTÓN DORADO
   Un destello lento que cruza el botón principal. Lo hace ver vivo
   sin animar nada que distraiga.
   --------------------------------------------------------------- */
.s-btn-oro{ position:relative; overflow:hidden; }
.s-btn-oro::after{
  content:''; position:absolute; top:0; bottom:0; width:40%;
  left:-60%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:u-destello 5.5s ease-in-out infinite; }
@keyframes u-destello{
  0%,72%{ left:-60%; } 88%,100%{ left:120%; } }

/* ---------------------------------------------------------------
   BANDAS DE SECCIÓN
   Para que al desplazarse se sienta que se avanza por secciones y no
   por un documento blanco continuo.
   --------------------------------------------------------------- */
.u-banda-crema{ background:linear-gradient(180deg,#fdfbf6,#faf7ef); }
.u-banda-azul{ background:linear-gradient(180deg,#f5f7fc,#eef2f9); }

/* ---------------------------------------------------------------
   GRUPO FLOTANTE
   Eran dos burbujas apiladas en la esquina (WhatsApp abajo, asistente
   encima) mas el globito del gancho saliendo de lado: tres cosas
   sueltas que tapaban la primera tarjeta del catalogo.

   Ahora van lado a lado sobre la misma linea. Siguen siendo dos
   botones —WhatsApp a un toque, que es la esencia del negocio— pero
   se leen como UN grupo y ocupan la mitad de alto.
   --------------------------------------------------------------- */
.as-lanza{
  /* Al lado del de WhatsApp, no encima. */
  bottom:1.15rem !important;
  right:calc(1.15rem + 56px + .6rem) !important;
}
/* El gancho sale por encima del grupo, no de lado: de lado se metia
   sobre el contenido de la pagina. */
.as-gancho{
  right:1.15rem !important;
  bottom:calc(1.15rem + 56px + .7rem) !important;
  border-radius:14px 14px 14px 4px !important;
}
@media(max-width:640px){
  .as-gancho{ max-width:calc(100vw - 2.3rem) !important; }
}
/* Con la barra movil de la ficha, todo el grupo se sube. */
@media(max-width:860px){
  body.con-barra-movil .as-lanza{ bottom:calc(76px + 1.15rem) !important; }
  body.con-barra-movil .as-gancho{ bottom:calc(76px + 1.15rem + 56px + .7rem) !important; }
}

/* ---------------------------------------------------------------
   APARICIÓN ESCALONADA
   Reutiliza el .reveal que ya existe (sitio.css + el observer de
   footer.php) — esto solo le agrega un retraso creciente por tarjeta,
   vía una variable que PHP pone en cada elemento (style="--i:3").
   Sin JS nuevo: el observer global ya se encarga de encenderlo.
   --------------------------------------------------------------- */
html.js .reveal.stagger{
  transition-delay: calc(var(--i, 0) * 0.06s);
}

/* ---------------------------------------------------------------
   ACCIONES AL PIE DE LA TARJETA
   El contenedor de [Agregar] + [WhatsApp directo] al fondo de una
   tarjeta de producto. Antes vivía solo en catalog.css; se comparte
   aquí porque la portada (index.php) usa la misma tarjeta.
   --------------------------------------------------------------- */
.cat-acciones{
  display:flex; align-items:center; gap:.6rem;
  padding:0 1.25rem 1.25rem;
}