:root {
  --honda:  #0D405D;  /* tinta exacta del logo */
  --jade:   #4FBFAE;  /* agua del Mar Menor */
  --somera: #D9EDE7;  /* agua somera */
  --sal:    #F2F4EF;  /* blanco de salina */
  --laton:  #C9922F;
  --laton-tinta: #8F6416; /* latón legible sobre fondo claro */
  --flamenco: #E7737F;
  --alarma: #C8322B;  /* solo el filete del bloque de reservas */

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --medida: 1080px;
  --aire: clamp(4.5rem, 9vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sal);
  color: var(--honda);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* ---- fotos ---- */

/* Banda a sangre. Es el mismo horizonte recto del filete de la portada, solo
   que fotografiado, asi que no lleva ni borde ni esquina redondeada. */
.banda {
  width: 100%;
  height: clamp(200px, 32vw, 440px);
  object-fit: cover;
  /* La banda es mas apaisada que el recorte, asi que corta arriba y abajo.
     El 58% deja el horizonte centrado en vez de hundido. */
  object-position: center 58%;
}

.foto {
  width: 100%;
  height: auto;
}

.foto-casa {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 340px;
}

.foto-reservas { margin-bottom: 1.25rem; }

.galeria-seccion { padding-block: var(--aire); }

/* Hueco a la espera de las fotos. El filete discontinuo es el unico de la web:
   dice "aqui va algo que todavia no esta", que es justo el mensaje. Sigue
   siendo recto, como todos los demas. */
.obras {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
  border: 1px dashed rgb(13 64 93 / 0.3);
  text-align: center;
}

.obras-marca {
  width: clamp(88px, 13vw, 120px);
  height: auto;
  opacity: 0.45;
}

.obras-titulo {
  margin: 0.25rem 0 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 40;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.1;
}

.obras .nota { margin: 0; }


a { color: inherit; }

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

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--honda);
  color: var(--sal);
  padding: 0.75rem 1.25rem;
  z-index: 10;
}
.saltar:focus { left: 0; }

.wrap {
  width: min(100% - 2.5rem, var(--medida));
  margin-inline: auto;
}


/* ---- zonas: la página desciende de la sal al agua honda ---- */

.zona-sal   { background: var(--sal); color: var(--honda); }
.zona-agua  { background: var(--somera); color: var(--honda); }
.zona-honda { background: var(--honda); color: #DCE9E4; }

.zona-agua  { border-top: 1px solid rgb(13 64 93 / 0.14); }
.zona-honda { border-top: 1px solid rgb(79 191 174 / 0.35); }


/* ---- tipografía ---- */

.antetitulo {
  margin: 0 0 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--laton-tinta);
}
.zona-honda .antetitulo { color: var(--laton); }

.t2 {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100;
  font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.t2-centro { text-align: center; }

.t3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 30;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.prosa p { margin: 0 0 1.1em; max-width: 46ch; }

.nota {
  margin: 0 0 1.1em;
  font-size: 0.875rem;
  line-height: 1.55;
  opacity: 0.8;
  max-width: 52ch;
}
.nota-centro { margin-inline: auto; text-align: center; }

.letra-chica {
  font-size: 0.75rem;
  opacity: 0.7;
  max-width: 44ch;
  margin: 0.75rem auto 0;
}


/* ---- portada ---- */

.portada { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5.5rem); }

.portada-alto {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}
@media (min-width: 880px) {
  .portada-alto {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

.marca {
  margin: 0;
  justify-self: start;
}

/* El arte nativo son 555 px de ancho. Mostrarlo por debajo de eso lo mantiene
   nítido en pantallas 2x; ampliarlo se vería blando. */
.logo {
  width: clamp(190px, 26vw, 270px);
  height: auto;
}

.titulo {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 28;
  font-weight: 600;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* El plato que va rotando. En latón y algo más pequeño que el titular: es otra
   voz, no compite con ella, y así la mayoría de los nombres caben en una línea.
   El min-height reserva sitio para dos líneas; sin él, cada cambio de plato
   movería toda la portada de golpe. */
.rotativo {
  display: block;
  margin-top: 0.15em;
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--laton-tinta);
  min-height: 2.24em;
}
@media (prefers-reduced-motion: no-preference) {
  .rotativo { transition: opacity 0.32s ease, transform 0.32s ease; }
  .rotativo[data-cambiando] { opacity: 0; transform: translateY(-8px); }
}

/* El horizonte va de borde a borde: es lo único recto que hay en el Mar Menor. */
.horizonte {
  height: 1px;
  border: 0;
  background: currentColor;
  opacity: 0.3;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
  transform-origin: left center;
}

.portada-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-end;
  justify-content: space-between;
}

.entrada {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
}

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}


