/* =========================================================
   Tecmovil S.A. — capa de fondo animado
   1) Hero: shader WebGL (adaptado del hero de MALOT) en celeste
   2) Resto de la página: partículas celestes sutiles
   Se carga DESPUÉS de styles.css: sólo agrega y sobreescribe.
   ========================================================= */

:root{
  --hero-ink:#050914;      /* fondo base del hero, más oscuro que sky-900 */
  --hero-ink-2:#0b1a3a;
}

/* ---------------------------------------------------------
   1. PARTÍCULAS DE FONDO (toda la página)
   --------------------------------------------------------- */
#fxParticles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}
/* El contenido va por encima del lienzo de partículas */
main,.site-footer{position:relative;z-index:1}

/* ---------------------------------------------------------
   2. HERO CON SHADER
   --------------------------------------------------------- */

/* El header flota sobre el shader mientras estamos arriba de todo */
.site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header.is-stuck{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.brand-logo-light{display:block}
.brand-logo-dark{display:none}
.site-header.is-stuck .brand-logo-light{display:none}
.site-header.is-stuck .brand-logo-dark{display:block}

.site-header:not(.is-stuck) .nav-link{color:rgba(226,244,253,.82)}
.site-header:not(.is-stuck) .nav-link:hover{color:#fff}
.site-header:not(.is-stuck) .nav-link.is-active{color:#fff}
.site-header:not(.is-stuck) .phone-link{color:#EAF6FD}
.site-header:not(.is-stuck) .phone-link .ico{color:var(--sky-400)}
.site-header:not(.is-stuck) .phone-link:hover{color:var(--sky-400)}
.site-header:not(.is-stuck) .burger{border-color:rgba(255,255,255,.34)}
.site-header:not(.is-stuck) .burger span{background:#fff}
/* En móvil el panel desplegable sigue siendo blanco */
.site-header:not(.is-stuck) .nav.is-open .nav-link{color:var(--body)}
.site-header:not(.is-stuck) .nav.is-open .nav-link.is-active{color:var(--ink)}

/* Sección */
.hero{
  position:relative;
  isolation:isolate;
  margin-top:calc(-1 * var(--header-h));
  padding:calc(var(--header-h) + 40px) 0 0;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--hero-ink);
  overflow:hidden;
}

/* Lienzo del shader */
.hero-fx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, var(--hero-ink-2) 0%, var(--hero-ink) 62%);
}

/* Halos celestes difusos */
.hero-fx-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}
.hero-fx-glow::before,
.hero-fx-glow::after{
  content:"";position:absolute;border-radius:50%;filter:blur(140px);
}
.hero-fx-glow::before{
  width:42rem;height:42rem;top:-8rem;right:-6rem;
  background:rgba(18,169,220,.20);
}
.hero-fx-glow::after{
  width:34rem;height:34rem;bottom:-10rem;left:-6rem;
  background:rgba(56,189,240,.11);
}

/* Trama de circuito */
.hero-fx-circuit{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.16;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2338BDF0' stroke-width='0.6' stroke-opacity='0.20'%3E%3Cpath d='M0 30h18l6 6h12l6-6h18'/%3E%3Cpath d='M30 0v18l-6 6v12l6 6v18'/%3E%3Ccircle cx='30' cy='30' r='2.2'/%3E%3Ccircle cx='0' cy='30' r='1.4'/%3E%3Ccircle cx='60' cy='30' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Oscurecido superior/inferior para que el texto respire */
.hero-fx-fade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,15,24,.55) 0%,rgba(3,15,24,0) 32%,rgba(3,15,24,.28) 80%,rgba(3,15,24,.5) 100%);
}

/* Chispas flotantes */
.hero-fx-dots{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
.hero-fx-dots i{
  position:absolute;border-radius:50%;
  background:rgba(56,189,240,.75);
  box-shadow:0 0 10px rgba(56,189,240,.9);
  animation-name:fxDot;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  opacity:.3;
}
@keyframes fxDot{
  0%,100%{transform:translateY(0);opacity:.28}
  50%{transform:translateY(-24px);opacity:1}
}

/* Costura inferior: funde el hero con el fondo claro de la página */
.hero-fx-seam{
  position:absolute;left:0;right:0;bottom:0;height:170px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(242,246,249,0) 0%,
    rgba(242,246,249,.28) 42%,
    rgba(242,246,249,.72) 72%,
    var(--canvas) 100%);
}

/* --- Contenido del hero sobre el shader --- */
.hero-card{
  position:relative;z-index:3;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:34px clamp(0px,1vw,12px) 130px;
  overflow:visible;
}

/* Cromo. Lo que hace el metal es el corte brusco a media altura: arriba de esa
   linea la letra refleja el cielo y abajo el piso, igual que una pieza pulida.
   El filo oscuro de abajo la despega del fondo del hero. */
