/* =========================================================================
   MULTIMETALES LA HERRADURA — sistema visual
   Paleta: blanco / negro / naranja.  Sin sombras, sin desenfoques,
   sin modos de fusion. El relieve se construye con bordes, trazos,
   degradados de fondo y transformaciones 3D.

   Los textos NO usan relleno de degradado (background-clip:text): en varios
   navegadores esa tecnica pinta la caja entera y deja un recuadro oscuro
   detras del titulo. En su lugar el movimiento tipografico es tematico:
   el hierro de marcar que se enfria, el balanceo del rotulo y el lazo.
   ========================================================================= */

:root{
  --blanco:#ffffff;
  --hueso:#f6f3ef;
  --arena:#ece6df;
  --tinta:#14110f;
  --carbon:#241f1b;
  --humo:#6d635b;
  --linea:#ddd4c9;
  --fuego:#ff5a00;
  --brasa:#ff8a1f;
  --ascua:#c93c00;

  --w:1180px;
  --r:12px;
  --borde:2px solid var(--tinta);

  --display:"Oswald","Arial Narrow",sans-serif;
  --slab:"Roboto Slab",Georgia,serif;
  --texto:"Inter","Segoe UI",system-ui,sans-serif;

  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blanco);color:var(--tinta);
  font-family:var(--texto);font-size:16px;line-height:1.6;
  overflow-x:hidden;
}
body.bloqueado{overflow:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--fuego);outline-offset:3px}

.contenedor{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:18px}
.oculto{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 1. TIPOGRAFIA VIVA ------------------------------------------ */

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:.98;
  letter-spacing:.005em;margin:0;text-transform:uppercase;color:var(--tinta)}

.titulo-xxl{font-size:clamp(2.5rem,10.5vw,5.6rem)}
.titulo-xl{font-size:clamp(1.9rem,7.2vw,3.6rem)}
.titulo-l{font-size:clamp(1.4rem,5.2vw,2.3rem)}
.kicker{font-family:var(--slab);font-size:.72rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--fuego);
  margin:0 0 14px;display:flex;align-items:center;gap:10px}

/* Reveal por letra / palabra (los inserta anim.js) */
.linea{display:inline-block;white-space:nowrap}
.linea-oculta{overflow:hidden;padding-bottom:.08em}
.pieza{display:inline-block;will-change:transform,opacity}
.espacio{display:inline-block;width:.28em}

/* --- HIERRO DE MARCAR ----------------------------------------------------
   Una ola de calor recorre el titulo letra por letra, como el fierro que
   sale de la fragua y se va enfriando. Corre sola en bucle y se acelera al
   pasar el puntero. Sustituye al antiguo relleno de degradado.           */
.lumbre{display:inline-block;font-style:normal}
.hierro .lumbre{animation:marcado 7s ease-in-out infinite}
@keyframes marcado{
  0%,68%,100%{color:var(--tinta);transform:translateY(0) scale(1)}
  72%{color:var(--brasa);transform:translateY(-3px) scale(1.06)}
  78%{color:var(--fuego);transform:translateY(-1px) scale(1.03)}
  86%{color:var(--ascua);transform:translateY(0) scale(1)}
}
.hierro:hover .lumbre{animation-duration:2.2s}

/* Version para fondo oscuro (portada) */
.hierro-claro,.hierro-claro .lumbre{color:var(--blanco)}
.hierro-claro .lumbre{animation:marcado-claro 7s ease-in-out infinite}
@keyframes marcado-claro{
  0%,68%,100%{color:var(--blanco);transform:translateY(0) scale(1)}
  72%{color:var(--brasa);transform:translateY(-3px) scale(1.06)}
  78%{color:var(--fuego);transform:translateY(-1px) scale(1.03)}
  86%{color:#ffd9bd;transform:translateY(0) scale(1)}
}
.hierro-claro:hover .lumbre{animation-duration:2.2s}

/* --- ROTULO DE CANTINA: el kicker se balancea colgado de su gancho ------ */
.balanceo{display:inline-block;transform-origin:50% 0;
  animation:colgado 5.2s ease-in-out infinite}
@keyframes colgado{
  0%,100%{transform:rotate(-1.6deg)}
  50%{transform:rotate(1.6deg)}
}
.balanceo:hover{animation-duration:1.4s}

/* Herradura que gira despacio junto al kicker */
.herradura{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;animation:vaiven 6s ease-in-out infinite}
@keyframes vaiven{
  0%,100%{transform:rotate(-14deg)}
  50%{transform:rotate(14deg)}
}
.kicker:hover .herradura{animation-duration:1.5s}

/* Texto que late solo y ademas reacciona al puntero */
.vivo{display:inline-block;animation:latido 3.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes latido{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.02)}}
.vivo:hover{animation-duration:.9s}

.parrafo{font-size:1.02rem;color:var(--carbon);max-width:62ch}
.parrafo strong{color:var(--tinta)}

