/* --------------------------------- */
/*    Hero Reservas (Cabecera)       */
/* --------------------------------- */
.reservas-hero {
  position: relative;
  background: url('../images/reservas_header.jpg') center/cover no-repeat;
  height: 55vh;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
   margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}


.reservas-overlay {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

.reservas-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
}

.reservas-hero-content h1 {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.reservas-hero-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #eee;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* --------------------------------- */
/*       Sección About Terms         */
/* --------------------------------- */
.about-terms {
  padding: 8rem 1rem;
  background-color: #fafafa;      /* fondo claro */
}

.about-terms-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

/* Bloque de texto */
.about-terms-text {
  color: #333;
  max-width: 500px;
}

.about-terms-subtitle {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: #999;
}

.about-terms-text h2 {
  font-size: 2.5rem;
  margin: 0.5rem 0 0.75rem;
  color: #222;
}

.about-terms-line {
  width: 60px;
  height: 3px;
  background: #dd5903;
  margin-bottom: 1.5rem;
}

.about-terms-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #555;
}

/* Firma */
.about-terms-signature {
  display: block;
  max-width: 180px;
  margin-top: 2rem;
}

/* Bloque de imagen */
.about-terms-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* Responsive: apilar en móvil */
@media (max-width: 768px) {
  .about-terms-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-terms-text {
    order: 2;
  }
  .about-terms-image {
    order: 1;
  }
  .about-terms-text h2 {
    font-size: 2rem;
  }
  .about-terms-signature {
    margin: 2rem auto 0;
  }
}



/* --------------------------------- */
/*      CTA Reservas (Botón)         */
/* --------------------------------- */
.reservas-cta {
  padding: 4rem 1rem;
  text-align: center;
  
}

.reservas-cta .container {
  max-width: 600px;
  margin: 0 auto;
  
}

.reservas-cta p {
  margin-bottom: 1.5rem;
  color: #555;
  font-size: 1rem;
}

.btn-reservar {
  display: inline-block;
  background-color: #dd5903;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.btn-reservar:hover {
  background-color: #e07b00;
}

/* Responsive */
@media (max-width: 768px) {
  .reservas-hero-content h1 {
    font-size: 2.5rem;
  }
  .reservas-hero-content p {
    font-size: 0.9rem;
  }
  .reservas-cta p {
    font-size: 0.9rem;
  }
}

/* --------------------------------- */
/*   Tarjetas claro y alargadas      */
/* --------------------------------- */
.reservas-container {
 background-color: #0e0d0a;
padding: 140px 0px 140px 0px;
 
}


.reservas-cards.light {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 5.5rem;
  max-width: 1250px;
  margin: 0rem auto;           /* separa del bloque superior */
  
 
}

/* Tarjeta base */
.reservas-cards.light .card {
  position: relative;
  background: #0e0d0a;                  /* fondo blanco */
  color: #ffffff;                       /* texto oscuro */
  border: 0.1px solid #767676;            /* borde gris suave */
  
  padding: 4.5rem 1.5rem 3.5rem 1.5rem;            /* más alto para alargar */
  min-height: 580px;                 /* altura mínima */
  display: flex;
  flex-direction: column;
  justify-content: space-between;    /* contenido repartido */
  text-align: center;
  transition: box-shadow 0.3s ease;
}

/* Sombra ligera al hover */
.reservas-cards.light .card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* H4 pequeño y claro */
.reservas-cards.light .card h4 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: #dd5903;
}

/* Título principal */
.reservas-cards.light .card h3 {
  font-size: 1.8rem;
  margin: 0.25rem 0 1rem;
  color: #ffffff;
}

