/* ==========================================================================
   Villa Almudena · capa «wow» (demo aparte, no se usa en la web publicada)
   Se carga DESPUÉS de site.css y portada.css y solo añade o ajusta.
   ========================================================================== */

/* ---------- lenguaje común con el dossier: esquinas suaves y botones píldora ---------- */
:root{--r:16px;--cab:68px;--wow-oro:#E2C68C;--wow-petroleo:#0B3338;--wow-noche:#071E21;--wow-curva:cubic-bezier(.2,.8,.2,1)}
.btn{border-radius:99px;transition:transform 400ms var(--wow-curva),background-color 300ms,border-color 300ms,color 300ms,box-shadow 400ms var(--wow-curva)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.98)}}

/* ---------- cambio de página suave ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:wow-sale 240ms ease both}
::view-transition-new(root){animation:wow-entra 560ms var(--wow-curva) both}
@keyframes wow-sale{to{opacity:0;transform:translateY(-10px)}}
@keyframes wow-entra{from{opacity:0;transform:translateY(22px)}}
.cabecera{view-transition-name:cabecera}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- barra de avance de lectura ---------- */
.wow-avance{position:fixed;z-index:70;left:0;top:0;width:100%;height:3px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#96762F,var(--wow-oro));pointer-events:none}

/* ---------- entradas al bajar: más recorrido y escalonadas ---------- */
.js [data-revelar]{transform:translateY(38px);transition:opacity 1000ms var(--wow-curva),transform 1000ms var(--wow-curva);transition-delay:var(--wow-d,0ms)}
@media (prefers-reduced-motion:reduce){.js [data-revelar]{transform:none;transition:none}}

/* ---------- tarjetas que responden al ratón ---------- */
.resena,.mini-pack,.ecard,.tira-foto{transition:transform 500ms var(--wow-curva),box-shadow 500ms var(--wow-curva)}
@media (hover:hover) and (pointer:fine){
  .resena:hover,.mini-pack:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgba(11,51,56,.45)}
  .ecard:hover .ethumb img{transform:scale(1.07)}
}

/* ==========================================================================
   PORTADA
   ========================================================================== */
.portada{min-height:calc(100svh - var(--cab))}
.portada .pase-fotos{will-change:transform}
.portada::after{background:linear-gradient(180deg,rgba(6,18,20,.28) 0%,rgba(6,18,20,.12) 35%,rgba(6,18,20,.78) 100%)}
.portada-texto{padding-bottom:clamp(64px,9vw,120px)}
.portada-texto .frase{font-size:clamp(2.8rem,7vw,6.4rem);max-width:14ch}
/* las palabras suben desde detrás de una línea, como un telón */
.frase .pal{filter:none;transform:translateY(.9em);transition:opacity 700ms var(--wow-curva),transform 1100ms var(--wow-curva);transition-delay:calc(var(--w,0) * 70ms)}
.wow-baja{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font-size:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none}
.wow-baja i{display:block;width:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);animation:wow-gota 2200ms var(--wow-curva) infinite;transform-origin:50% 0}
@keyframes wow-gota{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(14px);opacity:0}}
@media (max-width:700px),(prefers-reduced-motion:reduce){.wow-baja{display:none}}

/* cifras: más presencia */
.cifras b{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:300;color:var(--accion)}

/* ---------- cita a pantalla: la foto se mueve más despacio que la página ---------- */
.interludio{min-height:clamp(440px,78vh,760px)}
.interludio img{height:130%;top:-15%;transform:translate3d(0,var(--wow-py,0px),0)!important;transition:none!important;will-change:transform}
.interludio blockquote{font-size:clamp(2.6rem,6.6vw,5.6rem)}

/* ==========================================================================
   PASEO POR EL PALACIO (sustituye a la tira de fotos de la portada)
   ========================================================================== */
