.elementor-1570 .elementor-element.elementor-element-de98164{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1570 .elementor-element.elementor-element-5bfc50a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1570 .elementor-element.elementor-element-0a3ef8f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1570 .elementor-element.elementor-element-37ea32d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1570 .elementor-element.elementor-element-1ad85cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS */:root{
  --accent:#003087; --accent-hover:#001f5c; --accent-soft:#EDF1F8;
  --yellow:#FEDD00;
  --wa:#25D366; --wa-deep:#1BA94C; --wa-ink:#07281A;
  --ink:#16181C; --muted:#5C6470; --faint:#8A919C;
  --line:#E3E6EA; --line-soft:#EDEFF2;
  --bg:#FFFFFF; --bg-alt:#FAFAFB;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --cut:8px;
  --spring:cubic-bezier(.34,1.24,.44,1);
}
body.visar{ background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased }
body.visar .elementor-widget:not(:last-child){ margin-bottom:0 }
.visar ::selection{ background:var(--accent); color:#fff }
.visar :focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
html{ scrollbar-color:var(--accent) var(--bg-alt); scrollbar-width:thin; scroll-behavior:smooth }

#net{ position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0; pointer-events:none }
.v-head,.v-wrap,.v-foot,.v-rail,.v-wa{ position:relative; z-index:1 }

/* ===== vocabulario ===== */
.v-mono{ font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--faint) }
.v-h1{ font-weight:600; font-size:clamp(32px,1.5rem + 2.5vw,58px); line-height:1.06;
  letter-spacing:-.035em; margin:0 0 20px }
.v-h2{ font-weight:600; font-size:clamp(25px,1.25rem + 1.4vw,36px); line-height:1.12;
  letter-spacing:-.03em; margin:0 0 14px }
.v-lede{ font-size:18px; color:var(--muted); max-width:56ch; margin:0 0 30px }
.v-body{ color:var(--muted); max-width:66ch; margin:0 0 16px }

/* ===== botones ===== */
.v-btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding:13px 24px; border:0; cursor:pointer;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  transition:background-color .15s ease-out,color .15s ease-out,transform .1s ease-out;
  /* sin esto hereda el rosa de enlace del tema y el botón sale sin fondo */
  background:var(--accent); color:#fff }
.v-btn:hover{ background:var(--accent-hover); color:#fff }
.v-btn:active{ transform:translateY(1px) }
.v-btn--2{ color:var(--ink); background:#C6CBD4; position:relative; isolation:isolate }
.v-btn--2::before{ content:""; position:absolute; inset:1px; z-index:-1; background:var(--bg);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  transition:background-color .15s ease-out }
.v-btn--2:hover{ color:var(--accent); background:var(--accent) }
.v-btn--2:hover::before{ background:var(--accent-soft) }

/* ===== cabecera: sin menú, solo marca y el hueco del botón ===== */
.v-head{ border-bottom:1px solid var(--line); background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.5) blur(8px) }
.v-head__in{ display:flex; align-items:center; gap:24px; min-height:64px;
  max-width:1240px; margin:0 auto; padding:0 24px }
.v-head img{ width:126px; height:auto; display:block }
/* hueco reservado: el botón flotante aterriza aquí arriba del todo */
.v-slot{ margin-left:auto; width:150px; height:44px }

/* ===== WhatsApp fundido: un solo elemento que viaja ===== */
.v-wa{ position:fixed; right:22px; bottom:22px; z-index:60;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--wa); color:var(--wa-ink); padding:13px 20px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  box-shadow:0 0 0 rgba(7,40,26,0);
  transform:translate(var(--wa-dx,0),var(--wa-dy,0));
  transition:transform .62s var(--spring), box-shadow .5s ease-out, background-color .18s ease-out }
body.v-scrolled .v-wa{ box-shadow:0 16px 36px -14px rgba(7,40,26,.5) }
.v-wa:hover{ background:var(--wa-deep) }
.v-wa svg{ width:18px; height:18px; flex:0 0 auto }
.v-wa.is-ready{ visibility:visible }
.v-wa{ visibility:hidden }

/* ===== riel: el menú de servicios, ya a la izquierda ===== */
.v-rail{ position:fixed; left:0; top:50%; z-index:50;
  display:flex; flex-direction:column; gap:2px;
  background:var(--accent); border:0;
  box-shadow:0 14px 34px -18px rgba(0,48,135,.7);
  padding:8px; transform:translate(-110%,-50%); opacity:0;
  transition:transform .55s var(--spring), opacity .35s ease-out }
body.v-scrolled .v-rail{ transform:translate(0,-50%); opacity:1 }
.v-rail a,.v-rail .v-rail__soon{
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:rgba(255,255,255,.72); width:44px; height:44px; position:relative;
  opacity:0; transform:translateX(-10px);
  transition:background-color .18s ease-out,color .18s ease-out,
             opacity .4s var(--spring),transform .4s var(--spring);
  transition-delay:0s }
/* el escalonado va por --o y no por :nth-child, porque entre los items hay
   separadores y líneas todavía sin página: la cuenta de hijos no coincide */
body.v-scrolled .v-rail a,body.v-scrolled .v-rail .v-rail__soon{
  opacity:1; transform:none; transition-delay:calc(.10s + var(--o,0) * .055s) }
.v-rail a:hover{ background:rgba(255,255,255,.14); color:#fff }
/* el activo en amarillo de marca: 8.8:1 sobre el azul, salta a la vista.
   data-activo es el activo permanente de la ficha; aria-current lo pone y lo
   quita el espía de desplazamiento de la portada, así que no sirve aquí */
.v-rail a[aria-current="true"],.v-rail a[data-activo="1"]{
  color:var(--yellow); background:rgba(254,221,0,.12) }
.v-rail a[aria-current="true"]::before,.v-rail a[data-activo="1"]::before{
  content:""; position:absolute; left:0; top:7px; bottom:7px;
  width:3px; background:var(--yellow) }
/* líneas cuya página todavía no existe: ocupan su sitio, no son enlaces */
.v-rail .v-rail__soon{ color:rgba(255,255,255,.34); cursor:default; user-select:none }
.v-rail .v-rail__soon::after{ content:""; position:absolute; right:7px; bottom:7px;
  width:4px; height:4px; background:rgba(255,255,255,.34) }
.v-rail hr{ border:0; border-top:1px solid rgba(255,255,255,.22); margin:5px 6px }
.v-rail svg{ width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.v-tip{ position:absolute; left:calc(100% + 9px); white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:6px 9px; opacity:0; pointer-events:none;
  transform:translateX(-4px); transition:opacity .18s ease-out,transform .18s ease-out }
.v-rail a:hover .v-tip,.v-rail a:focus-visible .v-tip,
.v-rail .v-rail__soon:hover .v-tip{ opacity:1; transform:none }

/* ===== el riel en una ficha de servicio =====
   Ahí es el único menú, así que no espera al desplazamiento: está puesto en la
   esquina izquierda desde que se abre, igual que en la portada ya rodada. */
body.v-pagina-svc .v-rail,body.v-xfer-on .v-rail{ transform:translate(0,-50%); opacity:1 }
body.v-pagina-svc .v-rail a,body.v-pagina-svc .v-rail .v-rail__soon,
body.v-xfer-on .v-rail a,body.v-xfer-on .v-rail .v-rail__soon{
  opacity:1; transform:none; transition-delay:calc(var(--o,0) * .045s) }

/* ===== marcos ===== */
.v-wrap{ max-width:1240px; margin:0 auto; padding:0 24px }
.v-frame{ border:1px solid var(--line); background:rgba(255,255,255,.88);
  padding:clamp(26px,3.4vw,52px); position:relative }
.v-frame + .v-frame{ margin-top:clamp(18px,2.2vw,28px) }
.v-hero + .v-frame{ margin-top:clamp(52px,5.5vw,76px) }
.v-frame__tag{ position:absolute; top:-1px; left:clamp(26px,3.4vw,52px);
  transform:translateY(-50%); background:var(--bg); padding:0 10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint) }
.v-sp{ padding-block:clamp(26px,3.4vw,46px) }
.v-hero{ padding-bottom:clamp(58px,6vw,86px) }
.v-hero__facts{ display:flex; flex-wrap:wrap; gap:0 30px; border-top:1px solid var(--line);
  padding-top:14px; margin-top:30px }
.v-hero__facts span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); padding:4px 0 }
.v-hero__facts b{ color:var(--accent); font-weight:500 }

