/*
Theme Name: Vertex Tech
Theme URI: https://example.com/vertex-tech
Author: Vertex Tech
Description: Tema bilingüe (ES/EN) para empresas de tecnología: servidores de IA con LLM locales, planes de viabilidad, auditorías de seguridad y desarrollo web. Héroe con partículas, secciones parallax, CTAs a formulario y WhatsApp, noticias de 10 en 10, SEO integrado (metadatos por página, canonical, hreflang, Open Graph, JSON-LD) y panel para Search Console, Bing y Google Analytics 4 con Consent Mode.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vertex
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments
*/

/* ==========================================================================
   Fuentes locales (sin llamadas a Google: amigable con el RGPD)
   ========================================================================== */
@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-var.woff2") format("woff2-variations"), url("assets/fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/plex-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/plex-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/plex-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/plex-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--ink: #0E1C24;        /* fondo oscuro: el armario del servidor */
	--ink-2: #142A34;
	--ink-3: #1D3A46;
	--fog: #EEF2EF;        /* claro, ligeramente verdoso */
	--paper: #FFFFFF;
	--signal: #FFB22E;     /* ámbar: LED de estado, acción principal */
	--signal-2: #F39C12;
	--teal: #176C68;       /* enlaces sobre claro */
	--text: #13232B;
	--muted: #4C5F66;
	--on-dark: #E7EEEC;
	--on-dark-muted: #9DB2B3;
	--line: #D3DDD9;
	--line-dark: rgba(231, 238, 236, .14);
	--wa: #1A9E50;
	--wa-2: #158443;

	--font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
	--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--step--1: clamp(.84rem, .82rem + .1vw, .9rem);
	--step-0: clamp(1rem, .97rem + .15vw, 1.0625rem);
	--step-1: clamp(1.2rem, 1.12rem + .35vw, 1.4rem);
	--step-2: clamp(1.45rem, 1.3rem + .7vw, 1.9rem);
	--step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.75rem);
	--step-4: clamp(2.15rem, 1.6rem + 2.7vw, 4.1rem);

	--wrap: 1200px;
	--gutter: clamp(1.1rem, 4vw, 2.5rem);
	--section: clamp(4rem, 9vw, 7.5rem);
	--header-h: 76px;
	--radius: 4px;
	--radius-lg: 10px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.62;
	color: var(--text);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-stretch: 112%;
	font-weight: 680;
	line-height: 1.12;
	letter-spacing: -.012em;
	margin: 0 0 .6em;
	text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding: 0; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vx-skip {
	position: absolute; left: 1rem; top: -100px; z-index: 1000;
	background: var(--signal); color: var(--ink); padding: .7rem 1rem; font-weight: 600; text-decoration: none;
}
.vx-skip:focus { top: 1rem; }
.vx-main { display: block; outline: none; }
.vx-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.vx-wrap--text { max-width: calc(46rem + 2 * var(--gutter)); }
.vx-section { padding-block: var(--section); }
.vx-section--tint { background: var(--fog); }
.vx-h2 { font-size: var(--step-3); max-width: 22ch; }
.vx-h3 { font-size: var(--step-2); }

/* ==========================================================================
   Botones
   ========================================================================== */
.vx-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.vx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 48px; padding: .75rem 1.35rem;
	border: 1.5px solid transparent; border-radius: var(--radius);
	font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.vx-btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .95rem; }
.vx-btn--block { width: 100%; }
.vx-btn--primary { background: var(--signal); color: var(--ink); }
.vx-btn--primary:hover { background: var(--signal-2); color: var(--ink); }
.vx-btn--outline { border-color: currentColor; color: var(--text); background: transparent; }
.vx-btn--ghost { border-color: var(--line-dark); color: var(--on-dark); background: transparent; }
.vx-btn--wa { background: var(--wa); color: #fff; }
.vx-btn--wa:hover { background: var(--wa-2); color: #fff; }
.vx-btn--wa .vx-icon { flex: none; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.vx-header {
	position: fixed; inset: 0 0 auto; z-index: 100;
	height: var(--header-h);
	color: var(--on-dark);
	transition: background-color .25s ease, box-shadow .25s ease;
}
.admin-bar .vx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vx-header { top: 46px; } }
.vx-header.is-scrolled, .vx-header.is-open { background: rgba(14, 28, 36, .96); box-shadow: 0 1px 0 var(--line-dark); }
@supports (backdrop-filter: blur(8px)) {
	.vx-header.is-scrolled { background: rgba(14, 28, 36, .86); backdrop-filter: blur(10px); }
}
.vx-header__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; }

.vx-brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; flex: none; }
.vx-brand__logo { max-height: 44px; width: auto; }
.vx-brand__mark {
	width: 26px; height: 26px; border: 2px solid var(--signal); border-radius: 3px; position: relative; flex: none;
}
.vx-brand__mark::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: var(--signal); box-shadow: 0 -6px 0 var(--signal), 0 6px 0 var(--signal); }
.vx-brand__name { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }

