/* ============================================================
   MARMOLERÍA GAONA — sistema de diseño
   Base clara con secciones oscuras de contraste.
   Las tipografías se definen aparte: assets/css/tipo-*.css
   ============================================================ */

:root{
  /* Fondos claros */
  --fondo:       #FFFFFF;
  --fondo-alt:   #F4F5F6;   /* gris casi blanco, como el de ellos */
  --marco:       #F0F1F2;   /* detrás de cada placa */

  /* Tinta */
  --tinta:       #2F3E4A;   /* azul pizarra de los títulos */
  --tinta-media: #5D6E79;   /* gris azulado del cuerpo */
  --tinta-tenue: #8A97A0;

  /* Verde de la marca, tomado del logotipo (#3BBC9F).
     Sobre blanco no alcanza para texto, así que se usa una versión
     oscurecida para tipografía y la original para rellenos y detalles. */
  --marca:        #3BBC9F;
  --marca-suave:  rgba(59,188,159,.12);
  --acento:       #137A63;
  --acento-osc:   #0D5B49;
  --acento-tenue: rgba(19,122,99,.09);

  /* Piedra natural: ocre, para distinguir veta única de veta constante */
  --ocre:        #8A6420;
  --ocre-tenue:  rgba(138,100,32,.10);

  --linea:        rgba(47,62,74,.14);
  --linea-fuerte: rgba(47,62,74,.28);

  /* Secciones oscuras: pie de página y proceso */
  --oscuro:            #141817;
  --oscuro-tinta:      #F2F3F2;
  --oscuro-tinta-media:#A9B2AE;
  --oscuro-linea:      rgba(242,243,242,.15);

  --ancho: 1470px;   /* 19/08: 1632 - 10% */
  --gutter: clamp(20px, 4vw, 44px);   /* 19/08: el margen baja el mismo 10% */
  --aire: 50px;                       /* 50 arriba + 50 abajo = 100 entre secciones */

  --r: 0;                /* Cullifords no redondea nada */
  --t: 260ms cubic-bezier(.22,.61,.36,1);
}

/* Una sección oscura redefine los tokens y todo lo de adentro se adapta solo */
.seccion--oscura{
  --fondo:        var(--oscuro);
  --fondo-alt:    #1B201F;
  --marco:        #1B201F;
  --tinta:        var(--oscuro-tinta);
  --tinta-media:  var(--oscuro-tinta-media);
  --tinta-tenue:  #7E8783;
  --linea:        var(--oscuro-linea);
  --linea-fuerte: rgba(242,243,242,.28);
  --acento:       #4FCBAC;
  --acento-osc:   #6FD6BB;
  --acento-tenue: rgba(79,203,172,.14);
  background:var(--oscuro);
  color:var(--oscuro-tinta);
}

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

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

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto es imprescindible: sin él, el atributo height del HTML
   fija la altura y anula el aspect-ratio de las tarjetas */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

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

/* ---------- Tipografía ---------- */

.eyebrow{
  font-family:var(--f-dato);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--acento);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--linea); max-width:70px; }
.eyebrow::before{ content:""; flex:1; height:1px; background:var(--linea); max-width:70px; }
.eyebrow--solo::after{ display:none; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:var(--peso-titulo, 600);
  line-height:1.06;
  letter-spacing:var(--track-titulo, -.025em);
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.4rem, 6vw, 4.4rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size:clamp(1.22rem, 2vw, 1.55rem); }
h4{ font-size:1.05rem; letter-spacing:-.01em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.08rem, 1.6vw, 1.3rem);
  line-height:1.72;
  color:var(--tinta-media);
  max-width:52ch;
}

.enfasis{ color:var(--tinta); font-weight:600; }

/* ---------- Estructura ---------- */

.envoltorio{ max-width:var(--ancho); margin:0 auto; padding:0 var(--gutter); }

.seccion{ padding:var(--aire) 0; background:var(--fondo); }
.seccion--ajustada{ padding:clamp(48px, 6vw, 80px) 0; }
/* Diego pidió sacar todos los fondos grises: las secciones van todas en
   blanco. La clase se conserva para no tocar las 17 páginas, y --fondo-alt
   sigue vivo para hovers y encabezados de tabla. */
.seccion--alt{ background:var(--fondo); }
/* Separación por espacio en blanco, como Cullifords: sin líneas entre secciones. */

/* Cullifords centra todo: título y bajada en una sola columna al medio */
.cabecera-seccion{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-bottom:clamp(38px, 5vw, 58px);
  text-align:center;
}
.cabecera-seccion h2{ margin-bottom:0; }
.cabecera-seccion .eyebrow{ justify-content:center; }
.cabecera-seccion .lead{ margin-left:auto; margin-right:auto; max-width:52ch; }

/* ---------- Botones ---------- */

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--f-dato);
  /* El tamaño de letra y el interletrado viven en tipo-b.css, que se carga
     después. Acá sólo la forma. */
  font-weight:600;
  text-transform:uppercase;
  /* 19/08: Diego los pidió en 208 x 32. El min-width empareja a los cortos;
     los dos o tres rótulos más largos se pasan cinco o seis píxeles. */
  min-width:208px;
  height:32px;
  padding:0 18px;
  border-radius:0;
  border:0;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
  text-align:center;
  line-height:1.2;
}
.boton:hover{ transform:none; }

