/* ============================================================
   Biaani' — la hoja de la casa.
   Sistema "El taller": papel con grano, luz de dia, terracota.
   Tipografias del sistema en todo, con UNA excepcion: la marca.
   El glifo del logo es linea fina de eje vertical; una serif humanista al lado
   no comparte ni grosor ni caja. El diseñador original puso ahi una geometrica
   fina en mayusculas muy espaciadas, y eso es lo que se respeta.
   ============================================================ */
@font-face{
  font-family:'Jost'; src:url('fuentes/jost-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
:root{
  --papel:#F5EEE1; --kraft:#EAE0CC; --kraft-hondo:#E2D5BC; --marfil:#FBF6EA;
  --tinta:#362A21; --tinta-suave:#6E5B49; --borde:#DACBAF;
  --terracota:#A34D2B; --terracota-2:#B85C38;
  --ambar:#E8A13D; --nucleo:#F6C868; --olivo:#6E7649; --cochinilla:#8E3B3B;
  --serif:'Palatino Linotype',Palatino,'Book Antiqua','Iowan Old Style',Georgia,serif;
  --cuerpo:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;
  --ui:'Segoe UI',Seravek,Candara,'Trebuchet MS',sans-serif;
  --marca:'Jost','Century Gothic','Questrial',var(--ui);
  --ancho:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--cuerpo); font-size:17px; line-height:1.64;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* el grano del papel */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .21 0 0 0 0 .16 0 0 0 0 .13 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.1; text-wrap:balance; margin:0}
p{margin:0} a{color:inherit} button{font-family:inherit; cursor:pointer; color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--terracota); outline-offset:3px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
header,footer,section,main,.barra{position:relative; z-index:2}
.wrap{max-width:var(--ancho); margin:0 auto; padding:0 28px}
.ojo{font-family:var(--ui); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olivo); font-weight:700; margin-bottom:16px}
.precio{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.marca-et{font-family:var(--serif); font-size:11px; fill:#362A21}

/* ---------------- botones ---------------- */
.btn{
  font-family:var(--ui); display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:99px; padding:13px 28px; font-size:.92rem; font-weight:600; letter-spacing:.04em;
  text-decoration:none; border:1.5px solid transparent; transition:all .3s; min-height:46px;
}
.btn-terra{background:var(--terracota); color:#fff}
.btn-terra:hover{background:var(--terracota-2); box-shadow:0 12px 30px rgba(163,77,43,.26)}
.btn-linea{border-color:var(--terracota); color:var(--terracota); background:transparent}
.btn-linea:hover{background:var(--terracota); color:#fff}
.btn[disabled],.btn:disabled{opacity:.45; cursor:not-allowed}
.liga-pulso{font-family:var(--ui); font-size:.92rem; color:var(--terracota); text-decoration:none;
  border-bottom:2px solid rgba(163,77,43,.35); padding-bottom:2px}
.liga-pulso:hover{border-color:var(--terracota)}

/* ---------------- cabecera ---------------- */
.cabecera{position:fixed; inset:0 0 auto 0; z-index:60; background:rgba(245,238,225,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px dashed rgba(142,59,59,.45)}
.nav{max-width:var(--ancho); margin:0 auto; padding:13px 28px; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; gap:20px}
/* La palabra, en el idioma del glifo: geometrica fina, versales y muy espaciada.
   El centrado es al medio y no a la linea base: al lado hay un glifo, no una letra. */
.logo{font-family:var(--marca); font-weight:300; font-size:1.42rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--tinta); text-decoration:none;
  display:inline-flex; align-items:center; justify-self:start}
/* el tracking deja aire despues de la ultima I; el apostrofo se recupera ese hueco
   y sube al hombro de la letra, que es donde va un apostrofo */
.logo svg.flamita{width:7px; height:13px; margin-left:-.22em; transform:translateY(-.28em)}
.nav-liga{display:flex; gap:28px; justify-self:center; font-family:var(--ui)}
.nav-liga a{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); text-decoration:none; padding:8px 0}
.nav-liga a:hover{color:var(--terracota)}
.nav-der{display:flex; gap:10px; justify-self:end; align-items:center}
.icono-btn{position:relative; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--borde);
  background:var(--marfil); display:inline-flex; align-items:center; justify-content:center; color:var(--tinta); text-decoration:none; transition:all .25s}
.icono-btn:hover{border-color:var(--terracota); color:var(--terracota)}
.icono-btn svg{width:19px; height:19px}
.globo{position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  background:var(--terracota); color:#fff; font-family:var(--ui); font-size:.7rem; font-weight:700;
  display:none; align-items:center; justify-content:center}
.globo.con{display:inline-flex}
@media(max-width:860px){.nav{grid-template-columns:auto 1fr}.nav-liga{display:none}.nav-der{grid-column:2}}

/* ---------------- avisos ---------------- */
.aviso{max-width:var(--ancho); margin:0 auto 18px; padding:14px 20px; border-radius:10px;
  font-family:var(--ui); font-size:.92rem; border:1px solid var(--borde); background:var(--marfil)}
.aviso-bien{border-left:4px solid var(--olivo)}
.aviso-mal{border-left:4px solid var(--cochinilla); color:var(--cochinilla)}

/* ---------------- hero ---------------- */
.hero{padding:140px 0 60px; overflow:hidden}
.hero-rejilla{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.2rem); letter-spacing:-.008em}
.hero h1 em{font-style:italic; color:var(--terracota)}
.hero-lead{margin-top:22px; max-width:46ch; color:var(--tinta-suave); font-size:1.06rem}
.hero-ctas{display:flex; gap:22px; margin-top:34px; align-items:center; flex-wrap:wrap}
.hero-nota{margin-top:28px; font-family:var(--ui); font-size:.82rem; color:var(--tinta-suave)}
.hero-nota b{color:var(--terracota); font-weight:700}
.hero-arte{position:relative}
.hero-arte svg{width:100%; height:auto; display:block}
@media(max-width:920px){
  .hero{padding-top:120px}
  .hero-rejilla{grid-template-columns:minmax(0,1fr); gap:18px}
  .hero-rejilla > *{min-width:0}
  .hero-arte{max-width:460px; margin:0 auto; width:100%}
}

/* ---------------- flamas ---------------- */
/* el envoltorio lleva la posicion; la clase animada va adentro. Si se juntan,
   el transform del CSS pisa al del SVG y la flama se va al origen del viewBox. */
.flama{transform-origin:50% 100%; transform-box:fill-box}
.f-mece{transform-origin:50% 100%; transform-box:fill-box; animation:mece 3.2s ease-in-out infinite alternate}
.f-titila{transform-origin:50% 100%; transform-box:fill-box; animation:titila .19s ease-in-out infinite alternate}
@keyframes mece{from{transform:rotate(-1.5deg) scaleY(1)}to{transform:rotate(1.5deg) scaleY(1.04)}}
@keyframes titila{from{transform:scaleY(.97) skewX(-1.2deg)}to{transform:scaleY(1.03) skewX(1.2deg)}}
.hero-arte .c1 .f-mece{animation-duration:3.2s}
.hero-arte .c2 .f-mece{animation-duration:2.7s}
.hero-arte .c3 .f-mece{animation-duration:3.8s}

/* ---------------- secciones ---------------- */
.hilvan{max-width:var(--ancho); margin:0 auto; border:none; border-top:1px dashed var(--cochinilla); opacity:.45}
.sec{padding:88px 0}
.sec-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; flex-wrap:wrap}
.sec-cab h2{font-size:clamp(2rem,4vw,3rem)}
.sec-cab .sub{margin-top:12px; color:var(--tinta-suave); max-width:58ch}
.sec-cab .ver{font-family:var(--ui); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--terracota); text-decoration:none; border-bottom:1px solid rgba(163,77,43,.4); padding-bottom:4px; white-space:nowrap}
.manifiesto{padding:90px 0 76px; text-align:center}
.manifiesto h2{font-size:clamp(1.7rem,3.4vw,2.5rem); max-width:26ch; margin:0 auto}
.manifiesto h2 em{color:var(--terracota); font-style:italic}
.manifiesto p{margin:22px auto 0; max-width:54ch; color:var(--tinta-suave)}
.cordel{display:block; width:100%; height:34px; margin-bottom:-6px}

