/* HERENZIA® — Sistema Etiqueta Técnica v2 (design pass UI/UX) */
:root {
  --azul:#14A2D9; --azul-h:#3FB8E6; --negro:#0A0A0B; --carbon:#16171A; --carbon2:#101114;
  --borde:#232529; --borde-h:#2E3138; --hueso:#F2EFE7; --gris:#8A8D93; --gris2:#5E6167;
  --oro:#C9A961; --prof:#0B5E85;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px;
  --r1:6px; --r2:10px; --r3:14px;
  --t:180ms cubic-bezier(.2,.6,.3,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--negro); color:var(--hueso); line-height:1.65; -webkit-font-smoothing:antialiased; }
.mono { font-family:'Space Mono',monospace; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font:inherit; }
.wrap { max-width:1600px; margin:0 auto; padding:0 clamp(16px,2.6vw,48px); }
::selection { background:var(--azul); color:var(--negro); }
::-webkit-scrollbar { width:10px; background:var(--negro); }
::-webkit-scrollbar-thumb { background:#26282d; border-radius:5px; }
:focus-visible { outline:2px solid var(--azul); outline-offset:2px; border-radius:4px; }

/* ---------- barra de envio (oferta fija, lo mas visible de la pagina) ---------- */
.envio-bar { background:var(--azul); color:var(--negro); text-align:center;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:1.3px;
  padding:8px 14px; line-height:1.5; }
.envio-bar b { font-weight:700; }
.envio-bar .sep { opacity:.55; margin:0 8px; }
@media (max-width:640px){ .envio-bar { font-size:10px; letter-spacing:.8px; }
  .envio-bar .sep, .envio-bar .op { display:none; } }

/* ---------- marquee promesa (senales de confianza, en segundo plano) ---------- */
.promo { background:var(--carbon2); color:var(--gris); border-bottom:1px solid var(--borde);
  overflow:hidden; white-space:nowrap; }
.promo .track { display:inline-block; font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:1px; padding:7px 0; animation:mq 28s linear infinite; }
.promo .track span { margin:0 26px; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Con «reducir movimiento» no basta con parar la animación: la tira se queda
   en translateX(0) y son 1.951 px dentro de una caja de 1.430, así que el texto
   queda cortado a media palabra y quieto — parece rota, no parece detenida.
   La segunda copia de los tres mensajes existe SOLO para que el bucle empalme
   sin salto; sin movimiento sobra. Se oculta y se centra lo que queda. */
@media (prefers-reduced-motion:reduce){
  /* padding lateral y text-align: sin movimiento el texto envuelve DENTRO del
     span, y esas líneas nuevas salían pegadas al borde izquierdo. El
     scrollWidth no lo delataba porque el desbordamiento ocurre dentro del
     propio span, no en la caja. */
  .promo { white-space:normal; padding-inline:16px; text-align:center; }
  .promo .track { animation:none; display:flex; flex-wrap:wrap;
    justify-content:center; gap:0 26px; }
  .promo .track span { margin:0; }
  .promo .track span:nth-child(n+4) { display:none; }
}

/* ---------- header ---------- */
header { position:sticky; top:0; z-index:50; background:rgba(10,10,11,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--borde); }
/* Rejilla de TRES zonas y no flex con space-between. El logo va en la columna
   del medio, que es `auto` entre dos `1fr` iguales, así que queda centrado de
   verdad pase lo que pase con el ancho de los lados.
   Con space-between y cuatro hijos —botón, logo, enlaces, acciones— el logo
   quedaba a 315 px en un viewport de 1024: ni a la izquierda ni centrado.
   La colocación es EXPLÍCITA por columna: si una página no llevara el botón,
   la colocación automática metería el logo en la columna 1 y lo descentraría. */
.nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; gap:14px; }
.nav > .cat-btn { grid-column:1; justify-self:start; margin-right:0; }
.nav > .logo    { grid-column:2; justify-self:center; }
.nav > .nav-der { grid-column:3; justify-self:end; display:flex; align-items:center; gap:22px; }

/* TRES BANDAS, y cada una es la correcta para su ancho.
   Entre 761 y 1139 px los cuatro enlaces SÍ se ven, y entonces no cabe además
   un logo centrado: la rejilla `1fr auto 1fr` obliga a que las dos columnas
   laterales midan igual, y la derecha (enlaces 352 + acciones 94) pide 468,
   o sea 1.082 px de contenido. Medido: a 1.024 el logo se iba a 470 en vez de
   507 y «Las Casas» se partía en dos líneas.
   La salida NO es encoger la tipografía —probé 12 px y cabía, pero es
   deformar el diseño para ganar un ancho concreto—: en esa banda el logo
   vuelve a la izquierda, que es donde estaba antes de que existiera el botón.
   Por debajo de 760 los enlaces se ocultan y vuelve a haber sitio de sobra. */
@media (min-width:761px) and (max-width:1139px){
  .nav { grid-template-columns:auto auto 1fr; }
  .nav > .logo { justify-self:start; }
}
.nav-links a { white-space:nowrap; }
/* Red de seguridad: si por lo que sea no se agrupó la derecha, estos dos van a
   la misma celda en vez de abrir una fila nueva y doblar el alto de la barra. */
.nav > .nav-links, .nav > .nav-acciones { grid-column:3; justify-self:end; }
.logo { font-family:'Space Mono',monospace; font-weight:700; font-size:20px; letter-spacing:3px; }
.logo sup { color:var(--azul); font-size:10px; }
.nav-links { display:flex; gap:26px; font-size:13px; color:var(--gris); }
.nav-links a { position:relative; padding:4px 0; transition:color var(--t); }
.nav-links a:hover { color:var(--hueso); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--azul); transition:width var(--t); }
.nav-links a:hover::after { width:100%; }
.cart-btn { position:relative; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--borde-h); border-radius:var(--r1); color:var(--hueso); cursor:pointer; transition:all var(--t); }
.cart-btn svg { width:19px; height:19px; display:block; }
.cart-btn:hover { border-color:var(--azul); color:var(--azul); background:rgba(20,162,217,.08); }
.cart-btn:active { transform:scale(.94); }
.cart-count { position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px;
  background:var(--azul); color:var(--negro); border:2px solid var(--negro); border-radius:20px;
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700; line-height:1;
  align-items:center; justify-content:center; }
@media (max-width:520px){ .cart-btn { width:38px; height:38px; } .cart-btn svg { width:18px; height:18px; } }

/* ---------- hero ---------- */
.hero { position:relative; padding:var(--s7) 0 var(--s6); text-align:center; border-bottom:1px solid var(--borde); overflow:hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% -5%, rgba(20,162,217,.14) 0%, transparent 70%),
    linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size:100% 100%, 56px 56px, 56px 56px;
  background-position:center top; }
.hero::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 90% 90% at 50% 40%, transparent 30%, var(--negro) 95%); pointer-events:none; }
.hero > .wrap { position:relative; z-index:1; }
.hero .kicker { font-family:'Space Mono',monospace; font-size:11px; color:var(--azul); letter-spacing:2px; }
.hero h1 { font-family:'Space Mono',monospace; font-weight:700; font-size:clamp(30px,5.6vw,58px); letter-spacing:1px; line-height:1.14; margin:18px 0 14px; text-wrap:balance; }
.hero h1 em { color:var(--azul); font-style:normal; }
.hero p { color:var(--gris); max-width:560px; margin:0 auto var(--s4); font-size:16px; }
.hero p b { color:var(--hueso); font-weight:600; }
.hero .ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero .proof { margin-top:var(--s5); display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero .proof span { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--gris); border:1px solid var(--borde); padding:6px 12px; border-radius:20px; background:rgba(16,17,20,.7); }
.hero .proof b { color:var(--azul); font-weight:700; }

