/* ═══════════════════════════════════════════
   SIN MULTAS · hoja de estilos
   Paleta: papel + tinta + sello rojo + oro
   ═══════════════════════════════════════════ */

:root{
  --tinta:#14110E;
  --tinta-2:#221C16;
  --tinta-3:#3A312A;
  --papel:#F4F0E7;
  --papel-2:#EAE3D5;
  --papel-3:#DDD4C2;
  --rojo:#B7352A;
  --rojo-osc:#8C271E;
  --verde:#13543F;
  --verde-cl:#1E7A5A;
  --wa:#1FA855;
  --wa-cl:#25D366;
  --oro:#D9A521;
  --oro-cl:#EFC85A;
  --gris:#6E665A;
  --gris-cl:#9B9184;

  --f-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --f-texto:"Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"Space Mono", ui-monospace, "Courier New", monospace;

  --r:14px;
  --r-lg:22px;
  --cont:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --muelle:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--f-texto);font-size:17px;line-height:1.62;
  font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--oro);color:var(--tinta)}

/* ---------- textura ---------- */
.grano{position:fixed;inset:0;width:100%;height:100%;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply}

/* ---------- barra de progreso ---------- */
.progreso{position:fixed;top:0;left:0;height:3px;width:0;background:var(--oro);z-index:400;transition:width .1s linear}

/* ---------- utilidades ---------- */
.cont{width:100%;max-width:var(--cont);margin:0 auto;padding:0 24px}
.mono{font-family:var(--f-mono);letter-spacing:-.02em}
.mini{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

.tit{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.06;
  letter-spacing:-.015em;margin:.15em 0 .5em;
}
.bajada{font-size:1.06rem;color:var(--gris);max-width:56ch;margin:0}
.sec--osc .bajada,.sec--pqrs .bajada{color:rgba(244,240,231,.66)}

.rotulo{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rojo);font-weight:700;
}
.rotulo i{
  font-style:normal;display:grid;place-items:center;
  width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;font-size:10px;
}
.sec--osc .rotulo{color:var(--oro)}
.rotulo--claro{color:var(--oro)}

.marcado{position:relative;display:inline-block;color:var(--rojo)}
.marcado::after{
  content:"";position:absolute;left:-2%;bottom:.06em;width:104%;height:.34em;
  background:var(--rojo);opacity:.16;border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .2s;
}
.rev.vis .marcado::after,.sec__cab.vis .marcado::after{transform:scaleX(1)}
.marcado--oro{color:var(--oro)}
.marcado--oro::after{background:var(--oro);opacity:.22}

.chulo{color:var(--verde-cl);font-weight:800;margin-right:2px}
.sec--osc .chulo{color:var(--oro)}

/* ---------- secciones ---------- */
.sec{padding:clamp(72px,9vw,130px) 0;position:relative}
.sec--papel{background:var(--papel)}
.sec--osc{background:var(--tinta);color:var(--papel)}
.sec--pqrs{background:var(--verde);color:var(--papel)}
.sec__cab{max-width:64ch;margin-bottom:clamp(36px,5vw,64px)}
.sec__cab--centro{margin-left:auto;margin-right:auto;text-align:center}
.sec__cab--centro .bajada{margin-inline:auto}

/* ---------- animación de aparición ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rev.vis{opacity:1;transform:none}
.rev[data-d="1"]{transition-delay:.09s}
.rev[data-d="2"]{transition-delay:.18s}
.rev[data-d="3"]{transition-delay:.27s}

/* ═══════════ BOTONES ═══════════ */
.btn{
  --bg:var(--tinta);--fg:var(--papel);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:none;border-radius:100px;cursor:pointer;
  background:var(--bg);color:var(--fg);
  font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1;
  overflow:hidden;isolation:isolate;
  transition:transform .3s var(--muelle),box-shadow .3s var(--ease),background .25s;
  box-shadow:0 2px 0 rgba(0,0,0,.16);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px -8px rgba(0,0,0,.4),0 2px 0 rgba(0,0,0,.16)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(-1px)}
.btn--wa{--bg:var(--wa);--fg:#fff}
.btn--wa:hover{background:var(--wa-cl)}
.btn--oro{--bg:var(--oro);--fg:var(--tinta)}
.btn--dark{--bg:var(--tinta);--fg:var(--papel)}
.btn--ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px currentColor,0 10px 24px -12px rgba(0,0,0,.5)}
.btn--sm{padding:11px 20px;font-size:14px}
.btn--lg{padding:17px 32px;font-size:16.5px}
.btn--xl{padding:21px 42px;font-size:18px}
.btn--full{width:100%}
.ico-wa{width:19px;height:19px;flex:none}

/* ═══════════ TICKER ═══════════ */
.ticker{
  display:flex;gap:0;overflow:hidden;background:var(--tinta);color:var(--papel-2);
  padding:9px 0;border-bottom:1px solid rgba(244,240,231,.1);position:relative;z-index:60;
}
.ticker__pista{
  display:flex;align-items:center;gap:26px;padding-right:26px;flex:none;
  animation:desliza 42s linear infinite;white-space:nowrap;
}
.ticker span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.ticker i{color:var(--oro);font-style:normal;font-size:8px}
@keyframes desliza{to{transform:translateX(-100%)}}

/* ═══════════ HEADER ═══════════ */
.cab{position:sticky;top:0;z-index:200;background:transparent;transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s}
.cab.fija{background:rgba(20,17,14,.88);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(244,240,231,.12)}
.cab__in{max-width:var(--cont);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px}

.marca{display:flex;align-items:center;gap:11px;color:var(--papel);flex:none}
.marca__sello{width:34px;height:34px;color:var(--oro);flex:none;transition:transform .6s var(--muelle)}
.marca__sello svg{width:100%;height:100%;display:block}
.marca:hover .marca__sello{transform:rotate(-22deg) scale(1.06)}
.marca__txt{font-family:var(--f-display);font-size:24px;line-height:1;letter-spacing:-.01em}
.marca__txt em{font-style:italic;color:var(--oro)}

.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
  position:relative;padding:9px 14px;border-radius:100px;font-size:14.5px;font-weight:500;
  color:rgba(244,240,231,.72);transition:color .25s,background .25s;
}
.nav a:hover{color:var(--papel);background:rgba(244,240,231,.08)}
.nav a.act{color:var(--oro)}
.nav a.act::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;border-radius:50%;background:var(--oro);transform:translateX(-50%)}