/* hero a dos columnas: el texto respira a la izquierda, la foto va enmarcada */
/* la imagen lleva seis figuras, así que se le cede algo de ancho al titular */
.v-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3.2vw,46px); align-items:start }
.v-hero__col{ min-width:0 }
.v-hero__shot{ margin:0; position:relative; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-alt) }
.v-hero__shot img{ display:block; width:100%; height:auto; aspect-ratio:1100/917;
  object-fit:cover; filter:saturate(.94) }
.v-hero__shot figcaption{ position:absolute; inset:auto 0 0 0;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; padding:30px 12px 10px;
  background:linear-gradient(transparent,rgba(9,16,32,.55) 42%,rgba(9,16,32,.88)) }
.v-hero__shot::after{ content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,48,135,.08) }

/* equipo fundido: sin marco ni fondo — los bordes de la imagen ya mueren en blanco,
   así que la gente queda parada sobre la página en vez de dentro de una caja */
.v-hero__team{ margin:0; align-self:end }
.v-hero__team img{ display:block; width:100%; height:auto }

/* quiénes somos a tres columnas: texto · lámina · ficha.
   La foto de bodega es de 294×392 reales, así que se muestra a tamaño nativo
   en su propia columna y no estirada dentro de una ancha. */
.v-nos{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
  gap:clamp(22px,2.8vw,42px); align-items:start }