.hero-copy h1{
  background-image:linear-gradient(180deg,
    #6f8496 0%, #dbe8f1 18%, #ffffff 34%,
    #93a9ba 49%, #2f4354 50.5%,
    #7d94a6 62%, #eef6fb 80%, #5d7285 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(6,14,26,.9)) drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.hero-copy h1 .accent{
  background-image:linear-gradient(180deg,
    #bdeeff 0%, #ffffff 30%, #38BDF0 50%, #0a6f95 52%,
    #4fc9f5 70%, #d9f4ff 88%, #0C90BD 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:#EAF6FD}
.hero-text{color:rgba(223,240,251,.80)}
.hero .rule{
  background:linear-gradient(90deg,var(--gold-400),var(--gold-600));
  box-shadow:0 0 18px rgba(235,196,99,.35);
}

.hero .btn-primary{box-shadow:0 14px 34px rgba(18,169,220,.42)}
.hero .btn-primary:hover{box-shadow:0 20px 48px rgba(18,169,220,.58)}
.hero .btn-ghost{
  background:rgba(255,255,255,.07);
  color:#EAF6FD;
  border:1.5px solid rgba(160,215,240,.30);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:none;
}
.hero .btn-ghost:hover{
  background:rgba(255,255,255,.13);
  border-color:var(--wa);color:var(--wa);
}

/* --- Equipo desarmándose (video) en lugar del mockup --- */
.hero-visual{
  padding-right:0;min-height:auto;
  flex-direction:column;justify-content:center;
}
.hero .blob,
.hero .arc{display:none}

.phone-stage{position:relative;z-index:2;width:min(390px,94%);display:grid;place-items:center}
/* El arco dorado que abrazaba el equipo se quitó el 2026-08-05 (backup fx.css.bak-prearcofuera-20260805) */
.stage-glow{
  position:absolute;z-index:0;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(18,169,220,.44),rgba(56,189,240,.18) 55%,transparent 72%);
  filter:blur(58px);
}
.phone-card{
  position:relative;z-index:1;width:100%;aspect-ratio:4/5;
  border-radius:30px;overflow:hidden;
  background:#04121e;
  border:1px solid rgba(56,189,240,.30);
  box-shadow:0 40px 82px -28px rgba(2,32,50,.78),0 0 48px rgba(18,169,220,.20);
  animation:fxFloat 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.phone-card video,
.phone-card img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* el video original es azul rey: lo corremos al celeste de Tecmovil */
  filter:hue-rotate(-26deg) saturate(1.14) brightness(1.05);
}
.pc-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,18,30,.52),transparent 52%,rgba(56,189,240,.16));
}
.pc-ring{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 36px rgba(18,169,220,.18);
}
/* Barrido de diagnóstico */
.pc-scan{
  position:absolute;left:0;right:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(56,189,240,.16) 46%,rgba(125,220,255,.34) 50%,rgba(56,189,240,.16) 54%,transparent);
  animation:fxScan 5.5s linear infinite;
}
@keyframes fxScan{0%{top:-34%}100%{top:100%}}

/* La tarjeta de beneficios baja a una franja bajo el equipo, así no tapa la animación */
.hero .feature-card{
  position:static;z-index:4;
  width:min(430px,96%);margin:20px auto 0;
  grid-template-columns:repeat(3,1fr);
  gap:10px;padding:14px 12px;
}
.hero .feature-card li{flex-direction:column;align-items:flex-start;gap:8px}
.hero .feature-card li:hover{transform:translateY(-2px)}
.hero .feature-card small{font-size:11px}

/* Tarjeta de beneficios en vidrio */
.hero .feature-card{
  background:rgba(7,30,45,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(160,215,240,.18);
  box-shadow:0 22px 60px rgba(2,12,20,.5);
}
.hero .feature-card strong{color:#F2FAFE}
.hero .feature-card small{color:rgba(214,235,248,.66)}
.hero .fc-ico{background:rgba(56,189,240,.14);color:var(--sky-400)}

/* La primera sección clara arranca sin salto */
#servicios{position:relative;z-index:1}

/* ---------------------------------------------------------
   3. HOVER NEÓN CELESTE
   Servicios · Preguntas frecuentes · Contacto
   --------------------------------------------------------- */
#servicios .service-card,
#faq .faq,
#contacto .contact-card{
  transition:transform .32s cubic-bezier(.2,.7,.3,1),
             box-shadow .32s ease,
             border-color .32s ease;
  will-change:transform;
}

#servicios .service-card:hover,
#faq .faq:hover,
#contacto .contact-card:hover{
  border-color:rgba(56,189,240,.9);
  box-shadow:
    0 0 0 1.5px rgba(56,189,240,.75),
    0 0 16px rgba(56,189,240,.55),
    0 0 42px rgba(18,169,220,.34),
    0 24px 62px rgba(16,43,58,.16);
}