/* Sustituto del logotipo cuando falta el archivo de imagen */
.logo-alt{display:block;flex:none;animation:pulso-marca 5s ease-in-out infinite}
.nav-marca .logo-alt{width:40px;height:40px}
.portada-in .logo-alt{width:96px;height:96px;margin:0 auto 18px}

/* ---------- 2. FONDOS Y TRAZOS ------------------------------------------ */

#forja{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.capa-trama{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,var(--linea) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(0deg,var(--linea) 0 1px,transparent 1px 68px);
  animation:deriva 26s linear infinite;
}
@keyframes deriva{from{background-position:0 0,0 0}to{background-position:68px 0,0 68px}}

/* Alambre de puas que se dibuja solo */
.alambre{display:block;width:100%;height:34px;overflow:visible}
.alambre path,.alambre line{stroke:var(--tinta);fill:none;stroke-width:2.4;stroke-linecap:round}
.alambre .puas{stroke:var(--fuego);stroke-width:3.2}
.alambre .hilo{
  stroke-dasharray:var(--largo,1400);stroke-dashoffset:var(--largo,1400);
  animation:tejer 3.4s ease-in-out forwards, ondear 6s ease-in-out 3.4s infinite;
}
@keyframes tejer{to{stroke-dashoffset:0}}
@keyframes ondear{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Lazo de vaquero: la reata se dibuja sola y el nudo gira */
.lazo{display:block;width:100%;height:74px;overflow:visible}
.lazo path{fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linecap:round}
.lazo .reata{
  stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:tejer 4.2s ease-in-out infinite alternate;
}
.lazo .nudo{stroke:var(--fuego);transform-box:fill-box;transform-origin:50% 50%;
  animation:girar 9s linear infinite}
.lazo:hover .nudo{animation-duration:2.4s}

/* Onda sinusoidal que se propaga */
.onda{display:block;width:100%;height:56px}
.onda path{fill:none;stroke:var(--fuego);stroke-width:2.5;stroke-linecap:round;
  animation:propagar 5s linear infinite}
.onda path:nth-child(2){stroke:var(--tinta);opacity:.35;animation-duration:7s;animation-direction:reverse}
@keyframes propagar{from{transform:translateX(0)}to{transform:translateX(-240px)}}

/* ---------- 3. BOTONES --------------------------------------------------- */

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:15px 28px;border:var(--borde);background:var(--blanco);
  color:var(--tinta);font-family:var(--display);font-size:1rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;overflow:hidden;border-radius:10px;
  transition:color .3s ease,border-color .3s ease,transform .25s ease;
}
.btn::before{
  content:"";position:absolute;inset:-2px;z-index:0;
  background:linear-gradient(115deg,var(--ascua),var(--fuego),var(--brasa),var(--fuego),var(--ascua));
  background-size:300% 100%;animation:colada 5s linear infinite;
  transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes colada{from{background-position:300% 0}to{background-position:0 0}}
.btn > *{position:relative;z-index:1}
.btn:hover,.btn:focus-visible{color:var(--blanco);border-color:var(--fuego)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}

.btn-fuego{background:var(--fuego);border-color:var(--fuego);color:var(--blanco)}
.btn-fuego::before{background:linear-gradient(115deg,var(--tinta),var(--carbon),var(--tinta))}
.btn-fuego:hover,.btn-fuego:focus-visible{color:var(--blanco);border-color:var(--tinta)}

.btn-wa{background:#1faa54;border-color:#1faa54;color:#fff}
.btn-wa::before{background:linear-gradient(115deg,#0d7a38,#25d366,#0d7a38);background-size:300% 100%}
.btn-wa:hover,.btn-wa:focus-visible{color:#fff;border-color:#0d7a38}

.btn-claro{background:transparent;border-color:var(--blanco);color:var(--blanco)}
.btn-claro:hover,.btn-claro:focus-visible{color:var(--tinta);border-color:var(--blanco)}
.btn-claro::before{background:var(--blanco)}

.btn-lin{
  border:var(--borde);border-radius:8px;padding:10px 18px;font-family:var(--display);
  letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;background:var(--blanco);
  transition:background .25s,color .25s,transform .25s;
}
.btn-lin:hover,.btn-lin:focus-visible{background:var(--tinta);color:var(--blanco);transform:translateY(-2px)}

/* Iconos que laten y giran solos */
.ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.15em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-late{animation:latido 2.6s ease-in-out infinite}
.ico-gira{animation:girar 9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.btn:hover .ico-late{animation-duration:.7s}
.btn:hover .ico-gira{animation-duration:2s}

/* ---------- 4. NAVEGACION ----------------------------------------------- */

.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;background:var(--blanco);border-bottom:2px solid var(--tinta);
}
.nav-marca{display:flex;align-items:center;gap:10px;min-width:0}
.nav-marca img,.nav-marca svg{width:40px;height:40px;flex:none;
  animation:pulso-marca 5s ease-in-out infinite}
@keyframes pulso-marca{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-3deg) scale(1.06)}}
.nav-marca:hover img,.nav-marca:hover svg{animation-duration:1.4s}
.nav-marca b{font-family:var(--display);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.05;display:block}
.nav-marca > span > span{font-size:.6rem;letter-spacing:.24em;color:var(--fuego);
  text-transform:uppercase;font-weight:700}
.nav-acc{display:flex;align-items:center;gap:6px}

.icon-btn{
  position:relative;width:44px;height:44px;display:grid;place-items:center;
  border:2px solid var(--tinta);border-radius:10px;background:var(--blanco);
  transition:background .25s,color .25s,transform .25s;
}
.icon-btn:hover,.icon-btn:focus-visible{background:var(--tinta);color:var(--blanco);transform:translateY(-2px)}
.icon-btn .ico{width:20px;height:20px}
.contador{
  position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;background:var(--fuego);
  color:#fff;font-size:.68rem;font-weight:700;font-family:var(--display);
  border:2px solid var(--blanco);
}
.contador.late{animation:latido .5s ease-in-out 3}

.hamb{display:grid;gap:5px;place-items:center}
.hamb i{display:block;width:20px;height:2.4px;background:currentColor;border-radius:2px;
  animation:respirar 3.6s ease-in-out infinite}
.hamb i:nth-child(2){animation-delay:.25s;width:14px}
.hamb i:nth-child(3){animation-delay:.5s}
@keyframes respirar{0%,100%{width:20px}50%{width:12px}}

/* Menu: cortina de fichas que caen como domino */
.menu{
  position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:auto 1fr auto;
  background:var(--tinta);color:var(--blanco);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1);
}
.menu.abierto{clip-path:inset(0 0 0 0)}
.menu-top{display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);padding:0 14px;border-bottom:2px solid rgba(255,255,255,.18)}
.menu .icon-btn{border-color:var(--blanco);background:transparent;color:var(--blanco)}
.menu .icon-btn:hover{background:var(--blanco);color:var(--tinta)}
.menu-lista{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:20px 18px;overflow:auto}
.menu-lista a{
  position:relative;display:flex;align-items:baseline;gap:14px;padding:13px 4px;
  font-family:var(--display);font-size:clamp(1.7rem,8vw,3rem);text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.14);
  transform:translateY(-120%) rotateX(-70deg);opacity:0;transform-origin:top center;
}
.menu.abierto .menu-lista a{animation:domino .62s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes domino{to{transform:translateY(0) rotateX(0);opacity:1}}
.menu-lista a em{font-family:var(--slab);font-size:.62rem;font-style:normal;
  letter-spacing:.3em;color:var(--fuego)}
.menu-lista a::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--fuego);transform:scaleX(0);transform-origin:left;
  animation:reglete 4.4s ease-in-out infinite;
}
@keyframes reglete{0%,100%{transform:scaleX(0)}45%,55%{transform:scaleX(1)}}
.menu-lista a:hover::after{animation:none;transform:scaleX(1);transition:transform .3s}
.menu-pie{padding:16px 18px 26px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;color:#cfc6bd}
.menu-pie b{color:var(--fuego)}

/* ---------- 5. PORTADA A PANTALLA COMPLETA ------------------------------ */

.hero{
  position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;color:var(--blanco);
  padding:calc(var(--nav-h) + 40px) 0 26px;background:var(--tinta);
}
.hero-fondo{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.hero-slide.activa{opacity:1}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.06);
}
.hero-slide.activa img{animation:acercar 9s ease-out forwards}
@keyframes acercar{from{transform:scale(1.06)}to{transform:scale(1.16)}}