/* ---------------- tarjetas de pieza ---------------- */
.rejilla{display:grid; gap:30px 24px}
.rej-3{grid-template-columns:repeat(3,1fr)}
.rej-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.rej-3,.rej-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rej-3,.rej-4{grid-template-columns:1fr}}

.tarjeta{position:relative; background:var(--kraft); border:1px solid var(--borde); border-radius:8px;
  padding:34px 24px 22px; display:flex; flex-direction:column; transition:transform .35s, box-shadow .35s}
.tarjeta::before{content:""; position:absolute; top:-22px; left:50%; width:1px; height:26px;
  background:var(--cochinilla); transform:translateX(-50%) rotate(4deg); opacity:.7}
.tarjeta::after{content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:11px; height:11px; border-radius:50%; background:var(--papel); border:1.5px solid var(--cochinilla)}
.tarjeta:nth-child(3n+1){transform:rotate(-.7deg)}
.tarjeta:nth-child(3n+2){transform:rotate(.5deg)}
.tarjeta:nth-child(3n){transform:rotate(-.35deg)}
.tarjeta:hover{transform:rotate(0) translateY(-7px); box-shadow:0 22px 46px rgba(54,42,33,.16)}
.tarjeta .arte{height:190px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:14px}
.tarjeta .arte svg{height:180px; width:auto}
.tarjeta .arte .glifo-pieza{height:74px; width:74px; color:var(--terracota); margin-bottom:40px}
.tarjeta h3{font-size:1.4rem}
.tarjeta h3 a{text-decoration:none}
.tarjeta h3 a:hover{color:var(--terracota)}
.tarjeta .aroma{font-family:var(--serif); font-style:italic; color:var(--tinta-suave); margin-top:6px; font-size:.95rem}
.tarjeta .med{font-family:var(--ui); font-size:.74rem; color:var(--tinta-suave); margin-top:6px}
.tarjeta .color{font-family:var(--ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); margin-top:10px; display:flex; align-items:center; gap:8px}
.tarjeta .color i{width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid rgba(54,42,33,.18)}
.tarjeta .pie{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:18px; gap:12px}
.tarjeta .pie .precio{font-family:var(--serif); font-size:1.3rem; color:var(--terracota)}
.tarjeta .cinta{position:absolute; top:22px; left:18px; font-family:var(--ui); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--terracota);
  border:1px solid rgba(163,77,43,.45); border-radius:99px; padding:5px 12px; background:var(--marfil)}