.cab__acc{display:flex;align-items:center;gap:10px;margin-left:6px}
.hamb{display:none;width:42px;height:42px;background:none;border:none;cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between}
.hamb span{display:block;height:2px;background:var(--papel);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.hamb.act span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamb.act span:nth-child(2){opacity:0}
.hamb.act span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;background:var(--tinta);color:var(--papel);overflow:hidden;padding:clamp(56px,7vw,96px) 0 clamp(80px,10vw,130px);margin-top:-70px;padding-top:calc(70px + clamp(56px,7vw,96px))}
.hero__fondo{position:absolute;inset:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28}
.blob--1{width:520px;height:520px;background:var(--rojo);top:-160px;right:-120px;animation:flota1 18s ease-in-out infinite}
.blob--2{width:440px;height:440px;background:var(--verde-cl);bottom:-200px;left:-140px;opacity:.22;animation:flota2 22s ease-in-out infinite}
@keyframes flota1{50%{transform:translate(-50px,60px) scale(1.12)}}
@keyframes flota2{50%{transform:translate(60px,-40px) scale(1.08)}}
.rejilla{
  position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(244,240,231,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(244,240,231,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);
}

.hero__in{position:relative;max-width:var(--cont);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,72px);align-items:center}

.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:7px 16px 7px 12px;border:1px solid rgba(244,240,231,.18);border-radius:100px;font-size:12.5px;letter-spacing:.04em;color:rgba(244,240,231,.8);background:rgba(244,240,231,.04)}
.punto{width:7px;height:7px;border-radius:50%;background:var(--wa-cl);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:late 2.2s infinite}
@keyframes late{70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.hero__h1{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.6rem,6vw,4.7rem);line-height:1.02;letter-spacing:-.022em;margin:0 0 22px;
}
.hero__h1 .sub{font-style:italic;color:var(--oro)}
.tachado{position:relative;display:inline-block;color:var(--papel)}
.tachado::after{
  content:"";position:absolute;left:-3%;top:52%;width:106%;height:5px;border-radius:4px;
  background:var(--rojo);transform:scaleX(0);transform-origin:left;
  animation:tacha .9s var(--ease) 1.05s forwards;
}
@keyframes tacha{to{transform:scaleX(1) rotate(-1.4deg)}}

.palabra{display:inline-block;overflow:hidden;vertical-align:bottom}
.palabra > span{display:inline-block;transform:translateY(105%);animation:sube .85s var(--ease) forwards;animation-delay:var(--dl,0s)}
@keyframes sube{to{transform:none}}

.hero__p{font-size:1.12rem;color:rgba(244,240,231,.74);max-width:52ch;margin:0 0 30px}
.hero__p b{color:var(--papel);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:26px}
.hero__pie-l{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:rgba(244,240,231,.6)}

/* ---------- comparendo ---------- */
.hero__vis{position:relative;display:grid;place-items:center;perspective:1200px}
.tiquete{
  position:relative;width:min(100%,400px);background:var(--papel);color:var(--tinta);
  border-radius:8px;padding:24px 26px 22px;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.75),0 2px 0 rgba(0,0,0,.3);
  transform:rotate(-2.2deg);transition:transform .5s var(--ease);
  animation:entraTiq 1s var(--muelle) .25s both;
}
@keyframes entraTiq{from{opacity:0;transform:rotate(-9deg) translateY(50px) scale(.9)}}
.tiquete::before,.tiquete::after{
  content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:var(--tinta);
  left:-11px;top:calc(50% - 11px);box-shadow:calc(100% + 22px) 0 0 var(--tinta);
  display:none;
}
.tiquete__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.tiquete__tit{font-family:var(--f-display);font-size:24px;line-height:1.1;margin:2px 0 0}
.tiquete__esc{width:38px;height:38px;color:var(--gris);flex:none;opacity:.6}
.tiquete__esc svg{width:100%;height:100%}
.tiquete__corte{height:1px;margin:16px -26px;background:repeating-linear-gradient(90deg,var(--papel-3) 0 7px,transparent 7px 14px)}
.tiquete__fila{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;font-size:13.5px}
.tiquete__fila span{color:var(--gris);flex:none}
.tiquete__fila b{font-weight:600;text-align:right;font-size:13px;word-break:break-all}
.tiquete__fila--total{border-top:1.5px solid var(--tinta);margin-top:10px;padding-top:12px;font-size:15px}
.valor s{color:var(--gris);text-decoration-color:var(--rojo);text-decoration-thickness:2px;font-size:14px}
.valor em{font-style:normal;font-weight:700;color:var(--verde-cl);font-size:19px}
.tiquete__estado{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding:13px;border-radius:9px;background:var(--papel-2)}
.tiquete__estado .mini{color:var(--gris)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--verde)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde-cl);box-shadow:0 0 0 3px rgba(30,122,90,.2)}

.sello{
  position:absolute;right:-48px;bottom:-52px;width:172px;height:172px;color:var(--rojo);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:5px solid currentColor;border-radius:50%;background:rgba(244,240,231,.35);
  pointer-events:none;opacity:.92;
  transform:rotate(-16deg) scale(0);
  animation:sella .7s var(--muelle) 1.45s forwards;
}
.sello::before{content:"";position:absolute;inset:9px;border:2px dashed currentColor;border-radius:50%;opacity:.7}
@keyframes sella{
  0%{transform:rotate(15deg) scale(2.3);opacity:0}
  60%{transform:rotate(-19deg) scale(.95);opacity:1}
  100%{transform:rotate(-16deg) scale(1);opacity:.92}
}
.sello__txt{font-family:var(--f-display);font-size:32px;line-height:1;letter-spacing:.01em;font-weight:400}
.sello__raya{width:76px;height:2px;background:currentColor;opacity:.8}
.sello__sub{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.16em}
.sello__ley{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.09em;opacity:.75}

.notita{
  position:absolute;background:var(--oro);color:var(--tinta);padding:11px 15px;border-radius:10px;
  font-size:12.5px;line-height:1.35;box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
  animation:entraNota .7s var(--muelle) both;
}
.notita b{font-size:15px;font-weight:800}
.notita--1{top:-6%;left:-13%;transform:rotate(-5deg);animation-delay:1.75s;background:var(--papel)}
.notita--2{bottom:6%;left:-19%;transform:rotate(3deg);animation-delay:1.95s}
@keyframes entraNota{from{opacity:0;transform:translateY(18px) rotate(0) scale(.85)}}

/* ═══════════ CIFRAS ═══════════ */
.cifras{background:var(--papel-2);border-bottom:1px solid var(--papel-3);padding:44px 0}
.cifras__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cifra{text-align:center;position:relative}
.cifra+.cifra::before{content:"";position:absolute;left:-11px;top:12%;height:76%;width:1px;background:var(--papel-3)}
.cifra .num{display:block;font-family:var(--f-display);font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;color:var(--rojo)}
.cifra span{font-size:13px;color:var(--gris);letter-spacing:.02em}

