/* ============================================================
   HAYUMA IMPORTACIONES
   Tienda — estilo e-commerce moderno, colores del logo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --naranja:#F5923A;
  --naranja-fuerte:#E27015;
  --naranja-suave:#FEF0E2;
  --tinta:#18140E;
  --tinta-suave:#4A453C;
  --gris:#7A756A;
  --fondo:#FFFFFF;
  --panel:#F7F5F1;
  --borde:#EAE6DE;
  --whatsapp:#25D366;
  --whatsapp-oscuro:#1DA851;

  --radio-xs:8px;
  --radio-s:14px;
  --radio-m:20px;
  --radio-l:28px;
  --radio-pastilla:999px;

  --sombra: 0 1px 2px rgba(24,20,14,.04), 0 12px 28px rgba(24,20,14,.07);
  --sombra-alta: 0 20px 50px rgba(24,20,14,.14);

  --ancho:1280px;
  --tipo:'Plus Jakarta Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--tipo);
  background:var(--fondo);
  color:var(--tinta);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}

.ancho{max-width:var(--ancho);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--tipo);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--tinta)}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.15rem)}
h3{font-size:1.15rem;font-weight:700}
p{color:var(--tinta-suave)}
.guia{color:var(--gris);font-size:1.03rem;max-width:52ch}

/* ── Pastilla / etiqueta ────────────────────────────────── */
.pastilla{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--naranja-suave);color:var(--naranja-fuerte);
  font-weight:700;font-size:.86rem;
  padding:7px 15px;border-radius:var(--radio-pastilla);
}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:.98rem;
  padding:14px 26px;border-radius:var(--radio-pastilla);
  transition:transform .15s,box-shadow .15s,background .15s,color .15s;
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.btn-naranja{background:var(--naranja);color:var(--tinta)}
.btn-naranja:hover{background:var(--naranja-fuerte);color:#fff;transform:translateY(-1px)}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-tinta:hover{background:#000;transform:translateY(-1px)}
.btn-linea{background:transparent;border:2px solid var(--borde);color:var(--tinta)}
.btn-linea:hover{border-color:var(--tinta)}
.btn-wa{background:var(--whatsapp);color:#fff}
.btn-wa:hover{background:var(--whatsapp-oscuro);transform:translateY(-1px)}
.btn-ancho{width:100%}
.btn-chico{padding:10px 18px;font-size:.88rem}

/* ============================================================
   ENTRADA — un solo momento
   ============================================================ */
#entrada{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(160deg,#FFA455 0%,var(--naranja) 45%,#E27015 100%);
  display:grid;place-items:center;
  overflow:hidden;
  perspective:900px;
  animation:cortina .65s cubic-bezier(.65,0,.35,1) 2.35s forwards;
}
@keyframes cortina{to{transform:translateY(-100%)}}

/* Halo que respira detrás de todo */
#entrada::before{
  content:'';position:absolute;
  width:860px;height:860px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 68%);
  animation:respirar 2.6s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{transform:scale(.9);opacity:.65}
  50%{transform:scale(1.06);opacity:1}
}

/* ── Ruta de importación: arco punteado + avión ── */
#entrada .ruta{
  position:absolute;width:620px;height:260px;
  pointer-events:none;
  transform:scale(1);transform-origin:center;
}
#entrada .ruta svg{width:100%;height:100%;overflow:visible}
#entrada .ruta .arco{
  fill:none;stroke:rgba(255,255,255,.5);
  stroke-width:2;stroke-linecap:round;stroke-dasharray:5 9;
  stroke-dashoffset:520;
  animation:trazar 1.5s ease-out .25s forwards;
}
@keyframes trazar{to{stroke-dashoffset:0}}

#entrada .ruta .punto{
  fill:#fff;opacity:0;
  animation:brotar .35s ease forwards;
}
#entrada .ruta .punto.salida{animation-delay:.3s}
#entrada .ruta .punto.llegada{animation-delay:1.55s}
@keyframes brotar{
  from{opacity:0;transform:scale(0)}
  to{opacity:1;transform:scale(1)}
}

/* El avión solo aparece si el navegador sabe seguir una ruta;
   si no, la animación funciona igual sin él. */
#entrada .avion{display:none}
@supports (offset-path: path('M 0 0 L 1 1')){
  #entrada .avion{
    display:block;
    position:absolute;top:0;left:0;
    width:26px;height:26px;margin:-13px 0 0 -13px;
    offset-path:path('M 20 210 Q 310 20 600 210');
    offset-rotate:auto;
    offset-distance:0%;
    opacity:0;
    animation:volar 1.5s cubic-bezier(.45,.05,.55,.95) .3s forwards;
  }
}
#entrada .avion svg{width:100%;height:100%;fill:#fff}
@keyframes volar{
  0%{offset-distance:0%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* ── Bloque central ── */
#entrada .caja{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:22px;
}

#entrada .aro{
  position:relative;width:min(178px,42vw);aspect-ratio:1;
  border-radius:var(--radio-l);
  background:#fff;
  box-shadow:0 26px 60px rgba(24,20,14,.3);
  display:grid;place-items:center;padding:14px;
  transform-style:preserve-3d;
  opacity:0;
  animation:voltear .85s cubic-bezier(.3,1.2,.4,1) .15s forwards;
}
@keyframes voltear{
  0%{opacity:0;transform:rotateY(-95deg) scale(.86)}
  60%{opacity:1}
  100%{opacity:1;transform:rotateY(0) scale(1)}
}
#entrada img{width:100%;height:100%;object-fit:contain;border-radius:var(--radio-s)}