/* ---- estado abierto / cerrado ---- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.estado[data-vacio] { opacity: 0.45; }
.estado .punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.estado[data-abierto="si"] { color: #147A63; }
.zona-honda .estado[data-abierto="si"] { color: var(--jade); }
.estado[data-abierto="no"] { color: var(--flamenco); }


/* ---- botones y enlaces ---- */

.boton {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--honda);
  color: var(--sal);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.boton:hover { background: #093139; transform: translateY(-1px); }

.boton-claro {
  background: var(--jade);
  color: var(--honda);
  align-self: flex-start;
  margin-bottom: 1.25rem;
}
.boton-claro:last-child { margin-bottom: 0; }
.boton-claro:hover { background: #6FD0C0; }

/* Boton de contorno: pesa como un boton sin competir con el solido de al lado. */
.boton-linea {
  background: transparent;
  color: var(--honda);
  border: 1px solid rgb(13 64 93 / 0.45);
  padding-block: calc(0.7rem - 1px);
}
.boton-linea:hover {
  background: var(--honda);
  color: var(--sal);
  border-color: var(--honda);
}

.enlace-sobrio {
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  opacity: 0.75;
}
.enlace-sobrio:hover { opacity: 1; }


/* ---- la casa ---- */

/* La portada y la casa comparten fondo: sin filete que las separe, el aire de
   la costura tiene que ser menor o se lee como un hueco olvidado. */
.casa { padding-block: clamp(3rem, 6vw, 5rem) var(--aire); }

.dos-col {
  display: grid;
  gap: 2rem clamp(2rem, 6vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .dos-col { grid-template-columns: 0.85fr 1fr; }
}

.datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(13 64 93 / 0.16);
}
.datos dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laton-tinta);
  margin-bottom: 0.3rem;
}
.datos dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: 1.375rem;
  font-weight: 500;
}


/* ---- la carta ---- */

.carta { padding-block: var(--aire); }
.carta .antetitulo { text-align: center; }

/* Con 85 platos, el movil son cinco pantallas de scroll. Estos enlaces son
   navegacion de verdad, no adorno. */
.indice-carta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.35rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.indice-carta a {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgb(13 64 93 / 0.22);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--laton-tinta);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.indice-carta a:hover {
  background: var(--honda);
  border-color: var(--honda);
  color: var(--sal);
}

/* El ancla no debe quedar pegada al borde de arriba al saltar. */
.grupo { scroll-margin-top: 2rem; }

/* Columnas y no rejilla: los grupos no tienen el mismo alto y una rejilla
   igualaría las filas a la más alta, dejando huecos entre secciones. */
.platos {
  columns: 300px 3;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.grupo {
  break-inside: avoid;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.grupo .t3 {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgb(13 64 93 / 0.22);
}
.grupo .nota { margin-top: 0.85rem; }

.lista {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
.lista li {
  padding: 0.7rem 0;
  border-bottom: 1px solid rgb(13 64 93 / 0.1);
}
.lista li:last-child { border-bottom: 0; }

/* Solo en dispositivos con puntero de verdad: en táctil el hover se queda
   pegado tras el toque y la fila parece seleccionada sin serlo. */
@media (hover: hover) {
  .lista li { transition: transform 0.18s ease; }
  .lista li:hover { transform: translateX(5px); }
  .lista li:hover .plato { color: var(--laton-tinta); }
}

.plato {
  display: block;
  font-weight: 500;
  transition: color 0.18s ease;
}
.plato em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.8125rem;
  opacity: 0.65;
}
.plato-nota {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.75;
  max-width: 40ch;
}

.nota-alergenos {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(13 64 93 / 0.18);
  max-width: 46ch;
}


/* ---- franja de reservas ---- */

/* Va dentro de la portada, debajo del titular: es el primer bloque de la web.
   Jade sobre la crema de la portada, con filete rojo para que no se lea como
   una seccion mas. El rojo solo esta aqui en toda la web. */
.franja-reserva {
  grid-column: 1 / -1;
  background: var(--jade);
  color: var(--honda);
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2.25rem);
  border: 3px solid var(--alarma);
  border-radius: 14px;
}

.franja-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem clamp(2rem, 5vw, 4rem);
}

.franja-reserva .antetitulo {
  margin-bottom: 0.6rem;
  color: var(--honda);
  opacity: 0.65;
}

