/* ============================================================
   GESTORÍA VEHICULAR — sistema visual
   Paleta tomada de las fotos del cliente: negro + dorado,
   con rojo y verde como acentos.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --negro:#050505;
  --negro-2:#0a0a0b;
  --negro-3:#111112;
  --oro:#ffd100;
  --oro-claro:#ffe55c;
  --oro-tenue:rgba(255,209,0,.12);
  --rojo:#e30613;
  --rojo-tenue:rgba(227,6,19,.14);
  --verde:#1b8a3e;
  --verde-tenue:rgba(27,138,62,.14);

  --txt:#f5f5f4;
  --txt-2:rgba(245,245,244,.64);
  --txt-3:rgba(245,245,244,.40);
  --linea:rgba(255,255,255,.10);
  --linea-2:rgba(255,255,255,.06);

  --r-grande:2rem;
  --r-media:1.5rem;
  --r-chica:calc(2rem - .375rem);

  --sombra:0 24px 60px rgba(0,0,0,.55);
  --sombra-baja:0 8px 24px rgba(0,0,0,.35);

  /* Masa y resorte: nada de linear ni ease-in-out */
  --mov:cubic-bezier(.32,.72,0,1);
  --mov-rapido:cubic-bezier(.22,1,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}

body{
  margin:0;
  background:var(--negro);
  color:var(--txt);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--oro);color:#000}

