/* ======================ESTILO DE TODO LO QUE SE VE EN INDEX.HTML==========================*/
 
 :root{
    --bone:#EDE7DB;
    --bone-light:#F6F2E8;
    --ink:#201E1A;
    --ink-soft:#4A463E;
    --rust:#77836A;
    --rust-dark:#7E3B23;
    --sage:#77836A;
    --line:#CBBFA8;
    --line-soft:#DCD4C0;
    --rustOpa:#77836a92;
    --boneOpa:#f8f8f82a;



  }

  *{ box-sizing:border-box; }

  html{ -webkit-font-smoothing:antialiased; }

  body{
  margin:0;
  color:var(--bone-light);
  font-family:'Archivo', sans-serif;
}

  .bg-fixed{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:#191918;
}

.bg-fixed video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(0.5px);
  transform:scale(1.05);
}
.bg-fixed::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(25,25,24,0.45) 0%, rgba(25,25,24,0.55) 50%, rgba(25,25,24,0.8) 100%);
}

  a{ color:inherit; }

  /* ===================== NAV ============= */

  .nav{
    max-width:1200px;
    margin:0 auto;
    padding:2rem 2rem 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .nav-mark{
    font-family:'Piazzolla', serif;
    font-size:1.35rem;
    font-weight:500;
    letter-spacing:-0.01em;
    text-decoration:none;
    color: var(--bone-light);
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:2.25rem;
    list-style:none;
    margin:0;
    padding:0;
  }

  .nav-links a{
    text-decoration:none;
    font-size:1rem; 
    color: var(--bone-light); /* color links navbar*/
    transition:color 0.2s ease;
  }

  .nav-links a:hover{ color: var(--bone-light); }

  .nav-cta{
  display:inline-flex;
  align-items:center;
  padding:0.6rem 1.3rem;
  background:var(--rust);
  color:var(--bone-light);
  border-radius:3px;
  font-size:0.9rem;
  font-weight:500;
  text-decoration:none;
  transition:background 0.2s ease;
}

.nav-cta:hover{ background:var(--rust-dark); }

  .nav-cta:hover{ background:var(--rust-dark); }

  @media (max-width:720px){
    .nav-links{ display:none; }
  }


  /* ====================== HERO ================= */

  .hero{
    max-width:1200px;
    margin:0 auto;
    padding: 9rem 2rem 5rem;
    display:grid;
    grid-template-columns:1fr;
    align-items:center;
  }

  .hero-copy h1{ /*ejericio con precision*/
    font-family:'Piazzolla', serif;
    font-weight:500;
    font-size:clamp(3.6rem, 4.4vw, 3.85rem);
    line-height:1.06;
    letter-spacing:-0.015em;
    margin:0 0 1.5rem;
    color: var(--bone-light); 
    max-width:11ch;
    margin-top: 26px;
  }

  .hero-copy p{ /*clases de reformer en 50 minutos...*/
    font-size:1.1rem;
    line-height:1.65;
    color:var(--bone);
    max-width:38ch;
    margin:0 0 2.25rem;
  }

  .hero-actions{
  display:flex;
  align-items:center;
  gap:1.75rem;
  flex-wrap:wrap;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  max-width:440px;
}

  .hero-side{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

  .btn-primary{ /* boton reservar clase*/
    display:inline-flex;
    align-items:center;
    padding:0.95rem 1.9rem;
    background:var(--rust-dark);
    color:var(--bone-light); 
    text-decoration:none;
    border-radius:3px;
    font-size:0.98rem;
    font-weight:600;
    transition:background 0.2s ease, transform 0.2s ease;
  }

  .btn-primary:hover{ /* accion boton reservar clase*/
    background:var(--ink);
    transform:translateY(-1px);
  }

  .btn-secondary{ /* boton ver horarios disponibles*/
    display:inline-flex;
    align-items:center;
    padding:0.95rem 1.9rem;
    background:var(--bone-light);
    color:var(--rust); 
    text-decoration:none;
    border-radius:3px;
    font-size:0.98rem;
    font-weight:600;
    transition:background 0.2s ease, transform 0.2s ease;
  }

  .btn-secondary:hover{ opacity:0.65; } /*acción boton ver horarios */

 .hero-meta{
    display:flex;
    gap:2.5rem;
}

  .hero-meta div{ display:flex; flex-direction:column; gap:0.3rem; }

 .hero-meta .num{ /*numeros*/
    font-family:'Piazzolla', serif;
    font-size:1.9rem;
    font-weight:500;
    color:var(--bone-light);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.695);
}

  .hero-meta .lbl{ /*camas x clase, ' por clase, dias a la semana*/
    font-size:0.90rem;

    color:var(--bone);
  }

  .hero{ position:relative; }

.scroll-hint{
  position:absolute;
  bottom:0.5rem; /*q tan arriba*/
  left:50%; /*centrado*/
  transform:translateX(-50%);
  width:1px; /*ancho*/
  height:2.5rem; /*largo*/
  overflow:hidden;
}

.scroll-hint span{
  display:block;
  width:100%;
  height:100%;
  background:rgba(246,242,232,0.5);
  animation:scrollHint 1.8s ease-in-out infinite;
}

@keyframes scrollHint{
  0%{ transform:translateY(-100%); }
  100%{ transform:translateY(100%); }
}
  /* ============= AGENDA (turnos de la semana) ============= */

  .agenda{ /*card turnos de esta semana*/
    padding:4.5rem 2rem;
  }

  .agenda-inner{
    max-width:1200px;
    margin:0 auto;
  }

  .agenda-header{
    margin-bottom:2.5rem;
  }

  .agenda-header h2{ /*texto turnos de esta semana*/
    font-family:'Piazzolla', serif;
    font-weight:500;
    font-size: 2rem;
    color:var(--bone-light);
    margin:0 0 0.5rem;
  }

  .agenda-header p{ /*textos de lunes a sabados...*/
    font-size: 1rem;
    color:rgba(246,242,232,0.6);
    margin:0;
  }

  .agenda-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:1.5rem;
  }

  .agenda-day{
    background:var(--sage);
    border:1px solid rgba(246,242,232,0.12);
    border-radius:4px;
    padding:1.4rem;
  }

  .agenda-day h3{
    font-family:'Piazzolla', serif;
    font-weight:500;
    font-size:1.05rem;
    color:var(--bone-light);
    margin:0 0 1rem;
  }

  .schedule-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.5rem 0;
    border-top:1px solid rgba(246,242,232,0.1);
    font-size:0.9rem;
  }

  .schedule-row:first-of-type{ border-top:none; }

  .schedule-row .time{
    font-variant-numeric:tabular-nums;
    color:rgba(246,242,232,0.8);
  }

  .schedule-row .spots{
    font-size:0.78rem;
    font-weight:600;
    padding:0.28rem 0.65rem;
    border-radius:2px;
    white-space:nowrap;
  }

  .spots.open{ background:rgba(119,131,106,0.35); color:#C8D2BC; }
  .spots.low{ background:rgba(156,74,46,0.35); color:#E9B8A4; }
  .spots.full{ background:rgba(246,242,232,0.1); color:rgba(246,242,232,0.5); }

  @media (max-width:480px){
    .agenda{ padding:3rem 1.25rem; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--rust);
    outline-offset:3px;
  }

  /* ====================== MODAL AGENDA ============================*/

.modal-overlay{ /*modal reservar clase*/
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0, 0, 0, 0.714); /*color fuera del modal*/
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  align-items:center;
  justify-content:center;
  padding:3rem;
}

.modal-overlay.open{
  display:flex;
}

.modal-box{ /*card del modal reserva*/
  position:relative;
  background:linear-gradient(145deg, var(--rust) /*parte de arriba*/, var(--ink-soft)); /* parte de abajo*/
  border-radius:8px;
  padding:1rem 2.5rem 2.5rem;
  max-width:480px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
}

.modal-box h2{ /*titulo elegir tu turno*/
  font-family:'Piazzolla', serif;
  font-weight:500;
  font-size:1.5rem; /*tamaño fuente*/
  color:var(--bone-light); /*color fuente*/
  margin:0 0 1.5rem;
}

.modal-close{  /*cruz para cerrar el modal*/
  position:absolute;
  top:1.4rem;
  right:1.2rem;
  background:none;
  border:none;
  color:var(--bone-light);
  font-size:1.8rem;
  cursor:pointer;
  line-height:1;
}

.modal-turnos-list{ /*orden lista de días*/
  display:flex;
  flex-direction:column;
  gap:0.8rem;
}

.modal-turno-item{ /*borde cards días*/
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(246,242,232,0.06);
  border:1px solid rgba(238, 185, 50, 0.12);
  border-radius:4px;
  padding:1rem 1.2rem;
  cursor:pointer;
  transition:background 0.2s ease;
}

.modal-turno-item:hover{ /*acción al pasar sobre turno*/
  background:rgba(246,242,232,0.12);
}

.modal-turno-item.disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.modal-turno-info{ /*color texto de los horarios*/
  color:var(--bone-light);
  font-size:0.95rem;
}

.modal-turno-elegido{ /*color del texto del día seleccionado*/
  color:var(--bone);
  font-size:0.9rem;
  margin:0 0 1.5rem;
}

#reserva-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.modal-form-row{
  display:flex;
  gap:1rem;
}