.v-nos__shot{ margin:0 }
.v-nos__shot img{ display:block; width:100%; height:auto;
  border:1px solid var(--line); padding:6px; background:var(--bg) }
.v-nos__shot figcaption{ margin-top:9px }

/* ===== banda de servicios: se va a la izquierda al hacer scroll ===== */
.v-band{ position:absolute; left:clamp(26px,8vw,132px); right:clamp(26px,3.4vw,52px);
  bottom:0; transform:translateY(50%);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--accent); box-shadow:0 18px 40px -22px rgba(0,48,135,.6) }
.v-band a{ display:flex; align-items:center; gap:11px; padding:20px 22px;
  text-decoration:none; color:#fff; border-right:1px solid rgba(255,255,255,.18);
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  transition:background-color .18s ease-out,opacity .45s ease-out,transform .55s var(--spring) }
.v-band a:last-child{ border-right:0 }
.v-band a:hover{ background:var(--accent-hover) }
.v-band svg{ width:19px; height:19px; stroke:#9FB2D9; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; transition:stroke .18s ease-out }
.v-band a:hover svg{ stroke:var(--yellow) }
.v-band i{ font-style:normal; margin-left:auto; transition:transform .2s ease-out; color:#9FB2D9 }
.v-band a:hover i{ transform:translateX(4px); color:#fff }
/* líneas cuya página todavía no existe (fase 2 y 3): ocupan su sitio en la
   barra pero no son enlaces, para no dejar destinos rotos */
.v-band__soon{ display:flex; align-items:center; gap:11px; padding:20px 22px;
  color:rgba(255,255,255,.52); border-right:1px solid rgba(255,255,255,.18);
  font-size:15px; font-weight:600; letter-spacing:-.01em; cursor:default;
  user-select:none }
.v-band__soon:last-child{ border-right:0 }
.v-band__soon svg{ stroke:rgba(255,255,255,.4) }
.v-band__soon em{ font-style:normal; margin-left:auto; font-family:var(--mono);
  font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28); padding:3px 7px; border-radius:2px;
  color:rgba(255,255,255,.62) }
/* el desplazamiento la manda hacia la izquierda, escalonada */
body.v-leaving .v-band a{ opacity:0; transform:translateX(calc(-60px - var(--o,0) * 26px)) }

/* ===== ficha ===== */
.v-fact{ display:flex; gap:20px; padding:12px 0; border-bottom:1px solid var(--line) }
.v-fact:first-child{ border-top:1px solid var(--line) }
.v-fact dt{ flex:0 0 128px; font-family:var(--mono); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.11em; color:var(--faint); padding-top:3px; margin:0 }
.v-fact dd{ margin:0; font-size:15px }
.v-fact dd a{ color:var(--accent); text-decoration:none }
.v-fact dd a:hover{ text-decoration:underline; text-underline-offset:3px }
.v-two{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,56px); align-items:start }

/* ===== marcas ===== */
.v-marcas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line) }
.v-marca{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:30px 20px 24px; min-height:148px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color .2s ease-out }
.v-marca:hover{ background:var(--bg-alt) }
.v-marca__i{ height:42px; display:flex; align-items:center; justify-content:center; width:100% }
.v-marca img{ max-height:42px; max-width:130px; width:auto; height:auto; object-fit:contain;
  opacity:.9; transition:opacity .22s ease-out,transform .3s var(--spring) }