/* ---------- TEXTURA DE FONDO: orbes radiales muy tenues ---------- */
.orb{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -8%,rgba(255,209,0,.10),transparent 60%),
    radial-gradient(50rem 36rem at 92% 8%,rgba(227,6,19,.09),transparent 62%),
    radial-gradient(46rem 40rem at 50% 108%,rgba(27,138,62,.07),transparent 60%);
}
/* Grano de papel: solo fijo, nunca dentro de contenido que se desplaza */
.grano{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.env{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3,h4{margin:0;font-family:'Sora',sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.035em}

h1{font-size:clamp(2.75rem,7.4vw,6rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.02em}

.oro-grad{
  background-image:linear-gradient(104deg,var(--oro) 0%,var(--oro-claro) 26%,#c9a400 52%,var(--oro) 76%,var(--oro-claro) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:brillo 8s var(--mov) infinite;
}
@keyframes brillo{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.eti{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.3rem .85rem;border-radius:999px;
  border:1px solid var(--linea);background:rgba(255,255,255,.03);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-2);
}
.eti::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--oro)}

.entrada{
  font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--txt-2);max-width:52ch;
}

/* ---------- BARRA FLOTANTE (píldora de vidrio, no pegada al borde) ---------- */
.barra{
  position:fixed;top:1.5rem;left:50%;transform:translateX(-50%);
  z-index:70;width:min(64rem,calc(100% - 2rem));
  display:flex;align-items:center;gap:1rem;
  padding:.5rem .5rem .5rem 1rem;
  border-radius:999px;
  background:rgba(10,10,11,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--linea);
  transition:background .5s var(--mov),border-color .5s var(--mov);
}
.barra.scrolled{background:rgba(5,5,5,.88);border-color:rgba(255,255,255,.14)}

.marca{display:flex;align-items:center;gap:.65rem;font-family:'Sora',sans-serif;font-weight:800;font-size:.98rem;letter-spacing:-.02em;white-space:nowrap}
.marca__caja{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(150deg,#3a0609,#8e1017);
  border:1px solid rgba(255,209,0,.34);
  display:grid;place-items:center;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14);
}
.marca__caja svg{width:19px;height:19px;stroke:var(--oro);fill:none;stroke-width:1.6}

.barra__links{display:flex;gap:.25rem;margin-left:auto}
.barra__links a{
  padding:.5rem .9rem;border-radius:999px;
  font-size:.88rem;font-weight:500;color:var(--txt-2);
  transition:background .4s var(--mov),color .4s var(--mov);
}
.barra__links a:hover{background:rgba(255,255,255,.07);color:var(--txt)}

/* ---------- BOTONES: isla con icono anidado ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:.5rem .5rem .5rem 1.35rem;border-radius:999px;
  font-weight:700;font-size:.94rem;line-height:1;
  border:1px solid transparent;cursor:pointer;
  transition:transform .5s var(--mov),background .5s var(--mov),box-shadow .5s var(--mov);
}
.btn:active{transform:scale(.975)}

.btn__ic{
  width:2.1rem;height:2.1rem;border-radius:999px;flex:none;
  display:grid;place-items:center;
  transition:transform .5s var(--mov),background .5s var(--mov);
}
.btn__ic svg{width:1.05rem;height:1.05rem;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Oro: la acción principal */
.btn--oro{background:var(--oro);color:#0a0a0b;box-shadow:0 10px 34px rgba(255,209,0,.24)}
.btn--oro .btn__ic{background:rgba(0,0,0,.12)}
.btn--oro .btn__ic svg{stroke:#0a0a0b}
.btn--oro:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(255,209,0,.34)}
.btn--oro:hover .btn__ic{transform:translate(2px,-1px) scale(1.06);background:rgba(0,0,0,.2)}

/* Fantasma */
.btn--fant{background:rgba(255,255,255,.04);color:var(--txt);border-color:var(--linea)}
.btn--fant .btn__ic{background:rgba(255,255,255,.07)}
.btn--fant .btn__ic svg{stroke:var(--txt)}
.btn--fant:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.btn--fant:hover .btn__ic{transform:translate(2px,-1px) scale(1.06);background:rgba(255,255,255,.14)}

/* Brillo que recorre el borde del botón principal (técnica del MCP) */
.btn--oro::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang,0deg),transparent 0deg,var(--oro-claro) 40deg,transparent 90deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s var(--mov);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.btn--oro:hover::after{opacity:1;animation:gira 2.6s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes gira{to{--ang:360deg}}

/* ---------- PORTADA ---------- */
.portada{
  position:relative;z-index:1;
  padding:clamp(8rem,16vh,11rem) 0 clamp(4rem,8vh,7rem);
  text-align:center;
}
.portada__lema{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.75rem;
  padding:.42rem 1rem;border-radius:999px;
  background:var(--oro-tenue);border:1px solid rgba(255,209,0,.26);
  font-size:.78rem;font-weight:600;color:var(--oro-claro);
}
.portada__lema b{color:var(--oro)}

.portada h1{margin:0 auto;max-width:19ch}
.portada h1 span{display:block}
.portada .entrada{margin:2rem auto 0;text-wrap:balance}

.portada__acciones{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.75rem}

/* Cifras */
.cifras{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(4rem,8vw,6.5rem);
  background:var(--linea-2);
  border:1px solid var(--linea-2);border-radius:var(--r-media);overflow:hidden;
}
.cifra{padding:clamp(1.5rem,3vw,2.25rem) 1rem;background:var(--negro-2);text-align:center}
.cifra b{
  display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1;letter-spacing:-.04em;
  color:var(--oro);
}
.cifra span{display:block;margin-top:.6rem;font-size:.82rem;color:var(--txt-3)}

/* ---------- CINTA DE ESTADOS ---------- */
.cinta{border-top:1px solid var(--linea-2);border-bottom:1px solid var(--linea-2);padding:1.75rem 0;overflow:hidden;position:relative;z-index:1}
.cinta__pista{display:flex;gap:3.5rem;width:max-content;animation:desliza 42s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}
.cinta__item{
  display:flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);
  letter-spacing:-.02em;color:rgba(245,245,244,.34);
}
.cinta__item svg{width:1.35em;height:1.35em;stroke:var(--oro);fill:none;stroke-width:1.3}
.cinta__item b{color:var(--txt);font-weight:800}

/* ---------- SECCIONES ---------- */
.seccion{position:relative;z-index:1;padding:clamp(5.5rem,11vw,9.5rem) 0}
.seccion__c{
  text-align:center;max-width:64ch;margin:0 auto clamp(3rem,6vw,4.5rem);
}
.seccion__c .eti{margin-bottom:1.25rem}
.seccion__c p{margin:1.25rem auto 0;color:var(--txt-2);font-size:1.05rem;text-wrap:balance}

/* ---------- DOBLE BISEL (tarjetas anidadas) ---------- */
.bezel{
  padding:.5rem;border-radius:var(--r-grande);
  background:rgba(255,255,255,.035);
  border:1px solid var(--linea-2);
}
.bezel__nucleo{
  position:relative;height:100%;
  border-radius:var(--r-chica);
  background:linear-gradient(168deg,rgba(22,22,23,.96),rgba(10,10,11,.98));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10);
  overflow:hidden;
}
/* Foco que sigue al puntero (técnica magic-card del MCP) */
.bezel__nucleo::before{
  content:'';position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--mov);pointer-events:none;
  background:radial-gradient(22rem circle at var(--mx,50%) var(--my,50%),rgba(255,209,0,.13),transparent 62%);
}
.bezel:hover .bezel__nucleo::before{opacity:1}