/* Párrafos */
.reservas-cards.light .card p {
  flex-grow: 1;        /* ocupa espacio disponible */
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

/* Links y botones */
.reservas-cards.light .card  {
  color: #ffffff;
  
  
}


.get-directions {
  font-size: 1.1rem;
  position: relative;
  display: inline-block;   /* importante: que mida sólo el texto */
  color: #fff;
  text-decoration: none;
  padding-bottom: 0.5em;   /* deja espacio para la línea */
  /* opcional: aumenta el z-index si el contenedor tiene borde superior */
  z-index: 1;
}

/* Pseudo-elemento centrado y separado del borde */
.get-directions::after {
  content: '';
  position: absolute;
  left: 50%;               /* punto de partida horizontal */
  bottom: 0;               /* justo en la base del enlace */
  transform: translateX(-50%) scaleX(1);
  transform-origin: left center;
  width: 180px;            /* ancho de la línea */
  height: 2px;
  background: #dd5903;
  transition: transform 0.4s ease;
}

/* Al hacer hover encogemos la línea de derecha a izquierda */
.get-directions:hover::after {
  transform: translateX(-50%) scaleX(0);
}

/* Para que la línea no toque el borde del contenedor, 
   eleva un poquito todo el enlace */
.reservas-cards.light .card .get-directions {
  margin-bottom: 1rem;     /* ajusta al gusto */
}



.reservas-cards.light .card .btn-card {
  display: block;         /* para que respete margins */
  margin: 1rem auto 0;    /* 1rem de separación arriba, auto centrar H, 0 abajo */
  max-width: 400px;
  background: #dd5903;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing:  0.03em;
  font-weight: 500;
  transition: background-color 0.3s ease;
  font-family: 'Montserrat', sans-serif;
}


 








.reservas-cards.light .card .btn-card:hover {
  background: #e07b00;
}

/* Horarios internos: más espacioso */
.reservas-cards.light .card .hours-block {
  
  margin-bottom: 2.5rem;
}
.reservas-cards.light .card .hours-block strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #ffffff;
}



/* Imagen de fondo al hover */
.reservas-cards .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Imagenes específicas por tarjeta */
.reservas-cards .card:nth-child(1)::before {
  background-image: url('../images/reservas_bg_address.jpg');
}
.reservas-cards .card:nth-child(2)::before {
  background-image: url('../images/reservas_bg_booking.jpg');
}
.reservas-cards .card:nth-child(3)::before {
  background-image: url('../images/reservas_bg_hours.jpg');
}

/* Al pasar el ratón muestra la imagen */
.reservas-cards .card:hover::before {
  opacity: 0.3;
}

/* Asegura legibilidad del texto sobre imagen */
.reservas-cards .card:hover * {
  position: relative;
  z-index: 1;
}



/* --------------------------------- */
/*    Sección Petición de Reserva    */
/* --------------------------------- */
.reservation-request {
  background: #fafafa;
  padding: 12rem 0rem 15rem 0rem;
}
.reservation-request .container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
   
}

/* Header con líneas laterales */
.reservation-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.reservation-header .line {
  flex: 1;
  height: 1px;
  max-width: 100px;
  background: #ccc;
}
.reservation-header small {
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #dd5903;
  letter-spacing: 0.1em;
}

/* Título y nota */
.reservation-request h2 {
  font-size: 2.5rem;
  margin: 0.25rem 0 0.8rem;
  color: #222;
}
.reservation-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  max-width: 700px;
  margin: 0 auto 5rem;
}

/* Controles comensales / fecha / hora */
.reservation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content:left;
  margin-bottom: 2rem;
  text-align: left;
  

  
}
.reservation-controls .control {
  flex: 1 1 180px;
  max-width: 366px;
  text-align: left;
 
}
.reservation-controls select,
.reservation-controls input[type="date"],
.reservation-controls input[type="time"] {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 0;
  font-size: 1rem;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  outline: none;
  cursor: pointer;
   
}
.reservation-controls select:focus,
.reservation-controls input:focus {
  border-bottom-color: #242424;
  transition: 1s;
}

/* Formulario de datos */
.reservation-form {
  text-align: left;
  
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  
  
}


input::placeholder,
textarea::placeholder {
  color: #000000;   /* elige tu color */
  opacity: 1;       /* por defecto algunos navegadores lo ponen más claro */
  font-style: normal; /* opcional */
}



.field input,
.field textarea {
  width: 100%;
  padding: 1.5rem 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 1rem;
  outline: none;
  background: transparent;
}
.field input:focus,
.field textarea:focus {
    border-bottom-color: #242424;
  transition: 1s;
}

/* Campo ancho completo */
.full-width {
  grid-column: 1 / -1;
}

/* Botón reserva */
.btn-reserve {
  display: inline-block;
  margin: 2rem auto 0;
  background-color: #dd5903;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing:  0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-reserve:hover {
  background-color: #e07b00;
}

/* Texto oculto para accesibilidad */
.sr-only {
  position: absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
 
}

/* Responsive */
@media (max-width: 600px) {
  .reservation-controls {
    flex-direction: column;
    align-items: center;
  }
  .btn-reserve {
    width: 100%;
  }
}