.v-marca:hover img{ opacity:1; transform:translateY(-3px) }
.v-marca__c{ font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); text-align:center; line-height:1.5;
  transition:color .2s ease-out }
.v-marca:hover .v-marca__c{ color:var(--accent) }
/* la última celda es la acción de certificados */
/* el tema pinta button:hover con su propio color: se neutraliza con especificidad */
.v-marcas button.v-marca--act{ cursor:pointer; background:var(--accent-soft); font:inherit;
  -webkit-appearance:none; appearance:none; color:var(--accent);
  border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line) }
.v-marcas button.v-marca--act:hover,
.v-marcas button.v-marca--act:focus{ background:var(--accent); color:#fff }
.v-marca--act .v-marca__c{ color:var(--accent); font-size:11px }
.v-marca--act:hover .v-marca__c{ color:#fff }
.v-marca--act svg{ width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s ease-out }
.v-marca--act:hover svg{ stroke:var(--yellow) }

/* ===== popup de certificados: sin cierre manual, 2 s ===== */
/* ===== traspaso a la página de servicio =====
   La página existe de verdad en WordPress y tiene su URL. Desde la portada se
   trae su contenido y entra deslizando, para que no se sienta un salto de
   ventana: la cabecera, el riel y el botón de contacto nunca se vuelven a
   dibujar — solo cambia lo que hay debajo. */
.v-xfer{ position:fixed; left:0; right:0; bottom:0; top:var(--head-h,65px);
  z-index:60; background:var(--bg); overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%); visibility:hidden;
  box-shadow:-30px 0 60px -40px rgba(0,48,135,.45);
  transition:transform .54s var(--spring), visibility 0s linear .54s }
.v-xfer.is-in{ transform:none; visibility:visible;
  transition:transform .54s var(--spring), visibility 0s }
/* si la ficha todavía no ha llegado, el panel entra igual con una barra viva:
   pulsar siempre tiene respuesta inmediata */
.v-xfer.is-cargando::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent) 0 40%,var(--yellow) 40% 60%,var(--accent) 60% 100%);
  background-size:260% 100%; animation:vCarga 1.1s linear infinite }
@keyframes vCarga{ from{ background-position:100% 0 } to{ background-position:-60% 0 } }
/* dentro del traspaso la ficha no trae el contenedor de la página, así que
   se le devuelven aquí los márgenes: los mismos que tiene servida por su URL,
   para que deslizar hasta ella y entrar directo se vean idénticos */
