/* ============================================================
   VECTRALIS — capa de marca sobre Hello Elementor
   Fuente: Manual de identidad 2024 + BRAND.md
   Regla de oro: blanco domina, rojo es acento, cantos vivos.
   ============================================================ */

:root{
  /* core [MANUAL] */
  --vx-red:#E50C19; --vx-black:#000; --vx-white:#fff; --vx-gray:#C6C6C6;
  --vx-red-dark:#C10A15;
  /* grises [MANUAL] */
  --vx-g1:#9fa7ad; --vx-g2:#c5cbd1; --vx-g3:#dae0e5; --vx-g4:#f0f3f7;
  /* soporte [MANUAL] */
  --vx-baumann:#204946; --vx-teradyne:#003087; --vx-teradyne-2:#0C2340; --vx-teradyne-3:#2EBEEF;
  /* semantica [WEB — validar con marketing] */
  --vx-success:#1B7F4B; --vx-warning:#8A5A00; --vx-info:#003087; --vx-danger:#B00812;
  /* texto y fondo */
  --text:#000; --text-muted:rgba(0,0,0,.65); --text-inverse:#fff;
  --bg:#fff; --bg-alt:#f0f3f7; --bg-dark:#000; --border:#C6C6C6;
  /* tipografia */
  --vx-font:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.75rem,1.6rem + 4.6vw,5rem);
  --fs-h1:clamp(2.25rem,1.5rem + 3vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);
  --fs-h3:clamp(1.35rem,1.15rem + .8vw,1.75rem);
  --fs-body-lg:1.25rem; --fs-body:1.0625rem; --fs-small:.9375rem; --fs-caption:.8125rem;
  --lh-tight:1.05; --lh-head:1.15; --lh-body:1.6;
  /* layout */
  --container:1280px; --gutter:24px; --radius:0;
  --margin-outer:clamp(20px,5vw,80px);
  --space-section:clamp(72px,9vw,128px);
  --header-h:80px;
}

/* Elementor asigna la fuente global "Text" directo a los widgets; la herencia no basta */
body .elementor-widget-icon-list .elementor-icon-list-text,
body .elementor-widget-icon-list .elementor-icon-list-item > a{
  font-family:var(--vx-font);
  font-weight:400;
}
/* ---------- base ---------- */
body{
  font-family:var(--vx-font); font-weight:400; font-size:var(--fs-body);
  line-height:var(--lh-body); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.vx-display{font-family:var(--vx-font);font-weight:700;letter-spacing:-.02em;text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);}
h2{font-size:var(--fs-h2);line-height:var(--lh-head);}
h3{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:-.01em;}
p{line-height:var(--lh-body);max-width:65ch;}
/* [MANUAL] todo texto multilinea alineado a la izquierda */
.elementor p,.elementor h1,.elementor h2,.elementor h3,.elementor li{text-align:left;}
a{color:var(--vx-red);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--vx-red-dark);}
/* [MANUAL] la marca es plana y de cantos vivos */
.elementor .vx-section :where(img,.elementor-button,.vx-card,input,textarea,select){border-radius:var(--radius);}
:where(a,button,input,textarea,select,.elementor-button):focus-visible{outline:2px solid var(--vx-black);outline-offset:2px;}

/* ---------- retícula ---------- */
.vx-section{width:100%;}
.vx-section > .e-con-inner,.vx-section.e-con-boxed > .e-con-inner{max-width:var(--container);}
.vx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.vx-grid{display:grid;gap:24px;}
.vx-grid--3{grid-template-columns:repeat(3,1fr);}
.vx-grid--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1024px){.vx-grid--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){
  .vx-split{grid-template-columns:1fr;}
  .vx-grid--3,.vx-grid--4{grid-template-columns:1fr;}
}

/* ---------- kicker / section header ---------- */
.vx-kicker{
  font-weight:700;font-size:var(--fs-caption);letter-spacing:.12em;
  text-transform:uppercase;color:var(--vx-red);margin:0 0 8px;
}
.vx-sechead{max-width:48ch;margin-bottom:8px;}
.vx-lead{font-size:var(--fs-body-lg);color:var(--text-muted);max-width:56ch;}

/* ---------- hero: símbolo sangrado, patrón de la portada del manual ---------- */
.vx-hero{position:relative;overflow:clip;background:var(--vx-white);}
.vx-hero::before{
  content:"";position:absolute;right:-8%;bottom:-22%;
  width:min(52vw,700px);aspect-ratio:1;
  background:url("brand/shape-triangle-red.svg") no-repeat center/contain;
  opacity:.10;z-index:0;pointer-events:none;
}
.vx-hero > *{position:relative;z-index:1;}
.vx-hero__body{max-width:34ch;}
.vx-hero .vx-display,.vx-hero h1{font-size:var(--fs-display);line-height:var(--lh-tight);max-width:18ch;}
@media(max-width:768px){.vx-hero::before{width:110vw;right:-40%;bottom:-14%;opacity:.07;}}