#servicios .service-card:hover{transform:translateY(-6px) scale(1.04)}
#faq .faq:hover{transform:translateY(-4px) scale(1.035)}
/* El de contacto es un bloque grande: crece menos para no romper la grilla.
   Mientras alguien escribe en el formulario se queda quieto. */
#contacto .contact-card:hover:not(:focus-within){transform:scale(1.015)}

@media (max-width:720px){
  #servicios .service-card:hover{transform:translateY(-4px) scale(1.02)}
  #faq .faq:hover{transform:translateY(-3px) scale(1.02)}
  #contacto .contact-card:hover{transform:scale(1.008)}
}

/* ---------------------------------------------------------
   4. LLAMADO AL FINAL DE LAS PREGUNTAS
   --------------------------------------------------------- */
.faq-cta{
  margin-top:34px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
/* ---------------------------------------------------------
   Acceso al panel, discreto en el pie
   --------------------------------------------------------- */
.footer-bottom .wrap{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.foot-admin{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:4px 11px;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.foot-admin svg{width:12px;height:12px}
.foot-admin:hover{
  color:var(--gold-400);border-color:rgba(235,196,99,.45);
  background:rgba(255,255,255,.05);
}

.section-lead{
  text-align:center;font-size:14.5px;color:var(--body);
  max-width:60ch;margin:0 auto 40px;
}
.faq-cta p{font-size:14.5px;color:var(--body)}
.faq-cta .btn{padding:14px 26px}

/* ---------------------------------------------------------
   5. FORMULARIO DE SOLICITUD DE SERVICIO
   --------------------------------------------------------- */
.contact-split{grid-template-columns:1.05fr .95fr}
.contact-lead{font-size:14px;margin:-8px 0 22px;max-width:44ch}

.svc-form{display:grid;gap:14px}
.ff-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ff{display:grid;gap:6px;min-width:0}
.ff label{
  font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:.01em;
}
.ff-opt{font-weight:500;color:var(--muted)}
.ff input,
.ff select,
.ff textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.ff textarea{resize:vertical;min-height:84px;line-height:1.5}
.ff select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C90BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.ff input::placeholder,
.ff textarea::placeholder{color:#A9B8C4}
.ff input:hover,
.ff select:hover,
.ff textarea:hover{border-color:var(--sky-100)}
.ff input:focus,
.ff select:focus,
.ff textarea:focus{
  outline:none;
  border-color:var(--sky-400);
  box-shadow:0 0 0 3px rgba(56,189,240,.20),0 0 14px rgba(56,189,240,.22);
}
/* El rojo del navegador solo aparece después de intentar enviar */
.svc-form.is-checked .ff input:invalid,
.svc-form.is-checked .ff select:invalid,
.svc-form.is-checked .ff textarea:invalid{border-color:#E2857F}

/* Foto del daño: el input file va oculto y el label hace de zona clickeable */
.ff-drop{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13.5px;color:var(--sky-700);
  background:var(--sky-50);
  border:1.5px dashed var(--sky-100);border-radius:var(--r-sm);
  padding:13px;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.ff-drop:hover{border-color:var(--sky-400);background:var(--white)}
.ff-drop .ico{width:19px;height:19px;flex:none;color:var(--sky-500)}
.ff-drop-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-drop.has-file{
  border-style:solid;border-color:var(--sky-400);background:var(--white);
  color:var(--ink);font-weight:600;
}
.ff-drop:focus-within{
  outline:none;border-color:var(--sky-400);
  box-shadow:0 0 0 3px rgba(56,189,240,.20);
}

.ff-thumb{position:relative;width:96px;margin-top:2px}
.ff-thumb img{
  width:96px;height:96px;object-fit:contain;background:var(--white);display:block;
  border-radius:var(--r-sm);border:1px solid var(--line);
}
.ff-thumb-x{
  position:absolute;top:-8px;right:-8px;
  width:24px;height:24px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
}
.ff-thumb-x:hover{background:var(--sky-500);color:var(--white);border-color:transparent}

.btn-block{width:100%;margin-top:4px}
.ff-note{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}

/* Franja de datos de contacto bajo el formulario y el mapa */
.contact-strip{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  border-top:1px solid var(--line);
  padding:20px clamp(22px,3vw,40px);
  background:var(--sky-50);
}
/* El icono y el texto son hermanos: el contenedor tiene que ser el flex */
.contact-strip li,
.contact-strip li a{
  display:flex;align-items:center;gap:11px;
  font-size:13px;line-height:1.45;transition:color var(--t);
}
.contact-strip li a{width:100%}
.contact-strip li a:hover{color:var(--sky-600)}
.contact-strip li a:hover .ci-ico{background:var(--sky-500);color:var(--white)}

/* El logo de Instagram del pie es de trazo: sin esto queda como un cuadro macizo */
.socials a[aria-label="Instagram"] svg use,
.socials a[aria-label="Instagram"] svg g{fill:none;stroke:currentColor}

/* ---------------------------------------------------------
   6. BOTÓN FLOTANTE DE WHATSAPP
   --------------------------------------------------------- */
.wa-float{
  right:24px;bottom:24px;
  width:64px;height:64px;
  background:linear-gradient(150deg,#42E27F,#17A64B);
  border:2px solid rgba(255,255,255,.30);
  box-shadow:0 12px 26px rgba(11,74,38,.32),0 0 0 7px rgba(37,211,102,.13);
  overflow:visible;
}
.wa-float .wa-glyph{width:32px;height:32px;position:relative;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.wa-float:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 18px 34px rgba(11,74,38,.4),0 0 0 9px rgba(37,211,102,.16);
}

/* Anillo que late */
.wa-pulse{
  position:absolute;inset:-2px;border-radius:50%;z-index:0;
  border:2px solid rgba(37,211,102,.55);
  animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* Etiqueta que asoma al pasar el cursor */
.wa-label{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--ink);color:var(--white);
  font-size:13px;font-weight:600;white-space:nowrap;
  padding:8px 14px;border-radius:var(--r-pill);
  box-shadow:var(--sh-md);
  opacity:0;pointer-events:none;
  transition:opacity var(--t),transform var(--t);
}
.wa-float:hover .wa-label{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1024px){
  .hero{min-height:auto;padding:calc(var(--header-h) + 34px) 0 0}
  .hero-card{padding-bottom:104px}
  .phone-stage{width:min(360px,84%)}
  .contact-split{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hero-card{padding:22px 0 110px}
  .hero-fx-seam{height:100px}
  .hero-fx-glow::before{width:26rem;height:26rem}
  .hero-fx-glow::after{width:22rem;height:22rem}
  .phone-stage{width:min(320px,82%)}
  .stage-glow{filter:blur(34px)}
  .phone-card{animation:none}
  .hero .feature-card{width:100%;max-width:340px;margin-top:24px}

  .ff-row{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr;gap:14px;padding:18px 20px}
  .contact-lead{margin-bottom:18px}
  .faq-cta{margin-top:26px}

  .wa-float{width:58px;height:58px;right:16px;bottom:16px}
  .wa-float .wa-glyph{width:29px;height:29px}
  .wa-label{display:none}
}

/* Sin movimiento: se congela todo, el shader dibuja un solo cuadro */
@media (prefers-reduced-motion:reduce){
  .hero-fx-dots i{opacity:.6}
}


/* ---------------------------------------------------------
   CONTACTO APILADO (2026-08-05)
   El formulario arriba con su propio marco y el mapa debajo,
   a todo el ancho, bastante más grande.
   --------------------------------------------------------- */
.contact.contact-split{
  grid-template-columns:1fr;
  gap:26px;
  background:transparent;box-shadow:none;border-radius:0;overflow:visible;
}

/* Tarjeta del formulario: fondo propio y filo de color arriba */
#contacto .contact-card{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFE 100%);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
  overflow:hidden;
}
#contacto .contact-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;
  background:linear-gradient(90deg,var(--sky-600),var(--sky-400) 55%,var(--gold-400));
}
#contacto .contact-info{padding:clamp(28px,3vw,44px) clamp(22px,3vw,44px)}

/* A lo ancho: el texto de un lado, los campos del otro */
@media (min-width:981px){
  #contacto .contact-info{
    display:grid;
    grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);
    column-gap:clamp(28px,3.6vw,56px);
    align-items:start;
  }
  #contacto .contact-info>.eyebrow{grid-column:1;grid-row:1}
  #contacto .contact-info>h2{grid-column:1;grid-row:2}
  #contacto .contact-info>.contact-lead{grid-column:1;grid-row:3;max-width:38ch}
  #contacto .contact-info>.form-perks{grid-column:1;grid-row:4}
  #contacto .contact-info>.svc-form{grid-column:2;grid-row:1/span 4}
}

.form-perks{display:grid;gap:13px;margin-top:4px}
.form-perks li{display:flex;align-items:center;gap:11px;font-size:13.5px;line-height:1.45}
.form-perks .ci-ico{background:var(--gold-100);color:var(--sky-700);flex:none}

/* El mapa pasa a ser su propia tarjeta, ancha y alta */
#contacto .contact-map{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
  overflow:hidden;
  min-height:0;
}
#contacto .map-frames{min-height:clamp(380px,44vw,580px)}
#contacto .map-tabs{padding:12px 14px}
#contacto .map-foot{padding:14px 16px}

@media (max-width:980px){
  #contacto .map-frames{min-height:340px}
  #contacto .contact-info{padding:30px 22px}
}
@media (max-width:720px){
  #contacto .map-frames{min-height:290px}
  .form-perks{gap:11px;margin-bottom:20px}
}


/* ---------------------------------------------------------
   CONTACTO MÁS COMPACTO (2026-08-05)
   El formulario y el mapa se salían de la pantalla: bajan de alto.
   --------------------------------------------------------- */
#contacto .map-frames{min-height:clamp(280px,29vw,400px)}
#contacto .map-tabs{padding:9px 12px}
#contacto .map-foot{padding:11px 14px}

#contacto .contact-info{padding:clamp(22px,2.2vw,32px) clamp(20px,2.4vw,34px)}
#contacto .contact-info h2{font-size:clamp(21px,2.3vw,26px);margin-bottom:14px}
#contacto .contact-lead{font-size:13.5px;margin:-4px 0 16px}
#contacto .svc-form{gap:11px}
#contacto .ff-row{gap:11px}
#contacto .ff{gap:5px}
#contacto .ff label{font-size:12px}
#contacto .ff input,
#contacto .ff select,
#contacto .ff textarea{padding:9px 12px;font-size:13.5px}
#contacto .ff textarea{min-height:62px}
#contacto .ff-drop{padding:10px 12px;font-size:13px}
#contacto .ff-thumb{width:78px}
#contacto .ff-thumb img{width:78px;height:78px}
#contacto .btn-block{padding:12px 20px}
#contacto .ff-note{font-size:11px}
#contacto .form-perks{gap:10px;font-size:13px}
#contacto .form-perks .ci-ico{width:28px;height:28px;border-radius:9px}
#contacto .form-perks .ci-ico svg{width:14px;height:14px}
/* A todo el ancho, el hover que agrandaba la tarjeta empujaba fuera de pantalla */
#contacto .contact-card:hover:not(:focus-within){transform:scale(1.005)}

/* ---------------------------------------------------------
   RADAR DEL MAPA (2026-08-05)
   Mismo escaneo que malot.speedcellia.com: disco con barrido,
   revelado del mapa de arriba hacia abajo y botón para repetirlo.
   Rojo de malot cambiado por el celeste de Tecmovil.
   --------------------------------------------------------- */
.map-radar{
  position:absolute;inset:0;z-index:30;overflow:hidden;pointer-events:none;
  display:grid;place-items:center;
  background:#04121a;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease,background .7s ease,visibility 0s linear .8s;
}
#mapaLocal.is-scan .map-radar,
#mapaLocal.is-reveal .map-radar{opacity:1;visibility:visible;transition:opacity .5s ease,background .7s ease}
#mapaLocal.is-reveal .map-radar{background:rgba(0,0,0,.2)}

.mr-grid{
  position:absolute;inset:0;opacity:.18;transition:opacity .7s ease;
  background-image:
    linear-gradient(rgba(56,189,240,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,240,.5) 1px,transparent 1px);
  background-size:40px 40px;
}
#mapaLocal.is-reveal .mr-grid{opacity:.08}

.mr-disc{position:relative;display:block;width:min(74%,320px);aspect-ratio:1/1}
.mr-ring{position:absolute;border:1px solid rgba(18,169,220,.34);border-radius:50%}
.mr-ring:nth-child(1){inset:0}
.mr-ring:nth-child(2){inset:14%}
.mr-ring:nth-child(3){inset:28%}
.mr-ring:nth-child(4){inset:41%}
.mr-cross-v{position:absolute;left:50%;top:0;width:1px;height:100%;margin-left:-.5px;background:rgba(18,169,220,.26)}
.mr-cross-h{position:absolute;top:50%;left:0;height:1px;width:100%;margin-top:-.5px;background:rgba(18,169,220,.26)}
.mr-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(18,169,220,0) 0deg,
    rgba(18,169,220,0) 280deg,
    rgba(18,169,220,.12) 330deg,
    rgba(56,189,240,.6) 360deg);
  animation:mrSweep 1.8s linear infinite;
}
@keyframes mrSweep{to{transform:rotate(360deg)}}
.mr-blip{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--sky-400);box-shadow:0 0 10px 3px rgba(56,189,240,.7);
  opacity:0;animation:mrBlip 2s ease-in-out infinite;
}
@keyframes mrBlip{
  0%,100%{opacity:0;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.3)}
}
.mr-core{
  position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--sky-500);box-shadow:0 0 12px rgba(18,169,220,.8);
}