.v-xfer .v-svc--pagina{ padding:clamp(26px,3.4vw,46px) 24px clamp(40px,5vw,72px) }
body.v-xfer-on{ overflow:hidden }
body.v-xfer-on .v-head{ position:fixed; top:0; left:0; right:0; z-index:70 }
body.v-xfer-on .v-wa{ --wa-dx:0px; --wa-dy:0px; z-index:80 }
/* el riel queda por encima del traspaso: es el menú con el que se salta de
   una línea a otra sin cerrar nada */
body.v-xfer-on .v-rail{ z-index:75 }
/* Marcas vive en la portada, que queda detrás del traspaso: mientras la ficha
   está abierta ese item llevaría a un sitio que no se ve */
body.v-xfer-on .v-rail a[data-sec="marcas"]{ display:none }

/* ===== página de servicio autónoma =====
   Es la misma ficha, pero servida en su propia URL de WordPress. Aquí no
   desliza: fluye como documento normal, con la cabecera pegajosa y el riel
   puesto en la esquina. */
body.v-pagina-svc .v-head{ position:sticky; top:0; z-index:70 }
.v-svc--pagina{ display:block }

/* hero de la ficha: mismo lenguaje que el de la portada, sin foto —
   manda el titular y la marca representada */
.v-hero--svc{ padding-bottom:clamp(30px,3.6vw,52px) }
.v-hero--svc .v-hero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  align-items:start }
.v-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px }
.v-hero__marcas{ border:1px solid var(--line); background:var(--bg);
  padding:18px 20px 20px; display:flex; flex-direction:column; gap:16px }
.v-hero__marcas .v-mono{ display:block }
.v-hero__logos{ display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line) }
.v-hero__logos span{ background:var(--bg); display:flex; align-items:center;
  justify-content:center; padding:18px 14px; min-height:74px }
.v-hero__logos img{ max-height:38px; max-width:132px; width:auto; height:auto;
  object-fit:contain; opacity:.92 }
.v-hero__nota{ font-size:13px; line-height:1.5; color:var(--muted); margin:0 }
/* la pieza que abre la ficha: va fundida, sin marco, igual que el equipo del
   hero de la portada — el fondo de la foto ya muere en blanco */
.v-hero__pieza{ margin:0 0 18px }
.v-hero__pieza img{ display:block; width:100%; height:auto }

/* ===== rejilla de lo que se entrega ===== */
.v-cat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px); margin-top:clamp(20px,2.4vw,32px) }
.v-cat figure{ margin:0 }
.v-cat img{ display:block; width:100%; height:auto; aspect-ratio:1;
  object-fit:contain; background:var(--bg);
  transition:transform .35s var(--spring) }
.v-cat figure:hover img{ transform:translateY(-4px) scale(1.015) }
.v-cat figcaption{ border-top:1px solid var(--line); padding-top:10px; margin-top:4px;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); line-height:1.55; transition:color .2s ease-out }
.v-cat figure:hover figcaption{ color:var(--accent) }
/* de dónde salen estas imágenes: se dice, no se esconde */
.v-cat__pie{ margin-top:clamp(20px,2.4vw,30px); padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:13.5px; line-height:1.6; color:var(--muted); max-width:72ch }

/* contenido del panel */
.v-svc__in{ max-width:1240px; margin:0 auto; padding:clamp(30px,4vw,64px) 24px clamp(60px,7vw,110px) }
.v-svc__tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); display:block; margin-bottom:14px }
.v-svc__h{ font-size:clamp(30px,4.4vw,52px); line-height:1.1; letter-spacing:-.02em;
  font-weight:600; margin:0 0 18px; max-width:18ch }
.v-svc__lede{ font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--muted);
  max-width:62ch; margin:0 0 clamp(30px,4vw,54px) }