/* ---------- botones ---------- */
.vx-btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.vx-btn .elementor-button{
  font-family:var(--vx-font);font-weight:500;font-size:1rem;
  border-radius:0;padding:14px 28px;line-height:1.2;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .05s ease;
}
.vx-btn--primary .elementor-button{background:var(--vx-red);color:var(--vx-white);border:1.5px solid var(--vx-red);}
.vx-btn--primary .elementor-button:hover{background:var(--vx-red-dark);border-color:var(--vx-red-dark);color:#fff;}
.vx-btn--secondary .elementor-button{background:transparent;color:var(--vx-black);border:1.5px solid var(--vx-black);}
.vx-btn--secondary .elementor-button:hover{background:var(--vx-black);color:var(--vx-white);}
.vx-btn--inverse .elementor-button{background:var(--vx-white);color:var(--vx-black);border:1.5px solid var(--vx-white);}
.vx-btn--inverse .elementor-button:hover{background:transparent;color:var(--vx-white);}
.vx-btn--tertiary .elementor-button{
  background:transparent;color:var(--vx-red);border:0;padding:4px 0;
  text-decoration:none;border-bottom:1.5px solid transparent;
}
.vx-btn--tertiary .elementor-button:hover{border-bottom-color:var(--vx-red);}
.vx-btn .elementor-button:active{transform:translateY(1px);}
.vx-btn .elementor-button[disabled]{background:var(--vx-gray);color:rgba(0,0,0,.45);border-color:var(--vx-gray);}

/* ---------- tarjetas ---------- */
/* [MANUAL] sin sombras: el lenguaje visual es plano */
.vx-card{
  background:var(--vx-white);border:1px solid var(--border);
  padding:28px;box-shadow:none;height:100%;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s ease;
}
.vx-card:hover{border-color:var(--vx-black);}
.vx-bu__icon img{width:56px;height:56px;object-fit:contain;}
.vx-bu__title{margin:0;}
.vx-badge{
  display:inline-block;font-weight:700;font-size:var(--fs-caption);
  letter-spacing:.1em;color:var(--vx-red);border:1px solid var(--vx-red);
  padding:3px 10px;border-radius:999px;margin:0;
}

/* ---------- barra de anclas ---------- */
.vx-anchorbar{
  position:sticky;top:var(--header-h);z-index:40;
  background:var(--vx-white);border-bottom:1px solid var(--border);
}
.vx-anchors .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:0;}
.vx-anchors .elementor-icon-list-item{margin:0;}
.vx-anchors .elementor-icon-list-text{
  display:block;padding:16px 20px;font-weight:500;font-size:var(--fs-small);
  color:var(--text);border-bottom:2px solid transparent;
}
.vx-anchors .elementor-icon-list-item:hover .elementor-icon-list-text,
.vx-anchors .elementor-icon-list-item.is-active .elementor-icon-list-text{
  border-bottom-color:var(--vx-red);color:var(--vx-red);
}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}
/* que el ancla no quede debajo del header + barra */
:target,[id]{scroll-margin-top:calc(var(--header-h) + 56px);}

/* ---------- cifras ---------- */
.vx-stats-band{background:var(--vx-g4);}
.vx-stat__n{font-weight:700;font-size:clamp(2.5rem,1.5rem + 3vw,3.75rem);line-height:1;letter-spacing:-.03em;margin:0 0 6px;color:var(--vx-black);}
.vx-stat__l{font-size:var(--fs-small);color:var(--text-muted);margin:0;max-width:22ch;}

/* ---------- logo wall ---------- */
.vx-logo-wall{grid-template-columns:repeat(6,1fr);gap:8px;align-items:center;}
@media(max-width:768px){.vx-logo-wall{grid-template-columns:repeat(3,1fr);}}
.vx-logo-cell{border:1px solid var(--border);padding:20px;display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;}
.vx-logo-wall__item img{max-width:100%;max-height:56px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s;}
.vx-logo-cell:hover .vx-logo-wall__item img{filter:none;opacity:1;}

/* ---------- ficha de producto (p.17 del manual) ---------- */
.vx-spec{grid-template-columns:1.1fr 1fr;}
.vx-spec__title{margin:8px 0 4px;}
.vx-spec__title span{font-weight:400;}
.vx-spec__subtitle{margin-top:24px;padding-bottom:8px;border-bottom:2px solid var(--vx-black);}
.vx-spectable .elementor-icon-list-items{display:block;}
.vx-spectable .elementor-icon-list-item{
  display:block;padding:10px 12px;font-size:var(--fs-small);border:0;
}
.vx-spectable .elementor-icon-list-item:nth-child(odd){background:var(--vx-g4);}
.vx-thumbs{display:flex;gap:8px;}
.vx-thumb img{aspect-ratio:1;object-fit:cover;border:1px solid var(--border);}

/* ---------- imágenes ---------- */
.vx-img img{width:100%;height:auto;display:block;}
.vx-img--16x9 img{aspect-ratio:16/9;object-fit:cover;}
.vx-img--4x3 img{aspect-ratio:4/3;object-fit:cover;}
img,svg{max-width:100%;}