#reserva-form input{ /*color card de nombre, apellido, email...*/
  background:rgba(246,242,232,0.06);
  border:1px solid rgba(246,242,232,0.18);
  border-radius:4px;
  padding:0.8rem 1rem;
  color:var(--bone-light);
  font-family:'Archivo', sans-serif;
  font-size:0.95rem;
  width:100%;
}

#reserva-form input::placeholder{  /*color texto de la card nombre, apellido, email...*/
  color:rgba(246,242,232,0.5);
}

#reserva-form button{
  border:none;
  cursor:pointer;
}

#btn-volver-turnos{
  background-color: var(--line);
  color: var(--ink); /*antes var(--bone-light): texto oscuro, se lee mejor*/
}

  .modal-tabs{ 
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:1.2rem; /*separación entre botones días y horarios*/
}

.modal-tab{ /*botones días*/
  background:rgba(246,242,232,0.1);
  border:1px solid rgba(246,242,232,0.25);
  color:var(--bone-light);
  font-family:'Archivo', sans-serif;
  font-size:0.82rem;
  padding:0.45rem 1rem; /*ancho*/
  border-radius:20px;
  cursor:pointer;
  transition:background 0.2s ease;
}

.modal-tab:hover{ /*acción botones días*/
  background:rgba(246,242,232,0.2);
}