/* ---------- botones ---------- */
.btn { display:inline-block; font-family:'Space Mono',monospace; font-weight:700; font-size:13px; letter-spacing:1px; background:var(--azul); color:var(--negro); padding:14px 28px; border-radius:var(--r1); border:none; cursor:pointer; transition:all var(--t); }
.btn:hover { background:var(--azul-h); transform:translateY(-1px); box-shadow:0 6px 24px rgba(20,162,217,.3); }
.btn:active { transform:translateY(0); }
.btn.ghost { background:transparent; border:1px solid var(--azul); color:var(--azul); box-shadow:none; }
.btn.ghost:hover { background:rgba(20,162,217,.1); }
.btn.big { width:100%; text-align:center; font-size:14px; padding:16px; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- secciones ---------- */
.sec-title { display:flex; align-items:center; gap:14px; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:2px; color:var(--gris); text-transform:uppercase; margin:var(--s6) 0 var(--s2); }
.sec-title::before { content:"//"; color:var(--azul); }
.sec-title::after { content:""; flex:1; height:1px; background:var(--borde); }
.sec-sub { color:var(--gris2); font-size:14px; margin-bottom:var(--s4); }

/* ---------- catálogo ---------- */
.filters { display:block; margin:var(--s3) 0 var(--s4); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; padding-bottom:var(--s5); }
.card { position:relative; background:var(--carbon); border:1px solid var(--borde); border-radius:var(--r2); overflow:hidden; transition:all var(--t); }
.card:hover { border-color:var(--azul); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.45); }
.card .im { position:relative; aspect-ratio:1/1; background:var(--carbon2); overflow:hidden; }
/* el recorte lo hace el CDN; aqui solo aseguramos que llene el marco por igual */
.card .im img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; transition:transform .5s ease, opacity .35s ease; }
.card:hover .im img { transform:scale(1.04); }
/* segunda foto: solo cuando el producto la tiene (.im.dos) */
.card .im .im-b { opacity:0; }
.card .im.dos:hover .im-b, .card .im.dos:focus-within .im-b { opacity:1; }
.card .im.dos:hover .im-a, .card .im.dos:focus-within .im-a { opacity:0; }
@media (hover:none){ .card .im .im-b{ display:none; } }
@media (prefers-reduced-motion:reduce){ .card .im img{ transition:opacity .2s linear; }
  .card:hover .im img{ transform:none; } }
.card .off { position:absolute; top:12px; right:12px; font-family:'Space Mono',monospace; font-size:10px; font-weight:700; background:var(--negro); color:var(--azul); border:1px solid var(--azul); padding:3px 8px; border-radius:4px; }
.card .pad { padding:16px; }
.badge { display:inline-block; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--azul); border:1px solid var(--azul); padding:2px 7px; border-radius:3px; margin-right:5px; }
.badge.fill { background:var(--azul); color:var(--negro); border:1px solid var(--azul); font-weight:700; }
.badge.oro { color:var(--oro); border-color:var(--oro); }
/* Promoción igualada: la casa rebajó y quedamos por debajo de ella. Va en oro,
   no en rojo — es una oportunidad, no una liquidación. */
.badge.promo { background:var(--oro); color:var(--negro); border-color:var(--oro); font-weight:700; }
.card .off.promo { background:var(--oro); color:var(--negro); border-color:var(--oro); }
.card .marca { font-family:'Space Mono',monospace; font-size:10px; color:var(--gris); margin-top:10px; letter-spacing:1px; }
.card .nm { font-weight:600; font-size:14px; margin:3px 0 10px; }
.precio { font-family:'Space Mono',monospace; }
.precio s { color:var(--gris2); font-size:11px; }
.precio b { color:var(--azul); font-size:16px; margin-left:6px; }

/* ---------- como funciona ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:var(--s4) 0 var(--s5); counter-reset:paso; }
.step { background:var(--carbon); border:1px solid var(--borde); border-radius:var(--r2); padding:26px 22px; transition:border-color var(--t); }
.step:hover { border-color:var(--borde-h); }
.step .n { font-family:'Space Mono',monospace; color:var(--azul); font-weight:700; font-size:12px; }
.step h3 { font-size:16px; margin:10px 0 6px; }
.step p { font-size:13px; color:var(--gris); }

/* ---------- certificado en home ---------- */
.cert-sec { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center; margin:var(--s4) 0 var(--s5); }
.cert-card { background:var(--negro); border:1px solid var(--azul); border-radius:var(--r2); overflow:hidden; box-shadow:0 0 40px rgba(20,162,217,.12); }
.cert-card .top { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px dashed var(--borde); font-family:'Space Mono',monospace; }
.cert-card .top .t { font-weight:700; font-size:14px; }
.cert-card .top .t sup { color:var(--azul); font-size:8px; }
.cert-card .top .n { font-size:10px; color:var(--azul); }
.cert-card .bd { padding:14px 18px; font-family:'Space Mono',monospace; font-size:11px; color:var(--gris); }
.cert-card .row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid #111216; }
.cert-card .row:last-child { border:none; }
.cert-card .row b { color:var(--hueso); font-weight:400; }
.cert-card .ok { color:var(--azul); }
.cert-card .ft { padding:12px 18px; border-top:1px dashed var(--borde); display:flex; justify-content:space-between; align-items:center; }
.barcode { background:repeating-linear-gradient(90deg,var(--hueso) 0 2px,transparent 2px 5px,var(--hueso) 5px 6px,transparent 6px 10px); width:100px; height:22px; opacity:.9; }
.sello-oro { font-family:'Space Mono',monospace; font-size:9px; color:var(--oro); border:1px solid var(--oro); padding:3px 9px; border-radius:3px; letter-spacing:1px; }
.cert-sec h2 { font-family:'Space Mono',monospace; font-size:26px; line-height:1.3; margin-bottom:12px; }
.cert-sec h2 em { color:var(--azul); font-style:normal; }
.cert-sec p { color:var(--gris); font-size:14px; margin-bottom:14px; }
.cert-sec p b { color:var(--hueso); }

