/* ==========================================================================
   MATISA · Distribuidora ferretera — catálogo en línea

   Tipografía tomada del propio logotipo:
     · Alfa Slab One  — egipcia ultranegra, las mismas serifas de cuña
                        del rótulo MATISA. Sólo en títulos.
     · EB Garamond itálica — la segunda voz del logo, la de
                        «Distribuidora ferretera». Sólo en frases cortas.
     · IBM Plex Mono  — medidas y códigos, como marcas grabadas en la pieza.
     · Los textos corrientes usan la fuente del sistema (0 KB).
   Las tres primeras se sirven desde este mismo dominio: ver fuentes.css
   ========================================================================== */

:root{
  --navy:      #2C2A6F;   /* azul del logotipo */
  --navy-osc:  #1D1B4D;
  --tinta:     #221F1F;   /* negro del logotipo */
  --laton:     #9A6F14;   /* latón: acento de medidas */
  --laton-luz: #F4EBD6;
  --laton-claro:#E8C878;   /* latón sobre fondo azul */
  --acero:     #E7E9EF;   /* fondo, gris galvanizado frío */
  --acero-osc: #D2D6E0;
  --papel:     #FFFFFF;
  --linea:     #C4C9D6;
  --gris:      #5C6172;
  --verde:     #128C4A;   /* WhatsApp, sólo en llamadas a la acción */
  --verde-osc: #0E6E3A;

  --f-display: "Alfa Slab One", Rockwell, Georgia, serif;
  --f-italica: "EB Garamond", Georgia, "Times New Roman", serif;
  /* Los textos corrientes van con la fuente nativa del aparato: pesa cero,
     aparece al instante y se lee igual de bien en Android, iPhone y Windows. */
  --f-texto:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --alto-barra: 84px;
  --r: 3px;
  --sombra: 0 1px 2px rgba(34,31,31,.06), 0 8px 24px -12px rgba(34,31,31,.18);
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box }

/* Sin esto, un display:flex o inline-block de una clase le gana al atributo
   hidden y el elemento se sigue viendo (el teléfono de la cabecera, por ejemplo). */
[hidden]{ display:none !important }

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

body{
  margin:0;
  background:var(--acero);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }

.contenedor{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:20px }

.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{ outline:3px solid var(--laton); outline-offset:2px }

/* ---------- Encabezado ------------------------------------------------- */

.barra{ background:var(--papel); border-bottom:1px solid var(--linea) }
@media (min-width:760px){ .barra{ position:sticky; top:0; z-index:40 } }

.barra__interior{
  display:flex; align-items:center; gap:16px;
  min-height:var(--alto-barra); padding-block:12px;
}
.barra__logo{ display:block; margin-right:auto; line-height:0 }
.barra__logo img{ height:52px; width:auto }
@media (min-width:760px){ .barra__logo img{ height:60px } }

.tel{
  display:none; font-family:var(--f-mono); font-size:14px;
  text-decoration:none; letter-spacing:.02em;
}
.tel:hover{ color:var(--navy) }
@media (min-width:900px){ .tel{ display:inline-block } }

.btn-wa{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--verde); color:#fff; text-decoration:none;
  font-weight:600; font-size:14px; line-height:1;
  padding:12px 17px; border-radius:var(--r); border:0; cursor:pointer;
  transition:background .15s ease; white-space:nowrap;
}
.btn-wa:hover{ background:var(--verde-osc) }
.btn-wa svg{ width:17px; height:17px; fill:currentColor; flex:none }

/* ---------- Portada: carrusel de fondo con velo azul -------------------- */

.portada{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-osc);
  border-bottom:1px solid var(--navy-osc);
}

/* Las fotos se turnan con un fundido lento. El velo azul las unifica con la
   marca y garantiza que el texto blanco de la izquierda siempre se lea. */
