/* =========================================================
   COMERCIAL DE LEÓN
   Paleta oficial de la marca (ficha de color del logo):
   azul eléctrico, cian brillante y azul profundo.
   ========================================================= */

:root{
  --azul:    #0096E6; /* azul eléctrico */
  --azul-lt: #00C8F0; /* cian brillante */
  --azul-dp: #0875C9; /* azul profundo */

  --radio: 14px;
  --radio-sm: 9px;
  --wrap: 1180px;
  --f-disp: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- tema claro ---------- */
:root{
  color-scheme: light;
  --bg:     #F1F4F3;
  --bg-2:   #FFFFFF;
  --bg-3:   #E4E9E7;
  --txt:    #141B1A;
  --txt-2:  #4E5A58;
  --txt-3:  #6C7876;
  --linea:  rgba(20,27,26,.13);
  --linea-2:rgba(20,27,26,.26);
  --acento: var(--azul);
  --sombra: 0 24px 60px -34px rgba(20,27,26,.35);
  --grano:  .018;
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:     #0E1413;
    --bg-2:   #161D1C;
    --bg-3:   #1B2322;
    --txt:    #E9EEEC;
    --txt-2:  #A3AFAC;
    --txt-3:  #7F8B89;
    --linea:  rgba(233,238,236,.14);
    --linea-2:rgba(233,238,236,.28);
    --acento: var(--azul-lt);
    --sombra: 0 30px 70px -38px rgba(0,0,0,.8);
    --grano:  .04;
  }
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--f-body);font-size:clamp(15.5px,.5vw + 14px,17px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:800;line-height:1.03;letter-spacing:-.022em}
p{margin:0}
button{background:none;border:0;cursor:pointer;font:inherit;color:inherit}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
::selection{background:var(--azul);color:#fff}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite symbol{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto}
.verde{color:var(--acento)}

/* grano: le quita el plástico a los fondos planos */
body::after{
  content:'';position:fixed;inset:0;z-index:900;pointer-events:none;opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- apariciones ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important}
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-disp);font-weight:700;font-size:.95rem;
  padding:.85rem 1.4rem;border-radius:999px;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn--solido{background:var(--azul);color:#fff;box-shadow:0 10px 26px -14px var(--azul)}
.btn--solido:hover{background:var(--azul-dp)}
.btn--linea{border:1px solid var(--linea-2);color:var(--txt)}
.btn--linea:hover{border-color:var(--acento);color:var(--acento)}
.btn--ig{background:var(--txt);color:var(--bg);padding:.6rem 1.05rem;font-size:.87rem}
.btn--ig:hover{background:var(--azul);color:#fff}

.enlace{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-disp);font-weight:700;color:var(--acento);
  transition:gap .3s var(--ease);
}
.enlace:hover{gap:.85rem}
.enlace--mas{margin-top:1.6rem}

/* ---------- barra ---------- */
.barra{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),background .35s;
}
.barra.pegada{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--linea);
}
.barra__row{display:flex;align-items:center;gap:1.6rem;height:76px}
.marca{display:flex;align-items:center;gap:.65rem;flex:none}
/* el logo es fino y con detalle: a este tamano necesita un fondo oscuro
   detras para leerse, si no se pierde contra la barra clara */
.marca__ico{
  width:40px;height:40px;flex:none;object-fit:contain;border-radius:50%;
  background:#0c1210;padding:3px;box-sizing:border-box;
}
.marca__txt{font-family:var(--f-disp);font-weight:800;font-size:1.12rem;letter-spacing:-.025em}
.marca__txt em{font-style:normal;font-weight:500;color:var(--txt-2)}
.barra__nav{display:flex;gap:1.6rem;margin-left:auto;font-size:.92rem;color:var(--txt-2)}
.barra__nav a{position:relative;padding:.3rem 0;transition:color .25s}
.barra__nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acento);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.barra__nav a:hover{color:var(--txt)}
.barra__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.barra__cta{flex:none}
.burger{display:none;padding:.4rem;color:var(--txt)}
.burger .ico{width:26px;height:26px}