/* ---------- BENTO ASIMÉTRICO DE TRÁMITES ---------- */
/* Las dos tarjetas grandes ocupan una fila entera y se reparten por dentro
   en dos columnas. Antes ocupaban dos filas y el flex dejaba un hueco
   enorme debajo del texto, que se leia como error de maquetacion. */
.bento{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(1rem,2vw,1.5rem);
  grid-auto-rows:auto;
}
.bento > .bezel:nth-child(1){grid-column:span 4}
.bento > .bezel:nth-child(2){grid-column:span 2}
.bento > .bezel:nth-child(3),
.bento > .bezel:nth-child(4),
.bento > .bezel:nth-child(5){grid-column:span 2}
.bento > .bezel:nth-child(6){grid-column:span 6}

/* Doble clase a proposito: .tramite declara display:flex mas abajo y le
   gana a un selector de una sola clase. */
.tramite.tramite--ancho{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:.5rem clamp(1.5rem,3vw,2.75rem);
  align-items:start;
}
.tramite.tramite--ancho .tramite__ic{grid-column:1;grid-row:1;margin-bottom:1.25rem}
.tramite.tramite--ancho h3{grid-column:1;grid-row:2;margin-bottom:.7rem}
.tramite.tramite--ancho p{grid-column:1;grid-row:3;margin:0}
.tramite.tramite--ancho .tramite__incluye{
  grid-column:2;grid-row:1/4;margin:0;align-self:center;
}
.tramite.tramite--ancho .tramite__pie{
  grid-column:1/-1;grid-row:4;margin-top:1.5rem;
}