.mr-label{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);text-align:center}
.mr-status{
  display:block;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--sky-400);animation:mrBlink 1.6s ease-in-out infinite;
}
@keyframes mrBlink{0%,100%{opacity:1}50%{opacity:.45}}
.mr-coords{display:block;margin-top:5px;font-size:11px;color:rgba(255,255,255,.55)}

/* Línea que baja mientras se descubre el mapa */
.mr-scan{
  position:absolute;left:0;right:0;top:-20%;height:64px;opacity:0;
  background:linear-gradient(to bottom,
    rgba(18,169,220,0),
    rgba(18,169,220,.35) 75%,
    rgba(140,225,255,.9));
}
#mapaLocal.is-reveal .mr-scan{opacity:.9;animation:mrScan 1.2s ease-in-out forwards}
@keyframes mrScan{from{top:-20%}to{top:110%}}

/* Foto aérea de Panamá: la misma que revela malot, con barrido de arriba hacia abajo */
.mr-photo{
  position:absolute;inset:0;z-index:5;overflow:hidden;background:#04121a;
  opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.mr-photo img{
  display:block;width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 0 100% 0);
}
.mr-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent 52%,rgba(0,0,0,.2));
}
#mapaLocal.is-reveal .mr-photo,
#mapaLocal.is-live .mr-photo{opacity:1}
#mapaLocal.is-reveal .mr-photo img{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.1s cubic-bezier(.22,1,.36,1);
}
#mapaLocal.is-live .mr-photo img{clip-path:inset(0 0 0 0)}