/* Capa de degradado negro: legibilidad sin sombras ni desenfoques */
.hero-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,17,15,.55) 0%,rgba(20,17,15,.10) 22%,
                    rgba(20,17,15,.42) 52%,rgba(20,17,15,.86) 78%,rgba(20,17,15,.97) 100%),
    linear-gradient(90deg,rgba(20,17,15,.55) 0%,rgba(20,17,15,.12) 55%,rgba(20,17,15,.30) 100%);
}
.hero-contenido{position:relative;z-index:2;width:100%}

/* Sello de marca: el logotipo sobre la foto, en una placa clara para que
   se lea sobre cualquier imagen. El aro punteado gira solo y se acelera
   al pasar el puntero. */
.hero-sello{
  position:relative;width:92px;height:92px;margin:0 0 20px;padding:11px;
  display:grid;place-items:center;background:var(--blanco);
  border:2px solid var(--tinta);border-radius:50%;
}
.hero-sello img,.hero-sello .logo-alt{
  width:100%;height:100%;object-fit:contain;
  animation:pulso-marca 5s ease-in-out infinite;
}
.hero-sello:hover img,.hero-sello:hover .logo-alt{animation-duration:1.4s}
.hero-sello .aro{
  position:absolute;inset:-11px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.6);
  animation:girar 26s linear infinite;
}
.hero-sello:hover .aro{animation-duration:6s}
.hero .kicker{color:var(--brasa)}
.hero h1{margin:6px 0 16px}
.hero .sub{font-family:var(--slab);font-size:1.02rem;color:#efe8e1;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.dato{border:2px solid rgba(255,255,255,.55);border-radius:var(--r);
  padding:12px 10px;text-align:center;background:rgba(20,17,15,.35)}