.boton--primario{ background:var(--acento); color:#FFF; }
.boton--primario:hover{ background:var(--acento-osc); color:#FFF; }

/* Todos los call to action van en el verde de la marca (19/08).
   Antes --linea era gris y quedaban dos colores de botón mezclados en la
   misma página. Se conserva la clase para no tocar el HTML. */
.boton--linea{ background:var(--acento); color:#FFF; }
.boton--linea:hover{ background:var(--acento-osc); color:#FFF; }
.seccion--oscura .boton--linea{ background:var(--acento); }
.seccion--oscura .boton--linea:hover{ background:var(--acento-osc); }

.boton--wa{ background:#1F7A4C; color:#FFF; }
.boton--wa:hover{ background:#186340; }

.boton--chico{ min-width:0; height:30px; padding:0 14px; }

.boton-texto{
  font-family:var(--f-dato);
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--acento);
  display:inline-flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:border-color var(--t), gap var(--t);
}
.boton-texto:hover{ border-bottom-color:var(--acento); gap:14px; }

/* ============================================================
   CABECERA
   ============================================================ */

.cabecera{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}

.cabecera__fila{
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 var(--gutter);
  height:72px;
  display:flex;
  align-items:center;
  gap:clamp(16px, 3vw, 40px);
}

/* Marca: se usa el logotipo real, no un texto que lo imite */
.marca{ display:flex; align-items:center; flex-shrink:0; }
.marca__img{
  height:38px;
  width:auto;
  display:block;
  transition:opacity var(--t);
}
.marca:hover .marca__img{ opacity:.82; }
.marca__blanco{ display:none; }

/* Sobre la portada y en el pie va la versión en blanco */
.cabecera--transparente .marca__color,
.pie .marca__color{ display:none; }
.cabecera--transparente .marca__blanco,
.pie .marca__blanco{ display:block; }

@media (max-width:600px){ .marca__img{ height:32px; } }

.nav{ display:none; margin-left:auto; }
@media (min-width:1060px){ .nav{ display:flex; align-items:center; gap:4px; } }

.nav__item{ position:relative; }

.nav__link{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--f-dato);
  font-size:12px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--tinta-media);
  padding:25px 13px;
  transition:color var(--t);
}
.nav__link:hover,
.nav__link[aria-expanded="true"]{ color:var(--tinta); }
.nav__link[aria-current="page"]{ color:var(--acento); }

.nav__flecha{ width:8px; height:8px; transition:transform var(--t); opacity:.6; }
.nav__link[aria-expanded="true"] .nav__flecha{ transform:rotate(180deg); }

/* Menú desplegable de materiales */
.desplegable{
  position:absolute;
  top:100%;
  left:-8px;
  min-width:560px;
  background:var(--fondo);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r);
  padding:10px;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:2px;
  box-shadow:0 24px 50px rgba(16,19,18,.14);
}
.nav__item--abierto .desplegable{ display:grid; }

.desplegable__link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 12px;
  border-radius:var(--r);
  transition:background var(--t);
}
.desplegable__link:hover{ background:var(--fondo-alt); }

.desplegable__muestra{
  width:56px; height:30px;
  object-fit:cover;
  border-radius:1px;
  flex-shrink:0;
  background:var(--marco);
  border:1px solid var(--linea);
}

.desplegable__nombre{
  font-family:var(--f-display);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  display:block;
  line-height:1.3;
}
.desplegable__desc{
  font-family:var(--f-dato);
  font-size:10px;
  font-weight:400;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  display:block;
  margin-top:2px;
}

.desplegable__pie{
  grid-column:1 / -1;
  border-top:1px solid var(--linea);
  margin-top:8px;
  padding:14px 12px 6px;
}

.cabecera__acciones{ display:flex; align-items:center; gap:12px; margin-left:auto; }
@media (min-width:1060px){ .cabecera__acciones{ margin-left:0; } }
.cabecera__acciones .boton{ display:none; }
@media (min-width:640px){ .cabecera__acciones .boton{ display:inline-flex; } }

.hamburguesa{ display:flex; flex-direction:column; gap:5px; padding:10px; margin-right:-10px; }
@media (min-width:1060px){ .hamburguesa{ display:none; } }
.hamburguesa span{
  display:block; width:22px; height:1.5px; background:var(--tinta);
  transition:transform var(--t), opacity var(--t);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Menú móvil */
.menu-movil{
  display:none;
  border-top:1px solid var(--linea);
  background:var(--fondo-alt);
  max-height:calc(100vh - 72px);
  overflow-y:auto;
}
.menu-movil--abierto{ display:block; }
@media (min-width:1060px){ .menu-movil{ display:none !important; } }

.menu-movil__lista{ padding:14px var(--gutter) 28px; }
.menu-movil__link{
  display:block;
  font-family:var(--f-display);
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:15px 0;
  border-bottom:1px solid var(--linea);
}
.menu-movil__sub{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:14px 0;
  border-bottom:1px solid var(--linea);
}
.menu-movil__sublink{
  font-family:var(--f-dato);
  font-size:11.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--tinta-media);
  padding:8px 0;
}
.menu-movil .boton{ width:100%; margin-top:20px; }

/* ============================================================
   PORTADA — ambiente terminado a sangre completa
   El ambiente vende el deseo; la placa, que viene después,
   sirve para decidir. Ese es el orden que usan los líderes.
   ============================================================ */

.portada{
  position:relative;
  min-height:min(88vh, 820px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--oscuro);
  margin-top:-73px;              /* la cabecera se apoya encima */
  padding-top:73px;
}

/* 19/08: Diego la quiere igual que la de la home — foto a todo lo ancho y
   alto, con la frase encima. Antes era media pantalla. Se conserva la clase
   porque el h1 sí lleva un tamaño propio. */
.portada--corta{ min-height:min(88vh, 820px); }

.portada__fondo{
  position:absolute;
  inset:0;
  z-index:0;
}
.portada__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1200ms ease;
}
.portada__img--visible{ opacity:1; }

/* Velo direccional: sin panel de fondo, el contraste del texto depende
   por completo de este degradado, así que va un poco más marcado que
   antes en el tercio inferior, donde vive siempre el bloque de texto. */
.portada__velo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,
      rgba(8,10,9,.62) 0%, rgba(8,10,9,.34) 32%, rgba(8,10,9,.08) 60%, rgba(8,10,9,.05) 100%);
}

/* Texto directo sobre la foto: nada de panel opaco. La legibilidad la
   da el velo de arriba más un text-shadow suave en el título. */
.portada__contenido{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 var(--gutter) clamp(44px, 7vw, 84px);
  color:#FFF;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.portada__eyebrow{
  font-family:var(--f-dato);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#FFF;
  margin:0 0 16px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* Tipo fino y grande: sin caja detrás, la sombra suave alcanza para
   leerlo sobre cualquier foto. */
.portada h1{
  color:#FFF;
  font-size:clamp(2.3rem, 5.4vw, 4.4rem);
  line-height:1.08;
  margin:0 0 28px;
  max-width:17ch;
  text-shadow:0 4px 30px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35);
}
/* Un h1 mas ancho, solo donde la frase lo necesita. El tope general es de
   17ch para que los titulos de portada caigan en renglones cortos; en
   arquitectos la segunda linea tiene 29 caracteres y se partia en tres,
   dejando "nosotros." colgando solo (26/08). Con 24ch entra en dos.
   OJO: en movil no alcanza igual -la pantalla da 335 px- y sigue en tres. */
.portada h1.portada__h1--ancho{ max-width:24ch; }

.portada--corta h1{
  font-size:clamp(2rem, 4.4vw, 3.3rem);
  max-width:20ch;
  margin-bottom:0;
}