.paseo{position:relative;background:var(--wow-noche);color:#fff;padding-block:clamp(48px,6vw,80px)}
.paseo-cab{width:100%;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
.paseo .rotulo-sec{color:var(--wow-oro)}
.paseo h2{color:#fff;margin:0}
.paseo h2 em{font-style:italic;color:var(--wow-oro)}
.paseo-cuenta{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;color:rgba(255,255,255,.55);white-space:nowrap}
.paseo-cuenta b{font-weight:300;color:#fff}
.paseo-pista{display:flex;gap:clamp(14px,2vw,28px);margin-top:clamp(22px,3vw,34px);padding-inline:max(var(--margen),calc((100vw - var(--ancho)) / 2 + var(--margen)));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.paseo-pista::-webkit-scrollbar{display:none}
.paseo-panel{position:relative;flex:none;width:min(84vw,560px);aspect-ratio:3/2;border-radius:22px;overflow:hidden;scroll-snap-align:center;background:#0E2A2E;text-decoration:none;color:#fff;box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.paseo-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1400ms var(--wow-curva)}
.paseo-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,20,22,0) 45%,rgba(5,20,22,.82) 100%)}
.paseo-txt{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(18px,2.6vw,36px);display:grid;gap:6px}
.paseo-n{font-size:.6875rem;font-weight:600;letter-spacing:.22em;color:var(--wow-oro)}
.paseo-nombre{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.4vw,3.2rem);line-height:1;letter-spacing:-.02em}
.paseo-linea{font-size:clamp(.875rem,1.1vw,1rem);color:rgba(255,255,255,.82);max-width:44ch}
@media (hover:hover) and (pointer:fine){.paseo-panel:hover img{transform:scale(1.05)}}
.paseo-fin{display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;background:linear-gradient(150deg,#14525A,var(--wow-petroleo));padding:24px}
.paseo-fin::after{display:none}
.paseo-fin b{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.05;max-width:12ch}
.paseo-fin span{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:99px;background:var(--wow-oro);color:var(--wow-petroleo);font-weight:600;font-size:.9375rem}
.paseo-barra{width:100%;max-width:var(--ancho);margin:clamp(18px,2.4vw,28px) auto 0;padding-inline:var(--margen)}
.paseo-barra div{height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.paseo-barra i{display:block;height:100%;width:100%;background:var(--wow-oro);transform-origin:0 50%;transform:scaleX(0)}
.paseo-pista-nota{display:none}
/* modo anclado (lo activa wow.js en ordenador): la página se queda fija y las estancias pasan de lado */
.paseo.paseo-anclado{padding-block:0}
.paseo-anclado .paseo-pin{position:sticky;top:var(--cab);height:calc(100svh - var(--cab));display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:clamp(20px,3.4vh,44px)}
.paseo-anclado .paseo-pista{flex:1;min-height:0;overflow:visible;scroll-snap-type:none;will-change:transform}
.paseo-anclado .paseo-panel{width:auto;height:100%;aspect-ratio:3/2;max-width:86vw}
.paseo-anclado .paseo-fin{aspect-ratio:1/1}

/* ---------- marquesina de distancias ---------- */
.wow-cinta{overflow:hidden;background:var(--noche-2);border-block:1px solid var(--hilo);padding-block:clamp(18px,2.4vw,30px)}
.wow-cinta div{display:flex;width:max-content;animation:wow-cinta 46s linear infinite}
.wow-cinta span{flex:none;padding-right:.9em;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.8rem,4.4vw,3.6rem);line-height:1.1;white-space:nowrap;color:var(--accion)}
.wow-cinta span b{font-style:normal;font-weight:300;color:var(--acento)}
@keyframes wow-cinta{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.wow-cinta div{animation:none}}

/* ==========================================================================
   HISTORIA (página Villa Almudena): corta, en capítulos, con antes y ahora
   ========================================================================== */
.historia.wow-historia{background:var(--wow-petroleo);color:#fff;padding-block:clamp(64px,8vw,120px)}
.wow-historia .rotulo-sec{color:var(--wow-oro)}
.wow-historia h2{color:#fff}
.wow-historia h2 em{color:var(--wow-oro)}
.wow-historia .historia-marco{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.wow-historia .historia-marco>div:first-child{position:sticky;top:calc(var(--cab) + 28px)}
.wow-compara{position:relative;margin:clamp(22px,3vw,34px) 0 0;width:min(430px,100%,calc((100svh - 290px) * 519 / 808));min-width:240px;aspect-ratio:519/808;border-radius:22px;overflow:hidden;background:#06181A;box-shadow:0 50px 80px -40px rgba(0,0,0,.75);--p:50%;touch-action:pan-y;user-select:none}
.wow-compara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wow-compara .hoy{object-position:62% 50%}
.wow-compara .antes{filter:sepia(.18) contrast(1.04);clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.wow-compara .raya{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.wow-compara .raya::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--wow-petroleo);font:600 1rem/1 var(--sans,system-ui);letter-spacing:.1em;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.wow-compara .eti{position:absolute;top:14px;padding:6px 12px;border-radius:99px;font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:rgba(6,24,26,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
.wow-compara .eti.a{left:14px}.wow-compara .eti.h{right:14px}
.wow-compara input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.wow-compara-pie{margin:12px 0 0;max-width:430px;font-size:.8125rem;line-height:1.45;color:rgba(255,255,255,.62)}
.wow-capitulos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(34px,5vw,64px)}
.wow-capitulos li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(18px,2.4vw,32px);align-items:start}
.wow-capitulos .n{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,5.4vw,5rem);line-height:.85;letter-spacing:-.04em;color:var(--wow-oro);min-width:1.4ch}
.wow-capitulos h3{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.08;color:#fff}
.wow-capitulos p{margin:12px 0 0;font-size:1.0625rem;line-height:1.65;color:rgba(255,255,255,.78);max-width:46ch}
.wow-capitulos .fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;max-width:420px}
.wow-capitulos .fotos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.wow-cierre{margin:clamp(34px,5vw,60px) 0 0;padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(255,255,255,.16);font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;color:#fff}
.wow-cierre em{color:var(--wow-oro)}
@media (max-width:860px){.wow-historia .historia-marco{grid-template-columns:1fr}.wow-historia .historia-marco>div:first-child{position:static}.wow-compara-pie{max-width:none}.wow-compara{width:100%;aspect-ratio:4/5}}