.portada__fondo{ position:absolute; inset:0; z-index:-2 }
.portada__foto{
  position:absolute; inset:0;
  background-image:var(--foto-mv);
  background-size:cover; background-position:62% center;
  filter:grayscale(.4) contrast(1.08) brightness(.92);
  opacity:0; transition:opacity 1.4s ease-in-out;
  transform:scale(1.04);
}
@media (min-width:1000px){ .portada__foto{ background-image:var(--foto) } }
.portada__foto.activa{ opacity:1 }

.portada::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(29,27,77,.94) 0%, rgba(29,27,77,.80) 55%, rgba(29,27,77,.90) 100%);
}
@media (min-width:940px){
  .portada::after{
    background:
      linear-gradient(100deg,
        rgba(29,27,77,.97) 0%,
        rgba(29,27,77,.93) 38%,
        rgba(44,42,111,.84) 68%,
        rgba(44,42,111,.72) 100%);
  }
}

.portada__interior{ position:relative; display:grid; gap:36px; padding-block:48px 52px }
@media (min-width:940px){
  .portada__interior{
    grid-template-columns:minmax(0,1fr) minmax(340px,400px);
    gap:60px; padding-block:76px 80px;
  }
}

.portada__marca{
  font-family:var(--f-italica); font-style:italic;
  font-size:1.25rem; color:var(--laton-claro); margin:0 0 10px;
}
.portada h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.4rem,7.4vw,4.3rem); line-height:1.0;
  letter-spacing:-.015em; text-transform:uppercase;
  margin:0 0 20px; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.portada h1 em{ font-style:normal; color:var(--laton-claro); display:block }
.portada__bajada{
  max-width:46ch; margin:0 0 28px; font-size:1.0625rem;
  color:rgba(255,255,255,.86);
}
.portada__bajada strong{ color:#fff; font-weight:600 }

.btn-bajar{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--tinta); text-decoration:none;
  border:0; border-radius:var(--r); cursor:pointer;
  font-weight:600; font-size:15px; padding:14px 20px;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.btn-bajar:hover{ background:var(--laton-claro); transform:translateY(-1px) }
.btn-bajar svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2 }

/* Puntos del carrusel */
.portada__puntos{ display:flex; gap:9px; margin-top:30px }
.portada__puntos button{
  width:34px; height:4px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.32); border-radius:2px;
  transition:background .25s ease, width .25s ease;
}
.portada__puntos button:hover{ background:rgba(255,255,255,.6) }
.portada__puntos button[aria-selected="true"]{ background:var(--laton-claro); width:52px }

/* Índice con guías punteadas, como en un catálogo impreso */
.indice{
  background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r); padding:20px 22px 12px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
}
.indice__titulo{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris); margin:0 0 12px;
}
.indice ol{ list-style:none; margin:0; padding:0 }
.indice a{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none; padding:7px 0; font-size:15px;
}
.indice a:hover{ color:var(--navy) }
.indice a:hover .indice__guia{ border-color:var(--navy) }
.indice__nombre{ flex:none }
.indice__guia{ flex:1; border-bottom:1px dotted #A9AFC0; transform:translateY(-4px) }
.indice__n{ font-family:var(--f-mono); font-size:13px; color:var(--laton); flex:none }

/* ---------- Buscador + categorías --------------------------------------- */

.filtros{
  position:sticky; top:0; z-index:30;
  background:var(--papel); border-bottom:1px solid var(--linea);
  padding-block:22px 12px;
  transition:padding .18s ease;
  scroll-margin-top:0;
}
@media (min-width:760px){ .filtros{ top:var(--alto-barra); scroll-margin-top:var(--alto-barra) } }

.filtros__encabezado{ text-align:center; margin-bottom:16px }
.filtros h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.4rem,4.4vw,1.9rem); line-height:1.1;
  margin:0 0 6px; color:var(--tinta);
}
.filtros__sub{
  font-family:var(--f-italica); font-style:italic;
  font-size:1.0625rem; color:var(--gris); margin:0;
}