/* ═══════════ SERVICIOS (bento) ═══════════ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tarj{
  position:relative;background:var(--papel-2);border:1px solid var(--papel-3);border-radius:var(--r-lg);
  padding:26px 24px 24px;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s,border-color .35s;
  transform-style:preserve-3d;
}
.tarj::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(183,53,42,.09),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.tarj:hover{transform:translateY(-6px);box-shadow:0 26px 46px -26px rgba(20,17,14,.42);border-color:var(--tinta-3);background:#fff}
.tarj:hover::after{opacity:1}
.tarj--xl{grid-column:span 2;grid-row:span 2;background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.tarj--xl:hover{background:var(--tinta-2)}
.tarj--xl::after{background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(217,165,33,.16),transparent 60%)}
.tarj__n{position:absolute;top:20px;right:22px;font-size:11px;letter-spacing:.1em;color:var(--gris-cl);opacity:.7}
.tarj__ico{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:var(--papel-3);color:var(--rojo);margin-bottom:16px;transition:transform .5s var(--muelle),background .35s}
.tarj--xl .tarj__ico{background:rgba(217,165,33,.14);color:var(--oro)}
.tarj:hover .tarj__ico{transform:rotate(-8deg) scale(1.08)}
.tarj__ico svg{width:24px;height:24px;fill:none}
.tarj h3{font-family:var(--f-display);font-weight:400;font-size:1.42rem;line-height:1.15;margin:0 0 9px;letter-spacing:-.01em}
.tarj--xl h3{font-size:2rem;max-width:14ch}
.tarj p{margin:0;font-size:14.6px;color:var(--gris);line-height:1.58}
.tarj--xl p{color:rgba(244,240,231,.7);font-size:15.5px;max-width:38ch}
.tarj__lista{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.tarj__lista li{font-size:14px;color:rgba(244,240,231,.85);padding-left:20px;position:relative}
.tarj__lista li::before{content:"→";position:absolute;left:0;color:var(--oro)}
.tarj__link{display:inline-block;margin-top:22px;font-size:14.5px;font-weight:600;color:var(--oro);border-bottom:1.5px solid transparent;transition:border-color .3s,gap .3s}
.tarj__link:hover{border-color:var(--oro)}
.tarj--acento{background:var(--rojo);color:#fff;border-color:var(--rojo);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
.tarj--acento:hover{background:var(--rojo-osc);transform:translateY(-6px)}
.tarj--acento h3{font-size:1.5rem}
.tarj--acento p{color:rgba(255,255,255,.82);margin-bottom:14px}

/* ═══════════ PROCESO ═══════════ */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.pasos::before{content:"";position:absolute;top:27px;left:8%;right:8%;height:1.5px;background:rgba(244,240,231,.16)}
.paso{position:relative;padding:0 20px;text-align:center}
.paso__n{
  position:relative;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 20px;
  border-radius:50%;background:var(--tinta);border:1.5px solid var(--oro);color:var(--oro);
  font-family:var(--f-display);font-size:25px;line-height:1;
  transition:transform .5s var(--muelle),background .4s,color .4s;
}
.paso:hover .paso__n{background:var(--oro);color:var(--tinta);transform:scale(1.1) rotate(-6deg)}
.paso h3{font-family:var(--f-display);font-weight:400;font-size:1.35rem;margin:0 0 9px;line-height:1.2}
.paso p{margin:0;font-size:14.6px;color:rgba(244,240,231,.66);line-height:1.6}
.paso p b{color:var(--papel);font-weight:600}
.nota-legal{
  margin:clamp(44px,6vw,72px) auto 0;max-width:78ch;text-align:center;font-size:13.6px;
  color:rgba(244,240,231,.55);padding:20px 26px;border:1px dashed rgba(244,240,231,.2);border-radius:var(--r);
}
.nota-legal b{color:var(--oro);font-weight:600}

/* ═══════════ CONSULTA / FORMULARIOS ═══════════ */
.consulta{display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,5vw,66px);align-items:start}
.ventajas{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:9px;font-size:15px}
.caja-tel{padding:18px 22px;border-radius:var(--r);background:var(--papel-2);border:1px solid var(--papel-3)}
.caja-tel .mini{color:var(--gris);margin:0}
.tel{display:block;font-family:var(--f-display);font-size:1.7rem;color:var(--rojo);margin:4px 0 4px;transition:letter-spacing .3s}
.tel:hover{letter-spacing:.01em}
.caja-tel .mini:last-child{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400}

.form{
  background:var(--tinta);color:var(--papel);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);box-shadow:0 34px 60px -34px rgba(20,17,14,.6);
  position:sticky;top:110px;
}
.form--claro{background:rgba(255,255,255,.055);border:1px solid rgba(244,240,231,.16);backdrop-filter:blur(6px);box-shadow:none;position:static}
.form__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;padding-bottom:16px;border-bottom:1px dashed rgba(244,240,231,.2)}
.form__cab .mini{color:var(--gris-cl)}
.form__badge{padding:5px 12px;border-radius:100px;background:var(--wa);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.form__badge--oro{background:var(--oro);color:var(--tinta)}

.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.campo label{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:rgba(244,240,231,.72)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border-radius:11px;
  background:rgba(244,240,231,.07);border:1.5px solid rgba(244,240,231,.14);color:var(--papel);
  font-size:15px;transition:border-color .25s,background .25s,box-shadow .25s;resize:vertical;
}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(244,240,231,.32)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--oro);background:rgba(244,240,231,.1);box-shadow:0 0 0 4px rgba(217,165,33,.14);
}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23D9A521' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:38px;
}
.campo select option{background:var(--tinta);color:var(--papel)}
.ayuda{font-size:12px;color:var(--gris-cl)}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:13px}

.segmento{display:flex;gap:5px;padding:4px;border-radius:100px;background:rgba(244,240,231,.07);margin-bottom:15px;width:fit-content}
.seg{padding:8px 20px;border:none;background:transparent;border-radius:100px;font-size:13.5px;font-weight:600;color:rgba(244,240,231,.6);cursor:pointer;transition:background .3s var(--ease),color .3s}
.seg.act{background:var(--oro);color:var(--tinta)}

.previo{margin:18px 0;padding:14px 16px;border-radius:11px;background:rgba(31,168,85,.1);border:1px dashed rgba(37,211,102,.4)}
.previo .mini{color:var(--wa-cl);display:block;margin-bottom:6px}
.previo p{margin:0;font-size:13.6px;color:rgba(244,240,231,.82);line-height:1.5;white-space:pre-line}
.form__pie{margin:14px 0 0;text-align:center;font-size:12.6px;color:var(--gris-cl)}
.form__pie a{color:var(--oro);border-bottom:1px solid rgba(217,165,33,.4)}
.form__pie--claro{color:rgba(244,240,231,.55)}