/* ===== Hero de la carta ===== */
section.hero-carta{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;              /* alto responsivo */
  max-height: 520px;
  min-height: 260px;
}
@supports not (aspect-ratio: 16 / 9){
  section.hero-carta{ height: 48vw; }
}
section.hero-carta > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
section.hero-carta .hero-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.35));
}

/* Título base (desktop) */
section.hero-carta .hero-overlay .hero-title{
  margin: 0;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
  text-align: center;
}

/* Solo responsive: más pequeño en móviles */
@media (max-width: 991.98px){
  section.hero-carta .hero-overlay .hero-title{
    font-size: clamp(1.3rem, 5.2vw, 2.1rem) !important;
  }
}
@media (max-width: 480px){
  section.hero-carta .hero-overlay .hero-title{
    font-size: clamp(1.15rem, 6.2vw, 1.6rem) !important;
    letter-spacing: .05em;
  }
}


/* ====== RESERVAS — alineación y responsive (override final) ====== */

/* Contenedor y espaciados suaves */
.reservation-request{
  background:#fafafa;
  padding: 6rem 0 8rem;                 /* antes 12rem 0 15rem */
}
.reservation-request .container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* Encabezado con líneas laterales */
.reservation-header{
  display:flex; align-items:center; justify-content:center;
  gap:.75rem; margin-bottom:.75rem;
}
.reservation-header .line{
  flex:1 1 120px; max-width:140px; height:1px; background:#d9d9d9;
}
.reservation-header small{
  white-space:nowrap; text-transform:uppercase;
  font-size:.85rem; letter-spacing:.12em; font-weight:700; color:#dd5903;
}

/* Título + nota */
.reservation-request h2{
  margin:.15rem 0 1rem;
  color:#222;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}
.reservation-note{
  font-size:.95rem; line-height:1.6; color:#555;
  max-width:760px; margin:0 auto 2.25rem;       /* menos margen abajo */
  text-align:center;
}

/* Formulario */
.reservation-form{ margin:0 auto; max-width:980px; text-align:left; }

/* Controles: Comensales / Fecha / Hora */
.reservation-controls{
  display:flex; flex-wrap:wrap; gap:18px;
  justify-content: space-between;               /* ← antes era `left` (inválido) */
  margin-bottom:1.5rem;
}
.reservation-controls .control{
  flex:1 1 260px; min-width:240px; max-width:360px;
}
.reservation-controls select,
.reservation-controls input[type="date"]{
  width:100%; padding:.9rem 0;
  font-size:1rem; border:0; border-bottom:1px solid #cfcfcf;
  background:transparent; outline:none;
}
.reservation-controls select:focus,
.reservation-controls input[type="date"]:focus{
  border-bottom-color:#242424; transition:border-color .25s ease;
}

/* Grid de campos (Nombre, Apellidos, Tel, Email) */
.form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(240px,1fr));
  gap:18px; margin-bottom:1.5rem;
}
.field input, .field textarea{
  width:100%; padding:1rem 0;
  border:0; border-bottom:1px solid #ccc; background:transparent; outline:none;
  font-size:1rem;
}
.field input:focus, .field textarea:focus{
  border-bottom-color:#242424; transition:border-color .25s ease;
}
.full-width{ grid-column:1 / -1; }

/* Botón */
.btn-reserve{
  display:block; margin:1.5rem auto 0;
  min-width:220px;
  background:#dd5903; color:#fff; border:0; cursor:pointer;
  padding:.75rem 1.5rem; font:500 .85rem/1 'Montserrat', sans-serif;
  text-transform:uppercase; letter-spacing:.03em;
  transition: background-color .25s ease;
}
.btn-reserve:hover{ background:#e07b00; }

/* Placeholders */
input::placeholder, textarea::placeholder{ color:#000; opacity:1; }

/* Accesibilidad */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .reservation-controls{ gap:14px; }
  .reservation-controls .control{ min-width:220px; }
}
@media (max-width: 768px){
  .reservation-header .line{ max-width:90px; }
  .reservation-note{ margin-bottom:1.5rem; padding:0 6px; }

  /* Controles y campos en 1 columna */
  .reservation-controls{
    display:grid; grid-template-columns:1fr; gap:14px;
  }
  .reservation-controls .control{ min-width:0; max-width:none; }
  .form-grid{ grid-template-columns:1fr; }

  /* Botón ancho completo si quieres */
  .btn-reserve{ width:100%; }
}