.buscador{ position:relative; max-width:560px; margin:0 auto 14px }
.buscador input{
  width:100%; font:inherit; font-size:1rem;
  padding:14px 46px;
  background:var(--papel); color:var(--tinta);
  border:1.5px solid var(--tinta); border-radius:var(--r);
}
.buscador input::placeholder{ color:#8A8F9E }
.buscador input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(44,42,111,.14) }
.buscador__lupa{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; fill:none; stroke:var(--gris); stroke-width:2; pointer-events:none;
}
.buscador__limpiar{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; padding:8px; line-height:0;
  color:var(--gris); border-radius:var(--r);
}
.buscador__limpiar:hover{ color:var(--tinta) }
.buscador__limpiar[hidden]{ display:none }

/* pista de categorías con aviso de deslizar */
.lineas{ position:relative }
.lineas::after{
  content:""; position:absolute; right:0; top:0; height:46px; width:46px;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--papel));
  pointer-events:none; opacity:1; transition:opacity .2s ease;
}
.lineas[data-fin="si"]::after{ opacity:0 }

.lineas__pista{
  display:flex; gap:8px; overflow-x:auto; padding-block:2px 10px;
  scrollbar-width:none; cursor:grab;
  overscroll-behavior-x:contain;
}
.lineas__pista:active{ cursor:grabbing }
.lineas__pista::-webkit-scrollbar{ display:none }
.chip-linea{
  flex:none; cursor:pointer; white-space:nowrap;
  background:var(--acero); border:1px solid var(--linea); border-radius:var(--r);
  padding:9px 15px; font-size:14px; font-weight:500;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.chip-linea:hover{ border-color:var(--navy); color:var(--navy) }
.chip-linea[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff }
.chip-linea__n{ font-family:var(--f-mono); font-size:12px; opacity:.62; margin-left:6px }

.lineas__ayuda{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:2px 0 0; font-family:var(--f-italica); font-style:italic;
  font-size:15px; color:var(--gris); transition:opacity .25s ease;
}
.lineas__ayuda[hidden]{ display:none }
.lineas__ayuda svg{ width:24px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6 }
.lineas__ayuda svg g{ animation:desliza 1.9s ease-in-out infinite }
@keyframes desliza{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(4px) } }
@media (prefers-reduced-motion:reduce){ .lineas__ayuda svg g{ animation:none } }

/* al bajar, el bloque se compacta y deja sólo lo funcional */
.filtros.compacta{ padding-block:10px 6px }
.filtros.compacta .filtros__encabezado,
.filtros.compacta .lineas__ayuda{ display:none }
.filtros.compacta .buscador{ margin-bottom:10px }

/* ---------- Resultados -------------------------------------------------- */

main{ padding-block:30px 90px }

.estado{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--gris); margin:0 0 22px;
}
.estado b{ color:var(--tinta) }

.seccion + .seccion{ margin-top:52px }
.seccion__cabeza{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 20px; padding-bottom:10px; border-bottom:2px solid var(--tinta);
}
.seccion__cabeza h2{
  font-family:var(--f-display); font-weight:400; font-size:1.3rem;
  line-height:1.15; letter-spacing:-.005em; margin:0;
}
.seccion__marca{
  font-family:var(--f-italica); font-style:italic; font-size:1.0625rem;
  color:var(--laton); white-space:nowrap;
}
.seccion__cuenta{
  margin-left:auto; font-family:var(--f-mono); font-size:12px;
  color:var(--gris); white-space:nowrap;
}

.rejilla{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(148px,1fr));
}
@media (min-width:760px){ .rejilla{ gap:20px; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)) } }