/* ═══════════ TESTIMONIOS ═══════════ */
.cintas{display:flex;flex-direction:column;gap:16px;margin:clamp(30px,4vw,50px) 0 clamp(56px,7vw,86px);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta{display:flex;overflow:hidden}
.cinta__pista{display:flex;gap:16px;padding-right:16px;flex:none;animation:desliza 58s linear infinite}
.cinta--rev .cinta__pista{animation-duration:70s;animation-direction:reverse}
.cintas:hover .cinta__pista{animation-play-state:paused}
.voz{
  flex:none;width:min(85vw,370px);margin:0;padding:22px 24px;border-radius:var(--r-lg);
  background:rgba(244,240,231,.055);border:1px solid rgba(244,240,231,.12);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.voz:hover{background:rgba(244,240,231,.1);border-color:rgba(217,165,33,.5);transform:translateY(-4px)}
.voz p{margin:0 0 14px;font-size:15.2px;line-height:1.55;color:rgba(244,240,231,.92)}
.voz cite{font-style:normal;font-size:13px;font-weight:700;color:var(--oro);letter-spacing:.01em}
.voz cite::before{content:"— "}

.pruebas__cab{text-align:center;margin-bottom:30px}
.pruebas__cab h3{font-family:var(--f-display);font-weight:400;font-size:1.8rem;margin:0 0 6px}
.pruebas__cab p{margin:0;font-size:14px;color:rgba(244,240,231,.55)}
.galeria{columns:4;column-gap:14px}
.shot{
  margin:0 0 14px;break-inside:avoid;border-radius:var(--r);overflow:hidden;cursor:zoom-in;
  background:#fff;box-shadow:0 12px 30px -18px rgba(0,0,0,.9);position:relative;
  transition:transform .4s var(--ease),box-shadow .4s;
}
.shot::after{content:"⤢";position:absolute;right:10px;bottom:10px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(20,17,14,.82);color:var(--oro);font-size:14px;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s var(--muelle)}
.shot:hover{transform:translateY(-5px) scale(1.012);box-shadow:0 22px 44px -18px rgba(0,0,0,.95)}
.shot:hover::after{opacity:1;transform:none}

/* ═══════════ OFICINA ═══════════ */
.oficina{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,54px);align-items:start}
.dato{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--papel-3)}
.dato:first-child{padding-top:0}
.dato__ico{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--tinta);color:var(--oro);transition:transform .5s var(--muelle)}
.dato:hover .dato__ico{transform:rotate(-8deg) scale(1.07)}
.dato__ico svg{width:22px;height:22px}
.dato h4{margin:0 0 5px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--rojo)}
.dato p{margin:0;font-size:15px;line-height:1.6}
.abierto{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 13px;border-radius:100px;background:var(--papel-2);font-size:12.5px;font-weight:700}
.abierto::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gris-cl)}
.abierto.si{background:rgba(30,122,90,.14);color:var(--verde)}
.abierto.si::before{background:var(--wa-cl);box-shadow:0 0 0 3px rgba(37,211,102,.22)}
.abierto.no{background:rgba(183,53,42,.1);color:var(--rojo)}
.abierto.no::before{background:var(--rojo)}
.oficina__btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.oficina__mapa{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--papel-3);box-shadow:0 26px 50px -30px rgba(20,17,14,.55);background:var(--papel-2)}
.oficina__mapa iframe{width:100%;height:440px;border:0;display:block;filter:grayscale(.35) contrast(1.05)}

/* ═══════════ PQRS ═══════════ */
.sec--pqrs{overflow:hidden}
.sec--pqrs::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:rgba(217,165,33,.09);top:-260px;right:-180px;filter:blur(40px)}
.pqrs{display:grid;grid-template-columns:1fr .95fr;gap:clamp(32px,5vw,64px);align-items:start;position:relative}
.pqrs__tipos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 22px}
.tipoc{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border-radius:var(--r);background:rgba(244,240,231,.06);border:1px solid rgba(244,240,231,.12);transition:background .3s,transform .3s var(--ease)}
.tipoc:hover{background:rgba(244,240,231,.11);transform:translateY(-3px)}
.tipoc b{font-family:var(--f-display);font-size:30px;line-height:.9;color:var(--oro);flex:none}
.tipoc span{font-size:14px;font-weight:600;line-height:1.35}
.tipoc small{font-weight:400;font-size:12.4px;color:rgba(244,240,231,.6);line-height:1.4;display:block;margin-top:2px}
.sec--pqrs .mini{color:rgba(244,240,231,.5);text-transform:none;letter-spacing:0;font-weight:400;font-size:12.6px}

/* ═══════════ FAQ ═══════════ */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);align-items:start}
.faq .sec__cab{margin-bottom:0;position:sticky;top:110px}
.acordeon{display:flex;flex-direction:column;gap:9px}
.qa{border:1px solid var(--papel-3);border-radius:var(--r);background:var(--papel-2);overflow:hidden;transition:border-color .3s,background .3s,box-shadow .3s}
.qa[open]{background:#fff;border-color:var(--tinta-3);box-shadow:0 14px 30px -22px rgba(20,17,14,.5)}
.qa summary{
  list-style:none;cursor:pointer;padding:17px 52px 17px 20px;position:relative;
  font-weight:600;font-size:15.6px;line-height:1.4;transition:color .25s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--rojo);border-bottom:2px solid var(--rojo);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.qa[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.qa summary:hover{color:var(--rojo)}
.qa__c{padding:0 20px 19px;animation:abre .4s var(--ease)}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}}
.qa__c p{margin:0;font-size:14.8px;color:var(--gris);line-height:1.65}
.qa__c b{color:var(--tinta);font-weight:600}

/* ═══════════ CIERRE ═══════════ */
.cierre{background:var(--oro);color:var(--tinta);padding:clamp(64px,8vw,110px) 0;position:relative;overflow:hidden}
.cierre::before{
  content:"";position:absolute;inset:0;opacity:.25;
  background-image:repeating-linear-gradient(-45deg,rgba(20,17,14,.16) 0 2px,transparent 2px 16px);
}
.cierre__in{position:relative;text-align:center;max-width:44ch;margin-inline:auto}
.cierre h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06;margin:0 0 14px;letter-spacing:-.015em}
.cierre p{margin:0 0 30px;font-size:1.08rem;color:rgba(20,17,14,.72)}

/* ═══════════ PIE ═══════════ */
.pie{background:var(--tinta);color:var(--papel);padding:clamp(52px,6vw,78px) 0 30px}
.pie__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:36px}
.marca--pie{margin-bottom:16px}
.pie__marca p{margin:0;font-size:14.2px;color:rgba(244,240,231,.55);max-width:34ch;line-height:1.6}
.pie__col{display:flex;flex-direction:column;gap:9px}
.pie__col h5{margin:0 0 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);font-weight:700}
.pie__col a{font-size:14.4px;color:rgba(244,240,231,.66);width:fit-content;cursor:pointer;transition:color .25s,transform .25s var(--ease)}
.pie__col a:hover{color:var(--oro);transform:translateX(3px)}
.pie__dir{margin:10px 0 0;font-size:13.4px;color:rgba(244,240,231,.44);line-height:1.55}
.pie__legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(244,240,231,.12);display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;align-items:baseline}
.pie__legal p{margin:0;font-size:12.4px;color:rgba(244,240,231,.4)}
.pie__disc{max-width:66ch}