.vx-nav { margin-left: auto; }
.vx-menu { list-style: none; display: flex; gap: .25rem; }
.vx-menu a {
	display: block; padding: .55rem .85rem; color: var(--on-dark); text-decoration: none; font-weight: 500;
	border-radius: var(--radius);
}
.vx-menu a:hover { background: rgba(255, 255, 255, .07); }
.vx-menu .current-menu-item > a, .vx-menu .current_page_item > a, .vx-menu .current-menu-parent > a, .vx-menu .current_page_parent > a { color: var(--signal); }
.vx-nav__extra { display: none; }

.vx-header__tools { display: flex; align-items: center; gap: .75rem; }

.vx-lang { display: inline-flex; border: 1px solid var(--line-dark); border-radius: 999px; padding: 3px; }
.vx-lang a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 30px;
	padding: 0 .55rem; border-radius: 999px; color: var(--on-dark-muted);
	font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-decoration: none;
}
.vx-lang a:hover { color: var(--on-dark); }
.vx-lang a[aria-current="true"] { background: var(--signal); color: var(--ink); }

.vx-burger {
	display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
	background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--on-dark); cursor: pointer;
}
.vx-burger .vx-burger__open { display: inline-flex; }
.vx-burger .vx-burger__close { display: none; }
.vx-header.is-open .vx-burger .vx-burger__open { display: none; }
.vx-header.is-open .vx-burger .vx-burger__close { display: inline-flex; }