.franja-clave {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 40;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.franja-nota {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  opacity: 0.8;
}

.franja-tel {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 90;
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.franja-tel a {
  text-decoration: none;
  border-bottom: 2px solid rgb(13 64 93 / 0.35);
  padding-bottom: 0.08em;
}
.franja-tel a:hover { border-bottom-color: var(--honda); }


/* ---- la visita ---- */

.visita { padding-block: var(--aire); }

.visita-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(79 191 174 / 0.4);
}
.bloque .t3 { color: #FFFFFF; }
.bloque .nota { opacity: 0.78; }

address {
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.horario {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  text-align: left;
}
.horario caption {
  text-align: left;
  margin-bottom: 0.5rem;
}
.horario th,
.horario td {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgb(220 233 228 / 0.14);
  font-weight: 400;
  font-size: 0.9375rem;
  vertical-align: baseline;
}
.horario td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La condicion de la reserva pesa mas que el propio numero, asi que va en la
   tipografia de titulos y por encima de el. */
.reserva-clave {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
}

.telefono {
  margin: 0.25rem 0 1rem;
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 60;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 500;
}
.telefono a {
  text-decoration: none;
  border-bottom: 1px solid rgb(201 146 47 / 0.6);
}
.telefono a:hover { border-bottom-color: var(--laton); }


/* ---- pie ---- */

.pie {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid rgb(79 191 174 / 0.22);
}
.pie-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
/* El logo es tinta oscura: sobre el fondo hondo hay que pasarlo a blanco. */
.logo-pie {
  width: clamp(150px, 22vw, 185px);
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.pie .nota { margin: 0; opacity: 0.75; max-width: 64ch; text-wrap: balance; }
.pie a { text-decoration-color: rgb(220 233 228 / 0.4); }


/* ---- la carga de la portada: un solo gesto de izquierda a derecha ---- */

@media (prefers-reduced-motion: no-preference) {
  /* El logo y el horizonte barren a la vez, en la misma direccion y con la
     misma curva, para que se lean como un unico trazo y no como dos efectos.
     Nota: es un barrido, no un trazado real. El trazado con stroke-dashoffset
     necesita paths SVG y el logo es un PNG; en cuanto haya version vectorial
     se puede cambiar aqui. */
  .portada .logo { animation: barrer 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
  .horizonte[data-anima] { animation: trazar 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }

  .portada-pie { animation: subir 0.7s ease-out 0.75s both; }
  .portada .antetitulo, .titulo { animation: subir 0.7s ease-out both; }
  .portada .antetitulo { animation-delay: 0.05s; }
  .titulo { animation-delay: 0.1s; }

  /* Cinco parpadeos y se acaba. Solo se mueve el filete y el halo: el texto
     y el fondo no cambian, asi que el telefono se lee todo el rato. */
  .franja-reserva { animation: alertar 0.7s ease-in-out 0.9s 5 both; }
}

@keyframes alertar {
  0%, 100% { border-color: var(--alarma); box-shadow: 0 0 0 0 rgb(200 50 43 / 0); }
  50%      { border-color: var(--sal);    box-shadow: 0 0 0 8px rgb(200 50 43 / 0.28); }
}

@keyframes barrer {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes trazar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ---- bloques que suben al entrar en pantalla ---- */

/* Solo se esconden si hay JS (.js-anim) y si nadie ha pedido menos movimiento.
   Sin JS, o con IntersectionObserver ausente, no se aplica nada y la web se ve
   completa: no hay forma de que el contenido quede invisible. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-sube] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js-anim [data-sube][data-visible] {
    opacity: 1;
    transform: none;
  }

  /* La carta no aparece de golpe: la rejilla solo hace de disparador y lo que
     entra son los diez grupos, encadenados. Reaprovecha el observador que ya
     hay; no añade JavaScript. */
  .js-anim .platos[data-sube] { opacity: 1; transform: none; }

  .js-anim .platos .grupo {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js-anim .platos[data-visible] .grupo { opacity: 1; transform: none; }

  .js-anim .platos .grupo:nth-child(2)  { transition-delay: 0.05s; }
  .js-anim .platos .grupo:nth-child(3)  { transition-delay: 0.10s; }
  .js-anim .platos .grupo:nth-child(4)  { transition-delay: 0.15s; }
  .js-anim .platos .grupo:nth-child(5)  { transition-delay: 0.20s; }
  .js-anim .platos .grupo:nth-child(6)  { transition-delay: 0.25s; }
  .js-anim .platos .grupo:nth-child(7)  { transition-delay: 0.30s; }
  .js-anim .platos .grupo:nth-child(8)  { transition-delay: 0.35s; }
  .js-anim .platos .grupo:nth-child(9)  { transition-delay: 0.40s; }
  .js-anim .platos .grupo:nth-child(10) { transition-delay: 0.45s; }

  /* El punto late solo cuando está abierto: dice que el dato es de ahora
     mismo, no un horario pegado en la web. */
  .estado[data-abierto="si"] .punto { animation: latir 2.4s ease-in-out infinite; }
}

@keyframes latir {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}


@media (max-width: 600px) {
  .portada-acciones { width: 100%; }
  .boton { flex: 1 1 auto; text-align: center; }
}