.dato b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--brasa)}
.dato span{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:#e3dad2}

/* Celda del transportista: placa clara para que el logotipo se lea sobre la foto */
.dato-envio{background:var(--blanco);border-color:var(--blanco);
  display:grid;gap:7px;place-items:center;padding:11px 9px}
.dato-envio .dato-rotulo{font-family:var(--display);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--humo);line-height:1.2;text-align:center}
.dato-logo{width:100%;max-width:120px;height:auto}

/* Pie de la portada: rotulo de la pieza y los puntos del carrusel */
.hero-pie{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:14px;margin-top:30px;
  border-top:1px solid rgba(255,255,255,.30);padding-top:14px}
.hero-rotulo{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;
  font-size:.78rem;color:#efe8e1;display:flex;align-items:center;gap:10px;min-width:0}
.hero-rotulo b{color:var(--brasa)}
.hero-puntos{display:flex;gap:8px;flex:none}
.hero-puntos button{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.34);
  transition:background .3s,width .3s}
.hero-puntos button[aria-current="true"]{background:var(--fuego);width:52px}

/* ---------- 6. MARQUESINA ------------------------------------------------ */

.marquesina{position:relative;z-index:1;background:var(--tinta);color:var(--blanco);
  border-block:2px solid var(--tinta);overflow:hidden;padding:12px 0}
/* La pista corre con CSS mientras el JS no la toma. Cuando anim.js entra,
   pasa a moverla cuadro a cuadro para poder frenarla suavemente al pasar el
   puntero (solo en equipos con puntero fino; en tactiles no reacciona). */
.marquesina-pista{display:flex;gap:34px;width:max-content;animation:correr 26s linear infinite}
.marquesina-pista.a-mano{animation:none}
@keyframes correr{to{transform:translateX(-50%)}}
.marquesina span{font-family:var(--display);letter-spacing:.18em;text-transform:uppercase;
  font-size:.9rem;display:flex;align-items:center;gap:12px;white-space:nowrap}
.marquesina span::after{content:"";width:8px;height:8px;background:var(--fuego);
  border-radius:50%;animation:latido 2s ease-in-out infinite}

/* ---------- 7. SECCIONES ------------------------------------------------- */

.seccion{position:relative;z-index:1;padding:64px 0;background:var(--blanco)}
.seccion.alt{background:var(--hueso)}
.seccion-cab{margin-bottom:26px}
.seccion-cab .parrafo{margin:12px 0 0}

.filtros{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;
  scrollbar-width:none;-ms-overflow-style:none}
.filtros::-webkit-scrollbar{display:none}
.chip{
  flex:none;border:2px solid var(--tinta);border-radius:8px;padding:9px 16px;
  font-family:var(--display);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blanco);white-space:nowrap;
  transition:background .25s,color .25s,transform .25s;
}
.chip:hover,.chip:focus-visible{transform:translateY(-2px);background:var(--arena)}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.chip[aria-pressed="true"]::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--fuego);margin-right:8px;vertical-align:middle;
  animation:latido 1.8s ease-in-out infinite}
.chip-nuevo{border-color:var(--fuego);color:var(--ascua)}

/* Botón naranja fijo junto a "Todas": salta al otro apartado del catálogo */
.chip-ancla{
  background:var(--fuego);border-color:var(--fuego);color:#fff;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
}
.chip-ancla::after{content:"›";font-size:1.15em;line-height:1}
.chip-ancla:hover,.chip-ancla:focus-visible{background:var(--ascua);border-color:var(--ascua);color:#fff}
.chip-nuevo[aria-pressed="true"]{background:var(--fuego);border-color:var(--fuego);color:#fff}

/* Rejilla de figuras */
.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.banda{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:6px 0 2px;
  font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;
}
.banda::after{content:"";flex:1;height:2px;background:var(--linea)}
.banda.nueva{color:var(--ascua)}
.banda.nueva::after{background:linear-gradient(90deg,var(--fuego),transparent)}

/* Las tarjetas del catalogo van quietas a proposito: la unica reaccion es un
   impulso corto y suave hacia arriba cuando el puntero se posa encima. */
.tarjeta{
  position:relative;border:var(--borde);border-radius:var(--r);background:var(--blanco);
  overflow:hidden;text-align:left;display:flex;flex-direction:column;
  width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .28s cubic-bezier(.25,.85,.35,1);
}
.tarjeta:hover,.tarjeta:focus-visible{transform:translateY(-5px)}
.tarjeta-img{position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  padding:14px;background:var(--hueso);border-bottom:2px solid var(--tinta)}
.tarjeta-img img{width:100%;height:100%;object-fit:contain}
.tarjeta-pie{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--linea);margin-top:auto}
.tarjeta-pie b{font-family:var(--display);font-size:.94rem;letter-spacing:.05em;line-height:1.15}
.tarjeta-pie small{font-size:.64rem;letter-spacing:.14em;color:var(--humo);text-transform:uppercase}
.etiqueta{
  position:absolute;top:10px;left:10px;z-index:3;background:var(--fuego);color:#fff;
  font-family:var(--display);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px}
.etiqueta-corona{left:auto;right:10px;background:var(--tinta)}
.tarjeta .etiqueta-corona{font-size:.55rem;letter-spacing:.1em}
.precio{font-family:var(--display);color:var(--fuego);font-size:1.05rem}

.mas{display:grid;place-items:center;margin-top:26px}
.vacio{padding:40px 0;text-align:center;color:var(--humo);font-family:var(--slab)}

/* Proceso */
.pasos{display:grid;gap:14px;counter-reset:paso}
.paso{position:relative;border:var(--borde);border-radius:var(--r);padding:20px 18px 18px;
  background:var(--blanco);counter-increment:paso;overflow:hidden}
.paso::before{
  content:counter(paso,decimal-leading-zero);position:absolute;top:-1px;left:16px;
  background:var(--fuego);color:#fff;font-family:var(--display);font-size:.86rem;
  padding:3px 11px;border-radius:0 0 6px 6px;letter-spacing:.1em}
.paso h3{font-size:1.15rem;margin:14px 0 6px}
.paso p{margin:0;color:var(--carbon);font-size:.95rem}
.paso::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;
  background:var(--fuego);animation:cargar 4.6s ease-in-out infinite}