.menu{
  display:none;flex-direction:column;gap:.2rem;padding:1rem 1.2rem 1.6rem;
  background:var(--bg-2);border-top:1px solid var(--linea);
}
.menu.abierto{display:flex}
.menu a{padding:.75rem 0;font-family:var(--f-disp);font-weight:700;font-size:1.05rem;
  border-bottom:1px solid var(--linea)}
.menu a:last-child{border-bottom:0}
.menu__ig{color:var(--acento)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(3rem,9vw,6.5rem) 0 clamp(2rem,4vw,3rem);overflow:hidden}
.hero__vidrio{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:end}
/* el texto arranca arriba: si heredaba el align-items:end del grid, el
   titulo quedaba empujado hacia abajo por la altura del tecnico */
.hero__txt{padding-bottom:clamp(.5rem,3vw,2rem);align-self:start}
/* el tecnico se apoya en la base del hero, como si estuviera de pie ahi */
.hero__tec{margin:0;align-self:end;justify-self:center}
.hero__tec img{width:100%;max-width:360px;height:auto;
  filter:drop-shadow(0 26px 40px rgba(20,27,26,.22))}
/* el ancho se limita en los hijos: ponerlo en .wrap heredaba su
   margin-inline:auto y centraba todo el hero */
.hero__h1{max-width:15ch}
.hero__ubi{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-disp);font-weight:700;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-2);
  background:color-mix(in srgb, var(--bg-2) 80%, transparent);
  border:1px solid var(--linea);border-radius:999px;padding:.4rem .85rem;margin-bottom:1.4rem;
}
.hero__ubi .ico{width:15px;height:15px;color:var(--acento)}
.hero__h1{font-size:clamp(2.6rem,7.5vw,5.2rem);letter-spacing:-.035em;margin-bottom:1.2rem}
.hero__sub{color:var(--txt-2);font-size:clamp(1rem,1.7vw,1.18rem);max-width:44ch;margin-bottom:2rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* ficha: las tres cosas que alguien quiere saber antes de escribir */
.ficha{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;margin-top:clamp(2.5rem,6vw,4rem);
}
.ficha > div{background:color-mix(in srgb, var(--bg-2) 92%, transparent);padding:1.15rem 1.3rem}
.ficha dt{
  font-family:var(--f-disp);font-weight:700;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:.35rem;
}
.ficha dd{font-size:.94rem;color:var(--txt)}

/* ---------- secciones ---------- */
.sec{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--linea)}
.sec__cab{max-width:56ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec__num{
  display:block;font-family:var(--f-disp);font-weight:700;font-size:.75rem;
  letter-spacing:.16em;color:var(--acento);margin-bottom:.7rem;
}
.sec__h2{font-size:clamp(1.75rem,4vw,2.6rem);margin-bottom:.6rem}
.sec__lede{color:var(--txt-2);max-width:52ch}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pieza{
  background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
}
.pieza:hover{transform:translateY(-5px);border-color:var(--acento);box-shadow:var(--sombra)}
.pieza img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s var(--ease)}
.pieza:hover img{transform:scale(1.04)}
.pieza__txt{padding:1.25rem 1.35rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.pieza__txt h3{font-size:1.18rem}
.pieza__txt p{color:var(--txt-2);font-size:.93rem}
.pieza__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem}
.pieza__tags i{
  font-style:normal;font-family:var(--f-disp);font-weight:700;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3);
  border:1px solid var(--linea);border-radius:999px;padding:.25rem .6rem;
}
/* la primera y la ultima ocupan dos columnas: con cuatro piezas en tres
   columnas, si no, la segunda fila deja una celda vacia */