/* ═══════════ FLOTANTE ═══════════ */
.flota{
  position:fixed;right:22px;bottom:22px;z-index:300;
  width:60px;height:60px;border-radius:50%;background:var(--wa);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 14px 32px -10px rgba(31,168,85,.75);
  transition:transform .4s var(--muelle),width .4s var(--ease);
}
.flota svg{width:31px;height:31px;position:relative;z-index:2}
.flota:hover{transform:scale(1.08)}
.flota__pulso{position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:pulsa 2.6s ease-out infinite}
@keyframes pulsa{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.flota__tip{
  position:absolute;right:calc(100% + 12px);white-space:nowrap;background:var(--tinta);color:var(--papel);
  padding:8px 14px;border-radius:100px;font-size:13px;font-weight:600;
  opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
}
.flota:hover .flota__tip{opacity:1;transform:none}

/* ═══════════ LIGHTBOX ═══════════ */
.lupa{position:fixed;inset:0;z-index:500;background:rgba(12,10,8,.94);backdrop-filter:blur(8px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lupa.on{opacity:1;visibility:visible}
.lupa img{max-width:min(92vw,760px);max-height:86vh;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.9);transform:scale(.94);transition:transform .35s var(--muelle)}
.lupa.on img{transform:none}
.lupa__x,.lupa__nav{position:absolute;background:rgba(244,240,231,.1);border:1px solid rgba(244,240,231,.2);color:var(--papel);cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:background .25s,transform .25s var(--muelle)}
.lupa__x{top:22px;right:22px;width:46px;height:46px;font-size:18px}
.lupa__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:32px;line-height:0;padding-bottom:5px}
.lupa__nav--ant{left:22px}
.lupa__nav--sig{right:22px}
.lupa__x:hover,.lupa__nav:hover{background:var(--oro);color:var(--tinta);border-color:var(--oro)}
.lupa__nav:hover{transform:translateY(-50%) scale(1.08)}
.lupa__cont{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;color:rgba(244,240,231,.6)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tarj--xl{grid-column:span 2;grid-row:span 1}
  .galeria{columns:3}
  .pie__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .hero__in,.consulta,.oficina,.pqrs,.faq{grid-template-columns:1fr}
  .hero__vis{margin-top:46px;max-width:420px;margin-inline:auto}
  .form{position:static}
  .faq .sec__cab{position:static;margin-bottom:32px}
  .pasos{grid-template-columns:1fr 1fr;gap:38px 0}
  .pasos::before{display:none}
  .cifras__grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .cifra:nth-child(3)::before{display:none}
  .oficina__mapa iframe{height:320px}

  .nav{
    position:fixed;inset:0 0 auto;top:0;padding:96px 24px 34px;
    flex-direction:column;gap:2px;background:rgba(20,17,14,.97);backdrop-filter:blur(16px);
    transform:translateY(-102%);transition:transform .45s var(--ease);
    box-shadow:0 24px 50px -20px rgba(0,0,0,.8);margin:0;
  }
  .nav.abre{transform:none}
  .nav a{padding:14px 8px;font-size:19px;font-family:var(--f-display);border-bottom:1px solid rgba(244,240,231,.08)}
  .cab__acc{margin-left:auto}
  .hamb{display:flex;z-index:210}
}
@media (max-width:640px){
  body{font-size:16px}
  .cont,.cab__in,.hero__in{padding-inline:18px}
  .bento,.pqrs__tipos{grid-template-columns:1fr}
  .tarj--xl{grid-column:span 1}
  .galeria{columns:2;column-gap:10px}
  .shot{margin-bottom:10px}
  .pasos{grid-template-columns:1fr;gap:30px}
  .paso{text-align:left;display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding:0}
  .paso__n{margin:0}
  .paso h3,.paso p{grid-column:2}
  .fila2{grid-template-columns:1fr}
  .sello{width:118px;height:118px;right:-12px;bottom:-52px;border-width:4px}
  .sello__txt{font-size:23px}
  .sello__raya{width:56px}
  .notita--1{left:-4%;top:-6%}
  .notita--2{left:-4%;bottom:-8%}
  .btn--xl{padding:18px 28px;font-size:16px}
  .hero__cta .btn{width:100%}
  .pie__legal{flex-direction:column}
  .lupa__nav{width:42px;height:42px;font-size:26px}
  .lupa__nav--ant{left:8px}.lupa__nav--sig{right:8px}
}
@media (max-width:400px){ .galeria{columns:1} }

/* ═══════════ MOVIMIENTO REDUCIDO ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
  .palabra>span{transform:none}
  .tachado::after,.sello{transform:none;opacity:1}
  .sello{transform:rotate(-16deg)}
}

/* ═══════════ AJUSTES FINALES ═══════════ */
.palabra--libre{overflow:visible}
.tiquete{transform-style:preserve-3d}
.pie__col a[data-wa],.pie__col a[data-mail]{text-decoration:none}
.sec--pqrs .pqrs__txt .mini{margin-top:4px}
.hero__pie-l .chulo{margin-left:2px}

/* ═══════════════════════════════════════════
   BLOQUE 2 · pantalla de carga, escena,
   tipos de multa, radicado y extras
   ═══════════════════════════════════════════ */

/* ---------- pantalla de carga ---------- */
.carga{
  position:fixed;inset:0;z-index:9998;background:var(--tinta);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .55s var(--ease),visibility .55s;
}
.carga.fuera{opacity:0;visibility:hidden}
.carga__semaforo{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:22px;background:#0C0A08;border:1px solid rgba(244,240,231,.12)}
.carga__semaforo .luz{width:24px;height:24px;border-radius:50%;background:rgba(244,240,231,.09)}
.luz--r{animation:luzR 1.5s infinite}
.luz--a{animation:luzA 1.5s infinite}
.luz--v{animation:luzV 1.5s infinite}
@keyframes luzR{0%,28%{background:var(--rojo);box-shadow:0 0 16px var(--rojo)}29%,100%{background:rgba(244,240,231,.09);box-shadow:none}}
@keyframes luzA{30%,55%{background:var(--oro);box-shadow:0 0 16px var(--oro)}0%,29%,56%,100%{background:rgba(244,240,231,.09);box-shadow:none}}
@keyframes luzV{58%,95%{background:var(--wa-cl);box-shadow:0 0 16px var(--wa-cl)}0%,57%,96%,100%{background:rgba(244,240,231,.09);box-shadow:none}}
.carga__txt{font-family:var(--f-display);font-size:29px;color:var(--papel);margin:0;letter-spacing:-.01em;opacity:0;animation:apareceTxt .6s .25s forwards}
.carga__txt em{font-style:italic;color:var(--oro)}
@keyframes apareceTxt{to{opacity:1}}

/* ---------- cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--oro);pointer-events:none;z-index:9997;opacity:0;
  transform:translate(-50%,-50%);transition:opacity .3s,width .28s var(--muelle),height .28s var(--muelle),background .28s,border-color .28s;
  mix-blend-mode:difference;
}
.cursor.on{opacity:.85}
.cursor.grande{width:58px;height:58px;background:rgba(217,165,33,.22);border-color:transparent}
@media (hover:none),(max-width:920px){.cursor{display:none}}

/* ---------- botón magnético ---------- */
.magnetico{will-change:transform}

/* ---------- hero: faros y vía ---------- */
.faros{
  position:absolute;top:12%;left:-30%;width:60%;height:5px;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(247,231,168,.5),transparent);
  filter:blur(5px);animation:pasaFaro 9s linear infinite;
}
@keyframes pasaFaro{0%{transform:translateX(0)}55%,100%{transform:translateX(280%)}}
.hero__via{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(244,240,231,.09);overflow:hidden}
.hero__via span{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--oro) 0 42px,transparent 42px 88px);
  opacity:.5;animation:corre 3.2s linear infinite;
}
@keyframes corre{to{transform:translateX(-88px)}}