.v-svc__sec{ border-top:1px solid var(--line); padding-top:clamp(22px,2.6vw,34px);
  margin-top:clamp(28px,3.4vw,46px);
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(20px,3vw,44px) }
.v-svc__sec > h3{ font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); font-weight:500; margin:0 }
/* cuando la sección es la única del marco, la raya de arriba la duplica */
.v-svc__sec--solo{ border-top:0; margin-top:0; padding-top:0 }
/* en la ficha el encabezado de la columna izquierda es un titular, no una
   etiqueta: gana a la regla de arriba por especificidad (0,3,1) */
.v-svc__sec > h3.v-h2{ font-family:var(--sans); font-size:clamp(21px,1.1rem + .8vw,28px);
  line-height:1.16; letter-spacing:-.03em; text-transform:none; font-weight:600;
  color:var(--ink); margin:0 }
.v-svc__body p{ margin:0 0 14px; font-size:15.5px; line-height:1.62; color:var(--ink); max-width:66ch }
.v-svc__body p:last-child{ margin-bottom:0 }
.v-svc__list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line) }
.v-svc__list li{ background:var(--bg); padding:14px 16px; display:flex; gap:13px; align-items:flex-start }
.v-svc__list b{ font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent); font-weight:500; flex:0 0 96px; padding-top:3px }
.v-svc__list span{ font-size:14.5px; line-height:1.55 }
.v-svc__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(30px,4vw,50px) }

@media (max-width:860px){
  .v-hero--svc .v-hero__grid{ grid-template-columns:1fr }
  .v-hero__marcas{ max-width:340px }
  .v-hero__logos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .v-cat{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .v-svc__sec{ grid-template-columns:1fr; gap:12px }
  .v-svc__list li{ flex-direction:column; gap:4px }
  .v-svc__list b{ flex:none }
  /* el traspaso arranca bajo la cabecera fija y por encima del riel inferior */
  .v-xfer{ bottom:52px }
  .v-xfer .v-svc--pagina{ padding-left:16px; padding-right:16px }
}

.v-modal{ position:fixed; inset:0; z-index:200; display:none; place-items:center;
  background:rgba(22,24,28,.44); padding:20px }
.v-modal[data-open="1"]{ display:grid }
.v-modal__box{ background:var(--bg); border:1px solid var(--line); max-width:720px; width:100%;
  box-shadow:0 24px 60px -24px rgba(22,24,28,.34);
  animation:vIn .3s var(--spring) }
@keyframes vIn{ from{ opacity:0; transform:translateY(12px) scale(.985) } to{ opacity:1; transform:none } }
.v-modal__hd{ padding:16px 22px; border-bottom:1px solid var(--line) }
.v-modal__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
.v-cert{ display:flex; gap:12px; align-items:flex-start; padding:18px 22px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14.5px }
.v-cert:nth-child(2n){ border-right:0 }
.v-cert i{ width:9px; height:9px; background:var(--yellow); flex:0 0 auto; margin-top:6px }
.v-modal__bar{ height:2px; background:var(--line) }
.v-modal__bar i{ display:block; height:100%; width:100%; background:var(--accent);
  transform-origin:left; animation:vBar 2s linear forwards }
@keyframes vBar{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }

/* ===== contacto ===== */
.v-contact{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(28px,4vw,52px); align-items:start }
.v-map{ border:1px solid var(--line); padding:6px; background:var(--bg) }
.v-map iframe{ display:block; width:100%; height:290px; border:0; filter:grayscale(.28) }
.v-social{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap }
.v-soc{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:46px; height:46px; text-decoration:none; color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line); background:var(--bg);
  transition:color .18s ease-out,box-shadow .18s ease-out,transform .25s var(--spring) }
.v-soc:hover{ color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); transform:translateY(-2px) }
.v-soc svg{ width:19px; height:19px; fill:currentColor }
.v-soc--wa:hover{ color:var(--wa-deep); box-shadow:inset 0 0 0 1px var(--wa-deep) }
.v-mailbtn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--accent);
  padding:13px 18px; box-shadow:inset 0 0 0 1px var(--line); background:var(--bg);
  transition:box-shadow .18s ease-out,background-color .18s ease-out }
