/* ============================================================
   Ávalos Angorrilla — Altos de Simón Verde, Mairena del Aljarafe
   Paleta sacada del propio logo: el crema es EXACTAMENTE el fondo
   del archivo (#ecdac7), así el logo se funde con la página sin
   que se vea el rectángulo de la imagen.
   ============================================================ */

:root {
  --crema:        #ecdac7;
  --crema-claro:  #f6ebdd;
  --papel:        #fffaf3;
  --tinta:        #241207;
  --tinta-suave:  #5a4030;
  --brasa:        #7a3b18;
  --brasa-honda:  #5d2c11;
  --oro:          #a9752f;
  --cacao:        #2b1810;
  --linea:        #d6bfa6;
  --abierto:      #3d6b2f;
  --cerrado:      #8c3a2c;

  --display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --texto: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Hueco para la barra fija del móvil. */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--brasa); }

:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 3px;
}

.contenedor {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.salta-a {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: var(--crema);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.salta-a:focus { left: 0; }

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

h2 {
  font-size: clamp(1.6rem, 5vw, 2.35rem);
  letter-spacing: 0.02em;
}

h3 {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rotulo {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 0.6rem;
}

.oculta {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--texto);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.boton svg { width: 1.25rem; height: 1.25rem; flex: none; }

.boton--fuerte { background: var(--brasa); color: var(--papel); }
.boton--fuerte:hover { background: var(--brasa-honda); }

.boton--linea {
  border-color: var(--tinta);
  color: var(--tinta);
  background: transparent;
}
.boton--linea:hover { background: var(--tinta); color: var(--crema); }

.boton--crema { background: var(--crema); color: var(--tinta); }
.boton--crema:hover { background: var(--papel); }

.boton--cremalinea {
  border-color: rgba(236, 218, 199, 0.55);
  color: var(--crema);
}
.boton--cremalinea:hover { background: rgba(236, 218, 199, 0.12); }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--tinta);
  margin-right: auto;
}

/* El león va con transparencia: no necesita recorte redondo, y su
   proporción no es cuadrada. */
.marca img {
  width: 2.9rem;
  height: auto;
}

.marca__nombre {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.1;
}

.marca__bajo {
  display: block;
  font-family: var(--texto);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--tinta-suave);
}

.cabecera nav { display: none; }

@media (min-width: 62rem) {
  .cabecera nav { display: flex; gap: 1.75rem; }
  .cabecera nav a {
    color: var(--tinta-suave);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
  }
  .cabecera nav a:hover { color: var(--tinta); }
}

.cabecera .boton { min-height: 2.75rem; padding: 0 1.1rem; font-size: 0.95rem; }

/* ---------- Portada ---------- */

.portada {
  text-align: center;
  padding: 1.75rem 0 3rem;
}

.portada__logo {
  width: min(19rem, 76vw);
  margin: 0 auto;
}

/* Una sola fila: el punto, el estado y el horario de hoy alineados por el
   centro. En pantalla estrecha el horario baja a su propia línea y sigue
   centrado, en vez de descuadrarse. */