.tramite{padding:clamp(1.75rem,3.5vw,2.75rem);display:flex;flex-direction:column}
.tramite__ic{
  width:3.25rem;height:3.25rem;border-radius:1rem;flex:none;
  display:grid;place-items:center;margin-bottom:1.5rem;
  border:1px solid var(--linea);
}
.tramite__ic svg{width:1.6rem;height:1.6rem;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.tramite h3{margin-bottom:.7rem}
.tramite p{color:var(--txt-2);font-size:.94rem;margin:0 0 1.25rem;flex:0 1 auto}

/* Las tarjetas grandes necesitan contenido que justifique su tamano:
   sin esto el flex deja un hueco enorme que se lee como error. */
.tramite__incluye{margin:0 0 1.25rem;display:grid;gap:.6rem}
.tramite__incluye li{display:flex;align-items:center;gap:.7rem;font-size:.88rem;color:var(--txt-2)}
.tramite__incluye svg{width:1.05rem;height:1.05rem;flex:none;stroke:var(--oro);fill:none;stroke-width:1.5}
.tramite__incluye b{color:var(--txt);font-weight:600}
.tramite__pie{margin-top:auto}
.tramite__pie{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding-top:1.1rem;border-top:1px solid var(--linea-2);
  font-size:.8rem;color:var(--txt-3);
}
.tramite__tag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:600;
}
.tramite__tag--oro{background:var(--oro-tenue);color:var(--oro);border:1px solid rgba(255,209,0,.24)}
.tramite__tag--rojo{background:var(--rojo-tenue);color:#ff6b72;border:1px solid rgba(227,6,19,.3)}
.tramite__tag--verde{background:var(--verde-tenue);color:#5fd08a;border:1px solid rgba(27,138,62,.34)}

/* Variantes de acento por tramite */
.t-oro .tramite__ic{background:var(--oro-tenue);border-color:rgba(255,209,0,.24)}
.t-oro .tramite__ic svg{stroke:var(--oro)}
.t-rojo .tramite__ic{background:var(--rojo-tenue);border-color:rgba(227,6,19,.3)}
.t-rojo .tramite__ic svg{stroke:#ff6b72}
.t-verde .tramite__ic{background:var(--verde-tenue);border-color:rgba(27,138,62,.34)}
.t-verde .tramite__ic svg{stroke:#5fd08a}

/* ---------- FLYERS DEL CLIENTE ---------- */
.flyers{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.75rem)}
.flyer{padding:.5rem;border-radius:var(--r-media);background:rgba(255,255,255,.035);border:1px solid var(--linea-2)}
/* Proporcion fija: los cuatro flyers llegan en formatos distintos
   (cuadrado y vertical) y sin esto la reticula estira el mas corto
   dejando un bloque vacio debajo. */
.flyer__nucleo{
  border-radius:calc(1.5rem - .375rem);overflow:hidden;background:#000;
  position:relative;aspect-ratio:4/5;padding:.35rem;background:#08080a;
}
/* contain, no cover: estos flyers traen la oferta escrita dentro y
   recortarlos hides informacion. Seakka entero aunque quede marco. */
.flyer img{width:100%;height:100%;object-fit:contain}
.flyer__pie{padding:1.15rem 1.25rem 1.35rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.flyer__pie b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;margin-bottom:.2rem}
.flyer__pie span{font-size:.85rem;color:var(--txt-3)}

/* ---------- PASOS ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.paso{padding:clamp(1.75rem,3vw,2.5rem)}
.paso__n{
  font-family:'Sora',sans-serif;font-weight:800;
  font-size:3.5rem;line-height:1;letter-spacing:-.05em;
  background-image:linear-gradient(160deg,rgba(255,209,0,.28),rgba(255,209,0,.04));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:1.25rem;
}
.paso h3{margin-bottom:.65rem}
.paso p{margin:0;color:var(--txt-2);font-size:.94rem}

/* ---------- DOCUMENTOS ---------- */
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.doc{padding:clamp(1.5rem,3vw,2.25rem)}
.doc__titulo{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.doc__titulo svg{width:1.5rem;height:1.5rem;stroke:var(--oro);fill:none;stroke-width:1.3;flex:none}
.doc__titulo h3{font-size:1.1rem}
.doc li{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:.8rem 0;border-top:1px solid var(--linea-2);
  font-size:.93rem;color:var(--txt-2);
}
.doc li:first-child{border-top:none;padding-top:0}
.doc li svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.25rem;stroke:#5fd08a;fill:none;stroke-width:1.6}
.doc li b{color:var(--txt);font-weight:600}

/* ---------- PREGUNTAS ---------- */
.preguntas{max-width:52rem;margin:0 auto;display:grid;gap:.75rem}
.pregunta{
  border:1px solid var(--linea);border-radius:var(--r-media);
  background:rgba(255,255,255,.028);overflow:hidden;
  transition:border-color .5s var(--mov),background .5s var(--mov);
}
.pregunta[open]{border-color:rgba(255,209,0,.3);background:rgba(255,255,255,.05)}
.pregunta summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 1.75rem;cursor:pointer;list-style:none;
  font-family:'Sora',sans-serif;font-weight:600;font-size:1.02rem;
  transition:color .4s var(--mov);
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:hover{color:var(--oro-claro)}
.pregunta summary svg{
  width:1.15rem;height:1.15rem;flex:none;stroke:var(--txt-3);fill:none;stroke-width:1.5;
  transition:transform .5s var(--mov),stroke .5s var(--mov);
}
.pregunta[open] summary svg{transform:rotate(45deg);stroke:var(--oro)}
.pregunta__r{padding:0 1.75rem 1.75rem;color:var(--txt-2);font-size:.95rem}
.pregunta__r p{margin:0 0 .9rem}
.pregunta__r p:last-child{margin:0}

/* ---------- CIERRE / CONTACTO ---------- */
.cierre{position:relative;z-index:1;padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem);text-align:center}
.cierre h2{max-width:22ch;margin:0 auto}
.cierre__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}
.contacto{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(3.5rem,7vw,5rem);
  background:var(--linea-2);border:1px solid var(--linea-2);
  border-radius:var(--r-media);overflow:hidden;text-align:left;
}
.contacto__it{padding:clamp(1.5rem,3vw,2.25rem);background:var(--negro-2);transition:background .5s var(--mov)}
.contacto__it:hover{background:#0e0e10}
.contacto__it svg{width:1.5rem;height:1.5rem;stroke:var(--oro);fill:none;stroke-width:1.3;margin-bottom:1.1rem}
.contacto__it span{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.4rem}
.contacto__it b{font-family:'Sora',sans-serif;font-weight:700;font-size:1.02rem;word-break:break-word}

/* ---------- PIE ---------- */
.pie{position:relative;z-index:1;border-top:1px solid var(--linea-2);padding:clamp(3rem,6vw,4.5rem) 0}
.pie__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.pie__nota{font-size:.85rem;color:var(--txt-3);max-width:44ch}
.pie nav{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.9rem;color:var(--txt-2)}
.pie nav a{transition:color .4s var(--mov)}
.pie nav a:hover{color:var(--oro)}
.pie__abajo{
  margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--linea-2);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--txt-3);
}

/* ---------- APARICION AL HACER SCROLL ---------- */
/* El estado oculto SOLO se aplica si hay JavaScript. Sin js, o si el script
   falla, la pagina se queda en blanco: eso no puede pasar. */
.js .revelar{opacity:0;transform:translateY(3.5rem);filter:blur(6px)}
.revelar.visible{
  opacity:1;transform:translateY(0);filter:blur(0);
  transition:opacity .95s var(--mov),transform .95s var(--mov),filter .95s var(--mov);
}

/* ---------- BOTON DE WHATSAPP FLOTANTE ---------- */
.wsp{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  z-index:65;width:3.75rem;height:3.75rem;border-radius:999px;
  display:grid;place-items:center;
  background:#25d366;color:#fff;
  box-shadow:0 12px 34px rgba(37,211,102,.34);
  transition:transform .5s var(--mov),box-shadow .5s var(--mov);
}
.wsp:hover{transform:scale(1.08);box-shadow:0 16px 44px rgba(37,211,102,.46)}
.wsp svg{width:1.75rem;height:1.75rem;fill:currentColor}
.wsp::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:2px solid #25d366;opacity:0;animation:onda 2.8s var(--mov) infinite;
}
@keyframes onda{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > .bezel:nth-child(n){grid-column:span 1;grid-row:span 1}
  .bento > .bezel:nth-child(1){grid-column:span 2}
  .bento > .bezel:nth-child(6){grid-column:span 2}
  .tramite.tramite--ancho{grid-template-columns:1fr;gap:1rem}
  .tramite.tramite--ancho .tramite__incluye{grid-column:1;grid-row:auto;margin-bottom:1.25rem}
  .tramite.tramite--ancho .tramite__pie{grid-column:1;grid-row:auto}
  .cifras{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
  html{scroll-padding-top:5rem}
  .barra{
    top:1rem;width:calc(100% - 1.5rem);
    padding:.5rem .5rem .5rem .85rem;
  }
  .barra__links{display:none}
  .barra .btn span.rotulo{display:none}
  .barra .btn{padding-right:.5rem}
  .portada{padding-top:7.5rem}
  .bento,.pasos,.docs,.flyers,.contacto{grid-template-columns:1fr}
  .bento > .bezel:nth-child(n){grid-column:span 1;grid-row:auto}
  .portada__acciones{flex-direction:column}
  .portada__acciones .btn{width:100%;justify-content:flex-start}
  .cierre__cta{flex-direction:column}
  .cierre__cta .btn{width:100%;justify-content:flex-start}
  .pie__in{flex-direction:column;align-items:flex-start}
}

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

/* Quien pidio menos movimiento: todo se apaga */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .revelar{opacity:1;transform:none;filter:none}
  .cinta__pista{animation:none;transform:none}
}