/* ---------- garantia ---------- */
.garantia { border:1px solid var(--oro); border-radius:var(--r2); padding:28px; margin:0 0 var(--s5); display:flex; gap:22px; align-items:center; flex-wrap:wrap; background:linear-gradient(135deg, rgba(201,169,97,.05), transparent 60%); }
.garantia .sello { font-family:'Space Mono',monospace; color:var(--oro); border:1px solid var(--oro); padding:9px 15px; border-radius:20px; font-size:11px; white-space:nowrap; }
.garantia p { font-size:14px; color:#c4c7cc; flex:1; min-width:260px; }
.garantia b { color:var(--hueso); }

/* ---------- FAQ ---------- */
.faq { margin-bottom:var(--s6); }
.faq details { border:1px solid var(--borde); border-radius:var(--r2); margin-bottom:10px; background:var(--carbon); transition:border-color var(--t); }
.faq details:hover { border-color:var(--borde-h); }
.faq details[open] { border-color:var(--azul); }
.faq summary { cursor:pointer; padding:18px 20px; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:'Space Mono',monospace; color:var(--azul); font-size:18px; transition:transform var(--t); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .a { padding:0 20px 18px; font-size:13px; color:var(--gris); }
.faq .a b { color:var(--hueso); }

/* ---------- producto ---------- */
.pd { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); padding:var(--s5) 0 var(--s6);
  max-width:1400px; margin:0 auto; }
.crumbs { font-family:'Space Mono',monospace; font-size:10px; color:var(--gris2); margin-top:var(--s4); letter-spacing:1px; }
.crumbs a:hover { color:var(--azul); }
/* ---------- galería de la ficha ----------
   La columna entera queda pegada al hacer scroll, no solo la foto grande, para
   que la tira de miniaturas siga a la vista mientras se leen tallas y precio. */
/* Las miniaturas van en columna al lado de la foto, no debajo: debajo sumaban
   alto y quedaban fuera de la pantalla al abrir la ficha, así que el cliente no
   se enteraba de que había más fotos. Al lado se ven siempre. En móvil vuelven
   a ser una tira horizontal (ver el bloque responsive). */
/* La tira va absoluta a la izquierda y la foto es el único hijo en flujo: así el
   alto de .gal lo fija la foto y la tira se estira exactamente hasta ahí. Con
   grid la fila crecía con la tira y diez miniaturas se salían por debajo. */
/* align-self:start es obligatorio: como hijo del grid .pd se estiraría al alto
   de la columna de texto, y la tira —que se mide contra .gal— se pasaría de la
   foto por abajo. */
.pd .gal { position:sticky; top:84px; align-self:start; padding-left:74px; min-width:0; }
.pd .gal.sola { padding-left:0; }
.pd .im { background:var(--carbon2); border:1px solid var(--borde); border-radius:var(--r2); overflow:hidden; position:relative; aspect-ratio:4/5; max-height:calc(100dvh - 120px); }
/* en la ficha la pieza se ve entera: contener, no recortar */
.pd .im img { width:100%; height:100%; object-fit:contain; object-position:center; }

.gal-nav { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:54px;
  display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1;
  background:rgba(10,10,11,.55); color:var(--hueso); border:1px solid var(--borde);
  border-radius:var(--r1); cursor:pointer; opacity:0; transition:opacity var(--t), border-color var(--t); }
.gal-nav.prev { left:10px; } .gal-nav.next { right:10px; }
.pd .im:hover .gal-nav, .gal-nav:focus-visible { opacity:1; }
.gal-nav:hover { border-color:var(--azul); color:var(--azul); }
/* sin ratón no hay hover que las revele: en táctil se quedan puestas */
@media (hover:none){ .gal-nav { opacity:.75; } }

.gal-cuenta { position:absolute; right:10px; bottom:10px; font-size:10px; letter-spacing:1px;
  color:var(--gris); background:rgba(10,10,11,.6); border:1px solid var(--borde);
  border-radius:var(--r1); padding:3px 8px; }

.gal-tira { position:absolute; left:0; top:0; bottom:0; width:64px;
  display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; scrollbar-width:none; }
.gal-tira::-webkit-scrollbar { display:none; }
.gal-min { flex:0 0 64px; width:64px; aspect-ratio:1/1; padding:0; cursor:pointer;
  background:var(--carbon2); border:1px solid var(--borde); border-radius:var(--r1);
  overflow:hidden; transition:border-color var(--t), opacity var(--t); opacity:.6; }
.gal-min img { width:100%; height:100%; object-fit:cover; }
.gal-min:hover { opacity:1; border-color:var(--borde-h); }
.gal-min.sel { opacity:1; border-color:var(--azul); }
.gal-min:focus-visible { outline:2px solid var(--azul); outline-offset:2px; }
.pd .marca { font-family:'Space Mono',monospace; font-size:12px; color:var(--gris); letter-spacing:2px; }
.pd h1 { font-size:30px; margin:6px 0 12px; line-height:1.2; }
.pd .precio { margin:16px 0 4px; }
.pd .precio b { font-size:28px; }
.pd .ahorro { font-family:'Space Mono',monospace; font-size:11px; color:var(--azul); margin-bottom:8px; }
.pd .desc { color:var(--gris); font-size:14px; margin:14px 0 6px; }
.tallas { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 22px; }
.talla { font-family:'Space Mono',monospace; font-size:12px; min-width:46px; text-align:center; padding:10px 6px; border:1px solid var(--borde); border-radius:var(--r1); cursor:pointer; background:none; color:var(--hueso); transition:all var(--t); }
.talla:hover { border-color:var(--azul); }
.talla.sel { border-color:var(--azul); color:var(--azul); background:rgba(20,162,217,.1); font-weight:700; }
.pd .meta { font-family:'Space Mono',monospace; font-size:10px; color:var(--gris); margin-top:18px; line-height:2.1; border-top:1px dashed var(--borde); padding-top:14px; }
.pd .meta span { color:var(--azul); }
.pd .meta .g { color:var(--oro); }

/* ---------- toast ---------- */
/* El aviso se rompía en móvil: era una sola línea de texto en un flex, y al
   no caber se partía en columna encima del enlace. Ahora es una estructura
   fija de dos zonas con ancho acotado. */
.toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px);
  width:min(430px, calc(100vw - 24px));
  background:var(--carbon); border:1px solid var(--azul); color:var(--hueso);
  border-radius:var(--r2); z-index:80; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  display:flex; gap:12px; align-items:center; padding:11px 12px 11px 14px;
  box-shadow:0 12px 34px rgba(0,0,0,.55); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast .t-tx { flex:1; min-width:0; display:grid; gap:2px; }
