/*! Diseño y desarrollo web: Xaime Nieto · https://xaimenieto.com · contacto@xaimenieto.com · © 2026 */
/* Portada propuesta · Grupo Hotelero Santa Fe (vista privada)
   Sistema: Red Hat Display + Red Hat Text · 6 tamaños (14 · 16 · 20 · 28 · 48 · 72) · 1 ancho (1280 + márgenes) · 2 botones + 1 enlace */
.px-hero,.px-marcas,.px-central,.px-dialogo{
 --marfil:#FFFFFF;--marfil-2:#F2F7FA;--blanco:#fff;--tinta:#2F414C;--tinta-2:#435561;--filete:#DDE6EC;--acento:#2F414C;--claro:#A0C4DA;
 --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)}
.px-hero *,.px-marcas *,.px-central *,.px-dialogo *{box-sizing:border-box}
.px-ancho{max-width:calc(1280px + 2*var(--margen));margin:0 auto;padding:0 var(--margen);width:100%}
.px-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* blindaje contra style.css del sitio (encabezados blancos, márgenes, listas) */
.px-hero h2,.px-central h2,.px-central h3,.px-hero p,.px-central p,.px-central figure,.px-central ul,.px-marcas ul,.px-dialogo{margin:0;padding:0}
.px-central ul,.px-marcas ul{list-style:none}
.px-central a,.px-hero a{text-decoration:none}
.px-hero :focus-visible,.px-central :focus-visible,.px-dialogo :focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px}
.px-hero :focus-visible{outline-color:#fff}

/* ── Botones y enlace ── */
.px-boton{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;background:var(--tinta);color:#fff!important;
 font:600 16px/1 var(--texto);letter-spacing:.01em;transition:background-color .25s,transform .25s var(--suave)}
.px-boton svg{transition:transform .25s var(--suave)}
.px-boton:hover{background:var(--acento)}
.px-boton:hover svg,.px-enlace:hover svg,a:hover>.px-enlace svg{transform:translateX(4px)}
.px-boton--claro{background:#fff;color:var(--tinta)!important}
.px-boton--claro:hover{background:var(--marfil-2)}
.px-enlace{display:inline-flex;align-items:center;gap:8px;font:600 16px/1.2 var(--texto);color:var(--acento)}
.px-enlace svg{transition:transform .25s var(--suave)}

/* ── 1. Hero ── */
.px-hero{position:relative;height:100svh;min-height:600px;max-height:980px;overflow:hidden;background:var(--tinta);color:#fff;isolation:isolate}
.px-diapos{position:absolute;inset:0;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.px--arrastre .px-diapos{cursor:grabbing}
.px-diapos img{-webkit-user-drag:none;user-drag:none}
.px-pie{transform:translateX(var(--arrastre,0));transition:transform .45s var(--suave)}
.px--arrastre .px-pie{transition:none}
.px-diapo{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--suave);z-index:0}
.px-diapo.activa{opacity:1;z-index:1}
.px-diapo picture,.px-foto{position:absolute;inset:0;width:100%;height:100%}
.px-foto{object-fit:cover;transform:scale(1.06);transition:transform 8s linear}
.px-diapo.activa .px-foto{transform:scale(1)}
/* velo inferior: una sola curva suave para leer el texto sin oscurecer la foto */
.px-diapo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(0deg,rgba(20,29,35,.74) 0%,rgba(20,29,35,.66) 14%,rgba(20,29,35,.48) 30%,rgba(20,29,35,.26) 46%,rgba(20,29,35,.09) 60%,rgba(20,29,35,0) 72%)}
.px-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:132px}
.px-tit{font:600 clamp(40px,5.2vw,72px)/1.04 var(--display)!important;letter-spacing:-.02em;color:#fff!important;max-width:16ch;text-wrap:balance}
.px-bajada{font:400 20px/1.5 var(--texto)!important;color:rgba(255,255,255,.92)!important;max-width:44ch;margin-top:20px!important;text-wrap:pretty}
.px-pie .px-boton{margin-top:32px}
.px-diapo .px-tit,.px-diapo .px-bajada,.px-diapo .px-boton{opacity:0;transform:translateY(16px);transition:opacity .8s var(--suave),transform .8s var(--suave)}
.px-diapo.activa .px-tit{opacity:1;transform:none;transition-delay:.25s}
.px-diapo.activa .px-bajada{opacity:1;transform:none;transition-delay:.4s}
.px-diapo.activa .px-boton{opacity:1;transform:none;transition-delay:.55s}
.px-controles{position:absolute;left:0;right:0;bottom:40px;z-index:3}
.px-controles .px-ancho{display:flex;align-items:center;gap:24px}
.px-puntos{display:flex;gap:8px}
.px-punto{display:flex;align-items:center;height:44px;padding:0;border:0;background:none;cursor:pointer}
.px-barra{display:block;width:64px;height:3px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden}
.px-barra i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(var(--avance,0))}
.px-punto:hover .px-barra{background:rgba(255,255,255,.5)}
.px-cuenta{margin-left:auto;font:500 14px/1 var(--texto);color:rgba(255,255,255,.8);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.px-cuenta b{color:#fff;font-weight:600}
.px-pausa{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .25s}
.px-pausa:hover{background:rgba(255,255,255,.24)}
.px-pausa .i-play,.px--pausado .px-pausa .i-pausa{display:none}
/* el botón no se ve: aparece sólo cuando lo enfoca el teclado (WCAG 2.2.2 sigue cubierto para teclado y lector de pantalla) */
.px-pausa:not(:focus-visible){position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.px--pausado .px-pausa .i-play{display:block}

/* ── Cintillo de marcas: blanco, logotipos en pizarra, bordes que se desvanecen; se detiene al pasar el cursor ── */
.px-marcas{position:relative;background:#fff;overflow:hidden;padding:28px 0;border-bottom:1px solid var(--filete)}
.px-marcas::before,.px-marcas::after{content:"";position:absolute;top:0;bottom:0;width:min(14vw,200px);z-index:1;pointer-events:none}
.px-marcas::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.px-marcas::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.px-marcas-pista{display:flex;width:max-content;animation:px-desliza 70s linear infinite}
.px-marcas:hover .px-marcas-pista,.px-marcas:focus-within .px-marcas-pista{animation-play-state:paused}
.px-marcas-lista{display:flex;align-items:center}
.px-marcas-lista li{flex:none;width:208px;height:72px;display:flex;align-items:center;justify-content:center;padding:0 28px}
.px-marcas-lista img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:.78;transition:opacity .25s}
.px-marcas-lista li:hover img{opacity:1}
@keyframes px-desliza{to{transform:translateX(-50%)}}

/* ── 2. Bloque central ── */
.px-central{background:var(--marfil);color:var(--tinta);font:400 16px/1.6 var(--texto)}
.px-sec{padding:clamp(64px,7vw,104px) 0}
.px-sec:nth-of-type(even){background:var(--marfil-2)}
.px-eti,.px-sub{font:600 14px/1.4 var(--texto)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)!important}
.px-titulo{font:600 clamp(32px,3.4vw,48px)/1.1 var(--display)!important;letter-spacing:-.015em;color:var(--tinta)!important;text-wrap:balance}
.px-titulo span{color:var(--tinta);background:linear-gradient(transparent 64%,rgba(160,196,218,.6) 64%,rgba(160,196,218,.6) 92%,transparent 92%);padding:0 .04em}
.px-titulo-2{font:600 28px/1.2 var(--display)!important;letter-spacing:-.01em;color:var(--tinta)!important}
.px-cabeza{display:flex;flex-direction:column;gap:14px;margin-bottom:48px;max-width:760px}
.px-entrada{font:400 20px/1.6 var(--texto);color:var(--tinta-2)}

/* presentación */
.px-intro-rejilla{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center}
.px-intro-txt{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.px-intro-txt .px-titulo{font-size:clamp(40px,4.4vw,56px)!important}
.px-intro-foto{border-radius:24px;overflow:hidden;aspect-ratio:16/11}
/* presentación con presencia: la foto profesional llega al borde derecho de la pantalla */
.px-sec.px-intro{overflow-x:clip}
.px-intro .px-intro-rejilla{grid-template-columns:5fr 7fr;gap:clamp(40px,5vw,80px)}
.px-intro .px-intro-foto{aspect-ratio:auto;height:clamp(440px,42vw,620px);border-radius:28px 0 0 28px;margin-right:calc(min(0px,(1280px + 2 * var(--margen) - 100vw) / 2) - var(--margen))}
.px-intro-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* novedades */
.px-mosaico{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(240px,300px));gap:16px}
.px-mosaico-item{position:relative;display:block;border-radius:20px;overflow:hidden;background:var(--marfil-2);color:#fff!important}
.px-mosaico-item picture,.px-mosaico-item img{position:absolute;inset:0;width:100%;height:100%}
.px-mosaico-item img{object-fit:cover;transition:transform .9s var(--suave)}
.px-mosaico-item:hover img{transform:scale(1.04)}
.px-m-grande{grid-row:1/3}
.px-m-ancha{grid-column:2/4}
.px-mosaico-pie{position:absolute;left:0;right:0;bottom:0;padding:72px 24px 22px;display:flex;flex-direction:column;gap:4px;
 background:linear-gradient(0deg,rgba(20,29,35,.72),rgba(20,29,35,.42) 45%,rgba(20,29,35,0))}
.px-mosaico-pie b{font:600 20px/1.25 var(--display);color:#fff}
.px-mosaico-pie small{font:500 14px/1.4 var(--texto);color:rgba(255,255,255,.88)}
.px-ext{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;
 background:rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--suave)}
.px-mosaico-item:hover .px-ext,.px-mosaico-item:focus-visible .px-ext{opacity:1;transform:none}

/* mapa propio */
.px-mapa{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:48px;align-items:start}
/* el mapa llena la tarjeta de borde a borde y se queda a la vista mientras se abren destinos */
.px-mapa-tarjeta{position:sticky;top:96px;border-radius:24px;background:var(--claro);overflow:hidden;isolation:isolate}
.px-mapa-lienzo{position:relative;width:100%}
.px-mapa-lienzo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.px-pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:999px;border:2px solid #fff;background:var(--tinta);color:#fff;
 font:600 12px/1 var(--texto);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 4px 12px rgba(20,29,35,.25);
 transition:transform .25s var(--suave),background-color .25s,opacity .25s}
.px-pin span:empty{display:none}
.px-pin:has(span:empty){width:24px;height:24px;background:transparent;border:0;box-shadow:none}
.px-pin:has(span:empty)::before{content:"";width:14px;height:14px;border-radius:999px;background:var(--tinta);border:2px solid #fff;box-shadow:0 4px 12px rgba(20,29,35,.25);transition:background-color .25s}
.px-mapa--foco .px-pin--on:has(span:empty),.px-pin--sel:has(span:empty){background:transparent}
.px-mapa--foco .px-pin--on:has(span:empty)::before,.px-pin--sel:has(span:empty)::before{background:var(--acento)}
.px-pin::after{content:"";position:absolute;inset:-8px;border-radius:inherit;border:2px solid var(--acento);opacity:0;transform:scale(.6)}
.px-mapa--foco .px-pin{opacity:.35}
.px-mapa--foco .px-pin--on,.px-pin--sel{opacity:1;background:var(--acento);transform:translate(-50%,-50%) scale(1.25);z-index:2}
.px-pin--sel::after{animation:px-onda 1.8s var(--suave) infinite}
@keyframes px-onda{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
.px-pin:hover{transform:translate(-50%,-50%) scale(1.25)}
/* nombre del destino: fijo en los de 3 o más hoteles; en los demás aparece al pasar el cursor o al elegirlo en la lista */
.px-pin em{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;font:600 13px/1 var(--texto);font-style:normal;color:var(--tinta);
 padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px -6px rgba(20,29,35,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.px-pin--izq em{left:auto;right:calc(100% + 8px)}
.px-pin--eti em,.px-pin:hover em,.px-pin--sel em,.px-mapa--foco .px-pin--on em{opacity:1}
.px-pin:hover,.px-pin--sel,.px-mapa--foco .px-pin--on{z-index:3}
.px-mapa--foco .px-pin--eti:not(.px-pin--on) em{opacity:0}
.px-pin:hover em,.px-pin--sel em,.px-mapa--foco .px-pin--on em{transform:translateY(-50%) scale(.8)}
/* cifras del portafolio sobre el Pacífico */
.px-mapa-cifras{position:absolute;left:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,32px);display:flex;gap:28px;margin:0!important;color:var(--tinta)}
.px-mapa-cifras span{display:flex;flex-direction:column;gap:6px;font:600 12px/1 var(--texto);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
.px-mapa-cifras b{font:600 clamp(36px,3.4vw,48px)/1 var(--display);letter-spacing:-.02em;color:var(--tinta)}
.px-destinos .px-eti{margin-bottom:8px!important}
.px-destinos>ul{border-top:1px solid var(--filete)}
.px-dest{border-bottom:1px solid var(--filete)}
.px-dest-btn{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;width:100%;min-height:50px;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--tinta)}
.px-dest-btn span{font:600 16px/1.3 var(--texto)}
.px-dest-btn small{font:500 14px/1 var(--texto);color:var(--tinta-2)}
.px-chev{transition:transform .25s;color:var(--tinta-2)}
.px-dest-btn[aria-expanded="true"] .px-chev{transform:rotate(180deg)}
.px-dest-btn:hover span{color:var(--acento)}
.px-dest-hoteles{display:flex;flex-direction:column;gap:20px;padding:4px 0 24px!important}
.px-hotel{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.px-hotel img{width:96px;height:64px;object-fit:cover;border-radius:10px;display:block}
.px-hotel-nom{display:inline-flex;align-items:center;min-height:24px;font:600 16px/1.35 var(--texto);color:var(--tinta)!important}
.px-hotel-nom:hover{color:var(--acento)!important;text-decoration:underline!important;text-underline-offset:4px}
.px-hotel p{font:400 14px/1.5 var(--texto);color:var(--tinta-2);margin-top:4px!important}
.px-hotel .px-hotel-dato a{display:inline-flex;align-items:center;min-height:24px;color:var(--acento)!important;font-weight:600}

/* Inversionistas y Sustentabilidad */
.px-dos-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}

/* Krystal */
.px-tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.px-tarjeta{display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;color:var(--tinta)!important;border:1px solid var(--filete);
 box-shadow:0 1px 2px rgba(20,29,35,.04),0 12px 32px -16px rgba(20,29,35,.18);transition:transform .35s var(--suave),box-shadow .35s var(--suave)}
.px-tarjeta:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(20,29,35,.04),0 24px 48px -20px rgba(20,29,35,.28)}
.px-tarjeta figure{aspect-ratio:3/2;overflow:hidden}
.px-tarjeta img{width:100%;height:100%;object-fit:cover;display:block}
.px-tarjeta-txt{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1}
.px-tarjeta h3{font:600 20px/1.3 var(--display)!important;color:var(--tinta)!important}
.px-tarjeta p{font:400 16px/1.55 var(--texto);color:var(--tinta-2)}
.px-tarjeta .px-enlace{margin-top:auto;padding-top:8px}

/* video */
.px-dialogo{border:0;background:transparent;padding:0;margin:auto!important;width:min(1120px,92vw);max-width:none;max-height:none;overflow:visible}
.px-dialogo::backdrop{background:rgba(20,29,35,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.px-dialogo-marco{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.px-dialogo-marco iframe{width:100%;height:100%;border:0;display:block}
.px-cerrar{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;
 display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ── Movimiento: aparición al desplazar y profundidad del video con scroll-driven animations (sin JavaScript) ── */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .px-aparece{animation:px-sube linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
 }
}
@keyframes px-sube{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 .px-diapo,.px-foto,.px-diapo .px-tit,.px-diapo .px-bajada,.px-diapo .px-boton{transition:none!important}
 .px-foto{transform:none!important}
 .px-marcas-pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
 .px-marcas-lista[aria-hidden]{display:none}
 .px-marcas-lista{flex-wrap:wrap;justify-content:center}
 .px-pin--sel::after{animation:none}
}

/* ── Tableta y teléfono ── */
@media (max-width:1100px){
 .px-tarjetas{grid-template-columns:repeat(2,1fr)}
 .px-mapa{grid-template-columns:1fr}
 .px-mapa-tarjeta{position:relative;top:auto}
}
@media (max-width:900px){
 .px-intro-rejilla,.px-dos-rejilla{grid-template-columns:1fr}
 .px-mosaico{grid-template-columns:1fr 1fr;grid-template-rows:auto}
 .px-m-grande{grid-column:1/3;grid-row:auto;aspect-ratio:4/3}
 .px-m-chica{aspect-ratio:4/5}
 .px-m-ancha{grid-column:1/3;aspect-ratio:16/9}
}
@media (max-width:700px){
 .px-hero,.px-marcas,.px-central,.px-dialogo{--margen:20px}
 .px-hero{min-height:560px;max-height:none;height:92svh}
 .px-pie{padding-bottom:112px}
 .px-bajada{font-size:16px!important}
 .px-entrada{font-size:16px}
 .px-barra{width:40px}
 .px-controles{bottom:28px}
 .px-marcas-lista li{width:156px;height:56px;padding:0 20px}
 .px-marcas{padding:20px 0}
 .px-tarjetas{grid-template-columns:1fr}
 .px-mosaico{grid-template-columns:1fr}
 .px-m-grande,.px-m-chica,.px-m-ancha{grid-column:auto;aspect-ratio:16/11}
 .px-cabeza{margin-bottom:32px}
 .px-hotel{grid-template-columns:72px 1fr}
 .px-hotel img{width:72px;height:48px}
 .px-cerrar{top:-52px}
}
/* el anillo de foco sólo para teclado: Bootstrap del sitio lo pinta también al hacer clic con el ratón */
.px-hero :focus:not(:focus-visible),.px-marcas :focus:not(:focus-visible),.px-central :focus:not(:focus-visible),.px-dialogo :focus:not(:focus-visible){outline:none!important}

/* ── Video: escena de cine a todo el ancho; la foto pone el color y toda la escena abre el video ── */
.px-sec.px-video2{padding:0;background:var(--tinta)}
.px-cine-escena{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:end;min-height:clamp(560px,88vh,860px);color:#fff}
.px-cine-escena picture,.px-cine-foto{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.px-cine-foto{object-fit:cover;object-position:50% 60%;transition:transform 1.2s var(--suave)}
.px-cine-escena:hover .px-cine-foto{transform:scale(1.03)}
.px-cine-escena::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(0deg,rgba(20,29,35,.8) 0%,rgba(20,29,35,.4) 38%,rgba(20,29,35,0) 68%),linear-gradient(90deg,rgba(20,29,35,.55) 0%,rgba(20,29,35,.2) 45%,rgba(20,29,35,0) 70%)}
.px-cine-txt{padding-top:160px;padding-bottom:clamp(48px,6vw,88px)}
.px-cine-txt .px-titulo{font-size:clamp(40px,5vw,72px)!important;line-height:1.04!important;color:#fff!important;max-width:15ch}
.px-cine-txt .px-entrada{color:rgba(255,255,255,.88)!important;max-width:54ch;margin-top:18px!important}
.px-cine-play{display:inline-flex;align-items:center;gap:12px;height:56px;margin-top:32px;padding:0 24px 0 8px;border-radius:999px;
 background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);color:#fff!important;font:600 16px/1 var(--texto);
 -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);transition:background-color .25s,transform .35s var(--suave)}
/* toda la escena es el área de clic del botón (el nombre accesible sigue siendo «Ver video») */
.px-cine-play::after{content:"";position:absolute;inset:0;z-index:1}
.px-cine-escena:hover .px-cine-play{background:rgba(255,255,255,.3);transform:scale(1.04)}
.px-cine-circulo{width:40px;height:40px;border-radius:999px;background:#fff;color:var(--tinta);display:flex;align-items:center;justify-content:center}
.px-cine-circulo svg{display:block}
.px-video2 :focus-visible{outline-color:#fff}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 .px-cine-foto{animation:px-acerca linear both;animation-timeline:view();animation-range:entry 0% cover 50%}}}
@keyframes px-acerca{from{transform:scale(1.14)}to{transform:scale(1)}}
@media (max-width:700px){.px-cine-escena{min-height:clamp(520px,92vh,720px)}.px-cine-txt{padding-bottom:40px}}

/* Inversionistas y Sustentabilidad: dos tarjetas gemelas — foto, entrada y accesos directos a sus secciones */
.px-sec.px-dos{background:var(--marfil-2)}
.px-dos .px-dos-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.px-dos-tarjeta{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(20,29,35,.05),0 30px 60px -36px rgba(20,29,35,.35)}
.px-dos-tarjeta figure{margin:0!important;height:clamp(220px,19vw,280px);overflow:hidden}
.px-dos-tarjeta figure picture,.px-dos-tarjeta figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--suave)}
.px-dos-tarjeta:hover figure img{transform:scale(1.03)}
.px-dos-txt{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(28px,3.2vw,48px)}
.px-dos-eti{font:600 13px/1.4 var(--texto)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)!important;margin:0 0 14px!important}
.px-dos .px-titulo-2{font:600 clamp(36px,3.6vw,52px)/1.05 var(--display)!important;letter-spacing:-.02em;color:var(--tinta)!important;margin:0!important}
.px-dos-txt>p:not(.px-dos-eti){margin:14px 0 28px!important;color:var(--tinta-2)!important;font:400 17px/1.6 var(--texto);max-width:48ch}
.px-dos-lista{list-style:none;width:100%;margin:auto 0 32px!important;padding:0!important;border-top:1px solid var(--filete)}
.px-dos-lista li{border-bottom:1px solid var(--filete)}
.px-dos-lista a{display:flex;align-items:center;gap:12px;min-height:56px;color:var(--tinta)!important;font:500 16px/1.3 var(--texto);text-decoration:none;transition:color .2s}
.px-dos-lista a span{flex:1}
.px-dos-lista svg{color:var(--tinta-2);transition:transform .25s var(--suave),color .2s}
.px-dos-lista a:hover svg{transform:translateX(4px);color:var(--tinta)}
@media (max-width:900px){.px-dos .px-dos-rejilla{grid-template-columns:1fr}}

/* teléfono: el mapa es pequeño; los nombres sólo aparecen al elegir un destino y las cifras quedan en la lista */
@media (max-width:700px){.px-pin--eti em,.px-mapa-cifras{display:none}.px-pin:hover em,.px-pin--sel em,.px-mapa--foco .px-pin--on em{display:block}}

@media (max-width:900px){.px-intro .px-intro-rejilla{grid-template-columns:1fr}.px-intro .px-intro-foto{height:auto;aspect-ratio:4/3;margin-left:calc(-1 * var(--margen));border-radius:0}}