/* ==========================================================================
   MOVIL-TECH ROMA — plus.css
   Intro de entrada, radar del mapa, secciones nuevas (equipos, pagos, envíos,
   redes) y el pulido de interacción. Todo sobre el tema claro del sitio.
   Curvas y tiempos siguiendo el criterio de Emil Kowalski: transform+opacity,
   ease-out fuerte, nada por encima de 300ms en interacción directa.
   ========================================================================== */

:root{
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-inout:cubic-bezier(.77,0,.175,1);
}

/* ================================================================= INTRO == */
#mtrPre{
  position:fixed; inset:0; z-index:900; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#060b16;
  transition:opacity .55s var(--e-out), visibility .55s;
}
#mtrPre.is-gone{ opacity:0; visibility:hidden; }
#mtrPre::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background:var(--pre-img) center/cover no-repeat;
  filter:brightness(1.35) saturate(1.12);
  transition:opacity .6s ease;
  animation:preKen 14s var(--e-out) forwards; animation-play-state:paused;
}
#mtrPre.is-ready::before{ opacity:1; animation-play-state:running; }
#mtrPre::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,11,22,.46), rgba(6,11,22,.34) 45%, rgba(6,11,22,.78));
}
@keyframes preKen{ from{ transform:scale(1.16) translateY(-1.5%); } to{ transform:scale(1); } }

.preIn{
  position:relative; z-index:3; text-align:center; color:#fff;
  animation:preRise .7s var(--e-out) both;
  padding:0 22px;
}
@keyframes preRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.preIn__logo{
  width:132px; max-width:44vw; margin:0 auto 20px; display:block;
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.6));
  animation:preFloat 3.4s ease-in-out infinite;
}
@keyframes preFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.preIn__name{
  margin:0 0 6px; font-size:clamp(22px,4.4vw,34px); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase;
}
.preIn__tag{
  margin:0 0 26px; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:#9fc0f5;
}
#mtrEnter{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  border:0; border-radius:999px; padding:15px 40px;
  font-family:inherit; font-size:14px; font-weight:800; letter-spacing:.08em; color:#fff;
  background:linear-gradient(135deg,#0663F5,#3E8BFF);
  box-shadow:0 14px 36px rgba(6,99,245,.45);
  transition:transform 160ms var(--e-out), box-shadow 200ms var(--e-out);
}
#mtrEnter svg{ width:17px; height:17px; }
#mtrEnter:active{ transform:scale(.97); }
.preIn__city{ margin:22px 0 0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7f97bd; }

@media (hover:hover) and (pointer:fine){
  #mtrEnter:hover{ transform:scale(1.04); box-shadow:0 18px 44px rgba(6,99,245,.55); }
}

/* botón de sonido */
.mtrSound{
  position:fixed; left:20px; bottom:22px; z-index:120;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--linea-2); border-radius:999px; padding:9px 14px;
  background:#fff; color:var(--tinta); font:inherit; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; box-shadow:0 10px 26px rgba(11,42,90,.12);
  transition:transform 160ms var(--e-out), box-shadow 200ms var(--e-out), opacity .3s ease;
}
.mtrSound svg{ width:15px; height:15px; color:var(--azul); }
.mtrSound:active{ transform:scale(.97); }
.mtrSound.is-off svg{ color:#9AA7BD; }
@media (hover:hover) and (pointer:fine){
  .mtrSound:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,42,90,.18); }
}
@media (max-width:640px){ .mtrSound{ left:14px; bottom:16px; padding:8px 12px; font-size:10px; } }

