/* ==========================================================================
   YO TE CUBRO — animations.css
   Cursor, íconos animados, ticker, fondos interactivos, spotlight de tarjetas
   ========================================================================== */

/* ---------- cursor personalizado (solo con puntero fino y JS activo) ---------- */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor [data-editable]{cursor:none}
.cursor{
  position:fixed;top:0;left:0;z-index:10005;pointer-events:none;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--color-primary);mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);
}
.cursor-ring{
  position:fixed;top:0;left:0;z-index:10004;pointer-events:none;
  width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1px solid hsla(20,94%,52%,.65);
  transform:translate3d(-100px,-100px,0);
  transition:width .28s var(--ease-out-expo),height .28s var(--ease-out-expo),
             margin .28s var(--ease-out-expo),border-color .2s,background .2s;
}
.cursor-ring--hover{
  width:64px;height:64px;margin:-32px 0 0 -32px;
  background:hsla(20,94%,52%,.10);border-color:hsla(20,94%,52%,.9);
}
.cursor-ring--text{width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px;background:var(--color-primary)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}}

/* ---------- fondos interactivos (canvas) ---------- */
.bg-dots{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:.9;
}
.has-bg{position:relative;isolation:isolate}
.has-bg>.container,.has-bg>.chain__list,.has-bg>.cta__inner{position:relative;z-index:1}

/* ---------- spotlight en tarjetas ---------- */
.spot{position:relative;overflow:hidden}
.spot::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             hsla(20,94%,52%,.16),transparent 62%);
  opacity:0;transition:opacity .35s;
}
.spot::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  padding:1px;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             hsla(20,94%,58%,.9),transparent 65%);
  -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);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;
}
.spot:hover::before,.spot:hover::after{opacity:1}
.spot>*{position:relative;z-index:1}

/* ---------- ticker de barrios ---------- */
.ticker{
  overflow:hidden;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);
  padding:1.05rem 0;background:var(--color-surface);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:ticker 70s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{
  font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);
  padding:0 1.6rem;display:flex;align-items:center;gap:1.6rem;white-space:nowrap;
}
.ticker__item::after{content:'';width:5px;height:5px;background:var(--color-primary);transform:rotate(45deg)}
.ticker__item--hot{color:var(--color-primary)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- banda naranja ---------- */
.band{background:var(--color-primary);color:hsl(24,20%,7%);overflow:hidden;position:relative}
.band__inner{position:relative;z-index:1}
.band__text{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.35rem,.8rem + 2.4vw,3.2rem);line-height:1;letter-spacing:-.035em;
  white-space:nowrap;
}
.band__text span{display:block;color:hsl(24,20%,7%);opacity:.55}
@media (max-width:480px){.band__text{font-size:clamp(.9rem,4.6vw,1.4rem);letter-spacing:-.045em}}
.band__mark{
  position:absolute;right:-4%;bottom:-18%;width:min(48vw,520px);opacity:.14;
  pointer-events:none;z-index:0;
}

/* ---------- íconos animados ---------- */
.icon{display:inline-block;width:44px;height:44px;flex:none;color:var(--color-primary);line-height:0}
.icon svg{width:100%;height:100%;overflow:visible}
.icon *{vector-effect:non-scaling-stroke}

/* mapa/pin — rebote suave */
.icon--pin .pin{transform-origin:12px 22px;animation:pin-bob 2.6s ease-in-out infinite}
.icon--pin .pin-shadow{transform-origin:12px 22px;animation:pin-shadow 2.6s ease-in-out infinite}
@keyframes pin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes pin-shadow{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.6);opacity:.25}}

/* reloj — aguja gira */
.icon--clock .hand{transform-origin:12px 12px;animation:clock-hand 6s linear infinite}
@keyframes clock-hand{to{transform:rotate(360deg)}}

/* capas — apilan */
.icon--layers .layer{animation:layer-float 3.2s ease-in-out infinite}
.icon--layers .layer:nth-child(2){animation-delay:.25s}
.icon--layers .layer:nth-child(3){animation-delay:.5s}
@keyframes layer-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* rayo/hoy — parpadeo */
.icon--bolt .bolt{animation:bolt-flash 2.2s ease-in-out infinite}
@keyframes bolt-flash{0%,100%{opacity:1}50%{opacity:.35}}

/* tienda — etiqueta que se balancea */
.icon--store .tag{transform-origin:18px 11px;animation:tag-swing 3s ease-in-out infinite}
@keyframes tag-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* gráfico — barras suben al entrar y flecha respira */
.icon--chart .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s var(--ease-out-expo)}
.icon--chart .bar:nth-child(2){transition-delay:.12s}
.icon--chart .bar:nth-child(3){transition-delay:.24s}
.is-in .icon--chart .bar{transform:scaleY(1)}
.icon--chart .trend{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset 1s .3s var(--ease-out-expo)}
.is-in .icon--chart .trend{stroke-dashoffset:0}

