/* Páginas interiores (La Society, Experiencias, Ocasiones, Aliados): héroe corto con foto, pasos con foto, bandas con video.
   Todo con los tokens del sitio; nada de color propio salvo el velo que sostiene el texto claro sobre la foto. */

/* ---------- Héroe corto: la foto (o el video) llega hasta arriba, bajo la cabecera transparente ---------- */
main.pag.pag-con-heroe{padding-top:0}
.pg-heroe{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(440px,70svh,660px);padding:120px 0 clamp(36px,6vw,72px);overflow:hidden;background:var(--marino-fijo);color:var(--crema-fija)}
.pg-heroe-medio{position:absolute;inset:0;z-index:-2}
.pg-heroe-medio img,.pg-heroe-medio video{display:block;width:100%;height:100%;object-fit:cover}
/* Velo: oscuro abajo, donde va el texto, y apenas teñido arriba para que la cabecera clara se lea; se mide en pruebas */
.pg-heroe::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgb(11 16 32 / .9) 0%,rgb(11 16 32 / .82) 36%,rgb(11 16 32 / .7) 62%,rgb(11 16 32 / .3) 100%)}
@media (min-width:901px){.pg-heroe::before{background:linear-gradient(90deg,rgb(11 16 32 / .86) 0%,rgb(11 16 32 / .78) 32%,rgb(11 16 32 / .62) 48%,rgb(11 16 32 / .12) 76%,rgb(11 16 32 / 0) 100%)}}
.pg-heroe-copia{position:relative;width:100%;max-width:1240px}
.pg-heroe .ceja{color:var(--crema-fija)}
.pg-heroe .ceja::before{background:var(--oro-fijo)}
.pg-heroe h1{margin:0;max-width:17ch;font:400 clamp(2.5rem,5.4vw,5rem)/1.06 var(--display);color:var(--crema-fija);text-wrap:balance;text-shadow:0 2px 24px rgb(11 16 32 / .45)}
.pg-heroe-lead{max-width:56ch;margin-top:18px;font-size:1.0625rem;line-height:1.55;color:rgb(244 239 228 / .94)}
.pg-heroe-acciones{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.pg-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid rgb(244 239 228 / .62);border-radius:999px;background:rgb(11 16 32 / .34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--crema-fija);font:500 1rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:background var(--dur-normal),border-color var(--dur-normal)}
.pg-chip:hover{background:rgb(11 16 32 / .55);border-color:var(--crema-fija)}
.pg-chip:focus-visible,.pg-heroe .btn-accion:focus-visible{outline:2px solid var(--crema-fija);outline-offset:3px}
.pg-heroe .subnav{margin-top:26px}
@media (max-width:600px){
  .pg-heroe{min-height:clamp(640px,80svh,700px);padding-top:104px}
  .pg-heroe-lead{font-size:1rem}
}

/* ---------- Pasos con foto y número grande (la Society) ---------- */
.pg-pasos{padding:clamp(64px,9vw,128px) 0;background:var(--fondo)}
.pg-pasos-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,5vw,72px);align-items:start}
.pg-pasos-cab{position:sticky;top:calc(var(--cabecera-alto,58px) + 28px)}
.pg-pasos-cab h2{max-width:14ch;font-size:var(--t-1);line-height:1.06;text-wrap:balance}
.pg-pasos-cab p:not(.ceja){max-width:40ch;margin-top:18px;color:var(--tinta-2)}
.pg-pasos-lista{margin:0;padding:0;list-style:none}
.pg-paso{display:grid;grid-template-columns:auto minmax(0,1fr) clamp(130px,16vw,190px);align-items:center;gap:8px clamp(16px,2.4vw,32px);padding:clamp(22px,3vw,36px) 0;border-top:1px solid var(--linea)}
.pg-paso:last-child{border-bottom:1px solid var(--linea)}
.pg-n{min-width:1.6ch;font:400 clamp(3.5rem,7vw,6rem)/.9 var(--display);color:var(--marca);font-variant-numeric:lining-nums}
.pg-paso-txt{display:flex;flex-direction:column;gap:8px}
.pg-paso-txt b{font:400 clamp(1.5rem,2.4vw,1.875rem)/1.15 var(--display)}
.pg-paso-txt span{max-width:46ch;line-height:1.55;color:var(--tinta-2)}
.pg-paso-foto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio)}
@media (max-width:900px){
  .pg-pasos-in{grid-template-columns:1fr}
  .pg-pasos-cab{position:static}
  .pg-pasos-cab h2{max-width:none}
}
@media (max-width:600px){
  .pg-paso{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"foto foto" "n txt"}
  .pg-paso-foto{grid-area:foto;aspect-ratio:16/10;margin-bottom:10px}
  .pg-n{grid-area:n;align-self:start;font-size:3.25rem}
  .pg-paso-txt{grid-area:txt}
}

/* ---------- Los desarrollos, al centro de la página ---------- */
.pg-des{padding:clamp(72px,10vw,136px) 0;background:var(--fondo-2)}
.pg-des-cab{max-width:760px;margin:0 auto clamp(32px,5vw,56px);text-align:center}
.pg-des-cab .ceja{justify-content:center}
.pg-des-cab .ceja::after{content:"";flex:none;width:28px;height:1px;background:currentColor}
.pg-des-cab h2{font-size:var(--t-1);line-height:1.06;text-wrap:balance}
.pg-des-cab .des-lead{margin:18px auto 0;color:var(--tinta-2)}