/* ========================================================= RADAR DEL MAPA = */
.mapCard__map{ position:relative; }
.mtrRadar{
  position:absolute; inset:0; z-index:6; overflow:hidden; background:#050a14;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .6s var(--e-out);
}
.mtrRadar.is-done{ opacity:0; pointer-events:none; }
.mtrRadar__bg{
  position:absolute; inset:0; z-index:0; background:var(--radar-img) center/cover no-repeat;
  transform:scale(1.12); filter:saturate(1.12) brightness(1.05);
}
.mtrRadar.is-run .mtrRadar__bg{ animation:radarKen 5.4s var(--e-out) forwards; }
@keyframes radarKen{ from{ transform:scale(1.14); } to{ transform:scale(1); } }
.mtrRadar__scrim{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 50% 46%, rgba(6,99,245,.20), rgba(4,8,16,.74) 70%);
}
.mtrScope{
  position:relative; z-index:2; width:min(58%,150px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(120,182,255,.5); overflow:hidden;
  background:radial-gradient(circle, rgba(6,99,245,.16), transparent 70%);
  box-shadow:inset 0 0 30px rgba(6,99,245,.25);
}
.mtrScope__sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(110,180,255,.65), rgba(110,180,255,.06) 30%, transparent 44%);
  animation:radarSpin 1.8s linear infinite;
}
@keyframes radarSpin{ to{ transform:rotate(360deg); } }
.mtrScope__ring{ position:absolute; inset:18px; border:1px solid rgba(120,182,255,.3); border-radius:50%; }
.mtrScope__ring--in{ inset:38px; }
.mtrScope__dot{
  position:absolute; left:54%; top:47%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:#4DA3FF; box-shadow:0 0 14px rgba(77,163,255,.9);
  animation:radarPing 1.9s ease-out infinite;
}
@keyframes radarPing{
  0%{ box-shadow:0 0 0 0 rgba(77,163,255,.55); }
  70%{ box-shadow:0 0 0 18px rgba(77,163,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(77,163,255,0); }
}
.mtrRadar__hud{ position:relative; z-index:3; text-align:center; color:#fff; }
.mtrRadar__msg{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.02em; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.mtrRadar__coords{
  margin:6px 0 0; font-size:10.5px; letter-spacing:.08em; color:#8FC2FF;
  font-variant-numeric:tabular-nums;
}
.mtrRadar__bar{
  position:relative; z-index:3; width:150px; height:4px; border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.14);
}
.mtrRadar__bar span{
  display:block; height:100%; width:38%;
  background:linear-gradient(90deg,#0663F5,#8FC2FF);
  animation:radarLoad 1.3s ease-in-out infinite;
}
@keyframes radarLoad{ from{ margin-left:-38%; } to{ margin-left:100%; } }
.mtrRadar__skip{
  position:absolute; z-index:4; right:12px; top:12px; cursor:pointer;
  border:1px solid rgba(140,190,255,.4); border-radius:999px; padding:7px 13px;
  background:rgba(8,14,26,.7); color:#DCE9FF; font:inherit; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  transition:transform 160ms var(--e-out), background-color 200ms ease;
}
.mtrRadar__skip:active{ transform:scale(.97); }

.mtrReplay{
  position:absolute; z-index:7; left:12px; bottom:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--linea-2); border-radius:999px; padding:8px 13px;
  background:rgba(255,255,255,.94); color:var(--tinta);
  font:inherit; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(11,42,90,.16);
  transition:transform 160ms var(--e-out), box-shadow 200ms var(--e-out);
}
.mtrReplay svg{ width:14px; height:14px; color:var(--azul); }
.mtrReplay:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .mtrReplay:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,42,90,.2); }
}

/* chip "estamos aquí" + pin latiendo sobre el mapa ilustrado */
.mtrHere{
  position:absolute; z-index:5; left:12px; top:12px;
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--linea-2); border-radius:999px; padding:7px 12px;
  background:rgba(255,255,255,.94); color:var(--tinta);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(11,42,90,.14);
  opacity:0; transform:translateY(-6px);
  transition:opacity .4s var(--e-out), transform .4s var(--e-out);
}
.mtrHere.is-on{ opacity:1; transform:none; }
.mtrHere svg{ width:14px; height:14px; color:var(--azul); }
.mapArt .mtr-pin-halo{ transform-origin:248px 196px; animation:pinHalo 2.4s ease-out infinite; }
@keyframes pinHalo{ 0%{ opacity:.5; transform:scale(.6); } 70%{ opacity:0; transform:scale(1.5); } 100%{ opacity:0; } }

