/* ============================================================
   GROWVANZ · SISTEMA DE DISEÑO
   Archivo único. Todo con prefijo .gv-
   ============================================================ */

/* ══════════════════ TIPOGRAFÍAS ══════════════════ */
/* Alojadas en el propio dominio: el navegador ya no pide nada a Google.
   Son los mismos archivos variables que servía Google Fonts, renombrados.
   El unicode-range es el del subconjunto latino de su CSS oficial.
   font-optical-sizing no se declara: su valor inicial ya es auto, que es
   lo que necesita el eje opsz de Source Serif 4. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:75% 125%;
  font-display:swap;
  src:url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Solo el peso 400: es el único que usan .gv-lead, .gv-imp p, las citas y
   la entradilla legal. Google servía además un 600 que no se usaba. */
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ── Imagen por defecto ──
     La heredan todas las secciones que no declaren la suya.
     Para cambiarla en una sección se declara --gv-img en su atributo style,
     apuntando al archivo de esa sección. */
  --gv-img:url('/img/fondo-tecnico.svg');

  /* ── Color · extraídos de la marca ── */
  --gv-ink:#0F172A;       /* fondo de cabecera, pie y secciones oscuras */
  --gv-ink2:#16213F;      /* variante para desplegables */
  --gv-blue:#2149DD;      /* azul del logo. Acentos y filetes */
  --gv-cta:#0067FF;       /* azul del botón. SOLO para botones de acción */
  --gv-cta-d:#0052CC;     /* hover del botón */
  --gv-bright:#2F6BFF;
  --gv-soft:#EDF2FD;
  --gv-soft2:#E3EBFB;
  --gv-line:#D3DFF6;
  --gv-paper:#FBFCFE;
  --gv-brass:#9C7A33;
  --gv-brass-l:#C9A85E;
  --gv-mute:#5B6B8C;

  /* ── Cristal del sistema ──────────────────────────────────────────────
     Un solo juego de valores para los dos vidrios de la web: el orbe del
     hero de Inicio, que es CSS, y el núcleo del hero de Servicios, que lo
     dibuja Three. Van en canales RGB sueltos para poder darles opacidad
     distinta en cada capa, y el motor 3D los lee de aquí al arrancar.
     Cambiar el azul del cristal en toda la web es cambiarlo una vez. */
  --gv-cristal-base:168,206,242;      /* color del vidrio */
  --gv-cristal-op:0.19;               /* cuánto cuerpo tiene */
  --gv-cristal-borde:159,201,255;     /* canto encendido, tipo Fresnel */
  --gv-cristal-interior:46,107,184;   /* relleno interior, siempre aditivo */
  --gv-cristal-halo:150,198,255;      /* resplandor exterior */
  --gv-cristal-espejo:226,240,255;    /* reflejo especular */
  --gv-cristal-malla:150,180,235;     /* meridianos y paralelos */

  /* ── Tipografía ── */
  --gv-display:'Archivo',system-ui,-apple-system,sans-serif;
  --gv-serif:'Source Serif 4',Georgia,serif;

  /* ── Ritmo ── */
  --gv-max:1180px;
  --gv-pad:clamp(20px,5vw,40px);
  --gv-sec:clamp(72px,9vw,128px);
  --gv-r:4px;
  --gv-rbtn:25px;
  --gv-head:74px;

  /* ── Escala tipográfica ──
     Fuente de verdad de cada nivel. Los tamaños crecen de forma continua con
     el ancho, no a saltos: el tramo recto va de 768 a 1280 px y fuera de ahí
     lo cierran los topes del clamp. Un componente puede pedir otra medida con
     una regla propia de clase, que gana por especificidad sin !important. */
  --gv-text-base:clamp(16px,.29vw + 14.3px,18px);   /* 16 · 16,5 · 17 · 18 */
  --gv-text-small:14.5px;                           /* datos auxiliares que sí suben */
  --gv-text-large:clamp(17.5px,calc(.45vw + 14.5px),21px);
  --gv-lead-size:var(--gv-text-large);              /* 17,5 · 18 · 18,8 · 20 · 21 */
  --gv-title-1:clamp(37px,5.6vw,65px);
  --gv-title-2:clamp(29px,3.9vw,45px);
  --gv-title-3:clamp(19px,.35vw + 15.5px,20.5px);
  /* Excepción medida, no duplicación: en los heroes con creativo el titular
     vive en media columna y el global de 65 px partiría sus renglones. El
     tope de 38,5 px es el máximo con el que la fila más larga de Inicio
     —«la inversión de todo el mes.»— sigue cabiendo en una sola línea. */
  --gv-title-1-hero:clamp(29px,2.7vw,38.5px);

  /* ── Escala del contenido interior ──
     Los heroes conservan la suya: --gv-title-1, --gv-title-1-hero,
     --gv-lead-size y --gv-text-base siguen intactas y nadie las toca aquí.
     Estas cuatro solo las consumen las secciones .gv-sec, de modo que bajar
     la escala de los interiores no puede alcanzar a ningún hero.
     Tramo recto de 768 a 1200 px; fuera lo cierran los topes. */
  --gv-in-title-2:clamp(28px,calc(1.389vw + 20.33px),38px);  /* 28 · 31 · 34,5 · 37 */
  --gv-in-title-3:clamp(18px,calc(.3vw + 15.7px),20.5px);    /* 18 · 18 · 18,8 · 19,3 */
  --gv-in-lead:clamp(16.5px,calc(.25vw + 14.6px),18px);      /* 16,5 · 16,5 · 17,2 · 17,6 */
  --gv-in-text:clamp(16px,calc(.15vw + 14.8px),17px);        /* 16 · 16 · 16,3 · 16,6 */
  --gv-in-cta:clamp(28px,calc(1.28vw + 21.2px),37px);        /* 28 · 31 · 34,3 · 36,6 */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--gv-head) + 16px)}
body{
  margin:0;padding:0;
  font-family:var(--gv-display);
  color:var(--gv-ink);
  background:var(--gv-paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
p,h1,h2,h3,h4,ul,li,figure,blockquote,address{margin:0;padding:0}
/* Valor general para los párrafos que no pertenecen a un componente con
   medida propia. Especificidad de etiqueta: cualquier clase lo sobreescribe. */
p{font-size:var(--gv-text-base)}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
address{font-style:normal}
:focus-visible{outline:2px solid var(--gv-bright);outline-offset:3px;border-radius:2px}

.gv-skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--gv-blue);padding:12px 20px;border-radius:var(--gv-r);z-index:200;font-weight:600}
.gv-skip:focus{left:16px}

/* ══════════════════ CABECERA FIJA ══════════════════ */
.gv-header{
  position:sticky;top:0;z-index:100;
  background:var(--gv-ink);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:box-shadow .25s ease,background .25s ease;
}
.gv-header--scroll{
  background:rgba(15,23,42,.95);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 12px 34px -24px rgba(0,0,0,.9);
}
.gv-header-in{
  max-width:var(--gv-max);margin:0 auto;
  height:var(--gv-head);
  padding:0 var(--gv-pad);
  display:flex;align-items:center;gap:clamp(18px,3vw,44px);
}
.gv-logo{flex:0 0 auto}
.gv-logo img{height:24.2px;width:auto}

.gv-nav{margin-left:auto}
.gv-nav > ul{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.gv-navlink{
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  font-size:16.5px;font-weight:500;letter-spacing:-.005em;
  color:#CBD5E5;padding:9px 0;position:relative;
  transition:color .18s ease;
}
.gv-navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--gv-cta);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.gv-navlink:hover{color:#fff}
.gv-navlink:hover::after,.gv-navlink.gv-nav-on::after{transform:scaleX(1)}
.gv-navlink.gv-nav-on{color:#5D9EFF;font-weight:600}

/* Submenú de sectores */
.gv-has-sub{position:relative}
.gv-sub{
  position:absolute;top:100%;left:-18px;min-width:262px;
  background:var(--gv-ink2);border:1px solid rgba(255,255,255,.14);border-radius:var(--gv-r);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.7);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.gv-has-sub:hover .gv-sub,.gv-has-sub:focus-within .gv-sub{opacity:1;visibility:visible;transform:translateY(0)}
.gv-sub a{display:block;padding:10px 14px;font-size:15px;border-radius:3px;color:#A9BCE4;transition:background .16s ease,color .16s ease}
.gv-sub a:hover{background:rgba(255,255,255,.07);color:#fff}

/* Segundo nivel: especialidades de clínicas.
   Escritorio: panel lateral con :hover y :focus-within.
   Móvil: la fila lleva un botón que despliega la lista debajo. */
.gv-sub-fila{position:relative}
.gv-sub-fila > a{display:flex;align-items:center;gap:8px}
.gv-sub-mas{display:inline-flex;margin-left:auto;transform:rotate(-90deg);opacity:.72}
.gv-sub2-btn{display:none}
.gv-sub2{
  position:absolute;top:-8px;left:calc(100% + 6px);z-index:70;min-width:296px;
  margin:0;padding:8px;list-style:none;
  background:var(--gv-ink2);border:1px solid rgba(255,255,255,.14);border-radius:var(--gv-r);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* Puente invisible: la pequeña separación no debe cerrar el panel. */
.gv-sub2::before{content:"";position:absolute;top:0;bottom:0;left:-10px;width:10px}
.gv-sub-fila:hover .gv-sub2,.gv-sub-fila:focus-within .gv-sub2{opacity:1;visibility:visible;transform:translateX(0)}
/* Escape cierra el panel aunque el foco vuelva al enlace de la fila. */
.gv-sub-fila.gv-sub2-cerrado .gv-sub2{opacity:0;visibility:hidden;transform:translateX(-6px)}
.gv-sub2 a{display:block;padding:10px 14px;font-size:15px;border-radius:3px;color:#A9BCE4;transition:background .16s ease,color .16s ease}
.gv-sub2 a:hover{background:rgba(255,255,255,.07);color:#fff}
.gv-sub2 a:focus-visible,.gv-sub-fila > a:focus-visible{outline:2px solid var(--gv-bright);outline-offset:2px}

/* En pantallas intermedias el panel se abre hacia la izquierda. */
@media (max-width:1200px){
  .gv-sub2{left:auto;right:calc(100% + 6px)}
  .gv-sub2::before{left:auto;right:-10px}
  .gv-sub-mas{transform:rotate(90deg)}
}

/* Móvil: sin panel lateral, lista desplegable bajo la fila. */
.gv-menu-movil .gv-sub-fila{display:flex;align-items:center;flex-wrap:wrap}
.gv-menu-movil .gv-sub-fila > a{flex:1 1 auto;min-width:0}
.gv-menu-movil .gv-sub-mas{display:none}
.gv-menu-movil .gv-sub2-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;margin-left:8px;padding:0;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:var(--gv-r);
  color:#A9BCE4;
}
.gv-menu-movil .gv-sub2-btn svg{transition:transform .2s ease}
.gv-menu-movil .gv-sub2-btn[aria-expanded="true"]{color:#fff}
.gv-menu-movil .gv-sub2-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.gv-menu-movil .gv-sub2-btn:focus-visible{outline:2px solid var(--gv-bright);outline-offset:2px}
.gv-menu-movil .gv-sub2{
  position:static;flex:1 0 100%;min-width:0;display:none;
  background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;
  padding:0 0 6px 16px;transition:none;
}
.gv-menu-movil .gv-sub2::before{content:none}
.gv-menu-movil .gv-sub2-btn[aria-expanded="true"] ~ .gv-sub2{display:grid}
.gv-menu-movil .gv-sub2 a{padding:8px 0}

@media (prefers-reduced-motion:reduce){
  .gv-sub2{transition:none}
  .gv-menu-movil .gv-sub2-btn svg{transition:none}
}

.gv-header-cta{flex:0 0 auto}
.gv-btn--sm{padding:10px 20px;font-size:15px}

/* Hamburguesa */
.gv-burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.22);background:transparent;border-radius:var(--gv-r);cursor:pointer;padding:0;place-items:center;gap:4px;margin-left:auto}
.gv-burger span{display:block;width:17px;height:1.6px;background:#fff;transition:transform .22s ease,opacity .22s ease}
.gv-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.gv-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.gv-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.gv-menu-movil{border-top:1px solid rgba(255,255,255,.10);background:var(--gv-ink);padding:18px var(--gv-pad) 28px}
.gv-menu-movil ul{display:grid;gap:2px}
.gv-menu-movil .gv-navlink{font-size:17px;padding:12px 0;width:100%}
.gv-menu-movil .gv-navlink::after{display:none}
.gv-menu-movil .gv-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 8px 14px;min-width:0}
.gv-menu-movil .gv-sub a{padding:8px 0}
.gv-menu-movil .gv-btn{margin-top:18px;width:100%;justify-content:center}

/* ══════════════════ TRAMA Y DUOTONO ══════════════════ */
.gv-mesh{position:relative;isolation:isolate}
.gv-mesh::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 20%,#000 0%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 70% 20%,#000 0%,transparent 78%);
}
.gv-duo{position:absolute;inset:0;overflow:hidden;background:var(--gv-ink)}
.gv-duo::before{content:"";position:absolute;inset:0;background-image:var(--gv-img,none);background-size:cover;background-position:center;filter:grayscale(.9) contrast(1.02) brightness(1.06)}
.gv-duo::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(14,32,72,.72) 0%,rgba(22,46,102,.56) 48%,rgba(35,74,190,.42) 100%);mix-blend-mode:multiply}

/* ══════════════════ SECCIONES ══════════════════ */
.gv-sec{padding:var(--gv-sec) var(--gv-pad);position:relative}
.gv-wrap{max-width:var(--gv-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr)}

.gv-sec--paper{background:var(--gv-paper)}
.gv-sec--soft{background:linear-gradient(180deg,var(--gv-soft) 0%,#F4F7FE 100%)}
.gv-sec--tint{background:var(--gv-soft2)}
.gv-sec--dark{background:var(--gv-ink);color:#fff}
.gv-sec--dark .gv-eyebrow{color:#8CA8EC}
.gv-sec--dark .gv-kicker-num > span{color:var(--gv-brass-l)}
.gv-sec--dark .gv-kicker-num > i{border-top-color:rgba(255,255,255,.16)}
.gv-sec--dark .gv-lead{color:#D6E0F5}
.gv-sec--dark .gv-p{color:#E1E8F5}

/* ══════════════════ TIPOGRAFÍA ══════════════════ */
.gv-h1{font-size:var(--gv-title-1);font-weight:700;font-stretch:112%;line-height:1.05;letter-spacing:-.022em;text-wrap:balance}
/* ── Cabecera inline de sección ──
   Sustituye al raíl vertical: número en latón, filete corto y kicker, en una
   sola línea sobre el titular. */
.gv-kicker-num{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.gv-kicker-num > span{color:var(--gv-brass);font-variant-numeric:tabular-nums}
.gv-kicker-num > i{width:14px;height:0;border-top:1px solid var(--gv-line)}

.gv-h2{font-size:var(--gv-title-2);font-weight:700;font-stretch:110%;line-height:1.12;letter-spacing:-.018em;text-wrap:balance;max-width:19ch}
.gv-h3{font-size:var(--gv-title-3);font-weight:600;font-stretch:106%;line-height:1.25;letter-spacing:-.01em}
.gv-lead{font-family:var(--gv-serif);font-size:var(--gv-lead-size);line-height:1.62;color:#20325C;max-width:60ch}
.gv-p{font-size:var(--gv-text-base);line-height:1.66;color:var(--gv-mute);max-width:64ch}

/* ── Escala del contenido interior ──
   Solo dentro de .gv-sec, nunca dentro de .gv-hero. Va aquí, antes de los
   componentes, para que cualquier excepción de componente siga ganando. */
.gv-sec .gv-h2{font-size:var(--gv-in-title-2);line-height:1.12}
.gv-sec .gv-h3{font-size:var(--gv-in-title-3)}
.gv-sec .gv-lead{font-size:var(--gv-in-lead);line-height:1.6}
.gv-sec .gv-p{font-size:var(--gv-in-text);line-height:1.6}
.gv-p + .gv-p{margin-top:16px}
.gv-eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gv-blue);margin-bottom:18px}
.gv-intro{margin-bottom:clamp(38px,5vw,60px)}
.gv-intro .gv-p{margin-top:20px}
/* Ese margen separa la entradilla del componente que viene detrás. Cuando la
   entradilla cierra la columna no hay nada de lo que separarse y el margen se
   sumaba al hueco de la rejilla. */
.gv-intro:last-child{margin-bottom:0}
/* Separación del texto o el bloque que va justo detrás de un componente */
.gv-post-componente{margin-top:28px}

/* ══════════════════ BOTONES ══════════════════ */
.gv-btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:15px 28px;border-radius:var(--gv-rbtn);border:0;cursor:pointer;font-family:inherit;transition:background .18s ease,transform .18s ease,border-color .18s ease,color .18s ease}
.gv-btn--solid{background:var(--gv-cta);color:#fff;box-shadow:0 6px 18px -8px rgba(0,103,255,.75)}
.gv-btn--solid:hover{background:var(--gv-cta-d);transform:translateY(-1px)}
.gv-btn--ghost{border:1px solid var(--gv-line);color:var(--gv-ink);background:#fff}
.gv-btn--ghost:hover{border-color:var(--gv-blue);color:var(--gv-blue)}
.gv-btn--onDark{border:1px solid rgba(255,255,255,.3);color:#fff;background:transparent}
.gv-btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.gv-btn span{transition:transform .18s ease}
.gv-btn:hover span{transform:translateX(3px)}
.gv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ══════════════════ BARRA DE IMPLICACIÓN (firma) ══════════════════ */
.gv-imp{margin-top:clamp(38px,5vw,58px);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:22px 26px;background:#fff;border:1px solid var(--gv-line);border-left:3px solid var(--gv-brass);border-radius:0 var(--gv-r) var(--gv-r) 0}
.gv-sec--dark .gv-imp{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-left-color:var(--gv-brass-l)}
.gv-sec--dark .gv-imp p{color:#EAF0FC}
.gv-sec--dark .gv-imp-tag{color:var(--gv-brass-l)}
.gv-imp-tag{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gv-brass);padding-top:4px;white-space:nowrap}
.gv-imp p{font-family:var(--gv-serif);font-size:17px;line-height:1.55;color:var(--gv-ink);max-width:70ch}

/* ══════════════════ HERO ══════════════════ */
.gv-hero{position:relative;isolation:isolate;color:#fff;padding:clamp(72px,8vw,116px) var(--gv-pad) clamp(72px,9vw,120px);overflow:hidden}
.gv-hero .gv-veil{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,22,50,.82) 0%,rgba(10,22,50,.6) 46%,rgba(10,22,50,.14) 100%)}
.gv-hero-grid{position:relative;max-width:var(--gv-max);margin:0 auto;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,68px);align-items:center}
.gv-hero .gv-h1{color:#fff}
.gv-hero .gv-h1 em{font-style:normal;color:var(--gv-brass-l)}
.gv-hero .gv-lead{color:#CFDCF6;margin-top:26px}
.gv-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#CBD8F4;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);padding:7px 15px;border-radius:99px;margin-bottom:26px}
.gv-kicker b{width:6px;height:6px;border-radius:50%;background:var(--gv-brass-l)}
.gv-hero .gv-btn--solid{background:#fff;color:var(--gv-ink);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.gv-hero .gv-btn--solid:hover{background:#EDF2FD}
.gv-trust{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:#C7D3E7;display:flex;flex-wrap:wrap;gap:9px 24px}
.gv-trust li::before{content:"—";margin-right:9px;color:var(--gv-brass-l)}

/* ══════════════════ HOJA DE DIAGNÓSTICO ══════════════════ */
.gv-sheet{background:#fff;border-radius:var(--gv-r);box-shadow:0 34px 70px -30px rgba(0,0,0,.72);overflow:hidden;color:var(--gv-ink)}
.gv-sheet-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 22px;background:var(--gv-blue);color:#fff}
.gv-sheet-top strong{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.gv-sheet-top span{font-size:11px;letter-spacing:.1em;color:#B9CCF7;font-variant-numeric:tabular-nums}
.gv-sheet-row{display:grid;grid-template-columns:94px 1fr;gap:18px;padding:18px 22px;border-bottom:1px solid var(--gv-line)}
.gv-chip{font-size:9.5px;font-weight:700;letter-spacing:.12em;padding:5px 0;border-radius:2px;height:fit-content;white-space:nowrap;text-align:center;margin-top:2px}
.gv-chip--1{background:#FDEDE9;color:#A63A20}
.gv-chip--2{background:#FDF3E0;color:#8A6417}
.gv-chip--3{background:var(--gv-soft);color:var(--gv-blue)}
/* Chip fuera de la hoja de diagnóstico: sin la rejilla de .gv-sheet-row que
   le da el ancho, necesita su propio acolchado lateral */
.gv-chip--standalone{padding:5px 12px}
.gv-sheet-row h4{font-size:15px;font-weight:600;line-height:1.35;margin-bottom:5px}
.gv-sheet-row p{font-size:13.5px;line-height:1.55;color:var(--gv-mute)}
.gv-sheet-foot{padding:14px 22px;font-size:11.5px;line-height:1.5;color:var(--gv-mute);background:#F7F9FD}

/* ══════════════════ REJILLA DE CELDAS ══════════════════ */
.gv-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gv-cell{
  background:#fff;padding:26px 24px 30px;
  border:1px solid var(--gv-line);border-top:3px solid var(--gv-line);
  border-radius:var(--gv-r);
  transition:border-top-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.gv-cell:hover{border-top-color:var(--gv-brass);transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(12,26,56,.55)}
.gv-cell p{font-size:var(--gv-in-text);line-height:1.62;color:var(--gv-mute);margin-top:11px}
.gv-sec--dark .gv-cell{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.2)}
.gv-sec--dark .gv-cell p{color:#E1E8F5}

/* Cabecera de celda: icono + número */
.gv-cellhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}

/* ══════════════════ FICHAS DE EQUIPO ══════════════════ */
/* Solo las de /acerca-de/. Heredan el marco de .gv-cell, pero mueven su
   relleno al cuerpo para que la fotografía llegue al borde de la tarjeta.
   Nada de esto alcanza a las demás celdas del sitio. */
.gv-personas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gv-person{padding:0;overflow:hidden}
/* 4:3, la misma proporción que traen los archivos: la escena se conserva y el
   recorte ya se hizo por abajo al preparar la imagen. */
.gv-person__media{display:block;aspect-ratio:4/3;background:var(--gv-soft)}
.gv-person__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.gv-person__body{padding:22px 24px 26px}
.gv-person__body .gv-h3{margin-bottom:4px}
@media (max-width:720px){
  .gv-personas{grid-template-columns:1fr}
}

/* Inicio · recurso visual de la sección de problema. */
@media (max-width:900px){main:has(.gv-hero--inicio) .gv-inicio-problema > .gv-wrap{padding-block-end:clamp(64px,8vw,76px)}}
@media (max-width:900px){
}

/* Método · dashboard del hero: overrides finales secuenciales. */
main:has(.gv-hero--metodo) .gv-met-escaner{opacity:0;pointer-events:none}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area{animation:none}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-traza{animation:none}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-pista{overflow:hidden}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-pista::after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:34%;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(143,178,255,.2) 55%,#C8D9FF 100%);transform:translateX(-120%)}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--1{animation:gv-met-fila-1b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--2{animation:gv-met-fila-2b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--3{animation:gv-met-fila-3b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--1 .gv-met-pista::after{animation:gv-met-haz-1b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--2 .gv-met-pista::after{animation:gv-met-haz-2b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--3 .gv-met-pista::after{animation:gv-met-haz-3b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-friccion{animation:gv-met-punto-1b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--2 .gv-met-friccion{animation-name:gv-met-punto-2b}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-area--3 .gv-met-friccion{animation-name:gv-met-punto-3b}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-prio{opacity:0;visibility:hidden;animation:gv-met-prioridad-1b 11s linear infinite}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-prio--2{animation-name:gv-met-prioridad-2b}
main:has(.gv-hero--metodo) .gv-met-on .gv-met-prio--3{animation-name:gv-met-prioridad-3b}
@keyframes gv-met-fila-1b{0%,5%{opacity:.52}7%,26%{opacity:1}27%,94%{opacity:1}100%{opacity:.52}}
@keyframes gv-met-fila-2b{0%,29%{opacity:.52}31%,50%{opacity:1}51%,94%{opacity:1}100%{opacity:.52}}
@keyframes gv-met-fila-3b{0%,53%{opacity:.52}55%,74%{opacity:1}75%,94%{opacity:1}100%{opacity:.52}}
@keyframes gv-met-punto-1b{0%,25%{opacity:.22;background:#8FB2FF}27%,94%{opacity:1;background:var(--gv-brass-l)}100%{opacity:.22;background:#8FB2FF}}
@keyframes gv-met-punto-2b{0%,49%{opacity:.22;background:#8FB2FF}51%,94%{opacity:1;background:var(--gv-brass-l)}100%{opacity:.22;background:#8FB2FF}}
@keyframes gv-met-punto-3b{0%,73%{opacity:.22;background:#8FB2FF}75%,94%{opacity:1;background:var(--gv-brass-l)}100%{opacity:.22;background:#8FB2FF}}
@keyframes gv-met-haz-1b{0%,4%{opacity:0;transform:translateX(-120%)}6%{opacity:1}21%{opacity:1;transform:translateX(320%)}24%,100%{opacity:0;transform:translateX(320%)}}
@keyframes gv-met-haz-2b{0%,28%{opacity:0;transform:translateX(-120%)}30%{opacity:1}45%{opacity:1;transform:translateX(320%)}48%,100%{opacity:0;transform:translateX(320%)}}
@keyframes gv-met-haz-3b{0%,52%{opacity:0;transform:translateX(-120%)}54%{opacity:1}69%{opacity:1;transform:translateX(320%)}72%,100%{opacity:0;transform:translateX(320%)}}
@keyframes gv-met-prioridad-1b{0%,76%{opacity:0;visibility:hidden}78%,94%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes gv-met-prioridad-2b{0%,79%{opacity:0;visibility:hidden}81%,94%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes gv-met-prioridad-3b{0%,82%{opacity:0;visibility:hidden}84%,94%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){main:has(.gv-hero--metodo) .gv-met-on .gv-met-area,main:has(.gv-hero--metodo) .gv-met-on .gv-met-pista::after,main:has(.gv-hero--metodo) .gv-met-on .gv-met-friccion,main:has(.gv-hero--metodo) .gv-met-on .gv-met-prio{animation:none!important}}

/* Inicio · arquitectura compacta de seis bloques, ámbito exclusivo. */
main:has(.gv-hero--inicio) .gv-inicio-sec{padding-block:clamp(54px,4.75vw,74px)}
main:has(.gv-hero--inicio) .gv-inicio-sec .gv-h2{font-size:var(--gv-in-title-2);max-width:22ch}
main:has(.gv-hero--inicio) .gv-inicio-intro{margin-top:20px;max-width:72ch}
main:has(.gv-hero--inicio) .gv-inicio-sec .gv-p,main:has(.gv-hero--inicio) .gv-inicio-aud-grid li p{font-size:clamp(16px,.2vw + 14px,17.5px);line-height:1.55}
/* La franja navy vuelve a ocupar el ancho de la ventana: la sección
   pierde su padding lateral y lo recupera el .gv-wrap interior. */
main:has(.gv-hero--inicio) .gv-inicio-problema{padding-inline:0;padding-block-end:0}
main:has(.gv-hero--inicio) .gv-inicio-problema > .gv-wrap{padding-inline:var(--gv-pad);padding-block-end:clamp(76px,6.1vw,96px)}
main:has(.gv-hero--inicio) .gv-inicio-label{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gv-blue)}

/* INICIO · 01 · recorrido de cuatro etapas y cierre navy contenido.
   Sustituye a la composición antigua (imagen, cita y franja de ancho completo). */
main:has(.gv-hero--inicio) .gv-etapas{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);margin:clamp(30px,3.4vw,46px) 0 0;padding:0;list-style:none;
}
main:has(.gv-hero--inicio) .gv-etapas::before{content:"";position:absolute;top:5px;left:6px;right:6px;height:1px;background:var(--gv-line)}
main:has(.gv-hero--inicio) .gv-etapa{position:relative;display:flex;padding-top:24px}
main:has(.gv-hero--inicio) .gv-etapa-nodo{position:absolute;top:0;left:0;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1px solid var(--gv-blue);background:var(--gv-paper)}
main:has(.gv-hero--inicio) .gv-etapa-caja{
  flex:1;background:#fff;border:1px solid var(--gv-line);border-top:2px solid var(--gv-blue);
  border-radius:var(--gv-r);padding:clamp(15px,1.5vw,20px) clamp(15px,1.5vw,21px);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
main:has(.gv-hero--inicio) .gv-etapa:hover .gv-etapa-caja{transform:translateY(-3px);border-color:#C2D2F2;box-shadow:0 8px 18px rgba(15,23,42,.07)}
main:has(.gv-hero--inicio) .gv-etapa-num{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--gv-brass);font-variant-numeric:tabular-nums}
main:has(.gv-hero--inicio) .gv-etapa-eti{margin:3px 0 7px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gv-blue)}
main:has(.gv-hero--inicio) .gv-etapa h3{margin:0 0 6px;font-size:clamp(15.5px,1.05vw,17px);line-height:1.25;letter-spacing:-.01em;color:var(--gv-ink)}
main:has(.gv-hero--inicio) .gv-etapa p:last-child{margin:0;font-size:14.5px;line-height:1.5;color:var(--gv-mute)}


/* Tablet: 2 x 2 sin línea de conexión. */
@media (max-width:1099px){
  main:has(.gv-hero--inicio) .gv-etapas{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,24px)}
  main:has(.gv-hero--inicio) .gv-etapas::before{display:none}
}

/* Móvil: una etapa por fila con un hilo vertical a la izquierda. */
@media (max-width:699px){
  main:has(.gv-hero--inicio) .gv-etapas{grid-template-columns:minmax(0,1fr);gap:14px}
  main:has(.gv-hero--inicio) .gv-etapas::before{display:block;top:6px;bottom:6px;left:5px;right:auto;width:1px;height:auto}
  main:has(.gv-hero--inicio) .gv-etapa{padding:0 0 0 26px}
  main:has(.gv-hero--inicio) .gv-etapa-nodo{top:16px}
}

@media (prefers-reduced-motion:reduce){
  main:has(.gv-hero--inicio) .gv-etapa-caja{transition:none}
}
main:has(.gv-hero--inicio) .gv-inicio-sectores .gv-inicio-intro{max-width:70ch}
main:has(.gv-hero--inicio) .gv-inicio-sectores .gv-fam:first-of-type{margin-top:28px}
main:has(.gv-hero--inicio) .gv-inicio-aud-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:56px;margin-top:28px}
main:has(.gv-hero--inicio) .gv-inicio-aud-grid>div:first-child{max-width:66ch}
main:has(.gv-hero--inicio) .gv-inicio-aclaracion{margin:22px 0;color:var(--gv-mute);font-size:16px;line-height:1.55}
main:has(.gv-hero--inicio) .gv-inicio-aud-grid .gv-btn{margin-top:8px}
main:has(.gv-hero--inicio) .gv-inicio-accesos{padding-block-start:clamp(80px,5.8vw,96px)}

/* INICIO · 02 · tres tarjetas con el fondo ambiental de cada hero.
   Reutiliza /img/hero-ambiente-{servicios,metodo,sectores}.webp, sin copias. */
main:has(.gv-hero--inicio) .gv-accesos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,1.6vw,24px);margin:clamp(24px,2.4vw,32px) 0 0}
main:has(.gv-hero--inicio) .gv-acc{
  /* Los tres ambientes son oscuros de origen (luminancia media medida en la
     zona visible: servicios 35, sectores 45, método 52 sobre 255), así que
     cada tarjeta lleva su propio brillo y sus propias capas. */
  --card-brightness:1.30;--card-overlay-top:.28;--card-overlay-bottom:.90;
  position:relative;isolation:isolate;display:flex;overflow:hidden;
  min-height:clamp(340px,25vw,380px);border-radius:var(--gv-r);border-top:2px solid var(--gv-blue);
  background:var(--gv-ink);color:#fff;text-decoration:none;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
main:has(.gv-hero--inicio) .gv-acc-img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(var(--card-brightness)) contrast(.95) saturate(1.04);
  transition:transform .26s ease,filter .25s ease;
}
main:has(.gv-hero--inicio) .gv-acc--serv{--card-brightness:1.40;--card-overlay-top:.30;--card-overlay-bottom:.92}
main:has(.gv-hero--inicio) .gv-acc--met{--card-brightness:1.20;--card-overlay-top:.26}
main:has(.gv-hero--inicio) .gv-acc--sec{--card-brightness:1.30;--card-overlay-top:.28}
main:has(.gv-hero--inicio) .gv-acc--serv .gv-acc-img{object-position:22% 52%}
main:has(.gv-hero--inicio) .gv-acc--met .gv-acc-img{object-position:38% 55%}
main:has(.gv-hero--inicio) .gv-acc--sec .gv-acc-img{object-position:26% 55%}
/* Estado normal: sin capa navy uniforme. Solo un velo suave sobre el número
   y la etiqueta, el centro limpio y un degradado progresivo bajo el texto. */
main:has(.gv-hero--inicio) .gv-acc-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,22,46,var(--card-overlay-top)) 0%,rgba(12,22,46,.06) 30%,rgba(12,22,46,0) 40%),
    linear-gradient(180deg,rgba(9,17,38,0) 48%,rgba(9,17,38,.30) 64%,rgba(9,17,38,.70) 83%,rgba(9,17,38,var(--card-overlay-bottom)) 100%);
}
/* Capa navy uniforme reservada al hover y al foco. */
main:has(.gv-hero--inicio) .gv-acc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(12,22,46,.34) 0%,rgba(12,22,46,.58) 46%,rgba(12,22,46,.86) 100%);
  transition:opacity .25s ease}
main:has(.gv-hero--inicio) .gv-acc-in{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;padding:clamp(20px,1.8vw,26px)}
main:has(.gv-hero--inicio) .gv-acc-num{font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--gv-brass-l);font-variant-numeric:tabular-nums}
main:has(.gv-hero--inicio) .gv-acc-eti{margin-top:5px;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#BFD3FF}
main:has(.gv-hero--inicio) .gv-acc-cuerpo{margin-top:auto;display:block}
/* Sombra mínima: con la foto visible, el texto de la tarjeta de Método
   cae sobre una zona clara y necesita este apoyo. */
main:has(.gv-hero--inicio) .gv-acc-tit,main:has(.gv-hero--inicio) .gv-acc-txt,
main:has(.gv-hero--inicio) .gv-acc-mas{text-shadow:0 1px 3px rgba(6,12,28,.55)}
main:has(.gv-hero--inicio) .gv-acc-tit{display:block;font-size:clamp(19px,1.5vw,23px);line-height:1.18;letter-spacing:-.015em;font-weight:700;color:#fff}
main:has(.gv-hero--inicio) .gv-acc-txt{display:block;margin-top:9px;max-width:34ch;font-size:15px;line-height:1.5;color:#D3DFF6}
main:has(.gv-hero--inicio) .gv-acc-mas{display:block;margin-top:16px;font-size:15px;font-weight:650;color:#fff}
main:has(.gv-hero--inicio) .gv-acc-flecha{display:inline-block;margin-left:6px;color:var(--gv-brass-l);transition:transform .24s ease}

main:has(.gv-hero--inicio) .gv-acc:hover,main:has(.gv-hero--inicio) .gv-acc:focus-visible{transform:translateY(-4px);border-top-color:var(--gv-brass-l);box-shadow:0 16px 34px -14px rgba(9,17,38,.5)}
main:has(.gv-hero--inicio) .gv-acc:hover .gv-acc-img,main:has(.gv-hero--inicio) .gv-acc:focus-visible .gv-acc-img{transform:scale(1.035)}
main:has(.gv-hero--inicio) .gv-acc:hover::after,main:has(.gv-hero--inicio) .gv-acc:focus-visible::after{opacity:1}
main:has(.gv-hero--inicio) .gv-acc:hover .gv-acc-img,main:has(.gv-hero--inicio) .gv-acc:focus-visible .gv-acc-img{filter:brightness(calc(var(--card-brightness) * .72)) contrast(1) saturate(1)}
main:has(.gv-hero--inicio) .gv-acc:hover .gv-acc-flecha,main:has(.gv-hero--inicio) .gv-acc:focus-visible .gv-acc-flecha{transform:translateX(4px)}
main:has(.gv-hero--inicio) .gv-acc:focus-visible{outline:2px solid var(--gv-bright);outline-offset:3px}

@media (max-width:999px){
  main:has(.gv-hero--inicio) .gv-accesos{grid-template-columns:minmax(0,1fr)}
  main:has(.gv-hero--inicio) .gv-acc{min-height:clamp(270px,42vw,310px)}
}
@media (max-width:639px){
  main:has(.gv-hero--inicio) .gv-acc{min-height:clamp(270px,64vw,300px)}
  main:has(.gv-hero--inicio) .gv-acc-txt{max-width:none}
  /* La tarjeta es más baja: el degradado inferior empieza antes. */
  main:has(.gv-hero--inicio) .gv-acc-velo{background:
    linear-gradient(180deg,rgba(12,22,46,var(--card-overlay-top)) 0%,rgba(12,22,46,.06) 26%,rgba(12,22,46,0) 34%),
    linear-gradient(180deg,rgba(9,17,38,0) 34%,rgba(9,17,38,.36) 54%,rgba(9,17,38,.74) 76%,rgba(9,17,38,var(--card-overlay-bottom)) 100%)}
}
@media (prefers-reduced-motion:reduce){
  main:has(.gv-hero--inicio) .gv-acc,main:has(.gv-hero--inicio) .gv-acc-img,
  main:has(.gv-hero--inicio) .gv-acc-velo,main:has(.gv-hero--inicio) .gv-acc::after,
  main:has(.gv-hero--inicio) .gv-acc-flecha{transition:none}
  main:has(.gv-hero--inicio) .gv-acc:hover,main:has(.gv-hero--inicio) .gv-acc:focus-visible{transform:none}
  main:has(.gv-hero--inicio) .gv-acc:hover .gv-acc-img,main:has(.gv-hero--inicio) .gv-acc:focus-visible .gv-acc-img{transform:none}
  main:has(.gv-hero--inicio) .gv-acc:hover .gv-acc-flecha,main:has(.gv-hero--inicio) .gv-acc:focus-visible .gv-acc-flecha{transform:none}
}
main:has(.gv-hero--inicio) .gv-inicio-meta{margin:16px 0 0;font-size:14px;color:var(--gv-blue);font-weight:650}
main:has(.gv-hero--inicio) .gv-inicio-legal{margin-top:8px;font-size:16px;color:var(--gv-mute)}
main:has(.gv-hero--inicio) .gv-inicio-aud-grid ol{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--gv-line)}
main:has(.gv-hero--inicio) .gv-inicio-aud-grid li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--gv-line)}
main:has(.gv-hero--inicio) .gv-inicio-aud-grid li>span{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gv-brass)}
main:has(.gv-hero--inicio) .gv-inicio-aud-grid li p{margin:0;color:var(--gv-mute)}
main:has(.gv-hero--inicio) .gv-inicio-close{padding-block:clamp(50px,5vw,70px);text-align:center}
main:has(.gv-hero--inicio) .gv-inicio-close .gv-eyebrow{color:var(--gv-brass-l)}
main:has(.gv-hero--inicio) .gv-inicio-close h2{max-width:24ch;margin-inline:auto;font-size:var(--gv-in-cta)}
main:has(.gv-hero--inicio) .gv-inicio-close p:not(.gv-eyebrow){max-width:58ch;margin:18px auto 0;font-size:18px;line-height:1.55}
main:has(.gv-hero--inicio) .gv-inicio-close .gv-btn{margin-top:24px}
main:has(.gv-hero--inicio) .gv-inicio-close small{display:block;margin-top:13px;font-size:15px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam ul{grid-template-columns:repeat(2,minmax(0,1fr))}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam:first-of-type{margin-top:30px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-famhead h3{max-width:none}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-nota{margin-top:28px;color:var(--gv-mute);font-size:16px;line-height:1.55}
/* ══════ SECTORES · 01 FAMILIAS ══════
   Sección compacta: sin raíl lateral —el número viaja al kicker—, cabecera
   en una sola columna y la matriz de tres columnas debajo. La altura la pone
   el contenido: aquí no hay alturas de viewport ni centrado vertical.
   Ámbito de esta sección de /sectores/. */
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-familias{padding-block:44px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-familias .gv-h2{font-size:30px;line-height:1.1;max-width:830px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-familias .gv-intro{margin-bottom:0}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-familias .gv-intro .gv-p{margin-top:17px;font-size:16px;line-height:1.58;max-width:750px}
@media (min-width:768px){
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-familias{padding-block:46px}
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-familias .gv-h2{font-size:34px}
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-familias .gv-intro .gv-p{font-size:16.5px}
}
@media (min-width:1024px){
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-familias{padding-block:50px}
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-familias .gv-h2{font-size:37px}
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-familias .gv-intro .gv-p{font-size:17px}
}

/* Bifurcación: un origen a la izquierda —cómo compra el cliente— del que
   cuelga una barra y, de ella, dos recorridos verticales con sus estaciones.
   Ni tabla ni tarjetas: filetes de 1 px, nodos discretos y jerarquía. */

/* Conclusión abierta: filete de latón, rótulo y frase en la misma línea. */
/* Móvil: los dos recorridos se apilan y cada uno conserva su nodo y su raíl. */
@media (max-width:767px){
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-familias .gv-h2{font-size:30px}
}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-intro{max-width:68ch}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-acento{color:var(--gv-brass-l)}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja .gv-h2{max-width:24ch;font-size:var(--gv-in-title-2)}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-grid article{display:flex;flex-direction:column;padding:20px 18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);min-height:218px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-num{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gv-brass-l);font-variant-numeric:tabular-nums}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-grid h3{margin:18px 0 9px;font-size:18px;line-height:1.25;color:#fff}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-grid p{margin:0;font-size:16px;line-height:1.5;color:#E1E8F5}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-cierre{margin-top:24px;padding:16px 0 0;border-top:2px solid var(--gv-brass);font-size:16px;line-height:1.5;color:#E1E8F5;max-width:70ch}
@media (max-width:1100px){main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-grid{grid-template-columns:1fr;gap:12px}main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-encaja-grid article{min-height:0;padding:18px 16px}}
/* Cuatro recorridos: composición compacta para que las dos familias quepan
   en un portátil de 1366×768 sin encoger el texto por debajo de 15 px. */
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos{padding-block:clamp(40px,3.8vw,58px)}
main:has(.gv-hero--inicio) .gv-sector-grupos{padding-block:0}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-intro{margin-bottom:0}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam:first-of-type{margin-top:clamp(18px,1.8vw,26px)}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam + .gv-fam{margin-top:clamp(24px,2.2vw,30px)}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-famhead{padding-bottom:10px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam ul{gap:clamp(16px,1.7vw,24px);margin-top:14px}
/* La familia principal se lee antes: su cabecera pesa algo más y sus cuatro
   fichas van en 2 × 2. El bloque secundario reparte tres en fila. */
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-principal .gv-famhead h3{font-size:19px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-principal .gv-famhead h3 a{color:var(--gv-blue);text-decoration:underline;text-underline-offset:4px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-sector-principal ul{grid-template-columns:repeat(4,minmax(0,1fr))}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-sector-tambien ul{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Entre 721 y 960 px la regla general recoloca el último impar a media fila:
   con tres tarjetas en fila eso dejaba la tercera suelta abajo. Y las celdas
   necesitan min-width:0 para no estirarse por su contenido mínimo. */
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam ul > li{min-width:0}
@media (min-width:721px) and (max-width:960px){
  main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-sector-tambien ul > :last-child:nth-child(odd){grid-column:auto;width:auto}
}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-thumb{height:clamp(140px,11vw,158px)}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam-txt{padding:16px 18px 18px}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam h4{font-size:clamp(17px,1.35vw,19px)}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-fam p{margin-top:6px;font-size:clamp(15px,1.15vw,16px);line-height:1.45}
main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-sector-nota{margin-top:22px;font-size:15.5px}
/* Tableta: las cuatro clínicas pasan a 2 × 2 —sin huérfanas— y los tres
   sectores aguantan en fila mientras tengan sitio. */
@media (max-width:1199px){main:has(.gv-hero--sectores,.gv-hero--inicio) .gv-sector-grupos .gv-sector-principal ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-grupos .gv-fam ul,
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-grupos .gv-sector-principal ul,
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-grupos .gv-sector-tambien ul{grid-template-columns:1fr}
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-grupos .gv-thumb{height:clamp(170px,44vw,230px)}
}

/* Cuatro señales: la superficie responde al puntero sin fingir que es un
   enlace. Solo con puntero fino y sin desplazamiento si se pide menos motion. */
@media (hover:hover) and (pointer:fine){
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-encaja-grid article{transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-encaja-grid article:hover{transform:translateY(-3px);border-color:var(--gv-cta);background:rgba(255,255,255,.09);box-shadow:0 14px 30px rgba(4,10,26,.32)}
}
@media (prefers-reduced-motion:reduce){
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-encaja-grid article,
main:has(.gv-hero--sectores,.gv-hero--inicio)   .gv-sector-encaja-grid article:hover{transform:none}
}

/* CTA final contenido: clase explícita, se aplica una a una a los cierres
   que aún ocupaban el ancho completo. No toca los del hero. */
.gv-close.gv-final-cta--contained{max-width:min(1120px,calc(100% - clamp(40px,8vw,120px)));margin-inline:auto;margin-block:clamp(34px,3.6vw,56px) clamp(44px,4.6vw,76px);padding:clamp(38px,4.2vw,58px) clamp(24px,4vw,52px);border-radius:var(--gv-r)}
@media (max-width:900px){
  main:has(.gv-hero--inicio) .gv-inicio-aud-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:720px){
  main:has(.gv-hero--inicio) .gv-inicio-sec{padding-block:clamp(46px,12vw,60px)}
  main:has(.gv-hero--inicio) .gv-inicio-sectores .gv-fam:first-of-type{margin-top:22px}
}
@media (max-width:900px){
  main:has(.gv-hero--inicio) .gv-inicio-accesos{padding-block-start:clamp(68px,8vw,80px)}
}
@media (max-width:600px){
  main:has(.gv-hero--inicio) .gv-inicio-accesos{padding-block-start:clamp(54px,14vw,64px)}
}
.gv-ico{width:26px;height:26px;color:var(--gv-blue);flex:0 0 auto}
.gv-ico svg{width:100%;height:100%;display:block}
.gv-sec--dark .gv-ico{color:#8CA8EC}
.gv-idx{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gv-brass);font-variant-numeric:tabular-nums}

/* ══════════════════ SECTORES ══════════════════ */
.gv-fam{margin-top:52px}
.gv-fam:first-of-type{margin-top:0}
.gv-famhead{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--gv-ink)}
.gv-famhead h3{font-size:17px;font-weight:700;font-stretch:108%;letter-spacing:-.01em}
.gv-famhead span{font-size:12.5px;color:var(--gv-mute)}
.gv-fam ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:20px}
.gv-fam a{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#fff;border:1px solid var(--gv-line);border-top:3px solid var(--gv-line);border-radius:var(--gv-r);transition:border-top-color .22s ease,transform .22s ease,box-shadow .22s ease}
.gv-fam a:hover{border-top-color:var(--gv-brass);transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(12,26,56,.55)}

/* Miniatura de la tarjeta */
.gv-thumb{position:relative;display:block;height:200px;background:var(--gv-ink);overflow:hidden;flex:0 0 auto}
.gv-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.9) contrast(1.02) brightness(1.04);transition:transform .5s ease}
.gv-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(14,32,72,.62) 0%,rgba(35,74,190,.36) 100%);mix-blend-mode:multiply}
.gv-fam a:hover .gv-thumb img{transform:scale(1.04)}

/* ── Sectores: las tarjetas en color ──
   Las mismas seis fotos salen en Inicio con el tratamiento de siempre, así
   que el cambio cuelga de .gv-fam--color, que solo llevan las dos familias
   de /sectores/. En reposo se ven en color y con el velo azul al mínimo que
   pide la marca; bajo el puntero pasan a blanco y negro y el velo recupera
   su fuerza para que no se pierda el contraste.
   Solo donde hay puntero de verdad: en táctil no hay estado de reposo al
   que volver y las fotos se quedarían en gris después del toque. */
.gv-fam--color .gv-thumb img{filter:none}
.gv-fam--color .gv-thumb::after{opacity:.34}
/* Aquí la foto se queda quieta dentro de su marco: lo único que sube es la
   tarjeta entera, que conserva su translateY compartido. Va fuera de la
   consulta de puntero para que un :hover pegajoso en táctil tampoco la
   escale. La regla compartida de Inicio no se toca: esta la gana por venir
   después con la misma especificidad. */
.gv-fam--color a:hover .gv-thumb img{transform:none}

@media (hover:hover) and (pointer:fine){
  .gv-fam--color .gv-thumb img{transition:filter .35s ease}
  .gv-fam--color .gv-thumb::after{transition:opacity .35s ease}
  .gv-fam--color a:hover .gv-thumb img{filter:grayscale(1) contrast(1.04)}
  .gv-fam--color a:hover .gv-thumb::after{opacity:1}
}
.gv-fam-txt{padding:22px 22px 26px}

.gv-fam h4{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;letter-spacing:-.005em}
.gv-fam h4 .gv-ico{width:22px;height:22px}
.gv-fam h4 .gv-flecha{margin-left:auto;color:var(--gv-blue);transition:transform .18s ease}
.gv-fam a:hover h4 .gv-flecha{transform:translateX(4px)}
.gv-fam p{font-size:13.5px;line-height:1.55;color:var(--gv-mute);margin-top:9px}

/* Medidas del componente en pantallas menores. Solo alto de la miniatura,
   hueco de la rejilla y aire entre familias: el resto del componente no
   cambia con el ancho. */
@media (min-width:721px) and (max-width:1023px){
  .gv-fam ul{gap:24px}
  .gv-thumb{height:170px}
}
@media (max-width:720px){
  .gv-fam{margin-top:42px}
  .gv-fam ul{gap:24px}
  .gv-thumb{height:auto;aspect-ratio:16/8}
}

/* ══════════════════ FRANJA DE IMAGEN ══════════════════ */
.gv-franja{position:relative;isolation:isolate;padding:clamp(64px,8vw,104px) var(--gv-pad);color:#fff;overflow:hidden;text-align:center}
.gv-franja .gv-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,50,.88) 0%,rgba(10,22,50,.7) 100%)}
.gv-franja-in{position:relative;max-width:820px;margin:0 auto}
.gv-franja blockquote{font-family:var(--gv-serif);font-size:clamp(22px,3vw,34px);line-height:1.35;letter-spacing:-.012em;text-wrap:balance}
.gv-franja p{margin-top:22px;font-size:var(--gv-in-text);line-height:1.65;color:#C7D3E7;max-width:60ch;margin-left:auto;margin-right:auto}

/* ══════════════════ PASOS ══════════════════ */
.gv-steps{display:grid;gap:1px;background:var(--gv-line);border:1px solid var(--gv-line);border-radius:var(--gv-r);overflow:hidden;counter-reset:s}
.gv-step{background:#fff;display:grid;grid-template-columns:56px 1fr;gap:22px;padding:24px 22px}
.gv-step b{counter-increment:s;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gv-brass);font-variant-numeric:tabular-nums;padding-top:3px}
.gv-step b::before{content:counter(s,decimal-leading-zero)}
.gv-step h3,.gv-step h4{font-size:16.5px;font-weight:600;margin-bottom:7px}
.gv-step p{font-size:var(--gv-in-text);line-height:1.6;color:var(--gv-mute);max-width:62ch}
/* Sobre fondo oscuro: filas a sangre, sin caja */
.gv-sec--dark .gv-steps{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-left:0;border-right:0;border-radius:0}
.gv-sec--dark .gv-step{background:var(--gv-ink);padding:24px 4px}
.gv-sec--dark .gv-step b{color:var(--gv-brass-l)}
.gv-sec--dark .gv-step p{color:#E1E8F5}

/* ══════════════════ CITA ══════════════════ */
.gv-quote{background:#fff;border:1px solid var(--gv-line);border-left:3px solid var(--gv-blue);padding:clamp(30px,4vw,44px);border-radius:0 var(--gv-r) var(--gv-r) 0}
.gv-quote blockquote{font-family:var(--gv-serif);font-size:clamp(19px,2.3vw,25px);line-height:1.48;letter-spacing:-.008em;max-width:44ch}
.gv-quote figcaption{margin-top:24px;padding-top:18px;border-top:1px solid var(--gv-line);font-size:13.5px;color:var(--gv-mute)}
.gv-quote figcaption b{display:block;font-size:15px;color:var(--gv-ink);font-weight:600;margin-bottom:3px}

/* ══════════════════ FAQ ══════════════════ */
.gv-faq{border-top:1px solid var(--gv-line);margin-top:38px}
.gv-faq details{border-bottom:1px solid var(--gv-line)}
.gv-faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:16.5px;font-weight:600;letter-spacing:-.008em;position:relative}
.gv-faq summary::-webkit-details-marker{display:none}
.gv-faq summary::after{content:"+";position:absolute;right:6px;top:19px;font-size:22px;font-weight:400;color:var(--gv-blue);transition:transform .2s ease}
.gv-faq details[open] summary::after{transform:rotate(45deg)}
.gv-faq p{font-size:var(--gv-in-text);line-height:1.66;color:var(--gv-mute);padding:0 40px 24px 0;max-width:70ch}

/* ══════════════════ FORMULARIO ══════════════════ */
/* Formulario propio, servido desde el mismo dominio. No hay iframe ni embed
   de terceros: la hoja blanca contiene los campos directamente. */
.gv-formwrap{background:#fff;border:1px solid var(--gv-line);border-radius:var(--gv-r);padding:clamp(20px,3vw,30px)}
.gv-formlegal{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--gv-mute)}
.gv-formlegal a{color:var(--gv-blue);text-decoration:underline;text-underline-offset:2px}

/* Dos columnas en escritorio; los campos largos ocupan la fila entera */
.gv-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 20px}
.gv-campo{display:flex;flex-direction:column;min-width:0}
.gv-campo--ancho{grid-column:1/-1}

.gv-label{font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--gv-ink);margin-bottom:7px;padding:0}
.gv-req{color:var(--gv-brass)}
.gv-opt{font-weight:400;color:var(--gv-mute)}

.gv-input,.gv-select,.gv-textarea{
  width:100%;font-family:inherit;font-size:15px;line-height:1.5;color:var(--gv-ink);
  background:#fff;border:1px solid var(--gv-line);border-radius:var(--gv-r);
  padding:12px 14px;transition:border-color .18s ease,box-shadow .18s ease;
}
.gv-textarea{resize:vertical;min-height:120px}
.gv-select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%232149DD' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.gv-input:hover,.gv-select:hover,.gv-textarea:hover{border-color:#B9CBEC}
.gv-input:focus,.gv-select:focus,.gv-textarea:focus{border-color:var(--gv-bright);box-shadow:0 0 0 3px rgba(47,107,255,.14);outline:none}
.gv-input[aria-invalid="true"],.gv-select[aria-invalid="true"],.gv-textarea[aria-invalid="true"]{border-color:#A63A20;background:#FEF8F6}

.gv-ayuda{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--gv-mute)}
.gv-error{margin-top:7px;font-size:12.5px;line-height:1.5;color:#A63A20;font-weight:500}

/* Preferencia de contacto */
.gv-fieldset{border:0;margin:0;padding:0;min-width:0}
.gv-radios{display:flex;flex-wrap:wrap;gap:10px}
.gv-radio{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--gv-ink);border:1px solid var(--gv-line);border-radius:var(--gv-rbtn);padding:10px 18px;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.gv-radio:hover{border-color:#B9CBEC}
.gv-radio input{accent-color:var(--gv-cta);width:16px;height:16px;margin:0;cursor:pointer}
.gv-radio:has(input:checked){border-color:var(--gv-cta);background:var(--gv-soft)}

/* Aceptación de la política de privacidad */
.gv-consent{margin-top:22px;padding-top:20px;border-top:1px solid var(--gv-line)}
.gv-check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.55;color:var(--gv-ink);cursor:pointer}
.gv-check input{accent-color:var(--gv-cta);width:18px;height:18px;margin:2px 0 0;cursor:pointer}
.gv-check a{color:var(--gv-blue);text-decoration:underline;text-underline-offset:2px}

/* Señuelo: fuera de la vista, pero no con display:none, que algunos
   automatismos detectan */
.gv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.gv-form-pie{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px}
.gv-form-pie .gv-btn[disabled]{opacity:.6;cursor:progress}
.gv-form-estado{font-size:13.5px;line-height:1.5;color:var(--gv-mute);max-width:44ch}

/* Panel de confirmación, en el sitio que ocupaba el formulario */
.gv-exito{padding:6px 0}
.gv-exito .gv-h3{margin-bottom:12px;max-width:30ch}
.gv-exito:focus-visible{outline:2px solid var(--gv-bright);outline-offset:6px}
.gv-exito-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ── Calendario de reserva ──
   Modal dentro de la misma página. Se apoya en <dialog>: el foco, Escape y la
   capa oscura los pone el navegador. No hay iframe ni nada de terceros: las
   horas las sirve /api/calendario.php y la cita la crea el servidor, así que
   no depende del aviso de cookies. */
.gv-cal{
  width:min(760px,calc(100vw - 32px));max-width:none;
  padding:0;border:1px solid var(--gv-line);border-radius:var(--gv-r);
  background:#fff;color:var(--gv-ink);
  box-shadow:0 26px 60px -30px rgba(9,20,48,.55);
}
.gv-cal::backdrop{background:rgba(9,20,48,.55)}
.gv-cal-caja{display:flex;flex-direction:column;max-height:min(88vh,860px)}
.gv-cal-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,2vw,22px);border-bottom:1px solid var(--gv-line);
}
.gv-cal-tit{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.2;color:var(--gv-ink)}
.gv-cal-cerrar{
  flex:none;padding:7px 14px;border:1px solid var(--gv-line);border-radius:var(--gv-rbtn);
  background:#fff;font:inherit;font-size:13px;font-weight:650;color:var(--gv-mute);cursor:pointer;
}
.gv-cal-cerrar:hover{border-color:var(--gv-bright);color:var(--gv-blue)}
.gv-cal-cerrar:focus-visible{outline:2px solid var(--gv-bright);outline-offset:2px}
/* Selector propio: dias, horas y confirmacion. Sin iframe, asi que la caja
   crece con su contenido en lugar de reservar una altura fija. */
.gv-cal-zona{margin:0;padding:14px clamp(16px,2vw,22px) 0;font-size:14px;color:var(--gv-mute)}
.gv-cal-zona b{color:var(--gv-ink)}
.gv-cal-estado{
  margin:0;padding:10px clamp(16px,2vw,22px) 0;
  font-size:14px;line-height:1.5;color:var(--gv-mute);min-height:21px;
}
.gv-cal-cuerpo{padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px) clamp(18px,2vw,24px);overflow-y:auto}
.gv-cal-grupo{margin-bottom:18px}
.gv-cal-sub{
  margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gv-blue);
}
.gv-cal-dias{display:flex;flex-wrap:wrap;gap:8px}
.gv-cal-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.gv-cal-dia,.gv-cal-hora{
  padding:10px 14px;border:1px solid var(--gv-line);border-radius:var(--gv-r);
  background:#fff;font:inherit;font-size:14px;font-weight:600;
  color:var(--gv-ink);cursor:pointer;text-align:center;
}
.gv-cal-hora{font-variant-numeric:tabular-nums}
.gv-cal-dia:hover,.gv-cal-hora:hover{border-color:var(--gv-bright);color:var(--gv-blue)}
.gv-cal-dia:focus-visible,.gv-cal-hora:focus-visible{outline:2px solid var(--gv-bright);outline-offset:2px}
.gv-cal-dia.is-activo,.gv-cal-hora.is-activo{
  border-color:var(--gv-cta);background:var(--gv-cta);color:#fff;
}
.gv-cal-resumen{
  margin:0 0 14px;font-family:var(--gv-serif,inherit);font-size:15px;
  line-height:1.5;color:var(--gv-ink);min-height:22px;
}
.gv-cal-acciones{display:flex;flex-wrap:wrap;gap:12px}
.gv-cal-acciones .gv-btn[disabled]{opacity:.55;cursor:not-allowed}
.gv-cal-hecho{padding:clamp(18px,2vw,26px) clamp(16px,2vw,22px);font-size:15px;line-height:1.6;color:var(--gv-mute)}
.gv-cal-hecho p{margin:0 0 10px}
.gv-cal-hecho p:last-child{margin-bottom:0}
.gv-cal-hecho-tit{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gv-blue);
}

@media (max-width:720px){
  .gv-cal{width:calc(100vw - 20px)}
  .gv-cal-cuerpo{max-height:62vh}
  .gv-cal-horas{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  .gv-cal-acciones .gv-btn{width:100%;justify-content:center}
}

@media (max-width:720px){
  .gv-form-grid{grid-template-columns:1fr}
  .gv-form-pie .gv-btn{width:100%;justify-content:center}
  .gv-exito-acciones .gv-btn{width:100%;justify-content:center}
}

/* ══════════════════ CIERRE ══════════════════ */
/* Cierre común a toda la web: el degradado azul se mantiene, pero ahora va
   sobre una fotografía de auditoría. La transparencia vive en las paradas
   del degradado —no en el contenedor—, así que el texto conserva su opacidad
   completa y la escena solo asoma un 15 % por el lateral derecho. */
.gv-close{background-color:var(--gv-ink2);background-image:linear-gradient(120deg,rgba(0,103,255,.86) 0%,rgba(22,56,184,.85) 58%,rgba(22,33,63,.88) 100%),url('/img/cta-auditoria-growvanz.webp');background-size:cover;background-position:center right;background-repeat:no-repeat;color:#fff;padding:clamp(58px,7vw,92px) var(--gv-pad);text-align:center}
.gv-close h2{font-size:var(--gv-in-cta);font-weight:700;font-stretch:110%;line-height:1.1;letter-spacing:-.02em;max-width:22ch;margin:0 auto;text-wrap:balance}
.gv-close p{font-family:var(--gv-serif);font-size:18px;line-height:1.6;color:#CBD9F8;max-width:56ch;margin:22px auto 0}
.gv-close .gv-btn{background:#fff;color:var(--gv-cta);margin-top:34px}
.gv-close .gv-btn:hover{background:#EDF2FD}
.gv-close small{display:block;margin-top:22px;font-size:12.5px;color:#A6BCF0;letter-spacing:.04em}
@media (max-width:767px){
  .gv-close{background-image:linear-gradient(150deg,rgba(0,103,255,.9) 0%,rgba(22,56,184,.9) 55%,rgba(22,33,63,.92) 100%),url('/img/cta-auditoria-growvanz.webp')}
}

/* ══════════════════ PIE ══════════════════ */
.gv-footer{background:var(--gv-ink);color:#fff;padding:clamp(52px,6vw,76px) var(--gv-pad) 0}
.gv-footer-in{max-width:var(--gv-max);margin:0 auto;display:grid;grid-template-columns:1.35fr 1.05fr 1.05fr .75fr .9fr;gap:clamp(24px,2.8vw,44px);padding-bottom:52px}
/* Las dos columnas de sectores llevan nombres largos: se parten por palabras
   completas y sin guionado automático. */
.gv-footer-col--sectores a{overflow-wrap:normal;hyphens:none;text-wrap:pretty}
.gv-footer-marca img{height:25px;width:auto}
.gv-footer-marca p{margin-top:20px;font-size:14.5px;line-height:1.65;color:#C7D3E7;max-width:34ch}
/* Redes: solo iconos, 38x38 de área táctil y 18 px de dibujo. */
.gv-sociales{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gv-social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#C3D2EE;background:transparent;border:1px solid rgba(255,255,255,.20);border-radius:50%;transition:border-color .2s ease,color .2s ease,background-color .2s ease,transform .2s ease}
.gv-social svg{width:18px;height:18px;display:block}
a.gv-social:hover,a.gv-social:focus-visible{color:#fff;border-color:var(--gv-cta);background-color:rgba(255,255,255,.07);transform:translateY(-1px)}
a.gv-social:focus-visible{outline:2px solid var(--gv-bright);outline-offset:3px}
/* Sin perfil todavía: se ve, pero no parece interactivo. */
.gv-social--sin{color:rgba(195,210,238,.42);border-color:rgba(255,255,255,.10);cursor:default}
@media (prefers-reduced-motion:reduce){.gv-social{transition:none}a.gv-social:hover,a.gv-social:focus-visible{transform:none}}
.gv-footer-col h3{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gv-brass-l);margin-bottom:20px}
.gv-footer-col ul{display:grid;gap:11px}
.gv-footer-col a{font-size:14.5px;color:#C7D3E7;transition:color .16s ease}
.gv-footer-col a:hover{color:#fff}
.gv-footer-contacto address{display:grid;gap:11px;font-size:14.5px;color:#C7D3E7;line-height:1.55}
.gv-footer-contacto a:hover{color:#fff}
.gv-footer-bar{max-width:var(--gv-max);margin:0 auto;border-top:1px solid rgba(255,255,255,.13);padding:22px 0 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 26px}
.gv-footer-bar p{font-size:13px;color:#A8B6D0}
.gv-footer-bar ul{display:flex;flex-wrap:wrap;gap:10px 22px}
.gv-footer-bar a{font-size:13px;color:#A8B6D0;transition:color .16s ease}
.gv-footer-bar a:hover{color:#fff}

/* Área táctil del pie. En escritorio el ritmo se queda como está; donde el
   pie ya va en una columna y se toca con el dedo, cada enlace ocupa los 44 px
   recomendados. El enlace pasa a bloque para que sea clicable entero, no solo
   la palabra. */
@media (max-width:720px){
  .gv-footer-col ul{gap:0}
  .gv-footer-col a,
  .gv-footer-bar a{display:flex;align-items:center;min-height:44px}
  .gv-footer-bar ul{gap:0 22px}
}

/* ══════════════════ RECORRIDO DE COMPRA ══════════════════ */
.gv-flujo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gv-line);border:1px solid var(--gv-line);border-radius:var(--gv-r);overflow:hidden;margin-top:8px}
.gv-flujo-paso{background:#fff;padding:22px 18px 24px;position:relative}
.gv-flujo-paso::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gv-line)}
.gv-flujo-paso[data-riesgo]::before{background:var(--gv-brass)}
.gv-flujo-tiempo{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gv-brass);font-variant-numeric:tabular-nums}
.gv-flujo-paso h3,.gv-flujo-paso h4{font-size:15px;font-weight:600;margin:12px 0 8px;line-height:1.3}
.gv-flujo-paso p{font-size:var(--gv-in-text);line-height:1.55;color:var(--gv-mute)}
.gv-flujo-aviso{display:block;margin-top:14px;padding-top:12px;border-top:1px dashed var(--gv-line);font-size:12px;line-height:1.5;color:var(--gv-brass)}
.gv-sec--dark .gv-flujo{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.gv-sec--dark .gv-flujo-paso{background:var(--gv-ink)}
.gv-sec--dark .gv-flujo-paso p{color:#E1E8F5}
/* Cinco pasos en tres columnas dejan un hueco en la segunda fila, y el hueco
   deja ver el fondo de la rejilla, que es lo que dibuja las divisorias. El
   último paso se estira para cerrarlo. Lo mismo valía ya para dos columnas,
   donde el hueco existía desde el principio. */
.gv-flujo-paso:last-child{grid-column:span 2}
@media (max-width:960px){.gv-flujo{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){main:has(.gv-hero--inicio) .gv-inicio-problema > .gv-wrap{padding-block-end:clamp(46px,13vw,56px)}}
@media (max-width:560px){
  .gv-flujo{grid-template-columns:1fr}
  .gv-flujo-paso:last-child{grid-column:auto}
}

/* ══════════════════ EMBUDO DE MEDICIÓN ══════════════════ */
/* Hoja blanca: fija su color para que no herede el blanco de .gv-sec--dark */
.gv-embudo{background:#fff;color:var(--gv-ink);border:1px solid var(--gv-line);border-radius:var(--gv-r);overflow:hidden}
.gv-embudo-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 22px;background:var(--gv-ink);color:#fff}
.gv-embudo-top strong{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.gv-embudo-top span{font-size:11px;color:#8FA6D4;letter-spacing:.08em}
.gv-embudo ol{list-style:none;margin:0;padding:0}
.gv-embudo li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:15px 22px;border-bottom:1px solid var(--gv-line);position:relative}
.gv-embudo li::after{content:"";position:absolute;left:0;top:0;bottom:0;background:var(--gv-soft);width:var(--w,100%);z-index:0}
.gv-embudo li > *{position:relative;z-index:1}
.gv-embudo b{font-size:15px;font-weight:600;display:block}
.gv-embudo small{display:block;font-size:12.5px;color:var(--gv-mute);margin-top:3px}
.gv-embudo em{font-style:normal;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gv-blue)}
.gv-embudo-foot{padding:13px 22px;font-size:11.5px;line-height:1.5;color:var(--gv-mute);background:#F7F9FD}

/* ══════════════════ COMPARATIVA ══════════════════ */
.gv-vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gv-line);border:1px solid var(--gv-line);border-radius:var(--gv-r);overflow:hidden}
.gv-vs-col{background:#fff;color:var(--gv-ink)}
.gv-vs-col > h4{padding:18px 24px;background:var(--gv-soft);font-size:15px;font-weight:700;font-stretch:106%;border-bottom:1px solid var(--gv-line)}
.gv-vs-col:last-child > h4{background:var(--gv-ink);color:#fff}
.gv-vs dl{margin:0;padding:6px 24px 22px}
.gv-vs dt{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gv-brass);margin-top:20px}
.gv-vs dd{margin:6px 0 0;font-size:var(--gv-in-text);line-height:1.55;color:var(--gv-mute)}
@media (max-width:720px){.gv-vs{grid-template-columns:1fr}}

/* ══════════════════ IMAGEN EN SECCIÓN ══════════════════ */
.gv-media{position:relative;border-radius:var(--gv-r);overflow:hidden;aspect-ratio:16/9;margin-top:clamp(28px,4vw,44px);background:var(--gv-ink)}
.gv-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) contrast(1.02) brightness(1.06)}
.gv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(14,32,72,.6) 0%,rgba(35,74,190,.34) 100%);mix-blend-mode:multiply;pointer-events:none}
.gv-media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 26px;font-size:13.5px;color:#DCE6FA;background:linear-gradient(180deg,transparent,rgba(8,18,40,.85))}
.gv-media--limpia img{filter:none}
.gv-media--limpia::after{display:none}

/* Pieza visual del hero de /servicios/. Encadena en vertical las cinco etapas
   del recorrido, solo con sus nombres: no lleva datos ni descripciones, que
   están en la sección 02. Va sobre fondo oscuro, como el hero.
   Vertical por construcción, así que no puede desbordar a lo ancho. */
/* Punto de la etapa y el hilo que la encadena con la siguiente */

/* ══════════════════ LISTA DOCUMENTAL ══════════════════ */
/* Enumeraciones sin titular propio: filetes horizontales y guion de latón.
   Se usa suelta y dentro de las columnas de .gv-vs. */
.gv-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--gv-line)}
.gv-lista li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--gv-line);font-size:var(--gv-in-text);line-height:1.6;color:var(--gv-mute)}
.gv-lista li::before{content:"";position:absolute;left:0;top:23px;width:14px;height:1px;background:var(--gv-brass)}
/* ══════════════════ LÍNEA TEMPORAL ══════════════════ */
/* Sección 05 de /metodo/: los tres tramos de la implantación sobre un riel
   horizontal que avanza de izquierda a derecha y termina en punta de flecha.
   En móvil el mismo riel se pone en vertical. Sin alturas fijas. */
.gv-timeline{position:relative;list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);counter-reset:t}
/* Riel de avance: llega hasta el final de la tercera columna */
.gv-timeline::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:var(--gv-line)}
/* Punta que cierra el riel, al borde del componente y muy por detrás del
   tercer hito, para que no se lea como continuación de su titular */
.gv-timeline::after{content:"";position:absolute;right:1px;top:12px;width:10px;height:10px;border-top:1px solid var(--gv-line);border-right:1px solid var(--gv-line);transform:translateY(-50%) rotate(45deg)}
.gv-timeline li{position:relative;counter-increment:t;padding:44px 30px 0 0}
/* Hito numerado, sobre el riel */
.gv-timeline-hito{position:absolute;left:0;top:0;width:26px;aspect-ratio:1;border-radius:50%;background:var(--gv-brass);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.gv-timeline-hito::before{content:counter(t,decimal-leading-zero)}
.gv-timeline h3{font-size:16.5px;font-weight:600;margin-bottom:7px}
.gv-timeline p{font-size:var(--gv-in-text);line-height:1.6;color:var(--gv-mute);max-width:36ch}

/* ══════════════════ CICLO DE OPTIMIZACIÓN ══════════════════ */
/* Sección 06 de /metodo/: cinco nodos repartidos sobre un anillo, para que
   se vea que el último paso vuelve al primero. Va sobre fondo oscuro.
   El tamaño lo fija aspect-ratio, no una altura. */
/* El acolchado lateral reserva el sitio de las etiquetas, que van por fuera
   del anillo para que la línea discontinua no pase por detrás de ningún
   texto. El anillo ocupa lo que queda. */
.gv-ciclo{--gv-ciclo-pad:clamp(112px,22.8%,210px);position:relative;width:min(920px,100%);margin:16px auto 0;padding:48px var(--gv-ciclo-pad) 34px}
.gv-ciclo-anillo{position:relative;width:100%;aspect-ratio:1;border:1px dashed rgba(255,255,255,.3);border-radius:50%;display:grid;place-items:center}
/* Punta sobre el anillo, entre el último nodo y el primero. La punta sin
   girar mira al nordeste (45º); la tangente en ese punto del anillo va a
   54º, así que el giro es de 9º. */
.gv-ciclo-anillo::after{content:"";position:absolute;left:20.61%;top:9.55%;width:14px;height:14px;border-top:2px solid var(--gv-brass-l);border-right:2px solid var(--gv-brass-l);transform:translate(-50%,-50%) rotate(9deg)}
.gv-ciclo-centro{text-align:center;max-width:300px}
.gv-ciclo-kicker{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8FA6D4}
.gv-ciclo-titulo{margin-top:7px;font-size:21px;font-weight:700;font-stretch:106%;letter-spacing:.03em;line-height:1.15;text-transform:uppercase;color:var(--gv-brass-l)}
/* Secundario de sección oscura, el mismo que usa .gv-sec--dark .gv-p */
.gv-ciclo-texto{margin:15px auto 0;max-width:280px;font-size:13.5px;line-height:1.55;color:#9DB0D4}

/* La lista se superpone exactamente sobre el cuadrado del anillo */
.gv-ciclo ol{position:absolute;left:var(--gv-ciclo-pad);right:var(--gv-ciclo-pad);top:48px;bottom:34px;list-style:none;margin:0;padding:0;counter-reset:c}
.gv-ciclo li{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;width:150px;text-align:center;counter-increment:c}
/* Cada nodo se apoya en el anillo y su etiqueta sale hacia fuera. Los puntos
   salen de x = 50 + 50·sen θ, y = 50 − 50·cos θ, con θ contado desde arriba
   en sentido horario: 0º, 72º, 144º, 216º y 288º. El desplazamiento de 15px
   es el radio del círculo numerado, para que su centro caiga en el trazado. */
.gv-ciclo li:nth-child(1){left:50%;top:0;flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 15px))}
.gv-ciclo li:nth-child(2){left:97.553%;top:34.549%;flex-direction:row;width:150px;text-align:left;gap:9px;transform:translate(-15px,-50%)}
.gv-ciclo li:nth-child(3){left:79.389%;top:90.451%;transform:translate(-50%,-15px)}
.gv-ciclo li:nth-child(4){left:20.611%;top:90.451%;transform:translate(-50%,-15px)}
.gv-ciclo li:nth-child(5){left:2.447%;top:34.549%;flex-direction:row-reverse;width:150px;text-align:right;gap:9px;transform:translate(calc(-100% + 15px),-50%)}
/* El fondo opaco del nodo corta el anillo por debajo */
.gv-ciclo-nodo{flex:0 0 auto;display:grid;place-items:center;width:30px;aspect-ratio:1;border-radius:50%;background:var(--gv-ink);border:1px solid var(--gv-brass-l);color:var(--gv-brass-l);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.gv-ciclo-nodo::before{content:counter(c,decimal-leading-zero)}
.gv-ciclo-et{font-size:14.5px;font-weight:600;line-height:1.3;color:#fff}

/* La línea temporal se pone de pie antes que el resto: en tres columnas y a
   768 px cada hito se quedaba en 177 px de ancho. El hilo y su punta pasan de
   horizontales a verticales en el mismo corte, o la línea quedaría cruzada
   sobre las tarjetas ya apiladas. El acolchado inferior reserva el sitio de la
   punta, que queda por debajo del último copy en lugar de a su altura. */
@media (max-width:900px){
  .gv-timeline{grid-template-columns:1fr;padding-bottom:44px}
  .gv-timeline::before{left:12px;right:auto;top:12px;bottom:26px;width:1px;height:auto}
  .gv-timeline::after{left:12px;right:auto;top:auto;bottom:8px;transform:translateX(-50%) rotate(135deg)}
  .gv-timeline li{padding:0 0 30px 44px}
  .gv-timeline li:last-child{padding-bottom:0}
}

@media (max-width:720px){
  /* El anillo no cabe: recorrido vertical con línea de continuidad. El hilo
     baja hasta pasado el último nodo y remata en una punta hacia arriba,
     que es la vuelta al primer paso. */
  .gv-ciclo{width:100%;margin-top:22px;padding:0 0 34px}
  /* display:contents disuelve la caja del anillo: se van el borde y el
     cuadrado, y el texto del centro pasa a ser un rótulo en el flujo. */
  .gv-ciclo-anillo{display:contents}
  .gv-ciclo-anillo::after{display:none}
  .gv-ciclo-centro{text-align:left;max-width:none;margin-bottom:20px}
  .gv-ciclo-texto{margin:10px 0 0;max-width:none}
  .gv-ciclo ol{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .gv-ciclo ol::before{content:"";position:absolute;left:14px;top:10px;bottom:-20px;width:1px;border-left:1px dashed rgba(255,255,255,.45)}
  .gv-ciclo ol::after{content:"";position:absolute;left:14px;bottom:-28px;width:11px;height:11px;border-top:1.5px solid var(--gv-brass-l);border-right:1.5px solid var(--gv-brass-l);transform:translate(-50%,0) rotate(-45deg)}
  .gv-ciclo li{position:relative;display:block;transform:none;width:auto;max-width:none;text-align:left;padding:0 0 26px 44px}
  /* Hay que anular con la misma especificidad que las reglas :nth-child del
     anillo; si no, el posicionamiento de escritorio sigue vigente. */
  .gv-ciclo li:nth-child(1),.gv-ciclo li:nth-child(2),.gv-ciclo li:nth-child(3),
  .gv-ciclo li:nth-child(4),.gv-ciclo li:nth-child(5){left:auto;top:auto;transform:none;width:auto;max-width:none;text-align:left}
  .gv-ciclo li:last-child{padding-bottom:0}
  .gv-ciclo-nodo{position:absolute;left:0;top:0;margin:0}
}

/* ══════════════════ PÁGINAS LEGALES ══════════════════ */
/* Ancho y ritmo de lectura para aviso legal, privacidad, cookies y términos.
   Sin raíl, sin hero y sin nada comercial: solo texto. Las cuatro páginas
   comparten estas clases. */
.gv-legal{max-width:800px;margin:0 auto}
.gv-legal-kicker{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gv-blue);margin-bottom:18px}
.gv-legal-titulo{font-size:clamp(30px,4.4vw,38px);font-weight:700;font-stretch:110%;line-height:1.12;letter-spacing:-.018em}
.gv-legal-intro{margin-top:20px;font-family:var(--gv-serif);font-size:18px;line-height:1.6;color:#20325C}
.gv-legal-fecha{margin-top:16px;font-size:13px;color:var(--gv-mute)}

/* Índice compacto */
.gv-legal-indice{margin-top:38px;padding:22px 26px;background:#fff;border:1px solid var(--gv-line);border-radius:var(--gv-r)}
.gv-legal-indice p{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gv-mute);margin-bottom:14px}
.gv-legal-indice ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gv-legal-indice a{font-size:14.5px;line-height:1.4;color:var(--gv-bright)}
.gv-legal-indice a:hover{text-decoration:underline}

/* Apartados, separados por un filete fino. El scroll-margin evita que el
   titular quede debajo de la cabecera fija al llegar desde el índice. */
.gv-legal-apartado{margin-top:42px;padding-top:34px;border-top:1px solid var(--gv-line);scroll-margin-top:calc(var(--gv-head) + 24px)}
.gv-legal-apartado h2{font-size:20px;font-weight:700;font-stretch:106%;line-height:1.3;letter-spacing:-.01em;margin-bottom:16px}
.gv-legal-apartado p{font-size:var(--gv-text-base);line-height:1.7;color:var(--gv-mute)}
.gv-legal-apartado p + p{margin-top:14px}
.gv-legal-apartado a{color:var(--gv-bright)}
.gv-legal-apartado a:hover{text-decoration:underline}

/* Enumeraciones dentro de un apartado legal. El reset general lleva
   list-style:none, así que la viñeta se dibuja aquí: un filete corto azul,
   alineado con la primera línea del texto. Solo afecta a las listas de dentro
   de un apartado: el índice, el menú y el pie quedan fuera del selector. */
.gv-legal-apartado ul{margin-top:16px;padding:0;display:grid;gap:11px}
.gv-legal-apartado ul li{position:relative;padding-left:24px;font-size:var(--gv-text-base);line-height:1.7;color:var(--gv-mute)}
.gv-legal-apartado ul li::before{content:"";position:absolute;left:0;top:13px;width:11px;height:1px;background:var(--gv-blue)}
.gv-legal-apartado ul + p{margin-top:16px}

/* Ficha de identificación del titular */
.gv-legal-ficha{margin-top:22px;padding:24px 26px;background:#fff;border:1px solid var(--gv-line);border-left:3px solid var(--gv-blue);border-radius:0 var(--gv-r) var(--gv-r) 0}
.gv-legal-ficha dt{margin-top:17px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gv-mute)}
.gv-legal-ficha dt:first-child{margin-top:0}
.gv-legal-ficha dd{margin:5px 0 0;font-size:var(--gv-in-text);line-height:1.5;color:var(--gv-ink)}

@media (max-width:560px){
  .gv-legal-indice,.gv-legal-ficha{padding:20px}
}

/* ══════════════════ VARIANTES ══════════════════ */
/* Hero a una columna, para las páginas sin pieza visual a la derecha.
   El ancho se limita para que la línea no se alargue de lado a lado. */
.gv-hero--solo .gv-hero-grid{grid-template-columns:1fr}
.gv-hero--solo .gv-hero-grid > div{max-width:64ch}
.gv-hero--solo .gv-h1{max-width:24ch}

/* Heroes sectoriales. Comparten el hero simple de dos columnas, pero la
   hoja de diagnóstico tiene distinta altura en cada sector y en algunos la
   sección 01 asomaba por debajo del pliegue. Con esto la cabecera y el hero
   llenan la primera pantalla en las seis, y el contenido se centra en vez de
   quedarse arriba. Solo donde hay dos columnas: por debajo de 961 px el hero
   ya crece con su contenido apilado. */
@media (min-width:961px){
  .gv-hero--sector{
    min-height:calc(100svh - var(--gv-head) - 1px);
    display:grid;align-items:center;
  }
}

/* Fotografía del hero sectorial. Un solo componente para las seis páginas:
   lo único que cambia por página es el archivo y el encuadre vertical, que
   viaja en --gv-hf-y declarada en el propio elemento.

   La caja mantiene la proporción 4:5 del archivo en todos los tamaños, así
   que la foto se ve entera y el object-position solo entra en juego si algún
   día el alto disponible obliga a recortar. */
.gv-herofoto{
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--gv-r);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 60px -30px rgba(2,8,24,.65);
  background:var(--gv-ink);
}
/* Absoluta y no height:100%: la altura de la caja en escritorio la fija el
   grid con align-self, y un porcentaje sobre una altura implícita se resuelve
   a cero en algunos motores. Con inset:0 la foto llena la caja siempre. */
.gv-herofoto img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% var(--gv-hf-y,50%);
}
/* Velo navy solo en los bordes: ata la foto al fondo del hero y deja el
   centro —donde está el motivo— a plena claridad. */
.gv-herofoto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,22,50,.26) 0%,
    rgba(10,22,50,.05) 34%,
    rgba(10,22,50,.05) 66%,
    rgba(10,22,50,.30) 100%);
}
/* El encaje en escritorio lo resuelve el bloque compartido
   «EL CREATIVO NO MANDA EN LA ALTURA DE LA FILA», más abajo. */
@media (max-width:960px){
  .gv-herofoto{
    width:min(100%,420px);margin-inline:auto;
    aspect-ratio:4/5;
  }
  .gv-herofoto img{object-position:50% 50%}
}
@media (max-width:720px){
  .gv-herofoto{width:100%}
}

/* Ritmo entre secciones · solo en las seis páginas de sector, que son las
   únicas donde cada sección cierra con una barra de implicación. El padding
   completo de la sección que cierra más el de la que abre dejaba 262 px entre
   la implicación y el kicker siguiente; se leía como un corte. Aquí solo se
   recorta ese encuentro: el padding interior de las tarjetas y la separación
   entre título, párrafo y contenido de una misma sección quedan igual.
   El gancho es el hero sectorial, así que la regla no alcanza a /sectores/
   ni al resto del sitio. */
main:has(.gv-hero--sector) .gv-sec:has(.gv-imp){padding-bottom:clamp(38px,6.1vw,62px)}
main:has(.gv-hero--sector) .gv-sec:has(.gv-imp) + .gv-sec{padding-top:clamp(38px,6.1vw,62px)}

/* Comparativa con las dos columnas al mismo nivel: el color de la segunda
   cabecera daba a entender que una familia era la principal. */
.gv-vs--par .gv-vs-col:last-child > h4{background:var(--gv-soft);color:var(--gv-ink)}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:1000px){
  .gv-nav,.gv-header-cta{display:none}
  .gv-burger{display:grid}
  .gv-footer-in{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .gv-hero-grid{grid-template-columns:1fr}
  .gv-hero .gv-veil{background:linear-gradient(180deg,rgba(10,22,50,.84) 0%,rgba(10,22,50,.72) 100%)}
  .gv-grid3,.gv-fam ul{grid-template-columns:repeat(2,1fr)}
}
/* Tarjeta suelta de las cuadrículas impares.
   Con dos columnas, una cuadrícula de tres o cinco deja la última tarjeta sola
   y pegada a la izquierda. Aquí ocupa la fila entera para poder centrarse, pero
   conserva el ancho de una columna: en una rejilla de dos con hueco G, cada
   columna mide (100% - G)/2, que es exactamente 50% - G/2. Con G de 14 px,
   calc(50% - 7px). Así no se ensancha ni cambia de alto ni de acolchado.
   Solo entre 721 y 960 px: por debajo hay una sola columna y por encima, tres.
   :last-child:nth-child(odd) exige ser el último Y ocupar posición impar, de
   modo que las cuadrículas pares no se enteran. */
@media (min-width:721px) and (max-width:960px){
  .gv-grid3 > :last-child:nth-child(odd),
  .gv-fam ul > :last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc(50% - 7px);
    justify-self:center;
  }
}

@media (max-width:720px){
  .gv-imp{grid-template-columns:1fr;gap:10px}
  .gv-grid3,.gv-fam ul,.gv-footer-in{grid-template-columns:1fr}
  .gv-actions .gv-btn{width:100%;justify-content:center}
  .gv-sheet{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   MÉTODO · INTERIORES
   Todo lo que sigue cuelga de main:has(.gv-hero--metodo): esa cabecera solo
   existe en /metodo/, así que ninguna regla alcanza a otra página. El hero no
   usa ninguna de estas clases, de modo que queda intacto.

   LA IDEA
   Growvanz vende sistemas comerciales, así que el hilo conductor de la
   página es un esquema técnico dibujado con filetes de 1 px y nodos: el
   mismo vocabulario en cuatro gramáticas distintas —radial en el análisis,
   lineal en la decisión, recorrido con bucle en la implantación y dos
   trazados que convergen en las responsabilidades—. Cada circuito tiene su
   color: latón para lo que se observa, azul para lo que se decide, latón
   sobre navy para lo que se construye. Fondo papel continuo salvo la
   implantación, que es el único momento que justifica cambiar de fondo.
   ══════════════════════════════════════════════════════════════════════ */

main:has(.gv-hero--metodo){
  --mh-max:1200px;
  --mh-pad:clamp(20px,4vw,44px);
  --mh-h2:clamp(26px,2.5vw,36px);        /* siempre por debajo del H1 del hero */
  --mh-h3:clamp(18px,calc(.5vw + 15.6px),21px);
  --mh-lead:clamp(18px,calc(.35vw + 16.6px),20px);
  --mh-text:clamp(16px,calc(.22vw + 15.1px),18px);
  --mh-mini:12px;
  --mh-linea:1px solid var(--gv-line);
  --mh-aire:clamp(52px,5.4vw,88px);      /* respiración vertical de sección */
  --mh-salto:clamp(30px,3.4vw,50px);     /* cabecera → esquema, esquema → salida */
  --mh-medida:60ch;
}

main:has(.gv-hero--metodo) .gv-mh-sec{padding-block:var(--mh-aire);background:var(--gv-paper)}
main:has(.gv-hero--metodo) .gv-mh-wrap{max-width:var(--mh-max);margin:0 auto;padding-inline:var(--mh-pad)}
/* Mismo fondo durante varios bloques: el filete es lo que los separa */
main:has(.gv-hero--metodo) .gv-mh-sec--hilo{padding-top:0}
main:has(.gv-hero--metodo) .gv-mh-sec--hilo .gv-mh-wrap{padding-top:var(--mh-aire);border-top:var(--mh-linea)}
main:has(.gv-hero--metodo) .gv-mh-sec--navy{background:var(--gv-ink)}

/* ── Cabeceras ── */
main:has(.gv-hero--metodo) .gv-mh-kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:var(--mh-mini);font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gv-blue)}
main:has(.gv-hero--metodo) .gv-mh-kicker::before{content:"";width:14px;height:2px;background:var(--gv-brass)}
main:has(.gv-hero--metodo) .gv-sec--dark .gv-mh-kicker{color:#8CA8EC}
main:has(.gv-hero--metodo) .gv-sec--dark .gv-mh-kicker::before{background:var(--gv-brass-l)}
main:has(.gv-hero--metodo) .gv-h2{font-size:var(--mh-h2);line-height:1.12;letter-spacing:-.018em;max-width:22ch}
main:has(.gv-hero--metodo) .gv-mh-p{margin:18px 0 0;max-width:var(--mh-medida);font-size:var(--mh-text);line-height:1.66;color:var(--gv-mute)}
main:has(.gv-hero--metodo) .gv-sec--dark .gv-mh-p{color:#C7D3E7}
main:has(.gv-hero--metodo) .gv-mh-entradilla{margin:20px 0 0;max-width:58ch;font-family:var(--gv-serif);font-size:var(--mh-lead);line-height:1.6;color:#20325C}
main:has(.gv-hero--metodo) .gv-mh-nota{margin:var(--mh-salto) 0 0;max-width:70ch;font-size:var(--mh-text);line-height:1.62;color:var(--gv-mute)}
main:has(.gv-hero--metodo) .gv-sec--dark .gv-mh-nota{color:#AEBEDC}
main:has(.gv-hero--metodo) .gv-mh-rotulo{margin:0;font-size:var(--mh-mini);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gv-blue)}

/* ══════════════ 1 · APERTURA CON FOTOGRAFÍA ══════════════
   Copy y fotografía a la misma altura. La imagen no va en tarjeta: filete
   de 1 px, leyenda debajo y nada más. */
main:has(.gv-hero--metodo) .gv-mh-apertura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(30px,4vw,64px);align-items:start}
main:has(.gv-hero--metodo) .gv-mh-destacada{margin:clamp(24px,2.6vw,36px) 0 0;padding-top:18px;max-width:46ch;border-top:2px solid var(--gv-brass);font-family:var(--gv-serif);font-size:clamp(19px,1.5vw,23px);line-height:1.4;color:var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-figura{margin:0}
main:has(.gv-hero--metodo) .gv-mh-figura img{display:block;width:100%;height:auto;border:1px solid var(--gv-line)}
main:has(.gv-hero--metodo) .gv-mh-figura figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--gv-mute)}

/* ══════════════ 1b · MAPA DE LAS CINCO PERSPECTIVAS ══════════════
   Núcleo oscuro al centro, dos tarjetas a cada lado y la quinta colgando en
   vertical. Cada tarjeta entrega un ramal a un colector y el colector cruza
   al núcleo: se lee que las cinco miran el mismo sistema a la vez, no que una
   lleve a la siguiente. Mismo material que el mapa de fugas de las
   sectoriales (.gv-abg-mapa), con cinco piezas en vez de seis. */
main:has(.gv-hero--metodo) .gv-mh-perspectivas{margin-top:clamp(46px,5vw,78px)}
main:has(.gv-hero--metodo) .gv-mh-intro{margin:0;max-width:64ch;font-size:var(--mh-lead);line-height:1.6;color:var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-mapa{
  position:relative;display:grid;
  --mh-gap:clamp(20px,3vw,46px);        /* columna → núcleo */
  --mh-fila:clamp(12px,1.3vw,18px);     /* entre las dos tarjetas de un lado */
  --mh-baja:clamp(26px,3vw,46px);       /* núcleo → tarjeta 05 */
  grid-template-columns:minmax(0,1fr) clamp(200px,17vw,228px) minmax(0,1fr);
  column-gap:var(--mh-gap);row-gap:var(--mh-baja);
  align-items:stretch;
  margin-top:var(--mh-salto);
}
main:has(.gv-hero--metodo) .gv-mh-col{position:relative;z-index:1;display:grid;grid-auto-rows:1fr;gap:var(--mh-fila);margin:0;padding:0}
main:has(.gv-hero--metodo) .gv-mh-col--der{grid-column:3}

/* ── Tarjeta de perspectiva ── */
main:has(.gv-hero--metodo) .gv-mh-persp{
  position:relative;
  background:#fff;border:1px solid var(--gv-line);
  border-top:2px solid var(--gv-blue);      /* filete azul de lado a lado */
  border-radius:var(--gv-r);
  padding:clamp(14px,1.5vw,19px) clamp(15px,1.6vw,21px);
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
main:has(.gv-hero--metodo) .gv-mh-persp-num{display:block;margin:0 0 5px;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--gv-brass);font-variant-numeric:tabular-nums}
main:has(.gv-hero--metodo) .gv-mh-persp h3{margin:0 0 5px;font-size:clamp(15.5px,1.1vw,17px);line-height:1.25;letter-spacing:-.01em;color:var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-persp p{margin:0;font-size:14.5px;line-height:1.5;color:var(--gv-mute)}

/* ── Núcleo ── */
main:has(.gv-hero--metodo) .gv-mh-nucleo{
  position:relative;z-index:1;grid-column:2;grid-row:1;
  justify-self:center;align-self:center;
  display:grid;place-content:center;justify-items:center;gap:8px;
  width:clamp(200px,17vw,228px);aspect-ratio:1;
  margin:0;padding:0 clamp(20px,2vw,28px);
  border-radius:50%;
  /* Volumen ligero: una sola luz alta sobre el navy. Nada holográfico. */
  background:radial-gradient(circle at 50% 26%,#1C2C52 0%,var(--gv-ink) 66%);
  color:#fff;text-align:center;
  box-shadow:0 12px 26px rgba(15,23,42,.15);
}
main:has(.gv-hero--metodo) .gv-mh-nucleo i{width:7px;height:7px;border-radius:50%;background:var(--gv-brass-l)}
main:has(.gv-hero--metodo) .gv-mh-nucleo b{font-size:14.5px;font-weight:700;line-height:1.22;letter-spacing:.06em;text-transform:uppercase}
main:has(.gv-hero--metodo) .gv-mh-nucleo span{font-size:13px;line-height:1.42;color:rgba(255,255,255,.74)}

/* ── Conectores ──
   Colector vertical por lado, ramal horizontal por tarjeta y punto de latón
   en la unión. El colector va de centro a centro de las dos tarjetas. */
main:has(.gv-hero--metodo) .gv-mh-col::before{content:"";position:absolute;top:calc((100% - var(--mh-fila)) / 4);bottom:calc((100% - var(--mh-fila)) / 4);width:1px;background:var(--gv-line)}
main:has(.gv-hero--metodo) .gv-mh-col--izq::before{right:calc(var(--mh-gap) / -2)}
main:has(.gv-hero--metodo) .gv-mh-col--der::before{left:calc(var(--mh-gap) / -2)}
main:has(.gv-hero--metodo) .gv-mh-persp::before{content:"";position:absolute;top:50%;width:calc(var(--mh-gap) / 2);height:1px;background:var(--gv-line)}
main:has(.gv-hero--metodo) .gv-mh-persp::after{content:"";position:absolute;top:50%;width:4.5px;height:4.5px;margin-top:-2px;border-radius:50%;background:var(--gv-brass)}
main:has(.gv-hero--metodo) .gv-mh-col--izq .gv-mh-persp::before{right:calc(var(--mh-gap) / -2)}
main:has(.gv-hero--metodo) .gv-mh-col--izq .gv-mh-persp::after{right:-7px}
main:has(.gv-hero--metodo) .gv-mh-col--der .gv-mh-persp::before{left:calc(var(--mh-gap) / -2)}
main:has(.gv-hero--metodo) .gv-mh-col--der .gv-mh-persp::after{left:-7px}
main:has(.gv-hero--metodo) .gv-mh-nucleo::before,
main:has(.gv-hero--metodo) .gv-mh-nucleo::after{content:"";position:absolute;top:50%;width:calc(var(--mh-gap) / 2);height:1px;background:var(--gv-line)}
main:has(.gv-hero--metodo) .gv-mh-nucleo::before{left:calc(var(--mh-gap) / -2)}
main:has(.gv-hero--metodo) .gv-mh-nucleo::after{right:calc(var(--mh-gap) / -2)}

/* ── La quinta, en vertical bajo el núcleo ── */
main:has(.gv-hero--metodo) .gv-mh-persp--pie{grid-column:1 / -1;grid-row:2;justify-self:center;width:min(100%,440px)}
main:has(.gv-hero--metodo) .gv-mh-persp--pie::before{left:50%;top:calc(-1 * (var(--mh-baja) + 120px));width:1px;height:calc(var(--mh-baja) + 120px)}
main:has(.gv-hero--metodo) .gv-mh-persp--pie::after{left:50%;top:-2px;margin:0 0 0 -2.25px}

@media (hover:hover) and (pointer:fine){
  main:has(.gv-hero--metodo) .gv-mh-persp:hover{transform:translateY(-4px);border-color:var(--gv-bright);border-top-color:var(--gv-cta);box-shadow:0 10px 22px rgba(15,23,42,.10)}
}
@media (prefers-reduced-motion:reduce){
  main:has(.gv-hero--metodo) .gv-mh-persp{transition:none}
  main:has(.gv-hero--metodo) .gv-mh-persp:hover{transform:none}
}

/* ══════════════ 2 · CIRCUITO DE DECISIÓN ══════════════
   Un solo filete recorre las cinco etapas. El criterio abre tres derivaciones
   y la última etapa baja a la hoja de ruta. Azul: aquí se decide. */
/* Banda de la hoja de ruta: acompaña a las tarjetas, no compite con
   ellas. Filete dorado lateral y cinco elementos compactos. */
main:has(.gv-hero--metodo) .gv-mh-salida{position:relative;margin-top:clamp(18px,2vw,26px);padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);background:var(--gv-soft);border-left:3px solid var(--gv-brass);border-radius:0 var(--gv-r) var(--gv-r) 0}
main:has(.gv-hero--metodo) .gv-mh-salida ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(14px,1.6vw,24px);margin:14px 0 0;padding:0;list-style:none}
main:has(.gv-hero--metodo) .gv-mh-salida li{padding:12px 0 0;border-top:1px solid var(--gv-line);font-size:15px;line-height:1.4;color:var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-acuerdo{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin:var(--mh-salto) 0 0;padding-top:18px;border-top:2px solid var(--gv-blue);font-size:var(--mh-lead);line-height:1.4;color:var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-acuerdo i{font-style:normal;color:var(--gv-blue)}
main:has(.gv-hero--metodo) .gv-mh-acuerdo strong{font-weight:700;color:var(--gv-blue)}

/* ══════════════ 3 · RECORRIDO DE 90 DÍAS ══════════════
   Cuatro estaciones sobre una vía continua y, debajo, el bucle que devuelve
   el trabajo al principio: comprobar, medir, ajustar. */

/* ══════════════ 4 · REPARTO DE RESPONSABILIDADES ══════════════
   La página usa las dos tarjetas del componente común. Las reglas de
   .gv-mh-relacion / .gv-mh-parte / .gv-mh-union siguen aquí porque las
   necesita la maqueta interna /pruebas/metodo-hibrido/. */
main:has(.gv-hero--metodo) .gv-mh-relacion{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(36px,5.4vw,96px);margin-top:var(--mh-salto);padding-bottom:72px}
main:has(.gv-hero--metodo) .gv-mh-parte{padding-bottom:22px;border-bottom:var(--mh-linea)}
main:has(.gv-hero--metodo) .gv-mh-parte h3{margin:0 0 12px;font-size:clamp(19px,1.5vw,24px);line-height:1.2;letter-spacing:-.012em}
main:has(.gv-hero--metodo) .gv-mh-parte--gv h3{color:var(--gv-blue)}
main:has(.gv-hero--metodo) .gv-mh-parte--cl h3{color:var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-parte ul{margin:0;padding:0;list-style:none}
main:has(.gv-hero--metodo) .gv-mh-parte li{padding-block:14px;border-top:var(--mh-linea);font-size:var(--mh-text);line-height:1.5;color:var(--gv-mute)}
main:has(.gv-hero--metodo) .gv-mh-union{position:absolute;left:0;bottom:0;width:100%;height:72px;fill:none;stroke:var(--gv-line);stroke-width:1}
main:has(.gv-hero--metodo) .gv-mh-union circle{fill:var(--gv-blue);stroke:none}
main:has(.gv-hero--metodo) .gv-mh-nota--ancha{max-width:78ch;margin-top:clamp(26px,2.8vw,40px);font-family:var(--gv-serif);font-size:var(--mh-lead);line-height:1.6;color:var(--gv-ink)}

/* ══════════════ 5 · PREGUNTAS Y CIERRE ══════════════
   Un solo movimiento: el acordeón entrega el hilo al panel de cierre. */
main:has(.gv-hero--metodo) .gv-mh-faq{--mh-hilo:clamp(28px,3vw,44px);margin:0;max-width:none;border-top:1px solid var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-faq details{border-bottom:var(--mh-linea)}
main:has(.gv-hero--metodo) .gv-mh-faq summary{padding:20px 50px 20px 0;font-size:clamp(17px,1.2vw,19px);font-weight:650;line-height:1.35;color:var(--gv-ink)}
main:has(.gv-hero--metodo) .gv-mh-faq summary::after{top:18px;right:8px}
main:has(.gv-hero--metodo) .gv-mh-faq details[open] summary{color:var(--gv-blue);padding-bottom:10px}
main:has(.gv-hero--metodo) .gv-mh-faq p{max-width:66ch;padding:0 50px 24px 0;font-size:var(--mh-text);line-height:1.66;color:var(--gv-mute)}
main:has(.gv-hero--metodo) .gv-mh-cta{position:relative;margin-top:clamp(28px,3vw,44px);padding:clamp(38px,4.4vw,64px) clamp(24px,4vw,56px);border-radius:var(--gv-r)}
main:has(.gv-hero--metodo) .gv-mh-cta::before{content:"";position:absolute;left:50%;top:calc(-1 * clamp(28px,3vw,44px));width:1px;height:clamp(28px,3vw,44px);background:var(--gv-line)}
main:has(.gv-hero--metodo) .gv-mh-cta h2{max-width:24ch}
main:has(.gv-hero--metodo) .gv-mh-cta p{margin-top:18px}

/* ══════════════ PORTÁTIL ══════════════ */
@media (max-width:1279px){
  main:has(.gv-hero--metodo) .gv-mh-apertura{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
}

/* ══════════════ TABLETA ══════════════
   El mapa radial pasa a rejilla: núcleo arriba a todo el ancho, las cuatro
   primeras en dos columnas y la quinta cerrando. Los conectores se retiran
   antes de empezar a cruzarse. */
@media (max-width:1023px){
  main:has(.gv-hero--metodo) .gv-mh-apertura{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,40px)}
  main:has(.gv-hero--metodo) .gv-mh-figura{max-width:640px}
  main:has(.gv-hero--metodo) .gv-mh-mapa{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--mh-fila);row-gap:var(--mh-fila)}
  main:has(.gv-hero--metodo) .gv-mh-col{display:contents}
  main:has(.gv-hero--metodo) .gv-mh-col::before,
  main:has(.gv-hero--metodo) .gv-mh-persp::before,
  main:has(.gv-hero--metodo) .gv-mh-persp::after,
  main:has(.gv-hero--metodo) .gv-mh-nucleo::before,
  main:has(.gv-hero--metodo) .gv-mh-nucleo::after{content:none;display:none}
  main:has(.gv-hero--metodo) .gv-mh-nucleo{order:-1;grid-column:1 / -1;grid-row:auto;margin:0 auto clamp(6px,1vw,12px)}
  main:has(.gv-hero--metodo) .gv-mh-persp--pie{grid-column:1 / -1;grid-row:auto;width:auto}
  main:has(.gv-hero--metodo) .gv-mh-salida ul{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0}
  main:has(.gv-hero--metodo) .gv-mh-salida li:nth-child(n+4){margin-top:2px}
}

/* ══════════════ MÓVIL ══════════════
   Todos los circuitos se vuelven verticales: una vía a la izquierda y las
   estaciones colgando de ella. Ni una tabla que haya que desplazar. */
@media (max-width:767px){
  main:has(.gv-hero--metodo){--mh-aire:clamp(44px,11vw,60px)}
  main:has(.gv-hero--metodo) .gv-h2{font-size:clamp(26px,6.6vw,31px);max-width:none}
  main:has(.gv-hero--metodo) .gv-mh-figura{max-width:none}
  /* Una sola columna, del 01 al 05. Sin ramales horizontales: queda una
     línea vertical fina que asoma entre tarjeta y tarjeta y sugiere que
     todas cuelgan del mismo núcleo. */
  main:has(.gv-hero--metodo) .gv-mh-mapa{grid-template-columns:minmax(0,1fr)}
  main:has(.gv-hero--metodo) .gv-mh-mapa::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--gv-line)}
  main:has(.gv-hero--metodo) .gv-mh-nucleo{width:min(100%,210px);aspect-ratio:1}
  main:has(.gv-hero--metodo) .gv-mh-persp--pie{width:auto}
  main:has(.gv-hero--metodo) .gv-mh-salida ul,
  main:has(.gv-hero--metodo) .gv-mh-relacion{grid-template-columns:minmax(0,1fr)}
  main:has(.gv-hero--metodo) .gv-mh-relacion{padding-bottom:0;row-gap:32px}
  main:has(.gv-hero--metodo) .gv-mh-union{display:none}
  main:has(.gv-hero--metodo) .gv-mh-salida li{padding-block:12px 0}
  main:has(.gv-hero--metodo) .gv-mh-faq summary{padding-right:38px}
  main:has(.gv-hero--metodo) .gv-mh-faq p{padding-right:0}
  main:has(.gv-hero--metodo) .gv-mh-cta{padding-inline:clamp(20px,6vw,30px)}
}

/* ══════════════════════════════════════════════════════════════════════
   HERO CON CREATIVO LATERAL · BASE Y PÁGINAS
   Base .gv-hero--visual: una pantalla exacta de alto, dos columnas 48/52,
   ritmo tipográfico y panel de cristal (.gv-hv-*). Encima, un modificador
   por página con su creativo: .gv-hero--inicio (.gv-hero-orbe, el orbe
   del sistema) y .gv-hero--servicios (.gv-serv-*, las seis piezas).
   Nada de esto toca componentes compartidos: los heroes que aún no se han
   actualizado siguen usando .gv-hero tal cual.

   El hero no tiene animación de entrada: se pinta directamente en su
   posición final. Lo único que se mueve es el contenido variable de cada
   creativo; el panel en sí no se desplaza, ni gira, ni escala.

   El estado base del marcado es el estado FINAL (todo legible). La
   secuencia solo lo atenúa y lo vuelve a encender, así que sin JS —o con
   prefers-reduced-motion, que apaga toda animación— se ve el sistema
   completo y quieto.
   ══════════════════════════════════════════════════════════════════════ */

.gv-hero.gv-hero--visual{
  --gv-hv-ease:cubic-bezier(.22,1,.36,1);
  --gv-hv-px:clamp(14px,1.3vw,20px);   /* acolchado lateral del panel */
  /* Cabecera + hero = una pantalla exacta. El 1px es el filete inferior de la
     cabecera, que no entra en --gv-head (74px de contenido + 1px de borde). */
  box-sizing:border-box;
  height:calc(100svh - var(--gv-head) - 1px);
  min-height:600px;
  max-height:none;
  padding-block:0;
  display:grid;
  align-items:center;
}
.gv-hero--visual .gv-hero-grid{
  width:100%;
  grid-template-columns:48fr 52fr;
  gap:clamp(20px,3.2vw,48px);
  align-items:center;
}

/* ── Resplandor ambiental detrás del sistema ── */
.gv-hv-halo{
  position:absolute;top:50%;right:-8%;
  width:min(60vw,760px);aspect-ratio:1;
  transform:translateY(-50%);
  background:radial-gradient(circle,rgba(47,107,255,.30) 0%,rgba(47,107,255,.10) 42%,transparent 68%);
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════════
   EL CREATIVO NO MANDA EN LA ALTURA DE LA FILA
   Regla del sistema: en escritorio el creativo derecho nunca puede ser más
   alto que el bloque de copy, ni asomar por encima o por debajo de él.

   Se probaron dos vías en Despachos y Contacto:

   1. align-items:stretch + max-height:100%  ·  NO FUNCIONA.
      La pista de fila es automática, así que sigue tomando el tamaño
      intrínseco del creativo: 522,6 px frente a los 395 del copy. El
      max-height se resuelve contra esa misma altura y no limita nada;
      encima descentra, porque el creativo pasa de sobresalir 64/64 a 0/127.

   2. Sacar el creativo del flujo con position:absolute  ·  SÍ FUNCIONA.
      Un elemento posicionado no aporta tamaño intrínseco a la pista, de modo
      que la fila pasa a valer exactamente lo que mide el copy —medido:
      395,3 px en Despachos, 352,2 en Contacto— y el creativo se ajusta a
      ella. El contenedor .gv-hv-creativo es quien recibe esa altura.

   Solo entra en las páginas que incumplían. Inicio, Servicios y Método ya
   cumplen en escritorio (90 %, 60 % y 84 % del copy) y quedan fuera.
   Por debajo de 961 px todo vuelve al flujo normal, apilado.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:961px){
  :is(.gv-hero--sectores,.gv-hero--acerca,.gv-hero--sector) .gv-hero-grid{
    align-items:stretch;
  }
  :is(.gv-hero--sectores,.gv-hero--acerca,.gv-hero--sector) .gv-hv-creativo{
    position:relative;
    min-height:0;
  }
  .gv-hero--sectores .gv-orb,
  .gv-hero--acerca .gv-acd,
  .gv-hero--sector .gv-herofoto{
    position:absolute;
    inset:0;
    margin:auto;
  }
  /* Fotografías: la fila da el alto y el 4:5 saca el ancho, así que se
     reducen enteras, conservan su proporción y no se recorta nada. El
     inset:0 solo sirve de marco de centrado; quien manda es height. */
  .gv-hero--acerca .gv-acd,
  .gv-hero--sector .gv-herofoto{
    height:100%;
    width:auto;
    max-width:100%;
    aspect-ratio:4 / 5;
  }
  /* Órbita: cede su alto fijo de 380 px y toma el de la fila. Las cinco
     cartas conservan su tamaño y sus posiciones 3D —que viven en los
     keyframes— así que no se escala ni se recorta nada; lo que se ajusta es
     el aire de la caja alrededor de la órbita. */
  .gv-hero--sectores .gv-orb{height:100%}
}
/* Cuando la fila se queda por debajo de los 300 px que mide la carta central,
   las cinco cartas se reducen para seguir cabiendo dentro de la caja. Se
   cambia su tamaño real y su punto de anclaje, no un scale del conjunto. */
@media (min-width:961px) and (max-width:1100px){
  .gv-hero--sectores .gv-orb-foto{
    width:200px;
    margin:-125px 0 0 -100px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   AMBIENTACIÓN DE OFICINA · PRUEBA EN DESPACHOS DE ABOGADOS
   Capa decorativa independiente entre el fondo técnico (.gv-duo) y el velo
   navy (.gv-veil), en ese orden del marcado: el fondo técnico sigue intacto
   debajo, el velo la integra encima y el copy, los botones y la fotografía
   del sector quedan por delante, porque .gv-hero-grid va después.
   Solo de 961 px hacia arriba.
   ══════════════════════════════════════════════════════════════════════ */
.gv-amb{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--gv-amb-img);
  background-size:cover;
  background-position:var(--gv-amb-pos,center top);
  background-repeat:no-repeat;
  opacity:var(--gv-amb-opacity,.32);
}
/* PRUEBA · el hero de Inicio deja de pintar la capa técnica heredada de
   :root (fondo-tecnico.svg) y se apoya solo en la fotografía ambiental,
   como las landings. Para revertir basta con borrar --gv-img:none. */
.gv-hero--inicio{--gv-amb-img:url('/img/hero-ambiente-inicio.webp');--gv-img:none}
/* PRUEBA · también se apaga la cuadrícula decorativa de .gv-mesh y el halo
   azul, que solo existían en este hero. Revertir = borrar esta regla y
   devolver el div .gv-hv-halo a index.html. */
.gv-hero--inicio.gv-mesh::before{content:none}
/* La foto de Inicio se dibujaba al 32 % sobre el navy sólido de .gv-duo:
   pasa a opacidad completa y se aclara. Solo este hero. */
.gv-hero--inicio .gv-amb{opacity:1;filter:brightness(1.08) contrast(.97) saturate(.98)}
/* Sombra muy suave: protege el copy sin volver a oscurecer la fotografía. */
.gv-hero--inicio .gv-hv-copy .gv-kicker,.gv-hero--inicio .gv-hv-copy .gv-h1,
.gv-hero--inicio .gv-hv-copy .gv-lead,.gv-hero--inicio .gv-hv-copy .gv-trust{text-shadow:0 1px 3px rgba(7,17,38,.55)}
/* Velo de Inicio: navy fuerte solo detrás del copy, centro medio y derecha
   casi limpia, con un cierre suave abajo. Escritorio; el móvil no cambia. */
@media (min-width:961px){
  .gv-hero--inicio .gv-veil{background:
    linear-gradient(90deg,rgba(7,17,38,.68) 0%,rgba(7,17,38,.52) 28%,rgba(7,17,38,.22) 48%,rgba(7,17,38,.06) 65%,rgba(7,17,38,0) 78%),
    linear-gradient(180deg,rgba(7,17,38,.02) 55%,rgba(7,17,38,.20) 100%)}
}
.gv-hero--servicios{--gv-amb-img:url('/img/hero-ambiente-servicios.webp')}
.gv-hero--sectores{--gv-amb-img:url('/img/hero-ambiente-sectores.webp')}
.gv-hero--metodo{--gv-amb-img:url('/img/hero-ambiente-metodo.webp')}
.gv-hero--contacto{--gv-amb-img:url('/img/hero-ambiente-contacto.webp')}
.gv-hero--acerca{--gv-amb-img:url('/img/hero-ambiente-acerca.webp');--gv-amb-opacity:.26}
.gv-hero--sector{--gv-amb-img:url('/img/hero-ambiente-sectoriales.webp')}
@media (min-width:961px) and (max-width:1100px){
  .gv-amb{background-position:right top}
}
@media (max-width:960px){
  .gv-amb{display:none}
}

/* ══════ COLUMNA DE TEXTO ══════
   El ritmo de esta columna lo comparten los heroes visuales y los seis
   sectoriales: mismo kicker, misma escala de H1 (--gv-title-1-hero, no la
   general --gv-title-1), misma entradilla, mismos botones e indicadores y
   los mismos huecos entre ellos. Se agrupan con :is() para que haya una
   sola fuente de verdad y ningún bloque duplicado.
   Lo que NO comparten las sectoriales es el alto fijo ni la rejilla 48/52
   del hero visual: conservan su min-height y sus columnas, porque su
   creativo es una fotografía y no un panel. */
:is(.gv-hero--visual,.gv-hero--sector) .gv-kicker{margin-bottom:clamp(12px,1.9vh,22px)}
:is(.gv-hero--visual,.gv-hero--sector) .gv-h1{
  font-size:var(--gv-title-1-hero);
  font-stretch:108%;
  line-height:1.1;
}
.gv-hv-bloque{display:block}
.gv-hv-b2{margin-top:.3em}
main:has(.gv-hero--inicio) .gv-hv-b1{color:#fff}
main:has(.gv-hero--inicio) .gv-hv-b2{color:var(--gv-brass-l)}
:is(.gv-hero--visual,.gv-hero--sector) .gv-lead{
  margin-top:clamp(12px,2vh,20px);
  max-width:520px;
  line-height:1.55;
}
:is(.gv-hero--visual,.gv-hero--sector) .gv-actions{margin-top:clamp(16px,2.6vh,28px)}
:is(.gv-hero--visual,.gv-hero--sector) .gv-btn{padding:14px 24px;font-size:14.5px}

/* Indicadores: mismo texto, presentación más limpia (filete en vez de raya) */
:is(.gv-hero--visual,.gv-hero--sector) .gv-trust{
  position:relative;border-top:0;
  margin-top:clamp(16px,2.6vh,28px);
  padding-top:clamp(11px,1.8vh,18px);
  gap:6px 0;font-size:12.5px;color:#C7D3E7;
}
:is(.gv-hero--visual,.gv-hero--sector) .gv-trust::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(255,255,255,.18);
}
/* Marca de viñeta dibujada, no un carácter tipográfico. Al envolverse en
   dos renglones no deja separadores sueltos al principio de línea. */
:is(.gv-hero--visual,.gv-hero--sector) .gv-trust li{display:inline-flex;align-items:center;gap:8px;margin-right:22px}
:is(.gv-hero--visual,.gv-hero--sector) .gv-trust li::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gv-brass-l);margin-right:0;flex:0 0 auto;
}

/* ══════ PANEL DE CRISTAL ══════ */
.gv-hv-panel{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:rgba(12,29,65,.68);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(132,165,232,.22);
  border-radius:var(--gv-r);
  box-shadow:0 28px 70px rgba(2,8,24,.45),inset 0 1px 0 rgba(255,255,255,.07);
}
/* Reflejo interior. Va dentro del propio panel: no dibuja un segundo marco. */
.gv-hv-panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0));
  pointer-events:none;
}
.gv-hv-panel-top{
  position:relative;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:clamp(9px,1.3vh,13px) var(--gv-hv-px);
  border-bottom:1px solid rgba(132,165,232,.20);
  background:rgba(255,255,255,.04);
}
.gv-hv-panel-tit{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#E2EAFC}
.gv-hv-panel-nota{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#93A8D2;white-space:nowrap}

.gv-hv-pie{
  padding:clamp(8px,1.2vh,12px) var(--gv-hv-px);
  border-top:1px solid rgba(132,165,232,.18);
  font-size:10.5px;line-height:1.45;color:#9DB0D6;
}

/* ══════════════════════════════════════════════════════════════════════
   SERVICIOS · LAS SEIS PIEZAS
   Un único recorrido: Captación → Landing → CRM → núcleo → Seguimiento →
   Ventas → Medición, que cierra devolviendo al núcleo. Tres piezas a la
   izquierda, el núcleo en medio y tres a la derecha; las conexiones son
   solo horizontales y verticales, así que no se cruzan.

   Estado base = sistema conectado: luces encendidas, conexiones dibujadas
   y el núcleo en dorado. La secuencia solo se aplica bajo .gv-serv-on, que
   pone hero.js, de modo que sin JS —o con movimiento reducido— el esquema
   se ve entero y quieto, nunca apagado.

   Ciclo de 9,5 s: 0,2 s Captación · 1,2 Landing · 2,2 CRM · 3,3 núcleo ·
   4,4 Seguimiento · 5,4 Ventas · 6,4 Medición · 7,5 circuito cerrado ·
   7,6 «Sistema conectado» · 8,8-9,2 apagado suave y reinicio.
   ══════════════════════════════════════════════════════════════════════ */

.gv-hero--servicios{--gv-serv-ciclo:9.5s}

/* Orden de capas dentro del mapa: fondo del panel · conexiones · tarjetas ·
   núcleo · textos e iconos. El mapa abre contexto de apilado para que ese
   orden no dependa de la posición en el marcado. */
.gv-serv-mapa{
  position:relative;z-index:0;
  margin:clamp(12px,2.2vh,24px) 0;
  padding:0 var(--gv-hv-px);
  display:grid;grid-template-columns:repeat(3,1fr);
}
/* Las conexiones van detrás de las piezas: solo se ven en los huecos, así
   que la geometría no necesita casar al píxel con las tarjetas. */
/* Alto y ancho declarados, no top/bottom: un SVG es un elemento
   reemplazado y con height:auto adoptaría la proporción del viewBox. */
.gv-serv-red{
  position:absolute;top:0;left:var(--gv-hv-px);
  width:calc(100% - var(--gv-hv-px) * 2);height:100%;
}
.gv-serv-base path,.gv-serv-hilo{vector-effect:non-scaling-stroke;fill:none}
.gv-serv-base path{stroke:rgba(255,255,255,.15);stroke-width:1.4}
.gv-serv-hilo{
  stroke:#4C86FF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:0;
}
/* Dorado solo en el tramo que cierra el circuito */
.gv-serv-hilo--7{stroke:var(--gv-brass-l)}

.gv-serv-col{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,1fr)}
.gv-serv-modulo{
  position:relative;
  display:flex;align-items:center;gap:10px;
  margin:5px 0;padding:11px 12px;
  border:1px solid rgba(132,165,232,.16);
  border-radius:var(--gv-r);
  /* Opaca a propósito: el panel sigue siendo de cristal, pero ninguna
     conexión se transparenta a través de una pieza. */
  background:rgba(21,40,82,.95);
}
/* La capa de luz es lo único que se enciende: el nombre se lee siempre */
.gv-serv-luz{
  position:absolute;inset:-1px;border-radius:var(--gv-r);
  border:1px solid rgba(124,168,255,.8);
  background:rgba(76,134,255,.09);
  pointer-events:none;
}
/* Puertos: marcan dónde toca cada conexión el borde exterior. Van fuera
   del texto, con un cerco del color del panel para que la línea muera
   justo ahí. Por defecto salida abajo y entrada arriba; las piezas que
   conectan de lado los llevan al costado. */
.gv-serv-modulo::before,
.gv-serv-modulo::after,
.gv-serv-puerto{
  content:"";position:absolute;z-index:1;
  width:5px;height:5px;border-radius:50%;
  background:#4C86FF;
  box-shadow:0 0 0 2px rgba(14,31,68,.92);
}
.gv-serv-modulo::before,
.gv-serv-modulo::after{left:50%;transform:translateX(-50%)}
.gv-serv-modulo::before{top:-3px}
.gv-serv-modulo::after{bottom:-3px}
.gv-serv-m--1::before{content:none}
.gv-serv-m--3::after{top:50%;bottom:auto;left:auto;right:-3px;transform:translateY(-50%)}
.gv-serv-m--4::before{top:50%;left:-3px;transform:translateY(-50%)}
.gv-serv-m--6::after{top:50%;bottom:auto;left:-3px;transform:translateY(-50%)}
.gv-serv-puerto--sal{top:-3px;left:50%;transform:translateX(-50%)}
.gv-serv-puerto--ent{bottom:-3px;left:32%;transform:translateX(-50%)}
.gv-serv-puerto--cie{bottom:-3px;left:68%;transform:translateX(-50%);background:var(--gv-brass-l)}

.gv-serv-icono{position:relative;z-index:1;flex:0 0 auto;color:#A8C4FF;line-height:0}
.gv-serv-icono svg{width:22px;height:22px}
.gv-serv-nombre{position:relative;z-index:1;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#F2F6FF}

.gv-serv-nucleo{
  position:relative;align-self:center;
  z-index:3;
  margin:0 10px;padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  border:1px solid rgba(132,165,232,.2);
  border-radius:var(--gv-r);
  background:rgba(21,40,82,.95);
}
.gv-serv-nucleo .gv-serv-luz{border-color:rgba(76,134,255,.5);background:rgba(76,134,255,.12)}
/* El borde pasa a dorado con un resplandor corto; el núcleo no cambia de
   tamaño en ningún momento, solo se funden capas. */
.gv-serv-oro{
  position:absolute;inset:-1px;border-radius:var(--gv-r);
  border:1px solid rgba(201,168,94,.62);
  background:rgba(201,168,94,.09);
  box-shadow:0 0 20px rgba(201,168,94,.16);
  pointer-events:none;
}
.gv-serv-nucleo-tit{position:relative;z-index:1;font-size:12.5px;font-weight:600;line-height:1.3;color:#fff}
.gv-serv-estado{
  position:relative;z-index:1;
  padding-top:7px;margin-top:1px;
  border-top:1px solid rgba(201,168,94,.28);
  align-self:stretch;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gv-brass-l);
}

/* ── La secuencia, solo cuando hero.js la enciende ──
   Los puertos se encienden con su pieza y el icono aclara de #8098C9 a #A8C4FF.
   El puerto dorado del cierre entra con el estado final. */
.gv-serv-on .gv-serv-luz,
.gv-serv-on .gv-serv-oro,
.gv-serv-on .gv-serv-estado,
.gv-serv-on .gv-serv-puerto,
.gv-serv-on .gv-serv-icono,
.gv-serv-on .gv-serv-modulo::before,
.gv-serv-on .gv-serv-modulo::after,
.gv-serv-on .gv-serv-hilo{animation:var(--gv-serv-ciclo) linear infinite}
.gv-serv-on .gv-serv-m--1 .gv-serv-luz,
.gv-serv-on .gv-serv-m--1::before,
.gv-serv-on .gv-serv-m--1::after{animation-name:gv-serv-m1}
.gv-serv-on .gv-serv-m--1 .gv-serv-icono{animation-name:gv-serv-i1}
.gv-serv-on .gv-serv-m--2 .gv-serv-luz,
.gv-serv-on .gv-serv-m--2::before,
.gv-serv-on .gv-serv-m--2::after{animation-name:gv-serv-m2}
.gv-serv-on .gv-serv-m--2 .gv-serv-icono{animation-name:gv-serv-i2}
.gv-serv-on .gv-serv-m--3 .gv-serv-luz,
.gv-serv-on .gv-serv-m--3::before,
.gv-serv-on .gv-serv-m--3::after{animation-name:gv-serv-m3}
.gv-serv-on .gv-serv-m--3 .gv-serv-icono{animation-name:gv-serv-i3}
.gv-serv-on .gv-serv-m--4 .gv-serv-luz,
.gv-serv-on .gv-serv-m--4::before,
.gv-serv-on .gv-serv-m--4::after{animation-name:gv-serv-m4}
.gv-serv-on .gv-serv-m--4 .gv-serv-icono{animation-name:gv-serv-i4}
.gv-serv-on .gv-serv-m--5 .gv-serv-luz,
.gv-serv-on .gv-serv-m--5::before,
.gv-serv-on .gv-serv-m--5::after{animation-name:gv-serv-m5}
.gv-serv-on .gv-serv-m--5 .gv-serv-icono{animation-name:gv-serv-i5}
.gv-serv-on .gv-serv-m--6 .gv-serv-luz,
.gv-serv-on .gv-serv-m--6::before,
.gv-serv-on .gv-serv-m--6::after{animation-name:gv-serv-m6}
.gv-serv-on .gv-serv-m--6 .gv-serv-icono{animation-name:gv-serv-i6}
.gv-serv-on .gv-serv-hilo--1{animation-name:gv-serv-h1}
.gv-serv-on .gv-serv-hilo--2{animation-name:gv-serv-h2}
.gv-serv-on .gv-serv-hilo--3{animation-name:gv-serv-h3}
.gv-serv-on .gv-serv-hilo--4{animation-name:gv-serv-h4}
.gv-serv-on .gv-serv-hilo--5{animation-name:gv-serv-h5}
.gv-serv-on .gv-serv-hilo--6{animation-name:gv-serv-h6}
.gv-serv-on .gv-serv-hilo--7{animation-name:gv-serv-h7}
.gv-serv-on .gv-serv-nucleo .gv-serv-luz,
.gv-serv-on .gv-serv-puerto--sal,
.gv-serv-on .gv-serv-puerto--ent{animation-name:gv-serv-n}
.gv-serv-on .gv-serv-oro,
.gv-serv-on .gv-serv-estado,
.gv-serv-on .gv-serv-puerto--cie{animation-name:gv-serv-fin}

/* Fuera de pantalla no se pinta nada */
.gv-hv-pausa .gv-serv-luz,
.gv-hv-pausa .gv-serv-oro,
.gv-hv-pausa .gv-serv-estado,
.gv-hv-pausa .gv-serv-puerto,
.gv-hv-pausa .gv-serv-icono,
.gv-hv-pausa .gv-serv-modulo::before,
.gv-hv-pausa .gv-serv-modulo::after,
.gv-hv-pausa .gv-serv-hilo{animation-play-state:paused}

@keyframes gv-serv-m1{
  0%,2.1%{opacity:0}
  6.3%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

@keyframes gv-serv-i1{
  0%,2.1%{color:#8098C9}
  6.3%,92.6%{color:#A8C4FF}
  96.8%,100%{color:#8098C9}
}

@keyframes gv-serv-m2{
  0%,12.6%{opacity:0}
  16.8%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

@keyframes gv-serv-i2{
  0%,12.6%{color:#8098C9}
  16.8%,92.6%{color:#A8C4FF}
  96.8%,100%{color:#8098C9}
}

@keyframes gv-serv-m3{
  0%,23.2%{opacity:0}
  27.4%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

@keyframes gv-serv-i3{
  0%,23.2%{color:#8098C9}
  27.4%,92.6%{color:#A8C4FF}
  96.8%,100%{color:#8098C9}
}

@keyframes gv-serv-n{
  0%,34.7%{opacity:0}
  38.9%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

@keyframes gv-serv-m4{
  0%,46.3%{opacity:0}
  50.5%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

@keyframes gv-serv-i4{
  0%,46.3%{color:#8098C9}
  50.5%,92.6%{color:#A8C4FF}
  96.8%,100%{color:#8098C9}
}

@keyframes gv-serv-m5{
  0%,56.8%{opacity:0}
  61.1%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

@keyframes gv-serv-i5{
  0%,56.8%{color:#8098C9}
  61.1%,92.6%{color:#A8C4FF}
  96.8%,100%{color:#8098C9}
}

@keyframes gv-serv-m6{
  0%,67.4%{opacity:0}
  71.6%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

@keyframes gv-serv-i6{
  0%,67.4%{color:#8098C9}
  71.6%,92.6%{color:#A8C4FF}
  96.8%,100%{color:#8098C9}
}

@keyframes gv-serv-h1{
  0%,6.3%{stroke-dashoffset:100}
  12.6%,92.6%{stroke-dashoffset:0}
  96.8%,100%{stroke-dashoffset:100}
}

@keyframes gv-serv-h2{
  0%,16.8%{stroke-dashoffset:100}
  23.2%,92.6%{stroke-dashoffset:0}
  96.8%,100%{stroke-dashoffset:100}
}

@keyframes gv-serv-h3{
  0%,27.4%{stroke-dashoffset:100}
  34.7%,92.6%{stroke-dashoffset:0}
  96.8%,100%{stroke-dashoffset:100}
}

@keyframes gv-serv-h4{
  0%,38.9%{stroke-dashoffset:100}
  46.3%,92.6%{stroke-dashoffset:0}
  96.8%,100%{stroke-dashoffset:100}
}

@keyframes gv-serv-h5{
  0%,50.5%{stroke-dashoffset:100}
  56.8%,92.6%{stroke-dashoffset:0}
  96.8%,100%{stroke-dashoffset:100}
}

@keyframes gv-serv-h6{
  0%,61.1%{stroke-dashoffset:100}
  67.4%,92.6%{stroke-dashoffset:0}
  96.8%,100%{stroke-dashoffset:100}
}

@keyframes gv-serv-h7{
  0%,71.6%{stroke-dashoffset:100}
  78.9%,92.6%{stroke-dashoffset:0}
  96.8%,100%{stroke-dashoffset:100}
}

@keyframes gv-serv-fin{
  0%,80.0%{opacity:0}
  84.2%,92.6%{opacity:1}
  96.8%,100%{opacity:0}
}

/* ══════════════════════════════════════════════════════════════════════
   MÉTODO · ESCÁNER DE DIAGNÓSTICO
   Una línea recorre las tres áreas en las que la propia página divide el
   diagnóstico —generar demanda, convertirla y hacer seguimiento—, marca
   una fricción en cada una y, al terminar, quedan ordenadas con la escala
   real de la casa: INMEDIATA, ALTA y MEJORA. Los chips son el componente
   global .gv-chip, consumido sin tocar su CSS.

   Estado base = diagnóstico terminado: las tres pistas al máximo, las tres
   fricciones marcadas, las tres prioridades visibles, «Prioridades
   definidas» en la cabecera y el escáner oculto. La secuencia solo se
   aplica bajo .gv-met-on, que pone hero.js, así que sin JS —o con
   movimiento reducido— se ve el final, quieto y completo.

   Ciclo de 9,5 s: «Analizando» de salida · 0,4-5,6 recorrido · cada área
   se ilumina y suelta su fricción al pasar la línea (1,86 / 3,26 / 4,56 s)
   · 5,9-6,5 entran las prioridades · 7,0 «Prioridades definidas» ·
   8,6-9,1 apagado suave y reinicio.
   ══════════════════════════════════════════════════════════════════════ */

.gv-hero--metodo{--gv-met-ciclo:9.5s;--gv-met-nom:96px}

/* Cuerpo del panel en rejilla: zona de pistas, rótulo y prioridades. Nada
   se maqueta en absoluto salvo el carril del escáner. */
.gv-met-diag{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  gap:clamp(9px,1.5vh,15px);
  padding:clamp(10px,1.6vh,16px) var(--gv-hv-px) clamp(10px,1.4vh,14px);
}

.gv-met-zonas{position:relative}
.gv-met-areas{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gv-met-area{
  list-style:none;min-height:58px;
  display:grid;grid-template-columns:var(--gv-met-nom) minmax(0,1fr);
  align-items:center;gap:12px;
}
.gv-met-area-nom{
  position:relative;z-index:3;
  font-size:12px;font-weight:600;letter-spacing:-.01em;color:#EAF0FC;
}
.gv-met-pista{
  position:relative;display:block;height:40px;
  border:1px solid rgba(132,165,232,.16);
  border-radius:var(--gv-r);
  background:rgba(255,255,255,.04);
}
/* La pista no depende de ninguna animación para tener medidas: alto fijo,
   SVG a tamaño completo y trazos de grosor constante. Los nodos son trazos
   de longitud cero con extremo redondo, así que son círculos exactos
   aunque el viewBox se estire. */
.gv-met-traza{display:block;width:100%;height:100%;opacity:1}
.gv-met-eje,.gv-met-nodo{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.gv-met-eje{stroke:rgba(150,182,255,.45);stroke-width:1.4}
.gv-met-nodo{stroke:#8FB2FF;stroke-width:4.5}
.gv-met-friccion{
  position:absolute;z-index:2;top:50%;left:var(--gv-met-x);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--gv-brass-l);
  box-shadow:0 0 0 3px rgba(201,168,94,.22);
}
.gv-met-area--1{--gv-met-x:28%}
.gv-met-area--2{--gv-met-x:55%}
.gv-met-area--3{--gv-met-x:80%}
/* El carril del escáner vive dentro de la zona de pistas y empieza donde
   acaba la etiqueta: no puede alcanzar los nombres, ni el rótulo, ni las
   prioridades, ni la cabecera, ni el pie. La cabeza es el borde derecho de
   un degradado casi transparente, así que se lee como una línea con halo y
   no como una barra de carga. */
.gv-met-escaner{
  position:absolute;z-index:2;top:0;bottom:0;
  left:calc(var(--gv-met-nom) + 12px);right:0;
  overflow:hidden;border-radius:var(--gv-r);pointer-events:none;
}
.gv-met-escaner::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:100%;opacity:0;
  background:linear-gradient(90deg,rgba(76,134,255,0) 0%,rgba(76,134,255,0) 90%,rgba(76,134,255,.16) 96%,rgba(143,178,255,.85) 99.3%,#C8D9FF 100%);
}

/* Estado de la cabecera: los dos textos comparten celda, solo uno visible,
   y el ancho lo reserva el más largo. */
.gv-met-estado{
  display:grid;justify-items:end;text-align:right;
  padding-left:18px;
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.gv-met-estado > span{grid-area:1/1;opacity:0;visibility:hidden}
.gv-met-estado-fin{opacity:1;visibility:visible;color:var(--gv-brass-l)}
.gv-met-estado-ana{color:#9DB8F2}

/* Prioridades: una fila por chip y texto, sin marcadores de lista */
.gv-met-rotulo{
  padding-top:clamp(7px,1.1vh,11px);
  border-top:1px solid rgba(132,165,232,.16);
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#8FA4CE;
}
.gv-met-plan{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gv-met-plan li::marker{content:""}
.gv-met-prio{
  list-style:none;
  display:grid;grid-template-columns:92px minmax(0,1fr);
  align-items:start;gap:10px;
}
/* El chip llega de la sección 03, donde su ancho lo daba la rejilla de la
   hoja de diagnóstico. Aquí lleva ancho propio y no se estira. */
.gv-met-prio .gv-chip{width:92px;justify-self:start;margin-top:1px}
.gv-met-prio-txt{font-size:12px;line-height:1.45;color:#D6E1F7}
/* La secuencia, solo cuando hero.js la enciende */
.gv-met-on .gv-met-escaner::before{animation:gv-met-barrido var(--gv-met-ciclo) linear infinite}
.gv-met-on .gv-met-traza,
.gv-met-on .gv-met-friccion,
.gv-met-on .gv-met-prio{animation:var(--gv-met-ciclo) ease-out infinite}
.gv-met-on .gv-met-area--1 .gv-met-traza{animation-name:gv-met-t1}
.gv-met-on .gv-met-area--2 .gv-met-traza{animation-name:gv-met-t2}
.gv-met-on .gv-met-area--3 .gv-met-traza{animation-name:gv-met-t3}
.gv-met-on .gv-met-area--1 .gv-met-friccion{animation-name:gv-met-f1}
.gv-met-on .gv-met-area--2 .gv-met-friccion{animation-name:gv-met-f2}
.gv-met-on .gv-met-area--3 .gv-met-friccion{animation-name:gv-met-f3}
.gv-met-on .gv-met-prio--1{animation-name:gv-met-p1}
.gv-met-on .gv-met-prio--2{animation-name:gv-met-p2}
.gv-met-on .gv-met-prio--3{animation-name:gv-met-p3}
.gv-met-on .gv-met-estado-ana{animation:gv-met-ana var(--gv-met-ciclo) linear infinite}
.gv-met-on .gv-met-estado-fin{animation:gv-met-fin var(--gv-met-ciclo) linear infinite}

/* Fuera de pantalla no se pinta nada */
.gv-hv-pausa .gv-met-escaner::before,
.gv-hv-pausa .gv-met-traza,
.gv-hv-pausa .gv-met-friccion,
.gv-hv-pausa .gv-met-prio,
.gv-hv-pausa .gv-met-estado-ana,
.gv-hv-pausa .gv-met-estado-fin{animation-play-state:paused}

@keyframes gv-met-barrido{
  0%{transform:translate3d(-100%,0,0);opacity:0}
  7.9%{opacity:1}
  58.9%{transform:translate3d(0,0,0);opacity:1}
  62.1%,100%{transform:translate3d(0,0,0);opacity:0}
}

@keyframes gv-met-t1{
  0%,19.6%{opacity:.45}
  22.7%,90.5%{opacity:1}
  95.8%,100%{opacity:.45}
}

@keyframes gv-met-f1{
  0%,19.6%{opacity:0;transform:scale(.4)}
  22.5%,90.5%{opacity:1;transform:none}
  95.8%,100%{opacity:0;transform:scale(.4)}
}

@keyframes gv-met-t2{
  0%,34.3%{opacity:.45}
  37.5%,90.5%{opacity:1}
  95.8%,100%{opacity:.45}
}

@keyframes gv-met-f2{
  0%,34.3%{opacity:0;transform:scale(.4)}
  37.3%,90.5%{opacity:1;transform:none}
  95.8%,100%{opacity:0;transform:scale(.4)}
}

@keyframes gv-met-t3{
  0%,48.0%{opacity:.45}
  51.2%,90.5%{opacity:1}
  95.8%,100%{opacity:.45}
}

@keyframes gv-met-f3{
  0%,48.0%{opacity:0;transform:scale(.4)}
  50.9%,90.5%{opacity:1;transform:none}
  95.8%,100%{opacity:0;transform:scale(.4)}
}

@keyframes gv-met-p1{
  0%,62.1%{opacity:0;transform:translate3d(0,6px,0)}
  66.3%,90.5%{opacity:1;transform:none}
  95.8%,100%{opacity:0;transform:translate3d(0,6px,0)}
}

@keyframes gv-met-p2{
  0%,65.3%{opacity:0;transform:translate3d(0,6px,0)}
  69.5%,90.5%{opacity:1;transform:none}
  95.8%,100%{opacity:0;transform:translate3d(0,6px,0)}
}

@keyframes gv-met-p3{
  0%,68.4%{opacity:0;transform:translate3d(0,6px,0)}
  72.6%,90.5%{opacity:1;transform:none}
  95.8%,100%{opacity:0;transform:translate3d(0,6px,0)}
}

@keyframes gv-met-ana{
  0%,70.5%{opacity:1;visibility:visible}
  73.7%,100%{opacity:0;visibility:hidden}
}

@keyframes gv-met-fin{
  0%,70.5%{opacity:0;visibility:hidden}
  73.7%,100%{opacity:1;visibility:visible}
}

/* Solo en móvil: pulso por pista y prioridades que se encienden sin
   moverse. El estado pendiente se lee sin esfuerzo —opacidad .55 y algo
   de desaturación— y sigue distinguiéndose con claridad del activo. */
@keyframes gv-met-pulso1{
  0%,5.3%{opacity:0;transform:translateX(-100%)}
  7.4%{opacity:1}
  19.6%{opacity:1;transform:translateX(-72.0%)}
  21.1%,100%{opacity:0;transform:translateX(-72.0%)}
}
@keyframes gv-met-pulso2{
  0%,21.1%{opacity:0;transform:translateX(-100%)}
  23.2%{opacity:1}
  34.3%{opacity:1;transform:translateX(-45.0%)}
  35.8%,100%{opacity:0;transform:translateX(-45.0%)}
}
@keyframes gv-met-pulso3{
  0%,36.8%{opacity:0;transform:translateX(-100%)}
  38.9%{opacity:1}
  48.0%{opacity:1;transform:translateX(-20.0%)}
  49.5%,100%{opacity:0;transform:translateX(-20.0%)}
}

/* Solo en móvil: el estado pendiente de cada prioridad se distingue por el
   aspecto del chip, no atenuando la fila. La fila permanece en opacity:1 y
   su texto no se anima, así que se lee igual desde el primer fotograma. */
@keyframes gv-met-chip1{
  0%,57.9%{background-color:#CFC7C4;color:#6B2412;box-shadow:inset 0 0 0 1px rgba(58,70,98,.3)}
  62.1%,90.5%{background-color:#FDEDE9;color:#A63A20;box-shadow:inset 0 0 0 1px rgba(58,70,98,0)}
  95.8%,100%{background-color:#CFC7C4;color:#6B2412;box-shadow:inset 0 0 0 1px rgba(58,70,98,.3)}
}
@keyframes gv-met-chip2{
  0%,64.2%{background-color:#CFCBC0;color:#5A4210;box-shadow:inset 0 0 0 1px rgba(58,70,98,.3)}
  68.4%,90.5%{background-color:#FDF3E0;color:#8A6417;box-shadow:inset 0 0 0 1px rgba(58,70,98,0)}
  95.8%,100%{background-color:#CFCBC0;color:#5A4210;box-shadow:inset 0 0 0 1px rgba(58,70,98,.3)}
}
@keyframes gv-met-chip3{
  0%,70.5%{background-color:#C8CEDA;color:#1F3A78;box-shadow:inset 0 0 0 1px rgba(58,70,98,.3)}
  74.7%,90.5%{background-color:var(--gv-soft);color:var(--gv-blue);box-shadow:inset 0 0 0 1px rgba(58,70,98,0)}
  95.8%,100%{background-color:#C8CEDA;color:#1F3A78;box-shadow:inset 0 0 0 1px rgba(58,70,98,.3)}
}

/* ══════════════════════════════════════════════════════════════════════
   SECTORES · LA ÓRBITA
   Seis negocios reales repartidos en una elipse con perspectiva: uno en el
   centro y delante, dos a los lados en un plano intermedio, dos al fondo y
   uno más al fondo por el centro. Las seis se ven a la vez y ninguna queda
   tapada del todo.

   Un solo reloj: las seis recorren la MISMA secuencia, gv-orb-orbita, con la
   misma duración y el mismo easing. Lo único que las separa es un desfase
   de un sexto de vuelta, declarado con animation-delay negativo después del
   atajo `animation` para que no se lo lleve por delante. Así ninguna tarjeta
   tiene línea de tiempo propia y no hay nada que pueda desincronizarse por
   mucho que dure la vuelta.

   La perspectiva la abre .gv-orb y el espacio 3D lo sostiene .gv-orb-escena,
   sin overflow, sin opacity y sin transform propios para no aplanarlo. Las
   seis fotos son hijas directas suyas y comparten contexto.
   ══════════════════════════════════════════════════════════════════════ */

/* La columna de Sectores es más corta que la de los otros heroes —no lleva
   indicadores— y el creativo es más bajo que sus paneles, así que al
   centrarse verticalmente arrancaba unos 50 px por debajo. Se sube la
   rejilla entera: texto y órbita a la vez, nunca uno solo. Va sobre la
   rejilla de esta página; la compartida no lleva ningún transform y el alto
   del hero no cambia. */
.gv-hero--sectores .gv-hero-grid{transform:translateY(clamp(-70px,-6svh,-30px))}

.gv-orb{
  position:relative;
  height:380px;
  perspective:1000px;
}
/* El contexto 3D vive aquí. Nada de overflow, opacity ni transform: los tres
   aplanarían el espacio y devolverían las cinco fotos al mismo plano. */
.gv-orb-escena{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}
.gv-orb-foto{
  position:absolute;top:50%;left:50%;
  width:240px;aspect-ratio:4/5;
  margin:-150px 0 0 -120px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 30px rgba(2,8,24,.28);
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.gv-orb-foto img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.03);
}
/* Velo de marca muy contenido: integra sin apagar */
.gv-orb-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(14,32,72,.20) 0%,rgba(28,58,132,.12) 100%);
}
/* Capa estática del pie, igual en las cinco */
.gv-orb-foto::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  background:linear-gradient(0deg,rgba(6,16,40,.72) 0%,rgba(6,16,40,.32) 50%,rgba(6,16,40,0) 100%);
  pointer-events:none;
}
.gv-orb-rotulo{
  position:absolute;z-index:2;left:13px;right:13px;bottom:11px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#F2F6FF;white-space:nowrap;
}

/* ── Estado estático: las cinco en su posición de la órbita ──
   Fuera de cualquier @keyframes, así que es lo que se ve sin JavaScript y
   con movimiento reducido. Los cinco transforms son distintos. */
.gv-orb-foto--1{transform:translate3d(0px,0px,100px) rotateY(0deg) scale(1);opacity:1;z-index:50}
.gv-orb-foto--2{transform:translate3d(148px,12px,0px) rotateY(-20deg) scale(0.78);opacity:0.88;z-index:40}
.gv-orb-foto--3{transform:translate3d(262px,30px,-180px) rotateY(-28deg) scale(0.6);opacity:0.65;z-index:20}
.gv-orb-foto--4{transform:translate3d(0px,38px,-240px) rotateY(0deg) scale(.48);opacity:.5;z-index:5}
.gv-orb-foto--5{transform:translate3d(-262px,30px,-180px) rotateY(28deg) scale(0.6);opacity:0.65;z-index:10}
.gv-orb-foto--6{transform:translate3d(-148px,12px,0px) rotateY(20deg) scale(0.78);opacity:0.88;z-index:40}


/* ══════ VUELTA DE LA ÓRBITA ══════
   20,4 s en seis tramos de 3,4 s: 2,72 s de lectura y 0,68 s de paso, los
   mismos tiempos y el mismo easing de siempre; la vuelta entera dura un
   tramo más porque hay una posición más. Una única secuencia para las seis
   tarjetas y un desfase de 3,4 s entre cada una, de modo que en cada tramo
   hay exactamente seis posiciones ocupadas por seis tarjetas distintas.
   El único movimiento es el cambio de posición en la órbita: ninguna foto
   gira sobre su eje ni se mueve estando en su sitio. */
.gv-orb-ciclo .gv-orb-foto{animation:gv-orb-orbita 20.4s linear infinite}
.gv-orb-ciclo .gv-orb-foto--1{animation-delay:0s}
.gv-orb-ciclo .gv-orb-foto--2{animation-delay:-17s}
.gv-orb-ciclo .gv-orb-foto--3{animation-delay:-13.6s}
.gv-orb-ciclo .gv-orb-foto--4{animation-delay:-10.2s}
.gv-orb-ciclo .gv-orb-foto--5{animation-delay:-6.8s}
.gv-orb-ciclo .gv-orb-foto--6{animation-delay:-3.4s}

/* Fuera de pantalla no se pinta nada */
.gv-hv-pausa .gv-orb-foto{animation-play-state:paused}

@keyframes gv-orb-orbita{
  0%{transform:translate3d(0px,0px,100px) rotateY(0deg) scale(1);opacity:1;z-index:50}
  13.333%{transform:translate3d(0px,0px,100px) rotateY(0deg) scale(1);opacity:1;z-index:50;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  14.9%{z-index:50}
  15%{z-index:40}
  16.667%{transform:translate3d(-148px,12px,0px) rotateY(20deg) scale(0.78);opacity:0.88;z-index:40}
  30%{transform:translate3d(-148px,12px,0px) rotateY(20deg) scale(0.78);opacity:0.88;z-index:40;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  31.567%{z-index:40}
  31.667%{z-index:10}
  33.333%{transform:translate3d(-262px,30px,-180px) rotateY(28deg) scale(0.6);opacity:0.65;z-index:10}
  46.667%{transform:translate3d(-262px,30px,-180px) rotateY(28deg) scale(0.6);opacity:0.65;z-index:10;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  48.233%{z-index:10}
  48.333%{z-index:5}
  50%{transform:translate3d(0px,38px,-240px) rotateY(0deg) scale(.48);opacity:.5;z-index:5}
  63.333%{transform:translate3d(0px,38px,-240px) rotateY(0deg) scale(.48);opacity:.5;z-index:5;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  64.9%{z-index:5}
  65%{z-index:20}
  66.667%{transform:translate3d(262px,30px,-180px) rotateY(-28deg) scale(0.6);opacity:0.65;z-index:20}
  80%{transform:translate3d(262px,30px,-180px) rotateY(-28deg) scale(0.6);opacity:0.65;z-index:20;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  81.567%{z-index:20}
  81.667%{z-index:40}
  83.333%{transform:translate3d(148px,12px,0px) rotateY(-20deg) scale(0.78);opacity:0.88;z-index:40}
  96.667%{transform:translate3d(148px,12px,0px) rotateY(-20deg) scale(0.78);opacity:0.88;z-index:40;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  98.233%{z-index:40}
  98.333%{z-index:50}
  100%{transform:translate3d(0px,0px,100px) rotateY(0deg) scale(1);opacity:1;z-index:50}
}

/* ── Rótulos ──
   Cada uno vive dentro de su <figure>, así que hereda el transform de su
   foto: viaja con ella por toda la órbita, escala con ella y se hunde con
   ella. No tiene animación propia ni la puede tener: la versión anterior
   los encendía y apagaba con una segunda línea de tiempo, y bastaba con que
   las dos derivasen unos milisegundos para que un título acabara anunciando
   una fotografía que ya no estaba en el centro. Sin animación no hay nada
   que sincronizar. Los cinco se leen siempre; los del fondo salen pequeños
   solos, porque su tarjeta entera está escalada. */



/* ══════════════════════════════════════════════════════════════════════
   SECTORES · ÓRBITA EN MÓVIL
   Juego propio de posiciones y de secuencias, con los valores escritos, no
   con variables: las custom properties dentro de un transform animado son
   justo la abstracción que conviene evitar aquí. Las dos del fondo suben
   por encima de las intermedias en vez de separarse más a los lados, que
   es como se lee una elipse en escorzo cuando no sobra ancho.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  .gv-orb{height:300px;perspective:900px}
  .gv-orb-foto{width:180px;margin:-112.5px 0 0 -90px}
  /* Medido con la propia Archivo en peso 700: con .1em los tres rótulos
     largos no cabían en los 158 px útiles de la tarjeta y se recortaban.
     10 px es el suelo acordado; el interletraje absorbe el resto. */
  .gv-orb-rotulo{left:11px;right:11px;bottom:10px;font-size:10px;letter-spacing:.04em}

  .gv-orb-foto--1{transform:translate3d(0px,0px,80px) rotateY(0deg) scale(1);opacity:1;z-index:50}
  .gv-orb-foto--2{transform:translate3d(90px,18px,0px) rotateY(-18deg) scale(0.72);opacity:0.88;z-index:40}
  .gv-orb-foto--3{transform:translate3d(122px,-40px,-100px) rotateY(-26deg) scale(0.58);opacity:0.68;z-index:20}
  .gv-orb-foto--4{transform:translate3d(0px,-50px,-134px) rotateY(0deg) scale(0.46);opacity:0.5;z-index:5}
  .gv-orb-foto--5{transform:translate3d(-122px,-40px,-100px) rotateY(26deg) scale(0.58);opacity:0.68;z-index:10}
  .gv-orb-foto--6{transform:translate3d(-90px,18px,0px) rotateY(18deg) scale(0.72);opacity:0.88;z-index:40}

  /* Solo cambia la trayectoria: la duracion y los desfases son los mismos. */
  .gv-orb-ciclo .gv-orb-foto{animation-name:gv-orb-orbita-m}
}

@keyframes gv-orb-orbita-m{
  0%{transform:translate3d(0px,0px,80px) rotateY(0deg) scale(1);opacity:1;z-index:50}
  13.333%{transform:translate3d(0px,0px,80px) rotateY(0deg) scale(1);opacity:1;z-index:50;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  14.9%{z-index:50}
  15%{z-index:40}
  16.667%{transform:translate3d(-90px,18px,0px) rotateY(18deg) scale(0.72);opacity:0.88;z-index:40}
  30%{transform:translate3d(-90px,18px,0px) rotateY(18deg) scale(0.72);opacity:0.88;z-index:40;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  31.567%{z-index:40}
  31.667%{z-index:10}
  33.333%{transform:translate3d(-122px,-40px,-100px) rotateY(26deg) scale(0.58);opacity:0.68;z-index:10}
  46.667%{transform:translate3d(-122px,-40px,-100px) rotateY(26deg) scale(0.58);opacity:0.68;z-index:10;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  48.233%{z-index:10}
  48.333%{z-index:5}
  50%{transform:translate3d(0px,-50px,-134px) rotateY(0deg) scale(0.46);opacity:0.5;z-index:5}
  63.333%{transform:translate3d(0px,-50px,-134px) rotateY(0deg) scale(0.46);opacity:0.5;z-index:5;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  64.9%{z-index:5}
  65%{z-index:20}
  66.667%{transform:translate3d(122px,-40px,-100px) rotateY(-26deg) scale(0.58);opacity:0.68;z-index:20}
  80%{transform:translate3d(122px,-40px,-100px) rotateY(-26deg) scale(0.58);opacity:0.68;z-index:20;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  81.567%{z-index:20}
  81.667%{z-index:40}
  83.333%{transform:translate3d(90px,18px,0px) rotateY(-18deg) scale(0.72);opacity:0.88;z-index:40}
  96.667%{transform:translate3d(90px,18px,0px) rotateY(-18deg) scale(0.72);opacity:0.88;z-index:40;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  98.233%{z-index:40}
  98.333%{z-index:50}
  100%{transform:translate3d(0px,0px,80px) rotateY(0deg) scale(1);opacity:1;z-index:50}
}

/* Pantallas muy estrechas: la órbita ya no cabe entera, así que se reduce
   el conjunto en bloque. El escalado va en .gv-orb, que solo abre la
   perspectiva; el contexto 3D de .gv-orb-escena queda intacto. */
@media (max-width:380px){
  .gv-orb{transform:scale(.85);transform-origin:center center;height:270px}
  /* La columna útil baja de 280 px: el rótulo y la numeración ceden ancho
     para que el texto no se quede en tres palabras por línea. */
  .gv-sheet-row{grid-template-columns:72px 1fr}
  .gv-step{grid-template-columns:44px 1fr}
}
/* Sectores: una única trayectoria orbital para las seis tarjetas. Cada
   tarjeta recorre exactamente la misma ruta con un desfase de un sexto. */
/* ══════ RESPONSIVE DEL HERO ══════ */
/* Saltos de línea controlados solo donde hay dos columnas. Ahí cada renglón
   es una ventana con su propia máscara; por debajo el texto vuelve a fluir
   y quien entra es el bloque entero. */
@media (min-width:961px){
  .gv-hv-fila{display:block}
}
/* Portátiles bajos: se recorta tipografía y aire antes que altura */
@media (max-height:780px){
  .gv-hero.gv-hero--visual{min-height:560px}
}
/* Pantallas de verdad bajas. Se redefine la variable en vez de declarar el
   tamaño: la fuente de verdad sigue siendo una sola y el hero cabe igual.
   El umbral era 780 px, pero medida la columna de texto sobraban 219 px
   incluso en 1280x720, así que la reducción arrancaba demasiado pronto. */
@media (max-height:700px){
  :is(.gv-hero--visual,.gv-hero--sector){--gv-title-1-hero:clamp(26px,2.2vw,34px)}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-lead{font-size:15.5px}
}
@media (max-height:680px){
  .gv-hero.gv-hero--visual{min-height:0}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-kicker{margin-bottom:10px;padding:5px 12px}
  :is(.gv-hero--visual,.gv-hero--sector){--gv-title-1-hero:clamp(24px,2vw,30px)}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-lead{font-size:14.5px;line-height:1.5}
  .gv-hv-pie{display:none}
  .gv-serv-modulo{padding:9px 10px;margin:4px 0}
  .gv-serv-icono svg{width:19px;height:19px}
  .gv-serv-nucleo{padding:11px 9px}
  .gv-met-area{min-height:50px}
  .gv-met-pista{height:34px}
  .gv-met-areas{gap:7px}
}
/* Alturas muy pequeñas: el hero crece con su contenido, nunca lo recorta */
@media (max-height:560px){
  .gv-hero.gv-hero--visual{height:auto;min-height:0;padding-block:44px}
  /* Aquí el hero ya crece con su contenido: subirlo lo metería bajo la cabecera */
  .gv-hero--sectores .gv-hero-grid{transform:none}
}
/* Una columna: texto primero, sistema después */
@media (max-width:960px){
  .gv-hero.gv-hero--visual{height:auto;min-height:0;padding-block:clamp(44px,7vw,72px)}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-hero-grid{grid-template-columns:1fr;gap:clamp(30px,6vw,44px)}
  /* Sectores: en una columna el hero ya se ajusta a su contenido */
  .gv-hero--sectores .gv-hero-grid{transform:none}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-h1{font-size:clamp(30px,5vw,44px)}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-lead{font-size:17px}
  .gv-hv-halo{right:-30%;width:min(90vw,620px)}
  .gv-hv-creativo{max-width:520px}
  /* El recorrido pasa a vertical en el mismo orden de lectura: las tres
     piezas de entrada, el núcleo y las tres de salida. Las conexiones en
     SVG dejan paso a un enlace corto entre piezas apiladas. */
  .gv-serv-mapa{grid-template-columns:1fr}
  .gv-serv-red{display:none}
  .gv-serv-col{grid-template-rows:none}
  .gv-serv-nucleo{
    align-self:stretch;margin:5px 0;padding:11px 12px;
    flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px;
  }

/* Una columna, pero centrada.
   .gv-hv-creativo lleva max-width:520px y es un ítem de grid: su justify-self
   por defecto es stretch, y al no poder estirar se resuelve como start, o sea
   pegado a la izquierda. Cerca de 960 px eso dejaba 360 px de hueco muerto a
   la derecha. Se centra el ítem y se le pone medida a la columna de texto,
   que hasta ahora se estiraba hasta el borde mientras la entradilla se
   quedaba en 520. El texto sigue alineado a la izquierda: lo que se centra
   son los bloques, no su contenido. */
@media (min-width:721px) and (max-width:960px){
  .gv-hero--visual .gv-hv-copy{max-width:700px;margin-inline:auto}
  .gv-hero--visual .gv-hv-creativo{justify-self:center}
  /* El creativo de Contacto no tiene ancho intrínseco fijo —sus tarjetas van
     en %—, así que sin una medida propia se encogía al contenido y quedaba
     pegado a la izquierda. Con width y margin-inline:auto se centra de
     verdad, sin falsearlo con translateX. */
  .gv-hero--contacto .gv-hv-creativo{width:min(520px,100%);margin-inline:auto}
  /* Acerca de: misma medida y mismo centrado. La foto llena la columna
     porque aquí el límite ya lo pone el creativo, no el 86 % de escritorio. */
  .gv-hero--acerca .gv-hv-creativo{width:min(520px,100%);margin-inline:auto}
}
  .gv-serv-modulo::before,
  .gv-serv-puerto{display:none}
  .gv-serv-modulo::after,
  .gv-serv-nucleo::after{
    content:"";position:absolute;z-index:1;
    left:50%;bottom:-10px;top:auto;right:auto;
    width:1px;height:10px;border-radius:0;
    background:rgba(255,255,255,.22);box-shadow:none;
    transform:translateX(-50%);animation:none;
  }
  .gv-serv-col--b .gv-serv-modulo:last-child::after{display:none}
  /* Método en vertical: el nombre sube sobre su pista y el barrido general
     del panel desaparece; en su lugar cada pista tiene su propio pulso. El
     bloque de prioridades arranca justo detrás de la última pista. */
  .gv-met-diag{gap:10px}
  .gv-met-area{grid-template-columns:minmax(0,1fr);gap:5px;min-height:0}
  .gv-met-area-nom{justify-self:start}
  .gv-met-rotulo{padding-top:9px}
  .gv-hero--metodo .gv-met-escaner{display:none}
  /* El pulso ocupa todo el ancho de su pista pero solo se ve su punta, así
     que viaja con transform, no sale del contenedor y muere en la fricción,
     que es la que se enciende a continuación. */
  .gv-met-pista{overflow:hidden}
  .gv-met-pista::after{
    content:"";position:absolute;z-index:1;top:50%;left:0;
    width:100%;height:3px;margin-top:-1.5px;
    background:linear-gradient(90deg,rgba(143,178,255,0) 0%,rgba(143,178,255,0) 93%,rgba(143,178,255,.5) 97.5%,#C8D9FF 100%);
    transform:translateX(-100%);opacity:0;
  }
  .gv-met-on .gv-met-area--1 .gv-met-pista::after{animation:gv-met-pulso1 var(--gv-met-ciclo) linear infinite}
  .gv-met-on .gv-met-area--2 .gv-met-pista::after{animation:gv-met-pulso2 var(--gv-met-ciclo) linear infinite}
  .gv-met-on .gv-met-area--3 .gv-met-pista::after{animation:gv-met-pulso3 var(--gv-met-ciclo) linear infinite}
  .gv-hv-pausa .gv-met-pista::after{animation-play-state:paused}
  /* Las prioridades se leen enteras desde el primer fotograma: la fila
     nunca baja de opacity:1 y el texto no se anima. Lo que distingue el
     estado pendiente es el aspecto del chip. */
  .gv-met-on .gv-met-prio{animation:none}
  .gv-met-on .gv-met-prio--1 .gv-chip{animation:gv-met-chip1 var(--gv-met-ciclo) linear infinite}
  .gv-met-on .gv-met-prio--2 .gv-chip{animation:gv-met-chip2 var(--gv-met-ciclo) linear infinite}
  .gv-met-on .gv-met-prio--3 .gv-chip{animation:gv-met-chip3 var(--gv-met-ciclo) linear infinite}
  .gv-hv-pausa .gv-met-prio .gv-chip{animation-play-state:paused}
}
@media (max-width:560px){
  :is(.gv-hero--visual,.gv-hero--sector) .gv-kicker{font-size:10.5px;letter-spacing:.1em}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-trust{flex-direction:column;gap:7px}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-trust li{margin-right:0}
  .gv-hv-panel-nota{display:none}
  .gv-hv-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,29,65,.86)}
  /* En pantallas estrechas el chip se estrecha, pero la fila sigue siendo
     chip y texto, sin superponerse */
  .gv-met-prio{grid-template-columns:82px minmax(0,1fr);gap:9px}
  .gv-met-prio .gv-chip{width:82px}
}

/* ══════════════════════════════════════════════════════════════════════
   FASE 2 · LEGIBILIDAD DE LAS SECCIONES INTERIORES
   Los textos de lectura y los títulos de tarjeta subían de tamaño solo a
   partir de 961 px. Por debajo no se toca nada: móvil y tablet conservan
   exactamente los valores con los que se aprobaron, y por eso el bloque va
   en min-width y no en el ritmo desktop-first del resto del archivo.

   Solo cambia font-size. Los line-height de estos componentes son todos sin
   unidad (1.3 a 1.7) o heredados, así que se recalculan solos y mantienen la
   proporción. No se tocan peso, interletraje, medida, acolchado ni altura, ni
   los textos funcionales pequeños —kickers, numeraciones, chips, raíl,
   dashboard, creativos, rótulos orbitales y pie—, que son interfaz y no
   lectura.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:961px){
  /* ── Textos de lectura ──
     .gv-p y los legales ya no aparecen aquí: los sirve --gv-text-base. */
  .gv-fam p{font-size:15.5px}

  /* ── Títulos de tarjeta y de bloque ── */
  .gv-famhead h3{font-size:20px}
  .gv-fam h4,
  .gv-step h3,.gv-step h4,
  .gv-timeline h3,
  .gv-faq summary{font-size:19px}
  .gv-vs-col > h4,
  .gv-flujo-paso h3,.gv-flujo-paso h4{font-size:18px}
}

/* Segundo escalón, desde 1280 px. No es una duplicación: entre 961 y 1279 px
   manda el bloque de arriba y a partir de 1280 este lo sobreescribe, que es
   donde la columna de texto deja de crecer y el aire lateral empieza a sobrar.
   Mismo criterio: solo font-size, nada de medidas ni de textos de interfaz. */
@media (min-width:1280px){
  /* ── Textos de lectura ── */
  .gv-fam p{font-size:16.5px}

  /* ── Títulos de tarjeta y de bloque ── */
  .gv-famhead h3{font-size:21px}
  .gv-fam h4,
  .gv-step h3,.gv-step h4,
  .gv-timeline h3,
  .gv-faq summary{font-size:19.5px}
  .gv-vs-col > h4,
  .gv-flujo-paso h3,.gv-flujo-paso h4{font-size:19px}
}

/* ══════════════════════════════════════════════════════════════════════
   FASE 3 · ESCALA DE HEROES Y PIE
   Solo tipografía. No se tocan la rejilla 48/52, la altura del hero, el
   centrado vertical, los fondos, los paneles ni los creativos.

   Los dos bloques de hero llevan además min-height, porque por debajo hay
   reglas que encogen el H1 y la entradilla para que el hero quepa en una
   pantalla y un min-width a secas las habría pisado. El umbral está en
   701 px tras medir la columna de texto: incluso en 1280x720, la más
   apretada, el bloque ocupa 426 px de los 645 del hero y sobran 219. Por
   debajo de 701 px de alto mandan las reglas reducidas de siempre.

   Afecta a los seis heroes con .gv-hero--visual —Inicio, Servicios,
   Método, Sectores, Contacto y Acerca de— y también a las seis
   sectoriales, que desde ahora comparten esta escala.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:961px) and (min-height:701px){
  :is(.gv-hero--visual,.gv-hero--sector) .gv-kicker{font-size:12.5px}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-btn{font-size:15.5px}
  :is(.gv-hero--visual,.gv-hero--sector) .gv-trust{font-size:14px}
}

/* ── Pie ──
   El logo del pie mide 25 px de alto frente a los 24,2 de la cabecera, así
   que ya es el mayor de los dos y no se toca. Los títulos de columna y la
   barra legal suben también por debajo de 961 px porque estaban por debajo
   de 14 px; el resto solo en escritorio. */
.gv-footer-col h3{font-size:12px}
.gv-footer-bar p,
.gv-footer-bar a{font-size:13.5px}
@media (min-width:961px){
  .gv-footer-marca p{font-size:15.5px}
  .gv-footer-col a,
  .gv-footer-contacto address{font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACTO · SOLICITUD ATENDIDA
   Tres tarjetas de cristal solapadas que cuentan una secuencia humana: la
   solicitud llega, una persona la revisa y esa persona responde. Nada de
   tabla de campos ni de panel de administración.

   La composición no desborda: la tarjeta del acuse va centrada al 86 % y
   las otras dos se alinean a los bordes del creativo, así que sobresalen
   respecto a ella pero nunca respecto a la columna. Sin rotate, sin scale
   y sin 3D; la profundidad la dan el borde, la sombra y unos pocos píxeles
   de solape vertical.
   ══════════════════════════════════════════════════════════════════════ */

.gv-con-pila{position:relative;display:grid}

.gv-con-t{
  position:relative;
  border:1px solid rgba(132,165,232,.24);
  border-radius:var(--gv-r);
  background:rgba(12,29,65,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 18px 44px rgba(2,8,24,.38);
}
/* La del acuse manda: centrada y la más ancha */
.gv-con-t--acuse{width:91%;justify-self:center;z-index:1}
/* Las otras dos se alinean a los bordes: sobresalen respecto a la primera,
   no respecto al creativo, así que la composición cabe justa. */
.gv-con-t--rev{width:84%;justify-self:start;z-index:2;margin-top:clamp(-8px,-.8vh,-5px)}
.gv-con-t--paso{width:84%;justify-self:end;z-index:3;margin-top:clamp(-8px,-.8vh,-5px)}

/* ── Tarjeta del acuse ── */
.gv-con-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:clamp(12px,1.7vh,16px) clamp(16px,1.5vw,22px);
  border-bottom:1px solid rgba(132,165,232,.2);
  background:rgba(255,255,255,.04);
}
.gv-con-marca{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#E2EAFC}
.gv-con-ref{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gv-brass-l);white-space:nowrap}
.gv-con-acuse{
  display:flex;align-items:center;gap:16px;
  padding:clamp(24px,3.3vh,32px) clamp(16px,1.5vw,22px);
}
.gv-con-ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:50%;
}
.gv-con-ico svg{width:23px;height:23px}
.gv-con-ico--ok{background:rgba(95,209,160,.14);border:1px solid rgba(95,209,160,.4);color:#7BE0B4}
.gv-con-ico--chat{background:rgba(201,168,94,.12);border:1px solid rgba(201,168,94,.36);color:var(--gv-brass-l)}
.gv-con-tit{font-size:17px;font-weight:600;color:#F2F6FF;letter-spacing:-.01em}
.gv-con-hora{margin-top:3px;font-size:11.5px;color:#8FA4CE;font-variant-numeric:tabular-nums}

/* ── Revisión personal ── */
.gv-con-t--rev{padding:clamp(18px,2.6vh,25px) clamp(16px,1.5vw,22px)}
.gv-con-et{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gv-brass-l)}
.gv-con-txt{margin-top:8px;font-size:14.5px;line-height:1.5;color:#DDE6F8}
.gv-con-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;padding:0;list-style:none}
.gv-con-tags li{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#A9BCE2;
  padding:4px 9px;border:1px solid rgba(132,165,232,.24);border-radius:99px;
}

/* ── Próximo paso ── */
.gv-con-t--paso{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;
  padding:clamp(18px,2.6vh,25px) clamp(16px,1.5vw,22px);
  align-items:start;
}
.gv-con-pil{
  grid-column:2;justify-self:start;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--gv-brass-l);
  padding:5px 12px;border-radius:99px;
  border:1px solid rgba(201,168,94,.38);background:rgba(201,168,94,.10);
}

/* ══════ CICLO · 11 s ══════
   La solicitud se cuenta en orden: cada tarjeta entra cuando le toca y se
   queda. Lo que aún no ha entrado está en opacity:0, no aclarado, para que
   se lea como una secuencia y no como tres cosas a medio encender.

   0 % el acuse ya está · 5-15 % entra la revisión personal · 32-42 % entra el
   próximo paso · 50-58 % se enciende la píldora · 58-92 % las tres visibles,
   pausa de lectura de algo más de tres segundos · 92-97 % fundido de salida ·
   97-100 % vuelve el acuse, que es como arranca el ciclo siguiente.

   Solo opacidad, translateY de 6 px, color y borde. Nada de escala ni 3D:
   ninguna tarjeta cambia de sitio ni de tamaño, así que la composición mide
   lo mismo en todos los fotogramas.

   Sin JS o con movimiento reducido no se aplica ninguna de estas reglas y
   las tres se ven al 100 %. */
.gv-con-ciclo .gv-con-t,
.gv-con-ciclo .gv-con-pil{animation:11s linear infinite}
.gv-con-ciclo .gv-con-t--acuse{animation-name:gv-con-a}
.gv-con-ciclo .gv-con-t--rev{animation-name:gv-con-b}
.gv-con-ciclo .gv-con-t--paso{animation-name:gv-con-c}
.gv-con-ciclo .gv-con-pil{animation-name:gv-con-p}

/* Fuera de pantalla no se pinta nada */
.gv-hv-pausa .gv-con-t,
.gv-hv-pausa .gv-con-pil{animation-play-state:paused}

@keyframes gv-con-a{
  0%,92%{opacity:1;transform:none}
  97%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:none}
}
@keyframes gv-con-b{
  0%,5%{opacity:0;transform:translateY(6px)}
  15%,92%{opacity:1;transform:none}
  97%,100%{opacity:0;transform:translateY(6px)}
}
@keyframes gv-con-c{
  0%,32%{opacity:0;transform:translateY(6px)}
  42%,92%{opacity:1;transform:none}
  97%,100%{opacity:0;transform:translateY(6px)}
}
@keyframes gv-con-p{
  0%,50%{border-color:rgba(201,168,94,.16);box-shadow:none;color:#96854F}
  58%,92%{border-color:rgba(201,168,94,.42);box-shadow:0 0 0 3px rgba(201,168,94,.09);color:var(--gv-brass-l)}
  97%,100%{border-color:rgba(201,168,94,.16);box-shadow:none;color:#96854F}
}

/* ── Responsive ── */
@media (max-width:560px){
  /* Se apilan sin sobresalir: las tres al ancho del creativo */
  .gv-con-t--acuse,
  .gv-con-t--rev,
  .gv-con-t--paso{width:100%;justify-self:stretch}
  .gv-con-t--rev,
  .gv-con-t--paso{margin-top:8px}
  /* Apiladas y algo más compactas, para no crecer respecto al hero actual */
  .gv-con-acuse{padding:16px 16px;gap:13px}
  .gv-con-ico{width:40px;height:40px}
  .gv-con-ico svg{width:20px;height:20px}
  .gv-con-t--rev,
  .gv-con-t--paso{padding:15px 16px}
  .gv-con-tags{margin-top:11px}
}

/* ══════════════════════════════════════════════════════════════════════
   ACERCA DE · EL DESPACHO, DE DÍA Y DE NOCHE
   El único creativo del sitio que es una fotografía y no un panel: una
   oficina con sus puestos, sus mamparas y el rótulo de la pared. No va
   dentro de .gv-hv-panel, no lleva barra de sistema y no se le superpone
   nada dibujado: ni halos, ni gradientes de luz, ni tarjetas, ni cintas,
   ni texto, ni un segundo logo.

   El encendido no se simula con CSS: son dos fotografías del mismo
   encuadre, la de día y la de noche, superpuestas y alineadas al píxel
   —comprobado por correlación de bordes: dx=0, dy=0—. Lo único que se
   anima es la opacidad de la nocturna. La imagen no se mueve, no escala,
   no gira, y no lleva ningún filter.

   Manda el ancho mientras cabe (80 % de la columna). En pantallas bajas
   pasa a mandar el alto: 64svh de ancho equivale a 80svh de alto, así que
   la foto se encoge entera en lugar de recortarse. Nunca se recorta nada:
   las dos comparten proporción 4:5 exacta, mismo encuadre y mismo
   contenedor, así que el fundido no desplaza ni un mueble.

   Sin JS o con movimiento reducido no se aplica ningún ciclo y la
   nocturna se queda en opacity:0: se ve solo la oficina de día, quieta.
   ══════════════════════════════════════════════════════════════════════ */

/* Centrada en los dos ejes dentro de su columna */
.gv-hero--acerca .gv-hv-creativo{display:grid;place-items:center}

.gv-acd{
  position:relative;
  width:min(80%,64svh);
  margin:0 auto;
  aspect-ratio:4 / 5;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(132,165,232,.20);
  border-radius:6px;
  box-shadow:0 26px 64px rgba(2,8,24,.48);
}
/* Las dos fotografías, con exactamente el mismo encaje. El radio y el
   recorte los pone el contenedor, así que también son los mismos. */
.gv-acd-img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center center;
}
.gv-acd-img--noche{position:absolute;inset:0;opacity:0}

/* Velo navy fijo. Iguala la foto con el fondo del hero sin apagarla ni
   quitarle el color: no hay grayscale ni duotono, esto es una foto. */
.gv-acd-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(168deg,rgba(10,22,50,.08) 0%,rgba(10,22,50,.26) 100%);
}

/* ══════ CICLO · 12 s ══════
   0-20 % la oficina de día · 20-38 % se hace de noche · 38-68 % la
   nocturna con el rótulo retroiluminado · 68-86 % vuelve el día · 86-100 %
   pausa antes de reiniciar. Los dos extremos valen lo mismo, así que el
   bucle no tiene costura ni parpadeo. */
.gv-acd-ciclo .gv-acd-img--noche{animation:gv-acd-noche 12s linear infinite}

/* Fuera de pantalla no se pinta nada */
.gv-hv-pausa .gv-acd-img--noche{animation-play-state:paused}

@keyframes gv-acd-noche{
  0%,20%{opacity:0}
  38%,68%{opacity:1}
  86%,100%{opacity:0}
}

/* ── Responsive ── */
/* En una columna el límite lo pone .gv-hv-creativo (520 px), así que la
   foto ocupa el ancho disponible en vez del 80 % de escritorio. */
@media (max-width:960px){
  .gv-acd{width:min(100%,64svh)}
}
@media (max-width:560px){
  .gv-acd{box-shadow:0 18px 42px rgba(2,8,24,.42)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICIOS V2 · alcance estrictamente local
   La escala tipográfica global no cambia. Solo se compacta el ritmo vertical
   de las secciones nuevas de /servicios/ y se componen sus cuatro patrones.
   No hay animaciones: esta primera versión se valida completamente estática.
   ═══════════════════════════════════════════════════════════════════════════ */
main:has(.gv-hero--servicios) .gv-sv2-link{margin-top:26px;max-width:72ch}
main:has(.gv-hero--servicios) .gv-sv2-link a{color:var(--gv-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Recorrido abierto: una línea y cuatro hitos, sin cajas cerradas. */
main:has(.gv-hero--servicios) .gv-sv2-flow{
  list-style:none;margin:34px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));position:relative
}
main:has(.gv-hero--servicios) .gv-sv2-flow::before{
  content:"";position:absolute;left:0;right:0;top:18px;height:1px;background:var(--gv-line)
}
main:has(.gv-hero--servicios) .gv-sv2-flow li{position:relative;padding:0 24px 0 0}
main:has(.gv-hero--servicios) .gv-sv2-flow li>span{
  position:relative;z-index:1;display:grid;place-items:center;width:37px;height:37px;
  background:var(--gv-paper);border:1px solid var(--gv-blue);border-radius:50%;
  color:var(--gv-blue);font-size:10.5px;font-weight:700;letter-spacing:.08em
}
main:has(.gv-hero--servicios) .gv-sv2-flow h3{font-size:18px;line-height:1.25;margin:17px 0 7px}
main:has(.gv-hero--servicios) .gv-sv2-flow p{font-size:15px;line-height:1.58;color:var(--gv-mute);max-width:25ch}


/* Responsabilidades: lista editorial, no rejilla de tarjetas. */
main:has(.gv-hero--servicios) .gv-sv2-duties{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--gv-line)}
main:has(.gv-hero--servicios) .gv-sv2-duties li{display:grid;grid-template-columns:50px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--gv-line)}
main:has(.gv-hero--servicios) .gv-sv2-duties li>span{font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--gv-brass);padding-top:4px}
main:has(.gv-hero--servicios) .gv-sv2-duties h3{font-size:18px;line-height:1.3;margin-bottom:7px}
main:has(.gv-hero--servicios) .gv-sv2-duties p{font-size:15px;line-height:1.62;color:var(--gv-mute);max-width:72ch}


@media (max-width:960px){
}
@media (max-width:720px){
  main:has(.gv-hero--servicios) .gv-sv2-flow{grid-template-columns:1fr;margin-top:28px}
  main:has(.gv-hero--servicios) .gv-sv2-flow::before{left:18px;right:auto;top:0;bottom:0;width:1px;height:auto}
  main:has(.gv-hero--servicios) .gv-sv2-flow li{display:grid;grid-template-columns:37px 1fr;gap:16px;padding:0 0 22px}
  main:has(.gv-hero--servicios) .gv-sv2-flow h3{margin:0 0 5px}
  main:has(.gv-hero--servicios) .gv-sv2-flow p{max-width:44ch}
}
@media (max-width:380px){
  main:has(.gv-hero--servicios) .gv-sv2-duties li{grid-template-columns:35px 1fr;gap:11px}
}

/* Servicios · segunda composición visual. Sobrescribe solo gv-sv2. */
main:has(.gv-hero--servicios) .gv-sv2-link{margin-top:22px}

/* 01 · línea continua y estado final por defecto. */
main:has(.gv-hero--servicios) .gv-sv2-flow{margin-top:30px}
main:has(.gv-hero--servicios) .gv-sv2-flow::before,
main:has(.gv-hero--servicios) .gv-sv2-flow::after{content:"";position:absolute;left:18px;right:18px;top:18px;height:2px}
main:has(.gv-hero--servicios) .gv-sv2-flow::before{background:var(--gv-line)}
main:has(.gv-hero--servicios) .gv-sv2-flow::after{background:var(--gv-blue)}
main:has(.gv-hero--servicios) .gv-sv2-flow li>span{z-index:2;width:38px;height:38px;background:var(--gv-blue);border-color:var(--gv-blue);color:#fff}
main:has(.gv-hero--servicios) .gv-sv2-flow h3{margin:15px 0 6px}
main:has(.gv-hero--servicios) .gv-sv2-flow p{font-size:16px;line-height:1.5}
main:has(.gv-hero--servicios) .gv-sv2-flow--motion::after{clip-path:inset(0 100% 0 0);transition:clip-path 2.4s cubic-bezier(.22,1,.36,1)}
main:has(.gv-hero--servicios) .gv-sv2-flow--motion li>span{background:var(--gv-paper);border-color:var(--gv-line);color:var(--gv-mute);transition:background .35s ease,border-color .35s ease,color .35s ease}
main:has(.gv-hero--servicios) .gv-sv2-flow--done::after{clip-path:inset(0)}
main:has(.gv-hero--servicios) .gv-sv2-flow--done li>span{background:var(--gv-blue);border-color:var(--gv-blue);color:#fff}
main:has(.gv-hero--servicios) .gv-sv2-flow--done li:nth-child(1)>span{transition-delay:.15s}
main:has(.gv-hero--servicios) .gv-sv2-flow--done li:nth-child(2)>span{transition-delay:.7s}
main:has(.gv-hero--servicios) .gv-sv2-flow--done li:nth-child(3)>span{transition-delay:1.25s}
main:has(.gv-hero--servicios) .gv-sv2-flow--done li:nth-child(4)>span{transition-delay:1.8s}


@media (max-width:1100px){
}
@media (max-width:900px){
}
@media (max-width:720px){
  main:has(.gv-hero--servicios) .gv-sv2-flow::after{left:18px;right:auto;top:18px;bottom:18px;width:2px;height:auto}
  main:has(.gv-hero--servicios) .gv-sv2-flow--motion::after{clip-path:inset(0 0 100% 0)}
  main:has(.gv-hero--servicios) .gv-sv2-flow--done::after{clip-path:inset(0)}
}
@media (prefers-reduced-motion:reduce){
  main:has(.gv-hero--servicios) .gv-sv2-flow--motion::after{clip-path:inset(0);transition:none}
  main:has(.gv-hero--servicios) .gv-sv2-flow--motion li>span{background:var(--gv-blue);border-color:var(--gv-blue);color:#fff;transition:none}
}


/* 04 · doble plano: Growvanz construye; el cliente aporta condiciones. */
main:has(.gv-hero--servicios) .gv-sv2-orbit{display:grid;grid-template-columns:minmax(280px,34%) minmax(0,66%);gap:0;min-height:0;height:auto;margin-top:24px}
main:has(.gv-hero--servicios) .gv-sv2-orbit::before{content:none;display:none}
main:has(.gv-hero--servicios) .gv-sv2-builder{align-self:stretch;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:clamp(26px,3vw,38px);border-right:3px solid var(--gv-blue);background:var(--gv-ink);color:#fff}
main:has(.gv-hero--servicios) .gv-sv2-builder-eye{margin-bottom:13px;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.15em;text-transform:uppercase;color:var(--gv-brass-l)}
main:has(.gv-hero--servicios) .gv-sv2-builder h3{max-width:14ch;font-size:clamp(24px,2.15vw,31px);line-height:1.16;letter-spacing:-.018em}
main:has(.gv-hero--servicios) .gv-sv2-builder>p:last-child{margin-top:18px;font-size:16px;line-height:1.55;color:#C7D3E7}
main:has(.gv-hero--servicios) .gv-sv2-duties{display:block;list-style:none;margin:0;padding:0 0 0 clamp(28px,3.6vw,48px);border:0;background:transparent}
main:has(.gv-hero--servicios) .gv-sv2-duties::before{content:none;display:none}
main:has(.gv-hero--servicios) .gv-sv2-duties li,
main:has(.gv-hero--servicios) .gv-sv2-duties li:nth-child(n){position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;width:auto;min-width:0;min-height:0;margin:0;padding-block:18px;padding-inline:0;border:0;border-bottom:1px solid #C5D3EE;background:transparent}
main:has(.gv-hero--servicios) .gv-sv2-duties li:last-child{border-bottom:0}
main:has(.gv-hero--servicios) .gv-sv2-duties li::before{content:none;display:none}
main:has(.gv-hero--servicios) .gv-sv2-duties li>span{display:block;padding-top:3px;font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.13em;color:var(--gv-brass)}
main:has(.gv-hero--servicios) .gv-sv2-duties h3{margin:0 0 5px;font-size:18px;line-height:1.3}
main:has(.gv-hero--servicios) .gv-sv2-duties p{font-size:16px;line-height:1.5;color:var(--gv-mute)}
main:has(.gv-hero--servicios) .gv-sv2-orbit + .gv-sv2-link{margin-top:30px}

@media (max-width:1100px){
  main:has(.gv-hero--servicios) .gv-sv2-orbit{grid-template-columns:1fr}
  main:has(.gv-hero--servicios) .gv-sv2-builder{min-height:0;padding:25px 28px;border-right:0;border-bottom:3px solid var(--gv-blue)}
  main:has(.gv-hero--servicios) .gv-sv2-builder h3{max-width:none}
  main:has(.gv-hero--servicios) .gv-sv2-builder>p:last-child{margin-top:11px}
  main:has(.gv-hero--servicios) .gv-sv2-duties{padding:13px 0 0}
}
@media (max-width:720px){
  main:has(.gv-hero--servicios) .gv-sv2-builder{padding:23px 22px}
  main:has(.gv-hero--servicios) .gv-sv2-builder h3{font-size:clamp(23px,7vw,28px)}
  main:has(.gv-hero--servicios) .gv-sv2-duties{position:relative;margin:15px 0 0 9px;padding:0 0 0 20px;border-left:1px solid var(--gv-line)}
  main:has(.gv-hero--servicios) .gv-sv2-duties li,
  main:has(.gv-hero--servicios) .gv-sv2-duties li:nth-child(n){grid-template-columns:32px minmax(0,1fr);gap:10px;padding:16px 0}
}


/* ══════════════════════════════════════════════════════════════════════
   SERVICIOS · INTERIORES
   Cuelga de main:has(.gv-hero--servicios), el mismo ámbito que ya usaba la
   página: solo /servicios/ tiene esa cabecera. El hero no emplea ninguna de
   estas clases, así que queda intacto.

   LA IDEA
   Se toma de Método el sistema, no el contenido: un único contenedor
   centrado, alturas que dependen del texto, filetes finos para coser los
   bloques y un solo fondo continuo. El color se reserva para dos piezas
   insertadas —el panel de las tres capas y el cierre azul—, de modo que
   ninguna sección interior ocupa el ancho completo de la pantalla.

   · 01 apertura editorial: copy 55 / fotografía 45, el recorrido aprobado
     debajo a ancho de contenedor y la implicación como frase con latón.
   · 02 las tres capas son un solo panel dividido en tres, no tres tarjetas:
     una barra azul segmentada las cose y en móvil pasa a raíl vertical.
   · 03 la única rejilla de tarjetas de la página: cuatro módulos compactos
     con Growvanz / cliente / terceros en una línea cada uno.
   · 05 preguntas y cierre azul contenido dentro del mismo contenedor.
   ══════════════════════════════════════════════════════════════════════ */

main:has(.gv-hero--servicios){
  --svh-max:min(1200px,92vw);
  --svh-pad:clamp(20px,3.4vw,44px);
  --svh-h2:clamp(26px,2.4vw,34px);        /* siempre menor que el H1 del hero */
  --svh-h3:clamp(17px,calc(.42vw + 14.9px),20px);
  --svh-text:clamp(16px,calc(.22vw + 15.1px),18px);
  --svh-mini:11.5px;
  --svh-linea:1px solid var(--gv-line);
  --svh-aire:clamp(56px,5.6vw,88px);
  --svh-salto:clamp(30px,3.2vw,48px);
}

/* ── Contenedor común y costura entre bloques ── */
main:has(.gv-hero--servicios) .gv-svh-sec{padding-block:var(--svh-aire)}
main:has(.gv-hero--servicios) .gv-svh-sec--hilo{padding-top:0}
main:has(.gv-hero--servicios) .gv-svh-wrap{max-width:var(--svh-max);margin:0 auto;padding-inline:var(--svh-pad)}
main:has(.gv-hero--servicios) .gv-svh-sec--hilo .gv-svh-wrap{padding-top:var(--svh-aire);border-top:var(--svh-linea)}

/* ── Escala tipográfica ── */
main:has(.gv-hero--servicios) .gv-h2{font-size:var(--svh-h2);line-height:1.14;letter-spacing:-.018em;max-width:24ch}
main:has(.gv-hero--servicios) .gv-p{font-size:var(--svh-text);line-height:1.66;color:var(--gv-mute);max-width:66ch}
main:has(.gv-hero--servicios) .gv-svh-intro{display:grid;gap:14px;margin-top:18px}
main:has(.gv-hero--servicios) .gv-svh-wrap .gv-sv2-link{margin-top:var(--svh-salto);max-width:64ch}
main:has(.gv-hero--servicios) .gv-svh-wrap .gv-sv2-duties p{font-size:var(--svh-text);max-width:66ch}

/* ══════════════ 01 · APERTURA CON FOTOGRAFÍA ══════════════ */
main:has(.gv-hero--servicios) .gv-svh-apertura{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(28px,3.6vw,56px);align-items:start}
main:has(.gv-hero--servicios) .gv-svh-figura{margin:0;aspect-ratio:4/3}
main:has(.gv-hero--servicios) .gv-svh-figura img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--gv-r)}
main:has(.gv-hero--servicios) .gv-svh-wrap .gv-sv2-flow{margin-top:var(--svh-salto)}
main:has(.gv-hero--servicios) .gv-imp{max-width:76ch;margin-top:var(--svh-salto);padding:2px 0 2px 20px;background:none;border:0;border-left:2px solid var(--gv-brass);border-radius:0}
main:has(.gv-hero--servicios) .gv-imp-tag{padding-top:3px}
main:has(.gv-hero--servicios) .gv-imp p{max-width:64ch}

/* ══════════════ 02 · LAS TRES CAPAS, UN SOLO SISTEMA ══════════════
   Un panel, no tres tarjetas: la barra azul de arriba se lee como una sola
   línea partida en tres tramos y los filetes verticales solo separan capas. */
main:has(.gv-hero--servicios) .gv-svh-capas{background:var(--gv-soft)}
main:has(.gv-hero--servicios) .gv-svh-sistema{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:var(--svh-salto) 0 0;padding:0;list-style:none}
main:has(.gv-hero--servicios) .gv-svh-capa{position:relative;padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,24px) clamp(14px,1.6vw,20px);background:rgba(255,255,255,.96);border-radius:var(--gv-r)}
main:has(.gv-hero--servicios) .gv-svh-capa:nth-child(2){background:rgba(255,255,255,.72)}
main:has(.gv-hero--servicios) .gv-svh-capa:nth-child(3){background:rgba(255,255,255,.48)}
main:has(.gv-hero--servicios) .gv-svh-capa::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gv-blue);border-radius:var(--gv-r) var(--gv-r) 0 0}
main:has(.gv-hero--servicios) .gv-svh-capa:nth-child(2)::before{background:var(--gv-brass)}
main:has(.gv-hero--servicios) .gv-svh-capa:nth-child(3)::before{background:var(--gv-mute)}
main:has(.gv-hero--servicios) .gv-svh-capa-eye{display:flex;align-items:baseline;gap:9px;margin:0 0 10px;font-size:var(--svh-mini);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gv-blue)}
main:has(.gv-hero--servicios) .gv-svh-capa-eye span{color:var(--gv-brass);font-variant-numeric:tabular-nums}
main:has(.gv-hero--servicios) .gv-svh-capa:nth-child(3) .gv-svh-capa-eye span{color:var(--gv-mute)}
main:has(.gv-hero--servicios) .gv-svh-capa h3{margin:0 0 14px;max-width:26ch;font-size:var(--svh-h3);line-height:1.28;letter-spacing:-.01em;color:var(--gv-ink)}
main:has(.gv-hero--servicios) .gv-svh-capa > ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
main:has(.gv-hero--servicios) .gv-svh-capa > ul > li{padding:10px 0;border-top:var(--svh-linea);font-size:var(--svh-text);line-height:1.45;color:var(--gv-mute)}

/* ══════════════ 03 · CUATRO ÁREAS ══════════════
   La única rejilla de tarjetas de la página. Una línea por parte, sin
   repetir explicaciones, y un hover discreto en dispositivos con puntero. */
main:has(.gv-hero--servicios) .gv-svh-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:var(--svh-salto)}
main:has(.gv-hero--servicios) .gv-svh-area{position:relative;padding:20px 18px 16px;background:#fff;border:1px solid var(--gv-line);border-radius:var(--gv-r);box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 20px rgba(15,23,42,.05);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
main:has(.gv-hero--servicios) .gv-svh-area::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--gv-line);border-radius:var(--gv-r) var(--gv-r) 0 0;transition:background-color .18s ease}
main:has(.gv-hero--servicios) .gv-svh-area h3{margin:0 0 12px;font-size:var(--svh-h3);line-height:1.2;letter-spacing:-.01em}
main:has(.gv-hero--servicios) .gv-svh-area dl{display:grid;gap:0;margin:0}
main:has(.gv-hero--servicios) .gv-svh-area dl > div{padding:9px 0;border-top:var(--svh-linea)}
main:has(.gv-hero--servicios) .gv-svh-area dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gv-blue)}
main:has(.gv-hero--servicios) .gv-svh-area dd{margin:4px 0 0;font-size:16px;line-height:1.4;color:var(--gv-mute)}
@media (hover:hover) and (pointer:fine){
  main:has(.gv-hero--servicios) .gv-svh-area:hover,
  main:has(.gv-hero--servicios) .gv-svh-area:focus-within{transform:translateY(-3px);border-color:var(--gv-line);box-shadow:0 2px 4px rgba(15,23,42,.05),0 14px 30px rgba(15,23,42,.10)}
}
main:has(.gv-hero--servicios) .gv-svh-area:hover::before,
main:has(.gv-hero--servicios) .gv-svh-area:focus-within::before{background:var(--gv-blue)}
@media (prefers-reduced-motion:reduce){
  main:has(.gv-hero--servicios) .gv-svh-area,
  main:has(.gv-hero--servicios) .gv-svh-area:hover{transform:none}
}

/* ── Cierre del alcance: banda editorial, ni tarjeta ni advertencia ── */
main:has(.gv-hero--servicios) .gv-svh-cierre{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6px clamp(20px,3vw,52px);align-items:start;margin-top:var(--svh-salto);padding:2px 0 2px clamp(16px,1.8vw,24px);border-left:2px solid var(--gv-brass)}
main:has(.gv-hero--servicios) .gv-svh-cierre .gv-eyebrow{grid-column:1;grid-row:1;margin-bottom:6px}
main:has(.gv-hero--servicios) .gv-svh-cierre h3{grid-column:1;grid-row:2;margin:0;max-width:20ch;font-size:clamp(19px,1.5vw,23px);line-height:1.2;letter-spacing:-.012em}
main:has(.gv-hero--servicios) .gv-svh-cierre ul{grid-column:2;grid-row:1 / span 2;display:grid;gap:9px;margin:0;padding:0;list-style:none}
main:has(.gv-hero--servicios) .gv-svh-cierre li{position:relative;padding-left:16px;font-size:var(--svh-text);line-height:1.5;color:var(--gv-ink)}
main:has(.gv-hero--servicios) .gv-svh-cierre li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--gv-brass)}
main:has(.gv-hero--servicios) .gv-svh-cierre > p{grid-column:2;grid-row:3;margin:14px 0 0;max-width:62ch;font-size:var(--svh-text);line-height:1.6;color:var(--gv-mute)}

/* ══════════════ 05 · PREGUNTAS Y CIERRE ══════════════ */
main:has(.gv-hero--servicios) .gv-svh-faq{margin-top:var(--svh-salto);max-width:none;border-top:1px solid var(--gv-ink)}
main:has(.gv-hero--servicios) .gv-svh-faq summary{padding:19px 48px 19px 0;font-size:clamp(16.5px,1.1vw,18px);font-weight:650;line-height:1.35}
main:has(.gv-hero--servicios) .gv-svh-faq summary::after{top:17px}
main:has(.gv-hero--servicios) .gv-svh-faq details[open] summary{color:var(--gv-blue)}
main:has(.gv-hero--servicios) .gv-svh-faq p{max-width:66ch;padding:0 48px 22px 0;font-size:var(--svh-text);line-height:1.66}
main:has(.gv-hero--servicios) .gv-svh-cta{max-width:980px;margin:clamp(44px,4.6vw,72px) auto 0;padding:clamp(36px,4vw,56px) clamp(24px,4vw,52px);border-radius:var(--gv-r)}
main:has(.gv-hero--servicios) .gv-svh-cta h2{max-width:24ch;font-size:clamp(24px,1.9vw,30px)}
main:has(.gv-hero--servicios) .gv-svh-cta p{max-width:62ch;margin-top:18px;font-size:var(--svh-text)}

/* ══════════════ PORTÁTIL ══════════════ */
@media (max-width:1199px){
  main:has(.gv-hero--servicios) .gv-svh-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  main:has(.gv-hero--servicios) .gv-svh-capa{padding-inline:clamp(14px,1.6vw,22px)}
}

/* ══════════════ TABLETA ══════════════
   La fotografía baja bajo el texto y las tres capas pasan a raíl vertical:
   la barra azul deja de ser cabecera de columna y se pone de canto. */
@media (max-width:1023px){
  main:has(.gv-hero--servicios) .gv-svh-apertura{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.4vw,36px)}
  main:has(.gv-hero--servicios) .gv-svh-figura{max-width:620px}
  main:has(.gv-hero--servicios) .gv-svh-sistema{grid-template-columns:minmax(0,1fr);gap:16px}
  main:has(.gv-hero--servicios) .gv-svh-capa h3{max-width:44ch}
  main:has(.gv-hero--servicios) .gv-svh-cierre{grid-template-columns:minmax(0,1fr);gap:14px}
  main:has(.gv-hero--servicios) .gv-svh-cierre .gv-eyebrow,
  main:has(.gv-hero--servicios) .gv-svh-cierre h3,
  main:has(.gv-hero--servicios) .gv-svh-cierre ul,
  main:has(.gv-hero--servicios) .gv-svh-cierre > p{grid-column:1;grid-row:auto}
  main:has(.gv-hero--servicios) .gv-svh-cierre > p{margin-top:0}
}

/* ══════════════ MÓVIL ══════════════ */
@media (max-width:767px){
  main:has(.gv-hero--servicios){--svh-aire:clamp(44px,11vw,60px)}
  main:has(.gv-hero--servicios) .gv-h2{max-width:none}
  main:has(.gv-hero--servicios) .gv-svh-figura{max-width:none}
  main:has(.gv-hero--servicios) .gv-svh-figura{aspect-ratio:3/2}
  main:has(.gv-hero--servicios) .gv-svh-areas{grid-template-columns:minmax(0,1fr)}
  main:has(.gv-hero--servicios) .gv-svh-faq summary{padding-right:38px}
  main:has(.gv-hero--servicios) .gv-svh-faq p{padding-right:0}
  main:has(.gv-hero--servicios) .gv-svh-cta{padding-inline:clamp(20px,6vw,30px)}
}

/* ══════════════ 04 · FOTOGRAFÍA DEL BLOQUE NAVY ══════════════
   Mismo sistema que los heroes: la foto cubre el bloque, un velo navy en
   degradado la mantiene detrás del copy y la deja reconocible a la derecha.
   El orden es fondo navy → fotografía → velo → contenido; la opacidad nunca
   toca al contenedor, solo a la imagen y al velo. */
main:has(.gv-hero--servicios) .gv-sv2-builder{position:relative;overflow:hidden;isolation:isolate}
main:has(.gv-hero--servicios) .gv-svh-builder-foto{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:65% 55%;pointer-events:none}
main:has(.gv-hero--servicios) .gv-svh-builder-velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(102deg,rgba(15,23,42,.97) 0%,rgba(15,23,42,.93) 34%,rgba(15,23,42,.74) 66%,rgba(15,23,42,.5) 100%)}
main:has(.gv-hero--servicios) .gv-sv2-builder > .gv-sv2-builder-eye,
main:has(.gv-hero--servicios) .gv-sv2-builder > h3,
main:has(.gv-hero--servicios) .gv-sv2-builder > p{position:relative;z-index:2}

/* Apilado: el bloque pasa a banda ancha y el copy ocupa todo el frente. */
@media (max-width:1100px){
  main:has(.gv-hero--servicios) .gv-svh-builder-foto{object-position:70% 45%}
  main:has(.gv-hero--servicios) .gv-svh-builder-velo{background:linear-gradient(160deg,rgba(15,23,42,.96) 0%,rgba(15,23,42,.9) 52%,rgba(15,23,42,.68) 100%)}
}
@media (max-width:720px){
  main:has(.gv-hero--servicios) .gv-svh-builder-foto{object-position:74% 45%}
  main:has(.gv-hero--servicios) .gv-svh-builder-velo{background:linear-gradient(160deg,rgba(15,23,42,.97) 0%,rgba(15,23,42,.93) 55%,rgba(15,23,42,.74) 100%)}
}

/* Servicios · 02 · la cabecera comparte fila con el puzzle: texto a la
   izquierda, imagen recortada por altura a la derecha. Transparencia real
   sobre el azul de la sección, sin caja ni marco. */
main:has(.gv-hero--servicios) .gv-svh-capas-top{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(24px,3.4vw,52px);align-items:center}
main:has(.gv-hero--servicios) .gv-svh-puzzle-caja{display:flex;align-items:center;justify-content:center}
main:has(.gv-hero--servicios) .gv-svh-puzzle{
  display:block;
  /* La ilustración es vertical (1024×1536, proporción 2:3), así que quien
     manda es la altura: con los 360 px de ancho que tenía antes se iba a
     540 px y pesaba más que el titular. El límite se expresa en anchura
     —277 px dan los 415 px de alto— y no en `max-height`, porque con
     `height:auto` la imagen no reserva su hueco hasta que carga y, siendo
     diferida, la maqueta daba un salto al aparecer. Nada de `scale()`:
     dejaría reservado el espacio de la grande. */
  width:min(78%,277px);height:auto;
  margin-inline:auto;
  object-fit:contain;object-position:center;
}
/* De 1200 hacia abajo la ilustración baja un punto más, para que no se
   coma la columna cuando esta se estrecha. */
/* Al estrecharse la columna, la ilustración baja un punto más. */
@media (max-width:1200px){
  main:has(.gv-hero--servicios) .gv-svh-puzzle{width:min(78%,256px)}   /* 384 px de alto */
}
@media (max-width:1023px){
  main:has(.gv-hero--servicios) .gv-svh-capas-top{grid-template-columns:minmax(0,63fr) minmax(0,37fr);gap:clamp(18px,2.6vw,32px)}
  main:has(.gv-hero--servicios) .gv-svh-puzzle{width:min(78%,227px)}   /* 340 px de alto */
}
@media (max-width:767px){
  /* Apilada bajo el texto: aquí el límite vuelve a ser el ancho, porque la
     altura ya no compite con nada. */
  main:has(.gv-hero--servicios) .gv-svh-capas-top{grid-template-columns:minmax(0,1fr);gap:22px}
  main:has(.gv-hero--servicios) .gv-svh-puzzle{width:min(92%,300px);margin-inline:auto}
}

/* ══════════════════════════════════════════════════════════════════════
   SECTORES · LAS CUATRO PÁGINAS DE FAMILIA
   Ámbito main:has(.gv-hero--fam): solo lo tienen esas cuatro páginas, así
   que ni las seis sectoriales antiguas ni el resto del sitio se enteran.

   Comparten sistema —contenedor, escala, filetes de 1 px y nodos— pero no
   composición: la foto cambia de lado, los nichos se ordenan en rejilla o
   en filas, las fricciones van a una o dos columnas y el recorrido es
   horizontal, vertical o compacto de siete pasos según la página.
   ══════════════════════════════════════════════════════════════════════ */

main:has(.gv-hero--fam){
  --sx-h2:clamp(26px,2.4vw,34px);
  --sx-h3:clamp(17px,calc(.42vw + 14.9px),20px);
  --sx-text:clamp(16px,calc(.22vw + 15.1px),18px);
  --sx-mini:11.5px;
  --sx-linea:1px solid var(--gv-line);
  --sx-salto:clamp(28px,3vw,44px);
}
main:has(.gv-hero--fam) .gv-sx-sec{padding-block:clamp(52px,5.2vw,84px)}
main:has(.gv-hero--fam) .gv-sx-sec .gv-h2{max-width:24ch;font-size:var(--sx-h2);line-height:1.14}
main:has(.gv-hero--fam) .gv-sx-sec .gv-p{max-width:64ch;margin-top:16px;font-size:var(--sx-text);line-height:1.66}
main:has(.gv-hero--fam) .gv-sx-intro{margin-top:4px}
main:has(.gv-hero--fam) .gv-sx-nota{margin-top:var(--sx-salto);max-width:70ch;font-size:16px;line-height:1.6;color:var(--gv-mute)}
main:has(.gv-hero--fam) .gv-sx-nota a{color:var(--gv-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
main:has(.gv-hero--fam) .gv-sx-imp{margin-top:var(--sx-salto);padding-left:20px;border-left:2px solid var(--gv-brass)}
main:has(.gv-hero--fam) .gv-sx-imp p{margin:0;max-width:62ch;font-family:var(--gv-serif);font-size:clamp(17px,1.3vw,19px);line-height:1.5;color:var(--gv-ink)}
/* El creativo del hero queda reservado y vacío: la fotografía ambiental
   ocupa ese lado hasta que exista la imagen o el esquema definitivos. */
main:has(.gv-hero--fam) .gv-hero--fam .gv-hv-creativo{min-height:clamp(180px,22vw,300px)}

/* ── Texto y fotografía: cambia de lado según la página ── */
main:has(.gv-hero--fam) .gv-sx-duo{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(28px,3.6vw,60px);align-items:center}
main:has(.gv-hero--fam) .gv-sx-duo--foto{grid-template-columns:minmax(0,50fr) minmax(0,50fr)}
main:has(.gv-hero--fam) .gv-sx-foto{margin:0}
main:has(.gv-hero--fam) .gv-sx-foto img{display:block;width:100%;height:100%;max-height:clamp(300px,32vw,430px);object-fit:cover;border-radius:var(--gv-r)}

/* ── Nichos en rejilla abierta (clínicas) ── */
main:has(.gv-hero--fam) .gv-sx-nichos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.4vw,38px);margin:var(--sx-salto) 0 0;padding:0;list-style:none;border-top:1px solid var(--gv-ink)}
main:has(.gv-hero--fam) .gv-sx-nichos li{padding:20px 0 0}
main:has(.gv-hero--fam) .gv-sx-nichos h3{margin:0 0 8px;font-size:var(--sx-h3);line-height:1.2;letter-spacing:-.01em}
main:has(.gv-hero--fam) .gv-sx-nichos h3 a{color:var(--gv-blue);text-decoration:underline;text-underline-offset:4px}
main:has(.gv-hero--fam) .gv-sx-nichos p{margin:0;font-size:16px;line-height:1.5;color:var(--gv-mute)}

/* ── Nichos en filas (despachos, reformas, energía) ── */
main:has(.gv-hero--fam) .gv-sx-tipos{margin:var(--sx-salto) 0 0;padding:0;list-style:none;border-top:1px solid var(--gv-ink)}
main:has(.gv-hero--fam) .gv-sx-tipos li{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.4fr);gap:6px clamp(24px,3vw,52px);align-items:baseline;padding:18px 0;border-bottom:var(--sx-linea)}
main:has(.gv-hero--fam) .gv-sx-tipos h3{margin:0;font-size:var(--sx-h3);line-height:1.25;letter-spacing:-.01em}
main:has(.gv-hero--fam) .gv-sx-tipos h3 a{color:var(--gv-blue);text-decoration:underline;text-underline-offset:4px}
main:has(.gv-hero--fam) .gv-sx-tipos p{margin:0;max-width:58ch;font-size:16px;line-height:1.5;color:var(--gv-mute)}

/* ── Fricciones: lista numerada abierta, nunca una rejilla de tarjetas ── */
main:has(.gv-hero--fam) .gv-sx-fugas{position:relative;margin:var(--sx-salto) 0 0;padding:0 0 0 46px;list-style:none;counter-reset:fuga}
main:has(.gv-hero--fam) .gv-sx-fugas::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--gv-line)}
main:has(.gv-hero--fam) .gv-sx-fugas li{position:relative;counter-increment:fuga;padding:14px 0;break-inside:avoid}
main:has(.gv-hero--fam) .gv-sx-fugas li::before{content:counter(fuga,decimal-leading-zero);position:absolute;left:-46px;top:16px;width:23px;text-align:center;font-size:var(--sx-mini);font-weight:700;letter-spacing:.06em;color:var(--gv-brass);background:var(--gv-paper);font-variant-numeric:tabular-nums}
main:has(.gv-hero--fam) .gv-sx-fugas h3{margin:0 0 5px;font-size:var(--sx-h3);line-height:1.25;letter-spacing:-.01em}
main:has(.gv-hero--fam) .gv-sx-fugas p{margin:0;max-width:60ch;font-size:16px;line-height:1.55;color:var(--gv-mute)}
main:has(.gv-hero--fam) .gv-sx-fugas--dos{columns:2;column-gap:clamp(30px,4vw,72px)}
main:has(.gv-hero--fam) .gv-sx-fugas--dos::before{display:none}

/* ── Recorrido: horizontal, vertical o compacto según la página ── */
main:has(.gv-hero--fam) .gv-sx-via{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:var(--sx-salto) 0 0;padding:0;list-style:none}
main:has(.gv-hero--fam) .gv-sx-via > li{position:relative;padding:22px clamp(12px,1.4vw,22px) 0 0;border-top:var(--sx-linea)}
main:has(.gv-hero--fam) .gv-sx-via > li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--gv-soft);border:1px solid var(--gv-blue)}
main:has(.gv-hero--fam) .gv-sx-via > li:last-child::before{background:var(--gv-blue)}
main:has(.gv-hero--fam) .gv-sx-via span{font-size:var(--sx-mini);font-weight:700;letter-spacing:.14em;color:var(--gv-brass);font-variant-numeric:tabular-nums}
main:has(.gv-hero--fam) .gv-sx-via h3{margin:9px 0 6px;font-size:17px;line-height:1.22;letter-spacing:-.01em}
main:has(.gv-hero--fam) .gv-sx-via p{margin:0;font-size:16px;line-height:1.45;color:var(--gv-mute)}
main:has(.gv-hero--fam) .gv-sx-via--siete{grid-template-columns:repeat(7,minmax(0,1fr))}
main:has(.gv-hero--fam) .gv-sx-via--siete h3{font-size:16.5px}
/* Vertical: el expediente avanza hacia abajo y cada paso entra un poco más. */
main:has(.gv-hero--fam) .gv-sx-via--vert{position:relative;grid-template-columns:minmax(0,1fr);padding-left:34px}
main:has(.gv-hero--fam) .gv-sx-via--vert::before{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:1px;background:var(--gv-line)}
main:has(.gv-hero--fam) .gv-sx-via--vert > li{padding:14px 0 14px 0;border-top:0}
main:has(.gv-hero--fam) .gv-sx-via--vert > li::before{left:-34px;top:19px}
main:has(.gv-hero--fam) .gv-sx-via--vert > li:nth-child(n+2){margin-left:clamp(0px,1.4vw,22px)}
main:has(.gv-hero--fam) .gv-sx-via--vert > li:nth-child(n+4){margin-left:clamp(0px,2.8vw,44px)}
main:has(.gv-hero--fam) .gv-sx-via--vert h3{margin:0 0 4px;font-size:var(--sx-h3)}
main:has(.gv-hero--fam) .gv-sx-via--vert p{max-width:60ch}

/* ── Piezas del sistema ── */
main:has(.gv-hero--fam) .gv-sx-piezas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(22px,2.6vw,44px);margin-top:var(--sx-salto)}
main:has(.gv-hero--fam) .gv-sx-piezas > div{padding:18px 0;border-top:var(--sx-linea)}
main:has(.gv-hero--fam) .gv-sx-piezas--dos{grid-template-columns:repeat(2,minmax(0,1fr))}
main:has(.gv-hero--fam) .gv-sx-piezas h3{margin:0 0 6px;font-size:var(--sx-h3);line-height:1.22;letter-spacing:-.01em}
main:has(.gv-hero--fam) .gv-sx-piezas p{margin:0;max-width:44ch;font-size:16px;line-height:1.5;color:var(--gv-mute)}

/* ── Medición sobre navy ── */
main:has(.gv-hero--fam) .gv-sx-medir .gv-h2{color:#fff}
main:has(.gv-hero--fam) .gv-sx-metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,56px);margin:var(--sx-salto) 0 0;padding:0;list-style:none}
main:has(.gv-hero--fam) .gv-sx-metricas--tres{grid-template-columns:repeat(3,minmax(0,1fr))}
main:has(.gv-hero--fam) .gv-sx-metricas li{padding:15px 0;border-top:1px solid rgba(255,255,255,.2)}
main:has(.gv-hero--fam) .gv-sx-metricas b{display:block;margin-bottom:4px;font-size:var(--sx-mini);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gv-brass-l)}
main:has(.gv-hero--fam) .gv-sx-metricas span{font-size:16px;line-height:1.5;color:#D5E0F2}
main:has(.gv-hero--fam) .gv-sx-cierre{margin-top:var(--sx-salto);padding-top:16px;max-width:72ch;border-top:2px solid var(--gv-brass);font-size:16px;line-height:1.6;color:#E1E8F5}

/* ── Portátil y tableta ── */
@media (max-width:1199px){
main:has(.gv-hero--fam)   .gv-sx-nichos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
main:has(.gv-hero--fam)   .gv-sx-nichos li:nth-child(n+3){border-top:var(--sx-linea);margin-top:18px}
main:has(.gv-hero--fam)   .gv-sx-via{grid-template-columns:repeat(3,minmax(0,1fr))}
main:has(.gv-hero--fam)   .gv-sx-via > li:nth-child(n+4){margin-top:22px}
main:has(.gv-hero--fam)   .gv-sx-via--siete{grid-template-columns:repeat(4,minmax(0,1fr))}
main:has(.gv-hero--fam)   .gv-sx-via--siete > li:nth-child(n+5){margin-top:22px}
main:has(.gv-hero--fam)   .gv-sx-via--vert{grid-template-columns:minmax(0,1fr)}
main:has(.gv-hero--fam)   .gv-sx-via--vert > li:nth-child(n+2),
main:has(.gv-hero--fam)   .gv-sx-via--vert > li:nth-child(n+4){margin-left:0;margin-top:0}
main:has(.gv-hero--fam)   .gv-sx-piezas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
main:has(.gv-hero--fam)   .gv-sx-duo,
main:has(.gv-hero--fam)   .gv-sx-duo--foto{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.4vw,36px)}
main:has(.gv-hero--fam)   .gv-sx-duo--inv .gv-sx-foto{order:2}
main:has(.gv-hero--fam)   .gv-sx-foto img{max-height:clamp(240px,38vw,340px)}
main:has(.gv-hero--fam)   .gv-sx-tipos li{grid-template-columns:minmax(0,1fr)}
main:has(.gv-hero--fam)   .gv-sx-metricas--tres{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Móvil ── */
@media (max-width:767px){
main:has(.gv-hero--fam)   .gv-sx-sec{padding-block:clamp(44px,11vw,60px)}
main:has(.gv-hero--fam)   .gv-sx-nichos{grid-template-columns:minmax(0,1fr)}
main:has(.gv-hero--fam)   .gv-sx-nichos li:nth-child(n+2){border-top:var(--sx-linea);margin-top:16px}
main:has(.gv-hero--fam)   .gv-sx-fugas--dos{columns:1}
main:has(.gv-hero--fam)   .gv-sx-fugas--dos::before{display:block}
main:has(.gv-hero--fam)   .gv-sx-via,
main:has(.gv-hero--fam)   .gv-sx-via--siete{position:relative;grid-template-columns:minmax(0,1fr);padding-left:30px}
main:has(.gv-hero--fam)   .gv-sx-via::before,
main:has(.gv-hero--fam)   .gv-sx-via--siete::before{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:1px;background:var(--gv-line)}
main:has(.gv-hero--fam)   .gv-sx-via > li{padding:12px 0;border-top:0;margin-top:0}
main:has(.gv-hero--fam)   .gv-sx-via > li::before{left:-30px;top:17px}
main:has(.gv-hero--fam)   .gv-sx-piezas,
main:has(.gv-hero--fam)   .gv-sx-piezas--dos,
main:has(.gv-hero--fam)   .gv-sx-metricas,
main:has(.gv-hero--fam)   .gv-sx-metricas--tres{grid-template-columns:minmax(0,1fr)}
main:has(.gv-hero--fam)   .gv-sx-imp{padding-left:16px}
}

/* Foco visible en las tarjetas sectoriales: la tarjeta entera ya es el enlace. */
.gv-fam a:focus-visible{outline:3px solid var(--gv-bright);outline-offset:3px;border-top-color:var(--gv-blue)}

/* Nichos de la página de clínicas: el bloque entero es el enlace. Hover y
   foco con los mismos recursos que ya usan las tarjetas sectoriales. */
main:has(.gv-hero--fam) .gv-sx-nichos a{display:block;color:inherit;text-decoration:none}
main:has(.gv-hero--fam) .gv-sx-nichos a h3{color:var(--gv-blue);text-decoration:underline;text-underline-offset:4px;text-decoration-color:transparent;transition:text-decoration-color .18s ease}
main:has(.gv-hero--fam) .gv-sx-nichos a:hover h3{text-decoration-color:currentColor}
main:has(.gv-hero--fam) .gv-sx-nichos a:focus-visible{outline:3px solid var(--gv-bright);outline-offset:4px}
main:has(.gv-hero--fam) .gv-sx-nichos a:focus-visible h3{text-decoration-color:currentColor}

/* ══════════════════════════════════════════════════════════════════════
   CLÍNICAS Y CENTROS PRIVADOS · SOLO ESTA PÁGINA
   Ámbito main:has(.gv-hero--fam-clinicas): esa cabecera únicamente existe
   en /sectores/clinicas-centros-privados/, así que nada de lo que sigue
   alcanza a las otras tres familias ni a las páginas hijas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Las cuatro especialidades, en tarjeta con fotografía ── */
main:has(.gv-hero--fam-clinicas) .gv-cl-nichos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:var(--sx-salto,var(--med-salto)) 0 0;padding:0;list-style:none}
main:has(.gv-hero--fam-clinicas) .gv-cl-nicho{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#fff;border:1px solid var(--gv-line);border-top:3px solid var(--gv-blue);border-radius:var(--gv-r);color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
main:has(.gv-hero--fam-clinicas) .gv-cl-foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--gv-soft)}
main:has(.gv-hero--fam-clinicas) .gv-cl-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform .22s ease}
main:has(.gv-hero--fam-clinicas) .gv-cl-cuerpo{display:block;padding:16px 16px 18px}
main:has(.gv-hero--fam-clinicas) .gv-cl-cuerpo h3{display:flex;align-items:baseline;gap:8px;margin:0 0 7px;font-size:clamp(17px,1.25vw,18.5px);line-height:1.22;letter-spacing:-.012em;color:var(--gv-ink)}
main:has(.gv-hero--fam-clinicas) .gv-cl-flecha{font-style:normal;color:var(--gv-blue);transition:transform .2s ease}
main:has(.gv-hero--fam-clinicas) .gv-cl-cuerpo p{margin:0;font-size:16px;line-height:1.45;color:var(--gv-mute)}
@media (hover:hover) and (pointer:fine){
main:has(.gv-hero--fam-clinicas)   .gv-cl-nicho:hover{transform:translateY(-3px);border-color:var(--gv-bright);border-top-color:var(--gv-cta);box-shadow:0 14px 30px -18px rgba(12,26,56,.55)}
main:has(.gv-hero--fam-clinicas)   .gv-cl-nicho:hover .gv-cl-foto img{transform:scale(1.02)}
main:has(.gv-hero--fam-clinicas)   .gv-cl-nicho:hover .gv-cl-flecha{transform:translateX(3px)}
}
main:has(.gv-hero--fam-clinicas) .gv-cl-nicho:focus-visible{outline:3px solid var(--gv-bright);outline-offset:3px}

/* ── Problemas frecuentes: cabecera a la izquierda, filas a la derecha ── */
main:has(.gv-hero--fam-clinicas) .gv-cl-duo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,72px);align-items:start}
main:has(.gv-hero--fam-clinicas) .gv-cl-duo-cabeza .gv-sx-intro .gv-p{max-width:38ch}
main:has(.gv-hero--fam-clinicas) .gv-cl-fugas{margin-top:0}
main:has(.gv-hero--fam-clinicas) .gv-cl-fugas li{padding:16px 0;border-top:1px solid var(--gv-line)}
main:has(.gv-hero--fam-clinicas) .gv-cl-fugas li:first-child{border-top:0;padding-top:2px}
main:has(.gv-hero--fam-clinicas) .gv-cl-fugas li::before{top:18px}
main:has(.gv-hero--fam-clinicas) .gv-cl-fugas li:first-child::before{top:4px}
main:has(.gv-hero--fam-clinicas) .gv-cl-fugas p{max-width:56ch}

/* ── Qué conectamos: seis tarjetas compactas, sin apariencia de enlace ── */
main:has(.gv-hero--fam-clinicas) .gv-cl-piezas,
main:has(.gv-hero--med) .gv-cl-piezas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:var(--sx-salto,var(--med-salto)) 0 0;padding:0;list-style:none}
main:has(.gv-hero--fam-clinicas) .gv-cl-piezas li,
main:has(.gv-hero--med) .gv-cl-piezas li{padding:18px 18px 20px;background:#fff;border:1px solid var(--gv-line);border-top:2px solid var(--gv-blue);border-radius:var(--gv-r);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
main:has(.gv-hero--fam-clinicas) .gv-cl-ico,
main:has(.gv-hero--med) .gv-cl-ico{display:block;width:24px;height:24px;color:var(--gv-blue)}
main:has(.gv-hero--fam-clinicas) .gv-cl-piezas h3,
main:has(.gv-hero--med) .gv-cl-piezas h3{margin:14px 0 6px;font-size:clamp(17px,1.25vw,18.5px);line-height:1.22;letter-spacing:-.012em}
main:has(.gv-hero--fam-clinicas) .gv-cl-piezas p,
main:has(.gv-hero--med) .gv-cl-piezas p{margin:0;max-width:42ch;font-size:16px;line-height:1.5;color:var(--gv-mute)}
@media (hover:hover) and (pointer:fine){
main:has(.gv-hero--fam-clinicas)   .gv-cl-piezas li:hover,
  main:has(.gv-hero--med) .gv-cl-piezas li:hover{transform:translateY(-2px);border-top-color:var(--gv-cta);box-shadow:0 12px 26px -18px rgba(12,26,56,.5)}
}
@media (prefers-reduced-motion:reduce){
main:has(.gv-hero--fam-clinicas)   .gv-cl-nicho,
main:has(.gv-hero--fam-clinicas)   .gv-cl-nicho:hover,
main:has(.gv-hero--fam-clinicas)   .gv-cl-piezas li,
main:has(.gv-hero--fam-clinicas)   .gv-cl-piezas li:hover{transform:none}
main:has(.gv-hero--fam-clinicas)   .gv-cl-nicho:hover .gv-cl-foto img,
main:has(.gv-hero--fam-clinicas)   .gv-cl-nicho:hover .gv-cl-flecha{transform:none}
}

/* ── Portátil estrecho y tableta ── */
@media (max-width:1199px){
main:has(.gv-hero--fam-clinicas)   .gv-cl-nichos{grid-template-columns:repeat(2,minmax(0,1fr))}
main:has(.gv-hero--fam-clinicas)   .gv-cl-piezas,
  main:has(.gv-hero--med) .gv-cl-piezas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
main:has(.gv-hero--fam-clinicas)   .gv-cl-duo{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,32px)}
main:has(.gv-hero--fam-clinicas)   .gv-cl-duo-cabeza .gv-sx-intro .gv-p{max-width:64ch}
}
/* ── Móvil ── */
@media (max-width:767px){
main:has(.gv-hero--fam-clinicas)   .gv-cl-nichos,
main:has(.gv-hero--fam-clinicas)   .gv-cl-piezas,
main:has(.gv-hero--med)   .gv-cl-piezas{grid-template-columns:minmax(0,1fr)}
main:has(.gv-hero--fam-clinicas)   .gv-cl-foto{aspect-ratio:16/9}
}

/* ── Qué conviene medir: tres etapas colgadas de un mismo filete ──
   Las seis medidas dejan de ser una lista partida en dos y se ordenan por
   el momento del recorrido en que se observan. La línea y los tres nodos
   son toda la decoración: ni cajas, ni flechas, ni cifras de adorno. */
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:clamp(26px,2.8vw,40px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.22)}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas > li{position:relative;padding:22px clamp(20px,2.6vw,48px) 0 0}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas > li + li{padding-left:clamp(20px,2.6vw,48px)}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas > li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--gv-ink);border:1px solid var(--gv-brass-l)}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas > li + li::before{left:clamp(20px,2.6vw,48px)}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapa{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8CA8EC}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapa span{color:var(--gv-brass-l);font-variant-numeric:tabular-nums}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas dl{margin:0}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas dl > div{padding:13px 0;border-top:1px solid rgba(255,255,255,.16)}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas dt{font-size:16.5px;font-weight:650;line-height:1.25;color:#fff}
main:has(.gv-hero--fam-clinicas) .gv-cl-etapas dd{margin:4px 0 0;max-width:34ch;font-size:16px;line-height:1.5;color:#C7D3E7}
/* Cierre a ancho completo con un filete corto, no una línea que se corta. */
main:has(.gv-hero--fam-clinicas) .gv-cl-cierre{margin:clamp(26px,2.8vw,40px) 0 0;max-width:74ch;font-size:16px;line-height:1.6;color:#E1E8F5}
main:has(.gv-hero--fam-clinicas) .gv-cl-cierre::before{content:"";display:block;width:96px;height:2px;margin-bottom:16px;background:var(--gv-brass)}
@media (max-width:1023px){
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas > li:nth-child(3){margin-top:26px}
}
/* Móvil: el recorrido se pone de canto y conserva su orden. */
@media (max-width:767px){
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas{position:relative;grid-template-columns:minmax(0,1fr);padding-left:26px;border-top:0}
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.22)}
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas > li,
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas > li + li{padding:0 0 22px;margin-top:0}
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas > li::before,
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas > li + li::before{left:-26px;top:4px}
main:has(.gv-hero--fam-clinicas)   .gv-cl-etapas dd{max-width:none}
}

/* ── Hero de Clínicas: mismo componente .gv-orb que /sectores/ ──
   Solo se replican las tres reglas de encaje que allí cuelgan de
   .gv-hero--sectores. Ni el componente ni el hero original se tocan. */
main:has(.gv-hero--fam-clinicas) .gv-hero--fam-clinicas .gv-hv-creativo{min-height:0}
@media (min-width:961px){
main:has(.gv-hero--fam-clinicas)   .gv-hero--fam-clinicas .gv-orb{position:absolute;inset:0;margin:auto;height:100%}
}
@media (min-width:961px) and (max-width:1100px){
main:has(.gv-hero--fam-clinicas)   .gv-hero--fam-clinicas .gv-orb-foto{width:200px;margin:-125px 0 0 -100px}
}

/* ══════════════════════════════════════════════════════════════════════
   MEDICINA ESTÉTICA · LANDING
   Ámbito main:has(.gv-hero--med): esa cabecera solo existe en
   /sectores/clinicas-centros-privados/medicina-estetica/. Nada de lo que
   sigue alcanza a la página general de clínicas ni al resto del sitio.

   LA IDEA
   La página cuenta un recorrido, así que el hilo visual es el mismo filete
   de 1 px con nodos que ya usan Método y Servicios, pero aquí aparece tres
   veces con gramáticas distintas —sobre la fotografía del hero, como
   comparación a dos columnas y como recorrido horizontal de seis pasos—
   para que ninguna sección se lea como la anterior.
   ══════════════════════════════════════════════════════════════════════ */

main:has(.gv-hero--med){
  --med-max:min(1200px,92vw);
  --med-pad:clamp(20px,3.4vw,44px);
  --med-h2:clamp(26px,2.4vw,34px);
  --med-h3:clamp(17px,calc(.42vw + 14.9px),20px);
  --med-text:clamp(16px,calc(.22vw + 15.1px),18px);
  --med-mini:11.5px;
  --med-linea:1px solid var(--gv-line);
  --med-aire:clamp(52px,5.2vw,84px);
  --med-salto:clamp(28px,3vw,44px);
}
main:has(.gv-hero--med) .gv-med-sec{padding-block:var(--med-aire)}
main:has(.gv-hero--med) .gv-med-sec--papel{background:var(--gv-paper)}
main:has(.gv-hero--med) .gv-med-sec--soft{background:var(--gv-soft)}
main:has(.gv-hero--med) .gv-med-wrap{max-width:var(--med-max);margin:0 auto;padding-inline:var(--med-pad)}
main:has(.gv-hero--med) .gv-med-sec .gv-h2{max-width:24ch;font-size:var(--med-h2);line-height:1.14}
main:has(.gv-hero--med) .gv-med-p{max-width:64ch;margin:16px 0 0;font-size:var(--med-text);line-height:1.66;color:var(--gv-mute)}
main:has(.gv-hero--med) .gv-med-nota{margin:var(--med-salto) 0 0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--gv-mute)}
main:has(.gv-hero--med) .gv-med-nota a{color:var(--gv-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
main:has(.gv-hero--med) .gv-med-foto{margin:0}
main:has(.gv-hero--med) .gv-med-foto img{display:block;width:100%;height:100%;max-height:clamp(320px,34vw,460px);object-fit:cover;border-radius:var(--gv-r)}

/* ── Hero: una sola fotografía y el recorrido superpuesto en HTML ── */
/* ── 01 · Fondo del hero: la fotografía entra en la capa .gv-duo, que ya
   aplica el duotono y la superposición navy del sistema. Se apaga la capa
   ambiental para que no compitan dos fotografías. ── */
.gv-hero--med{--gv-img:url('/img/sectores/clinicas/fondos/hero-fondo-medicina-estetica.webp');--gv-amb-img:none}
main:has(.gv-hero--med) .gv-duo::before{background-position:72% 58%}
@media (min-width:961px){
  main:has(.gv-hero--med) .gv-hero-grid{grid-template-columns:1.95fr 1fr}
  /* El creativo se centra en vertical dentro de su columna, que en los
     heroes sectoriales se estira a toda la altura. */
  main:has(.gv-hero--med) .gv-hv-creativo{display:flex;align-items:center;justify-content:flex-end}
}
/* Cirugía estética: mismo sistema que la landing de medicina; solo cambian
   la fotografía de fondo y su encuadre. */
.gv-hero--cir{--gv-img:url('/img/sectores/clinicas/fondos/hero-fondo-cirugia-estetica.webp');--gv-amb-img:none}
main:has(.gv-hero--cir) .gv-duo::before{background-position:80% 55%}
.gv-hero--cap{--gv-img:url('/img/sectores/clinicas/fondos/hero-fondo-clinicas-capilares.webp');--gv-amb-img:none}
main:has(.gv-hero--cap) .gv-duo::before{background-position:78% 55%}
.gv-hero--den{--gv-img:url('/img/sectores/clinicas/fondos/hero-fondo-clinicas-dentales.webp');--gv-amb-img:none}
.gv-hero--abg{--gv-img:url('/img/sectores/despachos/fondos/hero-fondo-despachos-abogados.webp');--gv-amb-img:none}
.gv-hero--ref{--gv-img:url('/img/sectores/reformas/fondos/hero-fondo-reformas.webp');--gv-amb-img:none}
.gv-hero--ins{--gv-img:url('/img/sectores/instaladoras/fondos/hero-fondo-instalaciones.webp');--gv-amb-img:none}
main:has(.gv-hero--ins) .gv-duo::before{background-position:62% 55%}
/* PRESUPUESTO y SEGUIMIENTO no caben en cuatro columnas: este hero usa 2 x 2 */
main:has(.gv-hero--ref) .gv-med-hf .gv-med-hf-via,
main:has(.gv-hero--ins) .gv-med-hf .gv-med-hf-via{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:9px}
main:has(.gv-hero--ref) .gv-duo::before{background-position:56% 62%}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-duo::before{background-position:68% 62%}
main:has(.gv-hero--den) .gv-duo::before{background-position:76% 58%}
/* Seis métricas en lugar de cuatro señales: misma tarjeta, otra rejilla. */
main:has(.gv-hero--med) .gv-med-senales--seis{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(20px,1.8vw,24px)}
main:has(.gv-hero--med) .gv-med-senales--seis span{text-transform:uppercase;letter-spacing:.13em}
main:has(.gv-hero--med) .gv-med-cta--solo{margin-block:0}
main:has(.gv-hero--med) .gv-med-hero-p{max-width:56ch;margin:14px 0 0;font-size:16.5px;line-height:1.6;color:#C7D3E7}
main:has(.gv-hero--med) .gv-med-hero-nota{margin:16px 0 0;font-size:13px;letter-spacing:.04em;color:#A6BCF0}
main:has(.gv-hero--med) .gv-med-hf{position:relative;width:clamp(290px,24.5vw,370px);max-width:100%;margin:0 0 0 auto;overflow:hidden;border-radius:6px;border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 40px rgba(2,8,24,.34)}
main:has(.gv-hero--med) .gv-med-hf img{display:block;width:100%;height:100%;object-fit:cover}
main:has(.gv-hero--med) .gv-med-hf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;background:linear-gradient(0deg,rgba(6,16,40,.86) 0%,rgba(6,16,40,.42) 55%,rgba(6,16,40,0) 100%)}
main:has(.gv-hero--med) .gv-med-hf-via{position:absolute;z-index:2;left:clamp(14px,2vw,22px);right:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,20px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.34)}
/* Con el visual más estrecho, cuatro rótulos en fila se parten en dos líneas:
   por debajo de 1200 px pasan a 2 × 2 y se leen enteros. */
@media (max-width:1199px){
  main:has(.gv-hero--med) .gv-med-hf-via{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:9px}
}
/* Por debajo de 961 px el hero se apila: el visual se centra bajo el copy y
   no pasa de 310 px, así que las etiquetas siguen legibles. */
@media (max-width:960px){
  main:has(.gv-hero--med) .gv-hv-creativo{justify-content:center}
  main:has(.gv-hero--med) .gv-med-hf{width:min(100%,310px);margin-inline:auto}
}
main:has(.gv-hero--med) .gv-med-hf-via li{position:relative;padding:11px 6px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#F2F6FF}
main:has(.gv-hero--med) .gv-med-hf-via li::before{content:"";position:absolute;left:0;top:-3.5px;width:6px;height:6px;border-radius:50%;background:var(--gv-brass-l)}
main:has(.gv-hero--med) .gv-med-hf-via li:last-child::before{background:#fff}

/* ── 01 · Texto y fotografía, con las tres fricciones encadenadas ── */
main:has(.gv-hero--med) .gv-med-duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,3.6vw,60px);align-items:center}
main:has(.gv-hero--med) .gv-med-fugas{position:relative;margin:var(--med-salto) 0 0;padding:0 0 0 34px;list-style:none;counter-reset:fuga}
main:has(.gv-hero--med) .gv-med-fugas::before{content:"";position:absolute;left:4px;top:16px;bottom:16px;width:1px;background:var(--gv-line)}
main:has(.gv-hero--med) .gv-med-fugas li{position:relative;counter-increment:fuga;padding:14px 0}
main:has(.gv-hero--med) .gv-med-fugas li::before{content:counter(fuga,decimal-leading-zero);position:absolute;left:-34px;top:16px;width:22px;font-size:var(--med-mini);font-weight:700;color:var(--gv-brass);background:var(--gv-paper);font-variant-numeric:tabular-nums}
main:has(.gv-hero--med) .gv-med-fugas h3{margin:0 0 5px;font-size:var(--med-h3);line-height:1.25;letter-spacing:-.01em}
main:has(.gv-hero--med) .gv-med-fugas p{margin:0;max-width:56ch;font-size:16px;line-height:1.55;color:var(--gv-mute)}

/* ── 02 · Comparación en dos tarjetas de igual altura ──
   La recomendada no lleva etiqueta comercial: se reconoce por el filete
   azul, el matiz de fondo y una sombra un punto más presente. */
main:has(.gv-hero--med) .gv-med-comparacion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:stretch;margin-top:var(--med-salto)}
main:has(.gv-hero--med) .gv-med-tarjeta{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,30px);background:#FCFDFE;border:1px solid var(--gv-line);border-top:3px solid var(--gv-line);border-radius:6px;box-shadow:0 6px 16px -12px rgba(12,26,56,.35)}
main:has(.gv-hero--med) .gv-med-tarjeta--si{background:#F7FAFF;border-top-color:var(--gv-blue);box-shadow:0 14px 30px -18px rgba(12,26,56,.5)}
main:has(.gv-hero--med) .gv-med-ico-c{display:block;width:26px;height:26px;color:var(--gv-mute)}
main:has(.gv-hero--med) .gv-med-tarjeta--si .gv-med-ico-c{color:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-tarjeta h3{margin:14px 0 12px;font-size:var(--med-h3);line-height:1.22;letter-spacing:-.01em;color:#3E4E70}
main:has(.gv-hero--med) .gv-med-tarjeta--si h3{color:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-tarjeta ul{margin:0;padding:0;list-style:none}
main:has(.gv-hero--med) .gv-med-tarjeta li{position:relative;padding:11px 0 11px 18px;border-top:var(--med-linea);font-size:16px;line-height:1.5;color:var(--gv-mute)}
main:has(.gv-hero--med) .gv-med-tarjeta li::before{content:"";position:absolute;left:0;top:1.15em;width:8px;height:1px;background:var(--gv-line)}
main:has(.gv-hero--med) .gv-med-tarjeta--si li{color:var(--gv-ink)}
main:has(.gv-hero--med) .gv-med-tarjeta--si li::before{width:6px;height:6px;top:.95em;border-radius:50%;background:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-conclusion{margin:var(--med-salto) 0 0;padding-left:20px;max-width:66ch;border-left:2px solid var(--gv-brass);font-family:var(--gv-serif);font-size:clamp(17px,1.3vw,19px);line-height:1.5;color:var(--gv-ink)}

/* ── 03 · Recorrido de seis pasos ── */
main:has(.gv-hero--med) .gv-med-via{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:var(--med-salto) 0 0;padding:0;list-style:none}
main:has(.gv-hero--med) .gv-med-via > li{position:relative;padding:22px clamp(12px,1.4vw,22px) 0 0;border-top:var(--med-linea)}
main:has(.gv-hero--med) .gv-med-via > li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--gv-paper);border:1px solid var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-via > li:last-child::before{background:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-via span{font-size:var(--med-mini);font-weight:700;letter-spacing:.14em;color:var(--gv-brass);font-variant-numeric:tabular-nums}
main:has(.gv-hero--med) .gv-med-via h3{margin:9px 0 6px;font-size:17px;line-height:1.22;letter-spacing:-.01em}
main:has(.gv-hero--med) .gv-med-via p{margin:0;font-size:16px;line-height:1.45;color:var(--gv-mute)}

/* ── 04 · Cuatro capas encadenadas junto a la fotografía ── */
main:has(.gv-hero--med) .gv-med-sistema{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,3.6vw,60px);align-items:center;margin-top:var(--med-salto)}
main:has(.gv-hero--med) .gv-med-capas{position:relative;margin:0;padding:0 0 0 0;list-style:none}
main:has(.gv-hero--med) .gv-med-capas::before{content:"";position:absolute;left:12px;top:26px;bottom:26px;width:1px;background:var(--gv-line)}
main:has(.gv-hero--med) .gv-med-capas > li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px 0;border-top:var(--med-linea)}
main:has(.gv-hero--med) .gv-med-capas > li:first-child{border-top:0;padding-top:0}
main:has(.gv-hero--med) .gv-med-ico{position:relative;z-index:1;display:block;width:25px;height:25px;color:var(--gv-blue);background:var(--gv-soft);border-radius:50%}
main:has(.gv-hero--med) .gv-med-capas h3{margin:0 0 5px;font-size:var(--med-h3);line-height:1.22;letter-spacing:-.01em}
main:has(.gv-hero--med) .gv-med-capas p{margin:0;max-width:52ch;font-size:16px;line-height:1.5;color:var(--gv-mute)}

/* ── 05 · Señales de encaje sobre navy ── */
main:has(.gv-hero--med) .gv-med-senales{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:var(--med-salto) 0 0;padding:0;list-style:none}
main:has(.gv-hero--med) .gv-med-senales li{padding:18px 16px 20px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);border-radius:var(--gv-r);transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
main:has(.gv-hero--med) .gv-med-senales span{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gv-brass-l);font-variant-numeric:tabular-nums}
main:has(.gv-hero--med) .gv-med-senales p{margin:0;font-size:16px;line-height:1.5;color:#E1E8F5}
main:has(.gv-hero--med) .gv-med-cierre-navy{margin:var(--med-salto) 0 0;max-width:70ch;font-size:16px;line-height:1.6;color:#E1E8F5}
main:has(.gv-hero--med) .gv-med-cierre-navy::before{content:"";display:block;width:96px;height:2px;margin-bottom:16px;background:var(--gv-brass)}
@media (hover:hover) and (pointer:fine){
main:has(.gv-hero--med)   .gv-med-senales li:hover{transform:translateY(-3px);border-color:var(--gv-cta);background:rgba(255,255,255,.09);box-shadow:0 14px 30px rgba(4,10,26,.32)}
}
@media (prefers-reduced-motion:reduce){
main:has(.gv-hero--med)   .gv-med-senales li,
main:has(.gv-hero--med)   .gv-med-senales li:hover{transform:none}
}

/* ── 06 · Dos responsabilidades, dos tarjetas de la misma jerarquía ──
   Mismo tamaño, mismo peso y ningún efecto: no son enlaces y no deben
   parecerlo. Solo cambian el color del filete, del título, del icono y de
   los indicadores, para distinguir de quién es cada cosa. */
main:has(.gv-hero--med) .gv-med-partes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.4vw,32px);align-items:stretch;margin-top:var(--med-salto)}
main:has(.gv-hero--med) .gv-med-parte{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,30px);background:#fff;border:1px solid var(--gv-line);border-top:3px solid var(--gv-blue);border-radius:6px;box-shadow:0 6px 16px -12px rgba(12,26,56,.35)}
main:has(.gv-hero--med) .gv-med-parte--clinica,main:has(.gv-hero--med) .gv-med-parte--decide{border-top-color:var(--gv-ink)}
main:has(.gv-hero--med) .gv-med-ico-p{display:block;width:26px;height:26px;color:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-parte--clinica .gv-med-ico-p,main:has(.gv-hero--med) .gv-med-parte--decide .gv-med-ico-p{color:var(--gv-ink)}
main:has(.gv-hero--med) .gv-med-parte h3{margin:14px 0 12px;font-size:var(--med-h3);line-height:1.22;letter-spacing:-.01em;color:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-parte--clinica h3,main:has(.gv-hero--med) .gv-med-parte--decide h3{color:var(--gv-ink)}
main:has(.gv-hero--med) .gv-med-parte ul{margin:0;padding:0;list-style:none}
main:has(.gv-hero--med) .gv-med-parte li{position:relative;padding:10px 0 10px 18px;border-top:var(--med-linea);font-size:16px;line-height:1.5;color:var(--gv-mute)}
main:has(.gv-hero--med) .gv-med-parte li::before{content:"";position:absolute;left:0;top:1.02em;width:6px;height:6px;border-radius:50%;background:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-parte--clinica li::before,main:has(.gv-hero--med) .gv-med-parte--decide li::before{background:var(--gv-brass)}
/* Nota común a las dos tarjetas, a ancho completo y con filete de latón. */
main:has(.gv-hero--med) .gv-med-nota-partes{margin:clamp(22px,2.4vw,32px) 0 0;padding-left:18px;max-width:74ch;border-left:2px solid var(--gv-brass);font-size:16px;line-height:1.6;color:var(--gv-mute)}

/* ── FAQ y cierre ── */
main:has(.gv-hero--med) .gv-med-faq{margin-top:var(--med-salto);max-width:none;border-top:1px solid var(--gv-ink)}
main:has(.gv-hero--med) .gv-med-faq summary{padding:19px 48px 19px 0;font-size:clamp(16.5px,1.1vw,18px);font-weight:650;line-height:1.35}
main:has(.gv-hero--med) .gv-med-faq summary::after{top:17px}
main:has(.gv-hero--med) .gv-med-faq details[open] summary{color:var(--gv-blue)}
main:has(.gv-hero--med) .gv-med-faq p{max-width:66ch;padding:0 48px 22px 0;font-size:var(--med-text);line-height:1.66}
main:has(.gv-hero--med) .gv-med-cta{margin-block:clamp(40px,4.4vw,68px) 0}

/* ── Portátil, tableta y móvil ── */
@media (max-width:1199px){
main:has(.gv-hero--med)   .gv-med-via{grid-template-columns:repeat(3,minmax(0,1fr))}
main:has(.gv-hero--med)   .gv-med-via > li:nth-child(n+4){margin-top:22px}
main:has(.gv-hero--med)   .gv-med-senales{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
main:has(.gv-hero--med)   .gv-med-duo,
main:has(.gv-hero--med)   .gv-med-sistema{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.4vw,36px)}
main:has(.gv-hero--med)   .gv-med-foto img{max-height:clamp(240px,38vw,340px)}
main:has(.gv-hero--med)   .gv-med-foto--sistema{order:2}
}
@media (max-width:767px){
main:has(.gv-hero--med)   .gv-med-sec{padding-block:clamp(44px,11vw,60px)}
main:has(.gv-hero--med)   .gv-med-comparacion,
main:has(.gv-hero--med)   .gv-med-partes{grid-template-columns:minmax(0,1fr)}
main:has(.gv-hero--med)   .gv-med-via{position:relative;grid-template-columns:minmax(0,1fr);padding-left:30px}
main:has(.gv-hero--med)   .gv-med-via::before{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:1px;background:var(--gv-line)}
main:has(.gv-hero--med)   .gv-med-via > li{padding:12px 0;border-top:0;margin-top:0}
main:has(.gv-hero--med)   .gv-med-via > li::before{left:-30px;top:17px}
main:has(.gv-hero--med)   .gv-med-senales{grid-template-columns:minmax(0,1fr)}
main:has(.gv-hero--med)   .gv-med-hf-via{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
main:has(.gv-hero--med)   .gv-med-faq summary{padding-right:38px}
main:has(.gv-hero--med)   .gv-med-faq p{padding-right:0}
}

/* Las seis métricas llevan su propia progresión: 3 · 2 · 1. Va después del
   resto para imponerse a la rejilla de cuatro, que tiene la misma fuerza. */
@media (min-width:1025px){
  main:has(.gv-hero--med) .gv-med-senales--seis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  main:has(.gv-hero--med) .gv-med-senales--seis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  main:has(.gv-hero--med) .gv-med-senales--seis{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════
   DESPACHOS DE ABOGADOS · MAPA RADIAL DE FUGAS
   Solo esta landing: todo va bajo main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins).
   ═══════════════════════════════════════════════════════════ */
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-sec{padding-block:clamp(48px,5vw,74px)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-mapa{position:relative;display:grid;--abg-gap:clamp(20px,3vw,46px);--abg-fila:clamp(12px,1.3vw,18px);grid-template-columns:minmax(0,1fr) clamp(210px,17vw,230px) minmax(0,1fr);gap:var(--abg-gap);align-items:stretch;margin:clamp(26px,3vw,42px) 0 0}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col{position:relative;z-index:1;display:grid;grid-auto-rows:1fr;gap:var(--abg-fila);margin:0;padding:0;list-style:none}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga{position:relative;background:#fff;border:1px solid var(--gv-line);border-top:2px solid var(--gv-blue);border-radius:var(--gv-r);padding:clamp(14px,1.5vw,19px) clamp(15px,1.6vw,21px);box-shadow:0 1px 2px rgba(15,23,42,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga:hover{transform:translateY(-4px);border-color:var(--gv-bright);border-top-color:var(--gv-cta);box-shadow:0 10px 22px rgba(15,23,42,.10)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga:focus-visible{transform:translateY(-4px);border-color:var(--gv-bright);border-top-color:var(--gv-cta);box-shadow:0 10px 22px rgba(15,23,42,.10);outline:2px solid var(--gv-bright);outline-offset:3px}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-num{display:block;margin:0 0 5px;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--gv-brass);font-variant-numeric:tabular-nums}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga h3{margin:0 0 5px;font-size:clamp(15.5px,1.1vw,17px);line-height:1.25;letter-spacing:-.01em;color:var(--gv-ink)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga p{margin:0;font-size:14.5px;line-height:1.5;color:var(--gv-mute)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo{position:relative;z-index:1;justify-self:center;align-self:center;display:grid;place-content:center;justify-items:center;gap:8px;width:clamp(210px,17vw,230px);aspect-ratio:1;padding:0 clamp(20px,2vw,28px);border-radius:50%;background:var(--gv-ink);color:#fff;text-align:center;box-shadow:0 12px 26px rgba(15,23,42,.15)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo i{width:7px;height:7px;border-radius:50%;background:var(--gv-brass-l)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo b{font-size:14.5px;font-weight:700;line-height:1.22;letter-spacing:.06em;text-transform:uppercase}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo span{font-size:13px;line-height:1.42;color:rgba(255,255,255,.74)}

/* Red ortogonal: eje vertical junto a cada columna, una rama por tarjeta
   y dos tramos que salen del circulo. Todo decorativo y por detras. */
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col::before{content:"";position:absolute;top:calc((100% - 2 * var(--abg-fila)) / 6);bottom:calc((100% - 2 * var(--abg-fila)) / 6);width:1px;background:var(--gv-line)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col--izq::before{right:calc(var(--abg-gap) / -2)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col--der::before{left:calc(var(--abg-gap) / -2)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga::before{content:"";position:absolute;top:50%;width:calc(var(--abg-gap) / 2);height:1px;background:var(--gv-line)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga::after{content:"";position:absolute;top:50%;width:4.5px;height:4.5px;margin-top:-2px;border-radius:50%;background:var(--gv-brass)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col--izq .gv-abg-fuga::before{right:calc(var(--abg-gap) / -2)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col--izq .gv-abg-fuga::after{right:-7px}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col--der .gv-abg-fuga::before{left:calc(var(--abg-gap) / -2)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col--der .gv-abg-fuga::after{left:-7px}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo::before,
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo::after{content:"";position:absolute;top:50%;width:calc(var(--abg-gap) / 2);height:1px;background:var(--gv-line)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo::before{left:calc(var(--abg-gap) / -2)}
main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo::after{right:calc(var(--abg-gap) / -2)}

@media (prefers-reduced-motion:reduce){
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga{transition:none}
}

/* Tablet: nucleo arriba, seis tarjetas en 2 x 3 y sin conexiones */
@media (max-width:1099px){
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-mapa{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col{display:contents}
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-col::before,
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga::before,
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-fuga::after,
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo::before,
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo::after{content:none;display:none}
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo{order:-1;grid-column:1 / -1;margin:0 auto clamp(6px,1vw,12px)}
}

/* Movil: una tarjeta por fila */
@media (max-width:767px){
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-mapa{grid-template-columns:minmax(0,1fr)}
  main:has(.gv-hero--abg,.gv-hero--ref,.gv-hero--ins) .gv-abg-nucleo{width:min(100%,210px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   ORBE DEL HERO DE INICIO
   Sustituye al antiguo panel de control (.gv-dash-*). Es el mismo sistema
   validado en /paginas/pruebas/hero-inicio-esfera/, ya sin avisos, sin
   secuencia demostrativa y con el conjunto un 10 % más pequeño.

   Reparto: aquí van la geometría, el cristal, la malla, los iconos y las
   fibras; el motor de giro y la proyección viven en /js/hero-orbe.js, que
   solo carga Inicio. El fondo, el velo y el copy son los del hero, no se
   tocan desde aquí.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-hero-orbe{
  /* — geometría — */
  --orbe-size:clamp(252px,30.6vw,432px);
  --orbe-depth:1.0;             /* multiplicador de profundidad */
  /* — color — */
  --orbe-line:rgba(150,180,235,.26);
  /* La malla tiene su propia variable, mucho más tenue: es una
     referencia de latitud y longitud, no un elemento de dibujo. */
  /* Referencias de latitud y longitud: el color va sin alfa y la presencia
     la ponen estas dos opacidades, una para la mitad que pasa por delante
     del volumen y otra para la que pasa por detrás. */
  --orbe-malla:rgb(var(--gv-cristal-malla));
  --orbe-malla-frente:0.075;
  --orbe-malla-fondo:0.022;
  --orbe-blue:#2F6BFF;
  --orbe-gold:var(--gv-brass-l);
  /* — movimiento (los lee el motor) — */
  --orbe-speed-max:0.55;        /* grados por frame en el eje Y */
  --orbe-inertia:0.055;         /* interpolación hacia la velocidad objetivo */
  --orbe-deadzone:0.10;         /* 10 % del área de cálculo */
  display:flex;justify-content:center;
}
.gv-orbe-scene{
  position:relative;
  width:var(--orbe-size);aspect-ratio:1;
  filter:drop-shadow(0 24px 60px rgba(6,14,38,.55));
  perspective:1100px;perspective-origin:50% 45%;
}
.gv-orbe-mundo{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

/* 1 · cristal: brillo desigual en la circunferencia, dos reflejos y
      variación de transparencia entre centro y borde. Sin disco opaco. */
/* Los colores y las intensidades son los del núcleo de Servicios, leídos
   de las mismas variables: mismo azul, misma transparencia, mismo canto
   encendido y el mismo reparto entre la zona clara de arriba y la sombra
   de abajo. Lo que cambia respecto a la versión anterior es que el vidrio
   pesa menos —la sombra inferior era casi negra y ensuciaba el azul— y que
   el borde y el relleno interior tienen bastante más luz. */
.gv-orbe-cristal{
  position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;transform:none;
  background:
    /* reflejo especular alto, el que más define el vidrio */
    radial-gradient(38% 30% at 30% 24%,rgba(var(--gv-cristal-espejo),.34) 0%,rgba(var(--gv-cristal-espejo),.12) 42%,transparent 72%),
    /* segundo reflejo, bajo y suave */
    radial-gradient(26% 20% at 74% 76%,rgba(var(--gv-cristal-halo),.15) 0%,transparent 70%),
    /* cuerpo del vidrio */
    radial-gradient(58% 52% at 40% 38%,rgba(var(--gv-cristal-base),.13) 0%,rgba(var(--gv-cristal-base),.04) 46%,transparent 74%),
    /* canto: apagado de frente y encendido en el borde */
    radial-gradient(circle at 50% 50%,rgba(var(--gv-cristal-borde),0) 50%,rgba(var(--gv-cristal-borde),.11) 76%,rgba(var(--gv-cristal-borde),.32) 95%,rgba(var(--gv-cristal-espejo),.10) 100%);
  box-shadow:
    inset 0 0 42px rgba(var(--gv-cristal-interior),.17),
    inset 0 10px 26px -14px rgba(var(--gv-cristal-espejo),.34),
    inset 0 -18px 34px -18px rgba(8,16,40,.52),
    inset 0 0 90px -30px rgba(var(--gv-cristal-halo),.44),
    /* halo exterior, el mismo resplandor que rodea al núcleo de Servicios */
    0 0 80px -6px rgba(var(--gv-cristal-halo),.16),
    0 26px 60px -34px rgba(4,10,28,.85);
}
/* borde: la intensidad varía alrededor de la circunferencia */
.gv-orbe-cristal::before{
  content:"";position:absolute;inset:0;border-radius:50%;padding:1px;
  background:conic-gradient(from 210deg,
    rgba(var(--gv-cristal-espejo),.78) 0deg,rgba(var(--gv-cristal-borde),.34) 62deg,rgba(var(--gv-cristal-borde),.16) 140deg,
    rgba(var(--gv-cristal-borde),.50) 214deg,rgba(var(--gv-cristal-borde),.18) 292deg,rgba(var(--gv-cristal-espejo),.78) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
/* refracción contenida en el perímetro, sin desenfocar el interior */
.gv-orbe-cristal::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  backdrop-filter:blur(1.2px);-webkit-backdrop-filter:blur(1.2px);
  -webkit-mask:radial-gradient(circle,transparent 84%,#000 96%);
  mask:radial-gradient(circle,transparent 84%,#000 96%);
}
/* segundo borde interior: da grosor al vidrio sin repetir el círculo */
.gv-orbe-cristal2{
  position:absolute;inset:3.2%;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(from 160deg,rgba(var(--gv-cristal-espejo),.24) 0deg,rgba(var(--gv-cristal-borde),.05) 78deg,
    rgba(var(--gv-cristal-borde),.17) 168deg,rgba(var(--gv-cristal-borde),.04) 250deg,rgba(var(--gv-cristal-espejo),.24) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 88%,#000 97%);
  mask:radial-gradient(circle,transparent 88%,#000 97%);
}

/* 2 · referencia de latitud y longitud
      Tres meridianos y tres paralelos —uno sobre el ecuador, el ecuador y
      uno debajo— dibujados sobre la superficie del cristal. Es lo que hace
      entender que aquello es una esfera y no un disco; no son fibras ni
      órbitas, y no deben leerse como una jaula.

      Cada aro viene partido en dos mitades con `clip-path`, porque un solo
      círculo en CSS solo admite una opacidad y aquí hacen falta dos: la
      mitad que en este momento pasa por delante del volumen y la que pasa
      por detrás, que tiene que verse mucho menos. Cuál es cuál cambia con
      el giro, así que la reparte el motor en cada fotograma; los valores de
      aquí son los de partida, para que sin JS se vean igualmente discretas.

      El radio va un pelo por fuera del cristal (inset negativo) para que no
      coincidan exactamente los dos bordes y no aparezcan parpadeos. */
.gv-orbe-malla{position:absolute;inset:0;transform-style:preserve-3d}
.gv-orbe-malla i{
  position:absolute;inset:-0.15%;border-radius:50%;   /* R × 1.003 */
  border:.5px solid var(--orbe-malla);
  opacity:var(--orbe-malla-frente);
}
/* mitades: izquierda y derecha para los meridianos, arriba y abajo para los
   paralelos. El motor solo cambia la opacidad, nunca el recorte. */
.gv-orbe-malla i:nth-child(odd){clip-path:inset(0 50% 0 0)}
.gv-orbe-malla i:nth-child(even){clip-path:inset(0 0 0 50%)}
.gv-orbe-malla i:nth-child(n+7):nth-child(odd){clip-path:inset(0 0 50% 0)}
.gv-orbe-malla i:nth-child(n+7):nth-child(even){clip-path:inset(50% 0 0 0)}

/* tres meridianos repartidos alrededor del eje vertical */
.gv-orbe-malla i:nth-child(1),.gv-orbe-malla i:nth-child(2){transform:rotateY(0deg)}
.gv-orbe-malla i:nth-child(3),.gv-orbe-malla i:nth-child(4){transform:rotateY(60deg)}
.gv-orbe-malla i:nth-child(5),.gv-orbe-malla i:nth-child(6){transform:rotateY(120deg)}
/* tres paralelos: por encima del ecuador, el ecuador y por debajo */
.gv-orbe-malla i:nth-child(7),.gv-orbe-malla i:nth-child(8){transform:rotateX(90deg) translateZ(34%) scale(.80)}
.gv-orbe-malla i:nth-child(9),.gv-orbe-malla i:nth-child(10){transform:rotateX(90deg)}
.gv-orbe-malla i:nth-child(11),.gv-orbe-malla i:nth-child(12){transform:rotateX(90deg) translateZ(-34%) scale(.80)}

/* 3 · conexiones interiores hacia el núcleo */
.gv-orbe-lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gv-orbe-lineas line{stroke:var(--orbe-line);stroke-width:1;vector-effect:non-scaling-stroke}

/* 4 · fibras: dos capas, por detrás y por delante del volumen. Sin recorte,
      para que las órbitas puedan salir por los cuatro lados. */
.gv-orbe-fibras{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gv-orbe-fibras--tras{z-index:0;opacity:.55}
.gv-orbe-fibras--del{z-index:1500}
.gv-orbe-fibra{fill:none;stroke-linecap:round}
.gv-orbe-cabeza,.gv-orbe-halo,.gv-orbe-reflejo,.gv-orbe-nucleo{stroke:none}
.gv-orbe-cabeza{filter:blur(.6px)}
.gv-orbe-halo{filter:blur(2.5px)}
.gv-orbe-reflejo{filter:blur(3px)}

/* 5 · iconos: los coloca el motor con translate3d y escala por profundidad */
.gv-orbe-nodos{position:absolute;inset:0;pointer-events:none}
.gv-orbe-nodo{
  position:absolute;top:50%;left:50%;display:flex;align-items:center;gap:7px;
  padding:5px 9px 5px 6px;border-radius:99px;white-space:nowrap;
  background:rgba(10,20,48,.62);border:1px solid rgba(150,180,235,.24);
  color:#D7E3F8;font-size:11.5px;letter-spacing:.02em;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  will-change:transform,opacity;
}
.gv-orbe-nodo svg{width:13px;height:13px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gv-orbe-nodo b{font-weight:600}

/* 6 · núcleo inmóvil: el centro queda transparente, sin disco */
.gv-orbe-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(72%,260px);text-align:center;z-index:2000;
}
.gv-orbe-core b,.gv-orbe-core span{text-shadow:0 1px 10px rgba(6,14,36,.85),0 0 22px rgba(6,14,36,.6)}
.gv-orbe-core b{display:block;font-size:clamp(12px,1.05vw,13.5px);font-weight:700;letter-spacing:.16em;color:#fff}
.gv-orbe-core span{display:block;margin-top:6px;font-size:clamp(10.5px,.85vw,12px);letter-spacing:.06em;color:#AFC2E6}
.gv-orbe-core i{display:block;width:26px;height:1px;margin:9px auto 0;background:var(--orbe-gold)}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .gv-hero-orbe{--orbe-size:clamp(234px,34.2vw,342px)}
}
@media (max-width:960px){
  /* apilado bajo el copy: el conjunto se reduce y pierde profundidad */
  .gv-hero-orbe{--orbe-size:min(68vw,324px);--orbe-depth:.72;margin-top:clamp(24px,5vw,38px)}
}
@media (max-width:560px){
  .gv-hero-orbe{--orbe-size:min(74vw,288px);--orbe-depth:.6}
  /* en pantallas pequeñas se retira un meridiano y el paralelo de arriba */
  .gv-orbe-malla i:nth-child(5),.gv-orbe-malla i:nth-child(6),
  .gv-orbe-malla i:nth-child(7),.gv-orbe-malla i:nth-child(8){display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   HEROES DE LAS PÁGINAS PRINCIPALES · FOTOGRAFÍA LIMPIA
   Mismo criterio ya aprobado en Inicio: se ve la fotografía propia de cada
   página, con un velo navy concentrado donde va el copy y nada más encima.
   El fondo técnico (--gv-img), la cuadrícula de .gv-mesh y el halo azul
   salen del hero; las dos últimas ya no se marcan en el HTML.

   Solo alcanza a Servicios, Método, Sectores, Acerca de y Contacto: ni
   Inicio, ni las landings de sector, ni las páginas de prueba entran aquí.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-hero--servicios,.gv-hero--metodo,.gv-hero--sectores,
.gv-hero--acerca,.gv-hero--contacto{--gv-img:none}

/* La fotografía deja de ser una veladura del 26–32 % y pasa a verse. El
   background-position se repite aquí para ganar al encuadre común que el
   sistema aplica entre 961 y 1100 px. */
:is(.gv-hero--servicios,.gv-hero--metodo,.gv-hero--sectores,
    .gv-hero--acerca,.gv-hero--contacto) .gv-amb{
  opacity:1;
  background-position:var(--gv-amb-pos,center top);
}
/* Encuadre propio de cada fotografía: en las cinco el copy va a la
   izquierda, así que la parte descriptiva de la imagen se desplaza hacia
   la derecha, cada una según dónde tenga su punto de interés. */
.gv-hero--servicios{--gv-amb-pos:62% 50%}     /* rótulo y pantalla de datos */
.gv-hero--metodo{--gv-amb-pos:55% 42%}        /* mesa de trabajo y monitor */
.gv-hero--sectores{--gv-amb-pos:68% 48%}      /* muestrario de materiales */
.gv-hero--acerca{--gv-amb-pos:74% 45%}        /* ventanal y puestos */
.gv-hero--contacto{--gv-amb-pos:58% 55%}      /* escritorio con la lámpara */
.gv-hero--servicios .gv-amb{filter:brightness(1.10) contrast(.97) saturate(.98)}
.gv-hero--metodo .gv-amb{filter:brightness(1.08) contrast(.98) saturate(.98)}
.gv-hero--sectores .gv-amb{filter:brightness(1.09) contrast(.97) saturate(.99)}
.gv-hero--acerca .gv-amb{filter:brightness(1.18) contrast(.96) saturate(.98)}
.gv-hero--contacto .gv-amb{filter:brightness(1.10) contrast(.97) saturate(.98)}

/* Velo de escritorio: navy fuerte tras el copy, medio en el centro y casi
   limpio en la columna del creativo, con un cierre suave abajo. Cada
   página ajusta la intensidad a lo que tiene su fotografía. */
@media (min-width:961px){
  .gv-hero--servicios .gv-veil{background:
    linear-gradient(90deg,rgba(7,17,38,.70) 0%,rgba(7,17,38,.54) 28%,rgba(7,17,38,.24) 48%,rgba(7,17,38,.06) 66%,rgba(7,17,38,0) 80%),
    linear-gradient(180deg,rgba(7,17,38,.02) 55%,rgba(7,17,38,.20) 100%)}
  .gv-hero--metodo .gv-veil{background:
    linear-gradient(90deg,rgba(7,17,38,.72) 0%,rgba(7,17,38,.56) 26%,rgba(7,17,38,.26) 46%,rgba(7,17,38,.08) 64%,rgba(7,17,38,0) 78%),
    linear-gradient(180deg,rgba(7,17,38,.02) 58%,rgba(7,17,38,.22) 100%)}
  .gv-hero--sectores .gv-veil{background:
    linear-gradient(90deg,rgba(7,17,38,.66) 0%,rgba(7,17,38,.50) 28%,rgba(7,17,38,.22) 50%,rgba(7,17,38,.05) 68%,rgba(7,17,38,0) 82%),
    linear-gradient(180deg,rgba(7,17,38,.02) 56%,rgba(7,17,38,.18) 100%)}
  .gv-hero--acerca .gv-veil{background:
    linear-gradient(90deg,rgba(7,17,38,.62) 0%,rgba(7,17,38,.46) 26%,rgba(7,17,38,.20) 48%,rgba(7,17,38,.04) 68%,rgba(7,17,38,0) 82%),
    linear-gradient(180deg,rgba(7,17,38,.02) 58%,rgba(7,17,38,.18) 100%)}
  .gv-hero--contacto .gv-veil{background:
    linear-gradient(90deg,rgba(7,17,38,.74) 0%,rgba(7,17,38,.58) 26%,rgba(7,17,38,.28) 46%,rgba(7,17,38,.08) 64%,rgba(7,17,38,0) 78%),
    linear-gradient(180deg,rgba(7,17,38,.02) 56%,rgba(7,17,38,.22) 100%)}
}

/* Tablet y móvil: el sistema oculta .gv-amb para no dejar la foto debajo
   del copy apilado. Aquí se conserva —la fotografía debe seguir siendo
   reconocible— y el velo pasa a vertical, más denso arriba, que es donde
   cae el texto.

   Inicio entra en las dos listas. Antes se quedaba fuera y, como además
   lleva --gv-img:none, por debajo de 960 px no le quedaba ninguna capa con
   imagen: solo el navy sólido de .gv-duo. Es el mismo tratamiento que las
   otras cinco, sin regla propia. */
@media (max-width:960px){
  :is(.gv-hero--inicio,.gv-hero--servicios,.gv-hero--metodo,.gv-hero--sectores,
      .gv-hero--acerca,.gv-hero--contacto) .gv-amb{
    display:block;opacity:1;filter:brightness(1.16) contrast(.96) saturate(.98);
  }
  /* En vertical la foto se recorta por los lados: el encuadre se desplaza a
     la derecha para conservar el rótulo y los puestos de trabajo. */
  .gv-hero--inicio{--gv-amb-pos:70% 45%}
  .gv-hero--servicios{--gv-amb-pos:64% 42%}
  .gv-hero--metodo{--gv-amb-pos:58% 38%}
  .gv-hero--sectores{--gv-amb-pos:70% 40%}
  .gv-hero--acerca{--gv-amb-pos:72% 40%}
  .gv-hero--contacto{--gv-amb-pos:60% 45%}
  :is(.gv-hero--inicio,.gv-hero--servicios,.gv-hero--metodo,.gv-hero--sectores,
      .gv-hero--acerca,.gv-hero--contacto) .gv-veil{background:
    linear-gradient(180deg,rgba(7,17,38,.82) 0%,rgba(7,17,38,.70) 40%,rgba(7,17,38,.56) 72%,rgba(7,17,38,.66) 100%)}
}

/* Sombra corta bajo el copy: protege la lectura sin volver a oscurecer la
   fotografía, igual que en Inicio. */
:is(.gv-hero--servicios,.gv-hero--metodo,.gv-hero--sectores,
    .gv-hero--acerca,.gv-hero--contacto) .gv-hv-copy :is(.gv-kicker,.gv-h1,.gv-lead,.gv-trust){
  text-shadow:0 1px 3px rgba(7,17,38,.55);
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTORES · LAS DOS FAMILIAS DE COMPRA
   Dos tarjetas comparativas independientes, con el mismo peso visual, y
   una banda de implicación debajo. Sustituye al esquema de bifurcación
   con nodos y conectores, que dejaba demasiado aire entre columnas.
   Todo cuelga de main:has(.gv-hero--sectores): no alcanza a las tarjetas
   de especialidades ni a ninguna otra página.
   ═══════════════════════════════════════════════════════════════════════ */
main:has(.gv-hero--sectores) .gv-sfam-rotulo{
  margin:clamp(26px,2.6vw,38px) 0 clamp(14px,1.4vw,18px);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gv-mute);
}
main:has(.gv-hero--sectores) .gv-sfam-par{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);align-items:stretch;
}
main:has(.gv-hero--sectores) .gv-sfam-card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,32px);
  background:#fff;border:1px solid var(--gv-line);border-radius:var(--gv-r);
  box-shadow:0 12px 28px -24px rgba(9,20,48,.55);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* Matiz mínimo entre las dos: ninguna es mejor que la otra. */
main:has(.gv-hero--sectores) .gv-sfam-card--proyecto{background:var(--gv-paper)}
/* Filete azul superior, igual en ambas. */
main:has(.gv-hero--sectores) .gv-sfam-card::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--gv-blue);border-radius:var(--gv-r) var(--gv-r) 0 0;
  transition:background-color .2s ease;
}
main:has(.gv-hero--sectores) .gv-sfam-card-cab{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;
  padding-bottom:clamp(14px,1.5vw,18px);
}
main:has(.gv-hero--sectores) .gv-sfam-card-ico{
  grid-row:1 / span 2;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--gv-soft);border:1px solid var(--gv-line);color:var(--gv-blue);
}
main:has(.gv-hero--sectores) .gv-sfam-card-ico svg{width:20px;height:20px}
main:has(.gv-hero--sectores) .gv-sfam-card-eti{
  margin:0;align-self:end;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gv-mute);
}
main:has(.gv-hero--sectores) .gv-sfam-card h3{
  margin:0;align-self:start;
  font-size:clamp(17px,1.35vw,20px);line-height:1.22;letter-spacing:-.012em;color:var(--gv-ink);
}
/* Cuatro filas con etiqueta en latón y filete de separación. */
main:has(.gv-hero--sectores) .gv-sfam-card-filas{margin:0;display:flex;flex-direction:column}
main:has(.gv-hero--sectores) .gv-sfam-fila{padding:clamp(13px,1.3vw,16px) 0;border-top:1px solid var(--gv-line)}
main:has(.gv-hero--sectores) .gv-sfam-fila:last-child{padding-bottom:0}
main:has(.gv-hero--sectores) .gv-sfam-fila dt{
  margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gv-brass);
}
main:has(.gv-hero--sectores) .gv-sfam-fila dd{margin:0;font-size:16px;line-height:1.55;color:var(--gv-mute)}

/* Banda de conclusión, a todo el ancho y con otra voz: no es una tercera
   tarjeta, es el cierre de la comparación. */
main:has(.gv-hero--sectores) .gv-sfam-imp{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:baseline;
  margin-top:clamp(18px,2vw,26px);
  padding:clamp(16px,1.7vw,22px) clamp(18px,2vw,26px);
  background:var(--gv-soft);border-left:3px solid var(--gv-brass);
  border-radius:0 var(--gv-r) var(--gv-r) 0;
}
main:has(.gv-hero--sectores) .gv-sfam-imp .gv-imp-tag{padding-top:0}
main:has(.gv-hero--sectores) .gv-sfam-imp p{
  margin:0;font-family:var(--gv-serif);font-size:clamp(17px,1.5vw,19px);line-height:1.5;
  color:var(--gv-ink);max-width:74ch;
}

/* Hover contenido, solo donde hay puntero fino. Las tarjetas no son
   enlaces: no cambian el cursor ni añaden flechas. */
@media (hover:hover) and (pointer:fine){
  main:has(.gv-hero--sectores) .gv-sfam-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 40px -26px rgba(9,20,48,.62);
    border-color:var(--gv-bright);
  }
  main:has(.gv-hero--sectores) .gv-sfam-card:hover::before{background:var(--gv-cta)}
}

/* Una columna antes de que el contenido se comprima. */
@media (max-width:820px){
  main:has(.gv-hero--sectores) .gv-sfam-par{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  main:has(.gv-hero--sectores) .gv-sfam-card{padding:20px 18px}
  main:has(.gv-hero--sectores) .gv-sfam-imp{padding:16px 16px 16px 18px;grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
  main:has(.gv-hero--sectores) .gv-sfam-card{transition:none}
  main:has(.gv-hero--sectores) .gv-sfam-card:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   TARJETAS DE PROCESO · SISTEMA COMPARTIDO
   Una sola base para cualquier recorrido por pasos, clara u oscura. La
   usan las cinco etapas de «De observar a decidir», las cuatro de la
   implantación y las tres compactas del ciclo de continuidad.

   Base común: rejilla, acolchado, radio, filete superior, tipografía,
   separaciones, elevación y responsive. Las variantes --light y --dark
   solo cambian fondo, texto, borde, sombra e intensidad del filete.
   El número de columnas se declara con --cards en la rejilla.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-card-grid{
  --cards:4;
  display:grid;grid-template-columns:repeat(var(--cards),minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);align-items:stretch;
  margin:var(--mh-salto,clamp(28px,3vw,44px)) 0 0;
}
.gv-card-grid--5{--cards:5}
.gv-card-grid--4{--cards:4}
.gv-card-grid--3{--cards:3}
.gv-card-grid--2{--cards:2}

.gv-pcard{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(18px,1.9vw,26px);
  border-radius:var(--gv-r);border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* Filete superior: mismo trazo en las dos variantes, distinta intensidad. */
.gv-pcard::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  border-radius:var(--gv-r) var(--gv-r) 0 0;
  background:var(--pcard-filete,var(--gv-blue));
  transition:background-color .2s ease;
}
.gv-pcard__ico{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--pcard-ico-fondo);border:1px solid var(--pcard-borde);
  color:var(--pcard-filete,var(--gv-blue));margin-bottom:14px;
}
.gv-pcard__ico svg{width:19px;height:19px}
.gv-pcard__num{
  font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--pcard-num);font-variant-numeric:tabular-nums;
}
.gv-pcard__tit{
  margin:6px 0 0;font-size:clamp(16px,1.25vw,18.5px);line-height:1.24;
  letter-spacing:-.01em;color:var(--pcard-tit);
}
.gv-pcard__txt{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--pcard-txt)}
/* Lista de detalles dentro de la tarjeta: etiqueta corta y su explicación.
   Misma escala que .gv-pcard__num para las etiquetas y que __txt para el
   cuerpo, de modo que no aparece una tipografía nueva. */
.gv-pcard__dl{margin:14px 0 0}
.gv-pcard__dl dt{
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pcard-num);
}
.gv-pcard__dl dt + dd{margin-top:5px}
.gv-pcard__dl dd{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--pcard-txt)}
.gv-pcard__dl dd:last-child{margin-bottom:0}
/* Lista de puntos dentro de la tarjeta: un filete fino entre ítems, sin
   viñetas. Misma escala de texto que .gv-pcard__txt. */
.gv-pcard__list{list-style:none;margin:14px 0 0;padding:0}
.gv-pcard__list li{
  padding:12px 0;border-top:1px solid var(--pcard-borde);
  font-size:15px;line-height:1.55;color:var(--pcard-txt);
}
.gv-pcard__list li:first-child{padding-top:0;border-top:0}
.gv-pcard__list li:last-child{padding-bottom:0}
.gv-pcard__tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 0;padding:0;
}
.gv-pcard__tags li{
  padding:3px 8px;border-radius:99px;border:1px solid var(--pcard-borde);
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pcard-num);
}
/* Variante clara */
.gv-pcard--light{
  --pcard-borde:var(--gv-line);
  --pcard-ico-fondo:var(--gv-soft);
  --pcard-num:var(--gv-brass);
  --pcard-tit:var(--gv-ink);
  --pcard-txt:var(--gv-mute);
  background:#fff;border-color:var(--gv-line);
  box-shadow:0 12px 28px -24px rgba(9,20,48,.55);
}
/* Variante oscura: navy algo más claro que la sección */
.gv-pcard--dark{
  --pcard-borde:rgba(150,180,235,.22);
  --pcard-ico-fondo:rgba(255,255,255,.06);
  --pcard-num:var(--gv-brass-l);
  --pcard-tit:#fff;
  --pcard-txt:#C7D3E7;
  --pcard-filete:var(--gv-bright);
  background:rgba(255,255,255,.045);border-color:rgba(150,180,235,.22);
  box-shadow:0 16px 34px -28px rgba(0,0,0,.8);
}
/* Variante compacta: menos alto, sin número */
.gv-pcard--compact{
  flex-direction:row;align-items:center;gap:12px;
  padding:clamp(14px,1.4vw,18px) clamp(16px,1.6vw,20px);
}
.gv-pcard--compact .gv-pcard__ico{margin:0;width:32px;height:32px}
.gv-pcard--compact .gv-pcard__ico svg{width:17px;height:17px}
.gv-pcard--compact .gv-pcard__tit{margin:0;font-size:15.5px;letter-spacing:.02em}
/* Variante nota: tarjeta suelta fuera de rejilla, para cerrar una sección. */
.gv-pcard--nota{padding:clamp(22px,2.2vw,30px)}
.gv-pcard--nota .gv-eyebrow{margin:0}
.gv-pcard--nota .gv-pcard__tit{margin-top:8px}

/* Elevación contenida, solo con puntero fino. No son enlaces: no cambian
   el cursor ni añaden flechas. */
@media (hover:hover) and (pointer:fine){
  .gv-pcard:hover{transform:translateY(-5px)}
  .gv-pcard--light:hover{box-shadow:0 20px 40px -26px rgba(9,20,48,.62);border-color:var(--gv-bright)}
  .gv-pcard--dark:hover{box-shadow:0 22px 44px -28px rgba(0,0,0,.9);border-color:rgba(150,180,235,.42)}
  .gv-pcard:hover::before{background:var(--gv-cta)}
  .gv-pcard--dark:hover::before{background:#5C8CFF}
}
@media (prefers-reduced-motion:reduce){
  .gv-pcard{transition:none}
  .gv-pcard:hover{transform:none}
}

/* Responsive común. Con cinco tarjetas, la segunda fila reparte las dos
   restantes a mitades para que no queden estiradas ni descolgadas. */
@media (min-width:901px) and (max-width:1200px){
  .gv-card-grid--5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gv-card-grid--5 > *{grid-column:span 2}
  .gv-card-grid--5 > :nth-child(4),
  .gv-card-grid--5 > :nth-child(5){grid-column:span 3}
  /* con cuatro pasos, dos por fila antes de que el texto se estreche */
  .gv-card-grid--4{--cards:2}
}
@media (max-width:900px){
  .gv-card-grid--5,.gv-card-grid--4{--cards:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .gv-card-grid--2{--cards:1;grid-template-columns:minmax(0,1fr)}
  .gv-card-grid--5 > *{grid-column:auto}
}
@media (max-width:620px){
  .gv-card-grid{--cards:1;grid-template-columns:minmax(0,1fr)}
  .gv-card-grid--5 > *{grid-column:auto}
}

/* El ciclo de continuidad va más pegado a las cuatro tarjetas: es su
   consecuencia, no otro bloque. */
main:has(.gv-hero--metodo) .gv-mh-ciclo-grid{margin-top:clamp(16px,1.8vw,24px)}
main:has(.gv-hero--metodo) .gv-mh-ciclo-grid + .gv-mh-nota{margin-top:clamp(20px,2.2vw,30px)}

/* ═══════════════════════════════════════════════════════════════════════
   AGENTES DE IA (Servicios · 05)
   Extensión de lo que ya existe, no un componente nuevo: el fondo lo pone
   .gv-sec--dark, la cuadrícula .gv-mesh, la cabecera .gv-svh-head, la
   rejilla .gv-card-grid--3 y el material de las tarjetas .gv-pcard--dark,
   con su padding, radio, filete, sombra, hover y movimiento reducido.
   Aquí solo va lo que esa base no cubre: el resalte del titular, la
   progresión entre niveles, la diferencia de intensidad entre las tres
   tarjetas, la cadena de capacidades y la franja de captación.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-ia{
  /* Iluminación azul localizada detrás de las tarjetas. Va en el fondo de la
     sección, sobre el navy y bajo la cuadrícula, así que no toca el texto. */
  background-image:radial-gradient(72% 46% at 50% 46%,rgba(47,107,255,.16) 0%,transparent 72%);
}
.gv-ia .gv-svh-head{max-width:none}
/* Único uso del latón en la sección: la mitad resaltada del titular. */
.gv-ia-oro{font-style:normal;color:var(--gv-brass-l)}
.gv-ia .gv-svh-intro{max-width:64ch}
.gv-ia-apunte{margin-top:12px}

/* ── Progresión Voice → Follow-up → AI System ──────────────────────────
   Tres nodos sobre una línea fina, alineados con las columnas de la rejilla
   de abajo. No es un selector: nada es pulsable y ninguno aparece «activo»
   frente a los demás; lo que cambia es la luminosidad, de izquierda a
   derecha, para acompañar a la acumulación. */
.gv-ia-prog{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin:clamp(26px,3vw,40px) 0 0;padding:0;
}
.gv-ia-prog-nivel{
  position:relative;display:grid;justify-items:center;gap:9px;
  padding-bottom:2px;
}
.gv-ia-prog-nom{
  font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ia-nom,#9DB6E8);
}
/* La línea que une los tres niveles. Se dibuja en cada nivel, no en el
   contenedor, para que cada tramo tenga su propia intensidad; el primero
   empieza en el centro y el último termina ahí. */
.gv-ia-prog-nivel::before{
  content:"";position:absolute;left:0;right:0;top:calc(50% + 3px);height:1px;
  background:var(--ia-linea,rgba(150,180,235,.24));
}
.gv-ia-prog-nivel--1::before{left:50%}
.gv-ia-prog-nivel--3::before{right:50%}
.gv-ia-prog-nodo{
  position:relative;z-index:1;width:9px;height:9px;border-radius:50%;
  background:var(--gv-ink);
  box-shadow:0 0 0 1px var(--ia-nodo,rgba(150,180,235,.5)) inset,
             0 0 0 4px var(--gv-ink);
}
.gv-ia-prog-num{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--ia-num,#7F97C9);font-variant-numeric:tabular-nums;
}
/* La luminosidad sube un escalón por nivel. */
.gv-ia-prog-nivel--2{--ia-nom:#B6CBF3;--ia-linea:rgba(143,211,244,.34);--ia-nodo:rgba(143,211,244,.75);--ia-num:#9DB6E8}
.gv-ia-prog-nivel--3{--ia-nom:#DCE9FF;--ia-linea:rgba(47,107,255,.55);--ia-num:var(--gv-brass-l)}
.gv-ia-prog-nivel--3 .gv-ia-prog-nodo{
  background:var(--gv-bright);
  box-shadow:0 0 0 1px var(--gv-brass-l) inset,0 0 0 4px var(--gv-ink),
             0 0 12px rgba(47,107,255,.6);
}

/* ── Las tres tarjetas ────────────────────────────────────────────────
   Misma estructura y misma altura. Solo cambian el borde, el filete y una
   iluminación cada vez más presente; el tamaño no. La tercera no es una
   tarjeta de precio destacada: se distingue por definición, no por escala. */
.gv-ia-cards{margin-top:clamp(16px,1.8vw,22px)}
.gv-ia-card-eti{display:flex;align-items:baseline;gap:10px;margin:0}
.gv-ia-card-nom{
  font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:#B6CBF3;
}
/* «Incluye…»: dice con palabras lo que la progresión dice con luz, para no
   depender solo del color. */
.gv-ia-card-incluye{
  display:inline-flex;align-self:flex-start;margin:10px 0 0;
  padding:3px 9px;border-radius:99px;
  border:1px dashed rgba(150,180,235,.36);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#9DB6E8;
}
.gv-ia-card .gv-pcard__tit{margin-top:9px}
/* La lista de capacidades empuja las etiquetas al pie, así las tres tarjetas
   alinean su franja inferior aunque el texto no mida lo mismo. */
.gv-ia-card .gv-pcard__tags{margin-top:auto;padding-top:16px}
.gv-ia-card--2{
  --pcard-borde:rgba(143,211,244,.28);
  border-color:rgba(143,211,244,.28);
  --pcard-filete:#8FD3F4;
  box-shadow:0 16px 34px -28px rgba(0,0,0,.8),0 0 26px -14px rgba(143,211,244,.45);
}
.gv-ia-card--3{
  --pcard-borde:rgba(47,107,255,.42);
  border-color:rgba(47,107,255,.42);
  /* Filete azul entero, sin tramo en latón: el nivel final se distingue por
     un azul algo más luminoso que los dos anteriores, no por cambiar de color
     a mitad de recorrido. Mismo grosor de 3 px que las otras dos tarjetas. */
  --pcard-filete:#5C8CFF;
  --pcard-tit:#fff;
  --pcard-txt:#D4DFF2;
  background:rgba(255,255,255,.065);
  box-shadow:0 18px 38px -28px rgba(0,0,0,.85),0 0 30px -14px rgba(47,107,255,.5);
}
.gv-ia-card--3 .gv-ia-card-nom{color:#DCE9FF}
.gv-ia-card--3 .gv-pcard__num{color:var(--gv-brass-l)}

/* ── Cadena de capacidades ────────────────────────────────────────────
   Se acumulan de izquierda a derecha: cada eslabón sigue disponible en los
   niveles siguientes. Es una línea de lectura, no un carrusel: no se mueve
   ni se desplaza sola. */
.gv-ia-cadena{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:0;margin:clamp(24px,2.6vw,34px) 0 0;padding:0;
}
.gv-ia-cadena li{
  position:relative;display:inline-flex;align-items:center;
  padding:7px 0 7px 20px;
  font-size:12.5px;line-height:1.2;color:#AFC2E4;white-space:nowrap;
}
.gv-ia-cadena li:first-child{padding-left:0}
/* El punto de conexión de cada eslabón y el trazo que lo une al anterior. */
.gv-ia-cadena li::before{
  content:"";width:5px;height:5px;border-radius:50%;margin-right:9px;
  background:rgba(150,180,235,.5);flex:0 0 auto;
}
.gv-ia-cadena li:not(:first-child)::after{
  content:"";position:absolute;left:0;top:50%;width:11px;height:1px;
  background:rgba(150,180,235,.24);
}
/* La cadena gana algo de luz hacia el final, como la progresión. */
.gv-ia-cadena li:nth-child(n+6){color:#C6D5EF}
.gv-ia-cadena li:nth-child(n+6)::before{background:rgba(143,211,244,.7)}

/* ── Franja de captación ──────────────────────────────────────────────
   Más baja que las tarjetas y en el ancho completo: se lee como una
   ampliación opcional, no como un cuarto nivel. */
.gv-ia-capta{
  margin-top:clamp(26px,2.8vw,38px);
  border-style:dashed;
  background:rgba(255,255,255,.03);
}
.gv-ia-capta .gv-eyebrow{color:#8CA8EC}
.gv-ia-capta .gv-pcard__tit{margin-top:8px;font-size:clamp(17px,1.35vw,20px)}
.gv-ia-capta .gv-pcard__txt{max-width:72ch}
.gv-ia-formula{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;
  margin:16px 0 0;padding:0;
}
.gv-ia-formula li{
  display:inline-flex;align-items:center;
  padding:5px 12px;border-radius:99px;
  border:1px solid rgba(150,180,235,.26);background:rgba(255,255,255,.04);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#C6D5EF;
}
/* El «+» entre piezas es decorativo: lo dibuja el CSS, no el marcado, así
   que ningún lector de pantalla lo lee. */
.gv-ia-formula li:not(:last-child)::after{
  content:"+";margin:0 -2px 0 12px;
  font-weight:700;color:#7F97C9;
}

/* ── Cierre ───────────────────────────────────────────────────────────── */
.gv-ia-cierre{margin-top:clamp(30px,3.2vw,44px)}
.gv-ia-cierre-tit{
  margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.22;
  letter-spacing:-.012em;color:#fff;
}
.gv-ia-ruta{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 0;margin:16px 0 0;padding:0;
}
.gv-ia-ruta li{
  font-size:12.5px;line-height:1.2;color:#AFC2E4;white-space:nowrap;
}
.gv-ia-ruta li:not(:last-child)::after{
  content:"";display:inline-block;width:16px;height:1px;margin:0 10px;
  vertical-align:middle;background:rgba(150,180,235,.34);
}
.gv-ia-cierre-txt{margin-top:14px;max-width:62ch}
.gv-ia-acciones{margin-top:clamp(20px,2.2vw,28px)}

/* ── Tableta ──────────────────────────────────────────────────────────
   Las tres columnas se mantienen mientras el texto siga siendo legible. Por
   debajo, la rejilla común (.gv-card-grid) ya pasa a dos y luego a una: aquí
   solo hay que acompañar a la progresión para que siga cuadrando. */
@media (max-width:1024px){
  .gv-ia-card .gv-pcard__txt,.gv-ia-card .gv-pcard__list li{font-size:14.5px}
  .gv-ia-cadena li{font-size:12px}
}
@media (max-width:900px){
  /* Dos tarjetas arriba y una abajo: la de AI System ocupa el ancho de las
     dos, así no queda una columna suelta a media anchura. */
  .gv-ia-cards{--cards:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .gv-ia-card--3{grid-column:span 2}
  /* La progresión pasa a línea corrida sobre las tarjetas. */
  .gv-ia-prog{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  /* Una tarjeta por fila, en orden 01, 02 y 03. */
  .gv-ia-cards{--cards:1;grid-template-columns:minmax(0,1fr)}
  .gv-ia-card--3{grid-column:auto}
  /* La línea de progresión horizontal ya no acompaña a nada: sobra. Quedan
     los tres nombres con su número, en cuadrícula compacta. */
  .gv-ia-prog{gap:8px}
  .gv-ia-prog-nivel::before,.gv-ia-prog-nodo{display:none}
  .gv-ia-prog-nivel{gap:4px}
  .gv-ia-prog-nom{font-size:10.5px;letter-spacing:.12em}
  /* Capacidades en cuadrícula de etiquetas: sin línea y sin scroll lateral. */
  .gv-ia-cadena{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
  .gv-ia-cadena li{padding:5px 0;white-space:normal}
  .gv-ia-cadena li:not(:first-child)::after{display:none}
  .gv-ia-ruta li:not(:last-child)::after{width:10px;margin:0 7px}
  .gv-ia-acciones .gv-btn{width:100%;justify-content:center}
}
@media (max-width:360px){
  .gv-ia-cadena{grid-template-columns:minmax(0,1fr)}
  .gv-ia-formula li{font-size:10.5px;padding:4px 10px}
}

/* ── Fichas del equipo (Acerca de) ──────────────────────────────────────
   Extensión del componente común .gv-pcard: solo añade la rejilla de dos
   columnas y la composición horizontal fotografía + texto. Padding, borde,
   radio, filete, sombra, hover y movimiento reducido son los de la base. */
.gv-team-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);align-items:stretch;justify-items:center;
  margin-top:clamp(22px,2.4vw,32px);
}
.gv-team-grid > *{width:100%}
.gv-team-card{
  flex-direction:row;align-items:flex-start;gap:clamp(22px,2vw,28px);
  padding:clamp(24px,2.2vw,30px);max-width:560px;
}
.gv-team-card__media{
  flex:0 0 160px;width:160px;
  overflow:hidden;border-radius:var(--gv-r);background:var(--gv-soft);
}
.gv-team-card__media img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;
  border-radius:var(--gv-r);
  transition:transform .22s ease;
}
/* Encuadre de cada retrato. Las dos fotos son horizontales y el marco 4:5,
   así que con cover manda la altura: se ve el alto completo y el recorte
   queda en los laterales. Por eso el desplazamiento útil es el horizontal,
   ajustado al eje de cada persona dentro de su fotografía. */
.gv-team-card--jb .gv-team-card__media img{object-position:56% 10%}
.gv-team-card--am .gv-team-card__media img{object-position:56% 10%}
@media (hover:hover) and (pointer:fine){
  .gv-team-card:hover .gv-team-card__media img{transform:scale(1.02)}
}
.gv-team-card__body{min-width:0}
.gv-team-card__nombre{
  margin:0;font-size:clamp(17px,1.35vw,19.5px);line-height:1.22;
  letter-spacing:-.012em;color:var(--gv-ink);
}
.gv-team-card__cargo{
  margin:6px 0 0;font-size:11px;font-weight:700;letter-spacing:.05em;line-height:1.35;
  text-transform:uppercase;color:var(--gv-blue);
}
.gv-team-card__bio{
  margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--gv-mute);
}
@media (prefers-reduced-motion:reduce){
  .gv-team-card__media img{transition:none}
  .gv-team-card:hover .gv-team-card__media img{transform:none}
}
/* Tablet: una ficha por fila, centradas y sin estirarse. */
@media (max-width:1100px){
  .gv-team-grid{grid-template-columns:minmax(0,1fr);justify-items:center}
  .gv-team-card{width:100%}
}
/* Móvil: la fotografía sube y se centra para no comprimir el texto. */
@media (max-width:560px){
  .gv-team-card{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .gv-team-card__media{flex:0 0 auto;width:clamp(140px,40vw,155px)}
  .gv-team-card__bio{text-align:left}
}

/* ═══════════════════════════════════════════════════════════════════════
   DOS COLUMNAS ORIGEN
   Texto a la izquierda y fotografía a la derecha. No existía en el sistema
   un bloque de texto + imagen fuera del ámbito de Método, así que este es
   el genérico. Radio, borde y color salen de las variables del sistema.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-two-col{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(28px,3.6vw,58px);align-items:start;
  margin-top:clamp(20px,2.4vw,32px);
}
.gv-two-col__text > .gv-p:first-child{margin-top:0}
.gv-two-col__media{margin:0}
.gv-two-col__img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 3;
  object-fit:cover;object-position:center top;
  border-radius:var(--gv-r);border:1px solid var(--gv-line);
}
/* Tablet: la fotografía baja debajo del texto. */
@media (max-width:1024px){
  .gv-two-col{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,34px)}
  .gv-two-col__media{max-width:640px}
}
/* Móvil: ancho completo y altura contenida, con los rostros a la vista. */
@media (max-width:640px){
  .gv-two-col__media{max-width:none}
  .gv-two-col__img{height:260px;aspect-ratio:auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   FIGURA
   Pie de foto para las imágenes de contenido. Color y cursiva del sistema:
   el gris es --gv-mute, el mismo del resto de textos secundarios.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-figure{margin:0}
.gv-figure__caption{
  margin-top:10px;font-size:12.5px;line-height:1.4;
  font-style:italic;color:var(--gv-mute);
}


/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA EN ÓRBITA · VISUAL DEL HERO DE SERVICIOS
   Núcleo de cristal con los seis módulos alrededor. Lo dibuja Three sobre
   un lienzo que cubre todo el hero, y el motor vive en /js/orbita-sistema.js,
   que solo cargan Servicios y su página de prueba.

   Reparto: aquí van la capa del visual, el texto del núcleo, los rótulos y
   su convivencia con la columna de copy; la escena, la escala y el encuadre
   los lleva el motor. El fondo y el velo son los del hero de cada página y
   no se tocan desde aquí.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-os{
  /* Copy a la izquierda, visual a la derecha. El hero de Inicio reparte
     48/52; aquí el texto manda algo más y el visual se contiene. */
  --os-copy:45fr;
  --os-visual:55fr;
  /* Centro del orbe, en fracción del ancho del hero. Lo lee el motor. */
  --os-centro:0.74;
  /* Diámetro del cristal, en fracción del ancho del hero. Lo lee el motor.
     El valor sale de encajar dos cosas a la vez: un cristal que se lea bien
     y un sistema completo —tarjetas incluidas— que no pase de unos 800 px
     de ancho. Las dos referencias del encargo, cristal de 330-390 px y
     total de 700-790, no caben juntas: los módulos orbitan a 1,93 radios
     del cristal, así que un cristal de 350 px arrastra un conjunto de más
     de 1.000. Manda la intención, que es contener el visual. */
  --os-cristal:0.168;
  /* — color de los rótulos — */
  --os-card-fondo:rgba(7,16,36,.72);
  --os-card-borde:rgba(96,152,255,.26);
  --os-card-borde-on:rgba(150,196,255,.72);
}
.gv-os .gv-hero-grid{grid-template-columns:var(--os-copy) var(--os-visual)}

/* ── Capa 3 · el visual ─────────────────────────────────────────────────
   Ocupa todo el hero a propósito: si se encerrara en una columna estrecha,
   las fibras y los nodos que pasan hacia la izquierda se cortarían contra
   su borde y se perdería la profundidad. Lo que sitúa el objeto a la
   derecha es la posición del grupo 3D, no este contenedor. */
.gv-os-escena{
  position:absolute;inset:0;z-index:3;
  touch-action:pan-y;              /* el gesto vertical sigue siendo scroll */
}
/* El lienzo se apila EN MEDIO de los rótulos: los que están detrás del
   plano central del núcleo quedan por debajo —y por tanto también detrás del
   título, que se dibuja dentro de la escena— y los de delante por encima.
   Es la misma clasificación que usa el motor para el orden de dibujo 3D. */
.gv-os-lienzo{
  position:absolute;inset:0;z-index:2;
  /* Degradado localizado: lo que pasa por la mitad izquierda se apaga casi
     del todo y a partir de la mitad recupera toda su fuerza. La transición
     va de 0 a 68 % para que no se lea como un corte, y afecta solo al
     visual: el copy vive en otra capa y no lo toca. */
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,.05) 0%,  rgba(0,0,0,.07) 24%, rgba(0,0,0,.16) 34%,
    rgba(0,0,0,.38) 43%, rgba(0,0,0,.68) 51%, rgba(0,0,0,.90) 59%,
    #000 68%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,.05) 0%,  rgba(0,0,0,.07) 24%, rgba(0,0,0,.16) 34%,
    rgba(0,0,0,.38) 43%, rgba(0,0,0,.68) 51%, rgba(0,0,0,.90) 59%,
    #000 68%);
}
.gv-os-lienzo canvas{display:block;width:100%;height:100%;background:transparent}

/* ── Capa 4 · el copy ─────────────────────────────────────────────────── */
.gv-os .gv-hero-grid{position:relative;z-index:4}
.gv-os .gv-hv-copy{position:relative;z-index:4}
.gv-os-hueco{min-height:1px}       /* la columna del visual, vacía */

/* ── Núcleo ─────────────────────────────────────────────────────────────
   El título se dibuja dentro de la escena 3D, en el plano central del
   volumen: es la única forma de que un módulo que pasa por delante lo tape
   y uno que pasa por detrás quede oculto. Este párrafo se queda como
   alternativa: fuera de la vista, pero disponible para un lector de
   pantalla. Si no hay WebGL vuelve a ser visible. */
.gv-os-nucleo{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Rótulos de los módulos ────────────────────────────────────────────
   El marcado es una lista ordenada real: sin JS, sin WebGL o en móvil se
   lee como lo que es, los seis módulos en orden. En escritorio el motor la
   convierte en rótulos flotantes colocando cada <li> por proyección. */
.gv-os-modulos{
  position:absolute;inset:0;margin:0;padding:0;list-style:none;
  pointer-events:none;
  /* sin z-index a propósito: si lo llevara, crearía un contexto de
     apilamiento y ningún rótulo podría quedar por debajo del lienzo */
}
.gv-os-mod{
  position:absolute;top:0;left:0;width:148px;
  padding:7px 11px 8px;
  border-radius:8px;
  background:var(--os-card-fondo);
  border:1px solid var(--os-card-borde);
  box-shadow:0 15px 32px -24px rgba(2,8,20,.95);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  opacity:0;                       /* lo enciende el motor al colocarlo */
  will-change:transform,opacity;
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.gv-os-mod-cab{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.gv-os-mod-ico{
  flex:0 0 auto;display:grid;place-items:center;
  width:21px;height:21px;border-radius:5px;
  background:rgba(47,107,255,.16);
  border:1px solid rgba(120,170,255,.24);
  color:#A8C8FF;
  transition:color .3s ease,background-color .3s ease,border-color .3s ease;
}
.gv-os-mod-ico svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gv-os-mod-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;font-weight:600;letter-spacing:.15em;
  color:rgba(126,178,255,.82);
}
.gv-os-mod-tit{
  display:block;font-size:11.5px;font-weight:700;line-height:1.2;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
}
.gv-os-mod-txt{
  display:block;margin-top:3px;font-size:10.5px;line-height:1.4;
  color:rgba(180,205,245,.72);
}

/* Estado activo: más contraste, sin salto de posición ni de tamaño. */
.gv-os-mod--on{
  background:rgba(10,24,54,.86);
  border-color:var(--os-card-borde-on);
  box-shadow:0 0 24px -6px rgba(58,126,255,.42),0 15px 32px -22px rgba(2,8,20,.95);
}
.gv-os-mod--on .gv-os-mod-ico{color:#E2EEFF;background:rgba(47,107,255,.30);border-color:rgba(170,205,255,.5)}
.gv-os-mod--on .gv-os-mod-txt{color:rgba(206,225,255,.9)}

/* Los que pasan por detrás sueltan la frase y se quedan en la etiqueta. */
.gv-os-mod--tras .gv-os-mod-txt{display:none}

/* ── Sin WebGL ─────────────────────────────────────────────────────────── */
.gv-os-aviso{
  margin:0;padding:14px clamp(16px,4vw,30px) 0;
  font-size:12.5px;line-height:1.6;color:rgba(159,180,210,.75);
}
.gv-os-aviso[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   MODO LISTA
   Se aplica cuando el hero se apila y cuando no hay WebGL. El visual deja
   de ser una capa superpuesta y pasa a ocupar su propio bloque bajo el
   copy, centrado; los rótulos vuelven al flujo. Ni proyección, ni
   colisiones, ni nada por detrás del texto.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-os--lista .gv-os-escena{
  position:relative;inset:auto;
  margin-top:clamp(22px,5vw,34px);
}
.gv-os--lista .gv-os-lienzo{
  position:relative;inset:auto;
  width:100%;height:clamp(260px,46vh,380px);
  -webkit-mask-image:none;mask-image:none;   /* no hay copy detrás que proteger */
}
.gv-os--lista .gv-os-modulos{
  position:static;inset:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;padding:clamp(12px,4vw,18px) 0 0;
}
.gv-os--lista .gv-os-mod{
  position:static;width:auto;opacity:1;
  transform:none !important;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(7,16,36,.66);
}
.gv-os--lista .gv-os-mod--tras .gv-os-mod-txt{display:block}

/* Sin WebGL el lienzo no ocupa sitio y el núcleo vuelve al flujo. */
.gv-os--sin3d .gv-os-lienzo{display:none}
.gv-os--sin3d .gv-os-nucleo{
  position:static;width:auto;height:auto;margin:0;overflow:visible;
  clip-path:none;white-space:normal;text-align:center;
  padding:clamp(20px,5vw,32px) 0 4px;
}
.gv-os--sin3d .gv-os-nucleo b{
  display:block;font-size:13px;font-weight:700;letter-spacing:.15em;color:#fff;
}
.gv-os--sin3d .gv-os-nucleo span{
  display:block;margin-top:6px;font-size:11.5px;letter-spacing:.05em;color:#B3C6E9;
}
.gv-os--sin3d .gv-os-nucleo i{display:block;width:24px;height:1px;margin:8px auto 0;background:var(--gv-brass-l)}

/* ── Responsive ─────────────────────────────────────────────────────────
   De 1024 a 1200 el visual sigue a la derecha pero se contiene más: el
   objeto encoge y su centro se acerca al borde, para que los rótulos no
   lleguen al copy. Por debajo de 960 el hero de Inicio ya apila, y este
   también. */
@media (max-width:1200px){
  .gv-os{--os-copy:44fr;--os-visual:56fr;--os-centro:0.745;--os-cristal:0.162}
  .gv-os-mod{width:140px}
  .gv-os-mod-txt{font-size:10px}
}
@media (max-width:1100px){
  .gv-os{--os-centro:0.752;--os-cristal:0.152}
  .gv-os-mod{width:132px;padding:6px 9px 7px}
}
@media (max-width:960px){
  /* Apilado: copy arriba y visual debajo, en su propio bloque y centrado.
     El orden del marcado pone la escena antes que el copy —tiene que ir por
     detrás cuando se superponen—, así que aquí se invierte con `order`. */
  .gv-os{--os-centro:0.5}
  .gv-os .gv-hero-grid{grid-template-columns:1fr;order:1}
  .gv-os-escena{order:2}
  .gv-os-hueco{display:none}
}
@media (max-width:520px){
  .gv-os--lista .gv-os-modulos{grid-template-columns:minmax(0,1fr)}
}

/* ── Movimiento reducido ────────────────────────────────────────────────
   El motor ya deja la escena quieta; aquí solo se apagan las transiciones
   de los rótulos para que nada se mueva por su cuenta. */
@media (prefers-reduced-motion:reduce){
  .gv-os-mod,.gv-os-mod-ico{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   EXPOSITOR CILÍNDRICO DEL HERO DE SECTORES · PRUEBA
   Solo lo usa /paginas/pruebas/hero-sectores-cilindro/. Todo cuelga de
   .gv-cil y de .gv-cil-hero: el hero publicado, con su órbita .gv-orb, no
   comparte ni un selector con este bloque. Para retirarlo basta con borrar
   estas reglas, /js/hero-sectores-cilindro.js y la página de prueba.

   El cilindro no existe como superficie: es una trayectoria. Cada tarjeta se
   planta sobre la circunferencia con rotateY(n · 60°) translateZ(radio) y el
   conjunto gira en bloque. Las tarjetas siguen siendo planas; la curvatura la
   cuenta la perspectiva.
   ═══════════════════════════════════════════════════════════════════════ */

/* La proporción del hero cambia solo aquí: el copy cede un poco de ancho para
   que el expositor tenga sitio sin acercarse a los botones. */
@media (min-width:961px){
  .gv-cil-hero .gv-hero-grid{grid-template-columns:.94fr 1.06fr}
  /* Igual que la órbita: sale del flujo para no inflar la fila, y el inset:0
     con margin:auto lo centra sobre el bloque de copy. */
  .gv-cil-hero .gv-cil{position:absolute;inset:0;margin:auto}
}

.gv-cil{
  --gv-cil-r:300px;        /* radio del cilindro */
  --gv-cil-w:240px;        /* ancho de la tarjeta frontal */
  --gv-cil-h:320px;        /* y su alto: 3/4, la proporción de la foto */
  --gv-cil-ang:0rad;
  position:relative;
  width:100%;
  height:440px;
  perspective:1200px;
  perspective-origin:50% 46%;
  touch-action:pan-y;      /* el dedo desliza el carrusel; la página sigue bajando */
}
.gv-cil:focus-visible{outline:2px solid var(--gv-bright);outline-offset:6px}

/* El contexto 3D. Sin overflow, sin opacity y sin filtros: los tres
   aplanarían el espacio y devolverían las seis tarjetas al mismo plano. */
.gv-cil-escena{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}
.gv-cil-anillo{
  position:absolute;top:50%;left:50%;
  width:0;height:0;margin:0;padding:0;list-style:none;
  transform-style:preserve-3d;
  /* El anillo retrocede su propio radio: así la tarjeta que está al frente
     queda a la distancia de la cámara y se ve a tamaño completo, y las de
     detrás se alejan de verdad. */
  transform:translateZ(calc(-1 * var(--gv-cil-r))) rotateY(var(--gv-cil-ang));
  will-change:transform;
}

/* ── Las tarjetas ───────────────────────────────────────────────────────
   El reparto de la circunferencia va aquí, no en el JavaScript: seis
   posiciones fijas separadas 60°. El motor solo gira el anillo. */
.gv-cil-carta{
  position:absolute;top:0;left:0;
  width:var(--gv-cil-w);height:var(--gv-cil-h);
  margin:calc(var(--gv-cil-h) / -2) 0 0 calc(var(--gv-cil-w) / -2);
  transform:rotateY(var(--gv-cil-i,0deg)) translateZ(var(--gv-cil-r)) scale(var(--gv-cil-sc,1));
  opacity:var(--gv-cil-op,1);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:opacity;
}
.gv-cil-carta:nth-child(1){--gv-cil-i:0deg}
.gv-cil-carta:nth-child(2){--gv-cil-i:60deg}
.gv-cil-carta:nth-child(3){--gv-cil-i:120deg}
.gv-cil-carta:nth-child(4){--gv-cil-i:180deg}
.gv-cil-carta:nth-child(5){--gv-cil-i:240deg}
.gv-cil-carta:nth-child(6){--gv-cil-i:300deg}

.gv-cil-link{
  position:absolute;inset:0;display:block;
  overflow:hidden;
  border-radius:6px;
  /* Canto holográfico: azul de marca muy diluido, sube en la frontal. */
  border:1px solid rgba(126,170,255,calc(.16 + .26 * var(--gv-cil-luz,1)));
  box-shadow:0 16px 34px rgba(2,8,24,.34);
  text-decoration:none;
}
.gv-cil-link img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Las fotografías conservan su color: solo pierden luz al alejarse. */
  filter:brightness(var(--gv-cil-luz,1)) saturate(calc(.7 + .3 * var(--gv-cil-luz,1)));
}
/* Velo navy muy ligero, el mismo criterio que la órbita: integra sin
   convertir la foto en una imagen azul. */
.gv-cil-link::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(14,32,72,.20) 0%,rgba(28,58,132,.12) 100%);
}
/* Pie oscuro para que el rótulo se lea siempre, y reflejo de cristal: una
   diagonal muy tenue, sin brillos duros. */
.gv-cil-link::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(6,16,40,.74) 0%,rgba(6,16,40,.30) 34%,rgba(6,16,40,0) 56%),
    linear-gradient(112deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 38%);
}
.gv-cil-rotulo{
  position:absolute;z-index:2;left:13px;right:13px;bottom:12px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#F2F6FF;
  opacity:calc(.55 + .45 * var(--gv-cil-luz,1));
}
/* La frontal es la protagonista: canto algo más presente, rótulo a plena luz
   y una pizca de brillo en las esquinas. */
.gv-cil-carta--frente .gv-cil-link{
  border-color:rgba(150,198,255,.52);
  box-shadow:0 20px 44px rgba(2,8,24,.42),0 0 0 1px rgba(120,170,255,.12);
}
.gv-cil-carta--frente .gv-cil-rotulo{opacity:1}
.gv-cil-carta--frente .gv-cil-link::after{
  background:
    linear-gradient(150deg,rgba(14,32,72,.18) 0%,rgba(28,58,132,.10) 100%),
    radial-gradient(60px 60px at 0% 0%,rgba(160,205,255,.20),transparent 70%),
    radial-gradient(60px 60px at 100% 100%,rgba(160,205,255,.16),transparent 70%);
}
.gv-cil-link:focus-visible{outline:2px solid var(--gv-bright);outline-offset:3px}

/* ── Holograma ──────────────────────────────────────────────────────────
   Cuatro piezas de baja opacidad: el resplandor de la frontal, el eje, dos
   elipses y el punto central. Nada parpadea ni se mueve por su cuenta. */
.gv-cil-halo{
  position:absolute;left:50%;top:46%;
  width:340px;height:340px;margin:-170px 0 0 -170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,255,.22) 0%,rgba(47,107,255,.10) 42%,transparent 70%);
  pointer-events:none;
}
.gv-cil-suelo{position:absolute;left:0;right:0;bottom:34px;height:96px;pointer-events:none}
.gv-cil-eje{
  position:absolute;left:50%;bottom:14px;width:1px;height:290px;margin-left:-.5px;
  background:linear-gradient(0deg,rgba(150,198,255,.26) 0%,rgba(150,198,255,.06) 60%,transparent 100%);
}
.gv-cil-elipse{
  position:absolute;left:50%;bottom:8px;
  width:300px;height:56px;margin-left:-150px;
  border-radius:50%;
  border:1px solid rgba(150,198,255,.20);
  background:radial-gradient(ellipse at center,rgba(47,107,255,.16) 0%,transparent 68%);
}
.gv-cil-elipse--difusa{
  width:412px;height:80px;margin-left:-206px;bottom:-6px;
  border-color:rgba(150,198,255,.09);
  background:radial-gradient(ellipse at center,rgba(47,107,255,.10) 0%,transparent 72%);
  filter:blur(3px);
}
.gv-cil-punto{
  position:absolute;left:50%;bottom:34px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;
  background:rgba(198,222,255,.7);
  box-shadow:0 0 12px 3px rgba(120,170,255,.36);
}

/* ── Mandos ─────────────────────────────────────────────────────────────
   Discretos y junto a la base. No compiten con los botones del copy. */
.gv-cil-mandos{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;z-index:300;
}
.gv-cil-mando{
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(10,22,50,.42);
  color:#DCE7FB;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.gv-cil-mando:hover{border-color:rgba(150,198,255,.72);background:rgba(10,22,50,.62)}
.gv-cil-mando svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gv-cil-pos{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:#C7D3E7;font-variant-numeric:tabular-nums;
}
.gv-cil-pos b{color:#F2F6FF}
/* El aviso solo existe para el lector de pantalla. */
.gv-cil-aviso{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Notas de la página de trabajo. No forman parte del componente. */
.gv-cil-notas{margin:22px 0 0;padding:0 0 0 20px;color:var(--gv-mute);font-size:16px;line-height:1.6}
.gv-cil-notas li + li{margin-top:8px}

/* Entre 961 y 1180 px la columna derecha se estrecha y la tarjeta lateral
   llegaría a comerse el hueco entre columnas: se reduce el radio y la carta,
   igual que hace la órbita publicada en ese mismo tramo. */
@media (min-width:961px) and (max-width:1180px){
  .gv-cil{--gv-cil-r:248px;--gv-cil-w:206px;--gv-cil-h:275px;height:410px}
  .gv-cil-elipse{width:250px;margin-left:-125px}
  .gv-cil-elipse--difusa{width:344px;margin-left:-172px}
  .gv-cil-halo{width:292px;height:292px;margin:-146px 0 0 -146px}
}

/* ── Apilado ────────────────────────────────────────────────────────────
   Por debajo de 961 px el hero se apila: copy arriba, expositor debajo. Se
   reduce el radio y la tarjeta para que asomen la anterior y la siguiente sin
   que se amontone nada. */
@media (max-width:960px){
  .gv-cil{--gv-cil-r:230px;--gv-cil-w:210px;--gv-cil-h:280px;height:370px;perspective:1100px}
}
@media (max-width:560px){
  .gv-cil{--gv-cil-r:180px;--gv-cil-w:172px;--gv-cil-h:230px;height:330px;perspective:1000px}
  .gv-cil-halo{width:250px;height:250px;margin:-125px 0 0 -125px}
  .gv-cil-elipse{width:224px;margin-left:-112px;height:44px}
  .gv-cil-elipse--difusa{width:310px;margin-left:-155px;height:62px}
  .gv-cil-eje{height:214px}
  .gv-cil-rotulo{left:11px;right:11px;bottom:10px;font-size:10px;letter-spacing:.04em}
}
@media (max-width:380px){
  .gv-cil{--gv-cil-r:152px;--gv-cil-w:150px;--gv-cil-h:200px;height:300px}
  .gv-cil-elipse{width:190px;margin-left:-95px}
  .gv-cil-elipse--difusa{width:262px;margin-left:-131px}
}

/* ── Movimiento reducido ────────────────────────────────────────────────
   No hay giro continuo ni seguimiento del cursor: el motor no arranca el
   bucle. La tarjeta activa se queda al frente y los mandos siguen
   cambiándola, sin transición. Todo el contenido sigue ahí. */
@media (prefers-reduced-motion:reduce){
  .gv-cil-anillo{will-change:auto}
  .gv-cil-carta{will-change:auto}
  .gv-cil-mando{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACTO · datos y formulario en una sola sección
   Sustituye a las dos secciones que había antes: la del formulario, que
   ocupaba el ancho entero de la página, y la de «Dónde estamos».

   El fondo no se define aquí. La sección usa .gv-sec--soft, el degradado
   claro del sistema, intercambiado con el navy y la cuadrícula técnica
   (.gv-sec--dark .gv-mesh) que ahora lleva la sección 02. Las dos clases son
   las de siempre y siguen sirviendo al resto de la web sin cambios.

   Todo cuelga de .gv-con-bloque, así que ni el formulario ni las redes
   cambian en ninguna otra página: los mismos componentes, servidos tal cual
   están en el sistema, solo que dentro de una caja estrecha y con los
   espacios apretados para que el formulario entre entero en pantalla.
   ═══════════════════════════════════════════════════════════════════════ */
/* La sección no necesita el respiro completo de --gv-sec: su altura la marca
   el formulario, y con el padding de serie el bloque no cabía en una
   ventana de 900 px. Arriba y abajo, lo mismo. */
.gv-con-bloque{padding-block:clamp(48px,5.4vw,76px)}

.gv-con-dos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(56px,5vw,80px);
  /* Las dos columnas arrancan arriba: el eyebrow a la altura del borde
     superior de la tarjeta, sin centrado vertical que hunda el texto. */
  align-items:start;
}
.gv-con-datos .gv-h2{max-width:17ch}
.gv-con-bloque .gv-intro{margin-bottom:0}
/* El eyebrow del sistema deja 18 px por debajo; aquí arranca a ras del borde
   de la tarjeta, así que se le quita el margen de arriba que traía el
   párrafo y se ajusta el de abajo. */
.gv-con-datos .gv-eyebrow{margin-top:0;margin-bottom:14px}

/* Los tres datos, en fila vertical. Etiqueta arriba en latón y el dato
   debajo, con el contraste de texto normal sobre fondo claro. */
.gv-con-datos-lista{margin:clamp(26px,2.6vw,32px) 0 0}
.gv-con-dato + .gv-con-dato{margin-top:18px}
.gv-con-dato dt{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gv-brass);margin-bottom:6px;
}
.gv-con-dato dd{margin:0;font-size:17px;line-height:1.5;color:var(--gv-ink)}
.gv-con-dato a{color:var(--gv-blue);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(33,73,221,.34);transition:color .16s ease,text-decoration-color .16s ease}
.gv-con-dato a:hover{color:var(--gv-cta-d);text-decoration-color:currentColor}
.gv-con-dato a:focus-visible{outline:2px solid var(--gv-bright);outline-offset:3px}

/* Redes: el mismo componente del pie, que está resuelto para fondo oscuro.
   Sobre el degradado claro se le cambian solo los colores; el tamaño, el
   área táctil, el hover y el foco siguen siendo los suyos. */
.gv-con-bloque .gv-sociales{margin-top:26px}
.gv-con-bloque .gv-social{color:var(--gv-mute);border-color:var(--gv-line)}
.gv-con-bloque a.gv-social:hover,
.gv-con-bloque a.gv-social:focus-visible{color:#fff;background-color:var(--gv-cta);border-color:var(--gv-cta)}
.gv-con-bloque .gv-social--sin{color:rgba(91,107,140,.45);border-color:rgba(211,223,246,.75)}

/* ── La tarjeta del formulario ──────────────────────────────────────────
   Estrecha a propósito: no llena su columna y se apoya en el lado derecho.
   Los siete grupos de campos entran en una pantalla de 900 px apretando los
   espacios, nunca la tipografía. */
.gv-con-form{
  width:100%;
  max-width:470px;
  justify-self:end;
}
.gv-con-form .gv-formwrap{
  padding:26px;
  border-color:rgba(33,73,221,.20);
  box-shadow:0 14px 34px rgba(15,23,42,.10);
}
/* Filas: nombre y empresa, email y teléfono, sector y web. Los tres campos
   largos siguen ocupando la fila entera con .gv-campo--ancho. */
.gv-con-form .gv-form-grid{gap:12px 14px}
.gv-con-form .gv-label{margin-bottom:5px}
.gv-con-form .gv-input,
.gv-con-form .gv-select,
.gv-con-form .gv-textarea{padding:10px 13px}
.gv-con-form .gv-textarea{min-height:78px}
.gv-con-form .gv-ayuda{margin-top:5px;line-height:1.45}
.gv-con-form .gv-error{margin-top:5px;line-height:1.45}
/* Preferencia de contacto: una sola fila de pastillas algo más bajas. */
.gv-con-form .gv-radios{gap:8px}
.gv-con-form .gv-radio{padding:8px 15px;font-size:14px}
/* El filete de privacidad se comía casi 45 px entre margen y relleno. */
.gv-con-form .gv-consent{margin-top:14px;padding-top:14px}
.gv-con-form .gv-form-pie{margin-top:14px}
/* El botón ocupa el ancho de la tarjeta y va debajo del consentimiento: a
   470 px no caben botón y mensaje de estado en la misma línea. */
.gv-con-form .gv-form-pie .gv-btn{width:100%;justify-content:center;padding-block:13px}
.gv-con-form .gv-form-estado{max-width:none}
/* ── Aviso de protección de datos ───────────────────────────────────────
   El tamaño lo mandaba `p{font-size:var(--gv-text-base)}`, la regla de
   etiqueta del principio de la hoja: el texto vive en un <p> dentro de
   .gv-formlegal, así que no heredaba los 12,5 px del contenedor —tenía regla
   propia— y se pintaba a 16-18 px. Por eso el tamaño se fija en el propio
   párrafo, con especificidad suficiente (0,2,1 frente a 0,0,1).

   Solo alcanza a este aviso: ni al texto del consentimiento (.gv-check), ni
   a los labels, ni a los mensajes de error, ni a las páginas legales. */
.gv-con-bloque .gv-formlegal{margin:12px 0 0;color:var(--gv-mute)}
.gv-con-bloque .gv-formlegal p{
  margin:0;
  font-size:12px;line-height:1.45;font-weight:400;
  color:var(--gv-mute);
}
/* «Protección de datos:» destaca por peso, nunca por tamaño. */
.gv-con-bloque .gv-formlegal b{font-weight:600;font-size:inherit}
.gv-con-bloque .gv-formlegal a{font-size:inherit;color:var(--gv-blue);text-decoration:underline;text-underline-offset:2px;transition:color .16s ease}
.gv-con-bloque .gv-formlegal a:hover{color:var(--gv-cta-d);text-decoration-thickness:2px}
.gv-con-bloque .gv-formlegal a:focus-visible{outline:2px solid var(--gv-bright);outline-offset:2px}

/* ── Tableta ────────────────────────────────────────────────────────────
   Se mantienen las dos columnas mientras la tarjeta no se estreche
   demasiado; solo se recorta el hueco entre ellas. */
@media (max-width:1100px){
  .gv-con-dos{gap:44px}
  .gv-con-form .gv-formwrap{padding:24px}
}

/* ── Ventanas bajas ─────────────────────────────────────────────────────
   En pantallas de escritorio con poco alto —1366 × 768 es la referencia— se
   aprieta un punto más para que el consentimiento y el botón no queden por
   debajo del borde. Solo espacios: ni un tamaño de letra cambia. */
@media (min-width:901px) and (max-height:820px){
  .gv-con-bloque{padding-block:clamp(38px,4vw,54px)}
  .gv-con-form .gv-formwrap{padding:22px}
  .gv-con-form .gv-form-grid{gap:10px 14px}
  .gv-con-form .gv-textarea{min-height:72px}
  .gv-con-form .gv-consent{margin-top:12px;padding-top:12px}
  .gv-con-form .gv-form-pie{margin-top:12px}
  .gv-con-datos-lista{margin-top:24px}
  .gv-con-dato + .gv-con-dato{margin-top:15px}
  .gv-con-bloque .gv-sociales{margin-top:22px}
}

/* ── Apilado ────────────────────────────────────────────────────────────
   Por debajo de 900 px la tarjeta ya no cabe sin apretarse: una sola
   columna, primero los datos y las redes y después el formulario, que pasa a
   ocupar el ancho disponible. Aquí la altura deja de importar —la página
   crece— y los campos recuperan su altura táctil de siempre. */
@media (max-width:900px){
  .gv-con-dos{grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,46px)}
  .gv-con-form{max-width:none;justify-self:stretch}
  .gv-con-datos .gv-h2{max-width:24ch}
  .gv-con-form .gv-input,
  .gv-con-form .gv-select,
  .gv-con-form .gv-textarea{padding:12px 14px}
  .gv-con-form .gv-form-grid{gap:14px}
  .gv-con-form .gv-textarea{min-height:96px}
}
@media (max-width:560px){
  .gv-con-form .gv-formwrap{padding:22px}
  .gv-con-datos-lista{margin-top:26px}
}

/* ── Rejilla de cuatro celdas ────────────────────────────────────────────
   Hermana de .gv-grid3, con el mismo hueco y el mismo componente dentro:
   .gv-cell. Cuatro columnas en escritorio grande, 2 × 2 en tableta y una
   por fila en móvil, así que nunca queda una tarjeta suelta. */
.gv-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1199px){.gv-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.gv-grid4{grid-template-columns:minmax(0,1fr)}}

/* ── Recorrido posterior al envío · Contacto ─────────────────────────────
   Las tarjetas son las de siempre; lo único propio es el color sobre fondo
   oscuro, que aquí se pide azul de marca en lugar del blanco translúcido de
   .gv-sec--dark .gv-cell. Va acotado a esta sección para no alcanzar a las
   celdas de ninguna otra página. */
.gv-con-pasos .gv-cell{
  background:rgba(255,255,255,.05);
  border-color:rgba(126,170,255,.26);
  border-top-color:var(--gv-bright);
  box-shadow:0 10px 26px rgba(2,8,24,.26);
}
.gv-con-pasos .gv-cell:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(126,170,255,.46);
  border-top-color:var(--gv-bright);
  box-shadow:0 18px 38px -18px rgba(2,8,24,.62);
}
/* Número en latón claro: el de sección clara no contrastaría sobre navy. */
.gv-con-pasos .gv-idx{color:var(--gv-brass-l)}
.gv-con-pasos .gv-cellhead{margin-bottom:14px}
/* Con cuatro columnas, dos de los títulos ocupan dos líneas y los otros dos
   una: se les reserva el alto de dos para que las cuatro descripciones
   arranquen a la misma altura. En 2 × 2 y en móvil sobra el ancho y el
   título vuelve a ocupar lo que necesite. */
@media (min-width:1200px){
  .gv-con-pasos .gv-cell .gv-h3{min-height:2.5em}
}
/* La elevación del hover no es una transición, así que el apagado global de
   animaciones no la alcanza. */
@media (prefers-reduced-motion:reduce){
  .gv-con-pasos .gv-cell:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACTO · los tres paneles del hero, tres láminas de metacrilato
   Tres placas transparentes suspendidas a distinta distancia de la cámara.
   Lo que las hace parecer material y no tarjeta es el reparto de piezas:

     .gv-con-t          el objeto 3D. No pinta nada: solo sostiene el plano,
                        la escala y la orientación, y lleva preserve-3d.
     ::before / ::after los dos cantos, rectángulos del grosor de la placa
                        girados 90° y metidos hacia atrás. Son geometría de
                        verdad: se mueven con la placa porque son la placa.
     .gv-con-vidrio     la cara frontal: el cristal translúcido, el
                        desenfoque del fondo y los reflejos. Va en un hijo
                        aparte a propósito —un backdrop-filter sobre un
                        elemento con preserve-3d aplana a sus hijos y los
                        cantos se vendrían abajo.

   El contenido queda por encima de la cara de vidrio, con su propia sombra
   de texto: el cristal es transparente de verdad y la oficina se ve a
   través, así que la legibilidad la sostiene el texto, no una capa opaca.

   Todo cuelga de .gv-con-3d. Ningún otro creativo del sitio lo usa.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-con-3d{
  /* Variables compartidas por los tres paneles: el material se ajusta aquí
     y no en cada regla. */
  --gv-vid-esp:10px;                        /* grosor de la lámina */
  --gv-vid-canto:rgba(126,170,255,.42);     /* azul del canto, con luz */
  --gv-vid-canto-op:rgba(38,72,142,.5);     /* el canto contrario, apagado */
  --gv-vid-filo:rgba(214,232,255,.7);       /* el filo que recibe la luz */
  transform-style:preserve-3d;
}
.gv-hero--contacto .gv-hv-creativo{perspective:820px;perspective-origin:52% 46%}

/* ── El objeto 3D ───────────────────────────────────────────────────────
   La orientación es base más cursor: el motor escribe --rx y --ry, y la base
   --rx0/--ry0 hace que ninguna placa quede nunca frontal y plana, ni siquiera
   con el puntero en el centro. */
.gv-con-3d .gv-con-t{
  transform-style:preserve-3d;
  /* Un solo transform, pero cada origen en su propia variable: --tz y --sc
     son el plano; --tx/--ty y --rx/--ry, el puntero; --ax/--ay y --arx/--ary,
     la flotación. Al sumarse dentro de calc() ninguna pisa a otra, que es el
     riesgo real de escribir `transform` desde dos sitios; y así los tres
     paneles siguen siendo una sola capa de composición por placa en vez de
     tres envoltorios anidados. */
  transform:
    translate3d(calc(var(--tx,0px) + var(--ax,0px)),
                calc(var(--ty,0px) + var(--ay,0px)),
                var(--tz,0px))
    rotateX(calc(var(--rx0,0deg) + var(--rx,0deg) + var(--arx,0deg)))
    rotateY(calc(var(--ry0,0deg) + var(--ry,0deg) + var(--ary,0deg)))
    scale(var(--sc,1));
  background:none;
  border:0;
  box-shadow:none;
  /* El desenfoque del componente base se apaga aquí y se traslada a la cara
     de vidrio: sobre un elemento con preserve-3d aplanaría los cantos. */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  will-change:transform;
}

/* ── Los dos cantos ─────────────────────────────────────────────────────
   Cada uno es un rectángulo del grosor de la placa, girado un cuarto de
   vuelta sobre el borde que le toca y proyectado hacia atrás. Qué canto se
   ve en reposo lo decide la orientación base de cada panel, y por eso cada
   uno monta los suyos. */
.gv-con-3d .gv-con-t::before,
.gv-con-3d .gv-con-t::after{
  content:"";position:absolute;pointer-events:none;
  border-radius:1px;
}
/* Canto vertical · el iluminado: degradado del azul de marca con un filo
   claro en la arista que da a la cara frontal. */
.gv-con-3d .gv-con-t::before{
  top:0;height:100%;width:var(--gv-vid-esp);
  background:linear-gradient(90deg,var(--gv-vid-canto) 0%,rgba(64,110,200,.34) 62%,rgba(18,40,88,.5) 100%);
  box-shadow:inset 0 0 0 .5px rgba(126,170,255,.25);
}
/* Canto horizontal · el de sombra: mismo material, menos luz. */
.gv-con-3d .gv-con-t::after{
  left:0;width:100%;height:var(--gv-vid-esp);
  background:linear-gradient(180deg,rgba(50,88,168,.34) 0%,var(--gv-vid-canto-op) 100%);
}
/* Placas 1 y 3 giran su lado derecho hacia la cámara y bajan el borde
   inferior: se ven el canto derecho y el inferior. */
.gv-con-3d .gv-con-t--acuse::before,
.gv-con-3d .gv-con-t--paso::before{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
.gv-con-3d .gv-con-t--acuse::after,
.gv-con-3d .gv-con-t--paso::after{bottom:0;transform-origin:50% 100%;transform:rotateX(90deg)}
/* La placa 2 gira al contrario: enseña el canto izquierdo y el superior. */
.gv-con-3d .gv-con-t--rev::before{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.gv-con-3d .gv-con-t--rev::after{top:0;transform-origin:50% 0;transform:rotateX(-90deg)}

/* ── La cara de vidrio ──────────────────────────────────────────────────
   Transparente de verdad: la fotografía de la oficina se ve a través. El
   material lo construyen cuatro capas muy tenues —reflejo diagonal ancho,
   punto de luz frío que se desplaza con la inclinación, un rebote cálido de
   la lámpara de la foto y el degradado propio del cristal— sobre un fondo
   navy de baja opacidad. */
.gv-con-3d .gv-con-vidrio{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:var(--gv-r);
  border:1px solid rgba(150,190,255,.30);
  background:
    radial-gradient(120px 90px at calc(50% + var(--luzx,0%)) calc(28% + var(--luzy,0%)),
                    rgba(150,205,255,.20),transparent 68%),
    linear-gradient(152deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 34%,rgba(255,255,255,0) 56%),
    radial-gradient(180px 120px at 96% 96%,rgba(214,182,120,.07),transparent 70%),
    linear-gradient(180deg,rgba(24,54,110,.34) 0%,rgba(11,28,64,.26) 100%);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  /* Filo claro arriba y a un lado, sombra ambiental por detrás para separar
     la placa del fondo sin encerrarla en un halo. */
  box-shadow:
    inset 0 1px 0 var(--gv-vid-filo),
    inset 1px 0 0 rgba(150,190,255,.18),
    0 20px 42px rgba(2,8,24,.34);
}
/* El contenido va por delante del cristal y no cambia de opacidad con el
   movimiento. La sombra de texto es lo único que compensa la transparencia:
   el material no se vuelve a oscurecer. */
.gv-con-3d .gv-con-t > *:not(.gv-con-vidrio){position:relative;z-index:1}
.gv-con-3d .gv-con-tit,
.gv-con-3d .gv-con-txt,
.gv-con-3d .gv-con-marca,
.gv-con-3d .gv-con-hora,
.gv-con-3d .gv-con-et,
.gv-con-3d .gv-con-ref,
.gv-con-3d .gv-con-tags li,
.gv-con-3d .gv-con-pil{text-shadow:0 1px 3px rgba(4,12,30,.72)}

/* ── Los tres planos ────────────────────────────────────────────────────
   La distancia manda sobre el tamaño: a 1000 px de perspectiva, ±80 px de
   plano ya encogen un 7,4 % y agrandan un 8,7 %. La escala solo compensa lo
   justo para dejar los tres tamaños donde toca —0,93 · 0,98 · 1,03— y que el
   texto se lea igual de bien en los tres.

   Las orientaciones base están cruzadas: ninguna placa queda plana y cada
   una enseña un par de cantos distinto. */
.gv-con-3d .gv-con-t--acuse{
  --tz:-130px;--sc:1.037;--rx0:-5deg;--ry0:-7deg;
  width:86%;justify-self:end;z-index:1;
}
.gv-con-3d .gv-con-t--rev{
  --tz:0px;--sc:.97;--rx0:3deg;--ry0:5deg;
  width:84%;justify-self:start;z-index:2;
  margin-top:30px;
}
.gv-con-3d .gv-con-t--paso{
  --tz:130px;--sc:.88;--rx0:-3deg;--ry0:-6deg;
  width:84%;justify-self:end;z-index:3;
  margin-top:30px;
}
/* La placa lejana pierde algo de luz y de saturación; la cercana gana canto
   y nitidez. Todo va en la cara de vidrio, nunca en un filtro sobre el
   objeto 3D: un filter aplanaría los cantos. */
.gv-con-3d .gv-con-t--acuse .gv-con-vidrio{
  border-color:rgba(150,190,255,.20);
  backdrop-filter:blur(9px) saturate(104%);
  -webkit-backdrop-filter:blur(9px) saturate(104%);
  box-shadow:inset 0 1px 0 rgba(214,232,255,.42),0 22px 46px rgba(2,8,24,.28);
}
.gv-con-3d .gv-con-t--acuse{--gv-vid-esp:8px;--gv-vid-canto:rgba(126,170,255,.30)}
.gv-con-3d .gv-con-t--paso{--gv-vid-esp:12px}
.gv-con-3d .gv-con-t--paso .gv-con-vidrio{
  border-color:rgba(160,200,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(226,240,255,.80),
    inset 1px 0 0 rgba(150,190,255,.26),
    0 -16px 34px rgba(2,8,24,.34),
    0 18px 40px rgba(2,8,24,.46);
}
/* La intermedia hace lo mismo, más flojo, sobre la lejana. */
.gv-con-3d .gv-con-t--rev .gv-con-vidrio{
  box-shadow:
    inset 0 1px 0 var(--gv-vid-filo),
    inset 1px 0 0 rgba(150,190,255,.18),
    0 -12px 26px rgba(2,8,24,.24),
    0 20px 42px rgba(2,8,24,.36);
}
/* Resplandor concentrado en el canto de la placa cercana, no un halo
   alrededor de toda la tarjeta. */
.gv-con-3d .gv-con-t--paso::before{
  box-shadow:inset 0 0 0 .5px rgba(150,205,255,.40),0 0 14px rgba(47,107,255,.28);
}

/* ── Pantallas medianas ─────────────────────────────────────────────────
   Menos columna: se acortan los planos y el grosor, y la perspectiva se
   cierra un punto para que la placa cercana no se coma el hueco del copy. */
@media (max-width:1100px){
  .gv-hero--contacto .gv-hv-creativo{perspective:780px}
  .gv-con-3d{--gv-vid-esp:8px}
  .gv-con-3d .gv-con-t--acuse{--tz:-85px;--sc:1.02}
  .gv-con-3d .gv-con-t--paso{--tz:85px;--sc:.91;--gv-vid-esp:10px}
  .gv-con-3d .gv-con-t--rev,
  .gv-con-3d .gv-con-t--paso{margin-top:28px}
}

/* ── Apilado ────────────────────────────────────────────────────────────
   Sin puntero que seguir se conserva el material —cristal, canto y filo— y
   se recorta la profundidad: las tres placas al ancho del creativo, con
   separación suficiente para que ninguna toque a la siguiente. */
@media (max-width:560px){
  .gv-hero--contacto .gv-hv-creativo{perspective:820px}
  .gv-con-3d{--gv-vid-esp:6px}
  .gv-con-3d .gv-con-t--acuse,
  .gv-con-3d .gv-con-t--rev,
  .gv-con-3d .gv-con-t--paso{width:100%;justify-self:stretch;--sc:1}
  .gv-con-3d .gv-con-t--acuse{--tz:-45px;--ry0:-3.5deg;--rx0:-2.5deg}
  .gv-con-3d .gv-con-t--rev{--ry0:3deg;--rx0:2deg}
  .gv-con-3d .gv-con-t--paso{--tz:45px;--ry0:-3deg;--rx0:-2deg;--gv-vid-esp:8px}
  .gv-con-3d .gv-con-t--rev,
  .gv-con-3d .gv-con-t--paso{margin-top:20px}
  .gv-con-3d .gv-con-vidrio{backdrop-filter:blur(6px) saturate(115%);-webkit-backdrop-filter:blur(6px) saturate(115%)}
}

/* Con movimiento reducido el motor no arranca: quedan las tres placas en su
   plano, con su grosor, su inclinación base y sus reflejos fijos. */
@media (prefers-reduced-motion:reduce){
  .gv-con-3d .gv-con-t{will-change:auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   ACERCA DE · LA EVOLUCIÓN DE LA GV
   El creativo del hero: tres estados de la misma GV sobre una plataforma
   triangular. Aquí solo está la caja —tamaño, sitio y respaldo—; la escena
   entera vive en /js/hero-acerca-gv.js y el material sale de las variables
   --gv-cristal-* que ya usa el orbe de Servicios.

   Todo cuelga de .gv-ev. Ningún otro creativo del sitio lo usa.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-ev{
  position:relative;
  width:100%;
  max-width:540px;
  height:clamp(400px,46vh,500px);
  margin-inline:auto;
}
/* Igual que la fotografía a la que sustituye: sale del flujo para no inflar
   la fila del hero y se centra sobre el bloque de copy. */
@media (min-width:961px){
  .gv-hero--acerca .gv-ev{position:absolute;inset:0;margin:auto}
}
/* El lienzo no intercepta nada: quien escucha el puntero es el hero entero,
   así que los botones, los enlaces, el scroll y la selección de texto siguen
   funcionando por debajo de la escena. */
.gv-ev-lienzo{position:absolute;inset:0;pointer-events:none}
.gv-ev-lienzo canvas{display:block;width:100%;height:100%;pointer-events:none}
.gv-ev{pointer-events:none}

/* Respaldo: sin WebGL o sin la silueta, se ve el logotipo quieto y la
   escena no deja un hueco vacío. El motor añade .gv-ev--sin3d. */
.gv-ev-respaldo{
  position:absolute;inset:0;display:none;
  place-items:center;
  padding:0 8%;
}
.gv-ev--sin3d .gv-ev-lienzo{display:none}
.gv-ev--sin3d .gv-ev-respaldo{display:grid}
.gv-ev-respaldo img{width:100%;max-width:320px;height:auto;opacity:.9}

/* La escena se revela cuando la silueta ya está montada: así no se ve el
   lienzo vacío mientras llega el SVG. */
.gv-ev-lienzo{opacity:0;transition:opacity .5s ease}
.gv-ev--listo .gv-ev-lienzo{opacity:1}
@media (prefers-reduced-motion:reduce){
  .gv-ev-lienzo{transition:none}
}

@media (max-width:960px){
  .gv-ev{height:clamp(330px,42vh,420px);max-width:460px}
}
@media (max-width:560px){
  .gv-ev{height:300px;max-width:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   MÉTODO · PROYECCIÓN HOLOGRÁFICA DEL HERO · PRUEBA
   Solo la usa /paginas/pruebas/hero-metodo-holograma/. El hero publicado
   sigue con su panel .gv-hv-panel y no comparte ni un selector con esto.

   Jerarquía, con una transformación por envoltorio para que ninguna pise a
   otra:

     .gv-hg              abre la perspectiva
       .gv-hg-plataforma gira hacia el puntero. El eje nace en el núcleo de
                         la base, así que base, haz y panel giran como un solo
                         dispositivo y el haz no puede despegarse
         .gv-hg-haz      cuatro caras en distintos planos de Z
         .gv-hg-flota    la oscilación ambiental, aparte del giro
           .gv-hg-panel  la placa: cara frontal, trasera y cuatro cantos
         .gv-hg-base     cara inferior, pared, cara superior, aro y núcleo

   Los textos son HTML —nítidos y accesibles— y el motor solo escribe
   variables. El azul sale de las mismas --gv-cristal-* que los demás héroes.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-hg{
  --hg-borde:rgba(150,198,255,.42);
  --hg-linea:rgba(150,198,255,.22);
  --hg-texto:#DCE9FF;
  --hg-tenue:#9FBBE4;
  --hg-cian:#8FD3F4;
  /* Los tres colores de prioridad, en registro holográfico claro. */
  --hg-inmediata:#FF8D91;
  --hg-alta:#FFD166;
  --hg-mejora:#69E3AE;
  /* Grosores del dispositivo. */
  --hg-placa:10px;         /* canto de la placa holográfica */
  --hg-pared:12px;         /* pared lateral del proyector */
  /* MEJORA PROGRESIVA · el estado por omisión es el holograma FORMADO.
     Si el motor no llega, falla o encuentra el marcado cambiado, se ve
     entero: nunca puede quedar solo la base. Los estados iniciales los pone
     .gv-hg--js, que el motor añade justo antes de arrancar. */
  --hg-encendido:1;--hg-proyeccion:1;--hg-panel:1;--hg-marco:1;--hg-cab:1;
  --hg-a1:1;--hg-a2:1;--hg-a3:1;--hg-n1:1;--hg-n2:1;--hg-n3:1;
  --hg-l1:1;--hg-l2:1;--hg-l3:1;--hg-m1:1;--hg-m2:1;--hg-m3:1;
  --hg-rotulo:1;--hg-p1:1;--hg-p2:1;--hg-p3:1;--hg-t1:1;--hg-t2:1;--hg-t3:1;
  --hg-so1:0;--hg-so2:0;--hg-so3:0;--hg-c1:0;--hg-c2:0;--hg-c3:0;
  --hg-estado:1;
  /* Posición del puntero, normalizada, y el lado desde el que llega la luz.
     Las usa la iluminación de cantos, aro y haz. */
  --holo-x:0;
  --holo-y:0;
  --holo-light-x:0;
  position:relative;
  width:100%;
  max-width:520px;
  height:clamp(420px,52vh,520px);
  margin-inline:auto;
  perspective:1000px;
  perspective-origin:50% 50%;
}
/* Estados iniciales de la secuencia. Solo se aplican cuando el motor ya ha
   comprobado que tiene el marcado que espera, así que un fallo suyo deja el
   holograma formado en vez de en blanco. Las variables que escribe por
   fotograma van en el atributo style y ganan a estas dos reglas. */
.gv-hg--js{
  --hg-encendido:0;--hg-proyeccion:0;--hg-panel:0;--hg-marco:0;--hg-cab:0;
  --hg-a1:0;--hg-a2:0;--hg-a3:0;--hg-n1:0;--hg-n2:0;--hg-n3:0;
  --hg-l1:0;--hg-l2:0;--hg-l3:0;--hg-m1:0;--hg-m2:0;--hg-m3:0;
  --hg-rotulo:0;--hg-p1:0;--hg-p2:0;--hg-p3:0;--hg-t1:0;--hg-t2:0;--hg-t3:0;
  --hg-estado:0;
}

/* Lo único que gira. El origen cae sobre el núcleo del proyector: es el eje
   vertical imaginario que atraviesa el centro del dashboard. */
.gv-hg-plataforma{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  /* El eje atraviesa el núcleo de la base, el centro del haz y el centro del
     dashboard: el conjunto gira como un solo proyector. */
  transform-origin:50% calc(100% - 38px);
  /* Nunca del todo frontal: en reposo el conjunto se queda con una
     orientación mínima, de modo que el canto de la placa y la elipse de la
     base ya se leen antes de mover el puntero. */
  transform:
    rotateX(calc(-2deg + var(--hg-rx,0deg)))
    rotateY(calc(-3deg + var(--hg-ry,0deg)));
  will-change:transform;
}

/* ── El proyector ────────────────────────────────────────────────────────
   Volumen de verdad: las dos caras van tumbadas con rotateX(90deg) y entre
   ellas queda la pared. Al inclinarse se ve el canto, un lado recibe más luz
   que el otro y la elipse superior cambia de escorzo sola. */
/* El núcleo va en el centro de esta caja, así que el `bottom` se calcula
   desde ahí: -55 px deja el núcleo a 38 px del fondo, justo sobre el vértice
   del haz. Antes la caja empezaba en 14 px y el núcleo quedaba a 107, con lo
   que el cono seguía 73 px por debajo y atravesaba la plataforma. */
.gv-hg-base{
  position:absolute;left:50%;bottom:-55px;
  width:186px;height:186px;margin-left:-93px;
  transform-style:preserve-3d;
  transform:translateZ(26px);
}
.gv-hg-base-sup,
.gv-hg-base-inf{
  position:absolute;left:0;right:0;top:50%;height:74px;margin-top:-37px;
  border-radius:50%;
  transform-style:preserve-3d;
}
/* Cara superior: la que se ve, con su bisel claro. */
.gv-hg-base-sup{
  transform:rotateX(90deg) translateZ(calc(var(--hg-pared) / 2));
  background:
    radial-gradient(58% 66% at calc(50% - var(--holo-light-x) * 26%) 38%,rgba(70,125,205,.34),transparent 74%),
    linear-gradient(168deg,rgba(30,50,94,.90) 0%,rgba(14,26,52,.94) 100%);
  border:1px solid rgba(126,170,255,.34);
  box-shadow:inset 0 0 14px rgba(90,150,240,.20);
}
/* Cara inferior: más oscura, apenas se intuye. */
.gv-hg-base-inf{
  transform:rotateX(90deg) translateZ(calc(var(--hg-pared) / -2));
  background:linear-gradient(168deg,rgba(8,16,34,.92),rgba(6,12,26,.96));
  border:1px solid rgba(90,130,200,.16);
}
/* Pared lateral: el canto del dispositivo. Su gradiente se desplaza con el
   puntero, de modo que el lado que mira a la luz queda más encendido. */
.gv-hg-base-pared{
  position:absolute;left:0;right:0;top:calc(50% - 37px);
  height:74px;
  border-radius:50%;
  transform:translateY(calc(var(--hg-pared) / -2)) rotateX(90deg) scaleY(1);
  background:linear-gradient(
    calc(90deg + var(--holo-light-x) * 40deg),
    rgba(120,175,255,.34) 0%,
    rgba(40,70,130,.62) 42%,
    rgba(12,22,46,.86) 100%);
  border:1px solid rgba(126,170,255,.20);
  box-shadow:0 var(--hg-pared) 22px rgba(2,8,24,.55);
}
/* Aro superior: recibe la energía en la fase 1 y luego respira. */
.gv-hg-base-aro{
  position:absolute;left:11%;right:11%;top:calc(50% - 28px);height:56px;
  border-radius:50%;
  transform:rotateX(90deg) translateZ(calc(var(--hg-pared) / 2 + 1px));
  border:1px solid rgba(150,205,255,calc(.18 + .58 * var(--hg-encendido)));
  box-shadow:
    0 0 calc(12px * var(--hg-encendido)) rgba(96,175,255,calc(.55 * var(--hg-encendido))),
    inset 0 0 calc(14px * var(--hg-encendido)) rgba(96,175,255,calc(.34 * var(--hg-encendido)));
}
/* Núcleo, ligeramente hundido: de aquí sale el haz. */
.gv-hg-base-ojo{
  position:absolute;left:50%;top:50%;
  width:34px;height:15px;margin:-7px 0 0 -17px;
  border-radius:50%;
  transform:rotateX(90deg) translateZ(calc(var(--hg-pared) / 2 - 3px));
  background:radial-gradient(closest-side,rgba(232,245,255,calc(.18 + .78 * var(--hg-encendido))),transparent 76%);
  box-shadow:0 0 calc(18px * var(--hg-encendido)) rgba(140,205,255,calc(.65 * var(--hg-encendido)));
}
/* Reflejo sobre la superficie, por debajo del dispositivo. */
.gv-hg-base-reflejo{
  position:absolute;left:-16%;right:-16%;top:calc(50% - 30px);height:80px;
  border-radius:50%;
  transform:rotateX(90deg) translateZ(calc(var(--hg-pared) / -2 - 4px));
  background:radial-gradient(closest-side,rgba(90,160,255,calc(.18 * var(--hg-encendido))),transparent 74%);
  filter:blur(6px);
}

/* ── El haz ──────────────────────────────────────────────────────────────
   Cono truncado con espesor: cara frontal, cara posterior y dos laterales en
   planos distintos. Todo crece con scaleY desde su base, que es lo que lo
   ata al proyector: nace en el núcleo pase lo que pase con el giro. */
.gv-hg-haz{
  position:absolute;left:50%;bottom:34px;
  width:400px;height:322px;margin-left:-200px;
  transform-style:preserve-3d;
  transform-origin:50% 100%;
  transform:scaleY(var(--hg-proyeccion));
  pointer-events:none;
}
/* El vértice mide 8 % de 400 px = 32 px, algo menos que los 34 del núcleo:
   así arranca DENTRO de él y no asoma por los lados. El haz nace a 34 px del
   fondo y el núcleo, que está a 38 y por delante en Z, tapa ese arranque. */
.gv-hg-haz-cara,
.gv-hg-haz-lat,
.gv-hg-haz-nucleo,
.gv-hg-haz-vetas{
  position:absolute;inset:0;
  -webkit-clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);
  clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);
}
.gv-hg-haz-cara--front{
  transform:translateZ(20px);
  background:linear-gradient(0deg,
    rgba(96,175,255,.17) 0%,rgba(96,175,255,.085) 44%,rgba(96,175,255,0) 100%);
}
/* La trasera se ve a través de la frontal: es lo que da el hueco. */
.gv-hg-haz-cara--tras{
  transform:translateZ(-22px);
  background:linear-gradient(0deg,
    rgba(96,175,255,.10) 0%,rgba(96,175,255,.05) 46%,rgba(96,175,255,0) 100%);
}
/* Laterales: dos planos de canto que cierran el volumen. Al girar cambian de
   anchura aparente y enseñan el espesor del cono. */
.gv-hg-haz-lat{
  width:42px;
  background:linear-gradient(0deg,rgba(150,205,255,.16) 0%,rgba(150,205,255,.03) 62%,transparent 100%);
  -webkit-clip-path:polygon(50% 100%,50% 100%,100% 0,0 0);
  clip-path:polygon(50% 100%,50% 100%,100% 0,0 0);
}
.gv-hg-haz-lat--izq{left:calc(50% - 200px);right:auto;transform-origin:100% 50%;transform:rotateY(74deg)}
.gv-hg-haz-lat--der{left:auto;right:calc(50% - 200px);transform-origin:0 50%;transform:rotateY(-74deg)}
/* Columna central, algo más encendida: el eje de la proyección. */
.gv-hg-haz-nucleo{
  transform:translateZ(2px);
  background:linear-gradient(0deg,
    rgba(200,232,255,calc(.20 + .16 * var(--hg-encendido))) 0%,
    rgba(150,205,255,.10) 40%,rgba(150,205,255,0) 84%);
  -webkit-clip-path:polygon(48.5% 100%,51.5% 100%,70% 0,30% 0);
  clip-path:polygon(48.5% 100%,51.5% 100%,70% 0,30% 0);
}
/* Vetas: bandas finas y separadas, nada de ruido continuo. */
.gv-hg-haz-vetas{
  transform:translateZ(10px);
  background:repeating-linear-gradient(0deg,
    rgba(190,225,255,.05) 0 1px,transparent 1px 14px);
  opacity:.7;
}
/* ── La placa ────────────────────────────────────────────────────────────
   Cristal casi transparente con espesor real: cara frontal, cara posterior a
   --hg-placa por detrás y cuatro cantos que la cierran. */
.gv-hg-flota{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:translateY(var(--hg-flota,0px));
}
.gv-hg-panel{
  position:absolute;left:50%;top:16px;
  width:330px;margin-left:-165px;
  padding:16px 18px 18px;
  transform-style:preserve-3d;
  transform:translateZ(34px);
  opacity:var(--hg-panel);
  transition:opacity .5s ease;
}
/* Cara posterior, muy tenue. */
.gv-hg-tras{
  position:absolute;inset:0;
  transform:translateZ(calc(var(--hg-placa) * -1));
  background:linear-gradient(160deg,rgba(40,110,190,.07),rgba(24,74,150,.04));
  border:1px solid rgba(150,198,255,.16);
  border-radius:3px;
}
/* Los cuatro cantos: rectángulos del grosor de la placa, girados un cuarto
   de vuelta sobre el borde que les toca. El que mira a la luz se enciende. */
.gv-hg-canto{
  position:absolute;
  background:linear-gradient(var(--hg-canto-dir,90deg),
    rgba(150,205,255,calc(.30 + .28 * var(--hg-canto-luz,0))) 0%,
    rgba(60,110,190,.22) 70%,
    rgba(24,52,102,.30) 100%);
  border-radius:1px;
}
.gv-hg-canto--izq{
  left:0;top:0;bottom:0;width:var(--hg-placa);
  transform-origin:0 50%;transform:rotateY(-90deg);
  --hg-canto-luz:calc(0.5 - var(--holo-light-x) * 0.5);
}
.gv-hg-canto--der{
  right:0;top:0;bottom:0;width:var(--hg-placa);
  transform-origin:100% 50%;transform:rotateY(90deg);
  --hg-canto-luz:calc(0.5 + var(--holo-light-x) * 0.5);
}
.gv-hg-canto--sup{
  left:0;right:0;top:0;height:var(--hg-placa);
  transform-origin:50% 0;transform:rotateX(90deg);
  --hg-canto-dir:180deg;--hg-canto-luz:0.6;
}
.gv-hg-canto--inf{
  left:0;right:0;bottom:0;height:var(--hg-placa);
  transform-origin:50% 100%;transform:rotateX(-90deg);
  --hg-canto-dir:0deg;--hg-canto-luz:0.25;
}

/* ── Capas internas ──────────────────────────────────────────────────────
   La profundidad la da translateZ y la perspectiva hace el paralaje sola: no
   se mueve nada a mano. */
.gv-hg-marco{
  position:absolute;inset:0;
  transform-origin:50% 100%;
  transform:translateZ(0) scaleY(var(--hg-marco,0));
  border:1px solid var(--hg-borde);
  border-radius:3px;
  background:linear-gradient(160deg,rgba(60,145,225,.12) 0%,rgba(32,105,190,.05) 62%,rgba(32,105,190,.06) 100%);
  backdrop-filter:blur(3px) saturate(115%);
  -webkit-backdrop-filter:blur(3px) saturate(115%);
  box-shadow:inset 0 1px 0 rgba(214,235,255,.34),0 14px 34px rgba(2,10,28,.28);
}
/* Reflejo diagonal, desplazado por el puntero. */
.gv-hg-marco::after{
  content:"";position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(
    calc(150deg + var(--holo-light-x) * 16deg),
    rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 34%,transparent 58%);
}
.gv-hg-retic{
  position:absolute;inset:6px;
  transform:translateZ(10px);
  background-image:
    linear-gradient(rgba(150,198,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,198,255,.10) 1px,transparent 1px);
  background-size:44px 30px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 76%);
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 76%);
  opacity:var(--hg-marco,0);
}

/* Cabecera · plano +40 */
.gv-hg-cab{
  position:relative;transform:translateZ(40px);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--hg-linea);
  opacity:var(--hg-cab,0);
}
.gv-hg-tit{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hg-texto);text-shadow:0 1px 4px rgba(4,12,30,.6);
}
.gv-hg-estado{
  position:relative;display:inline-block;
  font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hg-cian);white-space:nowrap;
  text-shadow:0 0 8px rgba(96,175,255,.45);
}
/* Los dos estados ocupan el mismo hueco: el definitivo reserva el ancho y el
   de análisis va encima, así que el relevo no mueve la cabecera. */
.gv-hg-estado-ana{position:absolute;right:0;top:0;opacity:calc(1 - var(--hg-estado,0))}
.gv-hg-estado-fin{opacity:var(--hg-estado,0)}

/* Nombres de las áreas · plano +21 · líneas y puntos · +32 */
.gv-hg-areas{
  position:relative;transform:translateZ(21px);
  margin:14px 0 0;padding:0;list-style:none;display:grid;gap:11px;
}
.gv-hg-area{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:center;
  opacity:var(--a,0);
}
.gv-hg-area:nth-child(1){--a:var(--hg-a1,0)}
.gv-hg-area:nth-child(2){--a:var(--hg-a2,0)}
.gv-hg-area:nth-child(3){--a:var(--hg-a3,0)}
.gv-hg-area-nom{
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hg-tenue);text-shadow:0 1px 3px rgba(4,12,30,.55);
  clip-path:inset(0 calc(100% - 100% * var(--n,1)) 0 0);
}
.gv-hg-area:nth-child(1) .gv-hg-area-nom{--n:var(--hg-n1,0)}
.gv-hg-area:nth-child(2) .gv-hg-area-nom{--n:var(--hg-n2,0)}
.gv-hg-area:nth-child(3) .gv-hg-area-nom{--n:var(--hg-n3,0)}
.gv-hg-pista{position:relative;display:block;height:12px;transform:translateZ(11px);transform-style:preserve-3d}
.gv-hg-pista svg{width:100%;height:100%;overflow:visible}
.gv-hg-eje{
  fill:none;stroke:var(--hg-linea);stroke-width:1;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - 100 * var(--l,0));
}
.gv-hg-area:nth-child(1) .gv-hg-eje{--l:var(--hg-l1,0)}
.gv-hg-area:nth-child(2) .gv-hg-eje{--l:var(--hg-l2,0)}
.gv-hg-area:nth-child(3) .gv-hg-eje{--l:var(--hg-l3,0)}
.gv-hg-nodo{
  fill:none;stroke:rgba(150,205,255,.75);stroke-width:2.4;stroke-linecap:round;
  opacity:var(--l,0);
}
.gv-hg-area:nth-child(1) .gv-hg-nodo{--l:var(--hg-l1,0)}
.gv-hg-area:nth-child(2) .gv-hg-nodo{--l:var(--hg-l2,0)}
.gv-hg-area:nth-child(3) .gv-hg-nodo{--l:var(--hg-l3,0)}
.gv-hg-scan{
  position:absolute;top:-3px;bottom:-3px;width:26px;
  left:calc(-26px + (100% + 26px) * var(--s,0));
  background:linear-gradient(90deg,transparent,rgba(190,230,255,.55),transparent);
  opacity:var(--so,0);
  pointer-events:none;
}
.gv-hg-area:nth-child(1) .gv-hg-scan{--s:var(--hg-s1,0);--so:var(--hg-so1,0)}
.gv-hg-area:nth-child(2) .gv-hg-scan{--s:var(--hg-s2,0);--so:var(--hg-so2,0)}
.gv-hg-area:nth-child(3) .gv-hg-scan{--s:var(--hg-s3,0);--so:var(--hg-so3,0)}
/* Marcadores · el plano de los indicadores, +36 en total */
.gv-hg-marca{
  position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  transform:translateZ(4px);
  opacity:var(--m,0);
}
.gv-hg-area:nth-child(1) .gv-hg-marca{left:62%;--m:var(--hg-m1,0);background:var(--hg-inmediata);box-shadow:0 0 9px rgba(255,141,145,.7)}
.gv-hg-area:nth-child(2) .gv-hg-marca{left:37%;--m:var(--hg-m2,0);background:var(--hg-alta);box-shadow:0 0 9px rgba(255,209,102,.65)}
.gv-hg-area:nth-child(3) .gv-hg-marca{left:82%;--m:var(--hg-m3,0);background:var(--hg-mejora);box-shadow:0 0 9px rgba(105,227,174,.6)}

/* Prioridades · el plano más cercano, +54 */
.gv-hg-rotulo{
  position:relative;transform:translateZ(46px);
  margin:16px 0 0;padding-top:11px;
  border-top:1px solid var(--hg-linea);
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hg-tenue);
  opacity:var(--hg-rotulo,0);
}
.gv-hg-plan{
  position:relative;transform:translateZ(54px);
  margin:9px 0 0;padding:0;list-style:none;display:grid;gap:8px;
}
.gv-hg-prio{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  opacity:var(--p,0);
}
.gv-hg-prio--1{--p:var(--hg-p1,0)}
.gv-hg-prio--2{--p:var(--hg-p2,0)}
.gv-hg-prio--3{--p:var(--hg-p3,0)}
.gv-hg-chip{
  position:relative;display:inline-block;
  padding:3px 8px;border-radius:2px;
  font-size:9px;font-weight:700;letter-spacing:.13em;
  border:1px solid currentColor;
  white-space:nowrap;
}
/* La mecanografía recorta el texto, no lo sustituye: el ancho del chip ya es
   el final desde el primer fotograma y el panel no se mueve. */
.gv-hg-chip-txt{
  display:inline-block;
  clip-path:inset(0 calc(100% - 100% * var(--t,1)) 0 0);
}
.gv-hg-prio--1 .gv-hg-chip-txt{--t:var(--hg-t1,0)}
.gv-hg-prio--2 .gv-hg-chip-txt{--t:var(--hg-t2,0)}
.gv-hg-prio--3 .gv-hg-chip-txt{--t:var(--hg-t3,0)}
.gv-hg-chip::after{
  content:"";position:absolute;top:3px;bottom:3px;width:1px;
  left:calc(8px + (100% - 16px) * var(--t,0));
  background:currentColor;
  opacity:var(--c,0);
}
.gv-hg-prio--1 .gv-hg-chip{color:var(--hg-inmediata);--t:var(--hg-t1,0);--c:var(--hg-c1,0);background:rgba(255,141,145,.10);box-shadow:0 0 10px rgba(255,141,145,.20)}
.gv-hg-prio--2 .gv-hg-chip{color:var(--hg-alta);--t:var(--hg-t2,0);--c:var(--hg-c2,0);background:rgba(255,209,102,.10);box-shadow:0 0 10px rgba(255,209,102,.18)}
.gv-hg-prio--3 .gv-hg-chip{color:var(--hg-mejora);--t:var(--hg-t3,0);--c:var(--hg-c3,0);background:rgba(105,227,174,.10);box-shadow:0 0 10px rgba(105,227,174,.16)}
.gv-hg-prio-txt{
  font-size:11px;line-height:1.52;color:#EAF3FF;opacity:.92;
  text-shadow:0 1px 3px rgba(6,20,46,.55),0 0 10px rgba(6,20,46,.35);
}

/* La nota vive en el borde inferior del dashboard, dentro de la proyección:
   fuera del panel quedaba flotando sobre la mesa y se perdía contra la
   fotografía. */
.gv-hg-pie{
  position:relative;transform:translateZ(50px);
  margin:12px 0 0;
  font-size:11px;line-height:1.45;
  color:#D8E6FF;opacity:calc(.78 * var(--hg-panel));
  text-shadow:0 1px 3px rgba(6,20,46,.6);
  text-align:left;
}
/* Cristal localizado detrás del bloque de prioridades: transparente arriba y
   apenas velado detrás del texto. No es una tarjeta: no tiene borde ni canto
   y se funde con la placa. */
.gv-hg-plan::before{
  content:"";position:absolute;inset:-8px -10px -10px;
  transform:translateZ(-6px);
  background:linear-gradient(180deg,rgba(7,24,55,0) 0%,rgba(7,24,55,.14) 42%,rgba(7,24,55,.22) 100%);
  border-radius:3px;
  pointer-events:none;
}

/* ── Tableta ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .gv-hg{perspective:1180px;height:clamp(390px,46vh,460px);--hg-placa:8px;--hg-pared:10px}
  .gv-hg-panel{width:302px;margin-left:-151px}
  .gv-hg-haz{width:352px;margin-left:-176px;height:296px}
  .gv-hg-base{width:168px;margin-left:-84px}
  .gv-hg-cab{transform:translateZ(32px)}
  .gv-hg-plan{transform:translateZ(42px)}
  .gv-hg-rotulo{transform:translateZ(36px)}
}

/* ── Apilado ─────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .gv-hg{height:clamp(380px,44vh,430px);max-width:420px}
}
@media (max-width:560px){
  .gv-hg{height:360px;perspective:820px;--hg-placa:6px;--hg-pared:8px}
  .gv-hg-panel{width:266px;margin-left:-133px;padding:13px 14px 15px}
  .gv-hg-haz{width:300px;margin-left:-150px;height:258px}
  .gv-hg-base{width:146px;margin-left:-73px}
  .gv-hg-area{grid-template-columns:66px minmax(0,1fr);gap:9px}
  .gv-hg-prio-txt{font-size:10.5px}
  /* Menos capas y menos filtro: en móvil el coste importa más que el detalle. */
  .gv-hg-retic,.gv-hg-haz-vetas,.gv-hg-haz-lat,.gv-hg-panel::after{display:none}
  .gv-hg-marco{backdrop-filter:none;-webkit-backdrop-filter:none}
  .gv-hg-cab{transform:translateZ(24px)}
  .gv-hg-plan{transform:translateZ(32px)}
  .gv-hg-rotulo{transform:translateZ(28px)}
}
/* Sin puntero fino no hay seguimiento: una orientación fija y atractiva. */
/* Sin puntero fino no hay seguimiento, pero sí una orientación fija que deja
   ver el volumen. */
@media (hover:none),(pointer:coarse){
  .gv-hg-plataforma{transform:rotateX(-2deg) rotateY(-4deg)}
}

/* ── Movimiento reducido ─────────────────────────────────────────────────
   Todo formado desde el primer fotograma y sin seguimiento, pero con la
   perspectiva, el volumen, los cantos, la base y el haz intactos. */
@media (prefers-reduced-motion:reduce){
  /* Se anulan los estados iniciales: vuelve a mandar el estado formado de
     .gv-hg, que es el de partida de la hoja. */
  .gv-hg.gv-hg--js{
    --hg-encendido:1;--hg-proyeccion:1;--hg-panel:1;--hg-marco:1;--hg-cab:1;
    --hg-a1:1;--hg-a2:1;--hg-a3:1;--hg-n1:1;--hg-n2:1;--hg-n3:1;
    --hg-l1:1;--hg-l2:1;--hg-l3:1;--hg-m1:1;--hg-m2:1;--hg-m3:1;
    --hg-rotulo:1;--hg-p1:1;--hg-p2:1;--hg-p3:1;--hg-t1:1;--hg-t2:1;--hg-t3:1;
    --hg-so1:0;--hg-so2:0;--hg-so3:0;--hg-c1:0;--hg-c2:0;--hg-c3:0;
    --hg-estado:1;
  }
  .gv-hg-plataforma{transform:rotateX(-2deg) rotateY(-3deg);will-change:auto}
  .gv-hg-panel,.gv-hg-flota{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSENTIMIENTO · aviso compacto y panel de preferencias
   Mismo material que el resto del sitio: navy de cabecera y pie, filetes
   finos, radio de bloque y los botones del sistema. Sin animación de
   entrada y sin nada tridimensional: es un aviso legal, no una pieza de
   escaparate.

   El aviso es una barra flotante: no tiene capa oscura, no bloquea el
   scroll y deja la página navegable. La capa oscura es solo del panel.

   IMPORTANTE · el atributo hidden necesita una regla explícita en las dos
   piezas. El display:flex que llevan pesa más que el display:none que el
   navegador aplica a [hidden], así que sin estas dos líneas el panel se ve
   siempre y ningún botón consigue cerrarlo.
   ═══════════════════════════════════════════════════════════════════════ */
.gv-ck-aviso[hidden],
.gv-ck-panel[hidden]{display:none}

.gv-ck-aviso{
  position:fixed;z-index:9000;
  left:50%;bottom:20px;transform:translateX(-50%);
  width:min(950px,calc(100% - 32px));
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  padding:14px 20px;
  background:var(--gv-ink);
  border:1px solid rgba(150,180,235,.3);border-radius:var(--gv-r);
  box-shadow:0 18px 44px -20px rgba(7,17,38,.6);
  color:#fff;
}
.gv-ck-aviso-txt{
  flex:1 1 auto;margin:0;min-width:0;
  font-size:13.5px;line-height:1.5;color:#C7D3E7;
}
.gv-ck-aviso-txt a{color:#9DC0FF;text-underline-offset:2px;white-space:nowrap}
.gv-ck-aviso-txt a:hover{color:#fff}
/* Etiqueta solo para lectores de pantalla: nombra la región sin ocupar. */
.gv-ck-vo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.gv-ck-acciones{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px}
/* Un solo tamaño para los tres botones. Aceptar y rechazar se distinguen
   por acabado, nunca por tamaño ni por contraste: ninguno está atenuado. */
.gv-ck-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:10px 20px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;
  border-radius:var(--gv-rbtn,25px);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.gv-ck-btn--solido{background:var(--gv-cta);color:#fff}
.gv-ck-btn--solido:hover{background:var(--gv-cta-d)}
.gv-ck-btn--linea{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.gv-ck-btn--linea:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ── Panel ───────────────────────────────────────────────────────────── */
.gv-ck-panel{
  position:fixed;inset:0;z-index:9100;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,28px);
  background:rgba(7,17,38,.6);
}
/* Mientras el panel está abierto la página no se desplaza detrás. Se retira
   con la misma función que lo cierra, así que no puede quedarse puesto. */
.gv-ck-abierto,.gv-ck-abierto body{overflow:hidden}
.gv-ck-panel-caja{
  display:flex;flex-direction:column;
  width:min(480px,100%);max-height:min(84vh,620px);
  background:var(--gv-ink);color:#fff;
  border:1px solid rgba(150,180,235,.28);border-radius:var(--gv-r);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
}
.gv-ck-panel-cab{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-bottom:1px solid rgba(150,180,235,.2);
}
.gv-ck-tit{
  flex:1;margin:0;font-size:16px;font-weight:700;line-height:1.25;color:#fff;
}
.gv-ck-cerrar{
  flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;padding:0;
  background:transparent;border:1px solid rgba(150,180,235,.3);border-radius:50%;
  color:#C7D3E7;cursor:pointer;transition:border-color .18s ease,color .18s ease;
}
.gv-ck-cerrar:hover{border-color:#fff;color:#fff}
.gv-ck-cerrar svg{width:16px;height:16px}

.gv-ck-panel-cuerpo{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 18px 14px;
}
.gv-ck-cat{padding:16px 0;border-top:1px solid rgba(150,180,235,.16)}
.gv-ck-cat:first-child{border-top:0}
.gv-ck-cat-cab{display:flex;align-items:center;gap:14px;min-height:26px}
.gv-ck-cat-cab h3{
  flex:1;margin:0;font-size:14.5px;font-weight:700;line-height:1.25;color:#fff;
}
.gv-ck-cat-cab label{cursor:pointer}
.gv-ck-cat p{
  margin:7px 0 0;font-size:13px;line-height:1.55;color:#AFC2E4;max-width:60ch;
}
.gv-ck-fija{
  flex:0 0 auto;padding:3px 10px;border-radius:99px;
  border:1px solid rgba(150,180,235,.34);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#9DB6E8;
}
.gv-ck-panel-pieinfo{
  margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(150,180,235,.16);
  font-size:12.5px;line-height:1.5;color:#93A6C9;
}
.gv-ck-panel-pieinfo a{color:#9DC0FF}
.gv-ck-panel-pieinfo a:hover{color:#fff}

/* Interruptor. La casilla real sigue ahí, encima y transparente: recibe el
   foco, el teclado y el lector de pantalla; la palanca solo la dibuja. */
.gv-ck-mando{position:relative;flex:0 0 auto;width:46px;height:26px}
.gv-ck-check{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;z-index:1;
}
.gv-ck-palanca{
  position:absolute;inset:0;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid rgba(150,180,235,.4);
  transition:background .18s ease,border-color .18s ease;
}
.gv-ck-palanca::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#9DB6E8;
  transition:transform .18s ease,background .18s ease;
}
.gv-ck-check:checked + .gv-ck-palanca{background:var(--gv-cta);border-color:var(--gv-cta)}
.gv-ck-check:checked + .gv-ck-palanca::after{transform:translateX(20px);background:#fff}
.gv-ck-check:focus-visible + .gv-ck-palanca{outline:2px solid var(--gv-bright);outline-offset:2px}

.gv-ck-panel-pie{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;
  padding:14px 18px;border-top:1px solid rgba(150,180,235,.2);
  background:var(--gv-ink2);
}
.gv-ck-panel-pie .gv-ck-btn{flex:1 1 auto}

.gv-ck-aviso :focus-visible,.gv-ck-panel :focus-visible{
  outline:2px solid var(--gv-bright);outline-offset:2px;
}

/* ── Tableta: el texto arriba y los tres botones en una fila ─────────── */
@media (max-width:820px){
  .gv-ck-aviso{
    flex-direction:column;align-items:stretch;gap:12px;
    bottom:16px;width:calc(100% - 24px);
  }
  .gv-ck-acciones{width:100%}
  .gv-ck-acciones .gv-ck-btn{flex:1 1 auto}
}
/* ── Móvil: botones grandes, en dos filas, nunca fuera de pantalla y sin
   pasar de un tercio del alto visible ─────────────────────────────────── */
@media (max-width:560px){
  .gv-ck-aviso{max-height:33vh;overflow-y:auto;padding:14px 16px}
  .gv-ck-aviso-txt{font-size:13px}
  .gv-ck-acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Aceptar ocupa la segunda fila entera: es la acción más larga de leer,
     no una jerarquía sobre rechazar, que conserva tamaño y contraste. */
  .gv-ck-acciones .gv-ck-btn--solido{grid-column:1 / -1}
  .gv-ck-acciones .gv-ck-btn{min-height:46px;width:100%}
  .gv-ck-panel{padding:0;align-items:flex-end}
  .gv-ck-panel-caja{max-height:88vh;border-radius:0;border-left:0;border-right:0;border-bottom:0}
  .gv-ck-panel-pie{flex-direction:column}
  .gv-ck-panel-pie .gv-ck-btn{width:100%;min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  .gv-ck-btn,.gv-ck-palanca,.gv-ck-palanca::after,.gv-ck-cerrar{transition:none}
}
/* Tablas dentro de los textos legales: proveedores, cookies y plazos. El
   contenedor scrolla por su cuenta, así que la página nunca se desplaza en
   horizontal por culpa de una tabla ancha. */
.gv-legal-tabla{overflow-x:auto;margin:18px 0 0;border:1px solid var(--gv-line)}
.gv-legal-tabla table{border-collapse:collapse;width:100%;min-width:580px;background:#fff}
.gv-legal-tabla th,.gv-legal-tabla td{
  padding:11px 14px;text-align:left;vertical-align:top;
  border-top:1px solid var(--gv-line);
  font-size:13.5px;line-height:1.5;color:var(--gv-mute);
}
.gv-legal-tabla thead th{
  border-top:0;background:var(--gv-soft);
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gv-ink);white-space:nowrap;
}
.gv-legal-tabla tbody tr:first-child td{border-top:1px solid var(--gv-line)}
.gv-legal-tabla td:first-child{color:var(--gv-ink);font-weight:600}
.gv-legal-tabla code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--gv-soft);padding:1px 5px;border-radius:2px;word-break:break-word;
}
/* Lo que está por confirmar se marca, en vez de rellenarse con una
   suposición. */
.gv-legal-pendiente{color:var(--gv-brass);font-style:italic}
.gv-legal-tabla td.gv-legal-pendiente{font-weight:400}
@media (max-width:560px){
  .gv-legal-tabla th,.gv-legal-tabla td{padding:9px 11px;font-size:12.5px}
}