/* ===== Base / Paleta ===== */
:root{
  --bg:#080808;
  --fg:#cdc2b0;
  --accent:#cc2525;
  --muted:#a89f90;
  --line:rgba(255,255,255,.08);

  --footer-h: 48px;

  --fade-dur: .40s;
  --fade-ease: cubic-bezier(.22,.61,.36,1);
  --stagger: 50ms;

  --bg-op: .80;
  --tint: 0;

  --modal-maxw: 760px;
  --modal-pad: clamp(22px, 3.6vw, 34px);
  --modal-radius: 12px;
  --modal-title: clamp(1.35rem, 3.3vw, 1.9rem);
  --modal-body: clamp(1.05rem, 2.4vw, 1.20rem);
}

*{box-sizing:border-box}
html,body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Rasputin","Cormorant Garamond",serif;
  height:100%; overflow:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin-inline:auto;padding:0 20px}

/* Botones 'type' */
.btn{
  all:unset;
  display:inline-block;
  cursor:pointer;
  color:var(--fg);
  font-weight:600;
  font-size:clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing:.01em;
  padding:.1rem .2rem;
  transition:opacity .2s ease, transform .16s ease, color .18s ease;
  will-change: opacity, color;
  position:relative;
}
.btn:hover,
.btn:focus-visible{
  color: var(--accent);
  opacity:.98;
  transform:none;
}
.btn:active{
  transform:none;
  color: var(--accent);
}
.btn--ghost{ opacity:.85; }
.btn--sm{ font-size:clamp(0.95rem, 2vw, 1.05rem); }

/* CTA (sin “popeo”) */
.home-cta{
  display:flex; gap:42px; justify-content:center; align-items:center;
  opacity:0; transform:none;
  transition:opacity var(--fade-dur) var(--fade-ease);
  position:relative; z-index:20;
}
.home-cta.is-visible{ opacity:1; }
body.modal-open .home-cta{
  opacity:0;
  pointer-events:none;
  transform:none;
  transition:opacity .28s var(--fade-ease);
}
.home-cta .btn:hover,
.home-cta .btn:focus-visible,
.home-cta .btn:active{ transform:none; }

@media (max-width: 640px){
  .home-cta{ flex-direction:column; gap:18px; }
}

/* Cerrar vídeo */
.btn--close{ position:fixed; top:12px; right:12px; z-index:1100; }

/* Texto */
.title{font-size:clamp(2rem,6vw,3.25rem);line-height:1.1;margin:0 0 .6rem}
.subtitle{font-size:clamp(1.4rem,3.5vw,2rem);margin:0 0 .6rem}
.logline{font-size:var(--modal-body);opacity:.95;margin:0 0 1.2rem}
.align-right{ text-align:right; }
.lead{margin:0 0 1rem;line-height:1.7;color:var(--fg)}
.muted{color:var(--muted)}

/* Tarjetas listas */
.card{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.list .card{display:flex;align-items:center;justify-content:space-between}

/* Header eliminado */
.header{ display:none }

/* Vistas + fade global */
.site{
  position:fixed;inset:0 0 var(--footer-h) 0;
  contain:paint;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--fade-dur) var(--fade-ease), transform var(--fade-dur) var(--fade-ease);
  z-index:10;
}
.view{
  position:absolute; inset:0; display:none; padding:24px 0; overflow:hidden;
  opacity:0; transition:opacity var(--fade-dur) var(--fade-ease);
}
.view--active{display:block; opacity:1}
.view__inner{height:100%; display:flex; flex-direction:column; justify-content:center; gap:28px}
.copy.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* Footer */
.footer{
  position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--line);padding:12px 0;color:var(--muted);background:rgba(8,8,8,.35);
  opacity:0; transform:translateY(4px);
  transition:opacity var(--fade-dur) var(--fade-ease), transform var(--fade-dur) var(--fade-ease);
  z-index:10;
}

/* Activa fade global */
body.site-ready .site,
body.site-ready .footer{ opacity:1; transform:none; }