.portada__acciones{ display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.portada .boton--linea{ border-color:rgba(255,255,255,.55); color:#FFF; }
.portada .boton--linea:hover{ border-color:#FFF; background:rgba(255,255,255,.14); }

/* En pantallas chicas el texto sigue viviendo en el tercio inferior,
   más compacto para que la foto siga siendo protagonista */
@media (max-width:600px){
  .portada{ min-height:min(88vh, 720px); }
  .portada--corta{ min-height:min(50vh, 400px); }
  .portada h1{ font-size:2rem; line-height:1.1; margin-bottom:20px; max-width:none; }
  .portada--corta h1{ margin-bottom:0; }
  .portada__eyebrow{ font-size:10px; letter-spacing:.2em; margin-bottom:10px; }
  .portada__acciones{ gap:9px; }
  .portada__acciones .boton{ width:100%; padding:13px 18px; }
}

.portada__puntos{ display:flex; gap:8px; }
.portada__punto{
  width:26px; height:2px;
  background:rgba(255,255,255,.32);
  border:0; padding:0;
  transition:background var(--t);
}
.portada__punto[aria-current="true"]{ background:#FFF; }

/* Cabecera transparente mientras se ve la portada */
.cabecera--transparente{
  background:transparent;
  border-bottom-color:rgba(255,255,255,.16);
}
.cabecera--transparente .marca,
.cabecera--transparente .nav__link,
.cabecera--transparente .hamburguesa span{ color:#FFF; }
.cabecera--transparente .hamburguesa span{ background:#FFF; }
.cabecera--transparente .marca small{ color:rgba(255,255,255,.62); }
.cabecera--transparente .nav__link{ color:rgba(255,255,255,.86); }
.cabecera--transparente .nav__link:hover{ color:#FFF; }
/* El botón de presupuesto se queda verde también sobre la portada (19/08):
   antes se volvía blanco y parecía otro botón distinto al del resto. */
.cabecera--transparente .boton--primario{ background:var(--acento); color:#FFF; }
.cabecera--transparente .boton--primario:hover{ background:var(--acento-osc); color:#FFF; }

/* ============================================================
   SECCIÓN DE PLACA — la ficha de espécimen
   ============================================================ */

.hero{ padding:clamp(30px, 5vw, 52px) 0 clamp(56px, 7vw, 84px); }

.hero__barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-bottom:16px; flex-wrap:wrap;
}

.hero__marco{
  position:relative;
  background:var(--marco);
  border:1px solid var(--linea);
  border-radius:var(--r);
  overflow:hidden;
}

/* La placa se ve ENTERA: contain, nunca recortada */
.hero__placa{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2.05 / 1;
  object-fit:contain;
  background:var(--marco);
  opacity:0;
  transition:opacity 700ms ease;
}
.hero__placa--visible{ opacity:1; }

.hero__nav{
  position:absolute;
  inset:auto 0 0 0;
  display:flex;
  justify-content:flex-end;
  padding:14px;
  pointer-events:none;
}
.hero__flechas{ display:flex; gap:8px; pointer-events:auto; }
.hero__flecha{
  width:38px; height:38px;
  border:1px solid var(--linea-fuerte);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(6px);
  border-radius:var(--r);
  display:grid; place-items:center;
  color:var(--tinta);
  transition:border-color var(--t), background var(--t);
}
.hero__flecha:hover{ border-color:var(--tinta); background:#FFF; }
.hero__flecha svg{ width:14px; height:14px; }

/* Etiqueta de espécimen */
.etiqueta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 22px;
  padding:16px 2px 0;
  border-top:1px solid var(--linea);
  margin-top:14px;
}
.etiqueta__nombre{
  font-family:var(--f-display);
  font-size:clamp(1.05rem, 2vw, 1.4rem);
  font-weight:600;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0;
}
.etiqueta__meta{
  font-family:var(--f-dato);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  font-variant-numeric:tabular-nums;
}
.etiqueta__accion{ margin-left:auto; }

.hero__texto{ margin-top:clamp(40px, 5vw, 60px); display:grid; gap:clamp(28px, 4vw, 56px); }
@media (min-width:980px){
  .hero__texto{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; }
}
.hero__texto h1{ margin-bottom:0; }

.hero__promesa{ display:flex; flex-direction:column; gap:22px; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Barra de datos duros ---------- */

.datos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  border-top:1px solid var(--linea);
  border-left:1px solid var(--linea);
}
@media (min-width:820px){ .datos{ grid-template-columns:repeat(5, 1fr); } }

.datos__celda{
  padding:26px clamp(14px, 2vw, 28px);
  border-bottom:1px solid var(--linea);
  border-right:1px solid var(--linea);
}
.datos__numero{
  font-family:var(--f-display);
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  display:block;
  margin-bottom:9px;
  color:var(--tinta);
}
.datos__texto{
  font-family:var(--f-dato);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  line-height:1.5;
}

/* ============================================================
   MATERIALES
   ============================================================ */

.materiales{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); }
@media (min-width:700px){ .materiales{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .materiales{ grid-template-columns:repeat(3,1fr); } }

.material{ background:var(--fondo); display:flex; flex-direction:column; transition:background var(--t); }
.material:hover{ background:var(--fondo-alt); }

.material__marco{ overflow:hidden; background:var(--marco); }
.material__img{
  width:100%;
  height:auto;
  aspect-ratio:2.05 / 1;
  object-fit:cover;
  transition:transform 600ms cubic-bezier(.22,.61,.36,1);
}
.material:hover .material__img{ transform:scale(1.035); }

.material__cuerpo{ padding:22px clamp(18px,2vw,26px) 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.material__titulo{
  font-family:var(--f-display);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.material__cuenta{
  font-family:var(--f-dato);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.13em;
  color:var(--tinta-tenue);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.material__desc{ font-size:15.5px; color:var(--tinta-media); line-height:1.55; margin:0; flex:1; }
.material__pie{
  font-family:var(--f-dato);
  font-size:10px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--acento);
  margin-top:4px;
}

/* ============================================================
   CATÁLOGO FILTRABLE
   ============================================================ */

.filtros{
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding:20px 0;
  margin-bottom:34px;
  position:sticky;
  top:72px;
  z-index:40;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
}
.seccion--alt .filtros{ background:rgba(231,227,220,.96); }

.filtros__grupo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 0; }
.filtros__etiqueta{
  font-family:var(--f-dato);
  font-size:10px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  width:74px;
  flex-shrink:0;
}

.chip{
  font-family:var(--f-dato);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.04em;
  padding:8px 14px;
  border:1px solid var(--linea);
  border-radius:var(--r);
  color:var(--tinta-media);
  background:var(--fondo);
  transition:border-color var(--t), color var(--t), background var(--t);
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.chip:hover{ border-color:var(--linea-fuerte); color:var(--tinta); }
.chip[aria-pressed="true"]{
  background:var(--acento-tenue);
  border-color:var(--acento);
  color:var(--acento-osc);
}
.chip__n{ font-size:10px; color:var(--tinta-tenue); font-variant-numeric:tabular-nums; }
.chip[aria-pressed="true"] .chip__n{ color:var(--acento); }
.chip__color{ width:11px; height:11px; border-radius:50%; border:1px solid var(--linea-fuerte); flex-shrink:0; }

/* El contador y la medida de placa, juntos a la izquierda del buscador. Van
   agrupados porque `.filtros__pie` es space-between: sueltos, la medida se
   plantaba en el medio del renglon. */
.filtros__info{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
/* Tinta plena y negrita, no el gris del contador de al lado: Diego pidio que
   la medida se destaque (27/08). No va en verde a proposito — el verde es el
   unico color de marca y esta reservado para los rotulos de seccion; aca
   competiria con ellos y convertiria un dato informativo en un llamado. */
.filtros__placa{ color:var(--tinta); font-weight:700; }

.filtros__pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:14px;
  margin-top:10px;
  border-top:1px solid var(--linea);
}

.buscador{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:9px 14px;
  min-width:230px;
  background:var(--fondo);
  transition:border-color var(--t);
}
.buscador:focus-within{ border-color:var(--acento); }
.buscador input{
  background:none; border:none; outline:none;
  font-family:var(--f-dato);
  font-size:12.5px;
  color:var(--tinta);
  width:100%;
}
.buscador input::placeholder{ color:var(--tinta-tenue); }
.buscador svg{ width:14px; height:14px; opacity:.5; flex-shrink:0; }

/* Grilla de placas */
/* 5 columnas en pantalla grande: las placas se ven más chicas y entran más
   a la vez, que es lo que pidió Diego. Abajo va bajando sola. */
.grilla{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(10px, 1.2vw, 16px);
}
@media (min-width:560px){  .grilla{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:900px){  .grilla{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:1180px){ .grilla{ grid-template-columns:repeat(5, 1fr); } }

.placa{
  background:var(--fondo);
  border:1px solid var(--linea);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-align:left;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
  width:100%;
  padding:0;
}
.placa:hover{
  border-color:var(--linea-fuerte);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(16,19,18,.09);
}

/* CONTAIN sobre gris: la placa se ve entera y un blanco no se funde con la página */
.placa__img{
  width:100%;
  height:auto;
  aspect-ratio:2.05 / 1;
  object-fit:contain;
  background:var(--marco);
  border-bottom:1px solid var(--linea);
}

.placa__cuerpo{
  padding:10px 11px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.placa__nombre{
  font-family:var(--f-display);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.3;
  margin:0;
}
.placa__meta{
  font-family:var(--f-dato);
  font-size:9px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  font-variant-numeric:tabular-nums;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.placa__punto{ width:3px; height:3px; border-radius:50%; background:var(--tinta-tenue); }

/* Sello de fidelidad: piedra natural vs material de fabricación */
.sello{
  font-family:var(--f-dato);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:2px;
  border:1px solid;
  align-self:flex-start;
  margin-top:3px;
}
.sello--natural{ color:var(--ocre); border-color:rgba(138,100,32,.38); background:var(--ocre-tenue); }
.sello--fabricado{ color:var(--acento); border-color:rgba(21,112,93,.38); background:var(--acento-tenue); }
.seccion--oscura .sello--natural{ color:#C9A25A; border-color:rgba(201,162,90,.42); background:rgba(201,162,90,.13); }

.vacio{ text-align:center; padding:80px 20px; border:1px dashed var(--linea-fuerte); border-radius:var(--r); }
.vacio h3{ margin-bottom:10px; }
.vacio p{ color:var(--tinta-tenue); }

.cargar-mas{ display:flex; justify-content:center; margin-top:44px; }

/* ============================================================
   VISOR — se mantiene oscuro a propósito: una placa a pantalla
   completa se lee mejor sobre fondo oscuro, y es una capa aparte
   ============================================================ */

.visor{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(12,14,13,.97);
  backdrop-filter:blur(8px);
  display:none;
  flex-direction:column;
  /* Ajustado el 27/08: con 32 px de aire, mas la barra, la tira y el pie, la
     foto se quedaba con 645 px de los 900 de pantalla, y una foto vertical
     terminaba en 313 px de ancho. Todo lo que se le saca al marco se lo lleva
     `.visor__cuerpo`, que es el unico flex:1 de la columna. */
  padding:clamp(10px, 1.6vw, 18px);
  color:#F2F3F2;
}
.visor--abierto{ display:flex; }

.visor__barra{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:10px; }
.visor__barra .etiqueta__meta{ color:#9AA39F; }
.visor__cerrar{
  width:40px; height:40px;
  border:1px solid rgba(242,243,242,.3);
  border-radius:var(--r);
  display:grid; place-items:center;
  color:#F2F3F2;
  transition:border-color var(--t);
}
.visor__cerrar:hover{ border-color:#F2F3F2; }
.visor__cerrar svg{ width:15px; height:15px; }

/* El cuerpo del visor tiene alto definido y la foto se posiciona contra el:
   con `max-height:100%` sobre una fila de grilla auto, el porcentaje no
   resuelve y una foto vertical se desbordaba hacia abajo, cortada. */
.visor__cuerpo{ flex:1 1 auto; min-height:0; position:relative; }
.visor__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
}

/* Tira de fotos que se desliza. Para lugares angostos, como la columna de
   texto de una franja de la home, donde una grilla de cuatro columnas dejaria
   las fotos en 60 px. */
.tira-fotos{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.tira-fotos .uso--boton{
  flex:0 0 auto; width:168px;
  border:1px solid var(--linea); background:var(--fondo); overflow:hidden;
}
.tira-fotos .uso--boton img{ width:100%; height:112px; object-fit:cover; display:block; }
@media (max-width:600px){
  .tira-fotos .uso--boton{ width:140px; }
  .tira-fotos .uso--boton img{ height:94px; }
}

/* Obras del taller: la misma grilla que .usos, pero clickeable */
.uso--boton{
  padding:0; border:0; background:none; cursor:pointer; text-align:left;
  display:block; width:100%; position:relative;
}
.uso--boton img{ transition:opacity .2s; }
.uso--boton:hover img,
.uso--boton:focus-visible img{ opacity:.9; }
.uso__pie{
  display:block; padding:10px 0 0;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-media);
}
/* El nombre de la placa debajo de cada obra (27/08). Es la pregunta que mas
   llega por WhatsApp -"de que material es", "como se llama"-, asi que va
   primero y en tinta plena; el material queda abajo, de contexto. El nombre
   sale del archivo original y se valida contra el catalogo: si no se puede
   afirmar cual es, no se pone nada y queda solo el material. */
.uso__placa{
  display:block;
  font-size:13px; line-height:1.3; letter-spacing:.05em; text-transform:none;
  color:var(--tinta);
}
.uso__placa + .uso__mat{
  display:block; margin-top:2px;
  font-size:10.5px; letter-spacing:.09em;
  color:var(--tinta-tenue);
}

/* Flechas del visor: quietas a los costados de la foto, sin taparla. */
.visor__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; width:46px; height:46px; padding:0;
  display:grid; place-items:center; cursor:pointer;
  color:#F2F3F2; background:rgba(12,14,13,.55);
  border:1px solid rgba(242,243,242,.28); border-radius:0;
  transition:background .18s, border-color .18s;
}
.visor__flecha:hover,
.visor__flecha:focus-visible{ background:rgba(12,14,13,.85); border-color:var(--marca); }
.visor__flecha[hidden]{ display:none; }
.visor__flecha svg{ width:20px; height:20px; }
.visor__flecha--ant{ left:0; }
.visor__flecha--sig{ right:0; }
@media (max-width:600px){
  .visor__flecha{ width:38px; height:38px; }
  .visor__flecha svg{ width:16px; height:16px; }
}

/* Tira de miniaturas del visor: la placa entera y las obras */
.visor__tira{
  display:flex; gap:8px; overflow-x:auto; padding:8px 0 2px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.visor__tira[hidden]{ display:none; }
.visor__miniatura{
  flex:0 0 auto; width:88px; height:54px; padding:0; cursor:pointer;
  background:none; border:1px solid rgba(242,243,242,.22); border-radius:0;
  overflow:hidden; opacity:.62; transition:opacity .18s, border-color .18s;
}
.visor__miniatura img{ width:100%; height:100%; object-fit:cover; display:block; }
.visor__miniatura:hover,
.visor__miniatura:focus-visible{ opacity:1; }
.visor__miniatura--activa{ opacity:1; border-color:var(--marca); }
@media (max-width:600px){ .visor__miniatura{ width:84px; height:52px; } }

/* Franja de migas: una linea fina bajo la portada, sin robarle aire a la
   primera seccion de contenido. */
.migas{ padding:18px 0 0; }
.migas nav{ margin:0; }

.visor__pie{
  padding-top:18px;
  border-top:1px solid rgba(242,243,242,.15);
  display:grid;
  gap:14px 28px;
  align-items:center;
}
@media (min-width:900px){ .visor__pie{ grid-template-columns:auto minmax(0,1fr) auto; } }
.visor__ficha{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.visor__pie .etiqueta__nombre{ color:#F2F3F2; }
.visor__pie .etiqueta__meta{ color:#9AA39F; }

.visor__aclaracion{
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:#C3CAC7;
  border-left:2px solid #4FA98F;
  padding-left:14px;
  max-width:66ch;
}
.visor__aclaracion--natural{ border-left-color:#C9A25A; }

/* ============================================================
   OBRAS
   ============================================================ */

.obras{ columns:1; column-gap:clamp(14px, 2vw, 22px); }
@media (min-width:640px){ .obras{ columns:2; } }
@media (min-width:900px){ .obras{ columns:3; } }
@media (min-width:1250px){ .obras{ columns:4; } }

.obra{
  break-inside:avoid;
  margin-bottom:clamp(14px, 2vw, 22px);
  position:relative;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--marco);
  overflow:hidden;
  display:block;
  width:100%;
  padding:0;
}
.obra img{ width:100%; height:auto; transition:transform 700ms cubic-bezier(.22,.61,.36,1); }
.obra:hover img{ transform:scale(1.04); }

.obra__ficha{
  position:absolute;
  inset:auto 0 0 0;
  padding:44px 16px 15px;
  background:linear-gradient(to top, rgba(12,14,13,.92) 30%, transparent);
  opacity:0;
  transition:opacity var(--t);
  text-align:left;
}
.obra:hover .obra__ficha,
.obra:focus-visible .obra__ficha{ opacity:1; }
@media (hover:none){ .obra__ficha{ opacity:1; } }

.obra__titulo{
  font-family:var(--f-dato);
  font-size:12px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin:0 0 3px;
  color:#F2F3F2;
}
.obra__sub{
  font-family:var(--f-dato);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#B9C0BC;
}

/* ============================================================
   USOS — la galería de "dónde se usa" de las páginas de material
   Mismo alto de columna que .obras, pero con epígrafe visible en
   lugar de la ficha que aparece al pasar el cursor: acá el dato
   que importa es el color del material, y tiene que leerse siempre.
   ============================================================ */

/* Cinco columnas arriba de 1300 px, a pedido de Diego (27/08): con cuatro,
   102 obras hacian una pagina larguisima y cada foto pedia mas atencion de la
   que necesita en la grilla. La foto grande esta a un clic, en el visor. */
.usos{ columns:1; column-gap:clamp(14px, 2vw, 22px); }
@media (min-width:640px){ .usos{ columns:2; } }
@media (min-width:1000px){ .usos{ columns:3; } }
@media (min-width:1180px){ .usos{ columns:4; } }
@media (min-width:1300px){ .usos{ columns:5; } }

.uso{
  break-inside:avoid;
  margin:0 0 clamp(14px, 2vw, 22px);
  border:1px solid var(--linea);
  background:var(--fondo);
  overflow:hidden;
}
.uso img{ width:100%; height:auto; display:block; }
.uso figcaption{
  font-family:var(--f-dato);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tinta-media);
  padding:11px 14px 13px;
}

/* ============================================================
   TABLAS
   ============================================================ */

.tabla-envoltura{ overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r); background:var(--fondo); }
.tabla-precios{ width:100%; border-collapse:collapse; font-family:var(--f-dato); min-width:640px; }
.tabla-precios th,
.tabla-precios td{ text-align:left; padding:17px 16px; border-bottom:1px solid var(--linea); font-size:13.5px; }
.tabla-precios th{
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  background:var(--fondo-alt);
  border-bottom:1px solid var(--linea-fuerte);
}
.tabla-precios td:first-child{ font-weight:600; letter-spacing:.01em; color:var(--tinta); }
.tabla-precios td{ color:var(--tinta-media); }
.tabla-precios .precio{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--tinta); }
.tabla-precios tbody tr:hover td{ background:var(--fondo-alt); }

.nota{
  font-size:14.5px;
  color:var(--tinta-media);
  border-left:2px solid var(--acento);
  padding-left:18px;
  margin-top:26px;
  max-width:64ch;
}
.nota--ancha{ max-width:none; }

/* ============================================================
   PROCESO
   ============================================================ */

.proceso{ display:grid; gap:50px 36px; }
@media (min-width:640px){ .proceso{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .proceso{ grid-template-columns:repeat(3,1fr); } }

.paso{ display:flex; flex-direction:column; }

.paso__foto{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:visible;
  min-height:0;
  width:82%;
  align-self:center;
}
.paso__foto img{
  position:relative;
  z-index:1;
  display:block;
  width:100%; height:100%;
  min-height:0;
  object-fit:cover;
  border-radius:var(--r);
  background:var(--marco);
}
.paso__acento{
  position:absolute;
  z-index:0;
  right:-9px;
  bottom:-9px;
  width:34px;
  height:34px;
  background:var(--acento);
  border-radius:var(--r);
}
.paso__etiqueta{
  position:absolute;
  z-index:2;
  left:10px;
  bottom:10px;
  padding:5px 10px;
  background:rgba(20,24,23,.86);
  border-radius:var(--r);
}
.paso__etiqueta .paso__n{
  font-family:var(--f-dato);
  font-size:9px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--acento);
  font-variant-numeric:tabular-nums;
}

.paso__cuerpo{ display:flex; flex-direction:column; gap:12px; flex:1; padding-top:26px; }
.paso__cuerpo h3{ font-size:1.15rem; margin:0; color:var(--tinta); }
.paso__cuerpo p{ font-size:15.5px; color:var(--tinta-media); line-height:1.65; margin:0; }
.paso__plazo{
  font-family:var(--f-dato);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--linea);
}
/* ============================================================
   LISTA DE LOCALIDADES (páginas de zona)
   ============================================================ */

.lista-zonas{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px 26px;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
}
.lista-zonas li{
  position:relative;
  padding:7px 0 7px 17px;
  font-size:15px;
  color:var(--tinta-media);
  border-bottom:1px solid var(--linea);
}
.lista-zonas li::before{
  content:"";
  position:absolute;
  left:0; top:15px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--acento);
}

/* ============================================================
   FRANJA — foto grande con texto corto al costado
   El ancho de la foto es una variable: cambiar --franja-foto
   y todo el sitio se ajusta de una.
   ============================================================ */

.franjas{ display:flex; flex-direction:column; }

.franja{
  --franja-foto: 66.6%; /* 920 px de foto y 462 de texto, sobre 1382 */
  display:grid;
  align-items:stretch;
  background:var(--fondo);
}
@media (min-width:880px){
  .franja{ grid-template-columns:var(--franja-foto) 1fr; }
  /* Alternada: la foto pasa a la derecha sin tocar el orden del HTML */
  .franja--inv{ grid-template-columns:1fr var(--franja-foto); }
  /* Mueve el lado visual sea lo que sea: foto, foto doble, mapa o el par
     de materiales. Antes apuntaba solo a .franja__foto y el bloque de
     materiales quedaba atrapado en la columna angosta. */
  .franja--inv > :first-child{ order:2; }
}

.franja__foto{
  margin:0;
  background:var(--marco);
  min-height:clamp(300px, 34vw, 540px);   /* 19/08: la foto queda en 967 x 540 */
}
.franja__foto img{
  width:100%;
  height:100%;
  min-height:clamp(300px, 34vw, 540px);
  object-fit:cover;
  display:block;
}

.franja__texto{
  padding:clamp(28px, 3vw, 48px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
/* El eyebrow es un <p>, así que .franja__texto p le ganaba en especificidad
   y lo dejaba gris y en 15,5 px. Acá vuelve al verde y al tamaño de los de
   Reseñas y Presupuesto (19/08). */
.franja__texto .eyebrow{
  margin-bottom:15px;
  justify-content:center;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--acento);
}
.franja__texto h2,
.franja__texto h3{
  font-size:clamp(1.35rem, 2.3vw, 1.95rem);
  margin:0 0 .55em;
}
.franja__texto p{
  font-size:15.5px;
  line-height:1.72;
  color:var(--tinta-media);
  max-width:46ch;
  margin-left:auto;
  margin-right:auto;
}
.franja__texto .boton-texto{ margin-top:22px; }
.franja__texto .franja__acciones{
  margin-top:28px;
  display:flex;
  gap:11px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ============================================================
   CARRUSEL — obras y reseñas que se deslizan
   ============================================================ */

.carrusel{ position:relative; }

.carrusel__pista{
  display:flex;
  gap:clamp(12px, 1.4vw, 20px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:18px;
  scrollbar-width:thin;
  scrollbar-color:var(--linea-fuerte) transparent;
  -webkit-overflow-scrolling:touch;
}
.carrusel__pista::-webkit-scrollbar{ height:5px; }
.carrusel__pista::-webkit-scrollbar-track{ background:transparent; }
.carrusel__pista::-webkit-scrollbar-thumb{ background:var(--linea-fuerte); border-radius:3px; }

.carrusel__pista > *{ scroll-snap-align:start; flex:none; }

.carrusel__pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-top:6px;
}
.carrusel__flechas{ display:flex; gap:8px; }
.carrusel__flecha{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r);
  color:var(--tinta);
  background:var(--fondo);
  transition:border-color var(--t), background var(--t), opacity var(--t);
}
.carrusel__flecha:hover{ border-color:var(--tinta); }
.carrusel__flecha[disabled]{ opacity:.3; cursor:default; }
.seccion--oscura .carrusel__flecha{ background:transparent; }
.carrusel__pista--obras > .obra{
  width:clamp(238px, 30vw, 348px);
  margin-bottom:0;
  break-inside:auto;
}
.carrusel__pista--obras > .obra img{ aspect-ratio:4 / 3; object-fit:cover; }
/* Reseñas: exactamente 3 por pantalla, como el de Cullifords.
   El ancho se calcula sobre la pista para que no quede una cuarta asomando. */
.carrusel__pista--resenas{ --gap-c:clamp(12px, 1.4vw, 20px); }
.carrusel__pista--resenas > .resena{
  width:auto;
  flex:0 0 100%;
}
@media (min-width:660px){
  .carrusel__pista--resenas > .resena{ flex-basis:calc((100% - var(--gap-c)) / 2); }
}
@media (min-width:1000px){
  .carrusel__pista--resenas > .resena{ flex-basis:calc((100% - 2 * var(--gap-c)) / 3); }
}

.ubicacion-en-contacto{ margin-top:clamp(40px,5vw,68px); padding-top:clamp(36px,4vw,54px); border-top:1px solid var(--linea); }
.ubicacion-en-contacto h3{ font-size:clamp(1.3rem,2.2vw,1.75rem); margin:0 0 .4em; }

/* Las secciones 4, 5 y 6 muestran dos materiales por familia */
.materiales--dos{ grid-template-columns:1fr; }
@media (min-width:700px){ .materiales--dos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .materiales--dos{ grid-template-columns:repeat(2,1fr); } }

/* Sección 9: el mapa ocupa el lugar de la foto dentro de la franja */
.franja__foto--mapa{
  position:relative;
  margin:0;
  background:var(--marco);
  min-height:clamp(300px, 34vw, 540px);
}
.franja__foto--mapa iframe{
  width:100%;
  height:100%;
  min-height:clamp(300px, 34vw, 540px);
  border:0;
  display:block;
  /* El mapa va siempre en color (19/08). Antes estaba en blanco y negro y
     sólo se coloreaba al pasar el cursor. */
}
.franja__mapa-enlace{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:2;
  font-family:var(--f-dato);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:14px 30px;
  background:var(--acento);
  color:#FFF;
  transition:background var(--t);
}
.franja__mapa-enlace:hover{ background:var(--acento-osc); color:#FFF; }

/* ============================================================
   FRANJA — ajustes del 18/08
   Las franjas ahora viven dentro del envoltorio, con aire entre
   sección y sección, y la foto ya no llega al borde de la pantalla.
   ============================================================ */

.franja-caja{ display:block; }

/* El lado "foto" puede ser: una foto, dos fotos, dos materiales o el mapa */

/* Secciones 4·5·6: las dos piedras de cada familia */
.franja__materiales{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
  align-self:stretch;
}
@media (min-width:520px){ .franja__materiales{ grid-template-columns:repeat(2,1fr); } }
.franja__materiales .material{ background:var(--fondo); }
.franja__materiales .material__desc{
  font-size:14px;
  /* Altura fija de 3 renglones: si no, la tarjeta con el texto más largo
     estira su sección y las tres familias quedan de distinto alto. */
  min-height:calc(4 * 1.72em);
}

/* Sección 8: dos fotos apiladas en lugar de una */
.franja__foto--doble{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:clamp(10px,1.2vw,16px);
  margin:0;
  /* Altura fija: si no, las dos fotos crecen con su proporción propia
     y la sección se dispara a más del doble de alto. */
  height:clamp(340px, 34vw, 540px);
  overflow:hidden;
}
.franja__foto--doble img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  display:block;
  background:var(--marco);
}

/* Los 6 pasos, en una línea de texto en vez de seis cuadros con foto */
.pasos-linea{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 0;
  counter-reset:paso;
}
.pasos-linea li{
  counter-increment:paso;
  font-family:var(--f-dato);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  display:flex;
  align-items:center;
}
.pasos-linea li::before{
  content:counter(paso,decimal-leading-zero);
  color:var(--acento);
  font-weight:700;
  margin-right:7px;
}
.pasos-linea li:not(:last-child)::after{
  content:"";
  width:16px; height:1px;
  background:var(--linea);
  margin:0 12px;
}

/* Reseñas: más anchas y más bajas, como pidió Diego */
/* Reseñas ya no necesita ancho propio: 1560 px es ahora el ancho de todo el
   sitio, que es el que Diego aprobó mirando esta sección. La clase se deja
   puesta para no tocar el HTML, pero hereda el ancho general. */
.seccion--ancha .envoltorio{ max-width:var(--ancho); }
.seccion--baja{ padding:var(--aire) 0; }   /* mismo espaciado que el resto */
.seccion--baja .cabecera-seccion{ margin-bottom:clamp(28px,3.4vw,40px); }
.seccion--baja .resena__texto{ font-size:14.5px; line-height:1.62; margin-bottom:13px; }
.seccion--baja .resena{ padding:2px 10px 6px; }
.seccion--baja .resena__autor{ margin-bottom:9px; }

/* ============================================================
   TARJETAS
   ============================================================ */

.tarjetas{ display:grid; gap:clamp(16px,2vw,24px); }
@media (min-width:700px){ .tarjetas--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:700px){ .tarjetas--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .tarjetas--3{ grid-template-columns:repeat(3,1fr); } }

.tarjeta{
  background:var(--fondo);
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:clamp(24px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:border-color var(--t), box-shadow var(--t);
}
.tarjeta:hover{ border-color:var(--linea-fuerte); box-shadow:0 8px 22px rgba(16,19,18,.06); }
.seccion--alt .tarjeta{ background:var(--fondo); }
.tarjeta h3{ margin:0; }
.tarjeta p{ color:var(--tinta-media); font-size:15.5px; margin:0; }
.tarjeta ul{ margin:0; padding-left:20px; color:var(--tinta-media); font-size:15.5px; }
.tarjeta li{ margin-bottom:8px; }
.tarjeta li::marker{ color:var(--acento); }

/* ============================================================
   ZONAS
   ============================================================ */

.zonas{ display:flex; flex-wrap:wrap; gap:10px; }
.zona{
  font-family:var(--f-dato);
  font-size:12px;
  font-weight:500;
  letter-spacing:.05em;
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:11px 18px;
  color:var(--tinta-media);
  background:var(--fondo);
  transition:border-color var(--t), color var(--t);
}
.zona:hover{ border-color:var(--acento); color:var(--acento); }

/* ============================================================
   UBICACIÓN
   ============================================================ */

.ubicacion{ display:grid; gap:clamp(28px, 4vw, 52px); align-items:center; }
@media (min-width:900px){ .ubicacion{ grid-template-columns:1.2fr 1fr; } }

.ubicacion__mapa{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--marco);
  border:1px solid var(--linea);
}
.ubicacion__mapa iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  pointer-events:none;      /* el mapa es una foto, no se manipula: se hace clic y listo */
  filter:grayscale(.2) contrast(1.02);
}
.ubicacion__enlace{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  padding:20px;
  background:linear-gradient(to top, rgba(16,19,18,.4) 0%, rgba(16,19,18,0) 45%);
  transition:background var(--t);
}
.ubicacion__enlace:hover{ background:linear-gradient(to top, rgba(16,19,18,.55) 0%, rgba(16,19,18,0) 50%); }

.ubicacion__info{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.ubicacion__info h2{ margin-bottom:14px; }
.ubicacion__direccion{ margin-bottom:18px; }
.ubicacion__horario{
  font-family:var(--f-dato);
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  line-height:1.7;
  margin-bottom:26px;
}

/* Resalta una palabra clave, tipo marcador amarillo. Se usa en "cita previa". */
.resaltado{
  font-weight:700;
  color:var(--tinta);
  background:#FBDE6B;
  padding:.05em .35em;
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq{ border-top:1px solid var(--linea); max-width:900px; }
.faq__item{ border-bottom:1px solid var(--linea); }
.faq__pregunta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  text-align:left;
  font-family:var(--f-display);
  font-size:clamp(1rem,1.6vw,1.14rem);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--tinta);
  transition:color var(--t);
}
.faq__pregunta:hover{ color:var(--acento); }
.faq__signo{ position:relative; width:14px; height:14px; flex-shrink:0; }
.faq__signo::before,
.faq__signo::after{
  content:""; position:absolute; background:var(--acento);
  top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%);
  transition:transform var(--t);
}
.faq__signo::after{ transform:translateY(-50%) rotate(90deg); }
.faq__pregunta[aria-expanded="true"] .faq__signo::after{ transform:translateY(-50%) rotate(0deg); }
.faq__respuesta{ display:none; padding:0 0 26px; color:var(--tinta-media); max-width:70ch; }
.faq__respuesta--abierta{ display:block; }

/* ============================================================
   RESEÑAS
   ============================================================ */

.resumen-resenas{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}
.resumen-resenas__nota{
  font-family:var(--f-display);
  font-size:clamp(2.3rem, 4vw, 3.1rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--tinta);
}
.resumen-resenas__detalle{ display:flex; flex-direction:column; gap:5px; }
.resumen-resenas__estrellas{ color:#DFA426; font-size:16px; letter-spacing:2px; line-height:1; }
.resumen-resenas__texto{
  font-family:var(--f-dato);
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
}

.resenas{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:2px 2px 16px;
  margin:0 -2px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.resenas::-webkit-scrollbar{ height:6px; }
.resenas::-webkit-scrollbar-track{ background:transparent; }
.resenas::-webkit-scrollbar-thumb{ background:var(--linea-fuerte); border-radius:3px; }

.resena{
  flex:0 0 min(310px, 80vw);
  scroll-snap-align:start;
  background:transparent;
  border:0;
  border-radius:0;
  padding:4px 14px 10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color var(--t), box-shadow var(--t);
}
.resena:hover{ border:0; box-shadow:none; }

.resena__cabecera{ display:none; }   /* la fecha pasa al pie, junto al nombre */
.resena__estrellas{ color:#DFA426; font-size:13px; letter-spacing:2px; }
.resena__fecha{
  font-family:var(--f-dato);
  font-size:10px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  white-space:nowrap;
}
.resena__texto{ font-size:15px; color:var(--tinta-media); line-height:1.72; margin:0 0 16px; flex:1; }
.resena__autor{ font-family:var(--f-dato); font-size:14px; font-weight:700; color:var(--tinta); margin:0 0 11px; }
/* Las estrellas van después del nombre, en dorado apagado como el de ellos */
.resena::after{
  content:"★★★★★";
  display:block;
  color:#DFA426;
  font-size:16px;
  letter-spacing:3px;
  line-height:1;
}
.resena__meta{ font-weight:400; color:var(--tinta-tenue); font-size:13px; font-family:var(--f-dato); }

/* ============================================================
   FORMULARIO
   ============================================================ */

.contacto{ display:grid; gap:clamp(32px,5vw,60px); }
@media (min-width:980px){ .contacto{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } }

.formulario{ display:grid; gap:18px; }
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo--doble{ display:grid; gap:18px; }
@media (min-width:560px){ .campo--doble{ grid-template-columns:1fr 1fr; } }

.campo label{
  font-family:var(--f-dato);
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
}
.campo label span{ color:var(--acento); }

.campo input,
.campo select,
.campo textarea{
  background:var(--fondo);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r);
  padding:13px 15px;
  color:var(--tinta);
  font-family:var(--f-dato);
  font-size:14px;
  transition:border-color var(--t), box-shadow var(--t);
  width:100%;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-tenue);
}
.campo textarea{ resize:vertical; min-height:100px; font-family:var(--f-texto); font-size:16px; }
.campo select{ appearance:none; cursor:pointer; }
.seccion--oscura .campo input,
.seccion--oscura .campo select,
.seccion--oscura .campo textarea{ background:#1B201F; color:var(--oscuro-tinta); }

.ayuda{ font-size:13px; color:var(--tinta-tenue); font-family:var(--f-dato); }

.datos-contacto{ display:flex; flex-direction:column; gap:24px; }
.datos-contacto__bloque{ border-top:1px solid var(--linea); padding-top:18px; }
.datos-contacto__rotulo{
  font-family:var(--f-dato);
  font-size:10px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  margin-bottom:8px;
}
.datos-contacto__valor{ font-family:var(--f-display); font-size:16px; font-weight:500; line-height:1.5; color:var(--tinta); }
.datos-contacto__valor a:hover{ color:var(--acento); }
/* La dirección y su botón, uno al lado del otro (19/08): antes el botón
   caía abajo y estiraba la columna. */
.datos-contacto__bloque--con-cta{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:20px;
}
.datos-contacto__bloque--con-cta .datos-contacto__rotulo{ grid-column:1 / -1; }
@media (max-width:520px){
  .datos-contacto__bloque--con-cta{ grid-template-columns:1fr; row-gap:14px; }
  .datos-contacto__bloque--con-cta .boton{ justify-self:start; }
}

/* ============================================================
   PIE — oscuro
   ============================================================ */

.pie{
  background:var(--oscuro);
  color:var(--oscuro-tinta);
  padding:clamp(48px,6vw,72px) 0 32px;
  --linea:var(--oscuro-linea);
  --tinta-tenue:#7E8783;
  --tinta-media:var(--oscuro-tinta-media);
}
.pie__grilla{ display:grid; gap:36px; margin-bottom:44px; }
@media (min-width:760px){ .pie__grilla{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.pie .marca{ color:var(--oscuro-tinta); }
.pie .marca small{ color:#7E8783; }

.pie__titulo{
  font-family:var(--f-dato);
  font-size:10px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#7E8783;
  margin-bottom:16px;
}
/* El mail de presupuestos, en la primera columna del pie (27/08). Es el unico
   contacto que vive en el HTML: el WhatsApp lo escribe el JS. */
.pie__contacto{ margin-top:14px; font-size:15.5px; }
.pie__contacto a{ color:var(--tinta-media); text-decoration:none; border-bottom:1px solid var(--linea); }
.pie__contacto a:hover{ color:var(--oscuro-tinta); border-bottom-color:currentColor; }

.pie__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.pie__lista a{
  font-family:var(--f-dato);
  font-size:13px;
  color:var(--oscuro-tinta-media);
  transition:color var(--t);
}
.pie__lista a:hover{ color:var(--oscuro-tinta); }

.pie__legal{
  border-top:1px solid var(--oscuro-linea);
  padding-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  justify-content:space-between;
  font-family:var(--f-dato);
  font-size:11px;
  letter-spacing:.05em;
  color:#7E8783;
}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{
  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  z-index:90;
  width:54px; height:54px;
  border-radius:50%;
  background:#1F7A4C;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(16,19,18,.24);
  transition:transform var(--t), background var(--t);
}
.wa-flotante:hover{ transform:scale(1.07); background:#186340; }
.wa-flotante svg{ width:27px; height:27px; fill:#FFF; }

/* ---------- Utilidades ---------- */
.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;
}
.saltar{
  position:absolute; left:-9999px; top:0;
  background:var(--acento); color:#FFF; padding:12px 20px; z-index:999;
  font-family:var(--f-dato); font-size:13px;
}
.saltar:focus{ left:0; }

.aparece{
  opacity:0; transform:translateY(16px);
  transition:opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1);
}
.aparece--visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .aparece{ opacity:1; transform:none; } }

/* ---------- Barra de vista previa ---------- */
.aviso-preview{
  background:var(--acento-tenue);
  border-bottom:1px solid rgba(21,112,93,.3);
  color:var(--tinta-media);
  font-family:var(--f-dato);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.02em;
  padding:11px var(--gutter);
  text-align:center;
}
.aviso-preview strong{ color:var(--acento-osc); font-weight:600; }

/* Contacto desactivado en la vista previa */
.inactivo{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.pendiente{
  font-family:var(--f-dato);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
}

/* ---------- Acabados y espesores (Neolith) ----------
   Dos tablas al lado de la otra: los acabados lisos y los texturados. La letra
   va mas chica que el resto de la pagina a proposito: es una tabla de consulta,
   no un texto para leer de corrido. */
.ae{display:grid;gap:26px 30px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    align-items:start}
.ae__titulo{font-family:var(--f-display);font-weight:500;color:var(--tinta);
            font-size:1.02rem;line-height:1.2;margin:0 0 8px;
            display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ae__titulo span{font-family:var(--f-texto);font-weight:400;font-size:.72rem;
                 color:var(--tinta-tenue);letter-spacing:.04em}
.ae__marco{overflow-x:auto;border:1px solid var(--linea)}
.ae__tabla{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;
           font-size:.78rem;line-height:1.35}
.ae__tabla thead th{background:var(--fondo);padding:7px 6px 5px;vertical-align:bottom;
                    border-bottom:1px solid var(--linea-fuerte);
                    font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
                    font-weight:700;color:var(--tinta);white-space:nowrap}
.ae__tabla thead th:first-child{text-align:left;padding-left:10px}
.ae__ac{display:block}

/* El renglon de medidas de placa. Repite la ranura verde de la tabla para que
   se lea sola: el mismo cuadradito quiere decir el mismo espesor. */
.ae__placas{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 0 22px;padding:0;
            border:1px solid var(--linea)}
.ae__placas li{flex:1 1 230px;display:flex;align-items:center;gap:10px;
               padding:12px 16px;border-right:1px solid var(--linea)}
.ae__placas li:last-child{border-right:0}
.ae__placas b{flex:none;width:2.1em;height:1.6em;display:flex;align-items:center;
              justify-content:center;background:var(--acento);color:#fff;
              font-weight:700;font-size:.78rem}
.ae__mm{font-weight:600;font-size:.86rem;color:var(--tinta);white-space:nowrap}
.ae__dim{font-size:.92rem;color:var(--tinta);font-variant-numeric:tabular-nums;
         white-space:nowrap}
.ae__tabla tbody th{background:var(--fondo);text-align:left;font-weight:400;
                    font-size:.82rem;color:var(--tinta);white-space:nowrap;
                    padding:4px 10px;border-right:1px solid var(--linea)}
.ae__tabla td{padding:4px 6px;border-top:1px solid var(--linea);background:var(--fondo)}
.ae__tabla tbody tr:nth-child(even) th,
.ae__tabla tbody tr:nth-child(even) td{background:var(--fondo-alt,#F4F5F6)}
.ae__ranuras{display:flex;justify-content:center;gap:3px}
.ae__ranuras b,.ae__ranuras i{width:1.9em;height:1.35em;display:flex;align-items:center;
                              justify-content:center;font-style:normal;font-size:.68rem}
.ae__ranuras b{background:var(--acento);color:#fff;font-weight:700}
.ae__ranuras i::before{content:"";width:4px;height:1px;background:var(--tinta-tenue);opacity:.5}
.ae__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
        white-space:nowrap}
@media (max-width:560px){
  /* En celular la tabla de texturados tiene 4 acabados y se pasaba de ancho:
     se achican las ranuras y el aire lateral para que entre sin scroll. */
  .ae__tabla{font-size:.74rem}
  .ae__tabla tbody th{font-size:.78rem;padding:4px 8px}
  /* los nombres largos parten en dos lineas en vez de ensanchar la columna */
  .ae__tabla thead th{padding:6px 3px 4px;white-space:normal;hyphens:none}
  .ae__ac{min-width:0}
  .ae__tabla td{padding:4px 3px}
  .ae__ranuras{gap:2px}
  .ae__ranuras b,.ae__ranuras i{width:1.6em}
}

/* ---------- Obras propias en miniatura (paginas de material) ----------
   En columnas tipo mosaico y con la proporcion real, doce fotos ocupaban mas
   de 1400 px: la seccion mas alta de la pagina. Aca van todas del mismo
   tamano, recortadas al centro, y la foto entera se ve al tocarla. */
.usos--chicas{
  columns:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(96px, 13vw, 158px), 1fr));
  gap:clamp(8px, 1vw, 12px);
}
.usos--chicas .uso{ margin:0; }
.usos--chicas .uso img{ aspect-ratio:4 / 3; object-fit:cover; object-position:center; }
.usos--chicas .uso__pie{ font-size:.72rem; padding:5px 7px; }
.usos__nota{ margin:12px 0 0; font-size:.85rem; color:var(--tinta-tenue); }

/* ---------- Filtros plegables ----------
   En un celular los dos grupos de chips median 432 px de alto. En vertical
   empujaban las fotos fuera de la pantalla; en horizontal, con 390 px de alto
   de ventana, no se veia ni una. Abajo de 900 px de ancho —o en cualquier
   pantalla muy baja, que es el celular acostado— los filtros arrancan
   plegados detras de un boton que dice que hay puesto. */
.filtros__toggle{ display:none; }

@media (max-width:900px), (max-height:560px){
  .filtros__toggle{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:11px 14px; margin:0;
    background:var(--fondo); color:var(--tinta);
    border:1px solid var(--linea-fuerte); border-radius:var(--r);
    font-family:inherit; font-size:.86rem; line-height:1.2; text-align:left;
    cursor:pointer;
  }
  .filtros__toggle-txt{ font-weight:700; letter-spacing:.02em; }
  .filtros__toggle-que{
    flex:1 1 auto; color:var(--tinta-tenue); font-size:.82rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .filtros__toggle-flecha{
    flex:none; width:9px; height:9px; margin-right:2px;
    border-right:2px solid var(--acento); border-bottom:2px solid var(--acento);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .18s ease;
  }
  .filtros--abierto .filtros__toggle-flecha{
    transform:rotate(-135deg) translate(-2px,-2px);
  }
  .filtros__cuerpo{ display:none; }
  .filtros--abierto .filtros__cuerpo{ display:block; padding-top:12px; }
}