.pieza--ancha{grid-column:span 2;flex-direction:row}
.bento .pieza:last-child{grid-column:span 2}
.pieza--ancha img{width:46%;height:auto;aspect-ratio:auto;object-fit:cover;align-self:stretch}
.pieza--ancha .pieza__txt{padding:clamp(1.4rem,2.6vw,2rem)}
.pieza--ancha h3{font-size:1.45rem}

/* ---------- cotizador ---------- */
.quoter{
  display:grid;grid-template-columns:1.5fr .85fr;gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;
}
/* min-width:0 en los hijos del grid: si no, el ancho intrínseco de los
   inputs (size=20 por defecto) estira la columna y desborda en móvil */
.quoter__main,.quoter__resumen{min-width:0}
.quoter__main{background:var(--bg-2);padding:clamp(1.5rem,3vw,2.5rem)}
.quoter__bar{height:2px;background:var(--bg-3);margin-bottom:1.1rem}
.quoter__bar span{display:block;height:100%;width:33.33%;background:var(--azul);transition:width .45s var(--ease)}
.quoter__steps{display:flex;gap:1.4rem;margin-bottom:2rem;font-size:.8rem;
  font-family:var(--f-disp);font-weight:700;color:var(--txt-3);flex-wrap:wrap}
.quoter__steps .is-on{color:var(--acento)}

.qstep{display:none;animation:entra .4s var(--ease)}
.qstep.is-on{display:block}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qstep__q{font-family:var(--f-disp);font-weight:800;font-size:1.15rem;margin-bottom:1rem;color:var(--txt)}

.opts{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem}
.opts--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt{
  display:flex;align-items:center;gap:.6rem;text-align:left;
  padding:.8rem 1rem;border:1px solid var(--linea-2);color:var(--txt);
  font-family:var(--f-disp);font-weight:600;font-size:.9rem;background:var(--bg-2);
  border-radius:var(--radio-sm);
  transition:background .25s,border-color .25s,color .25s;
}
.opt:hover{border-color:var(--azul-lt);background:var(--bg-3)}
.opt.is-on{background:var(--azul);border-color:var(--azul);color:#fff}
.opt svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;opacity:.8}
.opt.is-on svg{opacity:1}

.qfield{margin-bottom:1.5rem}
.qfield__lab{display:block;font-family:var(--f-disp);font-weight:700;font-size:.92rem;
  margin-bottom:.55rem;color:var(--txt)}
.qfield__lab em{font-style:normal;font-weight:500;color:var(--txt-3)}
.qfield input[type=text],.qfield textarea{
  width:100%;padding:.8rem .95rem;border:1px solid var(--linea-2);background:var(--bg-2);
  color:var(--txt);border-radius:8px;transition:border-color .25s;resize:vertical;
  font-family:var(--f-body);font-size:1rem;
}
.qfield input:focus,.qfield textarea:focus{border-color:var(--azul-lt);outline:none}
.qfield input::placeholder,.qfield textarea::placeholder{color:var(--txt-3)}

.stepper{display:inline-flex;align-items:center;border:1px solid var(--linea-2);border-radius:8px;overflow:hidden}
.stepper button{width:42px;height:44px;display:grid;place-items:center;color:var(--txt-2);transition:background .2s}
.stepper button:hover{background:var(--bg-3)}
.stepper input{width:60px;height:44px;text-align:center;border:0;border-inline:1px solid var(--linea-2);
  font-family:var(--f-disp);font-weight:700;background:var(--bg-2);color:var(--txt)}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield}

.medidas{display:flex;align-items:center;gap:.7rem}
.medidas label{position:relative;flex:1 1 0;min-width:0;max-width:180px}
.medidas input{min-width:0}
.medidas label span{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  color:var(--txt-3);font-size:.85rem;pointer-events:none}
.medidas b{color:var(--txt-3);font-weight:500}
.qhint{display:flex;align-items:center;gap:.45rem;margin-top:.6rem;font-size:.85rem;color:var(--txt-2)}
.qhint .ico{color:var(--azul-lt);width:14px;height:14px}