.ficha{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:0; overflow:hidden;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ficha:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:var(--sombra) }
.ficha__foto{
  aspect-ratio:1; background:#fff; border-bottom:1px solid var(--acero);
  display:grid; place-items:center; overflow:hidden;
}
.ficha__foto img{
  width:100%; height:100%; object-fit:contain; padding:10px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.ficha:hover .ficha__foto img{ transform:scale(1.05) }
.ficha__cuerpo{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:9px; flex:1 }
.ficha__nombre{ font-size:14px; font-weight:600; line-height:1.32; margin:0; overflow-wrap:break-word }
.ficha__medidas{ display:flex; flex-wrap:wrap; gap:4px; margin-top:auto }
.medida{
  font-family:var(--f-mono); font-size:11px; line-height:1;
  padding:4px 6px; border-radius:2px;
  background:var(--laton-luz); color:var(--laton);
  border:1px solid rgba(154,111,20,.22); white-space:nowrap;
}
.medida--mas{ background:transparent; border-color:var(--linea); color:var(--gris) }
.ficha__unica{ font-family:var(--f-mono); font-size:11px; color:var(--gris); margin-top:auto }

.vacio{
  background:var(--papel); border:1px dashed var(--linea); border-radius:var(--r);
  padding:44px 24px; text-align:center;
}
.vacio h2{ font-family:var(--f-display); font-weight:400; font-size:1.4rem; margin:0 0 10px }
.vacio p{
  font-family:var(--f-italica); font-style:italic; font-size:1.0625rem;
  color:var(--gris); margin:0 auto 22px; max-width:46ch;
}
.vacio .btn-wa{ display:inline-flex }

/* «¿Quiso decir?»: palabras del catálogo parecidas a lo que escribieron */
.sugerencias{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin:0 auto 24px; max-width:52ch;
}
.sugerencias > span{
  font-family:var(--f-italica); font-style:italic;
  font-size:1.0625rem; color:var(--tinta); margin-right:2px;
}
.sugerencia{
  background:var(--laton-luz); color:var(--laton);
  border:1px solid rgba(154,111,20,.3); border-radius:var(--r);
  padding:7px 13px; font-size:14px; font-weight:500; cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.sugerencia:hover{ background:var(--laton); border-color:var(--laton); color:#fff }

/* ---------- Panel de detalle ------------------------------------------- */

.velo{
  position:fixed; inset:0; z-index:60; background:rgba(34,31,31,.5);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.velo.abierto{ opacity:1; pointer-events:auto }

.panel{
  position:fixed; z-index:61; top:0; right:0; bottom:0;
  width:min(480px,100%);
  background:var(--papel); border-left:1px solid var(--linea);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .26s cubic-bezier(.3,.8,.35,1);
  box-shadow:-20px 0 50px -30px rgba(34,31,31,.5);
}
.panel.abierto{ transform:none }
.panel[hidden],.velo[hidden]{ display:none }
@media (max-width:560px){
  .panel{ top:auto; width:100%; max-height:90vh; border-left:0; border-top:1px solid var(--linea);
          transform:translateY(101%); border-radius:8px 8px 0 0 }
}

.panel__cabeza{
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 18px 14px; border-bottom:1px solid var(--linea);
}
.panel__linea{
  font-family:var(--f-italica); font-style:italic; font-size:15px;
  color:var(--laton); margin:0 0 4px;
}
.panel__titulo{
  font-family:var(--f-display); font-weight:400; font-size:1.15rem;
  line-height:1.22; margin:0;
}
.panel__cerrar{
  margin-left:auto; flex:none; background:var(--acero); border:1px solid var(--linea);
  border-radius:var(--r); width:34px; height:34px; cursor:pointer;
  display:grid; place-items:center; line-height:0;
}
.panel__cerrar:hover{ background:var(--acero-osc) }

.panel__cuerpo{ overflow-y:auto; padding:18px; flex:1 }
.panel__foto{
  background:#fff; border:1px solid var(--acero); border-radius:var(--r);
  aspect-ratio:4/3; max-height:230px; display:grid; place-items:center;
  margin-bottom:20px; overflow:hidden;
}
.panel__foto img{ width:100%; height:100%; object-fit:contain; padding:16px }

.panel__rotulo{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris);
  margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--linea);
}
.medidas-lista{ list-style:none; margin:0 0 4px; padding:0; display:grid; gap:6px }
.medidas-lista label{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  border:1px solid var(--linea); border-radius:var(--r);
  padding:9px 11px; font-size:14px; line-height:1.35;
  transition:border-color .14s ease, background .14s ease;
}
.medidas-lista label:hover{ border-color:var(--navy) }
.medidas-lista input{ margin:2px 0 0; accent-color:var(--navy); flex:none; width:16px; height:16px }
.medidas-lista label:has(input:checked){ border-color:var(--navy); background:#F3F3F9 }
.medidas-lista span{ font-family:var(--f-mono); font-size:13px; flex:1 }
.medidas-lista .codigo{
  font-family:var(--f-mono); font-style:normal; font-size:11px;
  color:var(--laton); background:var(--laton-luz);
  border:1px solid rgba(154,111,20,.22); border-radius:2px;
  padding:2px 5px; margin-left:auto; flex:none; align-self:center;
}
.panel__sinmedidas{
  font-family:var(--f-italica); font-style:italic; font-size:1.0625rem;
  color:var(--gris); margin:0 0 4px;
}

.panel__pie{
  border-top:1px solid var(--linea); padding:14px 18px;
  display:grid; gap:8px; background:var(--acero);
}
.panel__pie .btn-wa{ justify-content:center; padding:13px 16px; font-size:15px }
.btn-lista{
  background:var(--papel); border:1.5px solid var(--tinta); color:var(--tinta);
  border-radius:var(--r); padding:12px 16px; font-weight:600; font-size:14px; cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.btn-lista:hover{ background:var(--tinta); color:#fff }

/* ---------- Lista de cotización ---------------------------------------- */

.cotizacion{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--tinta); color:#fff;
  transform:translateY(101%); transition:transform .24s cubic-bezier(.3,.8,.35,1);
}
.cotizacion.visible{ transform:none }
.cotizacion__interior{ display:flex; align-items:center; gap:14px; padding-block:12px; flex-wrap:wrap }
.cotizacion__cuenta{ font-size:14px; margin-right:auto }
.cotizacion__cuenta b{ font-family:var(--f-mono); color:#E8C878 }
.cotizacion__ver{
  background:none; border:1px solid rgba(255,255,255,.32); color:#fff;
  border-radius:var(--r); padding:9px 14px; font-size:14px; cursor:pointer;
}
.cotizacion__ver:hover{ border-color:#fff }

.cotizacion__detalle{
  border-top:1px solid rgba(255,255,255,.16);
  max-height:min(46vh,340px); overflow-y:auto; padding-block:12px 16px;
}
.cotizacion__detalle[hidden]{ display:none }
.cotizacion__detalle ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.cotizacion__detalle li{
  display:flex; align-items:flex-start; gap:10px; font-size:14px;
  padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.12);
}
.cotizacion__detalle .med{ font-family:var(--f-mono); font-size:12.5px; color:#E8C878; display:block }
.quitar{
  margin-left:auto; flex:none; background:none; border:0; color:rgba(255,255,255,.6);
  cursor:pointer; font-size:20px; line-height:1; padding:0 4px;
}
.quitar:hover{ color:#fff }
.vaciar{
  background:none; border:0; color:rgba(255,255,255,.6); font-size:13px;
  cursor:pointer; text-decoration:underline; padding:10px 0 0;
}
.vaciar:hover{ color:#fff }

/* ---------- Pie --------------------------------------------------------- */

.pie{ background:var(--navy); color:#fff; padding-block:44px 30px }
.pie__interior{ display:grid; gap:30px }
@media (min-width:760px){ .pie__interior{ grid-template-columns:1.2fr 1fr 1fr } }
.pie__rotulo{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 12px;
}
.pie p{ margin:0 0 8px; color:rgba(255,255,255,.86); font-size:15px }
.pie__lema{ font-family:var(--f-italica); font-style:italic; font-size:1.1rem }
.pie a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35) }
.pie a:hover{ border-color:#fff }
.pie__legal{
  margin-top:32px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--f-mono); font-size:11.5px; color:rgba(255,255,255,.6);
  display:flex; flex-wrap:wrap; gap:6px 18px;
}
.pie img{ height:56px; width:auto; margin-bottom:16px; filter:brightness(0) invert(1) }

body.con-cotizacion .pie{ padding-bottom:96px }