/* ============================================================== EQUIPOS === */
.sec--equipos{ padding:72px 0 0; }
.eqGrid{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
}
.eqCard{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  transition:transform .3s var(--e-out), box-shadow .3s var(--e-out), border-color .3s var(--e-out);
}
.eqCard__fig{ margin:0; aspect-ratio:11/9; overflow:hidden; background:var(--bg-2); }
.eqCard__fig img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--e-out); }
.eqCard__body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.eqCard__h{ margin:0; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta); }
.eqCard__p{ margin:0; font-size:11px; line-height:1.62; color:var(--gris); flex:1; }
.eqCard__cta{
  align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--azul); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:gap 200ms var(--e-out);
}
.eqCard__cta svg{ width:13px; height:13px; }
@media (hover:hover) and (pointer:fine){
  .eqCard:hover{ transform:translateY(-6px); box-shadow:var(--sh-hover); border-color:#D7E4FA; }
  .eqCard:hover .eqCard__fig img{ transform:scale(1.06); }
  .eqCard__cta:hover{ gap:11px; }
}

/* =============================================================== PAGOS ==== */
.sec--pagos{ padding:68px 0 0; }
.pagosBox{
  display:grid; grid-template-columns:1.05fr 1fr; gap:26px; align-items:center;
  background:linear-gradient(140deg,#F4F8FF 0%, #FFFFFF 62%);
  border:1px solid var(--linea-2); border-radius:var(--r-lg);
  padding:28px 30px; box-shadow:var(--sh-card); overflow:hidden;
}
.pagosBox__title{ margin:0 0 10px; font-size:clamp(18px,2.3vw,25px); font-weight:800; line-height:1.15; color:var(--tinta); text-transform:uppercase; }
.pagosBox__title span{ color:var(--azul); }
.pagosBox__p{ margin:0 0 18px; font-size:12.5px; line-height:1.7; color:var(--gris); max-width:46ch; }
.pagosList{ list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pagosList li{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-sm,10px);
  font-size:11.5px; font-weight:700; color:var(--tinta);
  transition:transform .25s var(--e-out), border-color .25s var(--e-out);
}
.pagosList svg{ width:17px; height:17px; color:var(--azul); flex:none; }
.pagosBox__fig{ margin:0; border-radius:var(--r-md); overflow:hidden; aspect-ratio:3/2; }
.pagosBox__fig img{ width:100%; height:100%; object-fit:cover; }
.pagosNota{ margin:0; font-size:10.5px; color:var(--gris); }
@media (hover:hover) and (pointer:fine){
  .pagosList li:hover{ transform:translateY(-3px); border-color:#CFE0FB; }
}

/* ============================================================== ENVÍOS ==== */
.sec--envios{ padding:68px 0 0; }
.enviosBox{
  display:grid; grid-template-columns:1fr 1.02fr; gap:26px; align-items:center;
  border:1px solid var(--linea-2); border-radius:var(--r-lg); overflow:hidden;
  background:#fff; box-shadow:var(--sh-card);
}
.enviosBox__fig{ margin:0; aspect-ratio:3/2; overflow:hidden; }
.enviosBox__fig img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out); }
.enviosBox__copy{ padding:26px 30px 28px; }
.enviosBox__title{ margin:0 0 10px; font-size:clamp(18px,2.3vw,25px); font-weight:800; line-height:1.15; text-transform:uppercase; color:var(--tinta); }
.enviosBox__title span{ color:var(--azul); }
.enviosBox__p{ margin:0 0 16px; font-size:12.5px; line-height:1.7; color:var(--gris); }
.enviosSteps{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; }
.enviosSteps li{ display:flex; gap:10px; align-items:flex-start; font-size:11.5px; line-height:1.55; color:var(--gris); }
.enviosSteps b{ color:var(--tinta); }
.enviosSteps span{
  flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--azul); color:#fff; font-size:10px; font-weight:800;
}
@media (hover:hover) and (pointer:fine){
  .enviosBox:hover .enviosBox__fig img{ transform:scale(1.05); }
}