.toast .t-tx b { font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:1.8px; color:var(--azul); }
.toast .t-tx i { font-style:normal; font-size:12.5px; color:var(--hueso);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast a { flex:none; font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:1.2px; color:var(--negro); background:var(--azul);
  padding:9px 12px; border-radius:6px; white-space:nowrap; }
.toast a:hover { background:var(--azul-h); }
@media (max-width:420px){
  .toast { padding:10px 10px 10px 12px; gap:9px; }
  .toast .t-tx i { font-size:11.5px; }
  .toast a { font-size:9px; padding:8px 9px; letter-spacing:.8px; }
}

/* ---------- carrito / checkout ---------- */
.panel { max-width:720px; margin:var(--s5) auto var(--s6); }
.linea { display:flex; gap:14px; align-items:center; background:var(--carbon); border:1px solid var(--borde); border-radius:var(--r2); padding:12px; margin-bottom:10px; transition:border-color var(--t); }
.linea:hover { border-color:var(--borde-h); }
.linea img { width:66px; height:66px; border-radius:var(--r1); }
.linea .inf { flex:1; }
.linea .nm { font-size:14px; font-weight:600; }
.linea .dt { font-family:'Space Mono',monospace; font-size:11px; color:var(--gris); }
.linea .pr { font-family:'Space Mono',monospace; color:var(--azul); font-weight:700; }
.linea .del { background:none; border:none; color:var(--gris2); cursor:pointer; font-size:16px; padding:6px; border-radius:4px; transition:color var(--t); }
.linea .del:hover { color:#e05656; }
/* ---------- páginas legales ----------
   Texto largo para leer, no para escanear: una columna angosta, interlínea
   amplia y nada de código de marca, que aquí solo estorbaría. */
.legal { max-width:760px; padding:var(--s5) 0 var(--s6); }
.legal h1 { font-size:clamp(26px,4vw,36px); line-height:1.2; margin-top:var(--s3); }
.legal .actualizado { font-family:'Space Mono',monospace; font-size:11px; color:var(--gris2); letter-spacing:1px; margin-top:8px; }
.legal h2 { font-size:17px; font-weight:600; margin:var(--s5) 0 10px; color:var(--hueso); }
.legal p, .legal li { color:var(--gris); font-size:15.5px; line-height:1.75; max-width:68ch; }
.legal p + p { margin-top:12px; }
.legal b { color:var(--hueso); font-weight:600; }
.legal ul { margin:10px 0 0 18px; }
.legal li { margin-bottom:8px; }
.legal a { color:var(--azul); text-decoration:underline; text-underline-offset:2px; }

.foot-legal { border-top:1px solid var(--borde); margin-top:var(--s6); padding:var(--s4) 0 var(--s5); }
.foot-legal .ident p { font-size:13px; color:var(--gris); margin:0 0 3px; }
.foot-legal .ident .fino { color:var(--gris2); font-size:12px; margin-top:8px; }
.legal-links { margin-top:14px; font-family:'Space Mono',monospace; font-size:11px; color:var(--gris2); letter-spacing:.5px; }
.legal-links a { color:var(--gris2); text-decoration:none; }
.legal-links a:hover { color:var(--azul); }

/* identificación del vendedor en el pie de todo el sitio (Ley 1480, art. 50) */
.foot-ident { border-top:1px solid var(--borde); margin-top:var(--s4); padding-top:var(--s3); }
.foot-ident p { font-family:'Space Mono',monospace; font-size:11px; color:var(--gris2); line-height:1.7; margin:0; }
.foot-ident b { color:var(--gris); }
.foot-ident a { color:var(--gris2); }
.foot-ident a:hover { color:var(--azul); }
.foot-legal-links { margin-top:10px; font-family:'Space Mono',monospace; font-size:11px; }
.foot-legal-links a { color:var(--gris2); }
.foot-legal-links a:hover { color:var(--azul); }

/* ---------- destino del envío, en el carrito ----------
   El flete no se puede calcular sin saber a dónde va, y el cliente no debería
   descubrir el cobro hasta el checkout. Se elige aquí y se recuerda. */
.destino { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px; }
.destino .et { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.4px; color:var(--gris2); }
.dst { font-family:'Space Mono',monospace; font-size:11px; padding:8px 12px; border:1px solid var(--borde);
  border-radius:var(--r1); background:none; color:var(--gris); cursor:pointer; transition:all var(--t); }
.dst:hover { border-color:var(--borde-h); color:var(--hueso); }
.dst.sel { border-color:var(--azul); color:var(--azul); background:rgba(20,162,217,.1); }
.dst:focus-visible { outline:2px solid var(--azul); outline-offset:2px; }

.falta-envio { margin-top:12px; border:1px solid var(--borde); border-radius:var(--r2); padding:12px 14px; background:var(--carbon2); }
.falta-envio .tx { font-family:'Space Mono',monospace; font-size:12px; color:var(--gris); }
.falta-envio .tx b { color:var(--hueso); }
.falta-envio .riel { height:4px; background:var(--borde); border-radius:2px; margin-top:9px; overflow:hidden; }
.falta-envio .riel i { display:block; height:100%; background:var(--azul); border-radius:2px; transition:width var(--t); }

.totales { border-top:1px dashed var(--borde); margin-top:16px; padding-top:14px; font-family:'Space Mono',monospace; font-size:13px; }
.totales .row { display:flex; justify-content:space-between; padding:4px 0; color:var(--gris); }
.totales .tot { color:var(--hueso); font-weight:700; font-size:17px; padding-top:8px; }
.totales .tot b { color:var(--azul); }
label { font-family:'Space Mono',monospace; font-size:11px; color:var(--gris); display:block; margin:16px 0 6px; letter-spacing:1px; }
input, select, textarea { width:100%; background:var(--carbon); border:1px solid var(--borde); border-radius:var(--r1); color:var(--hueso); padding:13px; font-family:'Inter',sans-serif; font-size:14px; transition:border-color var(--t); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(20,162,217,.12); }
input::placeholder { color:var(--gris2); }
.pago { border:1px solid var(--borde); border-radius:var(--r2); padding:15px; margin-top:10px; cursor:pointer; display:flex; gap:12px; align-items:flex-start; transition:all var(--t); }
.pago:hover { border-color:var(--borde-h); }
.pago.sel { border-color:var(--azul); background:rgba(20,162,217,.06); }
.pago input { width:auto; margin-top:4px; accent-color:var(--azul); }
.pago .t { font-weight:600; font-size:14px; }
.pago .d { font-size:12px; color:var(--gris); }
.pago .tag { font-family:'Space Mono',monospace; font-size:9px; color:var(--oro); border:1px solid var(--oro); padding:1px 6px; border-radius:3px; }
.vacio { text-align:center; color:var(--gris); padding:70px 0; font-family:'Space Mono',monospace; font-size:13px; }
.seguro { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; font-family:'Space Mono',monospace; font-size:9px; color:var(--gris2); letter-spacing:1px; }
.seguro span { border:1px solid var(--borde); padding:4px 10px; border-radius:12px; }

/* ---------- barra sticky móvil producto ---------- */
.buybar { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(10,10,11,.96); backdrop-filter:blur(10px); border-top:1px solid var(--borde); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); z-index:70; align-items:center; gap:12px; }
.buybar .p { font-family:'Space Mono',monospace; font-weight:700; color:var(--azul); font-size:16px; flex:1; }
.buybar .btn { padding:12px 20px; font-size:12px; }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--borde); padding:var(--s5) 0 var(--s4); background:var(--carbon2); }
.foot { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s4); }
.foot .flogo { font-family:'Space Mono',monospace; font-weight:700; font-size:18px; letter-spacing:3px; }
.foot .flogo sup { color:var(--azul); font-size:9px; }
.foot .man { font-size:12px; color:var(--gris2); margin-top:10px; max-width:300px; }
.foot h4 { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--gris); margin-bottom:10px; }
.foot ul { list-style:none; font-size:13px; color:var(--gris); }
.foot li { margin:7px 0; }
.foot a:hover { color:var(--azul); }
.foot-base { border-top:1px solid var(--borde); margin-top:var(--s4); padding-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'Space Mono',monospace; font-size:9px; color:var(--gris2); letter-spacing:1px; }

/* ---------- whatsapp flotante ---------- */
.wa { position:fixed; bottom:22px; right:22px; background:#25D366; color:#fff; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 6px 18px rgba(0,0,0,.45); z-index:60; transition:transform var(--t); }
.wa:hover { transform:scale(1.08); }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .pd { grid-template-columns:1fr; gap:var(--s4); padding-bottom:110px; }
  /* en móvil no sobra ancho al lado: las miniaturas vuelven abajo, en tira.
     min-width:0 es obligatorio en los dos: un hijo flex NO se encoge por debajo
     de su contenido a menos que se le diga, así que con diez miniaturas la tira
     medía 632 px dentro de una columna de 343 y reventaba la ficha entera a lo
     ancho — el overflow-x:auto no llegaba a actuar nunca. */
  .pd .gal { position:static; padding-left:0; display:flex; flex-direction:column; gap:10px; min-width:0; }
  .pd .im { max-height:none; min-width:0; }
  .gal-tira { position:static; width:auto; min-width:0; flex-direction:row;
    overflow-x:auto; overflow-y:hidden; }
  .gal-min { flex-basis:56px; width:56px; }
  .steps, .cert-sec, .foot { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .buybar { display:flex; }
  .hero { padding:var(--s6) 0 var(--s5); }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after { animation:none!important; transition:none!important; } }

/* relacionados: máximo 3 en fila */
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid-3{grid-template-columns:1fr}}