.modal-tab.active{ /*color boton día seleccionado*/
  background:var(--sage);
  border-color:var(--sage);
  color:var(--ink);
  font-weight:600;
}
/*=================================TURNOS DE ESTA SEMANA=================================*/

  .agenda-tabs{ /*botones días*/
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem; /*separación de los mismo botones*/
  margin-bottom:2rem; /*separación botones de cards de horarios*/
}

.agenda-tab{ /*estilo botones días*/
  background:rgba(246,242,232,0.06); /*color fondo botones sin seleccionar*/
  border:1px solid rgba(246,242,232,0.14);
  color:var(--bone-light);
  font-family:'Archivo', sans-serif;
  font-size:0.9rem;
  padding:0.6rem 1.3rem;
  border-radius:20px;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}

.agenda-tab:hover{ /*color acción botones días*/
  background:rgba(246,242,232,0.12);
}

.agenda-tab.active{
  background:var(--sage); /*color de fondo boton en accion*/
  border-color:var(--sage); /*color borde boton*/
  color:var(--ink); /*color texto dentro del boton*/
  font-weight:600;
}

.agenda-horarios{ /*distrubucción responsiva cards de turnos*/
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1rem;
}

.horario-item{ /*cards turnos*/
  background: var(--rustOpa); /*color de fondo card*/
  border:1px solid var(--sage); /*color borde card]*/
  border-radius:4px; /*bordes cards*/
  padding:1rem 1.2rem; /*separación entre cards*/
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.horario-item .time{ /*días*/
  font-family:'Piazzolla', serif;
  font-size:1.1rem; 
  color:var(--bone-light);
}

  /* ============================= FOOTER ===============================*/

  *{ box-sizing:border-box; }

  body{ margin:0; font-family:'Archivo', sans-serif; }

  .site-footer{
  background:rgba(246,242,232,0.08);
    backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
    padding:4rem 2rem 2rem;
    margin-top:4rem;
  }
  

  .footer-inner{
    max-width:1200px;
    margin:0 auto;
  }

 .footer-top{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:3rem;
    padding-bottom:3rem;
}

  .footer-mark{
    font-family:'Piazzolla', serif;
    font-weight:500;
    font-size:1.3rem;
    color:var(--bone-light);
    margin:0 0 0.9rem;
  }

  .footer-top p{
    font-size:0.92rem;
    line-height:1.65;
    max-width:32ch;
    margin:0;
  }

  .footer-col h3{
    font-size:0.85rem;
    font-weight:600;
    color:var(--bone-light);
    margin:0 0 1.1rem;
  }

  .footer-col ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0.7rem;
  }

  .footer-col a{
    color:rgba(246,242,232,0.7);
    text-decoration:none;
    font-size:0.92rem;
    transition:color 0.2s ease;
  }

  .footer-col a:hover{ color:var(--rust); }

  .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    padding-top:1.75rem;
    border-top:1px solid rgba(246,242,232,0.14);
  }

  .footer-bottom p{
    margin:0;
    font-size:0.82rem;
    color:rgba(246,242,232,0.45);
  }

  .footer-social{
    display:flex;
    gap:1.4rem;
  }

  .footer-social a{
    color:rgba(246,242,232,0.7);
    text-decoration:none;
    font-size:0.85rem;
    transition:color 0.2s ease;
  }

    .footer-legal{
    color:inherit;
    text-decoration:none;
    transition:color 0.2s ease;
  }

  .footer-legal:hover{
    color:var(--bone-light);
    text-decoration:underline;
  }

  .footer-social a:hover{ color:var(--sage); }

 @media (max-width:760px){
    .footer-bottom{ flex-direction:column; align-items:flex-start; }

    .footer-top{
        gap:1.2rem;
        padding-bottom:2rem;
    }

    .footer-mark{ font-size:1.05rem; }
    .footer-top p{ font-size:0.8rem; line-height:1.5; }
    .footer-col h3{ font-size:0.75rem; margin-bottom:0.7rem; }
    .footer-col a{ font-size:0.78rem; }
    .footer-col ul{ gap:0.45rem; }
}

  a:focus-visible{
    outline:2px solid var(--rust);
    outline-offset:3px;
  }

  /*==============================VALIDACIONES=================================*/
  .input-group{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  width:100%;
}