/* ---------- hero: prueba social viva ---------- */
.hero__vivo{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.hero__caras{display:flex}
.hero__caras i{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--tinta);margin-left:-9px;
  background:linear-gradient(135deg,var(--oro),var(--rojo));
  animation:entraCara .5s var(--muelle) both;
}
.hero__caras i:first-child{margin-left:0}
.hero__caras i:nth-child(2){background:linear-gradient(135deg,var(--verde-cl),var(--oro));animation-delay:.1s}
.hero__caras i:nth-child(3){background:linear-gradient(135deg,var(--rojo),var(--tinta-3));animation-delay:.2s}
.hero__caras i:nth-child(4){background:linear-gradient(135deg,var(--gris),var(--wa));animation-delay:.3s}
@keyframes entraCara{from{transform:scale(0)}}
.hero__vivo p{margin:0;font-size:13.5px;color:rgba(244,240,231,.6)}
.hero__vivo b{color:var(--oro);font-weight:700}

/* ---------- franja de confianza ---------- */
.confia{background:var(--tinta-2);color:var(--papel);padding:30px 0;border-top:1px solid rgba(244,240,231,.08)}
.confia__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.confia__it{display:flex;gap:13px;align-items:center}
.confia__ico{
  flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:rgba(217,165,33,.13);color:var(--oro);transition:transform .5s var(--muelle),background .3s;
}
.confia__it:hover .confia__ico{transform:rotate(-10deg) scale(1.1);background:var(--oro);color:var(--tinta)}
.confia__ico svg{width:21px;height:21px}
.confia__it b{display:block;font-size:14.6px;font-weight:700;line-height:1.25}
.confia__it span{display:block;font-size:12.6px;color:rgba(244,240,231,.55);line-height:1.4}

/* ═══════════ ESCENA (agente, cámara, vía) ═══════════ */
.escena{margin:clamp(26px,4vw,44px) 0 clamp(44px,6vw,72px)}
.escena__calle{
  position:relative;height:330px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(244,240,231,.05) 0%,rgba(244,240,231,.02) 55%,rgba(20,17,14,0) 100%);
  border:1px solid rgba(244,240,231,.1);
}
.escena__linea{
  position:absolute;left:0;right:0;bottom:56px;height:4px;
  background:repeating-linear-gradient(90deg,rgba(244,240,231,.35) 0 44px,transparent 44px 92px);
  animation:corre 2.6s linear infinite;
}
.escena__calle::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:rgba(20,17,14,.55);border-top:2px solid rgba(244,240,231,.14);
}