.v-mailbtn:hover{ box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft) }
.v-mailbtn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }

/* ===== pie ===== */
.v-foot{ border-top:1px solid var(--line); padding:24px 0 32px; margin-top:clamp(26px,3.4vw,46px) }
.v-foot__in{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  max-width:1240px; margin:0 auto; padding:0 24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--faint) }
.v-foot img{ width:26px; height:26px }
.v-foot__r{ margin-left:auto; display:flex; gap:18px }
.v-foot a{ color:var(--muted); text-decoration:none }
.v-foot a:hover{ color:var(--accent) }

/* ===== movimiento ===== */
@media (prefers-reduced-motion:no-preference){
  .v-rv{ opacity:0; transform:translateY(14px);
    transition:opacity .6s var(--spring),transform .6s var(--spring) }
  .v-rv.is-in{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .v-rail,.v-wa,.v-band a{ transition:none }
}

/* ===== adaptación ===== */
@media (max-width:1040px){
  .v-hero__grid{ grid-template-columns:1fr; gap:26px }
  /* ratio nativo apilado: un 16/9 recorta las manos y se pierde el gesto */
  .v-hero__shot img{ aspect-ratio:1100/917 }
  /* el grupo son seis figuras: dentro del marco quedaría en 288px y no se
     distinguiría ninguna. Se saca hasta el borde de la pantalla anulando el
     padding del marco y el del contenedor. Con 100vw habría desborde
     horizontal, porque esa unidad incluye la barra de desplazamiento. */
  .v-two,.v-contact{ grid-template-columns:1fr }
  .v-nos{ grid-template-columns:1fr }
  .v-nos__shot{ max-width:300px }
  .v-marcas{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .v-band{ left:clamp(20px,4vw,40px) }
}
@media (max-width:860px){
  .v-slot{ width:120px }
  .v-rail{ top:auto; bottom:0; left:0; right:0; transform:translateY(110%);
    flex-direction:row; justify-content:space-around; border:0;
    box-shadow:0 -10px 30px -16px rgba(0,48,135,.7); padding:4px }
  /* en la barra inferior la marca del activo va arriba, no a la izquierda */
  .v-rail a[aria-current="true"]::before{ left:9px; right:9px; top:0; bottom:auto;
    width:auto; height:3px }
  body.v-scrolled .v-rail,body.v-pagina-svc .v-rail,body.v-xfer-on .v-rail{ transform:none }
  .v-rail hr{ display:none } .v-tip{ display:none }
  .v-wa{ bottom:74px; right:16px; padding:12px 16px }
  .v-band{ position:static; transform:none; grid-template-columns:1fr; margin-top:26px; box-shadow:none }
  .v-band a{ border-right:0; border-bottom:1px solid rgba(255,255,255,.18) }
  .v-band a:last-child{ border-bottom:0 }
  body.v-leaving .v-band a{ opacity:1; transform:none }
  .v-hero{ padding-bottom:clamp(26px,3.4vw,52px) }
  .v-marcas{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .v-modal__grid{ grid-template-columns:1fr }
  .v-cert{ border-right:0 }
  .v-fact{ flex-direction:column; gap:4px } .v-fact dt{ flex:none }
}
/* Por debajo de 765px el clamp del marco ya está pegado a su mínimo (26px) y el
   del contenedor es 24px, así que el sangrado es un valor fijo de 50px. Con seis
   figuras, dentro del marco la imagen quedaría en 288px y no se distingue nadie. */
@media (max-width:765px){
  /* !important porque Elementor resetea con
     .elementor .elementor-widget:not(…):not(…) figure{margin:0}
     — especificidad (0,4,1), imposible de ganar con una clase propia. */
  .v-hero__team{ margin-left:-50px !important; margin-right:-50px !important }
}/* End custom CSS */