@font-face {
  font-family: neue;
  src: url(/fonts/PPNeueMontreal-Book.otf);
}

:root{
  --accent:#CF4E63;
  --overlay-bg: rgba(0,0,0,0.6);
  --button-size: clamp(40px, 6vw, 60px);
  --window-border: none;
}

html,body{
  height:100%;
  margin:0;
  font-family: neue;
  background:linear-gradient(180deg,#e9f0f8 0%, #f7fbff 100%);
}

.window-btn:hover {
  cursor: url('/img/llave.svg'), auto !important;
}

.stage{
  max-width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.house-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  max-height:auto;
  background: url('/img/calendario.jpg') center/contain no-repeat;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  overflow:hidden;
}

/* Clickable zones (styled like little windows/buttons) */
.window-btn{
  position:absolute;
  width:clamp(6vw, 8vw, 70px);
  height:clamp(7vw, 9vw, 80px);
  display:grid;
  place-items:center;
  background-color:rgba(242, 242, 242, 0);
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,0.12);
  border:none;
  user-select:none;
  transition:transform .14s ease, box-shadow .14s ease;
}

.window-btn:active{
    transform:scale(.98)
}
.window-btn:focus{
    outline:3px solid rgba(0,0,0,0.08); 
    box-shadow:0 6px 16px rgba(0,0,0,0.18)
}

.window-label{
  font-weight:700;
  font-size:0.9rem;
  color:var(--accent);
  pointer-events:none;
}

/* Example positions for 12 windows. Adjust percentages to match your house picture */
/* Each button has an inline style with --x and --y set in the HTML for clarity; fallback classes included */

.window-btn[data-index="1"]{left:34%; top:45%}
.window-btn[data-index="2"]{left:44%; top:45%}
.window-btn[data-index="3"]{left:54%; top:45%}
.window-btn[data-index="4"]{left:64%; top:45%}

.window-btn[data-index="5"]{left:34%; top:62%}
.window-btn[data-index="6"]{left:44%; top:62%}
.window-btn[data-index="7"]{left:54%; top:62%}
.window-btn[data-index="8"]{left:64%; top:62%}

.window-btn[data-index="9"]{left:34%; top:79%}
.window-btn[data-index="10"]{left:44%; top:79%}
.window-btn[data-index="11"]{left:54%; top:79%}
.window-btn[data-index="12"]{left:64%; top:79%}

/* Modal (popup) */
.overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1200;
  background:var(--overlay-bg);
}

.overlay.active{
  display:flex;
}

.modal{
  max-width:100vw;
  width:100%;
  max-height:90vh;
  background:#fff;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Botón cerrar dentro del video */
.close-inside {
  position:absolute;
  top:12px;
  right:12px;
  z-index:20;
  background:rgba(0,0,0,0.55);
  color:white;
  border:none;
  border-radius:50%;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  cursor:pointer;
  transition:opacity .2s ease;
}

.close-inside:hover {
  background:rgba(0,0,0,0.75);
}

.modal-body{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
}

.modal-body img, .modal-body video{
    max-width:100%;
    max-height:78vh;
    border-radius:6px;
    display:block;
}
.close-btn:focus{
    outline:3px solid rgba(0,0,0,0.08)
}

/* ANIMACIÓN DEL POPUP (MODAL)    */

/* Estado inicial del overlay (oculto y transparente) */
.overlay {
  position:fixed;
  inset:0;
  display:flex; /* mantenemos flex para animar correctamente */
  align-items:center;
  justify-content:center;
  z-index:1200;
  background:var(--overlay-bg);
  opacity:0; /* empieza invisible */
  pointer-events:none; /* no interactúa hasta ser visible */
  transition: opacity .35s ease; /* animación de aparición */
}

/* Cuando el overlay está activo */
.overlay.active{
  opacity:1;                 /* se vuelve visible */
  pointer-events:auto;       /* ahora sí se puede clickear */
}
  
/* Estado inicial del modal: reducido y transparente */
.modal{
  max-width:920px;
  width:100%;
  max-height:90vh;
  background:#fff;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  overflow:hidden;
  display:flex;
  flex-direction:column;

  transform:scale(0.8);     /* empieza más pequeño */
  opacity:0;                 /* empieza invisible */
  transition: transform .35s ease, opacity .35s ease;
}

/* Animación cuando aparece dentro de .overlay.active */
.overlay.active .modal{
  transform:scale(1);        /* tamaño normal */
  opacity:1;                 /* completamente visible */
}

/* Responsive */
@media (max-width: 768px) {
  .house-wrap {
    background: url('/img/casitaVertical.jpg') center center / cover no-repeat;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    aspect-ratio: auto; /* Anula el aspect-ratio para móviles */
  }
}

@media (max-width:520px){
  .window-btn{
    width:44px;
    height:44px;
    font-size:13px
  }
}

@media (max-width: 768px) {
  .window-btn {
    width: 12vw;
    height: 14vw;
    border-width: 1px;
  }
  .window-btn[data-index="1"] { left: 9%; top: 45%; }
  .window-btn[data-index="2"] { left: 32%; top: 45%; }
  .window-btn[data-index="3"] { left: 56%; top: 45%; }
  .window-btn[data-index="4"] { left:83%; top:45%; }

  .window-btn[data-index="5"]{left:9%; top:57%}
  .window-btn[data-index="6"]{left:32%; top:57%}
  .window-btn[data-index="7"]{left:56%; top:57%}
  .window-btn[data-index="8"]{left:83%; top:57%}

  .window-btn[data-index="9"]{left:9%; top:67%}
  .window-btn[data-index="10"]{left:32%; top:67%}
  .window-btn[data-index="11"]{left:56%; top:67%}
  .window-btn[data-index="12"]{left:83%; top:67%}
}