.escena__sem{position:absolute;left:5%;bottom:40px;height:190px;width:auto}
.sem{fill:rgba(244,240,231,.08)}
.sem--r{animation:semR 9s infinite}
.sem--a{animation:semA 9s infinite}
.sem--v{animation:semV 9s infinite}
@keyframes semR{18%,52%{fill:#B7352A;filter:drop-shadow(0 0 8px #B7352A)}0%,17%,53%,100%{fill:rgba(244,240,231,.08);filter:none}}
@keyframes semA{12%,17%{fill:#D9A521;filter:drop-shadow(0 0 8px #D9A521)}0%,11%,18%,100%{fill:rgba(244,240,231,.08);filter:none}}
@keyframes semV{0%,11%,54%,100%{fill:#25D366;filter:drop-shadow(0 0 8px #25D366)}12%,53%{fill:rgba(244,240,231,.08);filter:none}}

.escena__cam{position:absolute;right:7%;bottom:40px;height:230px;width:120px}
.escena__cam svg{width:100%;height:100%;overflow:visible}
.cam__caja{transform-box:fill-box;transform-origin:50% 100%;animation:miraCam 9s ease-in-out infinite}
@keyframes miraCam{0%,25%{transform:rotate(0)}34%,44%{transform:rotate(-7deg)}60%,100%{transform:rotate(0)}}
.cam__led{animation:led 1.4s infinite}
@keyframes led{50%{opacity:.25}}
.flash{
  position:absolute;right:12px;top:26px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 62%);
  opacity:0;pointer-events:none;animation:destella 9s infinite;
}
@keyframes destella{0%,37%{opacity:0}38%{opacity:1}41%{opacity:.15}42%{opacity:.9}46%,100%{opacity:0}}

.escena__agente{position:absolute;left:31%;bottom:26px;height:270px;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.agente__brazo{transform-box:fill-box;transform-origin:2% 96%;animation:saluda 9s ease-in-out infinite}
@keyframes saluda{
  0%,12%{transform:rotate(52deg)}
  20%,50%{transform:rotate(0deg)}
  60%,100%{transform:rotate(52deg)}
}
.agente__paleta{transform-box:fill-box;transform-origin:50% 100%;animation:giraPaleta 9s ease-in-out infinite}
@keyframes giraPaleta{
  0%,16%{transform:rotate(0) scaleX(.12)}
  24%,48%{transform:rotate(0) scaleX(1)}
  56%,100%{transform:rotate(0) scaleX(.12)}
}

.escena__carro{position:absolute;bottom:34px;left:0;width:210px;animation:pasaCarro 9s ease-in-out infinite}
@keyframes pasaCarro{
  0%{transform:translateX(-260px)}
  14%{transform:translateX(64vw)}
  22%,52%{transform:translateX(66vw)}
  74%,100%{transform:translateX(120vw)}
}
.escena__moto{position:absolute;bottom:38px;left:0;width:140px;opacity:.9;animation:pasaMoto 9s linear infinite}
@keyframes pasaMoto{
  0%,58%{transform:translateX(-200px)}
  92%,100%{transform:translateX(115vw)}
}

/* ---------- tipos de multa ---------- */
.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.tipo{
  position:relative;padding:26px 24px 24px;border-radius:var(--r-lg);
  background:rgba(244,240,231,.045);border:1px solid rgba(244,240,231,.12);overflow:hidden;
  transition:transform .45s var(--ease),background .35s,border-color .35s;
}
.tipo::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--oro);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.tipo:hover{background:rgba(244,240,231,.09);border-color:rgba(217,165,33,.45)}
.tipo:hover::before{transform:scaleY(1)}
.tipo__eti{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--oro);opacity:.75}
.tipo h3{font-family:var(--f-display);font-weight:400;font-size:1.6rem;margin:8px 0 8px;line-height:1.1}
.tipo p{margin:0;font-size:14.4px;color:rgba(244,240,231,.62);line-height:1.55}
.tipo--rojo{background:rgba(183,53,42,.16);border-color:rgba(183,53,42,.45)}
.tipo--rojo::before{background:var(--rojo)}
.tipo--rojo:hover{background:rgba(183,53,42,.24);border-color:var(--rojo)}
.tipo--rojo .tipo__eti{color:#E8897C}

/* ---------- pista del proceso ---------- */
.pista{position:relative;height:64px;margin-bottom:6px}
.pista__linea{position:absolute;left:8%;right:8%;top:46px;height:2px;background:rgba(244,240,231,.14);border-radius:2px;overflow:hidden;display:block}
.pista__linea i{position:absolute;inset:0;width:0;background:var(--oro);transition:width .25s linear}
.pista__carro{position:absolute;top:8px;left:8%;width:74px;transform:translateX(-50%);transition:left .25s linear;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}

/* ---------- garantías ---------- */
.garantias{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin:clamp(40px,5vw,64px) auto 0;max-width:900px;
}
.garantias span{
  display:inline-flex;align-items:baseline;gap:10px;padding:13px 22px;border-radius:100px;
  border:1px dashed rgba(244,240,231,.22);font-size:13.6px;color:rgba(244,240,231,.62);
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.garantias span:hover{border-color:var(--oro);background:rgba(217,165,33,.08);transform:translateY(-3px)}
.garantias b{font-family:var(--f-display);font-size:26px;color:var(--oro);line-height:1}

/* ---------- buscador de radicado ---------- */
.buscador{margin-top:26px;padding:20px 22px;border-radius:var(--r);background:rgba(244,240,231,.06);border:1px solid rgba(244,240,231,.14)}
.buscador label{display:block;color:var(--oro);margin-bottom:9px}
.buscador__fila{display:flex;gap:9px}
.buscador__fila input{
  flex:1;min-width:0;padding:12px 14px;border-radius:10px;font-size:14px;
  background:rgba(20,17,14,.3);border:1.5px solid rgba(244,240,231,.18);color:var(--papel);
  transition:border-color .25s,box-shadow .25s;
}
.buscador__fila input::placeholder{color:rgba(244,240,231,.3)}
.buscador__fila input:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 4px rgba(217,165,33,.14)}
.buscador__res{margin:11px 0 0;font-size:13.4px;min-height:1px;color:rgba(244,240,231,.75)}
.buscador__res b{color:var(--oro)}
.buscador__res.mal{color:#F1A79E}

/* ---------- radicado generado ---------- */
.radicado{
  display:none;margin-top:18px;padding:20px;border-radius:var(--r);text-align:center;
  background:rgba(217,165,33,.14);border:1.5px dashed var(--oro);
  animation:saleRad .55s var(--muelle);
}
.radicado.on{display:block}
@keyframes saleRad{from{opacity:0;transform:translateY(14px) scale(.96)}}
.radicado .mini{color:var(--oro);display:block}
.radicado b{display:block;font-size:24px;letter-spacing:.02em;margin:7px 0 6px;color:var(--papel)}
.radicado p{margin:0 0 12px;font-size:12.8px;color:rgba(244,240,231,.6)}
.radicado__copiar{
  padding:8px 18px;border-radius:100px;border:1px solid var(--oro);background:transparent;
  color:var(--oro);font-size:12.8px;font-weight:600;cursor:pointer;transition:background .25s,color .25s;
}
.radicado__copiar:hover{background:var(--oro);color:var(--tinta)}

/* ---------- aviso emergente ---------- */
.aviso{
  position:fixed;left:50%;bottom:30px;z-index:600;transform:translate(-50%,140%);
  padding:14px 26px;border-radius:100px;background:var(--tinta);color:var(--papel);
  font-size:14.4px;font-weight:600;box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
  border:1px solid rgba(217,165,33,.5);transition:transform .45s var(--muelle);
  max-width:calc(100vw - 36px);text-align:center;
}
.aviso.on{transform:translate(-50%,0)}

/* ---------- cierre ---------- */
.cierre__ofi{margin:18px 0 0;font-size:13.6px;color:rgba(20,17,14,.6)}

/* ═══════════ RESPONSIVE · bloque 2 ═══════════ */
@media (max-width:1080px){
  .tipos{grid-template-columns:repeat(2,1fr)}
  .confia__grid{grid-template-columns:1fr 1fr;gap:20px 26px}
}
@media (max-width:920px){
  .escena__calle{height:270px}
  .escena__agente{height:210px;left:26%}
  .escena__sem{height:150px}
  .escena__cam{height:180px;right:4%}
  .escena__carro{width:170px}
  .pista{display:none}
}
@media (max-width:640px){
  .tipos{grid-template-columns:1fr}
  .confia__grid{grid-template-columns:1fr;gap:16px}
  .escena__calle{height:215px}
  .escena__agente{height:165px;left:22%}
  .escena__sem{height:118px;left:3%}
  .escena__cam{height:140px;width:80px;right:2%}
  .escena__carro{width:130px}
  .escena__moto{width:100px}
  .escena__linea{bottom:44px}
  .escena__calle::after{height:44px}
  .garantias span{width:100%;justify-content:center}
  .buscador__fila{flex-direction:column}
  .carga__semaforo .luz{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .escena__carro,.escena__moto,.faros,.hero__via span,.escena__linea{animation:none;display:none}
  .agente__brazo{transform:rotate(0)}
  .agente__paleta{transform:scaleX(1)}
  .cursor{display:none}
}

/* ═══════════════════════════════════════════
   BLOQUE 3 · páginas interiores (SEO)
   ═══════════════════════════════════════════ */
.interior{background:var(--tinta);color:var(--papel);padding:clamp(46px,6vw,78px) 0 clamp(52px,7vw,86px);position:relative;overflow:hidden;margin-top:-70px;padding-top:calc(70px + clamp(46px,6vw,78px))}
.interior__fondo{position:absolute;inset:0;overflow:hidden}
.interior .cont{position:relative}
.miga{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 20px;padding:0;list-style:none;font-size:12.6px;color:var(--gris-cl)}
.miga li{display:flex;align-items:center;gap:7px}
.miga li+li::before{content:"›";color:var(--oro)}
.miga a{color:rgba(244,240,231,.65);transition:color .25s}
.miga a:hover{color:var(--oro)}
.miga [aria-current]{color:var(--papel)}
.interior h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;max-width:20ch}
.interior__p{font-size:1.1rem;color:rgba(244,240,231,.74);max-width:58ch;margin:0 0 28px}
.interior__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.interior__marcas{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.4px;color:rgba(244,240,231,.6)}

.pag{padding:clamp(56px,7vw,92px) 0}
.pag__grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,5vw,60px);align-items:start}
.prosa{max-width:70ch;font-size:16.6px;line-height:1.72}
.prosa h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.12;letter-spacing:-.015em;margin:2.2em 0 .55em}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:1.16rem;font-weight:700;margin:1.9em 0 .5em;letter-spacing:-.005em}
.prosa p{margin:0 0 1.15em;color:#3E362E}
.prosa strong{color:var(--tinta);font-weight:700}
.prosa ul,.prosa ol{margin:0 0 1.3em;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.prosa ul li{position:relative;padding-left:30px;color:#3E362E}
.prosa ul li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--rojo)}
.prosa ol{counter-reset:n}
.prosa ol li{position:relative;padding-left:42px;counter-increment:n;color:#3E362E}
.prosa ol li::before{
  content:counter(n);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;
  background:var(--tinta);color:var(--oro);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:12.5px;font-weight:700;
}
.prosa a{color:var(--rojo);font-weight:600;border-bottom:1.5px solid rgba(183,53,42,.3);transition:border-color .25s}
.prosa a:hover{border-color:var(--rojo)}
.prosa blockquote{
  margin:1.8em 0;padding:20px 24px;border-left:3px solid var(--oro);border-radius:0 var(--r) var(--r) 0;
  background:var(--papel-2);font-size:15.6px;
}
.prosa blockquote p:last-child{margin:0}
.prosa blockquote cite{display:block;margin-top:9px;font-style:normal;font-size:13.4px;font-weight:700;color:var(--rojo)}

.destaca{
  margin:2em 0;padding:24px 26px;border-radius:var(--r-lg);background:var(--tinta);color:var(--papel);
  position:relative;overflow:hidden;
}
.destaca h3{margin:0 0 8px;font-family:var(--f-display);font-weight:400;font-size:1.5rem;color:var(--papel)}
.destaca p{margin:0 0 16px;color:rgba(244,240,231,.72);font-size:15px}
.destaca p:last-child{margin:0}

.lado{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px}
.lado__caja{padding:22px 24px;border-radius:var(--r-lg);background:var(--papel-2);border:1px solid var(--papel-3)}
.lado__caja h3{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo);font-weight:700}
.lado__caja p{margin:0 0 14px;font-size:14.4px;color:var(--gris);line-height:1.55}
.lado__caja .btn{width:100%}
.lado__lista{display:flex;flex-direction:column;gap:2px}
.lado__lista a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:10px;
  font-size:14.2px;font-weight:500;transition:background .25s,color .25s,transform .25s var(--ease);
}
.lado__lista a::after{content:"→";color:var(--gris-cl);transition:transform .25s var(--ease)}
.lado__lista a:hover{background:#fff;color:var(--rojo)}
.lado__lista a:hover::after{transform:translateX(3px);color:var(--rojo)}
.lado__lista a[aria-current]{background:var(--tinta);color:var(--papel)}
.lado__lista a[aria-current]::after{color:var(--oro)}
.lado__dir{font-size:13.6px;line-height:1.6;color:var(--gris)}
.lado__dir b{display:block;color:var(--tinta);margin-bottom:4px}

.ciudades{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0}
.ciudades span{padding:7px 15px;border-radius:100px;background:var(--papel-2);border:1px solid var(--papel-3);font-size:13.2px;transition:border-color .25s,transform .25s var(--ease)}
.ciudades span:hover{border-color:var(--rojo);transform:translateY(-2px)}

.relacionadas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(40px,5vw,64px)}
.rel{padding:22px 22px 20px;border-radius:var(--r-lg);background:var(--papel-2);border:1px solid var(--papel-3);transition:transform .4s var(--ease),background .3s,border-color .3s}
.rel:hover{transform:translateY(-5px);background:#fff;border-color:var(--tinta-3)}
.rel b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.28rem;line-height:1.15;margin-bottom:7px}
.rel span{font-size:13.8px;color:var(--gris);line-height:1.5}

/* páginas legales */
.legal .prosa{max-width:76ch}
.legal .prosa h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin-top:2em}
.legal .prosa p,.legal .prosa li{font-size:15.4px}
.actualizado{display:inline-block;padding:7px 16px;border-radius:100px;background:var(--papel-2);border:1px solid var(--papel-3);font-family:var(--f-mono);font-size:12px;margin-bottom:1.6em}

/* 404 */
.err404{min-height:72vh;display:grid;place-items:center;text-align:center;padding:60px 24px}
.err404 b{display:block;font-family:var(--f-display);font-size:clamp(5rem,16vw,10rem);line-height:1;color:var(--rojo);opacity:.9}
.err404 h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,4vw,2.7rem);margin:6px 0 12px}
.err404 p{margin:0 0 26px;color:var(--gris);max-width:46ch}

