/*! Diseño y desarrollo web: Xaime Nieto · https://xaimenieto.com · contacto@xaimenieto.com · © 2026 */
/* gx.css · encabezado y pie de gsf-hotels.com en vacantes. Partes 1–3: copia sin cambios de _propuesta/encabezado2.css (v61), pie.css (v17) y tema.css (v61) del corporativo. Parte 4: adaptación de vacantes. */
/* ═════ 1 · encabezado2.css ═════ */
/*! Diseño y desarrollo web: Xaime Nieto · https://xaimenieto.com · contacto@xaimenieto.com · © 2026 */
/* Encabezado global propuesto · Grupo Hotelero Santa Fe (vista privada)
   Un solo encabezado para todo el sitio, con megamenús por sección y la cotización de BMV: HOTEL. */
.gx,.gx-cajon,.gx-saltar,.gx-seccion{
 --marfil:#FFFFFF;--marfil-2:#F2F7FA;--tinta:#2F414C;--tinta-2:#435561;--filete:#DDE6EC;--acento:#2F414C;--marino:#2F414C;--claro:#A0C4DA;
 --margen:32px;--display:"Red Hat Display",system-ui,sans-serif;--texto:"Red Hat Text",system-ui,sans-serif}
.gx,.gx *,.gx-cajon,.gx-cajon *,.gx-seccion,.gx-seccion *{box-sizing:border-box}
.gx a,.gx-cajon a,.gx-seccion a{text-decoration:none;color:inherit}
.gx ul,.gx-cajon ul,.gx-seccion ul{list-style:none;margin:0;padding:0}
.gx button,.gx-cajon button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.gx :focus-visible,.gx-cajon :focus-visible,.gx-seccion :focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.gx-ancho{max-width:calc(1280px + 2*var(--margen));margin:0 auto;padding:0 var(--margen)}
.gx-saltar{position:absolute;left:var(--margen);top:-200px;z-index:2000;background:var(--tinta);color:#fff!important;font:600 16px/1 var(--texto);padding:14px 20px;border-radius:8px}
.gx-saltar:focus{top:8px}

/* ── Contenedor: se queda fijo; en la portada, transparente sobre la foto hasta desplazar ── */
.gx.tr-header{position:sticky;top:-44px;z-index:1000;font:400 16px/1.5 var(--texto);color:var(--tinta);margin:0;padding:0;height:auto;background:none}
.gx-principal{position:relative;isolation:isolate;border-bottom:1px solid var(--filete);transition:border-color .25s,color .25s}
/* vidrio en un pseudoelemento: así los megamenús pueden tener su propio desenfoque */
.gx-principal::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transition:background .25s}
.gx--solido .gx-principal::before,.gx--abierto .gx-principal::before{-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}
.gx--solido .gx-principal::before{background:rgba(255,255,255,.92)}
.gx--solido .gx-principal{border-bottom-color:rgba(47,65,76,.08);box-shadow:0 10px 30px -18px rgba(47,65,76,.35)}
.gx--abierto .gx-principal::before{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(40px) saturate(190%) brightness(1.06);backdrop-filter:blur(40px) saturate(190%) brightness(1.06)}
.gx--abierto .gx-principal{border-bottom-color:transparent}
.gx--abierto .gx-mega{box-shadow:0 12px 24px -12px rgba(20,29,35,.12),0 48px 96px -24px rgba(20,29,35,.30)}
/* Portada en reposo: velo de humo con una sola curva suave (smoothstep, sin quiebres de pendiente), que cubre barra y menú
   y se desvanece 140 px sobre la foto, sin línea ni banda visible */
.gx--foto::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-140px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
 background:linear-gradient(180deg,rgba(20,29,35,0.740) 0.00%,rgba(20,29,35,0.740) 6.25%,rgba(20,29,35,0.740) 12.50%,rgba(20,29,35,0.740) 18.75%,rgba(20,29,35,0.740) 25.00%,rgba(20,29,35,0.739) 31.25%,rgba(20,29,35,0.716) 37.50%,rgba(20,29,35,0.666) 43.75%,rgba(20,29,35,0.593) 50.00%,rgba(20,29,35,0.506) 56.25%,rgba(20,29,35,0.410) 62.50%,rgba(20,29,35,0.311) 68.75%,rgba(20,29,35,0.216) 75.00%,rgba(20,29,35,0.131) 81.25%,rgba(20,29,35,0.062) 87.50%,rgba(20,29,35,0.017) 93.75%,rgba(20,29,35,0.000) 100.00%)}