.quoter__nav{display:flex;gap:.7rem;align-items:center;padding-top:1.2rem;border-top:1px solid var(--linea)}
.btn--sm{padding:.7rem 1.1rem;font-size:.88rem}
.btn[disabled]{opacity:.35;pointer-events:none}

/* el resumen es una tarjeta oscura fija: ancla el cotizador y hace que el
   pedido se lea como algo ya escrito, sin depender del tema claro/oscuro */
.quoter__resumen{
  --bg-2:#101317; --txt:#ECEEF0; --txt-3:#7E888F;
  --linea:rgba(236,238,240,.13); --acento:var(--azul-lt);
  background:var(--bg-2);color:var(--txt);padding:clamp(1.5rem,3vw,2.2rem);
  display:flex;flex-direction:column;
}
.resumen__lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--acento);
  font-weight:600;padding-bottom:.8rem;border-bottom:1px solid var(--linea);margin-bottom:1.1rem}
.resumen__list{display:grid;gap:.6rem;flex:1;align-content:start}
.resumen__list li{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;
  padding-bottom:.55rem;border-bottom:1px dashed var(--linea)}
.resumen__list li b{font-weight:500;color:var(--txt-3)}
.resumen__list li span{text-align:right;color:var(--txt);font-weight:500}
.resumen__list .is-empty{color:var(--txt-3);border:0;display:block}
.resumen__pie{margin-top:1.4rem;font-size:.82rem;color:var(--txt-3);line-height:1.5}

/* ---------- muestrario de vidrios ---------- */
.sec--muestras{background:var(--bg-3)}
.muestras{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1rem}
.muestras li{
  background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--radio-sm);
  padding:1rem;display:flex;flex-direction:column;gap:.45rem;
  transition:border-color .35s,transform .35s var(--ease);
}
.muestras li:hover{border-color:var(--acento);transform:translateY(-3px)}
.muestras b{font-family:var(--f-disp);font-weight:700;font-size:1rem}
.muestras i{font-style:normal;color:var(--txt-2);font-size:.83rem;line-height:1.45}
/* cada muestra imita el material: el brillo de arriba es el reflejo,
   la línea de abajo es el canto */