@media (max-width:920px){
  .pag__grid{grid-template-columns:1fr}
  .lado{position:static;flex-direction:row;flex-wrap:wrap}
  .lado__caja{flex:1 1 280px}
  .relacionadas{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .relacionadas{grid-template-columns:1fr}
  .prosa{font-size:16px}
  .interior__cta .btn{width:100%}
}

/* enlaces dentro de las tarjetas */
.tipo h3 a,.tarj h3 a{color:inherit;transition:color .25s}
.tipo h3 a:hover{color:var(--oro)}
.tarj h3 a:hover{color:var(--rojo)}
.tarj--xl h3 a:hover{color:var(--oro)}
.tipo__mas{display:inline-block;margin-top:14px;font-size:13.6px;font-weight:600;color:var(--oro);border-bottom:1.5px solid transparent;transition:border-color .25s}
.tipo__mas:hover{border-color:var(--oro)}

/* ═══════════ AVISO DE DATOS ═══════════ */
.cookies{
  position:fixed;left:16px;bottom:16px;z-index:350;width:min(400px,calc(100vw - 32px));
  padding:20px 22px;border-radius:var(--r-lg);background:var(--tinta);color:var(--papel);
  border:1px solid rgba(217,165,33,.4);box-shadow:0 26px 60px -22px rgba(0,0,0,.85);
  transform:translateY(150%);transition:transform .55s var(--muelle);
}
.cookies.on{transform:none}
.cookies p{margin:0 0 14px;font-size:13.4px;line-height:1.55;color:rgba(244,240,231,.78)}
.cookies a{color:var(--oro);border-bottom:1px solid rgba(217,165,33,.4)}
.cookies__btns{display:flex;gap:9px;flex-wrap:wrap}
.cookies__btns .btn{flex:1;min-width:120px}
@media (max-width:640px){.cookies{left:10px;right:10px;bottom:96px;width:auto;padding:17px 18px}}

/* ═══════════ Las animaciones del hero esperan a que salga la carga ═══════════ */
.palabra > span,
.tachado::after,
.sello,
.tiquete,
.notita{animation-play-state:paused}
body.listo .palabra > span,
body.listo .tachado::after,
body.listo .sello,
body.listo .tiquete,
body.listo .notita{animation-play-state:running}
@media (prefers-reduced-motion:reduce){
  .palabra > span,.tachado::after,.sello,.tiquete,.notita{animation-play-state:running}
}