.input-error{
  color:#E9B8A4;
  font-size:0.78rem;
  min-height:1rem;
}

#reserva-form input.invalid{
  border-color:#9C4A2E;
}

/*==============================CASILLA DE PRIVACIDAD=================================*/

.check-privacidad{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.88rem;
  color:var(--bone);
  cursor:pointer;
}

.check-privacidad a{
  color:var(--bone-light);
  text-decoration:underline;
}

/* Que la casilla no tome el estilo de los otros campos del formulario */
#reserva-form input[type="checkbox"]{
  width:18px;
  height:18px;
  padding:0;
  margin:0;
  flex-shrink:0;
  accent-color:var(--rust-dark);
  cursor:pointer;
}

/*==================== AJUSTES HERO + TURNOS EN UNA PANTALLA ====================*/

/*--- navbar ---*/
.nav{
  padding-top:1.5rem;
}

.nav-cta{ /*botón Reservar, mismo color que Reservar clase*/
  background:var(--rust-dark);
}

.nav-cta:hover{
  background:var(--ink);
}

/*--- hero ---*/
.hero{
  padding:2rem 2rem 0.5rem;
  grid-template-columns:1fr;
  align-items:start;
}

.hero-copy h1{ /*ejercicio con precisión*/
  font-size:clamp(2.8rem, 3.8vw, 3.4rem);
  margin-top:0;
  margin-bottom:1.3rem;
}

.hero-copy p{ /*clases de reformer en grupos reducidos...*/
  font-size:1rem;
  line-height:1.55;
  max-width:46ch;
  margin-bottom:0;
}

.hero-side{
  justify-self:start;
  margin-top:1.4rem; /*espacio entre el párrafo y los números*/
}

.hero-meta{ /*8 camas, 50 minutos, 6 días*/
  flex-direction:row;
  gap:2rem;
}

.hero-meta div{
  gap:0;
}

.hero-meta .num{
  font-size:1.8rem;
  line-height:1.2;
}

.hero-meta .lbl{
  font-size:0.9rem;
  text-shadow:0 1px 8px rgba(0,0,0,0.7); /*se lee mejor sobre el video*/
}

.scroll-hint{
  display:none;
}

/*--- turnos de esta semana ---*/
.agenda{
  padding:1rem 2rem 3rem;
}

.agenda-inner{
  max-width:calc(1200px - 4rem); /*alineado con el título del hero*/
}

.agenda-header{
  margin-bottom:1rem;
}

.agenda-header h2{
  font-size:1.8rem;
}

.agenda-header p{ /*frase repetida*/
  display:none;
}

.agenda-tabs{
  margin-bottom:1.2rem;
}

.horario-item .spots{ /*etiqueta "8 lugares" del tamaño del texto*/
  align-self:flex-start;
}

.hero-actions{ /*línea + botón Reservar clase*/
  margin-top:1.5rem;
  padding-top:1.5rem;
}

/*--- celular: horarios de a 2 por fila ---*/
@media (max-width:480px){
  .agenda-horarios{
    grid-template-columns:repeat(2, 1fr);
    gap:0.8rem;
  }
}