/* ==========================================================================
   MATOS FONTANERÍA — Mundo 6 · Confianza clara
   Paleta "Cal y agua": hueso cálido + azul agua profundo.
   El naranja del logo SOLO aparece en llamar y WhatsApp.
   ========================================================================== */

:root{
  /* --- las 12 --- */
  --fondo:    #F4F1E9;
  --tinta:    #14171A;
  --acento:   #0E5C6E;
  --aviso:    #D2571E;
  --display:  'Bricolage Grotesque', Georgia, serif;
  --cuerpo:   'Figtree', system-ui, sans-serif;
  --escala:   1.26;
  --radio:    3px;
  --grano:    .05;
  --vel:      .55s;
  --curva:    cubic-bezier(.16,1,.3,1);
  --ancho:    1320px;
  --aire:     clamp(72px, 11vh, 140px);

  /* --- derivadas --- */
  --tinta-70: color-mix(in oklab, var(--tinta) 70%, transparent);
  --tinta-45: color-mix(in oklab, var(--tinta) 45%, transparent);
  --linea:    color-mix(in oklab, var(--tinta) 15%, transparent);
  --velo:     color-mix(in oklab, var(--tinta)  4%, transparent);
  --papel:    color-mix(in oklab, #FFFDF8 96%, var(--acento));

  --t--1: clamp(.78rem, .74rem + .2vw, .865rem);
  --t-0:  clamp(1rem, .96rem + .2vw, 1.075rem);
  --t-1:  calc(var(--t-0) * var(--escala));
  --t-2:  calc(var(--t-1) * var(--escala));
  --t-3:  calc(var(--t-2) * var(--escala));
  --gigante: clamp(3rem, 10.5vw, 10rem);
  --enorme:  clamp(2.1rem, 6vw, 5.2rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fondo); color:var(--tinta);
  font-family:var(--cuerpo); font-size:var(--t-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:.94;letter-spacing:-.028em}
::selection{background:var(--acento);color:var(--fondo)}

/* grano: lo que separa "render" de "web" */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:var(--grano); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contenedor{width:min(100% - 2.5rem, var(--ancho));margin-inline:auto}
.seccion{padding-block:var(--aire)}
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--tinta);color:var(--fondo);padding:.8rem 1.2rem}
.saltar:focus{left:.5rem;top:.5rem}

.titular{font-size:var(--enorme)}
.titular--xl{font-size:var(--gigante)}
[data-rev]{visibility:hidden}
.rev-linea{display:block;overflow:hidden;padding-bottom:.06em}
.rev-linea > *{display:block;will-change:transform}