/* El Street View va encima de la foto y entra recién al final */
#mapaLocal .map-frames .map-frame{z-index:10;transition:opacity .9s ease}
#mapaLocal.is-scan .map-frame,
#mapaLocal.is-reveal .map-frame{opacity:0}

/* Botón para volver a ver el escaneo */
.map-rescan{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  appearance:none;cursor:pointer;
  border:1px solid var(--line);background:var(--white);color:var(--sky-700);
  font-family:inherit;font-weight:600;font-size:12.5px;line-height:1;
  padding:9px 14px;border-radius:999px;
  transition:border-color var(--t),color var(--t),transform var(--t);
}
.map-rescan:hover{border-color:var(--sky-400);color:var(--sky-600);transform:translateY(-1px)}
.map-rescan:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}
.map-rescan svg{width:14px;height:14px;flex:none}

@media (max-width:560px){
  .map-rescan{padding:9px 11px}
  .map-rescan span{display:none}
  .mr-label{bottom:10px}
}

@media (prefers-reduced-motion:reduce){
  .mr-sweep,.mr-blip,.mr-status,.mr-scan{animation:none}
}

/* ---------------------------------------------------------
   PANEL DEL LOCAL (2026-08-05)
   Como en dmovil.speedcellia.com: los datos del local a la
   izquierda y el mapa, más chico, a la derecha.
   --------------------------------------------------------- */
