/* ===================================
   Salah The Chef
   Palette from Torrevieja itself: Mediterranean deep blue, the pink of the
   salt lagoon, and salt white.
   =================================== */

:root {
    --linen: #eef1ef;
    --plate: #fbf9f5;
    --sea: #0e3446;
    --sea-soft: #43606e;
    --rose: #a83f5c;
    --rose-dark: #86304a;
    --lagoon: #e9aab9;
    --lagoon-wash: #f6e1e6;
    --cobalt: #1f4a99;
    --saffron: #e3a92f;
    --wall: #f8f7f3;
    --tile: 44px;
    --rule: rgba(14, 52, 70, 0.18);

    --font-display: 'Young Serif', Georgia, serif;
    --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --gutter: clamp(1rem, 4vw, 3rem);
    --bar-h: 2.5rem;
    --nav-h: 4.25rem;
    --header-h: calc(var(--bar-h) + var(--nav-h));
    --page-h: calc(100svh - var(--header-h));
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
    margin: 0;
    background: var(--linen);
    color: var(--sea);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* ===== Art kit: hand-made Andalusian ornament in pure CSS ===== */
/* Azulejo: an eight-ray cobalt rosette with a saffron centre, tiled. */
.azulejo {
    background-color: #fff;
    background-image:
        radial-gradient(circle at 50% 50%, var(--saffron) 0 2.5px, transparent 3px),
        radial-gradient(circle at 50% 50%, #fff 0 9px, transparent 9.5px),
        repeating-conic-gradient(from 0deg at 50% 50%, var(--cobalt) 0 11.25deg, #fff 11.25deg 22.5deg),
        linear-gradient(var(--cobalt), var(--cobalt));
    background-size: var(--tile) var(--tile);
}
/* Horseshoe-arch window: a photo framed like a doorway, with a tiled jamb. */
.arch {
    padding: 10px 10px 0;
    border-radius: 999px 999px 0 0;
    background-color: #fff;
    background-image:
        repeating-conic-gradient(from 0deg at 50% 50%, var(--cobalt) 0 11.25deg, #fff 11.25deg 22.5deg);
    background-size: 22px 22px;
    box-shadow: 0 0 0 4px var(--wall);
}
.arch img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 0 0; background: #cfd6d1; }
/* Celosía: a diamond lattice, used as a whitewashed wall texture. */
.lattice {
    background-color: var(--wall);
    background-image:
        repeating-linear-gradient(45deg, rgba(31, 74, 153, 0.07) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(31, 74, 153, 0.07) 0 1px, transparent 1px 22px);
}
/* Scallop edge: a row of lace bumps, used above dark bands. */
.scallop-top { position: relative; }
.scallop-top::before {
    content: '';
    position: absolute;
    inset: -11px 0 auto 0;
    height: 12px;
    background: radial-gradient(circle at 11px 12px, var(--scallop, var(--sea)) 0 10.5px, transparent 11px) 0 0 / 22px 12px repeat-x;
}

/* ===== Buttons ===== */
.btn {
    --ink: #fff;
    display: inline-block;
    padding: 0.85rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 3px;
    overflow: hidden;
    white-space: nowrap;
    font: 600 1rem/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    /* The label is transparent and drawn twice as shadows: on hover the first
       rolls up and out while the second rolls in from below. */
    color: transparent;
    text-shadow: 0 0 0 var(--ink), 0 2.4em 0 var(--ink);
    transition: background-color 0.25s, border-color 0.25s, text-shadow 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.btn:hover, .btn:focus-visible { text-shadow: 0 -2.4em 0 var(--ink), 0 0 0 var(--ink); }
.btn-solid { background: var(--rose); --ink: #fff; }
.btn-solid:hover { background: var(--rose-dark); }
.btn-solid:disabled { opacity: 0.6; cursor: wait; }
.btn-ghost { border-color: rgba(255,255,255,.7); --ink: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-ghost-dark { border-color: var(--sea); --ink: var(--sea); }
.btn-ghost-dark:hover { background: var(--sea); --ink: #fff; }
/* Play button: a round seal with a CSS triangle and a slow ripple. */
.play-btn {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background-color 0.25s, transform 0.25s, border-color 0.25s;
}
.play-btn:hover { background: var(--lagoon); border-color: var(--lagoon); transform: scale(1.08); }
.play-btn:focus-visible { outline-color: #fff; }
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 0.95rem;
    border-color: transparent transparent transparent #fff;
    transform: translate(-30%, -50%);
    transition: border-left-color 0.25s;
}
.play-btn:hover .play-icon { border-left-color: var(--sea); }
.play-btn::after { content: ''; position: absolute; inset: -2px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .play-btn::after { animation: ripple 2.8s ease-out infinite; }
    @keyframes ripple { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
}
.btn-small { padding: 0.7rem 1.1rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

/* ===== Header ===== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: var(--plate);
    color: var(--sea);
    box-shadow: 0 1px 0 var(--rule);
}
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--bar-h);
    padding: 0 var(--gutter);
    background: var(--sea);
    color: #dbe7ec;
    font-size: 0.875rem;
}
.top-bar a { color: inherit; text-decoration: none; padding: 0.6rem 0; }
.top-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.25em; }
.top-info, .top-social { display: flex; align-items: center; gap: 1.25rem; }
.top-bar :focus-visible { outline-color: var(--lagoon); }
.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--nav-h);
    padding: 0 var(--gutter);
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 2.1rem; height: auto; }
.brand-name { display: flex; align-items: baseline; gap: 0.45rem; }
/* Yellowtail: a mid-century sign script, in the spirit of the habaneras era. */
.brand-script { font-family: 'Yellowtail', cursive; font-size: 2.15rem; line-height: 1; color: var(--sea); }
.brand-sub { font-family: var(--font-display); font-size: 1.05rem; color: var(--rose); }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav ul { display: flex; gap: 1.5rem; }
.site-nav li a { text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.site-nav li a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.lang-switch { display: flex; gap: 0.15rem; }
.lang-btn {
    min-height: 2.75rem;
    min-width: 2.5rem;
    padding: 0.3rem 0.5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--sea-soft);
    font: 600 0.85rem var(--font-body);
    cursor: pointer;
}
.lang-btn.active { color: var(--sea); border-bottom-color: var(--rose); }

.nav-toggle { display: none; }

/* ===== Hero ===== */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100svh;
}
.hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.8rem, 2.4svh, 1.75rem);
    padding: calc(var(--header-h) + clamp(0.75rem, 3svh, 2rem)) var(--gutter) calc(var(--tile) + clamp(1rem, 4svh, 3rem));
    background: #1f68a8;
    color: var(--plate);
}
.hero-copy::after { content: ''; position: absolute; inset: auto 0 0 0; height: var(--tile); background-color: #fff; }
.hero-copy::after { background-image: radial-gradient(circle at 50% 50%, var(--saffron) 0 2.5px, transparent 3px), radial-gradient(circle at 50% 50%, #fff 0 9px, transparent 9.5px), repeating-conic-gradient(from 0deg at 50% 50%, var(--cobalt) 0 11.25deg, #fff 11.25deg 22.5deg); background-size: var(--tile) var(--tile); }
.hero-copy > * { position: relative; z-index: 1; }
.hero-copy > .hero-rosette, .hero-copy > .hero-sun, .hero-copy > .hero-waves, .hero-copy > .stamp { position: absolute; z-index: 0; pointer-events: none; }
.hero-copy { overflow: hidden; background: linear-gradient(180deg, #12508d 0%, #1f68a8 45%, #3a8cc8 100%); }

/* Living scene: a setting sun, lagoon waves, a turning rosette and a stamp. */
.hero-rosette {
    left: -14rem; bottom: -16rem; width: 36rem; aspect-ratio: 1; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.05) 0 11.25deg, transparent 11.25deg 22.5deg);
    -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 31%); mask: radial-gradient(circle, transparent 0 30%, #000 31%);
}
.hero-sun {
    top: calc(var(--header-h) + 2rem); right: 2.5rem; width: 9rem; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #fde3e8 0%, var(--lagoon) 72%);
    box-shadow: 0 0 90px 24px rgba(253, 227, 232, 0.35);
}
.hero-waves { left: 0; bottom: var(--tile); width: 100%; height: 7.5rem; }
.wave { transform-box: fill-box; }
.w1 { fill: rgba(233, 170, 185, 0.35); }
.w2 { fill: rgba(18, 80, 141, 0.7); }
.w3 { fill: rgba(255, 255, 255, 0.28); }
.stamp { right: 2rem; bottom: calc(var(--tile) + clamp(6rem, 17svh, 11rem)); width: clamp(6.5rem, 12svh, 8.5rem); }
.stamp text { font: 600 15px var(--font-body); letter-spacing: 0.04em; fill: var(--plate); }
.stamp-ring { fill: none; stroke: rgba(251, 249, 245, 0.35); stroke-width: 1; }
.stamp-dot { fill: var(--saffron); }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 .line:first-child { padding: 0.12em 0.2em 0.04em 0; margin-bottom: -0.12em; }
.hero h1 .line:first-child > span { font-family: 'Yellowtail', cursive; font-size: 1.5em; line-height: 1; letter-spacing: 0; padding-right: 0.15em; }
.hero-kicker { color: #d3e8f6; font-size: 1rem; }
.hero h1 { font-size: clamp(2.6rem, min(8.5vw, 12.5svh), 7.5rem); letter-spacing: -0.01em; }
.hero-sub { max-width: 30rem; font-size: 1.25rem; color: #eaf4fb; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.hero-actions .btn-solid { background: var(--lagoon); --ink: var(--sea); }
.hero-actions .btn-solid:hover { background: #f6c9d3; }
.hero-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h) + 1.5rem) clamp(1rem, 4vw, 3.5rem) 1.5rem;
    overflow: hidden;
}
.hero-photo { background-color: var(--wall); background-image: repeating-linear-gradient(45deg, rgba(31, 74, 153, 0.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(31, 74, 153, 0.07) 0 1px, transparent 1px 22px); }
.hero-photo .arch { width: min(100%, 34rem); height: calc(100svh - var(--header-h) - 3rem); max-height: 58rem; padding: 10px; border-radius: 999px 999px 10px 10px; }
.hero-photo .arch img { border-radius: 999px 999px 4px 4px; }
.hero-photo .arch img { object-position: 50% 40%; }

@media (prefers-reduced-motion: no-preference) {
    .hero-sun { animation: sun-bob 9s ease-in-out infinite alternate; }
    .hero-rosette { animation: turn 180s linear infinite; }
    .stamp { animation: turn 38s linear infinite; }
    .hero-waves { width: 200%; }
    .w1 { animation: drift-x 16s linear infinite; }
    .w2 { animation: drift-x 24s linear infinite reverse; }
    .w3 { animation: drift-x 11s linear infinite; }
    .hero h1 .line > span { animation: rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .hero h1 .line:nth-child(2) > span { animation-delay: 0.18s; }
    .hero-kicker { animation: fade-in 1s 0.5s both; }
    .hero-sub, .hero-actions { animation: fade-in 1s 0.7s both; }
    @keyframes rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes turn { to { transform: rotate(360deg); } }
    @keyframes sun-bob { from { transform: translateY(0) scale(1); } to { transform: translateY(14px) scale(1.04); } }
    @keyframes drift-x { to { transform: translateX(-50%); } }
}

/* The one orchestrated moment: the arch opens once on load. */
@media (prefers-reduced-motion: no-preference) {
    .hero-photo .arch { animation: open-arch 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .hero-photo .arch img { animation: settle 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    @keyframes open-arch { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
    @keyframes settle { from { transform: scale(1.14); } to { transform: scale(1); } }
}

/* ===== Sections ===== */
.section { padding: clamp(4rem, 9vw, 8rem) var(--gutter); max-width: 90rem; margin: 0 auto; }
.section h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 18ch; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 3rem; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.tab {
    min-height: 2.75rem;
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--sea-soft);
    font: 600 1rem var(--font-body);
    cursor: pointer;
}
.tab:hover { color: var(--sea); }
.tab.active { color: var(--sea); border-bottom-color: var(--rose); }

/* ===== About ===== */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.about-photo .arch { max-width: 28rem; }
.about-photo .arch img { aspect-ratio: 4 / 5.4; height: auto; }
.about-photo .arch img { object-position: 50% 22%; }
.about-copy { display: flex; flex-direction: column; gap: 1.25rem; max-width: 38rem; }
.about-copy .lead { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.35; }
.list-title { font-size: 1.1rem; margin-top: 1rem; }
.plain-list li { padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.plain-list li:last-child { border-bottom: 1px solid var(--rule); }

/* ===== Torrevieja ===== */
.torrevieja-wrap { background: var(--lagoon-wash); position: relative; }
.torrevieja-wrap::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto 0;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14'%3E%3Cpath d='M0 0h60v7c-7.5 0-7.5 7-15 7s-7.5-7-15-7-7.5 7-15 7S7.5 7 0 7z' fill='%23eef1ef'/%3E%3C/svg%3E") repeat-x;
}
.torrevieja-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 3.5rem; }
.torrevieja-head p { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; max-width: 34rem; }
.tradition-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.tradition { padding-top: 1.1rem; border-top: 3px solid var(--rose); }
.tradition h3 { font-size: 2rem; color: var(--rose-dark); margin-bottom: 0.75rem; }
.tradition p { color: var(--sea-soft); }
.torrevieja-banner { margin: 0 0 3.5rem; }
.torrevieja-banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; border-radius: 2px; background: #d9c5ca; }
.postal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 4rem; }
.postal-row figure { margin: 0; }
.postal-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: #d9c5ca; }
.torrevieja figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--sea); }
.torrevieja figcaption small { display: block; margin-top: 0.15rem; font-size: 0.8rem; color: var(--sea-soft); }
.torrevieja figcaption a { color: inherit; }
.torrevieja-note { margin-top: 3rem; color: var(--sea-soft); font-size: 0.95rem; }

/* ===== Plans ===== */
.section-intro { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; max-width: 28rem; color: var(--sea-soft); }
.plans { max-width: none; background: var(--wall); }
.plans .section-head, .plans .plan-list { max-width: 82rem; margin-inline: auto; }
.plan-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.75rem; }
.plan { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.plan .arch { width: 100%; margin-bottom: 0.6rem; }
.plan .arch img { aspect-ratio: 3 / 4; height: auto; }
.plan h3 { font-size: 1.5rem; }
.plan p { color: var(--sea-soft); max-width: 17rem; flex: 1; }
.plan .btn { margin-top: 0.4rem; }

/* ===== Services ===== */
.services { background: var(--plate); max-width: none; padding-inline: max(var(--gutter), calc((100vw - 90rem) / 2 + var(--gutter))); }
.service-list { margin-top: 3rem; }
.service-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 9rem;
    gap: 1rem 2.5rem;
    align-items: baseline;
    padding: 1.6rem 0;
    border-top: 1px solid var(--rule);
}
.service-list li:last-child { border-bottom: 1px solid var(--rule); }
.service-list h3 { font-size: 1.5rem; }
.service-list p { color: var(--sea-soft); max-width: 36rem; }
.service-price { text-align: right; font-weight: 600; }

/* ===== Menu ===== */
.dish img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 3px 3px; margin-bottom: 1rem; background: #cfd6d1; box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--cobalt); }
.dish { text-align: center; padding: 0 7px; }
.dish p { margin-inline: auto; }
.dish h3 { margin-top: 1.4rem; }
.dish h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.dish p { color: var(--sea-soft); max-width: 24rem; }

/* ===== Menu: a horizontal slide of dishes ===== */
.menu { max-width: none; padding-inline: max(var(--gutter), calc((100vw - 90rem) / 2 + var(--gutter))); }
.menu .section-head { align-items: center; }
.menu-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 2rem; }
.menu-nav { display: flex; gap: 0.5rem; }
.menu-nav .ctl { border-color: var(--sea); color: var(--sea); }
.menu-nav .ctl:hover:not(:disabled) { background: var(--sea); border-color: var(--sea); color: #fff; }
.menu-nav .ctl:disabled { opacity: 0.3; cursor: default; }
.menu-nav .ctl:focus-visible { outline-color: var(--rose); }
.menu-grid {
    --per-view: 1.7;
    --gap: 1.25rem;
    display: flex;
    gap: var(--gap);
    padding: 0.5rem 0.4rem 1rem;
    margin-inline: -0.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.4rem;
    scrollbar-width: none;
}
.menu-grid::-webkit-scrollbar { display: none; }
.menu-grid:focus-visible { outline-offset: 2px; }
.dish { flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view)); scroll-snap-align: start; text-align: center; padding: 0 7px; }
.dish img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 3px 3px; margin-bottom: 1rem; background: #cfd6d1; box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--cobalt); }
.dish h3 { font-size: 1.4rem; margin: 1.4rem 0 0.35rem; }
.dish p { color: var(--sea-soft); max-width: 24rem; margin-inline: auto; }
@media (max-width: 699px) { .menu-nav { display: none; } }
@media (min-width: 700px) { .menu-grid { --per-view: 2.6; } }
@media (min-width: 1001px) { .menu-grid { --per-view: 3.5; --gap: 2rem; } }

/* ===== Gallery: slideshow ===== */
.gallery { background: var(--sea); color: var(--plate); padding: clamp(4rem, 9vw, 8rem) var(--gutter); --scallop: var(--sea); margin-top: 12px; position: relative; }
.gallery::before { content: ''; position: absolute; inset: -11px 0 auto 0; height: 12px; background: radial-gradient(circle at 11px 12px, var(--sea) 0 10.5px, transparent 11px) 0 0 / 22px 12px repeat-x; }
.gallery-inner { max-width: 82rem; margin: 0 auto; }
.gallery h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 18ch; }
.tabs-light .tab { color: #b9cdd6; }
.tabs-light .tab:hover, .tabs-light .tab.active { color: #fff; }
.tabs-light .tab.active { border-bottom-color: var(--lagoon); }
.slideshow:focus-visible { outline-color: var(--lagoon); }
.stage-frame { padding: 12px; border-radius: 4px; }
.stage-frame { background-color: #fff; background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--cobalt) 0 11.25deg, #fff 11.25deg 22.5deg); background-size: 26px 26px; }
.stage { position: relative; aspect-ratio: 16 / 9; max-height: 74svh; width: 100%; overflow: hidden; background: #06222e; border-radius: 2px; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(28px) saturate(1.15) brightness(0.7); }
.slide-fg { position: relative; width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
    .slide.is-active .slide-fg { animation: drift 7s ease-out both; }
    @keyframes drift { from { transform: scale(1); } to { transform: scale(1.045); } }
}
.stage-open { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: zoom-in; }
.stage-open:focus-visible { outline-offset: -6px; outline-color: var(--lagoon); }
.stage-bar { position: absolute; inset: auto 0 0 0; height: 4px; z-index: 3; background: rgba(255, 255, 255, 0.18); pointer-events: none; }
.stage-bar span { display: block; height: 100%; width: 0; background: var(--lagoon); }
@keyframes slideProgress { from { width: 0; } to { width: 100%; } }
.stage-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.stage-caption { font-family: var(--font-display); font-size: 1.35rem; min-height: 1.5em; }
.stage-controls { display: flex; align-items: center; gap: 0.5rem; }
.stage-count { margin-right: 0.5rem; color: #b9cdd6; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.ctl { width: 2.75rem; height: 2.75rem; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: none; color: #fff; font-size: 1rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.ctl:hover { background: var(--lagoon); border-color: var(--lagoon); color: var(--sea); }
.ctl:focus-visible { outline-color: var(--lagoon); }
.thumbs { display: flex; gap: 0.6rem; margin-top: 1.25rem; padding-bottom: 0.5rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--lagoon) transparent; }
.thumb { flex: 0 0 auto; width: 5.5rem; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 999px 999px 3px 3px; overflow: hidden; background: #06222e; opacity: 0.6; cursor: pointer; transition: opacity 0.2s, border-color 0.2s; }
.thumb:hover { opacity: 1; }
.thumb.active { opacity: 1; border-color: var(--lagoon); }
.thumb:focus-visible { outline-color: var(--lagoon); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Testimonials ===== */
.testimonials { border-top: 1px solid var(--rule); }
.quote-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; margin-top: 3rem; }
.quote blockquote { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; }
.quote blockquote::before { content: '\201C'; }
.quote blockquote::after { content: '\201D'; }
.quote figcaption { font-weight: 600; }
.quote figcaption span { display: block; color: var(--sea-soft); font-weight: 400; font-size: 0.95rem; }

/* ===== Reservation ===== */
.reservation {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(4rem, 9vw, 8rem) var(--gutter);
    background:
        linear-gradient(rgba(14, 52, 70, 0.82), rgba(14, 52, 70, 0.88)),
        url('../img/gallery/table-wine-l.webp') center / cover;
    color: var(--plate);
}
.reservation-intro { display: flex; flex-direction: column; gap: 1.25rem; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.reservation-intro h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.reservation-intro p { color: #dbe7ec; max-width: 26rem; }

.reservation-panel { background: var(--plate); color: var(--sea); padding: clamp(1.5rem, 4vw, 3rem); border-radius: 3px; max-width: 46rem; }
.reservation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-wide { grid-column: 1 / -1; }
.field textarea { min-height: 5.5rem; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid #b9b2a8;
    border-radius: 3px;
    background: #fff;
    color: var(--sea);
    font: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rose); outline: 2px solid var(--rose); outline-offset: 0; }
.field textarea { resize: vertical; }

#formMessage { margin-top: 1.25rem; padding: 0.9rem 1.1rem; border-radius: 3px; font-weight: 500; }
#formMessage.success { background: #e3efe1; color: #1f4a1d; }
#formMessage.error { background: #f6e0da; color: #7a2412; }

/* ===== Contact ===== */
.contact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 3rem 0 0; }
.contact-list div { padding-top: 1rem; border-top: 1px solid var(--rule); }
.contact-list dt { color: var(--sea-soft); font-size: 0.95rem; margin-bottom: 0.25rem; }
.contact-list dd { margin: 0; font-family: var(--font-display); font-size: 1.4rem; overflow-wrap: anywhere; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ===== Footer ===== */
.site-footer {
    position: relative;
    padding-top: calc(var(--tile) + 1.5rem) !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 2rem var(--gutter);
    background: var(--sea);
    color: #b9cdd6;
    font-size: 0.95rem;
}
.site-footer::before { content: ''; position: absolute; inset: 0 0 auto 0; height: calc(var(--tile) * 0.75); background-color: #fff; background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--cobalt) 0 11.25deg, #fff 11.25deg 22.5deg); background-size: calc(var(--tile) * 0.75) calc(var(--tile) * 0.75); }
.social-list { display: flex; gap: 1.5rem; }
.social-list a { color: var(--plate); }
.credits { flex-basis: 100%; font-size: 0.85rem; }
.credits summary { cursor: pointer; }
.credits ul { margin-top: 0.6rem; display: grid; gap: 0.35rem; }
.credits a { color: var(--plate); }

/* ===== Video popup ===== */
.video-popup { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 24, 33, 0.92); }
.video-popup.active { display: flex; }
.video-popup-content { position: relative; width: min(100%, 64rem); }
.video-popup video { width: 100%; max-height: 85vh; background: #000; }
.video-popup-close { position: absolute; top: -2.75rem; right: 0; border: 0; background: none; color: #fff; font-size: 2.25rem; line-height: 1; cursor: pointer; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .stamp { display: none; }
}

@media (max-width: 1000px) {
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0 0.6rem;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--sea); }
    .top-info .top-hours { display: none; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.25rem var(--gutter) 1.75rem;
        background: var(--plate);
        box-shadow: 0 1px 0 var(--rule);
    }
    .site-header.nav-open .site-nav { display: flex; }
    .site-nav ul { flex-direction: column; gap: 0.9rem; }

    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-rosette { display: none; }
    .hero-sun { width: 5rem; top: -1.75rem; right: 1.25rem; }
    .stamp { width: 6rem; right: 1rem; bottom: calc(var(--tile) + 4.5rem); }
    .hero-photo { order: -1; height: auto; min-height: 0; }
    .hero-copy { padding-top: 3rem; }
    .about, .reservation { grid-template-columns: 1fr; }
    .plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-photo { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 1.25rem; }
    .hero-photo .arch { height: 68svh; }
    .reservation-intro { position: static; }
    .gallery-grid { column-count: 2; }
    .quote-list { grid-template-columns: 1fr; }
    .torrevieja-head { grid-template-columns: 1fr; }
    .tradition-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .postal-row { grid-template-columns: 1fr; }
    .torrevieja-banner img { aspect-ratio: 16 / 9; }
    .service-list li { grid-template-columns: 1fr; }
    .service-price { text-align: left; }
}

@media (max-width: 600px) {
    .plan-list { grid-template-columns: 1fr; }
    .stage { aspect-ratio: 4 / 5; }
    .stage-meta { flex-direction: column; align-items: flex-start; }
    .thumb { width: 4.25rem; }
    .reservation-form { grid-template-columns: 1fr; }
    .contact-list { grid-template-columns: 1fr; }
    .tradition-list { grid-template-columns: 1fr; }
    .top-bar { font-size: 0.8rem; }
    .top-social { gap: 0.9rem; }
}

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

/* ===== Sticky reserve button (phones and tablets) ===== */
.sticky-cta { display: none; }
@media (max-width: 1000px) {
    .sticky-cta {
        display: inline-block;
        position: fixed;
        z-index: 90;
        left: 50%;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        padding: 0.95rem 1.8rem;
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(14, 52, 70, 0.35);
        transform: translate(-50%, 6rem);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s, background-color 0.25s;
    }
    .sticky-cta.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
}

/* ===== Phone refinements found in the visitor walkthrough ===== */
@media (max-width: 600px) {
    .hero-photo .arch { height: 34svh; min-height: 15rem; }
    .hero-sub { font-size: 1.05rem; }
    .hero-copy { padding-top: 1.75rem; padding-bottom: 4.5rem; gap: 1.1rem; }
    .stamp { display: none; }
    .hero h1 { font-size: clamp(3rem, 15vw, 4rem); }

    /* Plans and Torrevieja postcards swipe sideways instead of stacking. */
    .plan-list, .postal-row {
        display: flex;
        gap: 1rem;
        margin-inline: calc(var(--gutter) * -1);
        padding: 0 var(--gutter) 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .plan-list::-webkit-scrollbar, .postal-row::-webkit-scrollbar { display: none; }
    .plan { flex: 0 0 74%; scroll-snap-align: start; }
    .postal-row figure { flex: 0 0 82%; scroll-snap-align: start; }
    .plans .section-head, .plans .plan-list { max-width: none; }
    .plans .plan-list { margin-inline: calc(var(--gutter) * -1); }

    /* Menu: two columns, so ten dishes are not ten screens. */

    .stage { aspect-ratio: 1 / 1; }
    .plan .btn-small, .tab { min-height: 2.75rem; }
}

/* ===== One screen per page (desktop) =====
   Every section except the menu and Torrevieja fills exactly the space below
   the fixed header, and sizes its content from the viewport height, so the
   visitor sees all of it without scrolling inside the section. */
@media (min-width: 1001px) {
    .plans, .menu, .about, .services, .gallery, .testimonials, .reservation, .contact {
        min-height: var(--page-h);
        padding-block: clamp(1rem, 4svh, 4.5rem);
    }
    .plans, .menu, .services, .gallery, .testimonials, .contact { display: flex; flex-direction: column; justify-content: center; }
    .about, .reservation { align-content: center; align-items: center; }
    .contact { min-height: calc(var(--page-h) - 9rem); }
    .section h2, .gallery h2, .reservation-intro h2 { font-size: clamp(1.8rem, min(4.2vw, 6.2svh), 3.4rem); }
    .section-head { margin-bottom: clamp(0.75rem, 3svh, 2.5rem); }
    .plans .section-head { width: 100%; }
    .gallery h2 { max-width: none; }

    /* Plans */
    .plan { gap: clamp(0.3rem, 1svh, 0.7rem); }
    .plan .arch img { aspect-ratio: auto; height: clamp(10rem, 34svh, 28rem); }
    .plan .arch { margin-bottom: 0.3rem; }
    .plan p { font-size: clamp(0.9rem, 1.9svh, 1.05rem); line-height: 1.45; }

    /* Menu */
    .menu .section-head { margin-bottom: clamp(0.5rem, 2svh, 1.5rem); }
    .dish img { aspect-ratio: auto; height: clamp(10rem, 37svh, 28rem); margin-bottom: 0.5rem; }
    .dish h3 { font-size: clamp(1.15rem, 2.9svh, 1.4rem); margin-top: clamp(0.8rem, 2svh, 1.4rem); }
    .dish p { font-size: clamp(0.88rem, 1.9svh, 1.05rem); line-height: 1.4; }

    /* About */
    .about-photo .arch { width: min(100%, calc(min(66svh, 42rem) * 0.74)); }
    .about-photo .arch img { aspect-ratio: auto; height: min(66svh, 42rem); }
    .about-copy { gap: clamp(0.6rem, 2svh, 1.25rem); }
    .about-copy .lead { font-size: clamp(1.1rem, 2.8svh, 1.45rem); }
    .plain-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 1px solid var(--rule); }
    .plain-list li { padding: clamp(0.3rem, 1.1svh, 0.55rem) 0; border-top: 0; border-bottom: 1px solid var(--rule); }
    .plain-list li:last-child { border-bottom: 1px solid var(--rule); }

    /* Services: two columns of three */
    .service-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; margin-top: clamp(0.75rem, 3svh, 3rem); }
    .service-list li { grid-template-columns: 1fr auto; gap: 0.3rem 1rem; padding: clamp(0.6rem, 2.4svh, 1.4rem) 0; border-bottom: 1px solid var(--rule); }
    .service-list li:last-child { border-bottom: 1px solid var(--rule); }
    .service-list li p { grid-column: 1 / -1; }
    .service-list h3 { grid-column: 1; grid-row: 1; }
    .service-price { grid-column: 2; grid-row: 1; align-self: baseline; }
    .service-list li p { grid-row: 2; }
    .service-list h3 { font-size: clamp(1.2rem, 3svh, 1.5rem); }

    /* Gallery: stage on the left, a column of thumbnails on the right */
    .gallery { --stage-h: calc(84svh - 16.5rem); }
    .gallery-inner { width: 100%; }
    .slideshow { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; grid-template-areas: "stage thumbs" "meta thumbs"; gap: 0.9rem 1rem; align-items: start; }
    .stage-frame { grid-area: stage; }
    .stage-meta { grid-area: meta; margin-top: 0; }
    .stage { aspect-ratio: auto; height: max(var(--stage-h), 14rem); max-height: none; }
    .thumbs { grid-area: thumbs; position: relative; flex-direction: column; margin-top: 0; padding: 0 0.3rem 0 0; overflow-x: hidden; overflow-y: auto; max-height: max(calc(84svh - 11.5rem), 16rem); }
    .thumb { width: 100%; }

    /* Testimonials */
    .quote-list { margin-top: clamp(1rem, 4svh, 3rem); }
    .quote blockquote { font-size: clamp(1.1rem, 2.8svh, 1.3rem); }

    /* Reservation: the whole form in one screen */
    .reservation-panel { padding: clamp(1rem, 3svh, 2.5rem) clamp(1.25rem, 3vw, 2.5rem); }
    .reservation-form { gap: clamp(0.5rem, 1.8svh, 1.25rem) 1.25rem; }
    .field input, .field select, .field textarea { padding: clamp(0.45rem, 1.2svh, 0.7rem) 0.85rem; }
    .field textarea { min-height: clamp(3.5rem, 11svh, 5.5rem); }
    .reservation-intro { position: static; }
}

/* Short screens (small laptops, or zoomed-in browsers): compact the fit-screen sections. */
@media (min-width: 1001px) and (max-height: 680px) {
    .service-list li { padding: 0.45rem 0; gap: 0.1rem 1rem; }
    .service-list li p { font-size: 0.9rem; line-height: 1.35; }
    .service-list h3 { font-size: 1.15rem; }
    .reservation-form { gap: 0.4rem 1rem; }
    .field label { font-size: 0.85rem; }
    .field input, .field select, .field textarea { padding: 0.35rem 0.7rem; }
    .field textarea { min-height: 2.8rem; }
    .reservation-panel { padding: 0.9rem 1.25rem; }
    .about-copy .lead { font-size: 1.05rem; }
}