/* Ondas que salen del logo, como un rastreo de envío */
#entrada .aro::before,
#entrada .aro::after{
  content:'';position:absolute;inset:0;
  border-radius:var(--radio-l);
  border:2px solid rgba(255,255,255,.75);
  opacity:0;
}
#entrada .aro::before{animation:onda 2s ease-out 1s infinite}
#entrada .aro::after{animation:onda 2s ease-out 1.65s infinite}
@keyframes onda{
  0%{opacity:.8;transform:scale(1)}
  100%{opacity:0;transform:scale(1.35)}
}

#entrada .pastilla{
  background:rgba(255,255,255,.22);color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
  backdrop-filter:blur(6px);
  opacity:0;
  animation:subirTexto .45s ease 1.15s forwards;
}
@keyframes subirTexto{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

#entrada .barra-carga{
  width:118px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.28);overflow:hidden;
  opacity:0;animation:subirTexto .4s ease 1.35s forwards;
}
#entrada .barra-carga::after{
  content:'';display:block;height:100%;width:0;
  background:#fff;border-radius:99px;
  animation:cargar 1s cubic-bezier(.4,0,.2,1) 1.4s forwards;
}
@keyframes cargar{to{width:100%}}

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
  border-top:3px solid var(--naranja);
}
.cabecera .ancho{
  display:flex;align-items:center;gap:24px;
  min-height:100px;
}
.marca-link{display:flex;align-items:center;flex:0 0 auto}
.marca-link img{height:72px;width:auto}

.buscador{
  flex:1;max-width:440px;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1.5px solid transparent;
  border-radius:var(--radio-pastilla);
  padding:11px 18px;transition:border-color .15s;
}
.buscador:focus-within{border-color:var(--naranja)}
.buscador input{border:none;outline:none;background:transparent;font:inherit;font-size:.95rem;flex:1;min-width:0;color:var(--tinta)}
.buscador svg{width:18px;height:18px;fill:var(--gris);flex:0 0 auto}

.nav-principal{display:flex;gap:6px;flex:0 0 auto}
.nav-principal li{display:flex}
.nav-principal a{
  display:block;
  font-weight:600;font-size:.96rem;color:var(--tinta-suave);
  padding:10px 14px;border-radius:var(--radio-pastilla);
  transition:background .15s,color .15s;
}
.nav-principal a:hover{background:var(--panel);color:var(--tinta)}
.nav-principal a[aria-current="page"]{background:var(--naranja);color:var(--tinta)}

.acciones-cabecera{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}

.trinche{display:none;width:44px;height:44px;border-radius:var(--radio-pastilla);position:relative;background:var(--panel)}
.trinche span{position:absolute;left:13px;right:13px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .22s,opacity .22s}
.trinche span:nth-child(1){top:16px}
.trinche span:nth-child(2){top:22px}
.trinche span:nth-child(3){top:28px}
.trinche.activo span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.trinche.activo span:nth-child(2){opacity:0}
.trinche.activo span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:44px 0 0}
.hero-tarjeta{
  background:var(--panel);min-width:0;
  border-radius:var(--radio-l);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  overflow:hidden;
}
.hero-texto{padding:clamp(24px,5vw,60px);min-width:0}
.hero-texto .pastilla{margin-bottom:22px}
.hero-texto h1{margin-bottom:18px}
.hero-texto p{font-size:1.08rem;margin-bottom:32px;max-width:42ch}
.hero-acciones{display:flex;gap:12px;flex-wrap:wrap}

.hero-vitrina{position:relative;background:#fff}
.hero-vitrina .marco{position:relative;height:100%;min-height:340px;overflow:hidden}
.hero-vitrina img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:32px;
  opacity:0;transition:opacity .8s ease;
}
.hero-vitrina img.activa{opacity:1}
.hero-etiqueta{
  position:absolute;left:20px;top:20px;z-index:2;
  background:#fff;padding:9px 16px;border-radius:var(--radio-pastilla);
  font-weight:700;font-size:.88rem;box-shadow:var(--sombra);
}
.hero-puntos{
  position:absolute;left:0;right:0;bottom:20px;z-index:2;
  display:flex;justify-content:center;gap:7px;
}
.hero-puntos i{
  display:block;width:8px;height:8px;border-radius:50%;
  background:rgba(24,20,14,.18);cursor:pointer;transition:background .2s,width .2s;
}
.hero-puntos i.activa{background:var(--naranja);width:22px;border-radius:99px}