.local-split{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:22px;align-items:stretch;
}
.local-info{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFE 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
  padding:clamp(24px,2.4vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.local-info .eyebrow{text-align:left;margin:0}
.local-title{font-size:clamp(20px,2.2vw,25px);margin:0;color:var(--ink)}
.local-lead{font-size:13.5px;color:var(--body);margin:0;max-width:42ch}

.local-datos{display:grid;gap:15px;margin:4px 0 0}
.ubi-dato{display:flex;align-items:flex-start;gap:12px}
.ubi-dato .ci-ico{width:38px;height:38px;border-radius:12px;flex:none}
.ubi-dato .ci-ico svg{width:18px;height:18px}
.ubi-dato b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.ubi-dato p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--body)}
.ubi-dato a{transition:color var(--t)}
.ubi-dato a:hover{color:var(--sky-600)}

.local-btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:auto;padding-top:6px}
.local-btns .btn{flex:1 1 190px;justify-content:center;padding:13px 18px;font-size:14px}
.local-btns .btn .ico{width:17px;height:17px}

/* El mapa baja de tamaño: ahora comparte fila con los datos */
#contacto .map-frames{min-height:clamp(230px,23vw,310px)}
#contacto .map-tabs{flex-wrap:wrap;gap:6px}
#contacto .map-foot{font-size:13px}
#contacto .map-foot .map-addr{flex:1 1 160px;min-width:0}

@media (max-width:980px){
  .local-split{grid-template-columns:1fr}
  #contacto .map-frames{min-height:280px}
}
@media (max-width:720px){
  .local-btns .btn{flex:1 1 100%}
}

/* =========================================================
   Hero — el texto arranca arriba (2026-08-06)
   La grilla centraba la columna de texto contra un visual
   bastante más alto (video + franja de beneficios), así que
   el título quedaba hundido. Ahora las dos columnas nacen
   a la misma altura. Revertir = borrar este bloque.
   ========================================================= */
@media (min-width:1025px){
  .hero{align-items:flex-start}
  .hero-grid{align-items:start}
  .hero-copy{padding-top:6px}
  .hero-card{padding-top:clamp(24px,5vh,60px);padding-bottom:96px}
  /* el equipo ocupa el hueco que dejo la franja de beneficios */
  .phone-stage{width:min(432px,96%)}
}

/* Laptops de pantalla baja: el equipo se achica para no empujar la
   pagina (2026-08-06). */