.btn-chico{font-family:var(--ui); border:1.5px solid var(--terracota); background:transparent; color:var(--terracota);
  border-radius:99px; padding:10px 18px; font-size:.8rem; font-weight:600; min-height:44px;
  text-decoration:none; display:inline-flex; align-items:center; transition:all .25s}
.btn-chico:hover{background:var(--terracota); color:#fff}

/* ---------------- catalogo: barra de familias ---------------- */
.barra{position:sticky; top:66px; z-index:40; background:rgba(245,238,225,.94);
  backdrop-filter:blur(8px); border-top:1px dashed rgba(142,59,59,.35);
  border-bottom:1px dashed rgba(142,59,59,.35); padding:12px 0 4px}
.barra-in{position:relative; max-width:var(--ancho); margin:0 auto}
.filtros{display:flex; gap:8px; overflow-x:auto; padding:2px 28px 10px;
  scrollbar-width:thin; scrollbar-color:rgba(163,77,43,.34) transparent; overscroll-behavior-x:contain}
.filtros::-webkit-scrollbar{height:6px}
.filtros::-webkit-scrollbar-track{background:transparent}
.filtros::-webkit-scrollbar-thumb{background:rgba(163,77,43,.34); border-radius:99px}
.filtros::-webkit-scrollbar-thumb:hover{background:rgba(163,77,43,.6)}
.barra-in::before,.barra-in::after{content:""; position:absolute; top:0; bottom:10px; width:56px;
  pointer-events:none; z-index:2; transition:opacity .3s}
.barra-in::before{left:0; opacity:var(--f-izq,0); background:linear-gradient(90deg,#F5EEE1 24%,rgba(245,238,225,0))}
.barra-in::after{right:0; opacity:var(--f-der,0); background:linear-gradient(270deg,#F5EEE1 24%,rgba(245,238,225,0))}
.barra.hay-izq .barra-in{--f-izq:1}
.barra.hay-der .barra-in{--f-der:1}
.flecha{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:38px; height:38px;
  border-radius:50%; border:1.5px solid var(--borde); background:var(--marfil); color:var(--tinta);
  display:none; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(54,42,33,.16); padding:0}
.flecha svg{width:16px; height:16px}
.flecha:hover{border-color:var(--terracota); color:var(--terracota)}
.flecha-izq{left:2px} .flecha-der{right:2px}
.barra.hay-izq .flecha-izq{display:inline-flex}
.barra.hay-der .flecha-der{display:inline-flex}
@media(hover:none){.flecha{display:none!important}}
.filtro{font-family:var(--ui); flex:none; border:1.5px solid var(--borde); background:var(--marfil);
  color:var(--tinta); border-radius:99px; padding:10px 16px; font-size:.82rem; min-height:44px;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; transition:all .25s}
.filtro svg{width:16px; height:16px; color:var(--terracota)}
.filtro:hover{border-color:var(--terracota)}
.filtro.on{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.filtro.on svg{color:var(--nucleo)}
.filtro .n{opacity:.6; font-size:.74rem}

.cab-tienda{padding:130px 0 30px}
.cab-tienda h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
.cab-tienda h1 em{font-style:italic; color:var(--terracota)}
.cab-tienda .lead{margin-top:18px; max-width:60ch; color:var(--tinta-suave); font-size:1.05rem}
.cifras{margin-top:22px; display:flex; gap:26px; flex-wrap:wrap; font-family:var(--ui); font-size:.8rem; color:var(--tinta-suave)}
.cifras b{font-family:var(--serif); font-size:1.5rem; color:var(--terracota); display:block; line-height:1}
.familia{margin-bottom:56px}
.familia-cab{display:flex; align-items:baseline; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.familia-cab h2{font-size:clamp(1.5rem,3vw,2.1rem); display:flex; align-items:center; gap:12px}
.familia-cab h2 svg{width:30px; height:30px; color:var(--terracota)}
.familia-cab .r{font-family:var(--ui); font-size:.8rem; color:var(--tinta-suave)}

/* ---------------- ficha de pieza ---------------- */
.ficha{padding:130px 0 90px}
.ficha-rejilla{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
@media(max-width:880px){.ficha-rejilla{grid-template-columns:minmax(0,1fr); gap:30px}}
.ficha-arte{background:var(--kraft); border:1px solid var(--borde); border-radius:12px;
  padding:34px; text-align:center; position:sticky; top:96px}
@media(max-width:880px){.ficha-arte{position:relative; top:0}}
.ficha-arte svg{width:min(300px,86%); height:auto}
.ficha-arte .glifo-pieza{width:120px; height:120px; color:var(--terracota)}

/* El medallon: la forma de la pieza esculpida, tenida de la cera que elijan.
   Sin color elegido es transparente y se ve igual que el glifo solo. */
.medallon{--cera:transparent; --cera-luz:transparent; --tinta-glifo:var(--terracota);
  position:relative; display:inline-grid; place-items:center; border-radius:50%;
  transition:background .45s ease, box-shadow .45s ease}
.medallon.encendida{background:radial-gradient(58% 54% at 50% 32%, var(--cera-luz), var(--cera) 74%);
  box-shadow:inset 0 -12px 20px rgba(54,42,33,.16), 0 8px 24px rgba(54,42,33,.10)}
.medallon .glifo-pieza{color:var(--tinta-glifo); transition:color .45s ease}
.medallon .mecha{position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%) translateY(16px); opacity:0; transition:opacity .55s ease}
.medallon.encendida .mecha{opacity:1}
.ficha-arte .medallon{padding:38px}
.ficha-arte .medallon .mecha{width:30px; height:42.5px}

/* La foto de la pieza. Sobre el kraft, una foto de fondo blanco parece un recorte
   flotando; con su marco claro se lee como una impresion prendida en el taller.
   Va "contain" porque estas piezas son de formas muy distintas: recortar al cuadro
   le corta la cabeza al angel y la punta a la flor. */
.foto-pieza{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px}
.foto-pieza img{display:block; background:#fff; border:1px solid var(--borde); border-radius:8px;
  object-fit:contain; box-shadow:0 6px 18px rgba(54,42,33,.10)}

/* Caja fija y la foto adentro. Si se deja que la imagen mande el ancho, mientras no
   carga mide catorce pixeles y la rejilla brinca cuando cargan las 66. */
.tarjeta .arte .foto-pieza{height:100%; width:100%}
.tarjeta .arte .foto-pieza img{height:100%; width:100%; padding:5px}

.ficha-arte .foto-pieza{width:100%}
.ficha-arte .foto-pieza img{width:100%; height:420px; padding:10px}
@media(max-width:880px){.ficha-arte .foto-pieza img{height:min(66vw,420px)}}

/* Lo unico que la foto no puede decir: el color lo elige el cliente, y la vela se hace
   despues de que lo elige. Mas vale que lo lea aqui que cuando abra la caja. */
.foto-nota{display:flex; align-items:center; gap:10px; text-align:left;
  font-family:var(--ui); font-size:.76rem; line-height:1.5; color:var(--tinta-suave)}
.cera-chip{width:16px; height:16px; border-radius:50%; flex:none; background:var(--kraft-hondo);
  border:1px solid rgba(54,42,33,.22); transition:background .45s ease}
.ficha h1{font-size:clamp(2rem,4.4vw,3rem)}
.ficha .familia-liga{font-family:var(--ui); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--olivo); text-decoration:none}
.ficha .precio-grande{font-family:var(--serif); font-size:2.2rem; color:var(--terracota); margin-top:16px}
.ficha .med{font-family:var(--ui); font-size:.86rem; color:var(--tinta-suave); margin-top:8px}
.paso{padding:22px 0; border-bottom:1px dashed var(--borde)}
.paso-tit{display:flex; align-items:baseline; gap:12px; margin-bottom:12px}
.paso-tit .num{font-family:var(--serif); color:var(--cochinilla); font-size:.95rem}
.paso-tit h3{font-family:var(--serif); font-weight:400; font-size:1.2rem; margin:0}
.paso-tit small{font-family:var(--ui); color:var(--tinta-suave); font-size:.78rem; margin-left:auto}
.muestras{display:flex; flex-wrap:wrap; gap:10px}
.muestra{width:44px; height:52px; border-radius:50% 50% 46% 46% / 62% 62% 38% 38%; border:2px solid transparent;
  padding:0; box-shadow:inset 0 -5px 9px rgba(54,42,33,.14); transition:transform .2s; cursor:pointer}
.muestra:hover{transform:translateY(-3px)}
.muestra.on{border-color:var(--tinta); transform:translateY(-3px)}
.grupo-tit{font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--olivo); margin:12px 0 8px}
.fichas{display:flex; flex-wrap:wrap; gap:8px}
.ficha-chip{font-family:var(--ui); border:1.5px solid var(--borde); background:var(--marfil); color:var(--tinta);
  border-radius:99px; padding:9px 15px; font-size:.82rem; min-height:42px; cursor:pointer; transition:all .25s}
.ficha-chip:hover{border-color:var(--terracota)}
.ficha-chip.on{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.campo{width:100%; border:1px solid var(--borde); border-radius:8px; background:var(--marfil); color:var(--tinta);
  padding:13px 15px; font-family:var(--serif); font-style:italic; font-size:1.02rem; outline:none}
.campo:focus{border-color:var(--terracota)}
.campo-ui{font-family:var(--ui); font-style:normal}
.pista{font-family:var(--ui); font-size:.8rem; color:var(--tinta-suave); margin-top:8px}
.elegido{font-family:var(--ui); font-size:.8rem; color:var(--tinta-suave)}

/* ---------------- carrito ---------------- */
.pag{padding:130px 0 90px}
.pag h1{font-size:clamp(2rem,4.4vw,3rem)}
.linea{display:grid; grid-template-columns:70px 1fr auto; gap:18px; padding:22px 0;
  border-bottom:1px solid var(--borde); align-items:center}
@media(max-width:600px){.linea{grid-template-columns:56px 1fr; row-gap:12px}.linea .der{grid-column:2; text-align:left; align-items:flex-start}}
.linea .mini{width:70px; height:86px; border-radius:8px; border:1px solid var(--borde);
  background:var(--marfil); display:flex; align-items:center; justify-content:center; overflow:hidden}
.linea .mini i{display:block; width:30px; height:44px; border-radius:5px 5px 3px 3px}
.linea .nom{font-family:var(--serif); font-size:1.15rem}
.linea .det{font-family:var(--ui); font-size:.78rem; color:var(--tinta-suave); margin-top:3px}
.linea .ded{font-family:var(--serif); font-style:italic; font-size:.86rem; color:var(--tinta-suave); margin-top:4px}
.cant{display:inline-flex; align-items:center; gap:8px; margin-top:10px}
.cant a{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--borde); background:var(--marfil);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-family:var(--ui)}
.cant a:hover{border-color:var(--terracota); color:var(--terracota)}
.cant span{min-width:26px; text-align:center; font-family:var(--ui); font-variant-numeric:tabular-nums}
.linea .der{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.linea .der .precio{font-family:var(--serif); color:var(--terracota); font-size:1.2rem}
.quitar{font-family:var(--ui); background:none; border:none; color:var(--tinta-suave); font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; padding:12px 0; min-height:44px; text-decoration:none}
.quitar:hover{color:var(--terracota)}
.resumen{background:var(--kraft); border:1px solid var(--borde); border-radius:12px; padding:26px 28px;
  position:sticky; top:96px}
@media(max-width:880px){.resumen{position:relative; top:0}}
.fila{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0}
.fila .t{font-family:var(--ui); color:var(--tinta-suave); font-size:.9rem}
.fila .v{font-family:var(--serif); font-size:1.15rem}
.fila.total{border-top:1px dashed var(--borde); margin-top:8px; padding-top:16px}
.fila.total .v{font-size:1.7rem; color:var(--terracota)}
.resumen .btn{width:100%; margin-top:10px}
.resumen .peq{font-family:var(--ui); font-size:.78rem; color:var(--tinta-suave); margin-top:12px}
.carrito-rejilla{display:grid; grid-template-columns:1.6fr 1fr; gap:44px; align-items:start}
@media(max-width:880px){.carrito-rejilla{grid-template-columns:minmax(0,1fr); gap:28px}}
.vacio{text-align:center; padding:70px 20px; color:var(--tinta-suave)}
.vacio h2{margin-bottom:12px}

/* ---------------- pie ---------------- */
footer{border-top:1px dashed rgba(142,59,59,.4); padding:60px 28px 34px;
  color:var(--tinta-suave); font-family:var(--ui); font-size:.88rem}
.pie{max-width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start}
@media(max-width:760px){.pie{grid-template-columns:1fr}}
.pie .logo{font-size:1.5rem}
.pie .zap{font-family:var(--serif); font-style:italic; color:var(--tinta); margin-top:14px}
.pie h4{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olivo); margin:0 0 14px}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--terracota)}
.legales{max-width:var(--ancho); margin:40px auto 0; padding-top:20px; border-top:1px solid var(--borde);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.76rem; opacity:.85}

/* ---------------- panel ---------------- */
.panel{padding:110px 0 70px}
.panel-cab{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.panel-nav{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px}
.tabla{width:100%; border-collapse:collapse; background:var(--marfil); border:1px solid var(--borde);
  border-radius:8px; overflow:hidden; font-family:var(--ui); font-size:.88rem}
.tabla th,.tabla td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--borde)}
.tabla th{background:var(--kraft); font-family:var(--serif); font-weight:400; font-size:.98rem}
.tabla tr:last-child td{border-bottom:none}
.tabla .num{text-align:right; font-variant-numeric:tabular-nums}
.tabla .flaco{color:var(--cochinilla); font-weight:700}
.scroll-x{overflow-x:auto}
.tarjetas-num{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px}
.num-caja{background:var(--kraft); border:1px solid var(--borde); border-radius:10px; padding:18px 20px}
.num-caja b{display:block; font-family:var(--serif); font-size:1.9rem; color:var(--terracota); line-height:1}
.num-caja span{font-family:var(--ui); font-size:.78rem; color:var(--tinta-suave)}
.acceso{max-width:420px; margin:150px auto 90px; background:var(--kraft); border:1px solid var(--borde);
  border-radius:12px; padding:34px 32px}
.acceso h1{font-size:1.9rem; margin-bottom:6px}
.acceso p{font-family:var(--ui); font-size:.88rem; color:var(--tinta-suave); margin-bottom:22px}
.acceso label{display:block; font-family:var(--ui); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-suave); margin:16px 0 6px}
.acceso .btn{width:100%; margin-top:22px}
.estado{font-family:var(--ui); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 12px; border-radius:99px; border:1px solid var(--borde); background:var(--papel)}
.estado.pagada{border-color:var(--olivo); color:var(--olivo)}
.estado.nueva{border-color:var(--ambar); color:#8A5A16}
.estado.cancelada{border-color:var(--cochinilla); color:var(--cochinilla)}

/* ---- Como va mi pedido -------------------------------------------------- */
.buscar-pedido{display:grid; grid-template-columns:1fr 1.4fr auto; gap:14px; align-items:end;
  margin-top:26px; max-width:720px}
.buscar-pedido label{display:block; font-family:var(--ui); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-suave); margin-bottom:6px}
.buscar-pedido .btn{white-space:nowrap}
@media(max-width:640px){.buscar-pedido{grid-template-columns:minmax(0,1fr)}
  .buscar-pedido .btn{width:100%}}

.ficha-pedido{margin-top:30px; background:var(--kraft); border:1px solid var(--borde);
  border-radius:12px; padding:28px 30px}
.ficha-pedido .cab{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.ficha-pedido .folio{font-family:var(--serif); font-size:1.7rem; letter-spacing:.03em; margin:0}
.ficha-pedido .estado.en-taller{border-color:var(--ambar); color:#8A5A16}
.ficha-pedido .estado.enviada{border-color:var(--olivo); color:var(--olivo)}
.ficha-pedido .estado.entregada{border-color:var(--olivo); color:#fff; background:var(--olivo)}

/* el riel: donde va y lo que falta. La que esta en curso lleva la flama viva. */
.riel{list-style:none; margin:26px 0 4px; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:0}
.riel li{position:relative; padding-top:26px; text-align:center; font-family:var(--ui);
  font-size:.76rem; color:var(--tinta-suave)}
.riel li::before{content:""; position:absolute; top:8px; left:0; right:50%; height:2px;
  background:var(--borde)}
.riel li::after{content:""; position:absolute; top:8px; left:50%; right:0; height:2px;
  background:var(--borde)}
.riel li:first-child::before, .riel li:last-child::after{display:none}
.riel li i{position:absolute; top:0; left:50%; width:18px; height:18px; margin-left:-9px;
  border-radius:50%; background:var(--papel); border:2px solid var(--borde); display:block}
.riel li.hecho::before, .riel li.hecho::after,
.riel li.aqui::before{background:var(--terracota)}
.riel li.hecho i{background:var(--terracota); border-color:var(--terracota)}
.riel li.aqui i{background:var(--ambar); border-color:var(--ambar);
  box-shadow:0 0 0 5px rgba(232,161,61,.22)}
.riel li.hecho, .riel li.aqui{color:var(--tinta)}
.riel li.aqui span{color:var(--terracota)}
@media(max-width:560px){
  .riel{grid-template-columns:minmax(0,1fr); gap:0; margin-left:4px}
  .riel li{padding:0 0 18px 30px; text-align:left}
  .riel li::before{top:-9px; left:8px; right:auto; bottom:auto; width:2px; height:18px}
  .riel li::after{top:9px; left:8px; right:auto; width:2px; height:100%}
  .riel li i{top:0; left:0; margin-left:0}
}

.ficha-pedido .lineas{margin-top:28px; border-top:1px dashed var(--borde)}
.ficha-pedido .renglon{display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; padding:14px 0; border-bottom:1px dashed var(--borde)}
.ficha-pedido .renglon b{font-family:var(--serif); font-weight:400; font-size:1.16rem}
.ficha-pedido .renglon .aroma{font-family:var(--serif); font-style:italic; font-size:.92rem;
  color:var(--tinta-suave); margin-top:4px}
.ficha-pedido .importe{font-family:var(--serif); font-size:1.1rem; white-space:nowrap}
.ficha-pedido .cuentas{margin-top:18px; margin-left:auto; max-width:280px; font-family:var(--ui)}
.ficha-pedido .cuentas div{display:flex; justify-content:space-between; gap:20px; padding:5px 0;
  font-size:.9rem; color:var(--tinta-suave)}
.ficha-pedido .cuentas .total{font-family:var(--serif); font-size:1.4rem; color:var(--terracota);
  border-top:1px solid var(--borde); margin-top:8px; padding-top:12px}
.ficha-pedido .va-a{margin-top:26px; padding-top:20px; border-top:1px dashed var(--borde)}
@media(max-width:560px){
  .ficha-pedido{padding:22px 18px}
  /* el folio no se parte a la mitad: es lo que el cliente va a leer en voz alta */
  .ficha-pedido .cab{flex-direction:column; align-items:flex-start; gap:10px}
  .ficha-pedido .folio{font-size:1.42rem; white-space:nowrap}
  .ficha-pedido .cuentas{max-width:none}
}

/* ---- el envio en el carrito ---------------------------------------------- */
.envio-caja{position:relative; padding-bottom:18px; margin-bottom:6px;
  border-bottom:1px dashed var(--borde)}
.envio-cp{display:flex; gap:8px}
.envio-cp .campo{flex:1; min-width:0; padding:9px 12px; font-size:.9rem}
.envio-cp .btn-chico{white-space:nowrap; padding:9px 16px}
.envio-ops{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.envio-op{display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; align-items:center;
  padding:10px 12px; border:1px solid var(--borde); border-radius:8px; cursor:pointer;
  background:var(--papel); transition:border-color .2s ease, background .2s ease}
.envio-op:hover{border-color:var(--terracota)}
.envio-op.on{border-color:var(--terracota); background:var(--marfil)}
.envio-op input{margin:0; accent-color:var(--terracota); grid-row:span 2}
.envio-op .nom{font-family:var(--ui); font-size:.86rem}
.envio-op .cost{font-family:var(--serif); font-size:1.05rem; color:var(--terracota); grid-row:span 2}
.envio-op .dias{grid-column:2; font-family:var(--ui); font-size:.72rem; color:var(--tinta-suave)}


/* ---- la marca ------------------------------------------------------------
   El mark entra al encabezado; el nombre se queda en la Palatino del sitio.
   En la barra va la REDUCCION: a este tamaño la marca fiel es una mancha. */
.logo .marca{width:50px; height:50px; margin-right:15px; color:var(--terracota);
  flex:0 0 auto; align-self:center; transition:color .25s ease}
.logo:hover .marca{color:var(--tinta)}
@media(max-width:560px){
  .logo .marca{width:40px; height:40px; margin-right:11px}
  .logo{font-size:1.16rem; letter-spacing:.26em}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}