@media (max-width: 980px) {
	.vx-burger { display: inline-flex; }
	.vx-header__tools { margin-left: auto; }
	.vx-nav {
		position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
		margin: 0; padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
		background: var(--ink); overflow-y: auto;
		display: flex; flex-direction: column; gap: 2rem;
		visibility: hidden; opacity: 0; transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.admin-bar .vx-nav { top: calc(var(--header-h) + 46px); }
	.vx-header.is-open .vx-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.vx-menu { flex-direction: column; gap: 0; }
	.vx-menu a {
		padding: 1rem 0; border-bottom: 1px solid var(--line-dark); border-radius: 0;
		font-family: var(--font-display); font-stretch: 112%; font-size: 1.6rem; font-weight: 600;
	}
	.vx-menu a:hover { background: none; color: var(--signal); }
	.vx-nav__extra { display: grid; gap: .75rem; }
}
@media (max-width: 600px) {
	.vx-header__cta { display: none; }
	:root { --header-h: 66px; }
}
body.vx-no-scroll { overflow: hidden; }

/* ==========================================================================
   Héroe con partículas
   ========================================================================== */
.vx-hero {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: min(100svh, 920px);
	display: flex; align-items: center;
	padding: calc(var(--header-h) + 3rem) 0 4.5rem;
	background:
		radial-gradient(60rem 40rem at 85% 20%, rgba(255, 178, 46, .10), transparent 60%),
		radial-gradient(50rem 40rem at 0% 100%, rgba(23, 108, 104, .35), transparent 60%),
		var(--ink);
	color: var(--on-dark);
}
.vx-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.vx-hero__inner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.vx-hero__kicker { color: var(--signal); font-weight: 500; margin-bottom: 1.1rem; }
.vx-hero__title {
	font-size: var(--step-4);
	font-stretch: 122%;
	font-weight: 720;
	line-height: 1.04;
	letter-spacing: -.025em;
	max-width: 17ch;
	margin-bottom: 1.4rem;
	color: #fff;
}
.vx-hero__text { font-size: var(--step-1); line-height: 1.5; color: var(--on-dark); max-width: 38rem; margin-bottom: 2rem; }

/* Panel de estado del servidor */
.vx-status {
	background: linear-gradient(180deg, rgba(29, 58, 70, .85), rgba(20, 42, 52, .92));
	border: 1px solid var(--line-dark);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.4rem 1.4rem;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
	position: relative;
}
.vx-status::before, .vx-status::after {
	/* tornillos del rack */
	content: ""; position: absolute; top: 14px; width: 7px; height: 7px; border-radius: 50%;
	background: var(--ink); box-shadow: inset 0 0 0 1px rgba(231, 238, 236, .25);
}
.vx-status::before { left: 12px; }
.vx-status::after { right: 12px; }
.vx-status__bar {
	display: flex; align-items: center; gap: .6rem; padding: 0 .9rem .9rem;
	border-bottom: 1px solid var(--line-dark); font-weight: 600; font-size: .95rem;
}
.vx-status__led { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(255, 178, 46, .18), 0 0 14px var(--signal); animation: vx-led 2.4s ease-in-out infinite; }
@keyframes vx-led { 50% { box-shadow: 0 0 0 4px rgba(255, 178, 46, .08), 0 0 4px var(--signal); } }
.vx-status__rows { margin: 0; }
.vx-status__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px dashed var(--line-dark); }
.vx-status__rows dt { color: var(--on-dark-muted); font-size: .92rem; }
.vx-status__rows dd { margin: 0; text-align: right; font-family: var(--font-display); font-stretch: 112%; font-weight: 650; color: #fff; }
.vx-status__points { list-style: none; margin-top: 1.1rem; display: grid; gap: .5rem; }
.vx-status__points li { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.vx-status__points .vx-icon { color: var(--signal); flex: none; }

@media (max-width: 900px) {
	.vx-hero { min-height: auto; }
	.vx-hero__inner { grid-template-columns: 1fr; }
	.vx-status { max-width: 34rem; }
}

/* ==========================================================================
   Índice de servicios
   ========================================================================== */
.vx-index { background: var(--fog); padding-block: var(--section); }
.vx-index__title { font-size: var(--step-3); margin-bottom: 2rem; }
.vx-index__item--main .vx-index__name { font-size: var(--step-2); }
.vx-index__item--main .vx-index__icon { background: var(--signal); color: var(--ink); }
.vx-index__list { list-style: none; border-top: 1px solid var(--line); }
.vx-index__item a {
	display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 1.5rem; align-items: center;
	padding: 1.6rem .75rem; border-bottom: 1px solid var(--line);
	color: var(--text); text-decoration: none;
	transition: background-color .18s ease;
}
.vx-index__item a:hover { background: var(--paper); }
.vx-index__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--ink); color: var(--signal); }
.vx-index__name { font-family: var(--font-display); font-stretch: 112%; font-weight: 650; font-size: var(--step-1); line-height: 1.2; }
.vx-index__short { color: var(--muted); }
.vx-index__more { font-weight: 600; color: var(--teal); white-space: nowrap; }
.vx-index__item a:hover .vx-index__more { text-decoration: underline; }
@media (max-width: 860px) {
	.vx-index__item a { grid-template-columns: 48px minmax(0, 1fr); gap: .35rem 1rem; padding: 1.3rem .25rem; }
	.vx-index__icon { width: 48px; height: 48px; grid-row: span 3; align-self: start; }
	.vx-index__short, .vx-index__more { grid-column: 2; }
}

/* ==========================================================================
   Secciones de servicio con parallax
   ========================================================================== */