/* ── Confianza ──────────────────────────────────────────── */
.confianza{padding:40px 0}
.confianza-fila{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1.5px solid var(--borde);border-radius:var(--radio-m);
  overflow:hidden;
}
.confianza-item{
  display:flex;align-items:center;gap:13px;padding:22px 24px;
  border-left:1.5px solid var(--borde);
}
.confianza-item:first-child{border-left:none}
.confianza-item .icono{
  width:42px;height:42px;border-radius:var(--radio-s);
  background:var(--naranja-suave);color:var(--naranja-fuerte);
  display:grid;place-items:center;flex:0 0 auto;
}
.confianza-item .icono svg{width:21px;height:21px;fill:currentColor}
.confianza-item b{display:block;font-size:.96rem}
.confianza-item span{font-size:.82rem;color:var(--gris)}

/* ============================================================
   TRAMOS GENERALES
   ============================================================ */
.tramo{padding:54px 0}
.cabezal-tramo{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:30px;flex-wrap:wrap;
}
.cabezal-tramo h2{margin-bottom:8px;padding-left:16px;border-left:4px solid var(--naranja)}

/* ── Rieles de categoría ───────────────────────────────── */
.riel-categorias{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
}
.riel-categorias > *{min-width:0}
.categoria-tarjeta h3{overflow-wrap:break-word}
.categoria-tarjeta{
  display:flex;flex-direction:column;gap:14px;
  background:var(--naranja-suave);border-radius:var(--radio-m);
  padding:22px;transition:background .18s,transform .18s;
}
.categoria-tarjeta:hover{background:var(--naranja);transform:translateY(-3px)}
.categoria-tarjeta:hover .icono{background:#fff;color:var(--tinta)}
.categoria-tarjeta .icono{
  width:46px;height:46px;border-radius:var(--radio-s);
  background:var(--tinta);color:var(--naranja);
  display:grid;place-items:center;
}
.categoria-tarjeta .icono svg{width:23px;height:23px;fill:currentColor}
.categoria-tarjeta h3{font-size:1.02rem}
.categoria-tarjeta span{font-size:.85rem;color:var(--gris)}

/* ============================================================
   TARJETA DE PRODUCTO
   ============================================================ */
.rejilla-productos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;
}
.producto{
  background:#fff;border:1.5px solid var(--borde);border-radius:var(--radio-m);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,border-color .2s,transform .2s;
  position:relative;
}
.producto:hover{box-shadow:var(--sombra-alta);border-color:transparent;transform:translateY(-4px)}

.producto .foto{
  aspect-ratio:1;background:var(--panel);cursor:pointer;
  overflow:hidden;position:relative;
}
.producto .foto img{width:100%;height:100%;object-fit:contain;padding:18px}
.producto .foto .marcador{
  width:100%;height:100%;display:grid;place-items:center;
  color:var(--gris);font-size:.84rem;text-align:center;padding:18px;
}
.insignia{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--naranja);color:var(--tinta);
  font-size:.72rem;font-weight:700;
  padding:5px 11px;border-radius:var(--radio-pastilla);
}

.producto .cuerpo{padding:17px;display:flex;flex-direction:column;gap:5px;cursor:pointer;flex:1}
.producto .rama{font-size:.78rem;color:var(--naranja-fuerte);font-weight:700}
.producto h3{font-size:1.02rem;line-height:1.28}
.producto .apunte{font-size:.85rem;color:var(--gris);line-height:1.4}
.producto .precio{font-size:1.28rem;font-weight:800;margin-top:6px;color:var(--naranja-fuerte)}
.producto .precio.consulta{font-size:.92rem;font-weight:600;color:var(--gris)}