@keyframes cargar{0%,100%{width:0}50%{width:100%}}

/* ---------- 8. MODALES --------------------------------------------------- */

.telon{
  position:fixed;inset:0;z-index:80;display:grid;place-items:end center;
  background:rgba(20,17,15,.72);opacity:0;pointer-events:none;transition:opacity .3s}
.telon.abierto{opacity:1;pointer-events:auto}
.hoja{
  width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--blanco);
  border:2px solid var(--tinta);border-radius:16px 16px 0 0;
  transform:translateY(100%);transition:transform .48s cubic-bezier(.2,.9,.25,1)}
.telon.abierto .hoja{transform:translateY(0)}
.hoja-cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:14px 16px;background:var(--blanco);
  border-bottom:2px solid var(--tinta)}
.hoja-cab h3{font-size:1.1rem}
.hoja-cuerpo{padding:18px 16px 26px}

.ficha{display:grid;gap:14px}
.ficha-datos{display:grid;gap:14px;min-width:0}
/* Corona sobre el escudo: dos capas dentro del mismo cuadrado */
.ficha-monta{position:relative;display:grid;place-items:center;background:var(--hueso)}
.ficha-monta .monta-base{
  width:72%;height:72%;object-fit:contain;
  position:absolute;left:14%;bottom:3%;
}
/* La posicion exacta la calcula apoyarCorona() en app.js, midiendo el aire
   transparente de cada corona (varia del 19 al 38 %) para que su tinta asiente
   sobre el borde del escudo. Este `bottom` es solo la reserva, para una corona
   media, si la medicion no se puede hacer. */
.ficha-monta .monta-corona{
  width:44%;height:44%;object-fit:contain;
  position:absolute;left:28%;bottom:53%;
  z-index:2;
}

.pista-corona{
  margin:8px 0 0;font-size:.84rem;color:var(--ascua);font-family:var(--slab);font-weight:700;
}

/* min-width:0 es imprescindible: sin el, la fila de coronas estira la ficha
   entera hasta el ancho de todas sus miniaturas juntas. */
.ficha > *{min-width:0}
.coronas{border:2px solid var(--linea);border-radius:var(--r);padding:12px;min-width:0}
.coronas-tit{
  display:block;font-family:var(--display);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--humo);margin-bottom:9px;
}
.coronas-fila{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.coronas-fila::-webkit-scrollbar{display:none}
.corona-op{
  flex:none;width:64px;height:56px;border:2px solid var(--linea);border-radius:10px;
  background:var(--blanco);display:grid;place-items:center;padding:6px;
  transition:border-color .2s,transform .2s;
}
.corona-op img{max-width:100%;max-height:100%;object-fit:contain}
.corona-op .sin{
  font-family:var(--display);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--humo);text-align:center;line-height:1.15;
}
.corona-op:hover{transform:translateY(-2px)}
.corona-op.activa{border-color:var(--fuego);background:var(--hueso)}

/* Figura + capa de letras: la capa es un lienzo del mismo cuadrado que la
   imagen, asi las letras se escalan y se mueven junto con ella. */
.ficha-img{position:relative}
.fig-base{position:relative;width:100%;height:100%}
.ficha-img .fig-base img,.fig-base canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.fig-base canvas{pointer-events:none}
/* Sin transicion al montar la corona, a proposito: la captura para WhatsApp
   lee las posiciones en pantalla y a mitad de una transicion saldria torcida. */