.m{
  display:block;height:62px;border-radius:6px;margin-bottom:.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(20,90,78,.45);
}
.m--claro  {background:linear-gradient(145deg,#EAF4F1,#CFE4DE 55%,#DCEDE8)}
.m--bronce {background:linear-gradient(145deg,#C7A882,#8C6E4C 55%,#B29470)}
.m--reflect{background:linear-gradient(145deg,#DCE6EC,#8FA6B4 40%,#C3D3DC 70%,#7E97A6)}
.m--esmer  {background:linear-gradient(145deg,#F2F5F4,#DDE5E3);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(20,90,78,.3)}
.m--templ  {background:linear-gradient(145deg,#E3F1EC,#B9DBD1 55%,#D3E9E2);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(16,110,92,.7)}
.m--espejo {background:linear-gradient(145deg,#F4F6F6,#AFBCC0 30%,#EDF1F1 52%,#9FAEB3 74%,#DDE4E4)}

/* ---------- al por mayor ---------- */
.sec--mayor{background:var(--txt);color:var(--bg)}
.sec--mayor .sec__h2{color:var(--bg)}
.sec--mayor .sec__num{color:var(--azul-lt)}
.mayor{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:start}
.mayor__marca{
  width:64px;height:64px;flex:none;border-radius:var(--radio);
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--azul-lt),var(--azul-dp));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.mayor__marca .ico{width:30px;height:30px}
.mayor__txt p{color:color-mix(in srgb, var(--bg) 74%, transparent);margin:.9rem 0;max-width:56ch}
.sec--mayor .enlace{color:var(--azul-lt)}

/* ---------- guías ---------- */
.guias{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.guia{
  background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;
  transition:transform .4s var(--ease),border-color .4s;
}
.guia:hover{transform:translateY(-4px);border-color:var(--acento)}
.guia time{
  font-family:var(--f-disp);font-weight:700;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);
}
.guia h3{font-size:1.1rem;line-height:1.25}
.guia:hover h3{color:var(--acento)}
.guia p{color:var(--txt-2);font-size:.9rem;flex:1}
.guia__ir{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-disp);
  font-weight:700;font-size:.85rem;color:var(--acento);transition:gap .3s var(--ease);
}
.guia:hover .guia__ir{gap:.8rem}

/* ---------- dónde ---------- */
.donde{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.donde p{color:var(--txt-2);max-width:50ch;margin-bottom:1.2rem}
.donde__dir{
  display:flex;gap:.75rem;font-family:var(--f-disp);font-weight:700;
  font-size:1.15rem;color:var(--txt);line-height:1.35;margin-bottom:1.3rem;
}
.donde__dir em{font-family:var(--f-body);font-style:normal;font-weight:400;
  font-size:.95rem;color:var(--txt-2)}
.ico--pin{width:22px;height:22px;color:var(--acento);margin-top:3px}
.donde__cta{
  background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column;
  align-items:flex-start;gap:.85rem;
}
.donde__cta h3{font-size:1.3rem}
.donde__cta p{margin-bottom:.3rem}
.ico--regla{width:34px;height:34px;color:var(--acento);margin-bottom:.2rem}

/* ---------- pie ---------- */
.pie{background:var(--txt);color:var(--bg);padding:clamp(2.5rem,5vw,3.5rem) 0}
.pie__row{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:2rem;align-items:start}
.pie p{color:color-mix(in srgb, var(--bg) 70%, transparent);font-size:.92rem;margin-top:.7rem}
.marca__txt--pie em{color:color-mix(in srgb, var(--bg) 64%, transparent)}
.pie__nav{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.pie__nav a{color:color-mix(in srgb, var(--bg) 78%, transparent);transition:color .25s}
.pie__nav a:hover{color:var(--azul-lt)}
.pie__links{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.pie__links > a{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;transition:color .25s}
.pie__links > a:hover{color:var(--azul-lt)}
.pie__by{font-size:.84rem;color:color-mix(in srgb, var(--bg) 55%, transparent)}
.pie__by a{text-decoration:underline;text-underline-offset:3px}

/* ---------- blog ---------- */
.sec--art,.sec--blog{padding-top:clamp(2.5rem,6vw,4rem)}
.migas{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.82rem;color:var(--txt-3);margin-bottom:1.6rem}
.migas a{transition:color .25s}
.migas a:hover{color:var(--acento)}
.migas span[aria-hidden]{opacity:.5}
.art{max-width:70ch;margin-inline:auto}
.art__fecha{display:block;font-family:var(--f-disp);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.8rem}
.art h1{font-size:clamp(1.9rem,5vw,3rem);margin-bottom:1rem}
.art__lede{color:var(--txt-2);font-size:clamp(1rem,1.9vw,1.14rem);margin-bottom:2rem}
.art h2{font-size:clamp(1.25rem,2.7vw,1.55rem);margin:2.3rem 0 .7rem}
.art p{color:var(--txt-2);margin-bottom:.85rem}
.art p strong{color:var(--txt);font-weight:600}
.art a:not(.btn):not(.enlace){color:var(--acento);text-decoration:underline;text-underline-offset:3px}
.art__cierre{
  background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(1.4rem,3vw,1.9rem);margin-top:2.5rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
}

/* ---------- móvil ---------- */
@media (max-width:980px){
  .bento,.guias{grid-template-columns:repeat(2,1fr)}
  .pieza--ancha{grid-column:span 2}
  .pie__row{grid-template-columns:1fr 1fr}
  .quoter{grid-template-columns:1fr}
}
@media (max-width:820px){
  .barra__nav,.barra__cta{display:none}
  .burger{display:block;margin-left:auto}
  .donde{grid-template-columns:1fr}
  .pieza--ancha{flex-direction:column}
  .pieza--ancha img{width:100%;aspect-ratio:16/9}
}
@media (max-width:620px){
  .barra__row{height:66px}
  .ficha{grid-template-columns:1fr}
  .bento,.guias{grid-template-columns:1fr}
  /* a una columna, el span 2 creaba una columna fantasma de 2px */
  .pieza--ancha,.bento .pieza:last-child{grid-column:span 1}
  .mayor{grid-template-columns:1fr}
  .pie__row{grid-template-columns:1fr}
  .hero__cta .btn{flex:1;justify-content:center}
  .muestras{grid-template-columns:repeat(2,1fr)}
  .quoter__steps{gap:.9rem;font-size:.74rem}
  .opts--grid{grid-template-columns:1fr 1fr}
  .medidas label{max-width:none}
}


/* ---------- teléfono en la barra ---------- */
.tel-barra{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--txt-2);
  font-variant-numeric:tabular-nums;transition:color .25s;flex:none;
}
.tel-barra:hover{color:var(--acento)}
.tel-barra .ico{width:15px;height:15px}

/* ---------- botón de WhatsApp ---------- */
.btn--wa{background:var(--azul);color:#fff;box-shadow:0 10px 26px -14px var(--azul)}
.btn--wa:hover{background:var(--azul-dp)}
.barra__cta.btn--wa{padding:.6rem 1.1rem;font-size:.87rem}

/* ---------- el corte va incluido ---------- */
.sec--corte{background:var(--bg-3)}
.corte{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.corte__foto{margin:0;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);
  box-shadow:var(--sombra)}
.corte__foto img{width:100%;height:auto;display:block}
.corte__grande{
  font-family:var(--f-disp);font-weight:800;font-size:clamp(1.3rem,3.2vw,1.75rem);
  line-height:1.15;color:var(--acento);letter-spacing:-.02em;margin:.2rem 0 1rem;
}
.corte__txt p{color:var(--txt-2);margin-bottom:.8rem;max-width:52ch}
.corte__nota{font-size:.86rem;color:var(--txt-3);border-left:2px solid var(--linea);
  padding-left:.9rem;margin-top:1.2rem}

/* ---------- al por mayor con foto ---------- */
.mayor{grid-template-columns:1.1fr .9fr;align-items:center}
.mayor__foto{margin:0;border-radius:var(--radio);overflow:hidden;
  border:1px solid rgba(233,238,236,.16)}
.mayor__foto img{width:100%;height:auto;display:block}

/* ---------- dónde, con la foto del frente ---------- */
.donde__contacto{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 1.2rem}
.donde__foto{margin:0}
.donde__foto img{width:100%;height:auto;border-radius:var(--radio);
  border:1px solid var(--linea);display:block}
.donde__foto figcaption{margin-top:.7rem;font-size:.86rem;color:var(--txt-3)}
.donde__mapa{
  margin-top:1.4rem;border-radius:var(--radio);border:1px solid var(--linea);
  overflow:hidden;aspect-ratio:2/1;
}
.donde__mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)}

/* ---------- las guías llevan cabecera ---------- */
.guia{padding:0;overflow:hidden}
.guia__foto{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.guia:hover .guia__foto{transform:scale(1.04)}
.guia__cuerpo{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}

@media (max-width:900px){
  .corte,.mayor{grid-template-columns:1fr}
  .corte__foto{order:-1}
}
@media (max-width:820px){
  .tel-barra{display:none}
}
@media (max-width:620px){
  .hero__grid{grid-template-columns:1fr}
  .hero__tec img{max-width:250px}
  .donde__contacto .btn{flex:1;justify-content:center}
}