.gx--foto:not(.gx--solido):not(.gx--abierto)::after{opacity:1}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra{background:transparent}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-principal{border-bottom-color:transparent;color:#fff}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-principal::before{background:transparent}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-logo .claro{opacity:1}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-logo .oscuro{opacity:0}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-cta{background:#fff;color:var(--tinta)!important;border-color:#fff}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-abrir{border-color:rgba(255,255,255,.5)}

/* ── Barra superior: la emisora primero ── */
.gx-barra{background:var(--marino);color:rgba(255,255,255,.82);font:500 14px/1 var(--texto);transition:background-color .3s}
.gx-barra .gx-ancho{display:flex;align-items:center;gap:24px;min-height:44px}
.gx-cotiza{display:inline-flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap;color:#fff}
.gx-cotiza .sim{display:inline-flex;align-items:baseline;gap:6px;padding-bottom:2px;border-bottom:1px solid transparent;font-weight:600;letter-spacing:.06em;transition:border-color .2s}
.gx-cotiza .sim small{font-weight:500;color:var(--claro);letter-spacing:.06em}
.gx-cotiza .var{color:var(--claro)}
.gx-cotiza .var.baja{color:#F2B8A8}
.gx-cotiza .var.sube{color:#9FE0B8}
.gx-cotiza .hora{color:rgba(255,255,255,.6);font-weight:400}
/* un solo filete continuo bajo «BMV HOTEL» (el subrayado de texto se cortaba en el hueco entre ambos) */
.gx-cotiza:hover .sim,.gx-cotiza:focus-visible .sim{border-bottom-color:currentColor}
.gx-sep{width:1px;height:16px;background:rgba(255,255,255,.2)}
.gx-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap}
.gx-tel:hover,.gx-barra a:hover{color:#fff}
.gx-barra-der{margin-left:auto;display:flex;align-items:center;gap:18px}
.gx-marca{letter-spacing:.08em;font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.gx-redes{display:flex}
.gx-redes a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:rgba(255,255,255,.78)}

/* ── Barra principal ── */
.gx-principal>.gx-ancho{display:flex;align-items:center;gap:40px;height:88px;transition:height .3s,gap .3s}
.gx--solido .gx-principal>.gx-ancho{height:72px}
/* al compactar (88 → 72) un relleno invisible conserva el espacio: la página no se mueve y el estado no oscila cerca del tope */
@media (min-width:701px){.gx.tr-header{transition:padding-bottom .3s}.gx.tr-header.gx--solido{padding-bottom:16px}}
.gx.tr-header{overflow-anchor:none}
.gx-logo{display:block;flex:none;line-height:0;position:relative}
.gx-logo img{display:block;height:48px;width:auto;margin-left:-13px;transition:height .3s,margin .3s}
@media (min-width:701px){.gx--solido .gx-logo img{height:46px;margin-left:-12.5px}}
.gx-logo .claro{position:absolute;left:0;top:0;opacity:0}
.gx-logo img{transition:height .3s,margin .3s,opacity .25s}
.gx-nav{margin-left:auto;height:100%}
.gx-menu{display:flex;align-items:stretch;gap:36px;height:100%}
.gx-menu>li{display:flex;align-items:center}
.gx-menu>li>a,.gx-menu>li>button{display:inline-flex;align-items:center;gap:8px;height:100%;font:500 16px/1 var(--texto);letter-spacing:.01em;position:relative}
.gx-menu>li>a::after,.gx-menu>li>button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.gx-menu>li>a:hover::after,.gx-menu>li>button:hover::after,.gx-menu>li>button[aria-expanded="true"]::after,.gx-menu>li>[aria-current]::after{transform:scaleX(1)}
.gx-chev{transition:transform .2s;opacity:.7}
button[aria-expanded="true"]>.gx-chev{transform:rotate(180deg)}
.gx-cta{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;background:var(--tinta);color:var(--marfil)!important;font:600 16px/1 var(--texto);white-space:nowrap;flex:none;border:1px solid var(--tinta);transition:none}
.gx-cta:hover{background:var(--acento);border-color:var(--acento)}
.gx-abrir{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--filete);border-radius:999px;flex:none;transition:border-color .25s}

/* ── Megamenús ── */
/* Megamenú: vidrio claro a todo lo ancho y al ras del menú (estilo iPhone): blanco translúcido, desenfoque profundo con saturación,
   brillo especular en el canto superior, borde de luz y sombra en capas. Tinta un punto más oscura para AA sobre cualquier fondo. */
.gx-mega{position:absolute;left:0;right:0;top:100%;border-radius:0;color:var(--tinta);display:none;isolation:isolate;
 --tinta-2:#435561;--acento:#2F414C;--filete:rgba(47,65,76,.11);
 background:linear-gradient(180deg,rgba(255,255,255,.90) 0,rgba(255,255,255,.84) 100%);
 -webkit-backdrop-filter:blur(40px) saturate(190%) brightness(1.06);backdrop-filter:blur(40px) saturate(190%) brightness(1.06);
 border:0;border-bottom:1px solid rgba(255,255,255,.7);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 24px -12px rgba(20,29,35,.12),0 48px 96px -24px rgba(20,29,35,.30)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gx-mega{background:rgba(255,255,255,.97)}}
.gx-velo{position:fixed;inset:0;z-index:-1;background:rgba(20,29,35,.28);opacity:0;visibility:hidden;transition:opacity .16s ease-out,visibility .16s}
.gx--abierto .gx-velo{opacity:1;visibility:visible}
.gx-mega.abierto{display:block;animation:gx-aparece .16s ease-out}
.gx-mega.abierto.gx-cambio{animation:none}
@keyframes gx-aparece{from{opacity:0}to{opacity:1}}
.gx--quieto,.gx--quieto *,.gx--quieto *::before,.gx--quieto *::after{transition:none!important}
.gx-mega .gx-ancho{display:grid;gap:48px;padding-top:40px;padding-bottom:48px}
.gx-mega-cab{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--filete);padding-bottom:16px;margin-bottom:8px;grid-column:1/-1}
.gx-mega-cab h2{margin:0;font:600 28px/1.2 var(--display);letter-spacing:-.01em}
.gx-mega-cab a{font:600 16px/1 var(--texto);color:var(--acento);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.gx-mega-cab a:hover{text-decoration:underline;text-underline-offset:5px}
.gx-eti{font:600 14px/1.4 var(--texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin:0 0 12px}
/* Portafolio: familias · hoteles · foto */
.gx-mega--port .gx-ancho{grid-template-columns:280px 1fr 320px}
.gx-familias li+li{border-top:1px solid var(--filete)}
.gx-familias button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;text-align:left;font:600 16px/1.3 var(--texto);color:var(--tinta-2);padding-right:8px}
.gx-familias button small{display:block;font:500 14px/1.4 var(--texto);color:var(--tinta-2);margin-top:2px}
.gx-familias button[aria-selected="true"]{color:var(--tinta)}
.gx-familias button[aria-selected="true"] .flecha{opacity:1;transform:none}
.gx-familias .flecha{opacity:0;transform:translateX(-4px);transition:.2s;color:var(--acento)}
.gx-hoteles[hidden]{display:none}
.gx-hoteles ul{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.gx-hoteles li{display:flex}
.gx-hoteles a{display:flex;align-items:flex-start;width:100%;padding:16px 0;border-bottom:1px solid var(--filete);font:500 16px/1.4 var(--texto);text-wrap:pretty}
.gx-hoteles a:hover{color:var(--acento)}
.gx-foto{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--marfil-2)}
.gx-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:transform .6s,opacity .5s ease}
.gx-foto img.vis{opacity:1;z-index:2}
/* mientras llega la primera foto: brillo de carga y sin rótulo */
.gx-foto:not(:has(img.vis)) span{opacity:0}
.gx-foto:not(:has(img.vis)){background:linear-gradient(100deg,var(--marfil-2) 30%,#fff 50%,var(--marfil-2) 70%) 0 0/300% 100%;animation:gx-carga 1.4s linear infinite}
@keyframes gx-carga{from{background-position:100% 0}to{background-position:0 0}}
.gx-foto span{transition:opacity .3s}
.gx-foto img.previa{opacity:1;z-index:1;transition:none}
.gx-foto span{z-index:3}
.gx-foto span b{display:block;font:inherit;color:inherit;text-wrap:balance}
.gx-foto:hover img{transform:scale(1.04)}
.gx-foto span{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 20px;background:linear-gradient(180deg,rgba(20,29,35,0),rgba(20,29,35,.8));color:#fff;font:600 20px/1.3 var(--display)}
.gx-foto span small{display:block;font:500 14px/1.4 var(--texto);color:rgba(255,255,255,.85);margin-top:4px}
/* Inversionistas y Sustentabilidad */
.gx-mega--sec .gx-ancho{grid-template-columns:320px 1fr 320px}
.gx-mega--dos .gx-ancho{grid-template-columns:1fr 400px}
.gx-mega--dos .gx-mini{aspect-ratio:16/10}
.gx-dato{background:var(--marino);color:#fff;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:6px}
.gx-dato .ex{font:600 14px/1 var(--texto);letter-spacing:.08em;color:var(--claro)}
.gx-dato .pr{font:600 40px/1.1 var(--display);letter-spacing:-.01em}
.gx-dato .pr small{font:500 16px/1 var(--texto);color:rgba(255,255,255,.75);margin-left:6px}
.gx-dato .vr{font:500 16px/1.4 var(--texto)}
.gx-dato dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);font:500 14px/1.4 var(--texto)}
.gx-dato dt{color:rgba(255,255,255,.7)}
.gx-dato dd{margin:0;text-align:right}
.gx-dato .hr{font:400 14px/1.4 var(--texto);color:rgba(255,255,255,.7);margin-top:4px}
.gx-enlaces{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-content:start}
.gx-enlaces a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--filete);font:500 16px/1.4 var(--texto);text-wrap:pretty}
.gx-enlaces a svg{flex:none}
.gx-enlaces a svg{color:var(--acento);opacity:0;transform:translateX(-4px);transition:.2s}
.gx-enlaces a:hover{color:var(--acento)}
.gx-enlaces a:hover svg{opacity:1;transform:none}
.gx-enlaces .grupo{grid-column:1/-1;margin-top:16px}
.gx-mini{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;align-self:start}
.gx-mini img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.gx-mini:hover img{transform:scale(1.04)}

/* ── Barra de sección (Inversionistas y Sustentabilidad) ── */
.gx-seccion{margin:0!important;position:sticky;top:73px;z-index:999;background:var(--marfil-2);transition:background .3s;border-bottom:0;font:500 14px/1 var(--texto);color:var(--tinta-2)}
.gx-seccion .gx-ancho{display:flex;align-items:center;gap:32px;min-height:56px;overflow-x:auto;scrollbar-width:none}
.gx-seccion .gx-ancho::-webkit-scrollbar{display:none}
.gx-seccion b{font:600 14px/1 var(--texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);white-space:nowrap}
.gx-seccion a{white-space:nowrap;display:inline-flex;align-items:center;min-height:56px;border-bottom:2px solid transparent}
.gx-seccion a:hover{color:var(--tinta)}
.gx-seccion a[aria-current]{color:var(--tinta);border-bottom-color:var(--tinta)}
/* Sustentabilidad: los 4 comités en un desplegable */
.gx-sec-grupo{display:flex}
.gx-sec-grupo button{display:inline-flex;align-items:center;gap:6px;min-height:56px;padding:0;margin:0;border:0;border-bottom:2px solid transparent;background:none;font:inherit;color:inherit;white-space:nowrap;cursor:pointer}
.gx-sec-grupo button:hover,.gx-sec-grupo--actual button{color:var(--tinta)}
.gx-sec-grupo--actual button{border-bottom-color:var(--tinta)}
.gx-sec-grupo button .gx-chev{transition:transform .25s}
.gx-sec-grupo button[aria-expanded="true"] .gx-chev{transform:rotate(180deg)}
.gx-sec-grupo ul{position:fixed;z-index:1001;min-width:300px;padding:8px!important;background:#fff;border:1px solid var(--filete);border-radius:16px;box-shadow:0 24px 48px -24px rgba(20,29,35,.35)}
.gx-sec-grupo ul a{display:flex;min-height:44px;padding:0 14px;border:0;border-radius:10px;color:var(--tinta-2)}
.gx-sec-grupo ul a:hover,.gx-sec-grupo ul a[aria-current]{background:var(--marfil-2);color:var(--tinta)}

/* el subrayado de la página activa asienta en la orilla de la barra (sin filete debajo que lo separe)
   con barra de sección, encabezado y barra son un solo bloque: la barra es opaca y la sombra va en su borde inferior */
.gx-seccion{box-shadow:inset 0 -1px 0 var(--filete)}
.gx-seccion a[aria-current],.gx-sec-grupo--actual button{position:relative;z-index:1}
.gx-desplazado .gx-seccion{background:var(--marfil-2);box-shadow:inset 0 -1px 0 var(--filete),0 10px 30px -18px rgba(47,65,76,.35)}
body:has(.gx-seccion) .gx--solido .gx-principal{box-shadow:none;border-bottom-color:transparent}
/* sin transparencia: la foto no se asoma entre encabezado y barra, y los dos se leen como un solo bloque */
body:has(.gx-seccion) .gx--solido:not(.gx--abierto) .gx-principal::before{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ── Cajón del teléfono y la tableta ── */
.gx-cajon{position:fixed;inset:0;z-index:2001;background:#fff;color:var(--tinta);display:none;flex-direction:column;font:400 16px/1.5 var(--texto)}
.gx-cajon.abierto{display:flex}
.gx-cajon-cab{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 20px;border-bottom:1px solid var(--filete);flex:none}
.gx-cajon-cab img{height:38px;width:auto;margin-left:-10px}
.gx-cerrar{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--filete);border-radius:999px}
.gx-cajon-cuerpo{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:8px 20px 220px}
.gx-cajon .n1>li{border-bottom:1px solid var(--filete)}
.gx-cajon .n1>li>a,.gx-cajon .n1>li>button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;font:600 20px/1.2 var(--display);text-align:left}
.gx-cajon .sub{display:none;padding:0 0 16px}
.gx-cajon .sub.abierto{display:block}
.gx-cajon .sub .eti{font:600 14px/1.4 var(--texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin:16px 0 4px}
.gx-cajon .sub a{display:flex;align-items:center;min-height:44px;font:500 16px/1.3 var(--texto);color:var(--tinta-2)}
.gx-cajon .sub a.ir{color:var(--acento);font-weight:600}
.gx-cajon-pie{display:flex;flex-direction:column;gap:12px;padding:24px 0}
.gx-cajon-pie .gx-cta{width:100%;justify-content:center}
.gx-cajon-pie .fila{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;color:var(--tinta-2);font:500 16px/1 var(--texto)}
.gx-cajon-pie .fila a{display:inline-flex;align-items:center;min-height:44px}
.gx-cajon-pie .gx-redes a{color:var(--tinta-2);width:44px;height:44px}
.gx-sin-scroll{overflow:hidden}
/* con el menú abierto, el chat y el botón de subir no se enciman */
.gx-sin-scroll #chatLauncher,.gx-sin-scroll #chatMessenger,.gx-sin-scroll #toTop{visibility:hidden!important}

@media (max-width:1180px){.gx-menu{gap:24px}.gx-principal>.gx-ancho{gap:28px}.gx-mega--port .gx-ancho{grid-template-columns:240px 1fr 260px}.gx-mega--sec .gx-ancho{grid-template-columns:280px 1fr 260px}.gx-mega--dos .gx-ancho{grid-template-columns:1fr 320px}}
@media (max-width:1100px){
 .gx-nav{display:none}.gx-abrir{display:inline-flex}.gx-cta{margin-left:auto}
 /* pantallas angostas: teléfono e idioma, como en todo el sitio; la cotización sigue en el menú y la página de Inversionistas */
 .gx-barra .gx-marca,.gx-barra .gx-redes,.gx-barra .gx-sep,.gx-barra .gx-cotiza{display:none}
}
@media (max-width:700px){
 .gx,.gx-cajon,.gx-seccion{--margen:20px}
 .gx-principal>.gx-ancho{height:72px;gap:12px}
 .gx-logo img{height:38px;margin-left:-10px}
 .gx-cta{padding:0 18px}
 .gx-cotiza .hora{display:none}
 .gx-barra .gx-ancho{gap:12px}
}
@media (max-width:360px){.gx-logo img{height:32px;margin-left:-9px}.gx-cta{padding:0 14px}.gx-principal>.gx-ancho{gap:8px}}
.gx-menu>li>button[data-actual]::after{transform:scaleX(1)}

/* Blindaje contra los estilos generales del sitio (style.css pinta de blanco h1–h6 y alinea listas) */
.gx .gx-mega h2,.gx .gx-mega p,.gx .gx-mega a,.gx .gx-mega button{color:var(--tinta);text-align:left}
.gx .gx-mega .gx-eti,.gx .gx-familias button,.gx .gx-familias button small{color:var(--tinta-2)}
.gx .gx-familias button[aria-selected="true"]{color:var(--tinta)}
.gx .gx-mega .gx-mega-cab a,.gx .gx-enlaces a svg,.gx .gx-familias .flecha{color:var(--acento)}
.gx .gx-mega .gx-foto span,.gx .gx-mega .gx-foto span small{color:#fff}
.gx .gx-dato,.gx .gx-dato *{color:#fff}
.gx .gx-dato .ex{color:var(--claro)}
.gx .gx-dato dt,.gx .gx-dato .hr{color:rgba(255,255,255,.72)}
.gx .gx-hoteles a:hover,.gx .gx-enlaces a:hover{color:var(--acento)}
.gx-cajon h1,.gx-cajon h2,.gx-cajon p,.gx-cajon a,.gx-cajon button{color:var(--tinta);text-align:left}
.gx-cajon .sub a,.gx-cajon .sub .eti{color:var(--tinta-2)}
.gx-cajon .sub a.ir{color:var(--acento)}
@media (max-width:360px){.gx-cotiza .var{display:none}}
@media (prefers-reduced-motion:reduce){.gx *,.gx-seccion,.gx-velo{transition:none!important;animation:none!important}}
/* Cotización mientras llega: barras de carga con la forma de cada cifra (sin guiones) */
.gx-dato [data-pr]:empty,.gx-dato dd:empty,.gx-dato [data-var]:empty,.gx-dato [data-hora]:empty,.gx-cotiza [data-pr]:empty{display:inline-block;vertical-align:middle;border-radius:6px;
 background:linear-gradient(100deg,rgba(255,255,255,.10) 30%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.10) 70%) 0 0/300% 100%;animation:gx-carga 1.4s linear infinite}
.gx-dato [data-pr]:empty{width:3.4ch;height:.8em}
.gx-dato [data-var]:empty{width:9ch;height:.9em}
.gx-dato [data-hora]:empty{width:12ch;height:.9em}
.gx-dato dd:empty{width:5ch;height:.9em;justify-self:end}
.gx-cotiza [data-pr]:empty{width:5ch;height:.9em}
@media (prefers-reduced-motion:reduce){.gx-dato :empty,.gx-cotiza :empty{animation:none!important}}
/* el anillo de foco sólo para teclado: Bootstrap del sitio lo pinta también al hacer clic con el ratón */
.gx :focus:not(:focus-visible),.gx-cajon :focus:not(:focus-visible),.gx-seccion :focus:not(:focus-visible){outline:none!important}
/* teléfono: los botones de contacto largos («Contacto Sustentabilidad») pasan a dos líneas para que el menú quepa */
@media (max-width:520px){.gx-principal .gx-cta{white-space:normal;text-align:center;max-width:148px;font-size:14px;line-height:1.15;padding:0 16px}}

/* ── Jerarquía de marca (medida el 16-oct): «Santa Fe» ocupa el 24.6 % del alto del logotipo; a 48 px medía lo mismo
   que las mayúsculas del menú (≈11 px) y el botón tenía su misma altura. Ahora la marca domina: ~1.4× el menú y
   ~70 % del alto de la barra. El margen negativo es el 8.64 % del ancho, para que la tinta alinee con el contenido. ── */
.gx-logo img{height:64px;margin-left:-17.5px}
.gx-cta{height:44px;padding:0 22px}
@media (max-width:1180px){.gx-logo img{height:56px;margin-left:-15.3px}}
@media (min-width:701px){.gx--solido .gx-logo img{height:54px;margin-left:-14.7px}}
@media (max-width:700px){.gx-logo img{height:44px;margin-left:-12px}}
@media (max-width:400px){.gx-logo img{height:40px;margin-left:-10.9px}}
@media (max-width:360px){.gx-logo img{height:34px;margin-left:-9.3px}}

/* Inversionistas y Sustentabilidad: el nombre es enlace a su página y la flecha abre el desplegable (en escritorio también al pasar el cursor) */
.gx-menu>li.gx-dividido{gap:2px}
.gx-menu>li.gx-dividido>.gx-flecha{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:100%;margin-right:-6px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.gx-menu>li.gx-dividido>.gx-flecha::after{display:none}
.gx-menu>li.gx-dividido>.gx-flecha .gx-chev{transition:transform .25s}
.gx-menu>li.gx-dividido>.gx-flecha[aria-expanded="true"] .gx-chev{transform:rotate(180deg)}
.gx-menu>li>a[data-actual]::after,.gx-menu>li.gx-dividido:has(.gx-flecha[aria-expanded="true"])>a::after{transform:scaleX(1)}

/* ── Barra superior CLARA (predeterminada desde el 19-oct). Estudio: IHG usa un tinte de 1.16:1 contra su encabezado
   blanco; Accor, Hilton, Marriott y Hyatt no tienen franja oscura. La #2F414C (10.6:1) era la más pesada.
   La oscura sigue disponible para comparar con ?…&barra=oscura (clase gx--barra-oscura). ── */
.gx:not(.gx--barra-oscura).tr-header{top:-44px}
.gx:not(.gx--barra-oscura) .gx-barra{background:var(--marfil-2);color:var(--tinta-2);font-size:13px;box-shadow:inset 0 -1px 0 rgba(47,65,76,.1)}
.gx:not(.gx--barra-oscura) .gx-barra .gx-ancho{min-height:44px}
.gx:not(.gx--barra-oscura) .gx-tel,.gx:not(.gx--barra-oscura) .gx-marca,.gx:not(.gx--barra-oscura) .gx-cotiza{min-height:44px}
.gx:not(.gx--barra-oscura) .gx-redes a{width:36px;height:36px;color:var(--tinta-2)}
.gx:not(.gx--barra-oscura) .gx-barra a:hover,.gx:not(.gx--barra-oscura) .gx-tel:hover{color:var(--tinta)}
.gx:not(.gx--barra-oscura) .gx-sep{background:rgba(47,65,76,.18)}
.gx:not(.gx--barra-oscura) .gx-cotiza{color:var(--tinta)}
.gx:not(.gx--barra-oscura) .gx-cotiza .sim small{color:var(--tinta-2)}
.gx:not(.gx--barra-oscura) .gx-cotiza .pr{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.gx:not(.gx--barra-oscura) .gx-cotiza .var{color:var(--tinta-2);font-variant-numeric:tabular-nums}
.gx:not(.gx--barra-oscura) .gx-cotiza .var.baja{color:#A33A2B}
.gx:not(.gx--barra-oscura) .gx-cotiza .var.sube{color:#1D6B45}
.gx:not(.gx--barra-oscura) .gx-cotiza .hora{color:#5E717D}
.gx:not(.gx--barra-oscura) .gx-cotiza [data-pr]:empty{background:linear-gradient(100deg,rgba(47,65,76,.08) 30%,rgba(47,65,76,.18) 50%,rgba(47,65,76,.08) 70%) 0 0/300% 100%}
/* portada en reposo: la barra sigue transparente sobre la foto, con texto blanco y sin línea */
.gx--foto:not(.gx--solido):not(.gx--abierto):not(.gx--barra-oscura) .gx-barra{background:transparent;color:rgba(255,255,255,.86);box-shadow:none}
.gx--foto:not(.gx--solido):not(.gx--abierto):not(.gx--barra-oscura) .gx-barra a:hover{color:#fff}
.gx--foto:not(.gx--solido):not(.gx--abierto):not(.gx--barra-oscura) .gx-redes a{color:rgba(255,255,255,.82)}
.gx--foto:not(.gx--solido):not(.gx--abierto):not(.gx--barra-oscura) .gx-sep{background:rgba(255,255,255,.24)}

/* ── Selector de idioma: la píldora líquida de begoincabo.com (mismas medidas, curva y animación) ──
   Base: sobre fondo claro (barra #F2F7FA, cajón blanco) con la píldora en #2F414C.
   Sobre fondo oscuro (foto de la portada en reposo, tema oscuro, barra oscura): cápsula de vidrio y píldora blanca. */
.gx-langtoggle{position:relative;display:inline-flex;align-items:center;align-self:center;box-sizing:border-box;height:32px;border:0;border-radius:999px;padding:4px;background:rgba(47,65,76,.08)}
.gx-lang-pill{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;background:#2F414C;box-shadow:0 2px 8px rgba(0,0,0,.12);translate:0 0;transition:translate .34s cubic-bezier(.45,1.5,.5,1);will-change:translate,scale}
.gx-langtoggle[data-active="es"] .gx-lang-pill{translate:100% 0}
.gx-lang-pill.gx-sliding{animation:gx-liquid .34s ease-out}
@keyframes gx-liquid{0%{scale:1 1}45%{scale:1.28 1.05}100%{scale:1 1}}
.gx-lang-opt{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:24px;background:none;border:0;cursor:pointer;font:600 10.5px/1 var(--texto);text-transform:uppercase;letter-spacing:.1em;color:#435561!important;padding:0 14px;text-decoration:none!important;transition:color .22s ease}
.gx-langtoggle[data-active="en"] .gx-lang-opt[data-lang="en"],.gx-langtoggle[data-active="es"] .gx-lang-opt[data-lang="es"]{color:#fff!important}
.gx-lang-opt:focus-visible{outline:2px solid #2F414C;outline-offset:3px;border-radius:999px}
/* sobre fondo oscuro */
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra .gx-langtoggle,:root[data-tema=oscuro] .gx-langtoggle,.gx--barra-oscura .gx-barra .gx-langtoggle{
 background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2)}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra .gx-lang-pill,:root[data-tema=oscuro] .gx-lang-pill,.gx--barra-oscura .gx-barra .gx-lang-pill{background:rgba(255,255,255,.95)}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra .gx-lang-opt,:root[data-tema=oscuro] .gx-lang-opt,.gx--barra-oscura .gx-barra .gx-lang-opt{color:rgba(255,255,255,.74)!important}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra .gx-langtoggle[data-active] .gx-lang-opt[aria-current],:root[data-tema=oscuro] .gx-langtoggle[data-active] .gx-lang-opt[aria-current],.gx--barra-oscura .gx-barra .gx-langtoggle[data-active] .gx-lang-opt[aria-current]{color:#232C37!important}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra .gx-lang-opt:focus-visible,:root[data-tema=oscuro] .gx-lang-opt:focus-visible,.gx--barra-oscura .gx-barra .gx-lang-opt:focus-visible{outline-color:#fff}
/* teléfono y tableta: área de toque de 44 px aunque la cápsula se vea de 31 */
@media (max-width:1100px){.gx-lang-opt::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}}
@media (prefers-reduced-motion:reduce){.gx-lang-pill{transition:none}.gx-lang-pill.gx-sliding{animation:none}}

/* ── Portafolio (21-oct): las fotos son panorámicas 3:1; el recuadro pasa de 4:5 vertical a 3:2 horizontal en una columna de 420 y cada foto se encuadra en el edificio del hotel ── */
.gx-mega--port .gx-ancho{grid-template-columns:280px 1fr 420px}
@media (max-width:1180px){.gx-mega--port .gx-ancho{grid-template-columns:240px 1fr 340px}}
.gx-mega--port .gx-foto{aspect-ratio:3/2;align-self:start}
.gx-mega--port .gx-foto img[src*="/hccl_slider."]{object-position:60% 50%}
.gx-mega--port .gx-foto img[src*="/hgi_mty_slider."]{object-position:70% 50%}
.gx-mega--port .gx-foto img[src*="/hp_ags_slider."]{object-position:60% 50%}
.gx-mega--port .gx-foto img[src*="/hpvr_slider."]{object-position:50% 50%}
.gx-mega--port .gx-foto img[src*="/hpvr_h_slider."]{object-position:40% 50%}
.gx-mega--port .gx-foto img[src*="/hyatt_regency_mc_slider."]{object-position:70% 50%}
.gx-mega--port .gx-foto img[src*="/ibis_irapuato_slider."]{object-position:30% 50%}
.gx-mega--port .gx-foto img[src*="/kba_slider."]{object-position:60% 50%}
.gx-mega--port .gx-foto img[src*="/kcun_slider."]{object-position:100% 50%}
.gx-mega--port .gx-foto img[src*="/kgcu_slider."]{object-position:16% 50%}
.gx-mega--port .gx-foto img[src*="/kgins_slider."]{object-position:60% 50%}
.gx-mega--port .gx-foto img[src*="/kglc_slider."]{object-position:20% 50%}
.gx-mega--port .gx-foto img[src*="/kgnv_slider."]{object-position:70% 50%}
.gx-mega--port .gx-foto img[src*="/kgsnmiguel_slider."]{object-position:70% 50%}
.gx-mega--port .gx-foto img[src*="/kixt_slider."]{object-position:40% 50%}
.gx-mega--port .gx-foto img[src*="/kmty_slider."]{object-position:0% 50%}
.gx-mega--port .gx-foto img[src*="/kpvr_slider."]{object-position:86% 50%}
.gx-mega--port .gx-foto img[src*="/ksmb_slider."]{object-position:10% 50%}
.gx-mega--port .gx-foto img[src*="/ku_cdmx_slider."]{object-position:50% 50%}
.gx-mega--port .gx-foto img[src*="/ku_mty_slider."]{object-position:90% 50%}
.gx-mega--port .gx-foto img[src*="/kuc_slider."]{object-position:60% 50%}
.gx-mega--port .gx-foto img[src*="/kucj_slider."]{object-position:50% 50%}
.gx-mega--port .gx-foto img[src*="/kug_slider."]{object-position:80% 50%}
.gx-mega--port .gx-foto img[src*="/mahekal_slider."]{object-position:50% 50%}
.gx-mega--port .gx-foto img[src*="/secrets_tulum_slider."]{object-position:46% 50%}
/* con barra de sección: el fondo del header cubre también su filete de 1px (transparente al desplazarse), sin rendija entre las dos barras */
body:has(.gx-seccion) .gx--solido .gx-principal::before{bottom:-1px}

/* ═════ 2 · pie.css ═════ */
/*! Diseño y desarrollo web: Xaime Nieto · https://xaimenieto.com · contacto@xaimenieto.com · © 2026 */
/* Portada propuesta, parte 3 · vacantes, marcas, distintivos y pie (vista privada). Mismo sistema que portada.css */
.pz,.pz-pie{--marfil:#FFFFFF;--marfil-2:#F2F7FA;--tinta:#2F414C;--tinta-2:#435561;--filete:#DDE6EC;--acento:#2F414C;--claro:#A0C4DA;--filete-osc:rgba(255,255,255,.12);
 --margen:32px;--display:"Red Hat Display",system-ui,sans-serif;--texto:"Red Hat Text",system-ui,sans-serif;--suave:cubic-bezier(.22,.61,.36,1)}
.pz *,.pz-pie *{box-sizing:border-box}
.pz h2,.pz h3,.pz p,.pz ul,.pz figure,.pz-pie h3,.pz-pie p,.pz-pie ul,.pz-pie address{margin:0;padding:0}
.pz ul,.pz-pie ul{list-style:none}
.pz a,.pz-pie a{text-decoration:none}
.pz .px-ancho,.pz-pie .px-ancho{max-width:calc(1280px + 2*var(--margen));margin:0 auto;padding:0 var(--margen);width:100%}
.pz .px-sr,.pz-pie .px-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pz :focus-visible,.pz-pie :focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px}

.pz-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;
 background:#fff;color:var(--tinta)!important;font:600 16px/1 var(--texto);transition:background-color .25s,transform .25s var(--suave)}
.pz-boton svg{transition:transform .25s var(--suave)}
.pz-boton:hover svg{transform:translate(2px,-2px)}
.pz-boton--oscuro{background:var(--tinta);color:#fff!important}
.pz-boton--oscuro:hover{background:var(--acento)}

/* vacantes: tarjeta dividida, texto y foto profesional */
.pz-vacantes{background:var(--marfil);padding:clamp(64px,7vw,104px) 0}
.pz-vac2{display:grid;grid-template-columns:5fr 7fr;align-items:stretch;background:var(--tinta);border-radius:28px;overflow:hidden;
 box-shadow:0 1px 2px rgba(20,29,35,.04),0 24px 56px -32px rgba(20,29,35,.28)}
.pz-vac2-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:clamp(40px,5vw,80px)}
.pz-vac2-txt h2{font:600 clamp(32px,3.4vw,48px)/1.1 var(--display)!important;letter-spacing:-.015em;color:#fff!important;text-transform:none!important}
.pz-vac2-txt p{font:400 20px/1.55 var(--texto);color:rgba(255,255,255,.86)!important;text-wrap:balance}
/* el azul cielo como acento sobre el gris oscuro, como lo usa la marca */
.pz-vac2-txt p br{display:none}
.pz-vac2-txt .pz-boton{margin-top:14px}
.pz-vac2-foto{position:relative;min-height:420px;overflow:hidden}
.pz-vac2-foto picture,.pz-vac2-foto img{position:absolute;inset:0;width:100%;height:100%}
.pz-vac2-foto img{object-fit:cover;object-position:40% 50%;transition:transform 1.2s var(--suave)}
.pz-vac2:hover .pz-vac2-foto img{transform:scale(1.03)}

/* marcas y distintivos: logotipos en gris pizarra de la marca sobre teselas claras */
.pz-marcas2{background:#fff;padding:0 0 clamp(64px,7vw,104px)}
.pz-eti{font:600 14px/1.4 var(--texto)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)!important;margin:0 0 20px!important}
.pz-eti--dist{margin-top:56px!important}
.pz-teselas{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.pz-teselas li{height:132px;border-radius:18px;background:var(--marfil-2);display:flex;align-items:center;justify-content:center;padding:22px 26px;
 transition:background-color .3s,box-shadow .3s,transform .3s var(--suave)}
.pz-teselas li:hover{background:#fff;box-shadow:0 0 0 1px var(--filete),0 18px 36px -22px rgba(20,29,35,.35);transform:translateY(-2px)}
.pz-teselas img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pz-teselas--dist{grid-template-columns:repeat(4,1fr);max-width:calc(4*(100% - 5*12px)/6 + 3*12px)}
.pz-teselas--dist li{height:120px}

/* pie claro: el boletín arriba como protagonista */
.pz-pie{background:var(--marfil-2);color:var(--tinta-2);font:400 16px/1.6 var(--texto);padding:clamp(64px,7vw,96px) 0 40px}
.pz-pie h3{font:600 14px/1.4 var(--texto)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)!important;margin-bottom:16px!important}
.pz-pie a{color:var(--tinta-2)!important;transition:color .2s}
.pz-pie a:hover{color:var(--tinta)!important}
.pz-pie-arriba{padding-bottom:clamp(48px,6vw,72px);border-bottom:1px solid var(--filete)}
.pz-pie-boletin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,1fr);gap:24px 64px;align-items:end}
.pz-pie-boletin h3{grid-column:1/-1;margin-bottom:0!important}
.pz-pie-boletin p{font:500 clamp(24px,2.4vw,34px)/1.25 var(--display);letter-spacing:-.01em;color:var(--tinta);text-wrap:balance}
.pz-pie-boletin strong{font-weight:600}
.pz-form{display:flex;gap:8px;flex-wrap:wrap;position:relative}
.pz-input{flex:1 1 220px;height:56px;border-radius:999px;border:1px solid var(--filete);background:#fff;color:var(--tinta);
 padding:0 24px;font:400 16px/1 var(--texto);outline:none;transition:border-color .2s,box-shadow .2s}
.pz-input::placeholder{color:#5E717D}
.pz-input:hover{border-color:#BFCFDA}
.pz-input:focus-visible{border-color:var(--acento);box-shadow:0 0 0 4px rgba(47,65,76,.14)}
.pz-form .pz-boton{height:56px}
.pz-trampa{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.pz-form-msg{flex-basis:100%;font:500 14px/1.4 var(--texto);margin-top:4px!important}
.pz-pie-rejilla{display:grid;grid-template-columns:1.1fr 1fr 1fr 2fr;gap:48px;padding:56px 0}
.pz-pie-logo{display:inline-block}
.pz-pie-logo img{width:180px;height:auto;display:block;margin-left:-12px}
.pz-lista{display:flex;flex-direction:column;gap:6px}
.pz-lista a{display:inline-flex;align-items:center;gap:10px;min-height:32px}
.pz-lista svg{color:var(--acento);flex:none}
.pz-lista--dos{display:grid;grid-template-columns:1fr 1fr;gap:6px 32px}
.pz-pie address{font-style:normal;line-height:1.75}
.pz-pie-abajo{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding-top:32px;border-top:1px solid var(--filete)}
.pz-redes{display:flex;gap:8px}
.pz-redes{gap:4px;margin-left:-12px}
.pz-redes a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--tinta-2)!important;transition:color .2s,transform .2s var(--suave)}
.pz-redes a:hover{color:var(--tinta)!important;transform:translateY(-1px)}
.pz-redes svg{width:18px;height:18px}
.pz-legal{display:flex;flex-direction:column;gap:6px;font:400 14px/1.6 var(--texto);color:var(--tinta-2)}
.pz-legal p{color:var(--tinta-2)!important}
.pz-legal p:first-child{color:var(--tinta)!important}
.pz-legal sup{font-size:.7em}
.pz-sello{min-height:32px}

@media (max-width:1100px){
 .pz-teselas{grid-template-columns:repeat(4,1fr)}
 .pz-teselas--dist{max-width:none}
 .pz-pie-rejilla{grid-template-columns:1fr 1fr 1fr}
 .pz-col--logo{grid-column:1/-1}
 .pz-col--ancha{grid-column:1/-1}
}
@media (max-width:900px){
 .pz-vac2{grid-template-columns:1fr}
 .pz-vac2-foto{min-height:0;aspect-ratio:4/3;order:-1}
 .pz-pie-boletin{grid-template-columns:1fr}
}
@media (max-width:800px){
 .pz-pie-abajo{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:700px){
 .pz,.pz-pie{--margen:20px}
 .pz-vac2{border-radius:20px}
 .pz-vac2-txt p{font-size:16px;text-wrap:pretty}
 .pz-vac2-txt p br{display:none}
 .pz-teselas,.pz-teselas--dist{grid-template-columns:repeat(2,1fr)}
 .pz-teselas li{height:104px;padding:18px 20px}
 .pz-pie-rejilla{grid-template-columns:1fr;gap:36px}
 .pz-lista--dos{grid-template-columns:1fr}
 .pz-form .pz-boton{width:100%}
}
/* el anillo de foco sólo para teclado: Bootstrap del sitio lo pinta también al hacer clic con el ratón */
.pz :focus:not(:focus-visible),.pz-pie :focus:not(:focus-visible){outline:none!important}

/* ── Vacantes (opción B, elegida 16-oct): la foto llena la tarjeta y el texto va en un panel de vidrio blanco ── */
.pz-vac2--b{display:block;position:relative;min-height:clamp(440px,38vw,520px);isolation:isolate;background:var(--tinta)}
.pz-vac2--b .pz-vac2-foto{position:absolute!important;inset:0;min-height:0;aspect-ratio:auto!important;height:100%;z-index:-2}
.pz-vac2--b .pz-vac2-foto img{object-position:60% 50%}
.pz-vac2--b .pz-vac2-txt{position:absolute;left:clamp(20px,3vw,40px);top:50%;transform:translateY(-50%);max-width:480px;
 padding:clamp(28px,3vw,44px);border-radius:24px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.7);
 -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 30px 60px -30px rgba(20,29,35,.45)}
.pz-vac2--b .pz-vac2-txt h2{color:var(--tinta)!important}
.pz-vac2--b .pz-vac2-txt p{color:var(--tinta-2)!important}
.pz-vac2--b .pz-boton--oscuro{background:var(--tinta);color:#fff!important}
.pz-vac2--b .pz-boton--oscuro:hover{background:var(--tinta-2)}
.pz-vac2--b :focus-visible{outline-color:var(--tinta)}
@media (max-width:700px){
 .pz-vac2--b{min-height:520px}
 .pz-vac2--b .pz-vac2-txt{left:16px;right:16px;top:auto;bottom:16px;transform:none}
}

/* marcas y distintivos centrados: las filas incompletas quedan simétricas en lugar de dejar un hueco a la derecha */
.pz-marcas2 .pz-eti{text-align:center}
.pz-teselas,.pz-teselas--dist{display:flex;flex-wrap:wrap;justify-content:center;max-width:none;margin-left:auto;margin-right:auto}
.pz-teselas li{flex:0 0 calc((100% - 5 * 12px) / 6)}
@media (max-width:1100px){.pz-teselas li{flex-basis:calc((100% - 3 * 12px) / 4)}}
@media (max-width:700px){.pz-teselas li{flex-basis:calc((100% - 12px) / 2)}}

/* ═════ 3 · tema.css ═════ */
/*! Diseño y desarrollo web: Xaime Nieto · https://xaimenieto.com · contacto@xaimenieto.com · © 2026 */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Tema claro / oscuro de la propuesta (vista privada) · 19-oct
   El tema lo fija un script en línea al principio del <head> (data-tema="claro|oscuro" en <html>).
   Sólo colores oficiales: #2F414C · #435561 · #A0C4DA · blanco · tinte #F2F7FA · fondo #232C37 del sitio.
   Oscuro: fondo #232C37, secciones y tarjetas #2F414C, superficie #435561 sólo donde hace falta;
   texto blanco, secundario al 72 %, acento #A0C4DA (botones con texto #232C37).
   Las reglas de oscuro llevan «:root[data-tema=oscuro] body» para ganar a las !important de cada hoja.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{color-scheme:light;
 --t-fondo:#fff;--t-fondo-2:#F2F7FA;--t-superficie:#fff;--t-texto:#2F414C;--t-texto-2:#435561;--t-filete:#DDE6EC;
 --t-boton:#2F414C;--t-boton-texto:#fff;--t-boton-hover:#435561}
:root[data-tema=oscuro]{color-scheme:dark;
 --t-fondo:#232C37;--t-fondo-2:#2F414C;--t-superficie:#2F414C;--t-texto:#fff;--t-texto-2:rgba(255,255,255,.72);--t-filete:rgba(255,255,255,.12);
 --t-boton:#A0C4DA;--t-boton-texto:#232C37;--t-boton-hover:#fff}
/* al cambiar de tema no se animan colores */
.tema-sin-transicion,.tema-sin-transicion *,.tema-sin-transicion *::before,.tema-sin-transicion *::after{transition:none!important}

/* ── selector de tema (los dos temas) ── */
.gx-tema{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px}
.gx-tema button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer;opacity:.78;transition:background-color .2s,opacity .2s}
.gx-tema button:hover{opacity:1}
.gx-tema button[aria-pressed="true"]{opacity:1;background:rgba(47,65,76,.1);color:var(--tinta,#2F414C)}
.gx-tema button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra .gx-tema button[aria-pressed="true"]{background:rgba(255,255,255,.18);color:#fff}
.gx-cajon .gx-tema{gap:6px;padding:0}
.gx-cajon .gx-tema button{width:44px;height:44px;opacity:1;color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--filete)}
.gx-cajon .gx-tema button[aria-pressed="true"]{background:var(--tinta);color:var(--marfil);box-shadow:none}
@media (max-width:1100px){.gx-barra .gx-tema{display:none}}
.gx-cajon .gx-tema-fila{justify-content:flex-start}

/* ═════════════════════════════ OSCURO ═════════════════════════════ */
:root[data-tema=oscuro],:root[data-tema=oscuro] body{background:#232C37!important}

/* variables de cada componente: el mismo sistema, invertido */
:root[data-tema=oscuro] body :is(.gx,.gx-mega,.gx-cajon,.gx-saltar,.gx-seccion,.px-hero,.px-marcas,.px-central,.px-dialogo,.pz,.pz-pie,.pi,.ph,.pc,.ia,.ct,.irp){
 --marfil:#232C37;--marfil-2:#2F414C;--blanco:#232C37;--tinta:#fff;--tinta-2:rgba(255,255,255,.72);--filete:rgba(255,255,255,.12);
 --acento:#A0C4DA;--marino:#2F414C}

/* botones: relleno #A0C4DA con texto #232C37 (7.9:1); los invertidos, contorno claro */
:root[data-tema=oscuro] body :is(.gx-cta,.px-boton,.pz-boton--oscuro,.ph-btn,.pc .btn_1,.pc .gc-bylaws,.pc .cf-submit,.pc button[type=submit],.pc input[type=submit],.ct-enviar,.gx-saltar){
 background:#A0C4DA!important;color:#232C37!important;border-color:#A0C4DA!important}
:root[data-tema=oscuro] body :is(.gx-cta,.px-boton,.pz-boton--oscuro,.ph-btn,.pc .btn_1,.pc .gc-bylaws,.pc .cf-submit,.ct-enviar):hover{background:#fff!important;border-color:#fff!important}
:root[data-tema=oscuro] body :is(.px-boton--claro,.pz-boton,.ph-btn--claro){background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)!important}
:root[data-tema=oscuro] body :is(.px-boton--claro,.pz-boton,.ph-btn--claro):hover{background:rgba(255,255,255,.08)!important}
:root[data-tema=oscuro] body .pz-boton.pz-boton--oscuro{box-shadow:none!important}

/* ── encabezado ── */
:root[data-tema=oscuro] body .gx-principal::before,
:root[data-tema=oscuro] body:has(.gx-seccion) .gx--solido:not(.gx--abierto) .gx-principal::before{background:#232C37}
:root[data-tema=oscuro] body .gx--solido .gx-principal::before{background:rgba(35,44,55,.94)}
:root[data-tema=oscuro] body .gx--abierto .gx-principal::before{background:#232C37}
:root[data-tema=oscuro] body .gx--solido .gx-principal{border-bottom-color:rgba(255,255,255,.08)}
:root[data-tema=oscuro] body .gx-logo .claro{opacity:1}
:root[data-tema=oscuro] body .gx-logo .oscuro{opacity:0}
/* barra superior: #2F414C contra el encabezado #232C37, un salto mínimo (1.4:1), no una franja */
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-barra{background:#2F414C;color:rgba(255,255,255,.78);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-barra a:hover,:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-tel:hover{color:#fff}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-redes a{color:rgba(255,255,255,.72)}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-sep{background:rgba(255,255,255,.18)}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza,:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza .pr{color:#fff}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza .sim small,:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza .var,:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza .hora{color:rgba(255,255,255,.72)}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza .var.baja{color:#F2B8A8}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza .var.sube{color:#9FE0B8}
:root[data-tema=oscuro] body .gx:not(.gx--barra-oscura) .gx-cotiza [data-pr]:empty{background:linear-gradient(100deg,rgba(255,255,255,.10) 30%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.10) 70%) 0 0/300% 100%}
:root[data-tema=oscuro] body .gx-tema button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff}
/* sobre la foto de la portada en reposo: igual que en claro */
:root[data-tema=oscuro] body .gx--foto:not(.gx--solido):not(.gx--abierto) .gx-barra{background:transparent;box-shadow:none}
:root[data-tema=oscuro] body .gx--foto:not(.gx--solido):not(.gx--abierto) .gx-principal::before{background:transparent}
:root[data-tema=oscuro] body .gx--foto:not(.gx--solido):not(.gx--abierto) .gx-cta{background:#fff!important;color:#232C37!important;border-color:#fff!important}
/* megamenús, tarjeta BMV, desplegable de comités, barra de sección y cajón */
:root[data-tema=oscuro] body :is(.gx-mega,.gx-cajon,.gx-sec-grupo ul){background:#232C37}
:root[data-tema=oscuro] body .gx-mega{border-color:rgba(255,255,255,.08)}
:root[data-tema=oscuro] body .gx-dato{background:#2F414C}
:root[data-tema=oscuro] body .gx-seccion,:root[data-tema=oscuro] body .gx-desplazado .gx-seccion{background:#2F414C;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
:root[data-tema=oscuro] body .gx-desplazado .gx-seccion{box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 10px 30px -18px rgba(0,0,0,.6)}
:root[data-tema=oscuro] body .gx-sec-grupo ul{border-color:rgba(255,255,255,.12)}
:root[data-tema=oscuro] body .gx-sec-grupo ul a:hover,:root[data-tema=oscuro] body .gx-sec-grupo ul a[aria-current]{background:#2F414C}
:root[data-tema=oscuro] body .gx-velo{background:rgba(10,14,18,.55)}

/* ── portada ── */
:root[data-tema=oscuro] body .px-central,:root[data-tema=oscuro] body .px-marcas{background:#232C37}
:root[data-tema=oscuro] body .px-marcas img{filter:brightness(0) invert(1);opacity:.82}
:root[data-tema=oscuro] body .px-marcas::before{background:linear-gradient(90deg,#232C37,rgba(35,44,55,0))!important}
:root[data-tema=oscuro] body .px-marcas::after{background:linear-gradient(270deg,#232C37,rgba(35,44,55,0))!important}
:root[data-tema=oscuro] body :is(.px-tarjeta,.px-dos-tarjeta){background:#2F414C;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -40px rgba(0,0,0,.7)}
:root[data-tema=oscuro] body .px-sec:nth-of-type(even) :is(.px-tarjeta,.px-dos-tarjeta),:root[data-tema=oscuro] body .px-dos .px-dos-tarjeta{background:#232C37}
:root[data-tema=oscuro] body .px-titulo span{background-image:linear-gradient(transparent 62%,rgba(160,196,218,.32) 62%)}
/* mapa: mar en #2F414C, México en blanco al 90 %, pines oscuros con etiqueta legible */
:root[data-tema=oscuro] body .px-mapa-tarjeta{background:#435561}
:root[data-tema=oscuro] body .px-pin{background:#232C37;color:#fff;border-color:#fff}
:root[data-tema=oscuro] body .px-pin:has(span:empty)::before{background:#232C37;border-color:#fff}
:root[data-tema=oscuro] body :is(.px-mapa--foco .px-pin--on,.px-pin--sel){background:#A0C4DA;color:#232C37}
:root[data-tema=oscuro] body :is(.px-mapa--foco .px-pin--on:has(span:empty),.px-pin--sel:has(span:empty))::before{background:#A0C4DA}
:root[data-tema=oscuro] body .px-pin em{background:#232C37;color:#fff}
:root[data-tema=oscuro] body .px-mapa-cifras b,:root[data-tema=oscuro] body .px-mapa-cifras span{color:#fff}
:root[data-tema=oscuro] body .px-dest-hoteles img{background:#2F414C}
:root[data-tema=oscuro] body .px-cine-circulo{background:#fff;color:#232C37}
:root[data-tema=oscuro] body .px-dialogo{background:#232C37}

/* ── vacantes, marcas, pie ── */
:root[data-tema=oscuro] body .pz-vacantes,:root[data-tema=oscuro] body .pz-marcas2{background:#232C37}
:root[data-tema=oscuro] body .pz-vac2--b .pz-vac2-txt{background:rgba(35,44,55,.8);border-color:rgba(255,255,255,.12)}
:root[data-tema=oscuro] body .pz-teselas li{background:#2F414C}
:root[data-tema=oscuro] body .pz-teselas li:hover{background:#435561;box-shadow:none}
:root[data-tema=oscuro] body .pz-teselas img{filter:brightness(0) invert(1);opacity:.88}
:root[data-tema=oscuro] body .pz-pie{background:#2F414C}
:root[data-tema=oscuro] body .pz-input{background:#232C37;border-color:rgba(255,255,255,.4);color:#fff}
:root[data-tema=oscuro] body .pz-input::placeholder{color:rgba(255,255,255,.62)}
:root[data-tema=oscuro] body .pz-input:hover{border-color:rgba(255,255,255,.6)}
:root[data-tema=oscuro] body .pz-pie-logo img{filter:brightness(0) invert(1)}

/* ── interiores ── */
:root[data-tema=oscuro] body :is(.ph,.pc,.ia,.ct,.irp){background:#232C37}
:root[data-tema=oscuro] body :is(.ph-ficha,.ct-form,.pc .fi-year-card,.pc .gc-board,.pc .ac-card,.pc .bmv-contact-card,.pc .cf-form-wrap,.irp .ir-card,.ph-amen li,.ia-tarjeta,.ct-tarjeta){background:#2F414C!important;border-color:rgba(255,255,255,.1)!important;box-shadow:none!important}
:root[data-tema=oscuro] body :is(.ia-tarjeta:hover,.ia-tarjeta[aria-current],.pc .ac-card:hover){background:#435561!important}
:root[data-tema=oscuro] body .ia-tarjeta[aria-current]{box-shadow:inset 0 0 0 1.5px #A0C4DA!important}
:root[data-tema=oscuro] body :is(.ia-ico,.pc .pr-count,.pc .pr-pdf,.irp .ir-download__icon,.irp .ir-event__icon,.irp .bmv-ticker__exchange,.irp .ir-downloads__count){background:#232C37!important;color:#fff!important}
:root[data-tema=oscuro] body :is(.pc .fi-quarter,.pc .pr-pill,.pc .gc-legend,.ph-desc li::before,.pc .gc-badge){background-color:#232C37!important}
:root[data-tema=oscuro] body .pc .fi-quarter.fi-annual{background:#2F414C!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important}
:root[data-tema=oscuro] body :is(.pc .fi-doc:hover,.irp .ir-download:hover,.pc .pr-item:hover,.pc .gc-member:hover){background:#435561!important}
:root[data-tema=oscuro] body .pc .pr-pill.pr-active{background:#A0C4DA!important;color:#232C37!important}
:root[data-tema=oscuro] body .pc .pr-pill.pr-active .pr-count{background:rgba(35,44,55,.2)!important;color:#232C37!important}
:root[data-tema=oscuro] body .pc .pr-item:hover .pr-pdf{background:#A0C4DA!important;color:#232C37!important}
:root[data-tema=oscuro] body .pc .gc-badge-p{background:#A0C4DA!important;color:#232C37!important}
:root[data-tema=oscuro] body .pc .gc-badge-ci{background:#435561!important;color:#fff!important}
:root[data-tema=oscuro] body .ph-desc li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0C4DA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")!important}
:root[data-tema=oscuro] body :is(.pc .fi-empty,.pc .cf-input::placeholder,.ct-campo input::placeholder,.ct-campo textarea::placeholder){color:rgba(255,255,255,.62)!important}
:root[data-tema=oscuro] body :is(.ct-campo input,.ct-campo textarea,.pc .cf-input,.pc .form-control){background:#232C37!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important}
:root[data-tema=oscuro] body :is(.ct-campo input,.ct-campo textarea,.pc .cf-input,.pc .form-control):focus{border-color:#A0C4DA!important;box-shadow:0 0 0 4px rgba(160,196,218,.25)!important}
:root[data-tema=oscuro] body #message-contact{background:#2F414C;color:#fff}
:root[data-tema=oscuro] body .ct-mapa,:root[data-tema=oscuro] body .pc iframe{filter:brightness(.9)}
:root[data-tema=oscuro] body .irp .bmv-ticker--down .bmv-ticker__change,:root[data-tema=oscuro] body .irp .bmv-ticker--down .bmv-ticker__change-pct{color:#F2B8A8}
:root[data-tema=oscuro] body .irp .bmv-ticker--up .bmv-ticker__change,:root[data-tema=oscuro] body .irp .bmv-ticker--up .bmv-ticker__change-pct{color:#9FE0B8}
:root[data-tema=oscuro] body .irp .bmv-ticker__icon{filter:brightness(0) invert(1)}
:root[data-tema=oscuro] body .irp .ir-download__badge{background:#A0C4DA!important;color:#232C37!important}
:root[data-tema=oscuro] body .ph-todas{background:rgba(35,44,55,.92);color:#fff}
:root[data-tema=oscuro] body .ph-foto{background:#2F414C}

/* ── aviso y preferencias de cookies: colores oficiales en los dos temas ── */
:root .gsf-cc{--gsf-cc-bg:#fff;--gsf-cc-bg-alt:#F2F7FA;--gsf-cc-text:#2F414C;--gsf-cc-text-muted:#435561;--gsf-cc-accent:#2F414C;--gsf-cc-accent-hover:#435561;--gsf-cc-accent-text:#fff;
 --gsf-cc-border:#DDE6EC;--gsf-cc-border-strong:#435561;--gsf-cc-overlay:rgba(20,29,35,.55)}
:root[data-tema=oscuro] .gsf-cc{--gsf-cc-bg:#2F414C;--gsf-cc-bg-alt:#232C37;--gsf-cc-text:#fff;--gsf-cc-text-muted:rgba(255,255,255,.76);--gsf-cc-accent:#A0C4DA;--gsf-cc-accent-hover:#fff;--gsf-cc-accent-text:#232C37;
 --gsf-cc-border:rgba(255,255,255,.12);--gsf-cc-border-strong:rgba(255,255,255,.5);--gsf-cc-overlay:rgba(10,14,18,.7)}
:root[data-tema=oscuro] .gsf-cc .gsf-cc-toggle input:disabled + .gsf-cc-toggle-track::before{background:#435561}

/* ── botón de subir de la plantilla ── */
:root #toTop{background-color:#2F414C;color:#fff}
:root[data-tema=oscuro] body #toTop{background-color:#A0C4DA;color:#232C37}

/* iframes de terceros (chat, mapas, video): su documento es claro; si heredan el esquema oscuro el navegador les pinta
   un fondo opaco (la «píldora blanca» del chat). Se les deja el esquema claro para que conserven su transparencia. */
:root[data-tema=oscuro] iframe{color-scheme:light}
/* distintivos: sellos de certificación a color (uno con fondo blanco); en oscuro van sobre tesela clara, sin invertir */
:root[data-tema=oscuro] body .pz-teselas--dist li{background:#F2F7FA}
:root[data-tema=oscuro] body .pz-teselas--dist li:hover{background:#fff}
:root[data-tema=oscuro] body .pz-teselas--dist img{filter:none;opacity:1}

/* barra oscura de comparación (&barra=oscura) en cualquier tema: el botón activo va en blanco sobre la franja #2F414C */
.gx--barra-oscura .gx-barra .gx-tema button{color:rgba(255,255,255,.82)}
.gx--barra-oscura .gx-barra .gx-tema button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff}
/* clima de la ficha en oscuro: casillas sobre el fondo, «Hoy» y la unidad activa en acento, trazos en acento */
:root[data-tema=oscuro] body .ph-clima{--c-trazo:#A0C4DA;--c-hoy:#A0C4DA;--c-hoy-t:#232C37;--c-dia:#232C37}
:root[data-tema=oscuro] body .ph .ph-clima-dias li:first-child{--c-trazo:#232C37}
:root[data-tema=oscuro] body .ph-clima-flecha{box-shadow:0 2px 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.16)!important}
/* con barra de sección, en oscuro tampoco hay filete entre el header y la barra */
:root[data-tema=oscuro] body:has(.gx-seccion) .gx--solido .gx-principal{border-bottom-color:transparent}

/* ═════ 4 · vacantes ═════ */
/*! Diseño y desarrollo web: Xaime Nieto · https://xaimenieto.com · contacto@xaimenieto.com · © 2026 */
/* ═════════ Vacantes · adaptación del encabezado y el pie del corporativo (13-nov) ═════════
   Arriba de esta parte van, sin cambios, encabezado2.css, pie.css y tema.css de gsf-hotels.com. Aquí sólo lo propio
   de vacantes: el logotipo con «Vacantes», el bloque de cuenta con sesión, el buscador y el boletín reales, la
   portada transparente sobre la foto y la retícula de cinco columnas del pie. */

.gx .px-sr,.gx-cajon .px-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gx-cajon *,.gx-pie-zona *{box-sizing:border-box}

/* ── logotipo: el del corporativo y, a su derecha, «Vacantes» (la caligrafía oficial del ícono del sitio).
   Proporción del logotipo original de vacantes: la caligrafía mide 0.56 del alto del SVG y arranca 0.16 antes de su
   borde (el SVG trae aire a la derecha del ®); así el hueco entre filete y caligrafía es el del original. ── */
.gx{--gx-logo:64px}
@media (max-width:1180px){.gx{--gx-logo:56px}}
@media (min-width:701px){.gx--solido{--gx-logo:54px}}
@media (max-width:700px){.gx{--gx-logo:44px}}
@media (max-width:400px){.gx{--gx-logo:40px}}
@media (max-width:360px){.gx{--gx-logo:34px}}
.gx .gx-logo--vac{display:flex;align-items:center;line-height:0}
.gx-logo--vac .gx-vac{position:relative;display:block;flex:none;line-height:0}
.gx .gx-logo .gx-vac img{height:calc(var(--gx-logo) * .56);width:auto;margin:0 0 0 calc(var(--gx-logo) * -.16);transition:height .3s,margin .3s,opacity .25s}
.gx .gx-logo .gx-vac .claro{left:0;top:0;margin-left:calc(var(--gx-logo) * -.16)}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-logo .gx-vac .claro{opacity:1}
.gx--foto:not(.gx--solido):not(.gx--abierto) .gx-logo .gx-vac .oscuro{opacity:0}
:root[data-tema=oscuro] body .gx-logo .gx-vac .claro{opacity:1}
:root[data-tema=oscuro] body .gx-logo .gx-vac .oscuro{opacity:0}
/* cajón: logotipo de 38 */
.gx-cajon-logo{display:flex;align-items:center;line-height:0}
.gx-cajon-cab .gx-cajon-logo>img{height:38px;width:auto;margin-left:-10.3px}
.gx-cajon-cab .gx-vac img{height:21px;width:auto;margin:0 0 0 -6px}
.gx-cajon-logo .claro{display:none}
:root[data-tema=oscuro] body .gx-cajon-logo .claro{display:block}
:root[data-tema=oscuro] body .gx-cajon-logo .oscuro{display:none}
/* pie: logotipo de 180 de ancho (57 de alto) */
.pz-pie .pz-pie-logo.gx-logo--vac{display:inline-flex;align-items:center;line-height:0}
.pz-pie .pz-pie-logo .claro{display:none}
.pz-pie .pz-pie-logo .gx-vac img{width:auto;height:32px;margin:0 0 0 -9px}

/* ── menú: la liga externa con su flecha, como en el resto del sitio ── */
.gx-menu .gx-ext{opacity:.6;margin-left:-3px;flex:none}
.gx-menu>li>a{white-space:nowrap}

/* ── cuenta: botón «Ingresa / Crea tu cuenta» (sin sesión) o mensajes, campana y avatar (con sesión) ── */
.gx .gsf-acc{position:relative;display:flex!important;align-items:center;flex:none}
.gx .gsf-acc .gx-cta{text-decoration:none}
/* Bricks pinta .gsf-cta con !important (fondo del color del texto): se devuelve el botón del corporativo */
html body .gx .gsf-acc .gx-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px;height:44px!important;min-height:0!important;padding:0 22px!important;margin:0!important;border-radius:999px!important;background:var(--tinta)!important;color:#fff!important;border:1px solid var(--tinta)!important;font:600 16px/1 var(--texto)!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;white-space:nowrap}
html body .gx .gsf-acc .gx-cta:hover{background:var(--acento)!important;border-color:var(--acento)!important}
html body .gx--foto:not(.gx--solido):not(.gx--abierto) .gsf-acc .gx-cta{background:#fff!important;color:#2F414C!important;border-color:#fff!important}
html[data-tema=oscuro] body .gx .gsf-acc .gx-cta{background:#A0C4DA!important;color:#232C37!important;border-color:#A0C4DA!important}
html[data-tema=oscuro] body .gx .gsf-acc .gx-cta:hover,html[data-tema=oscuro] body .gx--foto:not(.gx--solido):not(.gx--abierto) .gsf-acc .gx-cta{background:#fff!important;border-color:#fff!important}
.gx-cta-corto{display:none}
@media (max-width:1100px){.gx .gsf-acc{margin-left:auto}}
@media (max-width:520px){.gx .gsf-acc .gx-cta-largo{display:none}.gx .gsf-acc .gx-cta-corto{display:inline}.gx-principal .gsf-acc .gx-cta{max-width:none;white-space:nowrap}}
.gx .gsf-idwrap{gap:8px}
.gx :is(.gsf-idbtn,.gsf-bell){width:44px!important;height:44px!important;border-radius:999px!important;background:var(--marfil-2)!important;border:1px solid var(--filete)!important;color:var(--tinta)!important;box-shadow:none!important}
.gx :is(.gsf-idbtn,.gsf-bell):hover{background:#fff!important;border-color:#C9D6DE!important}
.gx :is(.gsf-idbtn,.gsf-bell) svg{color:currentColor!important;stroke:currentColor}
.gx :is(.gsf-idbtn__badge,.gsf-bell__badge){background:var(--tinta)!important;color:#fff!important;box-shadow:0 0 0 2px #fff}
.gx .gsf-idava{width:44px!important;height:44px!important}
.gx .gsf-idava__img,.gx .gsf-idava__ini{width:40px!important;height:40px!important}
.gx .gsf-idava__ini{background:var(--tinta)!important;color:#fff!important}
.gx .gsf-idava__chev{background:#fff!important;color:#2F414C!important}
.gx--foto:not(.gx--solido):not(.gx--abierto) :is(.gsf-idbtn,.gsf-bell){background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.35)!important;color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gx--foto:not(.gx--solido):not(.gx--abierto) :is(.gsf-idbtn,.gsf-bell):hover{background:rgba(255,255,255,.24)!important}
.gx--foto:not(.gx--solido):not(.gx--abierto) :is(.gsf-idbtn__badge,.gsf-bell__badge){background:#fff!important;color:#2F414C!important;box-shadow:none}
:root[data-tema=oscuro] body .gx :is(.gsf-idbtn,.gsf-bell){background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.16)!important;color:#fff!important}
:root[data-tema=oscuro] body .gx :is(.gsf-idbtn,.gsf-bell):hover{background:rgba(255,255,255,.16)!important}
:root[data-tema=oscuro] body .gx :is(.gsf-idbtn__badge,.gsf-bell__badge){background:#A0C4DA!important;color:#232C37!important;box-shadow:0 0 0 2px #232C37}
:root[data-tema=oscuro] body .gx .gsf-idava__ini{background:#A0C4DA!important;color:#232C37!important}
/* teléfono con sesión: tres círculos de 40 para que quepan logotipo, cuenta y menú */
@media (max-width:520px){
 .gx .gsf-idwrap{gap:6px}
 .gx :is(.gsf-idbtn,.gsf-bell,.gsf-idava){width:40px!important;height:40px!important}
 .gx .gsf-idava__img,.gx .gsf-idava__ini{width:36px!important;height:36px!important}
 .gx--sesion .gx-principal>.gx-ancho{gap:8px}
}
.gx-cajon-pie .gx-salir{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font:600 16px/1 var(--texto);color:var(--tinta-2)!important;text-decoration:underline;text-underline-offset:4px}

/* ── portada: el encabezado va transparente sobre la foto (como la portada del corporativo) ── */
body.home .gsf-hm-hero{margin-top:calc(-1 * var(--gx-alto,133px))!important;border-top:var(--gx-alto,133px) solid transparent!important;background-clip:border-box!important;background-origin:border-box!important}

/* ── tarjeta del pie: el panel lleva el buscador real de vacantes; la foto recorta sus esquinas (el autocompletado
   del buscador puede bajar del panel sin que la tarjeta lo corte) ── */
.pz-vac2--b{overflow:visible!important}
.pz-vac2--b .pz-vac2-foto{border-radius:inherit;overflow:hidden}
.pz-vac2--b .pz-vac2-txt{z-index:2}
.pz-vac2-txt .gx-buscador{width:100%;margin-top:6px}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%!important;max-width:none!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__field{flex:0 0 auto!important;height:56px!important;border-radius:999px!important;border:1px solid var(--filete)!important;background:#fff!important;padding:0 20px!important;width:100%!important;max-width:none!important;box-shadow:none!important}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__field:hover{border-color:#BFCFDA!important}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__field:focus-within{border-color:var(--tinta)!important;box-shadow:0 0 0 4px rgba(47,65,76,.14)!important}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__input{font:400 16px/1 var(--texto)!important;color:var(--tinta)!important}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__input::placeholder{color:#5E717D!important;opacity:1}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__sep{display:none!important}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__submit{width:100%!important;height:52px!important;padding:0 28px!important;margin:4px 0 0!important;border:0!important;border-radius:999px!important;justify-content:center!important;background:var(--tinta)!important;color:#fff!important;font:600 16px/1 var(--texto)!important;box-shadow:none!important}
html body .pz-vac2-txt .gx-buscador .gsf-searchbar__submit:hover{background:var(--tinta-2)!important}
:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__field{background:#232C37!important;border-color:rgba(255,255,255,.4)!important}
:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__field:focus-within{border-color:#A0C4DA!important;box-shadow:0 0 0 4px rgba(160,196,218,.25)!important}
:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__input{color:#fff!important}
:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__input::placeholder{color:rgba(255,255,255,.62)!important}
:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__field>svg,:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__geo{color:rgba(255,255,255,.72)!important}
:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__submit{background:#A0C4DA!important;color:#232C37!important}
:root[data-tema=oscuro] body .pz-vac2-txt .gx-buscador .gsf-searchbar__submit:hover{background:#fff!important}

/* ── boletín: el formulario real de vacantes con la forma del corporativo (campo y botón en pastilla de 56) ── */
html body .gx-boletin .gsf-searchbar--news{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important;gap:8px!important;height:auto!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;position:relative}
html body .gx-boletin .gsf-searchbar__field{flex:1 1 220px!important;min-width:0!important;height:56px!important;border-radius:999px!important;border:1px solid var(--filete)!important;background:#fff!important;padding:0 24px!important;box-shadow:none!important}
html body .gx-boletin .gsf-searchbar__field>svg{display:none!important}
html body .gx-boletin .gsf-searchbar__field:hover{border-color:#BFCFDA!important}
html body .gx-boletin .gsf-searchbar__field:focus-within{border-color:var(--acento)!important;box-shadow:0 0 0 4px rgba(47,65,76,.14)!important}
html body .gx-boletin .gsf-searchbar__input{font:400 16px/1 var(--texto)!important;color:var(--tinta)!important;padding:0!important}
html body .gx-boletin .gsf-searchbar__input::placeholder{color:#5E717D!important;opacity:1}
html body .gx-boletin .gsf-searchbar__submit{flex:none!important;height:56px!important;padding:0 28px!important;border:0!important;border-radius:999px!important;background:var(--tinta)!important;color:#fff!important;font:600 16px/1 var(--texto)!important;box-shadow:none!important}
html body .gx-boletin .gsf-nl-msg{flex-basis:100%;font:500 14px/1.4 var(--texto)!important;margin-top:4px!important;color:var(--tinta)!important}
html body .gx-boletin .gsf-nl-msg[style*="255, 217, 212"],html body .gx-boletin .gsf-nl-msg[style*="ffd9d4"]{color:#B42318!important}
@media (max-width:700px){html body .gx-boletin .gsf-searchbar__submit{width:100%!important}}
:root[data-tema=oscuro] body .gx-boletin .gsf-searchbar__field{background:#232C37!important;border-color:rgba(255,255,255,.4)!important}
:root[data-tema=oscuro] body .gx-boletin .gsf-searchbar__input{color:#fff!important}
:root[data-tema=oscuro] body .gx-boletin .gsf-searchbar__input::placeholder{color:rgba(255,255,255,.62)!important}
:root[data-tema=oscuro] body .gx-boletin .gsf-searchbar__submit{background:#A0C4DA!important;color:#232C37!important}
:root[data-tema=oscuro] body .gx-boletin .gsf-nl-msg{color:#fff!important}
:root[data-tema=oscuro] body .gx-boletin .gsf-nl-msg[style*="255, 217, 212"],:root[data-tema=oscuro] body .gx-boletin .gsf-nl-msg[style*="ffd9d4"]{color:#F2B8A8!important}

/* ── pie: cinco columnas (logotipo · contacto · oficinas · vacantes · corporativo) ── */
.pz-pie .gx-rejilla{grid-template-columns:1.15fr 1.1fr 1.05fr .9fr 1.1fr;gap:40px}
@media (max-width:1100px){.pz-pie .gx-rejilla{grid-template-columns:repeat(4,1fr)}.pz-pie .gx-rejilla .pz-col--logo{grid-column:1/-1}}
@media (max-width:900px){.pz-pie .gx-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.pz-pie .gx-rejilla{grid-template-columns:1fr;gap:36px}}
.pz-pie .pz-lista a{text-wrap:pretty}
.pz-legal .gx-igualdad{margin-top:6px!important}

/* ── igualado a lo que pinta el corporativo (medido 13-nov a 1440/1100/390) ──
   vacantes quita las versalitas y cambia la familia de títulos y párrafos con !important: se devuelven las del corporativo.
   En gsf-hotels.com su hoja general pinta los enlaces y los párrafos legales del pie en Red Hat Display (párrafos 17/28);
   se replica lo que se ve allá, no sólo lo que dice pie.css. */
html body .pz .pz-eti,html body .pz-pie h3{font:600 14px/1.4 var(--texto)!important;letter-spacing:.08em!important;text-transform:uppercase!important}
html body .pz-pie-boletin p{font:500 clamp(24px,2.4vw,34px)/1.25 var(--display)!important;letter-spacing:-.01em!important}
html body .pz-pie .pz-lista a,html body .pz-pie .pz-redes a{font-family:var(--display)!important}
html body .pz-pie .pz-legal p{font:400 17px/28px var(--display)!important}
.gx .gx-tel,.gx .gx-redes a{font-weight:600}
@media (min-width:701px){.pz-pie .gx-rejilla{gap:48px}}

/* ── la barra de vacantes lleva un botón de cuenta más largo que «Contacto»: huecos del corporativo a ≤1180 desde 1360
   y menú en el cajón desde 1240 (medido sin choques ni desbordes de 1920 a 360, con y sin sesión) ── */
@media (max-width:1360px) and (min-width:701px){.gx-menu{gap:24px}.gx-principal>.gx-ancho{gap:28px}}
@media (max-width:1240px){.gx-nav{display:none}.gx-abrir{display:inline-flex}.gx .gsf-acc{margin-left:auto}.gx-barra .gx-marca,.gx-barra .gx-redes,.gx-barra .gx-tema{display:none}}
@media (max-width:400px){
 .gx .gsf-idwrap{gap:4px}
 .gx :is(.gsf-idbtn,.gsf-bell,.gsf-idava){width:36px!important;height:36px!important}
 .gx .gsf-idava__img,.gx .gsf-idava__ini{width:32px!important;height:32px!important}
}