.vx-service { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--section); }
.vx-service--dark { background: var(--ink); color: var(--on-dark); }
.vx-service--light { background: var(--paper); color: var(--text); }
.vx-parallax { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vx-parallax__layer { position: absolute; will-change: transform; }
.vx-parallax__photo, .vx-parallax__pattern { inset: -18% 0; background-size: cover; background-position: center; }
.vx-service--dark .vx-parallax__photo::after,
.vx-service--light .vx-parallax__photo::after { content: ""; position: absolute; inset: 0; }
.vx-service--dark .vx-parallax__photo::after { background: linear-gradient(100deg, rgba(14, 28, 36, .94) 35%, rgba(14, 28, 36, .72)); }
.vx-service--light .vx-parallax__photo::after { background: linear-gradient(100deg, rgba(255, 255, 255, .95) 35%, rgba(255, 255, 255, .8)); }
.vx-service--dark .vx-parallax__pattern {
	background-image:
		radial-gradient(40rem 26rem at 90% 30%, rgba(255, 178, 46, .09), transparent 65%),
		linear-gradient(rgba(231, 238, 236, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(231, 238, 236, .045) 1px, transparent 1px);
	background-size: auto, 48px 48px, 48px 48px;
	background-position: center;
}
.vx-service--light .vx-parallax__pattern {
	background-image: radial-gradient(rgba(23, 108, 104, .18) 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
	mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
}
.vx-parallax__glyph { right: -6%; top: 6%; width: min(520px, 60vw); opacity: .07; }
.vx-service--light .vx-parallax__glyph { opacity: .06; color: var(--teal); }
.vx-service--dark .vx-parallax__glyph { color: var(--signal); }
.vx-service--flip .vx-parallax__glyph { right: auto; left: -6%; }
.vx-parallax__glyph .vx-icon { width: 100%; height: auto; stroke-width: .6; }

.vx-service__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.vx-service--flip .vx-service__intro { order: 2; }
.vx-service__icon {
	display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 1.4rem;
	border-radius: var(--radius-lg); border: 1px solid currentColor; color: var(--signal);
}
.vx-service--light .vx-service__icon { color: var(--teal); }
.vx-service h2 { font-size: var(--step-3); max-width: 16ch; }
.vx-service--dark h2 { color: #fff; }
.vx-service__lead { font-size: var(--step-1); line-height: 1.5; margin-bottom: 2rem; max-width: 36rem; }
.vx-service--dark .vx-service__lead { color: var(--on-dark); }
.vx-service--light .vx-service__lead { color: var(--muted); }

.vx-checklist { list-style: none; display: grid; gap: 0; }
.vx-checklist li { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--line); }
.vx-checklist li:last-child { border-bottom: 1px solid var(--line); }
.vx-service--dark .vx-checklist li { border-color: var(--line-dark); }
.vx-checklist .vx-icon { flex: none; margin-top: .15rem; color: var(--teal); }
.vx-service--dark .vx-checklist .vx-icon { color: var(--signal); }

.vx-sectors { margin-top: 2rem; }
.vx-sectors h3 { font-size: 1rem; font-family: var(--font-body); font-stretch: 100%; font-weight: 600; margin-bottom: .8rem; color: var(--on-dark-muted); }
.vx-sectors ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.vx-sectors li { padding: .4rem .85rem; border: 1px solid var(--line-dark); border-radius: 999px; font-size: .92rem; }

@media (max-width: 900px) {
	.vx-service__grid { grid-template-columns: 1fr; }
	.vx-service--flip .vx-service__intro { order: 0; }
	.vx-parallax__glyph { width: 80vw; top: auto; bottom: -10%; }
}

/* ==========================================================================
   Bloques de IA: ventajas, comparativa, casos de uso y otros servicios
   ========================================================================== */
.vx-service .vx-block-title, .vx-block-title { font-size: var(--step-3); max-width: 24ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.vx-service__label { font-family: var(--font-body); font-stretch: 100%; font-size: 1rem; font-weight: 600; color: var(--on-dark-muted); margin-bottom: .4rem; }

.vx-features-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.vx-features-grid li { padding: 1.75rem 1.75rem 1.75rem 0; border-bottom: 1px solid var(--line); }
.vx-features-grid li:not(:nth-child(3n + 1)) { padding-left: 1.75rem; border-left: 1px solid var(--line); }
.vx-features-grid__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--ink); color: var(--signal); margin-bottom: 1rem; }
.vx-features-grid h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.vx-features-grid p { margin: 0; color: var(--muted); }
.vx-service--dark .vx-features-grid, .vx-service--dark .vx-features-grid li { border-color: var(--line-dark); }
.vx-service--dark .vx-features-grid h3 { color: #fff; }
.vx-service--dark .vx-features-grid p { color: var(--on-dark-muted); }
.vx-service--dark .vx-features-grid__icon { background: transparent; border: 1px solid var(--line-dark); }
@media (max-width: 900px) {
	.vx-features-grid { grid-template-columns: 1fr 1fr; }
	.vx-features-grid li, .vx-features-grid li:not(:nth-child(3n + 1)) { padding: 1.5rem 1.25rem 1.5rem 0; border-left: 0; }
	.vx-features-grid li:nth-child(2n) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
	.vx-service--dark .vx-features-grid li:nth-child(2n) { border-left-color: var(--line-dark); }
}
@media (max-width: 560px) {
	.vx-features-grid { grid-template-columns: 1fr; }
	.vx-features-grid li, .vx-features-grid li:nth-child(2n) { padding: 1.4rem 0; border-left: 0; }
}

.vx-compare { background: var(--fog); padding-block: var(--section); }
.vx-compare__table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; }
.vx-compare__table th, .vx-compare__table td { padding: 1rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.vx-compare__table tbody tr:last-child > * { border-bottom: 0; }
.vx-compare__table thead th { font-family: var(--font-display); font-stretch: 112%; font-weight: 650; font-size: var(--step-1); }
.vx-compare__table tbody th { font-weight: 600; width: 26%; }
.vx-compare__table td { color: var(--muted); width: 37%; }
.vx-compare__table .is-ours { background: var(--ink); color: var(--on-dark); border-bottom-color: var(--line-dark); }
.vx-compare__table thead .is-ours { color: var(--signal); }
.vx-compare__table td.is-ours { position: relative; padding-left: 2.75rem; }
.vx-compare__table td.is-ours .vx-icon { position: absolute; left: 1.15rem; top: 1.2rem; color: var(--signal); }
.vx-compare__note { margin: 1.5rem 0 0; color: var(--muted); max-width: 52rem; }
@media (max-width: 760px) {
	.vx-compare__table, .vx-compare__table tbody, .vx-compare__table tr, .vx-compare__table th, .vx-compare__table td { display: block; width: 100%; }
	.vx-compare__table { background: transparent; }
	.vx-compare__table thead { display: none; }
	.vx-compare__table tbody th, .vx-compare__table td { width: 100%; }
	.vx-compare__table tbody th { font-family: var(--font-display); font-stretch: 112%; font-size: var(--step-1); }
	.vx-compare__table tr { background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem; }
	.vx-compare__table tbody th { border-bottom: 1px solid var(--line); }
	.vx-compare__table td::before { content: attr(data-label); display: block; font-size: var(--step--1); font-weight: 600; color: var(--text); margin-bottom: .2rem; }
	.vx-compare__table td.is-ours::before { color: var(--signal); }
	.vx-compare__table td.is-ours .vx-icon { top: 2.35rem; }
	.vx-compare__table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
	.vx-compare__table tbody tr > *:last-child { border-bottom: 0 !important; }
}

.vx-others__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.vx-other { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.vx-other__media { margin: calc(-1 * clamp(1.4rem, 3vw, 2rem)) calc(-1 * clamp(1.4rem, 3vw, 2rem)) 1.5rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.vx-other__media img { width: 100%; height: 100%; object-fit: cover; }
.vx-other__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-lg); border: 1px solid currentColor; color: var(--teal); margin-bottom: 1.2rem; }
.vx-other h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.vx-other > p { color: var(--muted); }
.vx-checklist--compact li { padding: .65rem 0; font-size: .96rem; }
.vx-other .vx-checklist { margin-bottom: 1.5rem; }
.vx-other__cta { margin-top: auto; align-self: flex-start; }
.vx-other__cta:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 960px) { .vx-others__grid { grid-template-columns: 1fr; max-width: 40rem; } }

/* ==========================================================================
   Bandas CTA
   ========================================================================== */
.vx-cta { background: var(--signal); color: var(--ink); padding-block: clamp(2.5rem, 6vw, 4rem); }
.vx-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.vx-cta h2 { font-size: var(--step-2); margin-bottom: .35rem; max-width: 24ch; }
.vx-cta p { margin: 0; max-width: 40rem; }
.vx-cta .vx-btn--primary { background: var(--ink); color: #fff; }
.vx-cta .vx-btn--primary:hover { background: var(--ink-3); color: #fff; }
.vx-cta--final { background: var(--ink-2); color: var(--on-dark); }
.vx-cta--final h2 { color: #fff; }
.vx-cta--final .vx-btn--primary { background: var(--signal); color: var(--ink); }
.vx-cta--final .vx-btn--primary:hover { background: var(--signal-2); color: var(--ink); }

/* ==========================================================================
   Proceso (secuencia numerada)
   ========================================================================== */
.vx-process { padding-block: var(--section); background: var(--fog); }
.vx-process h2 { font-size: var(--step-3); margin-bottom: 2.5rem; }
.vx-process__steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
.vx-process__steps li { counter-increment: step; position: relative; padding-top: 3.6rem; }
.vx-process__steps li::before {
	content: counter(step);
	position: absolute; top: 0; left: 0; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
	border-radius: 50%; background: var(--ink); color: var(--signal);
	font-family: var(--font-display); font-stretch: 112%; font-weight: 700;
}
.vx-process__steps li::after { content: ""; position: absolute; top: 1.3rem; left: 3.2rem; right: -1.4rem; height: 1px; background: var(--line); }
.vx-process__steps li:last-child::after { display: none; }
.vx-process__steps h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.vx-process__steps p { color: var(--muted); margin: 0; }
@media (max-width: 1020px) {
	.vx-process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vx-process__steps li::after { display: none; }
}
@media (max-width: 860px) {
	.vx-process__steps { grid-template-columns: 1fr 1fr; }
	.vx-process__steps li::after { display: none; }
}
@media (max-width: 520px) {
	.vx-process__steps { grid-template-columns: 1fr; gap: 1.5rem; }
	.vx-process__steps li { padding: .3rem 0 0 3.6rem; }
}

/* ==========================================================================
   Noticias
   ========================================================================== */
.vx-latest { padding-block: var(--section); }
.vx-latest__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.vx-latest__head h2 { font-size: var(--step-3); margin: 0; }
.vx-link { font-weight: 600; }

.vx-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.vx-news-card__link { display: block; color: var(--text); text-decoration: none; }
.vx-news-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink-2); margin-bottom: 1rem; }
.vx-news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vx-news-card__link:hover img { transform: scale(1.03); }
.vx-news-card__placeholder {
	width: 100%; height: 100%; display: grid; place-items: center; color: var(--signal);
	background: linear-gradient(rgba(231, 238, 236, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(231, 238, 236, .05) 1px, transparent 1px) 0 0 / 28px 28px, var(--ink-2);
}
.vx-news-card__title { font-size: var(--step-1); line-height: 1.25; margin: 0; }
.vx-news-card__link:hover .vx-news-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.vx-news-card__link:focus-visible { outline-offset: 6px; }

.vx-pagination { margin-top: 3.5rem; }
.vx-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.vx-pagination a, .vx-pagination span.current, .vx-pagination span.dots {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem;
	border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 600;
}
.vx-pagination a:hover { border-color: var(--text); }
.vx-pagination span.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.vx-pagination span.dots { border: 0; }
.vx-empty { max-width: 36rem; }

/* ==========================================================================
   Cabecera de página interior
   ========================================================================== */
.vx-pagehead {
	background:
		linear-gradient(rgba(231, 238, 236, .04) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(231, 238, 236, .04) 1px, transparent 1px) 0 0 / 48px 48px,
		var(--ink);
	color: var(--on-dark);
	padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) 0 clamp(2.5rem, 6vw, 4rem);
}
.vx-pagehead__title { font-size: var(--step-4); font-stretch: 120%; color: #fff; margin-bottom: .5rem; max-width: 20ch; }
.vx-pagehead__intro { font-size: var(--step-1); color: var(--on-dark-muted); max-width: 40rem; margin: 0; }

/* ==========================================================================
   Entrada
   ========================================================================== */
.vx-article__head {
	background: var(--ink); color: var(--on-dark);
	padding: calc(var(--header-h) + clamp(2rem, 6vw, 4rem)) 0 clamp(2rem, 5vw, 3rem);
}
.vx-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--on-dark-muted); text-decoration: none; font-weight: 500; margin-bottom: 1.5rem; }
.vx-back:hover { color: var(--signal); }
.vx-article__title { font-size: var(--step-3); color: #fff; margin-bottom: .75rem; }
.vx-article__meta { color: var(--on-dark-muted); margin: 0; font-size: var(--step--1); }
.vx-article__media { margin: 0 auto; padding-top: 2rem; }
.vx-article__media img { width: 100%; border-radius: var(--radius-lg); max-height: 620px; object-fit: cover; }
.vx-article .vx-prose { padding-block: clamp(2rem, 5vw, 3.5rem); }

.vx-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: var(--section); }
.vx-postnav a { display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.35; }
.vx-postnav a:hover { border-color: var(--text); }
.vx-postnav span { display: block; font-weight: 400; color: var(--muted); font-size: var(--step--1); margin-bottom: .25rem; }
.vx-postnav__next { grid-column: 2; text-align: right; }
@media (max-width: 600px) { .vx-postnav { grid-template-columns: 1fr; } .vx-postnav__next { grid-column: 1; } }

/* Contenido del editor */
.vx-prose { font-size: var(--step-0); }
.vx-prose > * + * { margin-top: 1.1em; }
.vx-prose h2 { font-size: var(--step-2); margin-top: 2em; }
.vx-prose h3 { font-size: var(--step-1); margin-top: 1.6em; }
.vx-prose p, .vx-prose li { max-width: 70ch; }
.vx-prose ul, .vx-prose ol { padding-left: 1.3rem; }
.vx-prose li + li { margin-top: .4em; }
.vx-prose img { border-radius: var(--radius-lg); }
.vx-prose blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.25rem; border-left: 3px solid var(--signal); font-size: var(--step-1); }
.vx-prose pre { overflow-x: auto; background: var(--ink); color: var(--on-dark); padding: 1rem 1.25rem; border-radius: var(--radius-lg); font-size: .9rem; }
.vx-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.vx-prose th, .vx-prose td { border-bottom: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }
.vx-prose figcaption { color: var(--muted); font-size: var(--step--1); margin-top: .5rem; }
.alignwide { max-width: min(1100px, 100vw - 2 * var(--gutter)); margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }

/* ==========================================================================
   Nosotros
   ========================================================================== */
.vx-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.vx-about__statement { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--step-2); line-height: 1.25; margin: 0; }
.vx-about__text { color: var(--muted); }
.vx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(3rem, 7vw, 5rem) 0 0; border-top: 1px solid var(--line); }
.vx-facts div { padding: 1.5rem 1.5rem 0 0; display: flex; flex-direction: column-reverse; gap: .25rem; }
.vx-facts div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.vx-facts dt { color: var(--muted); }
.vx-facts dd { margin: 0; font-family: var(--font-display); font-stretch: 120%; font-weight: 700; font-size: var(--step-3); line-height: 1; color: var(--teal); }
.vx-areas { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 2rem 1.5rem; margin-top: 2.5rem; }
.vx-areas__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--ink); color: var(--signal); margin-bottom: 1rem; }
.vx-areas h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.vx-areas p { color: var(--muted); margin: 0; font-size: .97rem; }
.vx-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 5rem); }
.vx-values__list { margin: 0; }
.vx-values__list div { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.vx-values__list dt { font-family: var(--font-display); font-stretch: 112%; font-weight: 650; font-size: var(--step-1); }
.vx-values__list dd { margin: 0; color: var(--muted); }
@media (max-width: 860px) {
	.vx-about__grid, .vx-values { grid-template-columns: 1fr; }
	.vx-values__list div { grid-template-columns: 1fr; gap: .3rem; }
}
@media (max-width: 560px) {
	.vx-facts { grid-template-columns: 1fr; }
	.vx-facts div, .vx-facts div + div { padding: 1.1rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   Contacto y formulario
   ========================================================================== */
.vx-contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.vx-channels { list-style: none; display: grid; gap: 0; }
.vx-channels li { display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.vx-channels li:last-child { border-bottom: 1px solid var(--line); }
.vx-channels__icon { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--fog); color: var(--teal); }
.vx-channels__icon--wa { background: var(--wa); color: #fff; }
.vx-channels__label { font-size: var(--step--1); font-weight: 400; color: var(--muted); }
.vx-channels a { font-weight: 600; font-size: var(--step-1); color: var(--text); text-decoration: none; word-break: break-word; }
.vx-channels a:hover { color: var(--teal); text-decoration: underline; }
.vx-contact__extra { margin-top: 2rem; color: var(--muted); }
.vx-contact__form { background: var(--fog); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }
@media (max-width: 900px) { .vx-contact__grid { grid-template-columns: 1fr; } }

.vx-form { display: grid; gap: 1.1rem; }
.vx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .vx-form__row { grid-template-columns: 1fr; } }
.vx-field { display: grid; gap: .4rem; }
.vx-field label { font-weight: 500; font-size: .96rem; }
.vx-req { color: #B4441A; }
.vx-field input[type="text"], .vx-field input[type="email"], .vx-field input[type="tel"], .vx-field select, .vx-field textarea {
	width: 100%; min-height: 48px; padding: .7rem .9rem;
	background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
	font-size: 1rem; /* evita zoom en iOS */
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vx-field textarea { min-height: 150px; resize: vertical; }
.vx-field input:focus, .vx-field select:focus, .vx-field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23, 108, 104, .2); }
.vx-field.is-invalid input, .vx-field.is-invalid textarea, .vx-field.is-invalid select { border-color: #B4441A; }
.vx-field--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.vx-field--check input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--teal); }
.vx-field--check label { font-weight: 400; font-size: .93rem; color: var(--muted); }
.vx-field--check.is-invalid label { color: #B4441A; }
.vx-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vx-form__notice { padding: 1rem 1.15rem; border-radius: var(--radius); font-weight: 500; outline: none; }
.vx-form__notice.is-ok { background: #DDF2E4; color: #0F5A2C; border-left: 4px solid var(--wa); }
.vx-form__notice.is-error { background: #FBE6DC; color: #8A2E0C; border-left: 4px solid #B4441A; }

/* ==========================================================================
   Términos
   ========================================================================== */
.vx-legal { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.vx-legal > .vx-admin-note { grid-column: 1 / -1; }
.vx-legal--custom { grid-template-columns: minmax(0, 46rem); }
.vx-legal__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); font-size: .95rem; }
.vx-legal__toc ol { padding-left: 1.2rem; display: grid; gap: .5rem; }
.vx-legal__toc a { color: var(--muted); text-decoration: none; }
.vx-legal__toc a:hover { color: var(--teal); text-decoration: underline; }
.vx-legal section + section { margin-top: 2.5rem; }
.vx-legal section h2 { margin-top: 0; }
.vx-admin-note { background: #FFF4DE; border-left: 4px solid var(--signal); padding: .9rem 1rem; border-radius: var(--radius); margin: 0; }
@media (max-width: 860px) {
	.vx-legal { grid-template-columns: 1fr; }
	.vx-legal__toc { position: static; padding: 1rem 1.25rem; background: var(--fog); border-radius: var(--radius-lg); }
}

/* ==========================================================================
   Pie
   ========================================================================== */
.vx-footer { background: var(--ink); color: var(--on-dark-muted); padding-top: clamp(3rem, 7vw, 5rem); font-size: .97rem; }
.vx-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: 2.5rem; padding-bottom: 3rem; }
.vx-footer .vx-brand { color: #fff; margin-bottom: 1rem; }
.vx-footer__brand p { max-width: 30rem; margin: 0; }
.vx-footer__title { font-family: var(--font-body); font-stretch: 100%; font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }
.vx-footer__list { list-style: none; display: grid; gap: .7rem; }
.vx-footer__list li { display: flex; gap: .6rem; align-items: flex-start; }
.vx-footer__list .vx-icon { flex: none; margin-top: .2rem; color: var(--signal); }
.vx-footer a { color: var(--on-dark); text-decoration: none; }
.vx-footer a:hover { color: var(--signal); text-decoration: underline; }
.vx-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); font-size: .9rem; }
.vx-footer__bottom p { margin: 0; }
@media (max-width: 860px) { .vx-footer__grid { grid-template-columns: 1fr 1fr; } .vx-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .vx-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   WhatsApp flotante y aviso de cookies
   ========================================================================== */
.vx-wa-float {
	position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 90;
	width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
	background: var(--wa); color: #fff; box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .45);
	transition: transform .2s ease, bottom .25s ease;
}
.vx-wa-float:hover { transform: scale(1.06); background: var(--wa-2); }
body.has-cookie-banner .vx-wa-float { bottom: calc(9rem + env(safe-area-inset-bottom)); }

.vx-cookies {
	position: fixed; z-index: 95; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); max-width: 30rem;
	background: var(--ink-2); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
	padding: 1.15rem 1.25rem; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); font-size: .93rem;
}
.vx-cookies[hidden] { display: none !important; }
.vx-cookies p { margin-bottom: .9rem; }
.vx-cookies a { color: var(--signal); }
.vx-cookies__actions { display: flex; gap: .6rem; }
.vx-cookies__actions .vx-btn { flex: 1; }
@media (min-width: 900px) {
	.vx-cookies { left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 62rem; display: flex; align-items: center; gap: 1.5rem; }
	.vx-cookies p { margin: 0; flex: 1; }
	.vx-cookies__actions { flex: none; }
	body.has-cookie-banner .vx-wa-float { bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) { .vx-cookies { left: .75rem; right: .75rem; max-width: none; } }
@media (max-width: 899px) { body.has-cookie-banner .vx-wa-float { display: none; } }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.vx-parallax__layer { transform: none !important; }
}

/* Impresión */
@media print {
	.vx-header, .vx-footer, .vx-wa-float, .vx-cookies, .vx-cta, .vx-hero__canvas { display: none !important; }
	.vx-pagehead, .vx-article__head { background: none; color: #000; padding-top: 1rem; }
	.vx-pagehead__title, .vx-article__title { color: #000; }
}