/* Selector de fuentes: cada boton muestra las letras en su tipografia */
.fuente-op{
  flex:none;min-width:84px;height:64px;border:2px solid var(--linea);border-radius:10px;
  background:var(--blanco);display:grid;place-items:center;padding:4px 10px;gap:0;
  transition:border-color .2s,transform .2s;
}
.fuente-op b{font-size:1.55rem;line-height:1.05;color:var(--tinta);white-space:nowrap}
.fuente-op small{font-family:var(--display);font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--humo)}
.fuente-op:hover{transform:translateY(-2px)}
.fuente-op.activa{border-color:var(--fuego);background:var(--hueso)}
.campo-fila.solo{grid-template-columns:1fr}

/* La imagen ocupa el cuadrado completo, sin margenes */
.ficha-img{border:var(--borde);border-radius:var(--r);background:var(--hueso);
  aspect-ratio:1/1;overflow:hidden}
.ficha-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Galeria del producto: la foto grande cambia sola y las miniaturas mandan */
.tiras{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.tiras::-webkit-scrollbar{display:none}
.tira{flex:none;width:64px;height:64px;padding:4px;background:var(--hueso);
  border:2px solid var(--linea);border-radius:8px;transition:border-color .25s,transform .25s}
.tira img{width:100%;height:100%;object-fit:contain}
.tira:hover{transform:translateY(-2px);border-color:var(--tinta)}
.tira.activa{border-color:var(--fuego)}

/* Aviso de cuantas fotos tiene un producto */
.etiqueta-fotos{background:var(--tinta)}

/* Tira de fotos de un producto dentro del panel */
.fotos{display:flex;flex-wrap:wrap;gap:5px}
.foto{position:relative;width:38px;height:38px;border:1px solid var(--linea);
  border-radius:6px;background:var(--hueso);padding:3px}
.foto img{width:100%;height:100%;object-fit:contain}
.foto .quita-foto{position:absolute;top:-6px;right:-6px;width:17px;height:17px;
  border-radius:50%;background:var(--tinta);color:#fff;font-size:.62rem;
  display:grid;place-items:center;line-height:1}
.foto .quita-foto:hover{background:var(--ascua)}

/* Campos: lineas de energia que se encienden al escribir */
.campo{position:relative;display:block}
.campo > span{display:block;font-family:var(--display);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--humo);margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 14px;background:var(--blanco);border:2px solid var(--linea);
  border-radius:10px;transition:border-color .25s,background .25s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--tinta)}
.campo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--fuego),var(--brasa),var(--fuego));
  background-size:220% 100%;transform:scaleX(0);transform-origin:left;
  transition:transform .35s;animation:colada 3s linear infinite}
.campo:focus-within::after,.campo.lleno::after{transform:scaleX(1)}
.campo .pista{font-size:.74rem;color:var(--humo);margin-top:6px;display:block}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.cantidad{display:flex;align-items:center;gap:0;border:2px solid var(--linea);
  border-radius:10px;overflow:hidden;width:100%}
.cantidad button{width:52px;height:48px;display:grid;place-items:center;font-size:1.3rem;
  font-family:var(--display);background:var(--hueso);transition:background .2s,color .2s}
.cantidad button:hover{background:var(--tinta);color:var(--blanco)}
.cantidad input{flex:1;text-align:center;border:0;border-inline:2px solid var(--linea);
  padding:13px 0;min-width:0}
.cantidad input:focus{outline:none}

.letras-in{text-transform:uppercase;letter-spacing:.5em;font-family:var(--display);
  font-size:1.5rem;text-align:center}

.acciones{display:grid;gap:10px;margin-top:6px}
.nota{border:2px dashed var(--linea);border-radius:var(--r);padding:12px 14px;
  font-size:.86rem;color:var(--carbon);display:flex;gap:10px;align-items:flex-start}
.nota .ico{color:var(--fuego);flex:none;margin-top:2px}

.item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--linea)}
.item-img{border:2px solid var(--tinta);border-radius:8px;background:var(--hueso);padding:5px;
  aspect-ratio:1/1;display:grid;place-items:center}
.item-img img{max-width:100%;max-height:100%;object-fit:contain}
.item b{display:block;font-family:var(--display);font-size:.95rem}
.item small{color:var(--humo);font-size:.76rem}
.quitar{color:var(--humo);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;
  border-bottom:1px solid currentColor}
.quitar:hover{color:var(--ascua)}
.total{display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0;font-family:var(--display);font-size:1.1rem}
.total b{color:var(--fuego);font-size:1.4rem}

/* ---------- 9. PANEL ADMIN ----------------------------------------------- */