/* ---------- banda CTA ---------- */
.vx-cta{background:var(--vx-black);color:var(--text-inverse);}
.vx-cta .vx-cta__body{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.vx-cta h2,.vx-cta p{color:var(--text-inverse);}
/* [BRAND 2.3] rojo sobre negro = 4.4:1 -> solo titulares grandes */
.vx-cta .vx-cta__title{font-size:var(--fs-h1);}

/* ---------- galería ---------- */
.vx-filters .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:8px;}
.vx-filters .elementor-icon-list-item{margin:0;}
.vx-filters .elementor-icon-list-text{
  display:block;padding:8px 16px;border:1px solid var(--border);
  font-size:var(--fs-small);font-weight:500;cursor:pointer;
}
.vx-filters .elementor-icon-list-item:hover .elementor-icon-list-text{border-color:var(--vx-black);}
.vx-tile__t{font-weight:700;margin:12px 0 2px;}
.vx-tile__m{font-size:var(--fs-caption);color:var(--text-muted);margin:0;}

/* ---------- contacto ---------- */
.vx-contact__data h3{margin:20px 0 4px;font-size:1.125rem;}
.vx-contact__data h3:first-child{margin-top:0;}
.vx-formslot{border:1px dashed var(--vx-red);padding:24px;color:var(--vx-red);font-weight:500;}

/* ---------- FAQ ---------- */
.vx-faq .elementor-accordion-item{border:0;border-bottom:1px solid var(--border);}
.vx-faq .elementor-tab-title{font-weight:700;padding:20px 0;}
.vx-faq .elementor-tab-content{border:0;padding:0 0 20px;}

/* ---------- header / footer ---------- */
.vx-header{
  background:var(--vx-white);border-bottom:1px solid var(--border);
  min-height:var(--header-h);position:sticky;top:0;z-index:50;
}
/* [MANUAL] area de respeto: x/2 para el logo, x/3 para el simbolo */
.vx-header .vx-logo img{height:40px;width:auto;padding:20px 0;box-sizing:content-box;}
/* [MANUAL] minimo 150px de ancho: por debajo, usar el simbolo */
@media(max-width:480px){.vx-header .vx-logo img{height:32px;}}
.vx-footer{background:var(--vx-black);color:var(--text-inverse);}
.vx-footer a{color:var(--text-inverse);}
.vx-footer a:hover{color:var(--vx-red);}
.vx-footer h3{color:var(--text-inverse);font-size:1rem;}
.vx-footer p,.vx-footer li{color:rgba(255,255,255,.75);font-size:var(--fs-small);}
.vx-rule .elementor-divider-separator{border-top-color:var(--border);}

/* ---------- impresión: la ficha técnica debe salir bien en papel ---------- */
@media print{
  .vx-header,.vx-footer,.vx-anchorbar,.vx-cta,.vx-btn{display:none!important;}
  body{font-size:11pt;color:#000;background:#fff;}
  .vx-spec{grid-template-columns:1fr 1fr;}
  .vx-section{padding:0!important;}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}

/* ---------- paginas importadas desde el WXR ---------- */
.vx-prose{max-width:68ch;}
.vx-prose h2{margin-bottom:4px;}
.vx-prose p{margin:0 0 14px;}
.vx-prose ul{margin:0 0 16px;padding-left:20px;}
.vx-prose li{margin-bottom:6px;}
.vx-section.vx-alt{background:var(--vx-g4);}
/* pista de CTA: donde debe ir un boton de verdad */
.vx-ctahint{
  display:inline-block;font-weight:500;color:var(--vx-red);
  border:1.5px solid var(--vx-red);padding:10px 20px;margin:4px 0 16px;
}
/* hueco de contenido pendiente de Vectralis: visible a proposito */
.vx-falta{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85rem;color:var(--vx-warning);
  background:#FBF1DF;border-left:3px solid var(--vx-warning);
  padding:10px 14px;margin:0 0 16px;
}

/* ---------- modulos de imagen de las paginas importadas ---------- */
.vx-mediaband{padding-block:0!important;}
.vx-mediaband .vx-media{max-width:var(--container);margin-inline:auto;}
.vx-media img{width:100%;height:auto;display:block;}
.vx-section + .vx-mediaband{margin-top:-24px;}

/* el placeholder gris de Elementor se ve intencional, no roto */
.vx-img img{
  width:100%;height:auto;display:block;
  background:var(--vx-g4);border:1px solid var(--border);
  object-fit:cover;
}
.vx-img--16x9 img{aspect-ratio:16/9;}
.vx-img--4x3 img{aspect-ratio:4/3;}
.vx-img--1x1 img{aspect-ratio:1;}

/* split de seccion: texto + imagen */
.vx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
.vx-split__text{min-width:0;}
.vx-split__media{min-width:0;position:sticky;top:calc(var(--header-h) + 24px);}
@media(max-width:768px){
  .vx-split{grid-template-columns:1fr;}
  .vx-split__media{position:static;}
  /* en movil la imagen va primero: da contexto antes de leer */
  .vx-split__media{order:-1;}
}