@media (min-width:1025px) and (max-height:820px){
  .phone-stage{width:min(372px,92%)}
  .hero-card{padding-bottom:72px}
}


/* ---------------------------------------------------------
   VIDEO EN LAS TARJETAS DE SERVICIO
   El clip va encima de la foto, que queda de poster. Entra con
   un fundido cuando ya tiene cuadros para mostrar, asi que no
   se ve el recuadro vacio ni un salto al empezar.
   --------------------------------------------------------- */
#servicios .thumb-video{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  object-fit:cover;display:block;pointer-events:none;
  opacity:0;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
#servicios .thumb-video.is-on{opacity:1}

/* El velo del thumb va por encima del video, no debajo. */
#servicios .thumb.has-video::after{z-index:2}

/* Se acerca apenas con el mouse, como el resto de la tarjeta. */
#servicios .service-card:hover .thumb-video{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  #servicios .thumb-video{display:none}
}
/* ==========================================================================
   LA BÓVEDA ORIGINAL — sección de la portada.
   Va entre dos secciones claras, así que el negro corta la página en seco:
   ese contraste es lo que la vuelve la pieza cara del sitio.
   ========================================================================== */
.vault{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(38px,4.6vw,62px) 0;
  background:
    radial-gradient(62% 82% at 26% 46%, rgba(235,196,99,.22) 0%, transparent 60%),
    radial-gradient(70% 110% at 92% 8%, rgba(18,169,220,.10) 0%, transparent 56%),
    linear-gradient(168deg, #191408 0%, #0A0810 48%, #050409 100%);
  color:#EDE4CE;
}
/* Hilos dorados que separan la sección de lo que tiene arriba y abajo. */
.vault::before,
.vault::after{
  content:"";position:absolute;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,240,200,.65),transparent);
}
.vault::before{top:0}
.vault::after{bottom:0}

/* Resplandor detrás de la puerta. */
.vault-glow{
  position:absolute;z-index:0;pointer-events:none;
  width:min(620px,72vw);aspect-ratio:1;
  left:-8%;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(235,196,99,.20) 0%,rgba(235,196,99,.06) 42%,transparent 68%);
}
/* Grano fino: sin esto el degradado se ve plano y barato. */
.vault-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.010) 0 1px,transparent 1px 3px);
}

.vault-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}

/* ------------------------------------------------------------- la puerta */
.vault-door{position:relative;display:grid;place-items:center}

/* Resplandor detrás de la puerta: la despega del fondo y le da el calor del
   oro sin tener que tocar la foto. */
.vault-halo{
  position:absolute;inset:-4% -14%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 52%,
    rgba(235,196,99,.28) 0%, rgba(235,196,99,.08) 42%, transparent 70%);
  animation:vault-latido 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes vault-latido{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:.92;transform:scale(1.035)}
}

/* Una luz cruza la pieza cada tanto, como el reflejo sobre metal pulido.
   Es lo único que se mueve: la foto ya tiene todo el peso visual. */
.vault-destello{
  position:absolute;top:-4%;bottom:-4%;left:-30%;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,248,225,.14),transparent);
  transform:skewX(-16deg);
  animation:vault-luz 8s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes vault-luz{
  0%,74%{left:-30%}
  94%,100%{left:112%}
}