.panel{position:fixed;inset:0;z-index:90;background:var(--blanco);overflow:auto;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.panel.abierto{transform:translateY(0)}
.panel-cab{position:sticky;top:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:12px 14px;background:var(--tinta);
  color:var(--blanco);border-bottom:2px solid var(--tinta)}
.panel-cab h2{font-size:1rem;letter-spacing:.12em;white-space:nowrap}
.panel-salir{background:transparent;color:var(--blanco);border-color:var(--blanco)}
.panel-salir:hover,.panel-salir:focus-visible{background:var(--blanco);color:var(--tinta)}
.panel-cab .icon-btn{border-color:var(--blanco);color:var(--blanco);background:transparent}
.panel-cab .icon-btn:hover{background:var(--blanco);color:var(--tinta)}
.pestanas{display:flex;gap:6px;overflow-x:auto;padding:12px 14px 0;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.panel-cuerpo{padding:16px 14px 60px;max-width:940px;margin-inline:auto}
.bloque{border:var(--borde);border-radius:var(--r);padding:16px;margin-bottom:16px;background:var(--blanco)}
.bloque h3{font-size:1rem;margin-bottom:12px}
.bloque .campo + .campo{margin-top:12px}

.zona{
  border:3px dashed var(--linea);border-radius:var(--r);padding:26px 16px;text-align:center;
  transition:border-color .3s,background .3s;animation:pulso-zona 4.5s ease-in-out infinite}
@keyframes pulso-zona{0%,100%{border-color:var(--linea)}50%{border-color:var(--brasa)}}
.zona.sobre{border-color:var(--fuego);background:var(--hueso);animation:none}
.zonas{display:grid;gap:12px}
.zona{cursor:pointer}
.zona b{display:block;font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;
  font-size:1rem;margin-top:8px;color:var(--tinta)}
.zona-ico{width:34px;height:34px;margin:0 auto;fill:none;stroke:var(--fuego);
  stroke-width:1.8;stroke-linejoin:round;animation:latido 3.2s ease-in-out infinite}
.zona:hover .zona-ico{animation-duration:1s}
@media (min-width:640px){ .zonas{grid-template-columns:1fr 1fr} }
.zona p{margin:8px 0 0;color:var(--humo);font-size:.88rem}

.recortes{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:14px}
.recorte{position:relative;border:2px solid var(--tinta);border-radius:8px;overflow:hidden;
  background:var(--hueso);aspect-ratio:1/1;padding:6px;cursor:pointer}
.recorte img{width:100%;height:100%;object-fit:contain}
.recorte .nom{position:absolute;left:0;right:0;bottom:0;background:var(--tinta);color:#fff;
  font-family:var(--display);font-size:.56rem;letter-spacing:.08em;text-align:center;
  padding:2px 3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recorte.fuera{opacity:.3;border-style:dashed}
.recorte .let{position:absolute;top:3px;left:3px;background:var(--fuego);color:#fff;
  font-family:var(--display);font-size:.62rem;letter-spacing:.06em;padding:1px 6px;border-radius:6px}
.recorte button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  background:var(--tinta);color:#fff;font-size:.7rem;display:grid;place-items:center;z-index:2}
.recorte.fuera button{background:var(--fuego)}

/* Fichas del catalogo dentro del panel: imagen + nombre generado */
.admin-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.admin-item{border:2px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--blanco)}
.admin-item.destaca{border-color:var(--fuego)}
.admin-mini{position:relative;aspect-ratio:1/1;background:var(--hueso);display:grid;
  place-items:center;padding:10px;border-bottom:2px solid var(--linea)}
.admin-mini img{width:100%;height:100%;object-fit:contain}
.admin-mini .flag{position:absolute;top:6px;left:6px;background:var(--fuego);color:#fff;
  font-family:var(--display);font-size:.55rem;letter-spacing:.14em;padding:3px 7px;border-radius:5px}
.admin-datos{padding:9px 10px 11px;display:grid;gap:6px}
.admin-datos .cod{font-size:.6rem;letter-spacing:.14em;color:var(--humo);text-transform:uppercase}
.admin-datos input,.admin-datos select{width:100%;border:1px solid var(--linea);border-radius:6px;
  padding:6px 8px;font-size:.84rem;background:var(--blanco)}
.admin-datos input:focus,.admin-datos select:focus{outline:none;border-color:var(--tinta)}
.admin-acc{display:flex;flex-wrap:wrap;gap:5px 10px;padding-top:3px}
.admin-acc .quitar{white-space:nowrap;font-size:.66rem}
.admin-datos input,.admin-datos select{min-width:0}
.admin-datos .cod{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cat-fila{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--linea)}
.cat-fila input{grid-column:1/-1;width:100%;min-width:0;border:1px solid var(--linea);
  border-radius:6px;padding:9px 10px}
.cat-fila input:focus{outline:none;border-color:var(--tinta)}
.cat-fila .n{font-size:.7rem;color:var(--humo);letter-spacing:.08em;white-space:nowrap}
.cat-fila .acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cat-fila .quitar{font-size:.66rem;white-space:nowrap}
.cat-fila .mini-btn{width:32px;height:32px;border:2px solid var(--tinta);border-radius:7px;
  display:grid;place-items:center;flex:none;font-size:.78rem;transition:background .2s,color .2s}
.cat-fila .mini-btn:hover{background:var(--tinta);color:#fff}
.cat-fila .mini-btn[disabled]{opacity:.3;cursor:default}
.cat-fila .mini-btn[disabled]:hover{background:none;color:inherit}

.diapo{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;
  border:2px solid var(--linea);border-radius:var(--r);padding:10px;margin-bottom:10px}
.diapo img{width:104px;height:74px;object-fit:cover;border-radius:8px;border:2px solid var(--tinta)}
.diapo .campos{display:grid;gap:8px}
.diapo input{width:100%;border:1px solid var(--linea);border-radius:6px;padding:8px 10px;font-size:.86rem}
.diapo .fila{display:flex;gap:8px;align-items:center;justify-content:space-between}

.aviso{border-left:4px solid var(--fuego);background:var(--hueso);padding:11px 14px;
  border-radius:0 var(--r) var(--r) 0;font-size:.86rem;margin-bottom:14px}

.toast{
  position:fixed;left:50%;bottom:22px;z-index:120;transform:translate(-50%,180%);
  background:var(--tinta);color:var(--blanco);border:2px solid var(--fuego);
  border-radius:10px;padding:12px 22px;font-family:var(--display);letter-spacing:.1em;
  text-transform:uppercase;font-size:.82rem;transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.toast.ver{transform:translate(-50%,0)}

/* ---------- 9b. PAGINA DEL PANEL ----------------------------------------- */

.es-admin{background:var(--hueso)}
.admin-main{padding-top:calc(var(--nav-h) + 18px);padding-bottom:60px}
.admin-acceso{display:grid;place-items:center;padding:40px 16px}
.admin-tarjeta{width:100%;max-width:420px;margin:0}
.es-admin .pestanas{max-width:940px;margin-inline:auto}
.es-admin .panel-cuerpo{background:transparent}
.es-admin .nav-marca > span > span{color:var(--humo);letter-spacing:.18em}

/* Selector de grupo dentro de la pestaña de categorías */
.grupo-sel{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 10. PIE ------------------------------------------------------ */

.pie{position:relative;z-index:1;background:var(--tinta);color:#e9e3dc;padding:44px 0 26px}
.pie h4{color:var(--blanco);font-size:.86rem;letter-spacing:.2em;margin-bottom:12px}
.pie h4.marca-pie{color:var(--brasa)}
.pie a:hover{color:var(--brasa)}
.pie-grid{display:grid;gap:26px}
.pie-legal{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.76rem;color:#a79c92;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}

.wa-flota{
  position:fixed;right:14px;bottom:14px;z-index:55;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;border:2px solid var(--tinta);
  animation:latido 2.4s ease-in-out infinite}
.wa-flota:hover{animation-duration:.8s}
.wa-flota .ico{width:26px;height:26px}

/* ---------- 11. PANTALLA DE CARGA ---------------------------------------- */

#portada{position:fixed;inset:0;z-index:200;background:var(--blanco);
  display:grid;place-items:center;transition:opacity .6s ease,visibility .6s}
#portada.fuera{opacity:0;visibility:hidden}
.portada-in{text-align:center;padding:20px}
.portada-in .marca{width:96px;height:96px;margin:0 auto 18px;animation:pulso-marca 2.4s ease-in-out infinite}
.portada-in b{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:14px}
.barra{width:220px;height:6px;border:2px solid var(--tinta);border-radius:999px;overflow:hidden;margin:0 auto}
.barra i{display:block;height:100%;width:40%;
  background:linear-gradient(90deg,var(--ascua),var(--fuego),var(--brasa));
  animation:arriar 1.1s ease-in-out infinite}
@keyframes arriar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ---------- 12. ESCRITORIO ----------------------------------------------- */

@media (min-width:640px){
  .rejilla{grid-template-columns:repeat(3,1fr);gap:14px}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .hoja{border-radius:16px;max-height:88vh}
  .telon{place-items:center}
  .telon .hoja{transform:translateY(40px) scale(.96)}
  .telon.abierto .hoja{transform:translateY(0) scale(1)}
}
@media (min-width:900px){
  :root{--nav-h:74px}
  .nav{padding:0 26px}
  .nav-marca img,.nav-marca svg{width:48px;height:48px}
  .nav-marca .logo-alt{width:48px;height:48px}
  .nav-marca b{font-size:1rem}
  .hero-contenido .contenedor{max-width:var(--w)}
  .hero-sello{width:116px;height:116px;padding:14px;margin-bottom:24px}
  .hero h1{max-width:14ch}
  .rejilla{grid-template-columns:repeat(4,1fr)}
  .seccion{padding:88px 0}
  .pasos{grid-template-columns:repeat(4,1fr)}
  .pie-grid{grid-template-columns:1.4fr 1fr 1fr}
  .menu-lista{padding:30px 40px}
  .menu-lista a{max-width:760px}
  .datos{max-width:560px}
}
@media (min-width:900px){
  /* Ficha tipo tienda: imagen a la izquierda, datos a la derecha */
  .telon .hoja{max-width:920px}
  .ficha{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:24px;align-items:start}
  .ficha-img{position:sticky;top:0}
  .tiras{grid-column:1}
  .hoja-cuerpo{padding:22px 22px 26px}
}

@media (min-width:1200px){ .rejilla{grid-template-columns:repeat(5,1fr)} }

/* ---------- 13. MOVIMIENTO REDUCIDO -------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.06s !important;scroll-behavior:auto !important}
  .hero-slide.activa img{animation:none}
}