/* ---------- Banda con video: una tarjeta de papel sobre el agua ---------- */
.pg-banda{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(380px,52vw,540px);padding:clamp(40px,6vw,80px) 0;overflow:hidden;background:var(--fondo-2)}
.pg-banda-medio{position:absolute;inset:0;z-index:-1}
.pg-banda-medio video,.pg-banda-medio img{display:block;width:100%;height:100%;object-fit:cover}
.pg-banda-tarjeta{max-width:520px;padding:clamp(24px,3.4vw,40px);border:1px solid var(--vidrio-linea,var(--linea));border-radius:var(--radio-tarjeta);background:color-mix(in srgb,var(--superficie) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--tinta)}
.pg-banda-tarjeta h2{font-size:var(--t-2);line-height:1.1;text-wrap:balance}
.pg-banda-tarjeta p:not(.ceja){margin-top:14px;color:var(--tinta-2)}
.pg-banda-tarjeta .ceja{color:var(--marca)}

/* ---------- Franja de foto con texto (Aliados) ---------- */
.pg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;overflow:hidden;border:1px solid var(--linea);border-radius:32px;background:var(--superficie);text-align:left}
.pg-split-foto{position:relative;min-height:320px}
.pg-split-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-split-txt{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(28px,5vw,56px)}
.pg-split-txt .aliados-vacio-t{margin-bottom:0}
.pg-split-txt p{color:var(--tinta-2)}
.pg-split-txt .cierre-centro{margin-top:16px;text-align:left}
@media (max-width:760px){.pg-split{grid-template-columns:1fr}.pg-split-foto{min-height:0;aspect-ratio:16/10}}

/* ---------- Ocasiones: foto arriba de cada tarjeta ---------- */
.oc-carta-foto{display:block;width:calc(100% + 44px);max-width:none;margin:-22px -22px 8px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0}

@media (prefers-reduced-motion:reduce){.pg-chip{transition:none}}
.pg-split[hidden]{display:none}
.pg-ali{padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,112px)}
.pg-banda+.masbahia{padding-top:clamp(56px,8vw,104px)}
/* Enlaces del pie: toque de 44 px también de ancho */
.pie-col a{min-width:44px}

/* ---------- La invitación: el escenario ya mide lo que medirá la carta abierta (sin saltos del pie) ---------- */
.invita{min-height:var(--invita-h,0px)}
.invita .invita-escena{min-height:var(--carta-h,0px)}

/* Texto de la tarjeta grande de Ocasiones: papel casi opaco, para leerse sobre cualquier parte de la foto */
.oc-txt{background:color-mix(in srgb,var(--superficie) 92%,transparent)}

/* Páginas legales (aviso de privacidad y términos): cabecera de texto, índice con anclas y cuerpo de lectura. */
.lg{padding-bottom:clamp(48px,8vw,96px)}
.lg-cab{padding-top:clamp(32px,6vw,72px);padding-bottom:clamp(24px,4vw,40px);border-bottom:1px solid var(--linea)}
main.pag .lg-cab h1{margin:0;max-width:20ch;font:400 var(--t-2)/1.1 var(--display);color:var(--tinta);text-wrap:balance}
.lg-lead{max-width:60ch;margin:16px 0 0;font-size:1.0625rem;line-height:1.55;color:var(--tinta-2)}
.lg-fecha{margin:14px 0 0;font-size:var(--t-chico);font-weight:600;color:var(--tinta)}
.lg-cuerpo{display:grid;gap:28px;padding-top:clamp(24px,4vw,48px)}
.lg-indice{padding:18px 20px;border:1px solid var(--linea);border-radius:var(--radio);background:rgb(var(--fondo-2-rgb) / .5)}
.lg-indice-t{margin:0 0 6px;font-size:var(--t-chico);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--marca)}
.lg-indice ol{margin:0;padding:0 0 0 1.4em;font-size:.9375rem}
.lg-indice li::marker{color:var(--tinta-2)}
.lg-indice a{display:block;min-height:44px;padding:11px 0;color:var(--tinta);text-decoration:none;line-height:1.35}
.lg-indice a:hover{color:var(--marca);text-decoration:underline}
.lg-indice a:focus-visible,.lg-enlace:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:4px}
.lg-texto{max-width:72ch;min-width:0}
.lg-sec{padding-top:8px}
.lg-sec+.lg-sec{margin-top:20px;padding-top:28px;border-top:1px solid var(--linea)}
.lg-sec h2{margin:0 0 12px;font:400 var(--t-3)/1.25 var(--display);color:var(--tinta)}
.lg-sec h3{margin:22px 0 8px;font-size:1.0625rem;font-weight:600;color:var(--tinta)}
.lg-texto p,.lg-texto li{font-size:1rem;line-height:1.7;color:var(--tinta)}
.lg-texto p{margin:0 0 12px}
.lg-texto ul{margin:0 0 12px;padding-left:1.25em}
.lg-texto li{margin-bottom:8px}
.lg-texto li::marker{color:var(--marca)}
.lg-wa{margin:8px 0 16px}
.lg-enlace{display:inline-flex;align-items:center;min-height:44px;color:var(--marca);font-weight:600;text-underline-offset:3px}
.lg-rige{margin-top:32px !important;padding-top:20px;border-top:1px solid var(--linea);font-size:var(--t-chico) !important;color:var(--tinta-2) !important}
@media (min-width:961px){
  .lg-cuerpo{grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  .lg-indice{position:sticky;top:calc(var(--cabecera-alto,58px) + 24px)}
}