/* VIVE · estilo común */
:root{
  --burdeos:#6b1d2b;
  --burdeos-osc:#4a1320;
  --oro:#c9a24f;
  --oro-claro:#e8cf94;
  --crema:#faf5ec;
  --papel:#f3ebdd;
  --tinta:#2c211c;
  --tinta-suave:#5b4a40;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --texto:"EB Garamond",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--texto);font-size:1.15rem;line-height:1.65}
a{color:var(--burdeos)}
img{max-width:100%;display:block}

/* ---------- PORTADA ---------- */
.portada{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#140c08;color:#fff}
.portada__ambiente{position:absolute;inset:-40px;background:url('/assets/fondo.jpg') center/cover no-repeat;filter:blur(28px) brightness(.45) saturate(1.1)}
.portada__fondo,.portada video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.portada video::cue{color:transparent;background:transparent}
.portada__fondo{opacity:0;transition:opacity 1.4s ease}
.portada video{transition:opacity 1.4s ease}
.portada.quieto .portada__fondo{opacity:1}
.portada.quieto video{opacity:0}
.portada.final video{pointer-events:none}
.portada__velo{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,10,6,.05) 30%,rgba(20,10,6,.55) 100%);opacity:0;transition:opacity 1.4s ease}
.portada.final .portada__velo{opacity:1}

.controles{position:absolute;top:16px;right:16px;left:16px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;z-index:5}
.control{font:600 .85rem/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(20,10,6,.45);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.6em 1.1em;cursor:pointer;backdrop-filter:blur(4px)}
.control:hover,.control:focus-visible{background:rgba(107,29,43,.8);outline:none}
.portada.final .control--saltar,.portada.final .control--sonido,.portada.final .control--subs{display:none}
.subtitulo{position:absolute;left:50%;transform:translateX(-50%);bottom:9vh;width:min(92%,980px);text-align:center;z-index:3;pointer-events:none}
.subtitulo span{display:inline;font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,2.6vw,2rem);line-height:1.45;color:#fff;background:rgba(20,10,6,.62);padding:.12em .5em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:pre-line}
.subtitulo.oculto,.portada.final .subtitulo{display:none}
.control--repetir{display:none}
.portada.final .control--repetir{display:inline-block}