.producto .pie{
  display:flex;gap:8px;padding:14px 17px;border-top:1.5px solid var(--borde);
}
.producto .pie .ver{
  flex:1;text-align:center;font-weight:700;font-size:.88rem;
  padding:10px;border-radius:var(--radio-pastilla);
  border:1.5px solid var(--borde);transition:border-color .15s;
}
.producto .pie .ver:hover{border-color:var(--naranja)}
.producto .pie .pedir{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--whatsapp);display:grid;place-items:center;
  transition:background .15s,transform .15s;
}
.producto .pie .pedir:hover{background:var(--whatsapp-oscuro);transform:scale(1.07)}
.producto .pie .pedir svg{width:20px;height:20px;fill:#fff}

.vacio-resultado{
  grid-column:1/-1;text-align:center;padding:64px 24px;
  background:var(--panel);border-radius:var(--radio-m);
}
.vacio-resultado b{display:block;font-size:1.3rem;margin-bottom:8px}
.vacio-resultado p{margin:0 auto;max-width:44ch}

/* ============================================================
   BANDA DE MAYOREO
   ============================================================ */
.banda-mayoreo{
  background:var(--tinta);color:#fff;
  border-radius:var(--radio-l);
  padding:clamp(32px,5vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.banda-mayoreo h2{color:#fff;margin-bottom:10px}
.banda-mayoreo p{color:rgba(255,255,255,.68);max-width:46ch}

/* ============================================================
   VENTANA DE PRODUCTO
   ============================================================ */
.cortina{
  position:fixed;inset:0;z-index:800;
  background:rgba(24,20,14,.6);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:22px;
}
.cortina.abierta{display:flex}
.expositor{
  background:#fff;border-radius:var(--radio-l);
  max-width:960px;width:100%;height:88vh;max-height:88vh;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;position:relative;
  box-shadow:var(--sombra-alta);
}
.expositor .salir{
  position:absolute;top:18px;right:18px;z-index:5;
  width:40px;height:40px;border-radius:50%;
  background:#fff;box-shadow:var(--sombra);font-size:1.05rem;
  display:grid;place-items:center;transition:background .15s;
}
.expositor .salir:hover{background:var(--panel)}

.visor{display:flex;flex-direction:column;background:var(--panel);overflow:hidden;min-height:0}
.visor .grande{flex:1;min-height:300px;display:grid;place-items:center;padding:26px;overflow:hidden}
.visor .grande img{max-width:100%;max-height:100%;object-fit:contain}
.visor .grande .marcador{color:var(--gris);font-size:.9rem;text-align:center;padding:20px}
.tiritas{display:flex;gap:9px;padding:14px;overflow-x:auto}
.tiritas img{
  width:58px;height:58px;object-fit:contain;flex:0 0 auto;cursor:pointer;
  background:#fff;border-radius:var(--radio-xs);border:2px solid transparent;padding:4px;
  transition:border-color .16s;
}
.tiritas img.activa{border-color:var(--naranja)}

.ficha-texto{padding:32px;overflow-y:auto}
.ficha-texto .rama{font-size:.82rem;color:var(--naranja-fuerte);font-weight:700;margin-bottom:6px}
.ficha-texto h3{font-size:1.55rem;margin-bottom:6px;line-height:1.15}
.ficha-texto .apunte{color:var(--gris);margin-bottom:20px}
.ficha-texto .precio{font-size:2rem;font-weight:800;line-height:1;color:var(--naranja-fuerte)}
.ficha-texto .nota{font-size:.86rem;color:var(--gris);margin:6px 0 24px}

.tabla-specs{width:100%;border-collapse:collapse;margin-bottom:26px;font-size:.92rem}
.tabla-specs tr{border-bottom:1px solid var(--borde)}
.tabla-specs td{padding:10px 0;vertical-align:top}
.tabla-specs td:first-child{color:var(--gris);width:42%;padding-right:14px}
.tabla-specs td:last-child{font-weight:600}

/* ============================================================
   CATÁLOGO
   ============================================================ */
.taller{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}
.taller > *{min-width:0}
.costado{position:sticky;top:120px;display:flex;flex-direction:column;gap:22px}
.filtro-grupo{background:var(--panel);border-radius:var(--radio-m);padding:18px}
.filtro-grupo h4{font-size:.85rem;color:var(--gris);font-weight:700;margin-bottom:12px}
.filtro-lista{display:flex;flex-direction:column;gap:2px}
.filtro-lista button{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 12px;border-radius:var(--radio-s);
  font-weight:600;font-size:.92rem;text-align:left;
  transition:background .14s;
}
.filtro-lista button small{font-weight:600;color:var(--gris);background:#fff;padding:2px 8px;border-radius:99px;font-size:.76rem}
.filtro-lista button:hover{background:#fff}
.filtro-lista button.activo{background:var(--tinta);color:#fff}
.filtro-lista button.activo small{background:var(--naranja);color:var(--tinta)}

/* ============================================================
   BLOQUES DE CONTENIDO
   ============================================================ */
.pareja{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pareja > *{min-width:0}
.panel{
  border-radius:var(--radio-l);padding:clamp(30px,4vw,46px);
}
.panel.claro{background:var(--panel)}
.panel.oscuro{background:var(--tinta);color:#fff}
.panel.oscuro h2{color:#fff}
.panel.oscuro p{color:rgba(255,255,255,.68)}
.panel h2{margin-bottom:16px}
.panel > p{margin-bottom:22px}

.lista-check{display:flex;flex-direction:column;gap:13px}
.lista-check li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem}
.lista-check li::before{
  content:'';flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--naranja-suave);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E27015' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size:14px;background-repeat:no-repeat;background-position:center;
}
.panel.oscuro .lista-check li::before{background-color:rgba(245,146,58,.18)}

/* ── Proceso (nosotros) ────────────────────────────────── */
.proceso{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.etapa{
  background:#fff;border:1.5px solid var(--borde);border-radius:var(--radio-m);
  padding:26px;transition:border-color .15s;
}
.etapa:hover{border-color:var(--naranja)}
.etapa .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--naranja);color:var(--tinta);
  font-weight:800;font-size:.95rem;margin-bottom:14px;
}
.etapa h3{margin-bottom:8px}
.etapa p{font-size:.93rem}

/* ============================================================
   CONTACTO
   ============================================================ */
.tarjetero{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.tarjeta-c{
  background:#fff;border:1.5px solid var(--borde);border-radius:var(--radio-m);
  padding:26px;display:flex;flex-direction:column;gap:6px;
}
.tarjeta-c .icono{
  width:44px;height:44px;border-radius:var(--radio-s);
  background:var(--naranja-suave);color:var(--naranja-fuerte);
  display:grid;place-items:center;margin-bottom:8px;
}
.tarjeta-c .icono svg{width:22px;height:22px;fill:currentColor}
.tarjeta-c .clase{font-size:.84rem;color:var(--gris)}
.tarjeta-c .dato{font-size:1.28rem;font-weight:800}
.tarjeta-c a:hover{color:var(--naranja-fuerte)}
.tarjeta-c small{color:var(--gris);font-size:.87rem}

.boleta{display:grid;grid-template-columns:minmax(0,1fr);gap:15px;min-width:0}
.casilla{min-width:0}
.casilla{display:flex;flex-direction:column;gap:6px}
.casilla label{font-size:.87rem;color:var(--gris);font-weight:600}
.casilla input,.casilla textarea,.casilla select{
  width:100%;min-width:0;max-width:100%;
  font:inherit;font-size:.96rem;padding:12px 15px;
  border:1.5px solid var(--borde);border-radius:var(--radio-s);
  background:#fff;outline:none;transition:border-color .15s;color:var(--tinta)
}
.casilla input:focus,.casilla textarea:focus,.casilla select:focus{border-color:var(--naranja)}
.casilla textarea{resize:vertical;min-height:110px}

.plano{border-radius:var(--radio-m);overflow:hidden;min-height:300px;border:1.5px solid var(--borde)}
.plano iframe{width:100%;height:100%;min-height:300px;border:0;display:block}

/* ============================================================
   PIE
   ============================================================ */
.cierre{background:var(--panel);border-top:3px solid var(--naranja)}
.cierre .ancho{padding-top:52px}
.reparto{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:38px}
.cierre img{height:56px;width:auto;margin-bottom:16px}
.cierre h4{font-size:.86rem;color:var(--gris);font-weight:700;margin-bottom:14px}
.cierre ul{display:flex;flex-direction:column;gap:10px}
.cierre a{font-size:.93rem;transition:color .15s}
.cierre a:hover{color:var(--naranja-fuerte)}
.cierre .resumen{max-width:34ch;font-size:.92rem;margin-top:2px}
.redes-footer{display:flex;align-items:center;gap:12px;margin-top:18px}
.redes-footer a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--borde);color:var(--tinta-suave);
  transition:background .15s,color .15s,border-color .15s;
}
.redes-footer a:hover{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.redes-footer svg{width:17px;height:17px;fill:currentColor}
.rubrica{
  border-top:1px solid var(--borde);padding:18px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--gris);
}

.flotante-wa{
  position:fixed;right:20px;bottom:20px;z-index:400;
  width:58px;height:58px;border-radius:50%;
  background:var(--whatsapp);display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .18s;
}
.flotante-wa:hover{transform:scale(1.08)}
.flotante-wa svg{width:29px;height:29px;fill:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .riel-categorias{grid-template-columns:repeat(3,1fr)}
  .taller{grid-template-columns:1fr}
  .costado{position:static;flex-direction:row;flex-wrap:wrap}
  .filtro-grupo{flex:1;min-width:220px}
  .expositor{grid-template-columns:1fr;overflow-y:auto;height:auto;max-height:92vh}
  .visor .grande{min-height:280px}
  .pareja{grid-template-columns:1fr}
  .reparto{grid-template-columns:1fr 1fr}
  .confianza-fila{grid-template-columns:repeat(2,1fr)}
  .confianza-item:nth-child(3){border-left:none}
  .confianza-item:nth-child(3),.confianza-item:nth-child(4){border-top:1.5px solid var(--borde)}
}

@media(max-width:700px){
  #entrada .ruta{transform:scale(.62)}
}
@media(max-width:420px){
  #entrada .ruta{transform:scale(.5)}
}

@media(max-width:1060px){
  .cabecera .buscador{display:none}
  .nav-principal{
    display:flex;position:fixed;top:90px;left:16px;right:16px;z-index:199;
    background:#fff;border-radius:var(--radio-m);box-shadow:var(--sombra-alta);
    flex-direction:column;gap:4px;padding:10px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .25s ease,opacity .2s ease;
  }
  .nav-principal.desplegado{max-height:340px;opacity:1;pointer-events:auto}
  .nav-principal li{width:100%}
  .nav-principal a{
    width:100%;padding:14px 16px;font-size:1rem;
    border-radius:var(--radio-s);
  }
  .trinche{display:block}
  .cabecera .ancho{min-height:86px}
  .marca-link img{height:60px}
  .acciones-cabecera .btn span{display:none}
  .acciones-cabecera .btn{padding:12px;border-radius:50%}
  .hero-tarjeta{grid-template-columns:1fr;border-radius:var(--radio-m)}
  .hero-texto{padding:28px 24px}
  .tramo{padding:38px 0}
  .riel-categorias{grid-template-columns:repeat(2,1fr)}
  /* La quinta no queda sola ni parte la palabra a la mitad */
  .riel-categorias > *:nth-child(5){grid-column:span 2}
  .riel-categorias > *:nth-child(5) .icono{margin-bottom:0}
  .categoria-tarjeta h3{overflow-wrap:normal;hyphens:auto}
  .rejilla-productos{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px}
  .producto .cuerpo{padding:12px}
  .producto h3{font-size:.92rem}
  .producto .precio{font-size:1.05rem}
  .producto .pie{padding:10px 12px;gap:6px}
  .producto .pie .ver{padding:9px 4px;font-size:.82rem;white-space:nowrap}
  .producto .pie .pedir{width:38px;height:38px}
  .producto .pie .pedir svg{width:18px;height:18px}
  .cortina{padding:0;align-items:flex-end}
  .expositor{border-radius:var(--radio-m) var(--radio-m) 0 0}
  .ficha-texto{padding:24px 20px 96px}
  /* El botón de pedido queda siempre a la mano, sin buscarlo bajo la tabla */
  .expositor #x-pedir{
    position:fixed;bottom:0;left:0;right:0;z-index:6;
    width:auto;border-radius:0;
    padding:18px;box-shadow:0 -8px 20px rgba(24,20,14,.14);
  }
  .reparto{grid-template-columns:1fr}
  .banda-mayoreo{flex-direction:column;align-items:flex-start;text-align:left}
  .confianza-fila{grid-template-columns:1fr}
  .confianza-item{border-left:none!important;border-top:1.5px solid var(--borde)}
  .confianza-item:first-child{border-top:none}
}

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

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--naranja);outline-offset:2px;
}


/* ── Bloque de precios en la ficha de producto ── */
.bloque-precios{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin:18px 0 6px;
}
.precio-item{
  border-radius:var(--radio-m);
  padding:14px 16px;
  position:relative;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.precio-item:hover, .precio-item:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.precio-item.unidad{
  background:var(--naranja-suave);
  border:1.5px solid var(--naranja);
}
.precio-item.mayor{
  background:#0f0c09;
  border:1.5px solid rgba(245,146,58,.3);
  color:#fff;
}
.precio-item.cajon{
  background:var(--panel);
  border:1.5px dashed var(--borde);
}
.precio-item .pi-label{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.65;
  margin-bottom:4px;
  display:block;
}
.precio-item.unidad .pi-label{ color:var(--naranja-fuerte); }
.precio-item.mayor  .pi-label{ color:rgba(245,146,58,.8); }
.precio-item.cajon  .pi-label{ color:var(--gris); }
.precio-item .pi-valor{
  font-size:1.65rem;
  font-weight:900;
  line-height:1;
  display:block;
}
.precio-item.unidad .pi-valor{ color:var(--naranja-fuerte); }
.precio-item.mayor  .pi-valor{ color:#F5923A; }
.precio-item.cajon  .pi-valor{ color:var(--tinta); font-size:1.05rem; font-weight:800; }
.precio-item .pi-sub{
  font-size:.76rem;
  opacity:.6;
  margin-top:3px;
  display:block;
}
.precio-item.unidad .pi-sub{ color:var(--tinta); }
.precio-item.mayor  .pi-sub{ color:#fff; }
.precio-item.mayor.vigente{ box-shadow:0 0 0 2px var(--naranja); }
.precio-item.cajon  .pi-sub{ color:var(--gris); }
.precio-item.cajon .pi-wa{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.74rem; font-weight:700; color:var(--whatsapp-oscuro);
  margin-top:6px;
}
/* Badge de descuento */
.descuento-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:linear-gradient(135deg,#e53935,#c62828);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  padding:4px 10px;
  border-radius:var(--radio-pill);
  margin:8px 0 16px;
  letter-spacing:.02em;
}
.descuento-badge svg{
  width:13px;height:13px;fill:currentColor;flex-shrink:0;
}
/* Quitar el precio antiguo de la ficha */
.ficha-texto .precio{ display:none; }
.ficha-texto .nota{ margin-top:0; }
@media(max-width:600px){
  .bloque-precios{ grid-template-columns:1fr; }
  .precio-item .pi-valor{ font-size:1.4rem; }
  .precio-item.cajon .pi-valor{ font-size:1rem; }
}


/* ── Precio en card de producto (rejilla) ── */
.producto .precio-card{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.producto .pc-antes{
  font-size:.92rem;
  font-weight:600;
  color:var(--gris);
  text-decoration:line-through;
  text-decoration-color:#e53935;
}
.producto .pc-unidad{
  font-size:1.2rem;
  font-weight:800;
  color:var(--naranja-fuerte);
}
.producto .pc-unidad.consulta{
  font-size:.92rem;
  font-weight:600;
  color:var(--gris);
}
.producto .pc-mayor{
  font-size:.82rem;
  font-weight:600;
  color:var(--gris);
  background:var(--panel);
  padding:2px 8px;
  border-radius:var(--radio-pill);
}
.producto .pc-mayor em{
  font-style:normal;
  color:var(--naranja-fuerte);
  font-weight:700;
}
.producto .pc-badge{
  font-size:.73rem;
  font-weight:800;
  color:#fff;
  background:#e53935;
  padding:2px 7px;
  border-radius:var(--radio-pill);
  letter-spacing:.02em;
}
/* También en el catálogo */
.producto .precio{ display:none; } /* ocultar el div .precio antiguo si quedó */


/* ============================================================
   AGREGADOS — pedidos de la clienta (ronda de ajustes)
   ============================================================ */

/* ── Barra superior: redes sociales + contacto ── */
.barra-superior{
  background:var(--tinta);
  color:rgba(255,255,255,.82);
  font-size:.8rem;
}
.barra-superior .ancho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:7px 24px;
}
.barra-superior .bs-redes{
  display:flex;
  align-items:center;
  gap:12px;
}
.barra-superior .bs-redes a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.82);
  transition:color .15s;
}
.barra-superior .bs-redes a:hover{ color:var(--naranja); }
.barra-superior .bs-redes svg{ width:15px; height:15px; fill:currentColor; flex-shrink:0; }
.barra-superior .bs-telefonos{
  display:flex;
  align-items:center;
  gap:14px;
}
.barra-superior .bs-telefonos a:hover{ color:var(--naranja); }
@media(max-width:768px){
  .barra-superior .bs-telefonos{ display:none; }
  .barra-superior .ancho{ padding:6px 14px; justify-content:center; }
}

/* ── Hero estático + barra de mensajes rotativos ── */
.hero-estatico{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#0a0806;
  line-height:0;
}
.hero-estatico img{
  width:100%;
  height:auto;
  display:block;
  max-height:560px;
  object-fit:cover;
}
.hero-estatico .bs-overlay{
  position:absolute;
  bottom:0; left:0; right:0;
  background:linear-gradient(0deg,rgba(10,8,6,.75) 0%,rgba(10,8,6,0) 100%);
  padding:26px 32px 30px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  line-height:1.3;
}
.hero-estatico .bs-overlay-info{ display:flex; flex-direction:column; gap:4px; }
.hero-estatico .bs-cat{
  font-size:.72rem; font-weight:700; color:var(--naranja);
  letter-spacing:.12em; text-transform:uppercase; opacity:.9;
}
.hero-estatico .bs-nombre{
  font-size:clamp(1.1rem,2.6vw,1.7rem); font-weight:900; color:#fff;
  line-height:1.2; text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero-estatico .bs-overlay-btns{ display:flex; gap:10px; flex-shrink:0; }
.hero-estatico .bs-btn{
  display:inline-flex; align-items:center; gap:7px;
  font:700 .88rem/1 var(--tipo); padding:12px 20px;
  border-radius:var(--radio-pastilla); border:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 18px rgba(0,0,0,.35); white-space:nowrap; text-decoration:none;
}
.hero-estatico .bs-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.45); }
.hero-estatico .bs-btn-cat{ background:var(--naranja); color:var(--tinta); }
.hero-estatico .bs-btn-wa{ background:var(--whatsapp); color:#fff; }
.hero-estatico .bs-btn svg{ fill:currentColor; flex-shrink:0; }

.ticker-bar{
  background:var(--tinta);
  overflow:hidden;
  height:42px;
  display:flex;
  align-items:center;
  line-height:normal;
}
.ticker-bar .ticker-texto{
  color:#fff;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.01em;
  padding:0 24px;
  width:100%;
  text-align:center;
  animation:ticker-fade 4s ease-in-out infinite;
}
.ticker-bar .ticker-texto b{ color:var(--naranja); }
@keyframes ticker-fade{
  0%{ opacity:0; transform:translateY(6px); }
  10%{ opacity:1; transform:translateY(0); }
  90%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-6px); }
}
@media(max-width:768px){
  .hero-estatico .bs-overlay{ padding:16px 14px 20px; flex-direction:column; align-items:flex-start; gap:12px; }
  .hero-estatico .bs-nombre{ font-size:clamp(.95rem,4.2vw,1.2rem); }
  .hero-estatico .bs-overlay-btns{ width:100%; }
  .hero-estatico .bs-btn{ flex:1; justify-content:center; padding:10px 14px; font-size:.82rem; }
  .ticker-bar .ticker-texto{ font-size:.78rem; padding:0 14px; }
}

/* ── Selector de cantidad en la ficha de producto ── */
.selector-cantidad{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:var(--panel);
  border-radius:var(--radio-m);
  padding:12px 16px;
  margin:14px 0 4px;
}
.sc-label{ font-size:.86rem; font-weight:700; color:var(--tinta-suave); }
.sc-stepper{
  display:flex;
  align-items:center;
  gap:0;
  background:#fff;
  border:1.5px solid var(--borde);
  border-radius:var(--radio-pastilla);
  overflow:hidden;
}
.sc-btn{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:700;
  color:var(--naranja-fuerte);
  transition:background .15s;
}
.sc-btn:hover{ background:var(--naranja-suave); }
.sc-stepper input{
  width:46px;
  text-align:center;
  border:none;
  border-left:1.5px solid var(--borde);
  border-right:1.5px solid var(--borde);
  font:700 1rem var(--tipo);
  color:var(--tinta);
  -moz-appearance:textfield;
}
.sc-stepper input::-webkit-outer-spin-button,
.sc-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sc-total{
  font-size:.86rem;
  color:var(--tinta-suave);
  margin:6px 2px 4px;
}
.sc-total b{ color:var(--naranja-fuerte); font-size:1rem; }

/* ── Nota de precio por cajón ── */
.cajon-nota{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.82rem;
  color:var(--tinta-suave);
  background:var(--panel);
  border-radius:var(--radio-s);
  padding:10px 14px;
  margin:4px 0 14px;
  line-height:1.4;
}
.cajon-nota b{ color:var(--tinta); }

.riel-tiktok{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.riel-tiktok > *{ min-width:0; }
.tiktok-tarjeta{
  display:flex;flex-direction:column;gap:14px;
  background:var(--tinta);color:#fff;border-radius:var(--radio-m);
  padding:22px;transition:transform .18s,box-shadow .18s;
  text-decoration:none;
}
.tiktok-tarjeta:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.22); }
.tiktok-tarjeta .icono-tiktok{
  width:46px;height:46px;border-radius:var(--radio-s);
  background:var(--naranja);color:var(--tinta);
  display:grid;place-items:center;flex-shrink:0;
}
.tiktok-tarjeta .icono-tiktok svg{ width:22px;height:22px;fill:currentColor; }
.tiktok-tarjeta .tt-linea{
  font-size:.76rem;color:rgba(255,255,255,.62);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.tiktok-tarjeta h3{ font-size:1rem;color:#fff;margin-top:2px; }
.tiktok-tarjeta .tt-ver{
  margin-top:auto;font-size:.82rem;font-weight:700;color:var(--naranja);
  display:flex;align-items:center;gap:4px;
}
@media(max-width:860px){
  .riel-tiktok{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .riel-tiktok{ grid-template-columns:1fr; }
}
/* ── Clientes satisfechos ── */
.testimonios-riel{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.testimonio{
  background:var(--panel);
  border-radius:var(--radio-m);
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.testimonio .estrellas{ color:var(--naranja); font-size:.95rem; letter-spacing:2px; }
.testimonio p{ font-size:.94rem; color:var(--tinta-suave); line-height:1.5; }
.testimonio .autor{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.testimonio .autor .avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--naranja); color:var(--tinta);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; flex-shrink:0;
}
.testimonio .autor b{ display:block; font-size:.88rem; }
.testimonio .autor span{ display:block; font-size:.78rem; color:var(--gris); }
@media(max-width:860px){
  .testimonios-riel{ grid-template-columns:1fr; }
}

/* ── Libro de reclamaciones ── */
.radios label{display:flex;align-items:center;gap:7px;font-size:.94rem;font-weight:600;color:var(--tinta);cursor:pointer}
.radios input[type=radio]{width:17px;height:17px;accent-color:var(--naranja-fuerte)}
.aviso-legal{
  background:var(--panel);border-radius:var(--radio-m);
  padding:18px 22px;font-size:.88rem;color:var(--tinta-suave);line-height:1.6;
  margin-top:18px;
}
.aviso-legal b{ color:var(--tinta); }
.subtitulo-form{
  font-size:.95rem;font-weight:800;color:var(--tinta);
  margin:10px 0 -4px;padding-top:18px;border-top:1.5px solid var(--borde);
}
.boleta .subtitulo-form:first-child{ border-top:none;padding-top:0;margin-top:0; }
.constancia{
  display:none;border:1.5px dashed var(--naranja);border-radius:var(--radio-m);
  padding:24px;margin-top:28px;background:#fff;
}
.constancia.visible{ display:block; }
.constancia dl{ display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.92rem; }
.constancia dt{ color:var(--gris);font-weight:600; }
.constancia dd{ color:var(--tinta); }
@media(max-width:600px){
  .constancia dl{ grid-template-columns:1fr; }
  .constancia dt{ margin-top:8px; }
}
@media print{
  .cabecera, .cierre, .flotante-wa, .no-imprimir, .tramo:first-of-type{ display:none!important; }
  body{ background:#fff; }
  .constancia{ border:1px solid #000;margin-top:0; }
}

/* ── Términos y condiciones ── */
.terminos-cuerpo{ display:flex;flex-direction:column;gap:26px; }
.terminos-cuerpo h3{ font-size:1.05rem;margin-bottom:8px; }
.terminos-cuerpo p, .terminos-cuerpo li{ color:var(--tinta-suave);font-size:.95rem;line-height:1.6; }
.terminos-cuerpo ul{ display:flex;flex-direction:column;gap:6px;padding-left:20px;list-style:disc; }


/* Precios en espera: la web pide los precios reales a Firebase antes de mostrarlos */
.precios-cargando .precio-card > *{ color:transparent !important; background:var(--panel); border-radius:6px; }
.precios-cargando .pie .pedir, .precios-cargando .pie .ver{ pointer-events:none; opacity:.35; }
.precios-cargando .producto .foto, .precios-cargando .producto .cuerpo{ pointer-events:none; }

/* ── Libro de reclamaciones: registro en línea ── */
.rc-ayuda{ font-size:.8rem;color:var(--gris); }
.rc-check{ display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--tinta-suave);line-height:1.5;cursor:pointer; }
.rc-check input{ width:17px;height:17px;margin-top:3px;flex-shrink:0;accent-color:var(--naranja-fuerte); }
.rc-check a{ color:var(--naranja-fuerte);text-decoration:underline; }
.rc-estado{ border-radius:var(--radio-m);padding:14px 16px;font-size:.9rem;line-height:1.55; }
.rc-estado.error{ background:#fdecea;border:1.5px solid #f5c2c0;color:#8e1b14; }
.constancia dt.rc-seccion{ grid-column:1 / -1;color:var(--tinta);font-weight:800;margin-top:10px;padding-top:10px;border-top:1px solid var(--borde); }
.constancia dd.rc-seccion{ display:none; }
.constancia dl dt.rc-seccion:first-child{ border-top:none;margin-top:0;padding-top:0; }
.constancia dd{ white-space:pre-wrap;word-break:break-word; }
.rubrica .legal-pie{ opacity:.85; }