@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair-italic.woff2') format('woff2');
}

/* Doña Alicia — estilo de la marca para la página de clientes.
   Colores del logo y de la carta: crema, rojo Doña Alicia, dorado y espresso. */
:root {
  --rojo-da: #c8222a;
  --rojo-da-oscuro: #9e1a21;
  --dorado: #c4943a;
  --crema: #f5edd8;
  --crema-2: #efe3c6;
  --espresso: #22160f;
  --verde-hoja: #2f4a3a;
  --azul-correo: #23408e;

  /* Se reutilizan los nombres de la base para cambiar todo el estilo de una vez */
  --azul-950: #1a110b;
  --azul-900: #2a1b13;
  --azul-700: var(--rojo-da);
  --azul-500: #d9474e;
  --azul-200: #dfcfac;
  --azul-100: #eadcbd;
  --azul-50: #fbf6ea;
  --azafran: var(--dorado);
  --azafran-600: #a87a28;
  --azafran-100: #f6ead0;
  --papel: var(--crema);
  --tinta: #2a1b13;
  --tinta-2: #6e5a48;
  --linea: #ddcca8;

  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --correo: repeating-linear-gradient(-45deg, var(--rojo-da) 0 14px, var(--crema) 14px 21px, var(--azul-correo) 21px 35px, var(--crema) 35px 42px);
  --fondo-azulejo: linear-gradient(180deg, rgba(20, 11, 6, 0.25) 0%, rgba(20, 11, 6, 0.55) 55%, rgba(20, 11, 6, 0.92) 100%), url('/img/plato.jpg');
}

body {
  background: var(--crema);
  color: var(--tinta);
}

/* ——— Portada: el plato con el mapa de Cuba iluminado ——— */
.marca {
  position: relative;
  min-height: 74vh;
  min-height: 74svh;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem 2.25rem;
  background: var(--fondo-azulejo);
  background-size: cover;
  background-position: center 62%;
}
.marca::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--correo);
}
.marca-barra {
  margin-bottom: auto;
}
.marca-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.idioma {
  background: rgba(26, 17, 11, 0.72);
  backdrop-filter: blur(4px);
}
.idioma button[aria-pressed='true'] {
  background: var(--crema);
  color: var(--espresso);
}

/* El nombre como un cartel crema con marco dorado, como el de las mesas */
.marca-nombre {
  display: block;
  width: min(100%, 24rem);
  aspect-ratio: 4.1;
  margin-top: 1.5rem;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  font-size: 1rem;
  background: var(--crema) url('/img/letras-rojo.png') no-repeat center / 84% auto;
  border: 2px solid var(--dorado);
  border-radius: 4px;
  box-shadow: inset 0 0 0 5px var(--crema), inset 0 0 0 6px rgba(196, 148, 58, 0.7), 0 12px 30px rgba(0, 0, 0, 0.45);
}
.marca-eslogan {
  margin-top: 1rem;
  padding: 0;
  max-width: 28ch;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--crema);
  background: none;
  border: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ——— Formulario sobre la foto de la mesa montada, como sello de agua ——— */
.reserva {
  background: var(--crema) url('/img/fondo-mesa.jpg') center top / cover no-repeat;
}
.reserva-interior {
  position: relative;
  padding: 1.75rem 1.25rem 2rem;
  margin: -0.5rem auto 0;
  background: rgba(251, 246, 234, 0.9);
  border: 1px solid var(--linea);
  border-radius: 6px;
  box-shadow: 0 18px 40px -22px rgba(42, 27, 19, 0.55);
}
.reserva-interior::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  border-radius: 6px 6px 0 0;
  background: var(--correo);
}
.titulo {
  font-style: italic;
  font-weight: 700;
  color: var(--rojo-da);
}
.subtitulo {
  color: var(--tinta-2);
}
.paso {
  border-top: 1px dashed var(--linea);
}
.paso h3 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--espresso);
}
.elegido {
  color: var(--rojo-da);
}

/* Botones de personas, días y horas */
.azulejo {
  background: #fffdf7;
  border-color: var(--azul-200);
  color: var(--espresso);
  border-radius: 8px;
}
.azulejo:hover:not([disabled]):not([aria-checked='true']) {
  border-color: var(--rojo-da);
  background: #fff;
}
.azulejo[aria-checked='true'] {
  background: var(--rojo-da);
  border-color: var(--rojo-da);
  color: #fff;
  box-shadow: inset 0 0 0 3px var(--rojo-da), inset 0 0 0 4px #f3c9a0;
}
.fecha[aria-disabled='true'],
.hora[aria-disabled='true'] {
  color: #a8987f;
  background: repeating-linear-gradient(135deg, #fffdf7 0 6px, var(--crema-2) 6px 7px);
}
.resumen-mesa {
  background: var(--azafran-100);
  border-left-color: var(--rojo-da);
  color: var(--espresso);
}

/* Botón principal en rojo Doña Alicia */
.btn-azafran,
.btn-primario {
  background: var(--rojo-da);
  border-color: var(--rojo-da);
  color: #fff;
}
.btn-azafran:hover:not([disabled]),
.btn-primario:hover:not([disabled]) {
  background: var(--rojo-da-oscuro);
  border-color: var(--rojo-da-oscuro);
}
.btn-reservar {
  font-family: var(--f-display);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

.campo input,
.campo select,
.campo textarea,
.otra-fecha input {
  background: #fffdf7;
  border-color: var(--linea);
}

/* Confirmación con banda de correo aéreo */
.exito {
  background: #fffdf7;
  border: 2px solid var(--espresso);
  box-shadow: 6px 6px 0 var(--dorado);
}
.exito-banda {
  height: 14px;
  background: var(--correo);
}

/* Horario y contacto */
.info {
  background: var(--espresso);
  color: var(--crema);
}
.info-bloque h2 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--dorado);
}
.horario dd {
  color: #e9dcc0;
}

.consulta {
  background: #fffdf7;
}

/* ——— Escritorio: el plato a la izquierda, la reserva a la derecha ——— */
@media (min-width: 980px) {
  .lado {
    background: linear-gradient(180deg, rgba(20, 11, 6, 0.55) 0%, rgba(20, 11, 6, 0.15) 40%, rgba(20, 11, 6, 0.25) 70%, rgba(20, 11, 6, 0.9) 100%), url('/img/plato-alto.jpg');
    background-size: cover;
    background-position: center 30%;
  }
  .lado::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    background: var(--correo);
  }
  .marca {
    min-height: 0;
    background: none;
  }
  .marca::after {
    display: none;
  }
  .marca-logo {
    width: 104px;
    height: 104px;
  }
  .marca-nombre {
    width: min(100%, 28rem);
  }
  .marca-eslogan {
    font-size: 1.5rem;
  }
  .info {
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    background: rgba(26, 17, 11, 0.8);
    backdrop-filter: blur(3px);
    border-top: 3px solid var(--dorado);
  }
  .info-bloque h2 {
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
  }
  .horario {
    gap: 0.15rem 1rem;
    font-size: 0.9375rem;
  }
  .horario dd span {
    display: inline;
  }
  .horario dd span + span::before {
    content: ' · ';
  }
  .reserva {
    padding: 3rem 2.5rem;
  }
  .reserva-interior {
    margin-top: 0;
    padding: 2.5rem 2.25rem;
  }
}

/* Grupos grandes: por confirmar */
.aviso-pendiente {
  margin: 0.5rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--dorado);
  background: var(--azafran-100);
  font-weight: 600;
  color: var(--espresso);
}
.estado.pendiente {
  background: #fdf0d8;
  color: #8a5a00;
}