.entrada{position:absolute;inset:auto 0 0 0;padding:0 16px 7vh;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:4;pointer-events:none}
.portada.final .entrada{pointer-events:auto}
.entrada__frase{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.2;margin:0 0 .4em;text-shadow:0 2px 18px rgba(0,0,0,.55);opacity:0;transform:translateY(12px)}
.entrada__linea{width:70px;height:2px;background:var(--oro);margin:0 auto 2.2rem;opacity:0}
.puertas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(1080px,100%)}
.puerta{display:block;text-decoration:none;color:#fff;background:rgba(74,19,32,.82);border:1px solid rgba(232,207,148,.6);border-radius:6px;padding:1.3rem 1.2rem 1.25rem;backdrop-filter:blur(3px);box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(18px);transition:background .25s ease,border-color .25s ease,transform .25s ease}
.puerta:hover,.puerta:focus-visible{background:rgba(107,29,43,.95);border-color:var(--oro-claro);transform:translateY(-3px);outline:none}
.puerta__titulo{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:.08em;text-transform:uppercase;color:var(--oro-claro);line-height:1.15}
.puerta__lema{display:block;margin-top:.45rem;font-size:1rem;line-height:1.4;color:#f6ecdc}

.portada.final .entrada__frase{animation:aparecer .9s .2s ease forwards}
.portada.final .entrada__linea{animation:aparecer .9s .6s ease forwards}
.portada.final .puerta:nth-child(1){animation:subir .8s .6s ease forwards}
.portada.final .puerta:nth-child(2){animation:subir .8s 1.1s ease forwards}
.portada.final .puerta:nth-child(3){animation:subir .8s 1.6s ease forwards}
@keyframes aparecer{to{opacity:1;transform:none}}
@keyframes subir{to{opacity:1;transform:none}}

.pie-portada{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:.8rem;letter-spacing:.08em;color:rgba(255,255,255,.7);z-index:4;opacity:0;transition:opacity 1s 2.6s}
.portada.final .pie-portada{opacity:1}

@media (max-width:760px){
  .puertas{grid-template-columns:1fr;gap:10px}
  .puerta{padding:.9rem 1rem}
  .puerta__lema{font-size:.92rem}
  .entrada{padding-bottom:5vh}
  .entrada__linea{margin-bottom:1.2rem}
  .portada{min-height:640px}
}
@media (prefers-reduced-motion:reduce){
  .portada *{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}
}

/* ---------- PÁGINAS INTERIORES ---------- */
.cabecera{background:var(--burdeos-osc);color:#fff;border-bottom:3px solid var(--oro)}
.cabecera__in{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.marca{font-family:var(--serif);font-weight:600;font-size:1.9rem;letter-spacing:.14em;color:var(--oro-claro);text-decoration:none}
.menu{display:flex;gap:6px 22px;flex-wrap:wrap}
.menu a{color:#f3e6cf;text-decoration:none;font-size:.88rem;letter-spacing:.09em;text-transform:uppercase;padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{border-bottom-color:var(--oro)}

.banda{position:relative;color:#fff;background:var(--burdeos) center/cover no-repeat;min-height:300px;display:flex;align-items:flex-end}
.banda::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(40,12,16,.85),rgba(40,12,16,.25))}
.banda__in{position:relative;max-width:1100px;width:100%;margin:0 auto;padding:48px 16px 34px}
.miga{font-size:.85rem;letter-spacing:.05em;margin:0 0 .6rem;color:#ecdcc0}
.miga a{color:#ecdcc0}
.banda h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0;letter-spacing:.02em}
.banda .lema{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.5rem);margin:.5rem 0 0;color:var(--oro-claro)}

.contenido{max-width:820px;margin:0 auto;padding:44px 16px 64px}
.contenido h2{font-family:var(--serif);font-weight:600;font-size:1.8rem;color:var(--burdeos);margin:2rem 0 .6rem}
.intro{font-size:1.25rem;color:var(--tinta-suave)}
.aviso{background:var(--papel);border-left:4px solid var(--oro);padding:1rem 1.2rem;margin:2rem 0;border-radius:0 4px 4px 0}
.aviso strong{color:var(--burdeos)}

.tarjetas{max-width:1100px;margin:0 auto;padding:40px 16px 70px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tarjeta{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta);background:#fff;border:1px solid #e6d9c2;border-top:4px solid var(--burdeos);border-radius:6px;padding:1.5rem 1.4rem;transition:transform .2s ease,box-shadow .2s ease}
.tarjeta:hover,.tarjeta:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px rgba(74,19,32,.15);outline:none}
.tarjeta__num{font-family:var(--serif);color:var(--oro);font-size:1.1rem;letter-spacing:.1em}
.tarjeta h2{font-family:var(--serif);font-weight:600;font-size:1.55rem;line-height:1.2;color:var(--burdeos);margin:.3rem 0 .6rem}
.tarjeta p{margin:0;font-size:1.02rem;color:var(--tinta-suave)}
.tarjeta__ir{margin-top:auto;padding-top:1rem;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--burdeos)}
.nota-seccion{max-width:1100px;margin:-30px auto 0;padding:0 16px 60px;color:var(--tinta-suave);font-style:italic}
@media (max-width:860px){.tarjetas{grid-template-columns:1fr}}

.paso{max-width:820px;margin:0 auto;padding:0 16px 60px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.paso a{text-decoration:none;border:1px solid #dccbae;border-radius:4px;padding:.7rem 1rem;max-width:48%;font-size:1rem}
.paso a:hover{background:var(--papel)}
.paso small{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}

.pie{background:var(--burdeos-osc);color:#e9dcc4;text-align:center;padding:26px 16px;font-size:.9rem;border-top:3px solid var(--oro)}
.pie a{color:var(--oro-claro)}

/* ---------- Barra de reproducción (debajo de la imagen) ---------- */
:root{--alto-barra:56px}
.portada__fondo,.portada video{height:calc(100% - var(--alto-barra))}
.subtitulo{bottom:calc(var(--alto-barra) + 4vh)}
.barra{position:absolute;left:0;right:0;bottom:0;height:var(--alto-barra);z-index:6;display:flex;align-items:center;gap:12px;padding:0 16px;background:rgba(30,10,14,.92);border-top:1px solid rgba(201,162,79,.55);color:#f3e6cf;font-family:var(--texto);transition:opacity .8s ease}
.portada.final .barra{opacity:0;pointer-events:none}
.portada.final .portada__fondo,.portada.final video{height:100%}
.portada video,.portada__fondo{transition:opacity 1.4s ease,height .8s ease}
.barra__btn{background:none;border:1px solid rgba(232,207,148,.5);color:#f3e6cf;border-radius:999px;cursor:pointer;font:600 .8rem/1 var(--texto);letter-spacing:.05em;padding:.55em .9em;white-space:nowrap}
.barra__btn:hover,.barra__btn:focus-visible{background:var(--burdeos);outline:none}
.barra__play,.barra__pantalla{width:38px;height:38px;padding:0;font-size:1rem;display:grid;place-items:center}
.barra__tiempo{font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--oro-claro)}
.barra__progreso{flex:1;min-width:60px;accent-color:var(--oro);cursor:pointer}
@media (max-width:760px){
  :root{--alto-barra:50px}
  .barra{gap:8px;padding:0 10px}
  .barra__texto{font-size:.7rem;padding:.5em .6em}
  .barra__tiempo{display:none}
}
@media (max-width:420px){ .barra__pantalla{display:none} }
.barra__progreso{height:24px}

/* Botones de sección: ocultos para teclado y lectores de pantalla hasta que aparecen */
.portada:not(.final) .entrada{visibility:hidden}

/* ---------- Móvil y pantallas bajas ---------- */
/* Relleno de ambiente con los colores del propio vídeo (lo pinta portada.js en un lienzo pequeño) */
.portada__eco{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);filter:blur(30px) brightness(.55) saturate(1.2);opacity:0;transition:opacity 1s ease;pointer-events:none}
.portada.eco .portada__eco{opacity:1}
.portada.quieto .portada__eco{opacity:0}

/* Vertical: los subtítulos van justo debajo de la imagen, no al fondo de la pantalla */
@media (orientation:portrait){
  .portada{min-height:0}
  .subtitulo{bottom:auto;top:calc((100% - var(--alto-barra)) / 2 + 28.125vw + 14px)}
  .subtitulo span{font-size:clamp(1rem,4.4vw,1.25rem)}
  .controles{top:12px;right:12px;left:12px}
  .control{font-size:.75rem;padding:.55em 1em}
  /* Final en vertical: el paisaje se abre a pantalla completa, centrado en el pueblo */
  .portada.final .portada__fondo{opacity:1;object-fit:cover;object-position:68% 50%}
  .portada.final video{opacity:0}
  .portada .girar{display:block}
}
/* Aviso «gira el móvil» (solo en vertical, desaparece solo) */
.girar{display:none;position:absolute;left:0;right:0;top:calc((100% - var(--alto-barra)) / 2 - 28.125vw - 46px);text-align:center;z-index:3;pointer-events:none;font-family:var(--texto);font-size:.85rem;letter-spacing:.06em;color:#f3e6cf;opacity:0;animation:girar 7s 1s ease forwards}
.girar span{background:rgba(20,10,6,.5);border:1px solid rgba(232,207,148,.4);border-radius:999px;padding:.4em 1em}
.portada.final .girar{display:none}
@keyframes girar{10%,80%{opacity:1}100%{opacity:0}}
/* Horizontal en móvil (pantalla baja): sin altura mínima, barra más fina, todo dentro de la pantalla */
@media (orientation:landscape) and (max-height:560px){
  :root{--alto-barra:42px}
  .portada{min-height:0}
  .barra{gap:8px;padding:0 10px}
  .barra__btn{font-size:.7rem;padding:.45em .7em}
  .barra__play,.barra__pantalla{width:32px;height:32px}
  .controles{top:8px;right:10px;left:10px}
  .control{font-size:.7rem;padding:.45em .9em}
  .subtitulo{bottom:calc(var(--alto-barra) + 10px)}
  .subtitulo span{font-size:clamp(.95rem,2.4vw,1.2rem)}
  .entrada{padding-bottom:3vh}
  .puertas{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .puerta{padding:.6rem .7rem}
  .puerta__titulo{font-size:1rem}
  .puerta__lema{display:none}
}