.vault-foto{
  position:relative;z-index:1;
  /* La pieza mide 1122 px de ancho: con este tope entra nitida incluso en
     pantallas que piden el doble de puntos. */
  width:min(370px,100%);height:auto;display:block;
  /* Viene recortada, sin fondo: la sombra la asienta y el halo dorado la
     integra con la seccion. */
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.6)) drop-shadow(0 0 44px rgba(235,196,99,.22));
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease;
  /* Respira despacio: sin esto la foto se ve pegada al fondo. */
  animation:vault-respira 11s ease-in-out infinite;
}
@keyframes vault-respira{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
.vault:hover .vault-foto{
  transform:scale(1.028);
  filter:drop-shadow(0 36px 72px rgba(0,0,0,.78)) drop-shadow(0 0 66px rgba(235,196,99,.34));
  animation-play-state:paused;
}

/* -------------------------------------------------------------- el texto */
.vault-copy{min-width:0}

.vault-eyebrow{
  margin:0 0 10px;
  font-size:11px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:#E7C56B;
}
.vault-eyebrow::before{
  content:"";display:inline-block;vertical-align:middle;
  width:26px;height:1px;margin-right:10px;
  background:linear-gradient(90deg,transparent,#E7C56B);
}

.vault-title{
  margin:0;
  font-family:Anton,"Arial Narrow",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(34px,4.8vw,60px);
  line-height:1.02;                  /* .94 recortaba la tilde de BÓVEDA */
  padding-top:.06em;
  letter-spacing:.008em;
  text-transform:uppercase;
  /* El mismo cromo del titular de la portada, en oro. */
  background-image:linear-gradient(180deg,
    #8A7648 0%, #F7E7BC 19%, #FFFDF4 34%,
    #D9B75E 49%, #7A5F1E 50.8%,
    #C9A03A 63%, #FFF6DC 82%, #9C7A28 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(5,4,9,.92)) drop-shadow(0 14px 30px rgba(0,0,0,.6));
}
.vault-title span{
  background-image:linear-gradient(180deg,#FFFDF4 0%,#F0D488 46%,#B98C22 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.vault-lead{
  margin:13px 0 0;
  max-width:50ch;
  font-size:14.5px;
  color:rgba(232,222,198,.66);
}

/* En fila, no apilados: tres cajas una debajo de otra costaban unos 120 px de
   alto y eran la razon principal de que la seccion no entrara en pantalla. */
.vault-chips{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;
}
.vault-chips li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;
  border:1px solid rgba(235,196,99,.24);
  border-radius:var(--r-pill);
  background:linear-gradient(120deg,rgba(235,196,99,.075),rgba(235,196,99,.02));
  font-size:12.5px;font-weight:600;
  color:#EFE5CD;
  white-space:nowrap;
}
.vault-chips svg{width:16px;height:16px;flex:none;color:#E7C56B}

/* ----------------------------------------------------------------- el CTA */
.vault-acciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin-top:20px;
}
.vault-cta{
  position:relative;
  display:inline-flex;align-items:center;gap:11px;
  padding:12px 22px 12px 12px;
  border-radius:var(--r-pill);
  overflow:hidden;
  font-size:14.5px;font-weight:700;
  letter-spacing:.03em;
  color:#140F05;
  background:linear-gradient(135deg,#FFF7DE 0%,#EBC463 44%,#C9A03A 100%);
  box-shadow:0 14px 34px rgba(184,139,34,.42),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.vault-cta:hover,
.vault-cta:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 22px 48px rgba(235,196,99,.55),inset 0 1px 0 rgba(255,255,255,.7);
}
.vault-cta:focus-visible{outline:2px solid #FFF7DE;outline-offset:3px}
/* Destello que cruza el botón cada tanto. */
.vault-cta::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:32%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  animation:vault-brillo 4.5s ease-in-out infinite;
}
@keyframes vault-brillo{
  0%,66%{left:-40%}
  88%,100%{left:120%}
}
.vault-cta-ico{
  display:grid;place-items:center;
  width:30px;height:30px;flex:none;
  border-radius:50%;
  background:rgba(20,15,5,.14);
}
.vault-cta-ico svg{width:18px;height:18px}
.vault-cta-flecha{width:15px;height:15px;flex:none;transition:transform .3s ease}
.vault-cta:hover .vault-cta-flecha{transform:translateX(3px)}

.vault-nota{font-size:12.5px;color:rgba(232,222,198,.42)}

/* --------------------------------------------------------------- pantallas */
@media (max-width:940px){
  /* 1fr a secas deja que el contenido empuje la columna y se salga de la
     pantalla: minmax(0,1fr) la obliga a respetar el ancho disponible. */
  .vault-grid{grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center;text-align:center}
  .vault-copy{display:flex;flex-direction:column;align-items:center}
  .vault-foto{width:min(280px,62vw)}
  .vault-eyebrow::before{display:none}
  .vault-lead{max-width:56ch}
  .vault-chips{justify-content:center}
  .vault-acciones{justify-content:center}
}
@media (max-width:560px){
  .vault-foto{width:min(215px,56vw)}
  .vault-cta{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .vault-halo,.vault-foto,.vault-cta::after{animation:none}
  .vault-destello{display:none}
  .vault-foto,.vault-cta,.vault-cta-flecha{transition:none}
}


/* Portatiles con poca altura: lo primero que sobra es el tamanio de la foto. */
@media (min-width:941px) and (max-height:820px){
  .vault{padding:clamp(28px,3.2vw,42px) 0}
  .vault-foto{width:min(300px,100%)}
  .vault-title{font-size:clamp(30px,3.8vw,48px)}
  .vault-lead{margin-top:10px;font-size:14px}
  .vault-chips{margin-top:14px}
  .vault-acciones{margin-top:14px}
}


/* Sin cursor y con poco ancho: la seccion se aprieta y los sellos dejan de
   ser intocables, para que ninguno se salga por el costado. */
@media (max-width:940px){
  .vault{padding:clamp(30px,5vw,44px) 0}
  .vault-copy{width:100%;min-width:0}
  .vault-lead{max-width:44ch;margin-inline:auto;font-size:14px}
  .vault-chips{margin-top:16px}
  .vault-chips li{white-space:normal;font-size:12px;padding:7px 12px}
  .vault-acciones{margin-top:16px}
  .vault-nota{width:100%}
}