/* chat — puntos escribiendo */
.icon--chat .dot{animation:chat-dot 1.4s ease-in-out infinite}
.icon--chat .dot:nth-child(2){animation-delay:.18s}
.icon--chat .dot:nth-child(3){animation-delay:.36s}
@keyframes chat-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* caja — escáner recorre */
.icon--box .scan{animation:box-scan 2.4s ease-in-out infinite}
@keyframes box-scan{0%,100%{transform:translateY(-5px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(6px)}}
.icon--box .lid{transform-origin:12px 8px;transition:transform .4s var(--ease-out-expo)}
.chain__item:hover .icon--box .lid{transform:rotate(-14deg) translateY(-1px)}

/* moto — ruedas giran, líneas de velocidad */
.icon--moto .wheel{transform-box:fill-box;transform-origin:center;animation:wheel-spin 1.1s linear infinite}
.icon--moto .speed{animation:speed-line 1.1s linear infinite;opacity:0}
.icon--moto .speed:nth-child(2){animation-delay:.35s}
.icon--moto .speed:nth-child(3){animation-delay:.7s}
@keyframes wheel-spin{to{transform:rotate(360deg)}}
@keyframes speed-line{0%{transform:translateX(3px);opacity:0}30%{opacity:.9}100%{transform:translateX(-7px);opacity:0}}

/* escudo — el check se dibuja y el borde respira (posventa en Mercado Libre) */
.icon--shield .tick{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .7s .15s var(--ease-out-expo)}
.is-in .icon--shield .tick{stroke-dashoffset:0}
.icon--shield .shell{animation:shield-glow 3.4s ease-in-out infinite}
@keyframes shield-glow{0%,100%{opacity:1}50%{opacity:.55}}

/* check — se dibuja */
.icon--check .tick{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s var(--ease-out-expo)}
.is-in .icon--check .tick{stroke-dashoffset:0}

/* hover general: el ícono se enciende */
.chain__item:hover .icon,.metric:hover .icon,.day__step:hover .icon{
  filter:drop-shadow(0 0 10px hsla(20,94%,52%,.55));
}
.icon{transition:filter .3s,transform .3s var(--ease-out-expo)}
.chain__item:hover .icon{transform:translateY(-2px) scale(1.06)}

/* ---------- reveal por clip para títulos ---------- */
.clip-reveal{clip-path:inset(0 0 0 0)}

/* ---------- mapa de Uruguay (geometria real, MapSVG) ---------- */
.uy-map{width:100%;height:auto;overflow:visible;transition:transform .6s var(--ease-out-expo)}

/* localizador: pais completo arriba a la derecha */
.uy-map .uy-dep{
  fill:hsla(30,20%,96%,.028);stroke:hsla(30,20%,96%,.16);stroke-width:.9;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.uy-map .uy-dep--on{fill:hsl(20,94%,52%);stroke:hsl(20,94%,52%);stroke-width:1.4}
.uy-map .uy-loupe{fill:none;stroke:hsl(20,94%,52%);stroke-width:1;stroke-dasharray:3 3;opacity:.85}
.uy-map .uy-callout{stroke:hsla(20,94%,52%,.45);stroke-width:1;stroke-dasharray:2 4;fill:none}
.uy-map .uy-tag{
  font-family:'Space Grotesk',monospace;font-size:7.5px;letter-spacing:1.6px;
  fill:hsl(20,94%,58%);text-transform:uppercase;
}

/* area metropolitana ampliada */
.uy-map .uy-frame{fill:hsla(24,9%,9%,.55);stroke:hsla(30,20%,96%,.10);stroke-width:1}
.uy-map .uy-zone{
  fill:hsla(20,94%,52%,.10);stroke:hsl(20,94%,52%);stroke-width:1.1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.uy-map .uy-zone--mvd{fill:hsla(20,94%,52%,.20);stroke-width:1.5}

/* rutas */
.uy-map .uy-routes polyline{
  fill:none;stroke:hsl(20,94%,58%);stroke-width:1.1;opacity:.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* deposito */
.uy-map .uy-halo{fill:url(#uy-glow)}
.uy-map .uy-pulse{
  fill:none;stroke:hsl(20,94%,52%);stroke-width:1.4;
  transform-box:fill-box;transform-origin:center;
  animation:uy-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes uy-pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(3);opacity:0}}

/* nodos */
.uy-map .uy-node{
  fill:hsl(20,94%,58%);cursor:pointer;
  transition:r .25s var(--ease-out-expo),fill .25s;
}
.uy-map .uy-node--hub{fill:hsl(30,20%,96%);stroke:hsl(20,94%,52%);stroke-width:2}
.uy-map .uy-node:hover{fill:hsl(30,20%,96%)}

/* etiquetas */
.uy-map .uy-labels text{
  font-family:'Space Grotesk',monospace;font-size:9px;letter-spacing:1.7px;
  fill:hsl(25,9%,62%);pointer-events:none;
}
.uy-map .uy-hover{
  font-family:'Space Grotesk',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.6px;fill:hsl(30,20%,96%);pointer-events:none;
  transition:opacity .18s;
}
.uy-map .uy-hover tspan{font-weight:400;fill:hsl(20,94%,60%);font-size:9px}

.hero__map-hint{
  position:absolute;left:0;bottom:-.2rem;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:hsl(25,7%,40%);
}


/* ==========================================================================
   VIÑETAS CON ÍCONO REAL
   Antes eran cuadrados vacíos y caracteres sueltos (✓ ✕ → ·) que se leían
   como glifos rotos. Ahora son SVG enmascarados: heredan --color-primary.
   ========================================================================== */
.ico-mask{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

/* check */
.plan__items li::before,
.versus__col--win li::before,
.chain__points li::before{
  content:'';display:block;flex:none;
  background-color:var(--color-primary);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

.plan__items li::before,
.versus__col--win li::before{
  width:17px;height:17px;margin-top:.28em;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.4 5.4L20 6.2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.4 5.4L20 6.2'/%3E%3C/svg%3E");
}

/* chevron para los puntos de cada servicio */
.chain__points li::before{
  width:13px;height:13px;margin-top:.34em;border:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* cruz para la columna de operación propia (excluye la ganadora) */
.versus__col:not(.versus__col--win) li::before{
  content:'';display:block;flex:none;width:16px;height:16px;margin-top:.3em;
  background-color:hsl(25,7%,45%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

/* guion para lo que un plan no incluye */
.plan__items li.off::before{
  background-color:hsl(25,7%,40%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

/* rombo de las condiciones bajo el tarifario */
.rates__foot span::before{
  content:'';display:block;flex:none;width:9px;height:9px;transform:none;
  background-color:var(--color-primary);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l10 10-10 10L2 12z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l10 10-10 10L2 12z'/%3E%3C/svg%3E");
}

/* punto de las pruebas del hero */
.hero__proof li::before{width:7px;height:7px}

/* ==========================================================================
   MOBILE FIRST — correcciones de la auditoría
   ========================================================================== */

/* 1. Áreas táctiles: mínimo 44px en todo lo que se toca */
.footer__nav-list a{display:inline-flex;align-items:center;min-height:44px}
.footer__nav-list li{line-height:1.3}
.footer__social-links a{width:46px;height:46px}
.navbar__hamburger{width:46px;height:46px;display:none;align-items:center;justify-content:center}
.navbar__logo{min-height:44px;align-items:center}
.footer__logo{display:inline-flex;align-items:center;min-height:44px}
.contact__info dd a{display:inline-flex;align-items:center;min-height:44px}

/* 2. Nada de texto por debajo de 12px */
.hero__map-hint{font-size:.72rem;letter-spacing:.1em}

/* 3. El resplandor del hero no empuja el ancho */
.hero__glow{max-width:100%;right:-6%}

/* 4. El botón de WhatsApp no tapa el contenido final */
.footer{padding-bottom:calc(var(--space-md) + 4.5rem)}

/* 5. El mapa se lee en pantalla chica: la tipografía del SVG crece
      para compensar la reducción del viewBox */
@media (max-width:760px){
  .uy-map .uy-labels text{font-size:15px;letter-spacing:1.1px}
  .uy-map .uy-tag{font-size:15px;letter-spacing:1.2px}
  .uy-map .uy-hover{font-size:16px}
  .uy-map .uy-hover tspan{font-size:14px}
  .uy-map .uy-node{r:5}
  .uy-map .uy-routes polyline{stroke-width:1.6}
}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none;flex-wrap:wrap;width:100%}
  .icon *{animation:none!important}
  .icon--chart .bar{transform:scaleY(1)}
  .icon--chart .trend,.icon--check .tick,.icon--shield .tick{stroke-dashoffset:0}
  .uy-map .uy-pulse{animation:none;opacity:.35}
  .cursor,.cursor-ring{display:none}
  .has-cursor,.has-cursor a,.has-cursor button{cursor:auto}
  .bg-dots{display:none}
}