/* Gate */
.gate{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#000; z-index:999; overflow:hidden;
  height:calc(var(--vh, 1vh) * 100);
  contain:paint;
  opacity:0; transition:opacity var(--fade-dur) var(--fade-ease);
}
.gate.is-visible{ opacity:1; }
.gate.is-fading{  opacity:0; }
.gate.is-hidden{  visibility:hidden; }
.gate__logo{
  width: min(80vw, 70vh);
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
  display:block;
  object-fit: contain;
  cursor:pointer; user-select:none; -webkit-user-drag:none;
}
@media (max-width: 640px){
  .gate__logo{ width: min(82vw, 70vh); }
}

/* Hint */
.hint{
  position:absolute; bottom:5vh;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.hint.show{
  opacity:1; visibility:visible; transform:none;
  transition: opacity .35s ease, transform .35s ease;
  animation:pulse 2s infinite;
}
@keyframes pulse{ 0%,100%{opacity:.6} 50%{opacity:1} }

/* Fondo único */
.site-bg{
  position:fixed; inset:0;
  z-index:0;
  opacity:0;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    linear-gradient(rgba(204,37,37,var(--tint,0)), rgba(204,37,37,var(--tint,0))),
    url("/img/foto_1.jpg") center/cover no-repeat;
  transition: opacity 420ms var(--fade-ease);
  pointer-events:none;
}
body.site-ready .site-bg{ opacity:var(--bg-op, .8); }

/* Overlay Home */
.hero-overlay{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0; transform:scale(1.02);
  transition: opacity var(--fade-dur) var(--fade-ease), transform var(--fade-dur) var(--fade-ease);
}
.hero-overlay img{ max-width:min(85vw, 900px); height:auto; display:block; }
body.home-intro-start .hero-overlay{
  opacity:1; transform:scale(1);
  animation:
    overlayIntro 600ms var(--fade-ease) both,
    overlayNudge 1200ms ease 600ms both,
    overlayHold 400ms linear 1800ms both,
    overlaySlideDown 800ms ease-in 2200ms forwards;
}
@keyframes overlayIntro{ from{ opacity:0; transform:scale(1.02) } to{ opacity:1; transform:scale(1) } }
@keyframes overlayNudge{ from{ transform:scale(1) } to{ transform:scale(1.03) } }
@keyframes overlayHold{ from{ opacity:1 } to{ opacity:1 } }
@keyframes overlaySlideDown{ from{ transform:translateY(0) scale(1.03) } to{ transform:translateY(100%) scale(1.03) } }

/* Backdrop */
.modal-backdrop{
  position:fixed; inset:0; z-index:25;
  background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden;
  will-change: opacity;
  transition:opacity var(--fade-dur) var(--fade-ease), visibility 0s linear var(--fade-dur);
}
.modal-backdrop.is-open{ opacity:1; visibility:visible; }

/* ===== Modales (fixed, sin blur) ===== */
.info-panel[hidden]{ display:none !important; }
.info-panel{
  position:fixed; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:none;
  transition:opacity var(--fade-dur) var(--fade-ease);
  pointer-events:none;
  text-align:left;
}
.info-panel.is-open{
  opacity:1;
  pointer-events:auto;
}
.info-panel__inner{
  position:relative;
  margin:0 auto;
  max-width:var(--modal-maxw);
  width:min(94vw, var(--modal-maxw));
  padding:var(--modal-pad);
  background: rgba(0,0,0,0.18);
  border:none;
  border-radius:var(--modal-radius);
}

/* Título modal con subrayado rojo */
.modal-title{
  font-size:var(--modal-title);
  line-height:1.2;
  margin:0 0 .9rem;
  position:relative;
}
.modal-title::after{
  content:"";
  display:block;
  width:64px; height:2px;
  margin:.55rem 0 0;
  background: var(--accent);
  opacity:.9;
}

/* Cuerpo */
.info-panel .lead{
  font-size:var(--modal-body);
  margin:0 0 1.1rem;
  text-wrap:pretty;
}

/* Tarjetas (Calendario) */
.card{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.card.card--tap{ position:relative; cursor:pointer; }
.card.card--tap .tap{ position:absolute; inset:0; border-radius:inherit; }
.card.card--tap:hover{ border-color: rgba(204,37,37,.55); box-shadow:0 0 0 1px rgba(204,37,37,.35), 0 8px 24px rgba(0,0,0,.25); }

/* Botón cerrar */
.modal-close{
  position:absolute;
  top:10px; right:10px;
  z-index:31;
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  opacity:.95;
  transition:opacity .2s ease, transform .16s ease;
}
.modal-close:hover{ opacity:1; transform:translateY(-1px); }

/* En móvil: abajo a la derecha, siempre visible */
@media (max-width: 640px){
  .modal-close{
    position:fixed;
    top:auto;
    bottom:16px;
    right:16px;
    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border-radius:50%;
    width:42px; height:42px;
    font-size:20px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 6px rgba(0,0,0,.4);
  }
  .modal-close:hover{ transform:none; opacity:1; }
}

/* Apariciones con stagger */
[data-reveal]{ opacity:0; transform:translateY(8px); transition:opacity var(--fade-dur) var(--fade-ease), transform var(--fade-dur) var(--fade-ease); transition-delay: calc(var(--i, 0) * var(--stagger)); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* Teaser / vídeo */
.teaser{ position:fixed; inset:0; display:flex; background:#000; align-items:center; justify-content:center; z-index:1000; height:calc(var(--vh, 1vh) * 100); contain:paint; opacity:0; visibility:hidden; pointer-events:none; transition: opacity var(--fade-dur) var(--fade-ease), visibility 0s linear var(--fade-dur); }
.teaser.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity var(--fade-dur) var(--fade-ease), visibility 0s linear 0s; }
.teaser video{ max-width:100vw; max-height:calc(var(--vh, 1vh) * 100); height:80vh; width:auto; object-fit:cover; border:0; outline:0; border-radius:0; will-change: transform, opacity; opacity:0; transition: opacity var(--fade-dur) var(--fade-ease); background:#000; }
.teaser.playing video{ opacity:1; }

/* Capa negra */
.black-cover{ position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; z-index:1200; transition: opacity var(--fade-dur) var(--fade-ease); }
.black-cover.show{ opacity:1; }

/* Accesibilidad */
.sr-only{position:absolute;left:-9999px}
:focus-visible{ outline:3px solid rgba(204,37,37,.6); outline-offset:2px }

/* Fallback sin backdrop-filter */
@supports not (backdrop-filter: blur(1px)){
  .card{ /* sin cambios */ }
}

/* Contacto: columna con iconos + hover subrayado */
.contact-list{
  display:flex; flex-direction:column; gap:14px;
  margin-top:8px;
}
.contact-item{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color:var(--fg);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.contact-item:hover,
.contact-item:focus-visible{
  color:var(--accent);
  border-color:var(--accent);
}
.contact-icon{ display:inline-flex; width:20px; height:20px; opacity:.95; }
.contact-text{ line-height:1.4; }

/* Botón "Ver de nuevo el teaser" */
.replay-teaser{
  all:unset; /* igual que .btn */
  position:fixed;
  right:10px;
  bottom:calc(var(--footer-h) + 6px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  z-index:80;
  color:var(--fg);

  /* Misma tipografía que los botones pequeños */
  font-family:"Rasputin","Cormorant Garamond",serif;
  font-weight:600;
  font-size:clamp(0.95rem, 2vw, 1.05rem);
  letter-spacing:.01em;

  /* Estado inicial: completamente oculto (para que NO aparezca en el gate) */
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--fade-ease), transform .35s var(--fade-ease);
}

/* Cuando el home ya está listo (body.replay-ready lo pone JS) */
body.replay-ready .replay-teaser{
  opacity:.65;          /* visible */
  pointer-events:auto;
  animation:replayPulse 2s infinite; /* latido suave sin tocar opacity */
}

/* Animación específica del replay (no toca opacity, solo scale) */
@keyframes replayPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.04); }
}

.replay-teaser img{
  width:40px;
  height:40px;
  max-width:40px;
  object-fit:contain;
  display:block;
}

.replay-teaser__label{
  line-height:1.2;
}

/* En móvil: más pequeño y un pelín más arriba */
@media (max-width: 640px){
  .replay-teaser{
    right:12px;
    bottom:calc(var(--footer-h) + 12px);
    font-size:clamp(0.9rem, 2.4vw, 1rem);
  }
  .replay-teaser img{
    width:36px;
    height:36px;
  }
}

/* Ocultamos el botón mientras hay modal para no distraer */
body.modal-open .replay-teaser{
  opacity:0;
  pointer-events:none;
}