.estado {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.55rem;
  margin: 0.5rem auto 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.estado[data-visible='si'] { display: flex; }
.estado__punto { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
.estado--abierto { color: var(--abierto); }
.estado--abierto .estado__punto { background: var(--abierto); }
.estado--cerrado { color: var(--cerrado); }
.estado--cerrado .estado__punto { background: var(--cerrado); }

/* Sin margen ni `display: block`: eran de cuando esto iba debajo, y como
   elemento de la fila lo bajaban 2,8 px respecto a "Cerrado ahora". */
.estado__hoy {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--tinta-suave);
}

.reclamo {
  font-family: var(--display);
  font-size: clamp(1.45rem, 6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;
  margin: 1.5rem auto 0.9rem;
  max-width: 22ch;
}

/* La dirección, en texto y nada más entrar: es lo primero que busca
   quien ya conoce el bar. `address` viene en cursiva por defecto. */
.portada__donde {
  color: var(--tinta-suave);
  font-style: normal;
  margin: 0 auto;
  max-width: 44ch;
  line-height: 1.55;
}

.acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 34rem) {
  .acciones { flex-direction: row; justify-content: center; }
}

/* ---------- Secciones ---------- */

.seccion { padding: 3.5rem 0; }

.seccion--papel { background: var(--crema-claro); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

.seccion__cabeza { text-align: center; margin-bottom: 2.25rem; }
.seccion__cabeza p { color: var(--tinta-suave); max-width: 46ch; margin: 0.85rem auto 0; }

/* Filete doble, como el de su carta impresa. */
.filete {
  width: 4.5rem;
  height: 0;
  margin: 1.1rem auto 0;
  border-top: 1px solid var(--oro);
  border-bottom: 3px double var(--oro);
  padding-top: 3px;
}

/* ---------- Reservas: el bloque que manda ---------- */

.reservas {
  background: var(--cacao);
  color: var(--crema);
  padding: 3.5rem 0;
}

.reservas h2 { color: var(--crema); }
.reservas .rotulo { color: var(--oro); }
.reservas__texto {
  color: rgba(246, 235, 221, 0.82);
  max-width: 44ch;
  margin: 1rem auto 0;
}
.reservas__caja { text-align: center; }

.reservas__aviso {
  margin: 1.75rem auto 0;
  font-size: 0.95rem;
  color: rgba(246, 235, 221, 0.62);
  max-width: 42ch;
}

.reservas__aviso strong { color: var(--crema); }

/* ---------- Carta ---------- */

.carta {
  display: grid;
  gap: 1.25rem;
}

/* En pantalla ancha fluye en columnas en vez de rejilla: con rejilla, un
   grupo de seis platos al lado de otro de diez deja un hueco enorme.
   `break-inside: avoid` en cada grupo impide que uno se parta en dos. */
@media (min-width: 48rem) {
  .carta {
    display: block;
    columns: 2;
    column-gap: 1.5rem;
  }
  .grupo { margin-bottom: 1.5rem; }
}

.grupo {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 0.5rem;
  padding: 1.5rem 1.4rem;
  break-inside: avoid;
}

.grupo h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--tinta);
  font-size: 1.02rem;
}

.grupo h3::before {
  content: '';
  width: 0.44rem;
  height: 0.44rem;
  flex: none;
  background: var(--oro);
  transform: rotate(45deg);
}

.grupo h3 span {
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tinta-suave);
}

.grupo ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.grupo li {
  padding: 0.42rem 0;
  border-bottom: 1px dotted var(--linea);
  font-size: 1rem;
}
.grupo li:last-child { border-bottom: 0; padding-bottom: 0; }

.carta__pie {
  margin-top: 2rem;
  text-align: center;
}

.enlace-suave {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--brasa);
  text-decoration: none;
  border-bottom: 2px solid rgba(122, 59, 24, 0.35);
}
.enlace-suave:hover { border-bottom-color: var(--brasa); }
.enlace-suave svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Horario ---------- */

.horario {
  max-width: 34rem;
  margin: 0 auto;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 0.5rem;
  overflow: hidden;
}

.horario__dia {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--linea);
}
.horario__dia:last-child { border-bottom: 0; }

.horario__dia dt { font-weight: 700; text-transform: capitalize; }
.horario__dia dd { margin: 0; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.horario__dia[data-hoy='si'] { background: var(--crema); }
.horario__dia[data-hoy='si'] dt::after {
  content: 'hoy';
  margin-left: 0.5rem;
  font-family: var(--texto);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brasa);
}

.horario__dia--cerrado dd { color: var(--cerrado); font-weight: 700; }

/* ---------- Dónde y contacto ---------- */

.doble {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 52rem) {
  .doble { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

.ficha {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 0.5rem;
  padding: 1.75rem 1.5rem;
}

.ficha h3 { margin-bottom: 0.9rem; }
.ficha p { margin: 0 0 1.1rem; color: var(--tinta-suave); }
.ficha address { font-style: normal; }

.lista-contacto { list-style: none; margin: 0; padding: 0; }

.lista-contacto li + li { margin-top: 0.85rem; }

.lista-contacto a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 700;
  min-height: 2.75rem;
}
.lista-contacto a:hover { color: var(--brasa); }
.lista-contacto svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--brasa); }
.lista-contacto span small {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--tinta-suave);
}

/* ---------- Pie ---------- */

.pie {
  background: var(--cacao);
  color: rgba(246, 235, 221, 0.72);
  padding: 2.75rem 0 2.25rem;
  font-size: 0.95rem;
}

.pie__nombre {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--crema);
  margin: 0 0 0.75rem;
}

.pie a { color: var(--crema); }

.pie__rebix {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(236, 218, 199, 0.16);
  font-size: 0.85rem;
  color: rgba(246, 235, 221, 0.5);
}

/* ---------- Barra fija del móvil ---------- */

.barra {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--crema);
  border-top: 1px solid var(--linea);
}

.barra .boton { flex: 1; min-height: 3.1rem; }
.barra .boton--linea { flex: 0 0 3.6rem; padding: 0; }

@media (min-width: 62rem) {
  .barra { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}