/* =============================================================== REDES ==== */
.sec--redes{ padding:68px 0 30px; }
.redesGrid{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
}
.redCard{
  display:flex; flex-direction:column; gap:8px; padding:20px 20px 22px; text-decoration:none;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md); box-shadow:var(--sh-card);
  transition:transform .3s var(--e-out), box-shadow .3s var(--e-out), border-color .3s var(--e-out);
}
.redCard__ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:linear-gradient(140deg,#E8F0FE,#D3E3FD); color:var(--azul);
  transition:transform .3s var(--e-out);
}
.redCard__ico svg{ width:20px; height:20px; }
.redCard__h{ margin:6px 0 0; font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta); }
.redCard__p{ margin:0; font-size:11px; color:var(--gris); }
@media (hover:hover) and (pointer:fine){
  .redCard:hover{ transform:translateY(-6px); box-shadow:var(--sh-hover); border-color:#D7E4FA; }
  .redCard:hover .redCard__ico{ transform:scale(1.1) rotate(-6deg); }
}

/* =========================================================== RESPONSIVE === */
@media (max-width:1024px){
  .eqGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .redesGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pagosBox,.enviosBox{ grid-template-columns:1fr; }
  .pagosBox__fig{ order:-1; }
}
@media (max-width:640px){
  .eqGrid{ grid-template-columns:1fr 1fr; }
  .pagosList{ grid-template-columns:1fr; }
  .sec--equipos,.sec--pagos,.sec--envios,.sec--redes{ padding-top:48px; }
}

@media (prefers-reduced-motion: reduce){
  #mtrPre::before,.preIn,.preIn__logo,.mtrRadar__bg,.mtrScope__sweep,.mtrScope__dot,.mtrRadar__bar span{ animation:none !important; }
}

/* ====================================================== HEADER MÁS DENSO ==
   Con las secciones nuevas el menú creció: se aprieta un poco para que el
   botón de WhatsApp no quede cortado. */
@media (min-width:861px){
  .hdr__in{ gap:20px; }
  .nav__list{ gap:18px; }
  .nav__link{ font-size:10.5px; letter-spacing:.06em; }
  .btn--hdr{ padding:10px 12px 10px 15px; font-size:11px; letter-spacing:.04em; }
  .brand__name{ font-size:23px; }
  .brand__tag{ letter-spacing:.3em; }
}
@media (min-width:861px) and (max-width:1240px){
  .nav__list{ gap:13px; }
  .nav__link{ font-size:10px; }
  .brand__name{ font-size:20px; }
}

/* ============================================== PULIDO TÁCTIL (Emil) =====
   En pantallas sin mouse el :hover se dispara al tocar y deja las tarjetas
   "pegadas". Ahí no hay hover, sólo el press. */
@media (hover:none){
  .fx-card:hover,.eqCard:hover,.redCard:hover,.svcCard:hover,.trabCard:hover,
  .pagosList li:hover,.perks li:hover{ transform:none; }
  .fxImg:hover img,.enviosBox:hover .enviosBox__fig img,.eqCard:hover .eqCard__fig img{ transform:none; }
}
/* feedback de press en todo lo pulsable */
.btn:active,.eqCard__cta:active,.redCard:active,.faqItem__q:active,.toTop:active,.waFab:active{ transform:scale(.97); }
.faqItem__q,.eqCard__cta,.redCard{ transition:transform 160ms var(--e-out), color .22s var(--e-out); }

/* ==========================================================================
   CONTACTO SIN LA TARJETA DE CTA + TODO MÁS GRANDE
   El bloque de "¿listo para conectarte?" sale de la vista (el nodo sigue en
   el DOM porque main.js le escribe texto). Quedan datos + mapa, más anchos.
   ========================================================================== */
.ctaCard{ display:none !important; }

@media (min-width:861px){
  .contactRow{ grid-template-columns:minmax(0,420fr) minmax(0,760fr); gap:20px; }
  .mapCard{ min-height:420px; }
  .mapCard__map{ min-height:420px; }
  .mapCard__panel{ width:290px; }

  /* ---- tipografía general ---- */
  body{ font-size:16px; }
  .eyebrow{ font-size:12.5px; letter-spacing:.22em; }
  .secTitle{ font-size:30px; }
  .secTitle--plain{ font-size:19px; }
  .secSub{ font-size:15px; }
  .secTitle__rule{ width:44px; }
  .fx-rv.fx-in .secTitle__rule{ width:44px; }

  .hero__desc{ font-size:15.5px; line-height:1.85; }
  .perks li{ font-size:12px; line-height:1.4; }
  .perks .perk__ico{ width:40px; height:40px; }

  .btn--lg{ font-size:14px; padding:17px 30px; }
  .btn--acc{ font-size:13.5px; padding:14px 24px; }
  .btn--cta{ font-size:13px; padding:14px 22px 14px 16px; }

  /* ---- servicios ---- */
  .svcGrid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
  .svcCard{ padding:26px 22px 26px; }
  .svcCard__h{ font-size:14.5px; }
  .svcCard__p{ font-size:13px; line-height:1.62; }
  .svcCard__art .ico{ width:54px; height:54px; }
  .svcCard__art img{ max-height:92px; }

  /* ---- equipos (sección nueva) ---- */
  .eqCard__h{ font-size:15px; }
  .eqCard__p{ font-size:13px; }
  .eqCard__cta{ font-size:12.5px; }
  .eqCard__body{ padding:20px 20px 22px; }

  /* ---- accesorios ---- */
  .accGrid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
  .accBox__title{ font-size:30px; }
  .accBox__desc{ font-size:13.5px; }
  .accCard__t{ font-size:11.5px; }

  /* ---- pagos y envíos (secciones nuevas) ---- */
  .pagosBox__title,.enviosBox__title{ font-size:28px; }
  .pagosBox__p,.enviosBox__p{ font-size:14px; }
  .pagosList li{ font-size:13px; padding:14px 16px; }
  .enviosSteps li{ font-size:13.5px; }
  .pagosNota{ font-size:12px; }

  /* ---- promo ---- */
  .promo__title{ font-size:32px; }
  .promo__off{ font-size:54px; }
  .promo__sub{ font-size:17px; }
  .promo__fine{ font-size:11.5px; }
  .promo__codeValue{ font-size:25px; }
  .promo__codeLabel{ font-size:11px; }

  /* ---- cta intermedio ---- */
  .ctaBand__title{ font-size:28px; }
  .ctaBand__p{ font-size:14px; }

  /* ---- proceso ---- */
  .step__t{ font-size:13.5px; }
  .step__p{ font-size:12.5px; max-width:220px; }
  .step__num{ font-size:14px; }

  /* ---- nosotros ---- */
  .trust__whyTitle{ font-size:17px; }
  .trust__list li{ font-size:12.5px; line-height:1.6; }
  .stat__v{ font-size:32px; }
  .stat__l{ font-size:9.5px; }
  .trust__testiTitle{ font-size:13px; }
  .testi__q{ font-size:12px; }
  .testi__a{ font-size:11.5px; }
  .testi__stars{ font-size:13px; }

  /* ---- garantía ---- */
  .garCard{ padding:28px 24px 30px; }
  .garCard__h{ font-size:14px; }
  .garCard__p{ font-size:12.8px; }
  .garNota p{ font-size:13px; }

  /* ---- trabajo ---- */
  .trabCard__p{ font-size:12.8px; padding:16px 18px 18px; }
  .trabCard__tag{ font-size:11px; }

  /* ---- faq ---- */
  .faqItem__q{ font-size:14px; padding:18px 20px; }
  .faqItem__a p{ font-size:13px; line-height:1.75; padding-left:20px; padding-right:20px; }
  .faqGrid{ max-width:980px; }

  /* ---- contacto ---- */
  .contactCard{ padding:24px 26px 24px; }
  .contactCard__title{ font-size:15px; }
  .contactList__t{ font-size:12.5px; }
  .contactList a,.contactList .row{ font-size:12.5px; }
  .contactList__ico{ width:36px; height:36px; }
  .mapCard__title{ font-size:13px; }
  .mapCard__city{ font-size:12.5px; }
  .mapCard__note{ font-size:11.5px; }

  /* ---- redes (sección nueva) ---- */
  .redCard{ padding:24px 24px 26px; }
  .redCard__h{ font-size:14px; }
  .redCard__p{ font-size:12.5px; }

  /* ---- footer ---- */
  .ftr__h{ font-size:12px; }
  .ftr__links a{ font-size:11.8px; line-height:1.7; }
  .ftr__blurb{ font-size:11.8px; }
  .ftr__bar p{ font-size:10.5px; }
}

/* en móvil sube un punto, sin romper los anchos */
@media (max-width:860px){
  .contactRow{ grid-template-columns:1fr; }
  .secTitle{ font-size:24px; }
  .secSub{ font-size:13.5px; }
  .svcCard__h{ font-size:13px; }
  .svcCard__p{ font-size:12.5px; }
  .faqItem__q{ font-size:13.5px; }
  .faqItem__a p{ font-size:12.5px; }
  .eqCard__h{ font-size:13.5px; }
  .eqCard__p{ font-size:12.5px; }
  .redCard__h{ font-size:13.5px; }
  .redCard__p{ font-size:12.5px; }
  .contactList a,.contactList .row,.contactList__t{ font-size:12.5px; }
  .trabCard__p,.garCard__p{ font-size:12.5px; }
}

/* la tarjeta de contacto ya no compite con el CTA: se reparte a lo alto */
@media (min-width:861px){
  .contactCard{ display:flex; flex-direction:column; }
  .contactList{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; }
  .contactList li{ margin-bottom:0; }
  .contactList a,.contactList .row{ gap:14px; padding:6px 0; }
}

/* ==========================================================================
   TÍTULOS CON ENTRADA NOTORIA
   Las palabras suben desde una máscara, la palabra azul se pinta de izquierda
   a derecha y por detrás pasa un resplandor. Una sola vez, al entrar en vista.
   ========================================================================== */
.titFx{ position:relative; }
.titFx .tw{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .02em; }
.titFx .tw > i{
  display:inline-block; font-style:inherit;
  transform:translateY(110%) rotate(5deg); opacity:0;
}
.titFx.is-in .tw > i{
  transform:none; opacity:1;
  transition:transform .6s var(--e-out), opacity .35s ease;
  transition-delay:calc(var(--i,0) * 55ms);
}

/* resplandor que cruza por detrás del texto */
.titFx::before{
  content:""; position:absolute; z-index:-1; left:0; right:0; top:-40%; bottom:-40%;
  pointer-events:none; opacity:0; border-radius:999px;
  background:radial-gradient(closest-side, rgba(6,99,245,.20), transparent 72%);
}
.titFx.is-in::before{ animation:titGlow 1.5s .25s var(--e-out) 1; }
@keyframes titGlow{
  0%{ opacity:0; transform:scale(.6); }
  40%{ opacity:1; transform:scale(1.02); }
  100%{ opacity:0; transform:scale(1.12); }
}

/* la palabra de acento entra oscura y se enciende en azul con un latido */
.titFx .az{ display:inline-block; color:var(--tinta); }
.titFx.is-in .az{
  color:var(--azul);
  transition:color .45s ease calc(var(--azd,0) * 55ms + 240ms);
  animation:azPop .65s var(--e-out) calc(var(--azd,0) * 55ms + 240ms) 1;
}
@keyframes azPop{
  0%{ transform:scale(1); text-shadow:0 0 0 rgba(6,99,245,0); }
  45%{ transform:scale(1.06); text-shadow:0 6px 22px rgba(6,99,245,.45); }
  100%{ transform:scale(1); text-shadow:0 0 0 rgba(6,99,245,0); }
}

/* las rayitas del título salen desde el centro */
.titFx .secTitle__rule{ transform:scaleX(0); transform-origin:center; }
.titFx.is-in .secTitle__rule{ transform:scaleX(1); transition:transform .6s var(--e-out) .1s; }

/* títulos de tarjeta: versión corta */
.titFxSm{ display:inline-block; }
.titFxSm > .tw{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.titFxSm > .tw > i{ display:inline-block; font-style:inherit; transform:translateY(105%); opacity:0; }
.titFxSm.is-in > .tw > i{
  transform:none; opacity:1;
  transition:transform .5s var(--e-out), opacity .3s ease;
  transition-delay:calc(var(--i,0) * 45ms);
}

@media (prefers-reduced-motion: reduce){
  .titFx .tw > i,.titFxSm > .tw > i{ transform:none !important; opacity:1 !important; }
  .titFx.is-in .az{ animation:none !important; }
  .titFx::before{ animation:none !important; }
  .titFx .secTitle__rule{ transform:none !important; }
}

/* con el fondo en alta el cielo queda claro: el texto necesita su propia sombra */
.preIn{ isolation:isolate; }
.preIn::before{
  content:""; position:absolute; z-index:-1; inset:-46px -70px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(58% 62% at 50% 52%, rgba(4,8,16,.78), rgba(4,8,16,.35) 62%, transparent 78%);
}
.preIn__name{ text-shadow:0 4px 24px rgba(0,0,0,.75); }
.preIn__tag{ color:#CFE2FF; text-shadow:0 2px 14px rgba(0,0,0,.8); }
.preIn__city{ color:#A9BFE0; text-shadow:0 2px 12px rgba(0,0,0,.8); }

/* el arte del hero corrido a la izquierda para que la composición respire */
@media (min-width:861px){
  .hero__art{ margin-left:-7%; margin-right:2%; }
  .hero__art img{ transform-origin:center left; }
}
@media (min-width:1400px){
  .hero__art{ margin-left:-10%; }
}

/* enlace al panel: texto plano y apagado, nada de botón */
.ftr__barIn{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ftrAdmin{
  color:inherit; opacity:.5; text-decoration:none; font:inherit;
  transition:opacity .2s ease, color .2s ease;
}
.ftrSep{ opacity:.5; }
@media (hover:hover) and (pointer:fine){
  .ftrAdmin:hover{ opacity:1; color:var(--azul); }
}
@media (min-width:861px){ .ftr__barIn{ padding-right:180px; } }

/* ================================================ CATÁLOGO EN LA PORTADA = */
.sec--vitrina{ padding:68px 0 0; }
.vitrinaGrid{ margin-top:24px; }
.vitrinaGrid .prodCard__h{ font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--tinta); line-height:1.25; margin:0; }
.vitrinaCargando{ list-style:none; grid-column:1/-1; font-size:13px; color:var(--gris); }
.vitrinaPie{ display:flex; justify-content:center; margin-top:26px; }
@media (max-width:640px){ .sec--vitrina{ padding-top:48px; } }