.etiqueta{
  font-family:var(--cuerpo); font-size:var(--t--1); font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--acento);
}
.entradilla{font-size:var(--t-1);line-height:1.45;color:var(--tinta-70);max-width:46ch}
.parrafo{color:var(--tinta-70);max-width:52ch}

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

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1rem 1.6rem;border:1px solid var(--tinta);border-radius:var(--radio);
  font-size:var(--t--1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:transparent;cursor:pointer;
  transition:background var(--vel) var(--curva), color var(--vel) var(--curva), border-color var(--vel) var(--curva);
}
.btn:hover{background:var(--tinta);color:var(--fondo)}
.btn--aviso{background:var(--aviso);border-color:var(--aviso);color:#FFF7F0}
.btn--aviso:hover{background:var(--tinta);border-color:var(--tinta)}
.btn--wa{background:transparent;border-color:var(--tinta)}
.btn--grande{padding:1.25rem 2.2rem;font-size:var(--t-0)}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cab{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background .4s ease, border-color .4s ease, color .4s ease;
  border-bottom:1px solid transparent;
}
.cab__in{
  width:min(100% - 2.5rem, var(--ancho));margin-inline:auto;
  display:flex;align-items:center;gap:2rem;padding:.9rem 0;
}
.cab__marca img{width:132px;height:auto;filter:brightness(0) invert(1);transition:filter .4s ease}
.cab__nav{display:flex;gap:1.7rem;margin-left:auto;font-size:var(--t--1);font-weight:500;color:#fff;transition:color .4s ease}
.cab__nav a{position:relative;padding-block:.2rem}
.cab__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--vel) var(--curva);
}
.cab__nav a:hover::after{transform:scaleX(1)}
.cab__acc{display:flex;align-items:center;gap:.6rem}
.cab .wa,.cab .tel{
  display:inline-flex;align-items:center;gap:.5em;padding:.62rem 1rem;border-radius:999px;
  font-size:var(--t--1);font-weight:600;letter-spacing:.02em;
}
.cab .wa{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.cab .tel{background:var(--aviso);color:#FFF7F0;font-variant-numeric:tabular-nums}
.cab .punto{width:6px;height:6px;border-radius:50%;background:#FFF7F0}

/* al salir de la portada la cabecera se vuelve clara */
.cab.solida{background:color-mix(in oklab, var(--fondo) 88%, transparent);backdrop-filter:blur(10px);border-color:var(--linea)}
.cab.solida .cab__marca img{filter:none}
.cab.solida .cab__nav{color:var(--tinta)}
.cab.solida .wa{background:var(--velo);color:var(--tinta)}

@media (max-width:900px){
  .cab__nav{display:none}
  .cab .wa span{display:none}
  .cab__acc{margin-left:auto}
}
@media (max-width:520px){ .cab .tel{display:none} }

/* ==========================================================================
   PORTADA
   ========================================================================== */
.port{position:relative;min-height:100svh;display:flex;overflow:hidden;color:#F6F3EC}
.port__foto{position:absolute;inset:0;z-index:0}
.port__foto img{
  width:100%;height:118%;object-fit:cover;object-position:50% 26%;
  will-change:transform;
}
.port::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,14,16,.55) 0%, rgba(12,14,16,.05) 20%, rgba(12,14,16,.08) 36%, rgba(12,14,16,.62) 56%, rgba(12,14,16,.93) 100%);
}
.port__in{
  position:relative;z-index:2;width:min(100% - 2.5rem, var(--ancho));margin-inline:auto;
  min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding-block:clamp(5.5rem,11vh,7.5rem) clamp(2.2rem,6vh,4rem);
}
.port__bajo{margin-top:auto}
.port__kicker{
  font-size:var(--t--1);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#F6F3EC;text-shadow:0 1px 14px rgba(12,14,16,.75);
}
.port__tit{
  font-size:clamp(2.35rem, 6.6vw, 6.6rem);font-weight:800;line-height:.92;
  letter-spacing:-.035em;max-width:19ch;
}
.port__pie{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem 2rem;margin-top:clamp(1.2rem,3vh,2.1rem);
}
.port__sub{max-width:40ch;color:rgba(246,243,236,.9);font-size:var(--t-0)}
.port__sub strong{font-weight:600;color:#fff}
.port__acc{display:flex;gap:.7rem;flex-wrap:wrap}
.port__acc .btn{border-color:rgba(246,243,236,.55);color:#F6F3EC}
.port__acc .btn--aviso{border-color:var(--aviso)}
.port__acc .btn--wa:hover{background:#F6F3EC;color:var(--tinta);border-color:#F6F3EC}

@media (max-width:700px){
  .port__foto img{object-position:46% 18%}
  .port__sub{font-size:var(--t--1)}
  .port__acc{width:100%}
  .port__acc .btn{flex:1 1 auto}
}

/* ==========================================================================
   CINTA
   ========================================================================== */
.cinta{background:var(--tinta);color:var(--fondo);overflow:hidden;padding:.85rem 0}
.cinta__fila{display:flex;align-items:center;gap:2.2rem;white-space:nowrap;width:max-content;will-change:transform}
.cinta__fila span{font-size:var(--t--1);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.cinta__fila i{width:5px;height:5px;border-radius:50%;background:var(--aviso);flex:none}

/* ==========================================================================
   SERVICIOS — lista tipográfica, cero tarjetas
   ========================================================================== */
.serv__cab{display:grid;gap:1rem;margin-bottom:clamp(2.4rem,6vh,4rem);max-width:60ch}

/* La foto se queda quieta a la izquierda y va cambiando según bajas por la lista.
   Misma idea que la tienda de Iturrieta. */
.serv__grid{display:grid;grid-template-columns:.92fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}

.serv__media{
  position:sticky;top:112px;aspect-ratio:4/5;border-radius:var(--radio);overflow:hidden;
  background:var(--velo);border:1px solid var(--linea);
}
.serv__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.055);
  transition:opacity .75s var(--curva), transform 1.1s var(--curva);
}
.serv__media img.is-on{opacity:1;transform:scale(1)}

.serv__lista{list-style:none;border-top:1px solid var(--linea)}
.serv__fila{
  padding:clamp(2rem,4.4vw,3.4rem) 0;border-bottom:1px solid var(--linea);
  opacity:.34;transition:opacity .55s var(--curva);
}
.serv__fila:last-child{border-bottom:0}
.serv__fila.is-on{opacity:1}
.serv__num{
  display:block;font-size:var(--t--1);font-weight:600;letter-spacing:.22em;
  color:var(--acento);margin-bottom:.85rem;font-variant-numeric:tabular-nums;
}
.serv__nom{font-size:clamp(1.5rem,3.1vw,2.5rem);font-weight:700;margin-bottom:.7rem}
.serv__desc{color:var(--tinta-70);max-width:44ch}
.serv__mini{display:none}

@media (max-width:900px){
  /* En bloque, no en rejilla: si no, el sticky solo tendría de recorrido
     el alto de su propia fila y la foto no se quedaría quieta. */
  .serv__grid{display:block}
  .serv__media{
    position:sticky;top:76px;z-index:2;
    aspect-ratio:16/10;margin-bottom:1.5rem;
    background:var(--fondo);
    box-shadow:0 20px 34px -26px rgba(20,23,26,.55);
  }
  .serv__lista{border-top:1px solid var(--linea)}
  .serv__fila{padding:clamp(1.5rem,5vw,2.2rem) 0}
  .serv__nom{font-size:clamp(1.35rem,5.6vw,1.9rem)}
  .serv__desc{font-size:var(--t--1);max-width:none}
}

/* ==========================================================================
   EL TRABAJO — antes / después
   ========================================================================== */
.trab{background:var(--velo);border-block:1px solid var(--linea)}
.trab__rej{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.trab__texto .titular{margin:.7rem 0 1.3rem}
.trab__pasos{list-style:none;margin-top:2rem;display:grid}
.trab__pasos li{display:flex;gap:1.1rem;padding:1rem 0;border-top:1px solid var(--linea)}
.trab__pasos b{
  font-family:var(--cuerpo);font-size:var(--t--1);font-weight:600;letter-spacing:.1em;
  color:var(--acento);flex:0 0 2rem;padding-top:.25em;
}
.trab__pasos p{font-size:var(--t--1);color:var(--tinta-70);line-height:1.6}
.trab__pasos strong{color:var(--tinta);font-weight:600}
.trab__ba figcaption{margin-top:.8rem;font-size:var(--t--1);color:var(--tinta-45)}

.ba{
  position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/5;
  --x:50%;touch-action:pan-y;background:var(--tinta);isolation:isolate;
  border:1px solid var(--linea);
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba__d{clip-path:inset(0 0 0 var(--x))}
.ba__linea{
  position:absolute;top:0;bottom:0;left:var(--x);width:2px;z-index:3;pointer-events:none;
  background:#F6F3EC;box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.ba__tira{
  position:absolute;top:50%;left:var(--x);z-index:4;pointer-events:none;
  translate:-50% -50%;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--tinta);background:#F6F3EC;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.ba__et{
  position:absolute;bottom:16px;z-index:3;pointer-events:none;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(12,14,16,.72);color:#F6F3EC;backdrop-filter:blur(6px);
  padding:.5rem .85rem;border-radius:999px;
}
.ba__et--a{left:16px}
.ba__et--d{right:16px}
.ba input[type=range]{
  position:absolute;inset:0;z-index:5;margin:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;
}
.ba input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.ba input[type=range]::-moz-range-thumb{width:44px;height:999px;border:0;background:transparent;cursor:ew-resize}
.ba:has(input:focus-visible) .ba__tira{outline:2px solid var(--aviso);outline-offset:3px}

@media (max-width:860px){ .trab__rej{grid-template-columns:1fr} }

/* ==========================================================================
   NÚMEROS
   ========================================================================== */
.nums{padding-block:clamp(2.6rem,6vh,4.4rem) clamp(1.6rem,3vh,2.4rem)}
.nums__rej{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.nums__rej > div{border-top:1px solid var(--linea);padding-top:1.1rem}
.nums dt{font-size:var(--t--1);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-45)}
.nums dd{
  font-family:var(--display);font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:700;
  line-height:1;letter-spacing:-.03em;margin-top:.35rem;display:flex;align-items:baseline;gap:.12em;
  font-variant-numeric:tabular-nums;
}
.nums dd i{font-style:normal;font-size:.42em;color:var(--acento);font-weight:600}
@media (max-width:760px){ .nums__rej{grid-template-columns:1fr 1fr;gap:1.6rem} .nums__rej > div:last-child{grid-column:1/-1} }

/* ==========================================================================
   TIRA DE FOTOS REALES
   ========================================================================== */
.tira{padding-top:clamp(2.4rem,5vh,3.6rem)}
.tira .etiqueta{margin-bottom:.6rem}
.tira .titular{margin-bottom:clamp(2rem,5vh,3.2rem)}
.tira__pista{
  --sangria:max(1.25rem, calc(50vw - var(--ancho)/2));
  display:flex;gap:1rem;overflow-x:auto;
  padding-inline:var(--sangria);
  scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--sangria);
  scrollbar-width:thin;
}
/* Con flex todas las fichas miden lo mismo y el margen de los bordes se
   respeta igual en los dos lados. En rejilla la primera salía más estrecha. */
.tira__pista > figure{flex:0 0 clamp(240px,25vw,330px);scroll-snap-align:start}
.tira__pista::after{content:"";flex:0 0 1px}
.tira__pista img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:var(--radio)}
.tira__pista figcaption{margin-top:.7rem;font-size:var(--t--1);color:var(--tinta-45)}

/* ==========================================================================
   OPINIONES — con pinta de Google de verdad
   ========================================================================== */
.opi{padding-bottom:clamp(3rem,6vh,4.5rem)}
.opi__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,5vh,3rem)}
.opi__cab .titular{margin-top:.7rem}
.opi__ficha{
  display:flex;align-items:center;gap:.9rem;
  background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:.9rem 1.2rem;
  transition:border-color var(--vel) var(--curva), transform var(--vel) var(--curva);
}
.opi__ficha:hover{border-color:var(--acento);transform:translateY(-2px)}
.opi__nota{display:flex;align-items:baseline;gap:.4rem}
.opi__nota b{font-family:var(--display);font-size:1.65rem;font-weight:700;letter-spacing:-.02em}
.opi__estrellas{color:#FBBC04;font-size:.85rem;letter-spacing:.05em}
.opi__txt{font-size:var(--t--1);line-height:1.4;color:var(--tinta-70)}
.opi__txt em{font-style:normal;color:var(--acento);font-weight:600}

.opi__pista{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,78vw);gap:1rem;
  overflow-x:auto;padding:.4rem max(1.25rem, calc(50vw - var(--ancho)/2)) 1.4rem;
  scroll-snap-type:x proximity;scrollbar-width:thin;cursor:grab;
}
.opi__pista.arrastrando{cursor:grabbing;scroll-snap-type:none;user-select:none}
.res{
  scroll-snap-align:start;
  background:var(--papel);border:1px solid var(--linea);border-radius:8px;
  padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.7rem;
}
.res header{display:flex;align-items:center;gap:.7rem}
.res__av{
  width:38px;height:38px;border-radius:50%;background:var(--c);color:#fff;flex:none;
  display:grid;place-items:center;font-weight:600;font-size:1rem;
}
.res header b{display:block;font-weight:600;font-size:var(--t-0);line-height:1.2}
.res header span{font-size:.74rem;color:var(--tinta-45)}
.res__est{color:#FBBC04;font-size:.9rem;letter-spacing:.08em}
.res p{font-size:var(--t--1);line-height:1.62;color:var(--tinta-70)}
.res--mas{
  align-items:flex-start;justify-content:space-between;
  background:var(--acento);border-color:var(--acento);color:#F1F7F8;
}
.res--mas span{font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.res--mas em{font-style:normal;font-size:1.8rem}
.opi__pista:focus-visible{outline:2px solid var(--aviso);outline-offset:4px}

/* ==========================================================================
   ZONAS
   ========================================================================== */
.zonas .titular{margin:.7rem 0 clamp(1.8rem,4vh,2.8rem)}
.zonas__lista{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .55rem;
}
.zonas__lista li{
  border:1px solid var(--linea);border-radius:999px;padding:.55rem 1.05rem;
  font-size:var(--t--1);color:var(--tinta-70);
  transition:border-color var(--vel) var(--curva), color var(--vel) var(--curva);
}
.zonas__lista li:hover{border-color:var(--acento);color:var(--acento)}

/* ==========================================================================
   CONTACTO — zona sin wow: cero animación decorativa
   ========================================================================== */
.cont{background:var(--tinta);color:var(--fondo)}
.cont .etiqueta{color:#7FD3E4}
.cont .titular{margin:.8rem 0 clamp(1.8rem,4vh,2.6rem)}
.cont__acc{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:clamp(2.4rem,6vh,4rem)}
.cont__acc .btn{border-color:rgba(244,241,233,.5);color:var(--fondo)}
.cont__acc .btn--aviso{border-color:var(--aviso)}
.cont__acc .btn:hover{background:var(--fondo);color:var(--tinta);border-color:var(--fondo)}
.cont__datos{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cont__datos > div{border-top:1px solid rgba(244,241,233,.2);padding-top:1rem}
.cont__datos dt{font-size:var(--t--1);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,233,.5);margin-bottom:.5rem}
.cont__datos dd{font-size:var(--t-0);line-height:1.5}
.cont__datos a{border-bottom:1px solid rgba(244,241,233,.3);transition:border-color var(--vel) var(--curva)}
.cont__datos a:hover{border-color:#7FD3E4}
@media (max-width:700px){ .cont__datos{grid-template-columns:1fr} }
@media (max-width:520px){ .cont__acc .btn{width:100%} }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{background:var(--tinta);color:var(--fondo);padding-block:clamp(2.5rem,6vh,4rem) 6rem;border-top:1px solid rgba(244,241,233,.14)}
.pie__in{display:grid;gap:2rem}
.pie__marca{display:grid;gap:.9rem;max-width:44ch}
.pie__marca img{width:138px;height:auto;filter:brightness(0) invert(1);opacity:.9}
.pie__marca p{font-size:var(--t--1);color:rgba(244,241,233,.6);line-height:1.6}
.pie__nav{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:var(--t--1)}
.pie__nav a{color:rgba(244,241,233,.75);border-bottom:1px solid transparent;transition:border-color var(--vel) var(--curva)}
.pie__nav a:hover{border-color:currentColor}
.pie__legal{font-size:.74rem;color:rgba(244,241,233,.42);line-height:1.7;border-top:1px solid rgba(244,241,233,.14);padding-top:1.4rem}
.pie__legal em{font-style:normal;color:var(--aviso)}

/* ==========================================================================
   BARRA FIJA (móvil)
   ========================================================================== */
.barra{display:none}
@media (max-width:700px){
  .barra{
    display:flex;gap:.5rem;position:fixed;left:.6rem;right:.6rem;bottom:.6rem;z-index:70;
    opacity:0;transform:translateY(120%);pointer-events:none;
    transition:opacity .35s ease, transform .45s var(--curva);
  }
  .barra.visible{opacity:1;transform:none;pointer-events:auto}
  .barra__tel{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
    background:var(--aviso);color:#FFF7F0;border-radius:var(--radio);padding:1rem;
    font-size:var(--t--1);font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;
    box-shadow:0 8px 26px rgba(0,0,0,.24);
  }
  .barra__wa{
    flex:0 0 54px;display:grid;place-items:center;background:#128C4B;color:#fff;
    border-radius:var(--radio);box-shadow:0 8px 26px rgba(0,0,0,.24);
  }
  .pie{padding-bottom:6.5rem}
}

/* ---------- accesibilidad ---------- */
@media (max-width:700px){
  :root{--aire:clamp(56px, 8vh, 84px)}
  .tira__pista > figure{flex:0 0 min(70vw,270px)}
  .tira__pista img{aspect-ratio:4/5}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-rev]{visibility:visible !important}
}