/* ================= filtros del catálogo v6 ================= */
.fbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.busca{flex:3 1 240px;min-width:180px;background:#16171A;border:1px solid #232529;border-radius:6px;
  color:#F2EFE7;padding:13px 15px;font-family:'Inter',sans-serif;font-size:14px;transition:border-color .2s}
.busca:focus{outline:none;border-color:#14A2D9}
.busca::placeholder{color:#5E6167}
.frow{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.flabel{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;color:#5E6167;flex:0 0 auto}
.chips{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;flex:1 1 auto}

/* ---- botones de casa: el logo real de cada marca ---- */
.casa-btn{position:relative;flex:1 1 0;min-width:92px;height:80px;border:1px solid var(--borde);
  border-radius:var(--r1);background:#101114;cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:10px 10px 14px;transition:border-color var(--t),background var(--t),transform var(--t)}
.casa-btn:hover{border-color:#3A3D44;background:#15161A;transform:translateY(-1px)}
/* La caja crece con el recuadro en vez de quedarse en 86px. Un logotipo muy
   apaisado como el de Clemont (4:1) se dibujaba a 18px de alto y se leía
   como una mancha; los altos siguen topados por la altura. */
.casa-btn-logo{display:flex;align-items:center;justify-content:center;width:100%;max-width:132px;height:48px}
.casa-btn-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.casa-btn .lc{display:none}
.casa-btn i{position:absolute;right:8px;bottom:5px;font-style:normal;font-family:'Space Mono',monospace;
  font-size:9px;letter-spacing:.5px;color:#5E6167}
.casa-btn .lm{opacity:.82;transition:opacity var(--t)}
.casa-btn:hover .lm{opacity:1}
.casa-btn.active{background:var(--cbg);border-color:var(--cbg);transform:none;
  box-shadow:0 0 0 2px var(--negro),0 0 0 3px var(--azul)}
.casa-btn.active .lm{display:none}
.casa-btn.active .lc{display:block}
.casa-btn.active i{color:var(--ctx);opacity:.6}
.casa-btn.off{opacity:.42;pointer-events:none;border-style:dashed}
.casa-btn.off i{color:#C44848}
.casa-btn-todas{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:2px;
  color:var(--gris);line-height:1.5;text-align:center}
.casa-btn-todas small{font-size:8px;letter-spacing:1.5px;color:#4A4D53;font-weight:400}
.casa-btn-todas.active{background:var(--azul);border-color:var(--azul);color:var(--negro);box-shadow:none}
.casa-btn-todas.active small{color:rgba(10,10,11,.6)}
.casa-btn-todas.active i{color:rgba(10,10,11,.6)}

.fresumen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;
  padding-top:14px;border-top:1px solid #1B1D21}
.conteo{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:#8A8D93;white-space:nowrap}
.activos{display:flex;flex-wrap:wrap;gap:7px}
.pill{background:rgba(20,162,217,.1);border:1px solid rgba(20,162,217,.3);color:#14A2D9;border-radius:3px;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;padding:6px 10px;cursor:pointer;
  transition:all .18s}
.pill:hover{background:rgba(20,162,217,.2)}
.pill.limpiar{background:transparent;border-color:#232529;color:#8A8D93}
.pill.limpiar:hover{border-color:#8A8D93;color:#F2EFE7}

@media (max-width:760px){
  .fbar{gap:8px}
  .busca{flex:1 1 100%}
  .dd{flex:1 1 calc(50% - 4px)}
  /* las casas en una sola fila deslizable, no un muro de 3 filas */
  .frow{flex-direction:column;align-items:stretch;gap:7px}
  .flabel{margin-left:2px}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .casa-btn{flex:0 0 100px;min-width:100px;height:68px;padding:8px 8px 13px}
  .casa-btn-logo{max-width:104px;height:38px}
}


/* ================= menú desplegable propio ================= */
.dd{position:relative;flex:1 1 150px;min-width:0}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#16171A;border:1px solid #232529;border-radius:6px;color:#F2EFE7;
  padding:13px 14px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.6px;
  cursor:pointer;transition:border-color .18s,background .18s;text-align:left}
.dd-btn:hover{border-color:#3A3E46}
.dd-btn:focus-visible{outline:none;border-color:#14A2D9}
.dd.open .dd-btn{border-color:#14A2D9;background:#101114}
.dd-ico{flex:0 0 auto;width:16px;height:16px;color:#8A8D93;transition:color .18s}
.dd-btn:hover .dd-ico,.dd.open .dd-ico{color:#14A2D9}
.dd-txt{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-txt.puesto{color:#14A2D9}
.dd-flecha{flex:0 0 auto;width:8px;height:8px;border-right:1.5px solid #8A8D93;border-bottom:1.5px solid #8A8D93;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.dd.open .dd-flecha{border-color:#14A2D9;transform:rotate(-135deg) translate(-3px,-3px)}

.dd-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  background:#101114;border:1px solid #232529;border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.65);
  max-height:322px;overflow-y:auto;padding:5px;
  display:none;scrollbar-width:thin;scrollbar-color:#2C3037 transparent}
.dd.open .dd-panel{display:block;animation:ddIn .14s ease-out}
@keyframes ddIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.dd-panel::-webkit-scrollbar{width:7px}
.dd-panel::-webkit-scrollbar-thumb{background:#2C3037;border-radius:4px}
.dd-opt{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;border-left:2px solid transparent;color:#C9CBCF;
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.5px;
  padding:10px 11px;cursor:pointer;text-align:left;transition:background .13s,color .13s}
.dd-opt:hover{background:#16181C;color:#F2EFE7}
.dd-opt i{font-style:normal;font-size:10px;color:#5E6167;flex:0 0 auto}
.dd-opt.sel{color:#14A2D9;border-left-color:#14A2D9;background:rgba(20,162,217,.07)}
.dd-opt.sel i{color:#14A2D9}
.dd-opt.off{opacity:1;cursor:not-allowed;color:#5A5D63}
.dd-opt.off span{text-decoration:line-through;text-decoration-color:rgba(196,72,72,.85);text-decoration-thickness:1px}
.dd-opt.off i{color:#C44848;opacity:.85}
.dd-opt.off:hover{background:none;color:#5A5D63}
@media (prefers-reduced-motion:reduce){.dd.open .dd-panel{animation:none}}

/* ---- relacionados con papel ---- */
.rel-item{display:flex;flex-direction:column;gap:9px}
.rel-rol{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:2.4px;color:#5E6167}
.rel-item .card{margin:0}


/* ================= sección: las siete casas ================= */
.casas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:var(--s3) 0 var(--s6)}
.casas .casa{flex:0 1 calc((100% - 42px)/4)}
.casas .casa{display:flex;flex-direction:column;background:var(--carbon2);border:1px solid var(--borde);
  border-radius:var(--r2);overflow:hidden;transition:border-color var(--t),transform var(--t)}
.casas .casa:hover{border-color:var(--azul);transform:translateY(-3px)}
.casa-marca{display:flex;align-items:center;justify-content:center;height:104px;padding:20px 26px}
.casa-marca img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.casas .casa h3{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--hueso);margin:18px 20px 6px}
.casas .casa p{font-size:13px;color:var(--gris);line-height:1.6;margin:0 20px 16px;flex:1}
.casa-ver{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.8px;color:var(--gris2);
  margin:0 20px 18px;transition:color var(--t)}
.casas .casa:hover .casa-ver{color:var(--azul)}
@media (max-width:1000px){.casas .casa{flex:0 1 calc((100% - 28px)/3)}}
@media (max-width:720px){.casas{gap:10px}
  .casas .casa{flex:0 1 calc((100% - 10px)/2)}
  .casa-marca{height:80px;padding:14px 18px}
  .casas .casa h3{margin:14px 14px 5px;font-size:12px}
  .casas .casa p{margin:0 14px 12px;font-size:12px}
  .casa-ver{margin:0 14px 14px}}


/* ================= ver más ================= */
.vermas-caja{grid-column:1/-1;display:flex;justify-content:center;padding:var(--s4) 0 var(--s2);
  position:relative}
.vermas-caja::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--borde)}
.vermas{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--negro);
  border:1px solid var(--borde);border-radius:var(--r1);padding:14px 26px;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--hueso);transition:all var(--t)}
.vermas:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-1px)}
.vermas i{font-style:normal;font-weight:400;font-size:10px;letter-spacing:1px;color:var(--gris2)}
.vermas:hover i{color:var(--azul);opacity:.7}
@media (max-width:520px){.vermas{width:100%;justify-content:center;padding:14px 16px;font-size:11px}}


/* ================= foto del hero (opcional: si no existe, el hero queda como antes) ================= */
.hero-foto{position:absolute;inset:0;z-index:0;display:block}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  opacity:.58;filter:grayscale(1) contrast(1.26) brightness(.9)}
.hero-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,.42) 38%,rgba(10,10,11,.9) 88%,var(--negro) 100%)}
.hero:has(.hero-foto){padding:var(--s7) 0 var(--s6);min-height:min(78vh,720px);display:flex;align-items:center}
@media (max-width:720px){
  .hero-foto img{object-position:center 30%;opacity:.52}
  .hero:has(.hero-foto){min-height:82vh}
}


/* ---- la pagina va a ancho completo, pero el detalle de producto no ---- */
#relacionados{max-width:1400px;margin:0 auto}

/* ---- lectura comoda: los bloques de texto no se estiran ---- */
.sec-sub{max-width:1000px}
.faq{max-width:1100px}
.garantia p{max-width:1100px}

/* ---- pie ordenado: 4 columnas que ocupan todo el ancho ---- */
.foot{display:grid;grid-template-columns:minmax(230px,1.4fr) repeat(3,minmax(140px,1fr));
  gap:var(--s4) clamp(20px,4vw,70px);align-items:start}
.foot-marca .man{max-width:330px}
.foot .pronto{color:#5E6167}
@media (max-width:1000px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}

/* ---- preguntas frecuentes a dos columnas en pantalla ancha ---- */
@media (min-width:1000px){
  .faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
  .faq details{margin-bottom:0}
}

/* la línea final del pie no debe quedar debajo del botón flotante */
.foot-base{padding-right:72px}
@media (max-width:560px){.foot-base{padding-right:0}.foot-base span:last-child{display:none}}

/* ================= ruleta de bienvenida ================= */
.rul{position:fixed;inset:0;z-index:200;background:rgba(6,6,7,.86);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .22s}
.rul.ver{opacity:1}
.rul-caja{position:relative;width:100%;max-width:440px;max-height:92vh;overflow-y:auto;
  background:var(--carbon2);border:1px solid var(--borde);border-radius:var(--r3);
  padding:30px 28px 26px;text-align:center;transform:translateY(12px);transition:transform .25s}
.rul.ver .rul-caja{transform:none}
.rul-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--gris2);
  font-size:16px;cursor:pointer;line-height:1;padding:6px}
.rul-x:hover{color:var(--hueso)}
.rul-kicker{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--azul)}
.rul-caja h3{font-family:'Space Mono',monospace;font-size:19px;line-height:1.3;margin:10px 0 6px}
.rul-sub{font-size:13px;color:var(--gris);margin-bottom:16px}
.rul-rueda{position:relative;width:min(320px,78vw);margin:0 auto 18px}
.rul-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.rul-aguja{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:2;
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:20px solid var(--hueso);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.rul-cond{display:block;margin:12px auto 0;background:none;border:0;color:var(--gris2);
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;cursor:pointer;text-decoration:underline}
.rul-cond:hover{color:var(--azul)}
.rul-legal{margin-top:14px;text-align:left;border-top:1px solid var(--borde);padding-top:14px}
.rul-legal ul{list-style:none;margin-bottom:10px}
.rul-legal li{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--hueso);
  padding:5px 0;border-bottom:1px dashed var(--borde);display:flex;gap:8px;align-items:baseline}
.rul-legal li b{color:var(--azul);min-width:34px}
.rul-legal li span{color:var(--gris2);font-size:9.5px;margin-left:auto;text-align:right}
.rul-legal li em{color:var(--gris2);font-style:normal;font-size:9.5px;letter-spacing:0}
.rul-cond2{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.5px;color:var(--azul);margin:-4px 0 12px}
.rul-legal p{font-size:11px;color:var(--gris2);line-height:1.6}
#rul-form{text-align:left;margin-top:6px}
#rul-form label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.6px;
  color:var(--gris);margin:12px 0 6px}
#rul-form label span{color:var(--gris2);letter-spacing:.5px;text-transform:none}
#rul-form input{width:100%;background:#16171A;border:1px solid var(--borde);border-radius:var(--r1);
  color:var(--hueso);padding:13px 14px;font-family:'Inter',sans-serif;font-size:14px}
#rul-form input:focus{outline:none;border-color:var(--azul)}
#rul-form .btn{margin-top:18px}
.rul-error{color:#C44848;font-size:12px;margin-top:8px}
.rul-codigo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 10px;
  border:1px dashed var(--azul);border-radius:var(--r1);padding:14px 16px;background:rgba(20,162,217,.07)}
.rul-codigo span{font-family:'Space Mono',monospace;font-size:19px;font-weight:700;color:var(--azul);letter-spacing:1px}
.rul-codigo button{background:none;border:0;color:var(--gris);font-family:'Space Mono',monospace;
  font-size:10px;letter-spacing:1px;cursor:pointer}
.rul-codigo button:hover{color:var(--hueso)}
@media (max-width:520px){.rul-caja{padding:26px 18px 22px}.rul-caja h3{font-size:17px}}

.rul-legal p a{color:var(--azul);text-decoration:underline}

/* ---------- búsqueda instantánea ---------- */
.nav-acciones{display:flex;align-items:center;gap:10px}
.buscar-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--borde);border-radius:var(--r1);background:transparent;color:var(--hueso);
  cursor:pointer;transition:border-color var(--t),color var(--t)}
.buscar-btn:hover{border-color:var(--azul);color:var(--azul);background:rgba(20,162,217,.08)}
.buscar-btn:active{transform:scale(.94)}
.buscar-btn svg{width:19px;height:19px;display:block}

.bx{position:fixed;inset:0;z-index:120;background:rgba(6,6,7,.78);backdrop-filter:blur(6px);
  display:flex;justify-content:center;align-items:flex-start;padding:clamp(14px,7vh,90px) 16px 24px;
  opacity:0;transition:opacity .18s ease}
/* sin esto el panel cerrado sigue tapando la pagina entera: display gana sobre [hidden] */
.bx[hidden]{display:none}
.bx.ver{opacity:1}
.bx-panel{width:100%;max-width:660px;background:var(--carbon);border:1px solid var(--borde);
  border-radius:var(--r3);overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:translateY(-8px);transition:transform .18s ease}
.bx.ver .bx-panel{transform:none}

.bx-campo{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--borde)}
.bx-campo:focus-within{border-bottom-color:var(--azul)}
.bx-campo input:focus-visible{outline:none}
.bx-pie[hidden]{display:none}
.bx-campo svg{width:18px;height:18px;color:var(--gris2);flex:none}
.bx-campo input{flex:1;background:none;border:0;outline:none;color:var(--hueso);
  font-family:'Inter',sans-serif;font-size:16px;font-weight:300}
.bx-campo input::placeholder{color:var(--gris2)}
.bx-campo kbd{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;color:var(--gris2);
  border:1px solid var(--borde);border-radius:4px;padding:3px 6px;flex:none}

.bx-res{max-height:min(58vh,470px);overflow-y:auto}
.bx-hint{padding:26px 20px}
.bx-hint p{font-size:13.5px;color:var(--gris2);line-height:1.7}
.bx-hint b{color:var(--gris);font-family:'Space Mono',monospace;font-size:12px}

.bx-item{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  padding:10px 18px;border-bottom:1px solid rgba(35,37,41,.6);transition:background var(--t)}
.bx-item:hover,.bx-item.on{background:var(--carbon2)}
.bx-im{width:52px;height:52px;border-radius:var(--r1);overflow:hidden;background:var(--carbon2)}
.bx-im img{width:100%;height:100%;object-fit:cover}
.bx-tx{min-width:0;display:grid;gap:2px}
.bx-tx b{font-size:13.5px;font-weight:500;color:var(--hueso);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-tx i{font-style:normal;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1px;color:var(--gris2)}
.bx-pr{text-align:right;display:grid;gap:1px;font-variant-numeric:tabular-nums}
.bx-pr s{font-size:10.5px;color:var(--gris2)}
.bx-pr b{font-family:'Space Mono',monospace;font-size:13px;color:var(--azul)}

.bx-todos{display:block;padding:14px 18px;text-align:center;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:1.2px;color:var(--azul);background:var(--carbon2);
  border-top:1px solid var(--borde)}
.bx-todos:hover{color:var(--azul-h)}

@media (max-width:640px){
  .bx{padding:0}
  .bx-panel{max-width:none;height:100%;border:0;border-radius:0;
    display:flex;flex-direction:column}
  .bx-campo{flex:none}
  .bx-res{max-height:none;flex:1;min-height:0}
  .bx-pie{flex:none}
  .bx-pr s{display:none}
}
@media (prefers-reduced-motion:reduce){ .bx,.bx-panel{transition:none} }

/* ---------- catálogo en móvil: tres por fila ----------
   Tarjeta de ~118px: la foto ya se aprecia y el texto vuelve a leerse.
   Recupero la casa; el precio tachado se queda fuera porque el sello
   de descuento ya dice lo mismo y a este ancho apretaba la línea. */
@media (max-width:760px){
  .grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .card{ border-radius:8px; }
  .card .pad{ padding:8px 8px 10px; }
  .card .marca{ font-size:8.5px; letter-spacing:.6px; margin-top:0; }
  .card .nm{ font-size:11px; line-height:1.28; font-weight:500; margin:2px 0 5px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:2.56em; }
  /* El precio de tienda tachado NO se esconde: es la propuesta de valor entera,
     y en móvil —donde entra la mayoría— era justo lo que desaparecía. A tres
     columnas no cabe al lado del precio, así que va encima en línea aparte. */
  .card .precio s{ display:block; font-size:9.5px; line-height:1.25; }
  .card .precio b{ font-size:12.5px; margin-left:0; }
  .card .off{ top:5px; right:5px; font-size:8px; padding:1px 4px; border-radius:3px; }
  .card:hover{ transform:none; box-shadow:none; }
}
@media (max-width:360px){
  .grid{ gap:6px; }
  .card .nm{ font-size:10.5px; }
  .card .precio b{ font-size:11.5px; }
}

/* ================= páginas de casa ================= */
.miga{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.4px;
  color:var(--gris2); padding-top:18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.miga a{ color:var(--gris); text-decoration:none; }
.miga a:hover{ color:var(--azul); }

.casa-hero{ padding:34px 0 12px; }
/* Fondo de categoría. La imagen y el velo van en UNA sola capa del ::before,
   compuestos por el navegador: así no hacen falta z-index negativos, que
   dentro de un contexto de apilamiento se van detrás del fondo del body y la
   imagen desaparece. Al hijo le basta position:relative para quedar encima.
   El velo es fuerte a propósito —.70 arriba, .90 en medio, negro abajo—:
   encima va texto casi blanco y la legibilidad manda sobre la foto. Abajo
   cierra en negro puro para que enganche con la retícula sin un corte. */
.casa-hero.con-fondo{ position:relative; padding:64px 0 26px; overflow:hidden; }
.casa-hero.con-fondo::before{
  content:""; position:absolute; inset:0;
  /* Dos capas, y la radial es la que importa: el texto de esta plantilla va
     CENTRADO, así que el centro tiene que estar oscuro pase lo que pase con la
     composición de cada una de las 18 imágenes. Medido sobre la primera: con
     velo lineal solo, el párrafo caía a 2,79 de contraste donde cruzaba una
     zona clara —el mínimo AA es 4,5—. Con la radial el centro queda por debajo
     de 36 de luminancia y pasa incluso contra un píxel quemado, mientras los
     bordes siguen dejando ver la foto. */
  background:
    radial-gradient(ellipse 62% 75% at 50% 46%,
      rgba(10,10,11,.92) 0%, rgba(10,10,11,.58) 55%, rgba(10,10,11,.20) 100%),
    linear-gradient(180deg, rgba(10,10,11,.26) 0%, rgba(10,10,11,.48) 62%, var(--negro) 100%),
    var(--fondo) center/cover no-repeat;
}
.casa-hero.con-fondo > .wrap{ position:relative; }
@media (max-width:760px){ .casa-hero.con-fondo{ padding:40px 0 20px; } }
.casa-hero .wrap{ display:grid; justify-items:center; text-align:center; gap:16px; }
.casa-logo{ width:104px; height:104px; border-radius:16px; display:grid; place-items:center;
  border:1px solid var(--borde); overflow:hidden; }
.casa-logo img{ width:72%; height:72%; object-fit:contain; }
.casa-hero h1{ font-size:clamp(30px,6vw,52px); font-weight:300; letter-spacing:-.5px;
  color:var(--hueso); margin:0; }
.casa-lema{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px;
  color:var(--azul); margin:0; text-transform:uppercase; }
.casa-historia{ max-width:64ch; color:var(--gris); line-height:1.85; font-size:15.5px; margin:0; }

.casa-datos{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:8px; }
.casa-datos div{ border:1px solid var(--borde); border-radius:10px; padding:14px 22px;
  display:grid; gap:4px; min-width:130px; background:var(--carbon2); }
.casa-datos b{ font-family:'Space Mono',monospace; font-size:21px; color:var(--hueso);
  font-variant-numeric:tabular-nums; }
.casa-datos span{ font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:1.6px;
  color:var(--gris2); }

.casa-cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.cat-chip{ font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:1.2px;
  color:var(--gris); border:1px solid var(--borde); border-radius:999px; padding:5px 12px; }

/* ========== CAJÓN DE CATEGORÍAS ==========
   Botón en la barra + panel que entra desde la izquierda. El segundo panel
   (las casas de una categoría) se llena desde /categorias.json la primera vez
   que se abre; los 18 enlaces del primero van horneados en el HTML porque son
   enlaces internos de verdad y es lo que les da peso. */
.cat-btn{ display:flex; align-items:center; gap:8px; background:var(--carbon);
  border:1px solid var(--borde); border-radius:var(--r2); color:var(--hueso);
  padding:8px 13px; cursor:pointer; font-family:'Space Mono',monospace;
  font-size:10.5px; letter-spacing:1.6px; font-weight:700; margin-right:14px;
  transition:border-color var(--t), color var(--t); }
.cat-btn:hover{ border-color:var(--azul); color:var(--azul); }
.cat-btn svg{ width:14px; height:14px; flex-shrink:0; }
/* en móvil el texto sobra: el icono ya se entiende y la barra va apretada */
@media (max-width:560px){ .cat-btn span{ display:none; } .cat-btn{ padding:8px; margin-right:10px; } }

.cat-velo{ position:fixed; inset:0; background:rgba(10,10,11,.72); z-index:60;
  opacity:0; transition:opacity var(--t); }
.cat-velo.abierto{ opacity:1; }

.cat-cajon{ position:fixed; left:0; top:0; bottom:0; z-index:61; display:flex;
  transform:translateX(-100%); transition:transform var(--t);
  max-width:100%; }
.cat-cajon.abierto{ transform:translateX(0); }

.cat-panel{ width:340px; max-width:86vw; background:var(--carbon2);
  border-right:1px solid var(--borde); display:flex; flex-direction:column;
  box-shadow:24px 0 60px rgba(0,0,0,.6); }
.cat-p2{ background:var(--carbon); }
/* `display:flex` de .cat-panel le gana al `[hidden]{display:none}` del navegador
   —misma especificidad, y esta hoja va después—, así que el segundo panel se
   veía vacío al abrir el cajón en vez de estar oculto. Hay que decirlo aquí.
   Lo mismo para el cajón y el velo, que también traen display propio. */
.cat-panel[hidden]{ display:none; }
.cat-cajon[hidden]{ display:none; }
.cat-velo[hidden]{ display:none; }

.cat-cab{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:18px 22px 14px; border-bottom:1px solid var(--borde);
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:2.2px;
  color:var(--gris); flex-shrink:0; }
.cat-x, .cat-atras{ background:none; border:none; color:var(--gris);
  cursor:pointer; padding:2px; display:flex; align-items:center; gap:8px;
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:2.2px; }
.cat-atras{ color:var(--azul); }
.cat-x svg, .cat-atras svg{ width:15px; height:15px; }

/* overflow-y auto + min-height:0: un hijo flex no se encoge por debajo de su
   contenido salvo que se le diga, y con 18 filas la lista desbordaría el panel
   en vez de hacer su propio scroll. Es el mismo mordisco de la tira de fotos. */
.cat-lista{ flex-grow:1; min-height:0; overflow-y:auto; padding:6px 0 20px; }

.cat-fila{ display:flex; align-items:center; gap:12px; padding:10px 22px;
  border-left:2px solid transparent; color:var(--gris); transition:all var(--t); }
.cat-fila:hover, .cat-fila:focus-visible{ background:var(--carbon);
  border-left-color:var(--azul); color:var(--hueso); }
.cat-p2 .cat-fila:hover{ background:var(--carbon2); }
.cat-fila.act{ background:var(--carbon); border-left-color:var(--azul); color:var(--hueso); }
.cat-nm{ flex-grow:1; font-size:14px; }
.cat-n{ font-family:'Space Mono',monospace; font-size:11px; color:var(--gris2); }
.cat-fila svg{ width:12px; height:12px; color:var(--gris2); flex-shrink:0; }
.cat-fila .cat-todas{ color:var(--hueso); font-weight:600; }

/* El segundo panel sale al lado en escritorio y ENCIMA en móvil: 340+340 no
   cabe en un teléfono, y dos paneles medio visibles no se leen. */
@media (max-width:760px){
  .cat-p2{ position:absolute; inset:0; width:100%; max-width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .cat-cajon, .cat-velo{ transition:none; }
}

.casa-senas{ padding:34px 0; }
.casa-senas .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sena{ border-top:1px solid var(--azul); padding-top:16px; }
.sena h3{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:2px;
  color:var(--azul); margin:0 0 8px; }
.sena p{ color:var(--gris); line-height:1.8; font-size:14px; margin:0; }

.casa-cat{ padding:14px 0 40px; }
.casa-mas{ display:grid; justify-items:center; margin-top:26px; }

.casa-otras{ padding:34px 0 56px; border-top:1px solid var(--borde); }
.otras-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.otra{ border:1px solid var(--borde); border-radius:11px; padding:16px 18px; text-decoration:none;
  display:grid; gap:5px; background:var(--carbon2); transition:border-color .18s ease; }
.otra:hover{ border-color:var(--azul); }
.otra b{ font-size:15px; color:var(--hueso); font-weight:500; }
.otra span{ font-size:12.5px; color:var(--gris2); line-height:1.6; }

@media (max-width:820px){
  .casa-senas .wrap{ grid-template-columns:1fr; gap:22px; }
  .otras-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .casa-logo{ width:84px; height:84px; }
  .casa-datos div{ padding:11px 16px; min-width:104px; }
  .casa-datos b{ font-size:18px; }
  .otras-grid{ grid-template-columns:1fr; }
}
.casa-datos .rango b{ font-size:15px; letter-spacing:-.2px; }
.casa-datos .rango{ min-width:190px; }
@media (max-width:520px){ .casa-datos .rango b{ font-size:13px; } }

/* pieza sin existencia en la casa */
.agotada{ border:1px solid var(--borde); border-left:2px solid #C44848; border-radius:9px;
  padding:14px 16px; margin:6px 0 14px; display:grid; gap:6px; background:var(--carbon2); }
.agotada b{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; color:#C44848; }
.agotada span{ font-size:13.5px; color:var(--gris); line-height:1.7; }

/* Hover de casas: elevación breve y acento que entra desde la izquierda. */
@media(hover:hover) and (pointer:fine){
  #f-casa .casa-btn{isolation:isolate;transition:transform 240ms cubic-bezier(.22,1,.36,1),border-color 240ms ease,background-color 240ms ease}
  #f-casa .casa-btn::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform 240ms cubic-bezier(.22,1,.36,1);pointer-events:none}
  #f-casa .casa-btn-logo,#f-casa .casa-txt{transition:transform 260ms cubic-bezier(.22,1,.36,1);transform:translateY(0)}
  #f-casa .casa-btn:hover:not(.off){transform:translateY(-3px);border-color:#467080;background:#122027}
  #f-casa .casa-btn:hover:not(.off)::after{transform:scaleX(1)}
  #f-casa .casa-btn:hover:not(.off) .casa-btn-logo,#f-casa .casa-btn:hover:not(.off) .casa-txt{transform:translateY(-2px) scale(1.045)}
  #f-casa .casa-btn:active:not(.off){transform:translateY(-1px) scale(.98)}
}
@media(prefers-reduced-motion:reduce){
  #f-casa .casa-btn,#f-casa .casa-btn::after,#f-casa .casa-btn-logo,#f-casa .casa-txt{transition:none}
  #f-casa .casa-btn:hover:not(.off),#f-casa .casa-btn:hover:not(.off) .casa-btn-logo,#f-casa .casa-btn:hover:not(.off) .casa-txt,#f-casa .casa-btn:active:not(.off){transform:none}
}