/* ==========================================================================
   Caserísima · Portada, Menús diarios y Gourmet Burger
   Depende de shell.css (tokens, navegación, pie, botones y formularios).
   ========================================================================== */

/* ============================================================ compartido === */
.section-head { max-width: 800px; margin-bottom: clamp(38px, 5vw, 62px); }
.section-head .lead { margin-top: 20px; }

.hero-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pill-list,
.badge-list {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.pill-list li {
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .84rem;
    font-weight: 700;
}
.badge-list li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    font-size: .84rem;
    font-weight: 700;
}
.badge-list i { color: var(--hot); font-size: .55rem; font-style: normal; }

.contact-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(38px, 5vw, 72px);
    align-items: center;
}
.contact-direct {
    margin-top: 36px;
    display: grid;
    gap: 12px;
}
.contact-direct a {
    padding: 18px 22px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.contact-direct a:hover { transform: translateX(6px); border-color: var(--hot); }
.contact-direct small {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    color: var(--muted);
}
.contact-direct strong {
    display: block;
    margin-top: 5px;
    color: var(--hot-dark);
    font: 900 clamp(1.35rem, 2.4vw, 1.95rem)/1 var(--font-head);
}

/* =============================================================== PORTADA === */
.home-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 108px);
    background: linear-gradient(155deg, #f6fbf4 0%, #eef8f0 46%, #e8f5f4 100%);
}
.hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero-blob--a {
    width: 620px;
    height: 620px;
    left: -260px;
    bottom: -300px;
    background: radial-gradient(circle, rgba(118, 191, 56, .18), transparent 68%);
}
.hero-blob--b {
    width: 420px;
    height: 420px;
    right: 4vw;
    top: -140px;
    border: 1px dashed rgba(255, 166, 47, .42);
}

.home-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(36px, 6vw, 84px);
    align-items: center;
}

.hero-stats {
    margin: 44px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.hero-stats div { min-width: 0; }
.hero-stats dt {
    font: 900 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--font-head);
    letter-spacing: -.04em;
    color: var(--accent-dark);
}
.hero-stats dd {
    margin: 7px 0 0;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--muted);
}

/* Baraja de tres tarjetas: catering, menús y burgers en un mismo golpe de vista */
.home-hero-stack {
    position: relative;
    height: clamp(430px, 46vw, 570px);
}
.stack-card {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    background: var(--surface);
    border: 7px solid var(--surface);
    box-shadow: var(--shadow-lg);
    transition: transform .5s var(--ease);
}
.stack-card img { width: 100%; height: 100%; object-fit: cover; }
.stack-card figcaption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(8px);
    font: 800 .76rem/1 var(--font-head);
    letter-spacing: .02em;
}
.stack-card--1 {
    width: 52%;
    height: 56%;
    left: 0;
    top: 2%;
    transform: rotate(-4deg);
    z-index: 2;
}
.stack-card--2 {
    width: 43%;
    height: 38%;
    right: 0;
    top: 5%;
    transform: rotate(3.5deg);
    z-index: 1;
}
.stack-card--3 {
    width: 58%;
    height: 48%;
    right: 4%;
    bottom: 0;
    transform: rotate(-2deg);
    z-index: 3;
}
.home-hero-stack:hover .stack-card--1 { transform: rotate(-6deg) translateY(-8px); }
.home-hero-stack:hover .stack-card--2 { transform: rotate(5deg) translateY(-6px); }
.home-hero-stack:hover .stack-card--3 { transform: rotate(-3deg) translateY(8px); }

.stack-seal {
    position: absolute;
    left: 24%;
    top: 47%;
    z-index: 4;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.stack-seal img { width: 26px; height: 60px; object-fit: contain; }

/* ------------------------------------------------- los tres servicios --- */
.home-worlds { background: var(--surface); }

.worlds-rail {
    display: flex;
    gap: 14px;
    height: clamp(460px, 52vw, 580px);
}
.world-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-xl);
    color: #fff;
    isolation: isolate;
    transition: flex-grow .55s var(--ease), box-shadow .4s var(--ease);
}
.world-panel:hover,
.world-panel:focus-visible,
.world-panel.is-open {
    flex-grow: 2.3;
    box-shadow: var(--shadow-lg);
}
.worlds-rail:hover .world-panel:not(:hover) { flex-grow: .82; }

.world-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform .8s var(--ease);
    z-index: -2;
}
.world-panel:hover .world-photo { transform: scale(1.1); }

.world-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(190deg, rgba(10, 22, 17, .18) 0%, rgba(10, 22, 17, .62) 48%, rgba(8, 18, 14, .92) 100%);
}
.world-panel--burgers .world-veil {
    background: linear-gradient(190deg, rgba(20, 10, 2, .22) 0%, rgba(24, 12, 2, .66) 46%, rgba(14, 8, 2, .94) 100%);
}

.world-body {
    position: absolute;
    inset: auto 0 0;
    display: block;
    padding: clamp(22px, 2.4vw, 34px);
}
.world-logo {
    height: 30px;
    width: auto;
    margin-bottom: 18px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
}
.world-tag {
    display: block;
    font: 800 .68rem/1.3 var(--font-head);
    letter-spacing: .15em;
    color: var(--hot);
}
.world-title {
    display: block;
    margin: 10px 0 0;
    font: 900 clamp(1.7rem, 2.6vw, 2.5rem)/1.02 var(--font-head);
    letter-spacing: -.045em;
}
.world-text {
    display: block;
    max-width: 46ch;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .96rem;
    line-height: 1.62;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .4s var(--ease), max-height .55s var(--ease), margin .4s var(--ease);
}
.world-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 11px 19px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    backdrop-filter: blur(6px);
    font-size: .88rem;
    font-weight: 800;
    transition: background-color .3s var(--ease), gap .3s var(--ease);
}
.world-link i { font-style: normal; }
.world-panel:hover .world-text,
.world-panel:focus-visible .world-text,
.world-panel.is-open .world-text {
    opacity: 1;
    max-height: 9em;
    margin-top: 14px;
}
.world-panel:hover .world-link { background: var(--hot); color: #2a1a00; border-color: transparent; gap: 13px; }

.world-index {
    position: absolute;
    top: clamp(18px, 2vw, 28px);
    right: clamp(18px, 2vw, 28px);
    font: 900 1rem/1 var(--font-head);
    color: rgba(255, 255, 255, .5);
    letter-spacing: .08em;
}

/* --------------------------------------------------------- quiénes somos --- */
.home-about { background: var(--paper-alt); }
.about-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(40px, 6vw, 86px);
    align-items: center;
}
.about-visual { position: relative; }
.about-visual img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}
.about-badge {
    position: absolute;
    right: -18px;
    bottom: -18px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px 16px 18px;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.about-badge img { width: 22px; height: 52px; object-fit: contain; }
.about-badge span {
    font: 900 1.02rem/1.1 var(--font-head);
    letter-spacing: -.03em;
}
.about-badge small {
    display: block;
    margin-top: 3px;
    font: 600 .78rem/1 var(--font-body);
    color: var(--muted);
    letter-spacing: 0;
}

.about-copy .lead + .lead { margin-top: 18px; }
.about-points {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.about-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
}
.about-points i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-style: normal;
    font-size: .8rem;
    font-weight: 900;
}
.about-points strong { display: block; font: 800 .98rem/1.3 var(--font-head); }
.about-points small { display: block; margin-top: 3px; color: var(--muted); font-size: .88rem; }

.home-contact { background: var(--surface); }

/* ========================================================= MENÚS DIARIOS === */
.menus-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 106px) 0 clamp(60px, 8vw, 104px);
    background: linear-gradient(160deg, #fffaf0 0%, #f4fbef 52%, #eaf7ee 100%);
}
/* Trama de puntos: da textura sin cargar ninguna imagen extra. */
.menus-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(118, 191, 56, .22) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 78% 34%, #000 0%, transparent 66%);
    -webkit-mask-image: radial-gradient(ellipse at 78% 34%, #000 0%, transparent 66%);
    pointer-events: none;
}
.menus-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}

/* Composición circular tipo plato */
.menus-hero-plate {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.plate-ring {
    position: absolute;
    border-radius: 50%;
    inset: 0;
}
.plate-ring--outer { border: 1px dashed rgba(255, 166, 47, .5); animation: spin 46s linear infinite; }
.plate-ring--inner { inset: 8%; border: 2px solid rgba(118, 191, 56, .16); }
@keyframes spin { to { transform: rotate(360deg); } }

.plate-photo {
    width: 74%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    border: 10px solid var(--surface);
}
.plate-chip {
    position: absolute;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font: 800 .84rem/1 var(--font-head);
    display: flex;
    align-items: center;
    gap: 10px;
}
.plate-chip img { width: 13px; height: 30px; object-fit: contain; }
.plate-chip--top { top: 4%; left: 0; }
.plate-chip--bottom { bottom: 8%; right: 2%; color: var(--accent-dark); }

/* ------------------------------------------------------------ los pasos --- */
.menus-how { background: var(--surface); }
.step-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.step-card {
    position: relative;
    padding: 28px 24px 26px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--surface), var(--paper-alt));
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.step-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.step-num {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hot-soft);
    color: var(--hot-dark);
    font: 900 .84rem/1 var(--font-head);
}
.step-card h3 { margin: 26px 0 10px; font-size: 1.1rem; letter-spacing: -.03em; }
.step-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ------------------------------------------------- menú de la semana --- */
.menus-week { background: var(--paper-alt); }
.week-board {
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.week-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    background: var(--paper-alt);
    border-bottom: 1px solid var(--line);
}
.week-tab {
    padding: 20px 10px;
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-head);
    cursor: pointer;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.week-tab:last-child { border-right: 0; }
.week-tab span { display: none; }
.week-tab b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; }
.week-tab:hover { background: var(--accent-soft); color: var(--ink); }
.week-tab.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: inset 0 -3px 0 var(--hot);
}

.week-panel { padding: clamp(28px, 4vw, 52px); }
.week-day {
    margin: 0 0 26px;
    font: 900 clamp(1.6rem, 3vw, 2.4rem)/1 var(--font-head);
    letter-spacing: -.05em;
    color: var(--accent-dark);
}
.week-courses {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.week-courses > div {
    padding: 22px 20px;
    border-radius: var(--r-md);
    background: var(--paper-alt);
    border: 1px solid var(--line);
}
.week-courses dt {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hot-dark);
}
.week-courses dd {
    margin: 10px 0 0;
    font: 800 1.06rem/1.35 var(--font-head);
    letter-spacing: -.02em;
}
.week-cta { margin-top: 26px; }

.week-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 26px 0 0;
    padding: 18px 22px;
    border-radius: var(--r-md);
    background: var(--hot-soft);
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.6;
}
.week-note i {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hot);
    color: #fff;
    font-style: normal;
    font-weight: 900;
    font-size: .8rem;
}

/* ------------------------------------------------------------- formatos --- */
.menus-formats { background: var(--surface); }
.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.format-card {
    position: relative;
    padding: 34px 30px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--paper);
    transition: transform .3s var(--ease);
}
.format-card:hover { transform: translateY(-6px); }
.format-card.is-featured {
    background: linear-gradient(150deg, var(--accent), var(--accent-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 26px 60px rgba(76, 143, 37, .28);
}
.format-badge {
    position: absolute;
    top: -13px;
    left: 30px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--hot);
    color: #2a1a00;
    font: 800 .68rem/1 var(--font-head);
    letter-spacing: .12em;
}
.format-card h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.035em; }
.format-price {
    margin: 14px 0 0;
    font: 900 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--font-head);
    letter-spacing: -.04em;
    color: var(--hot-dark);
}
.format-card.is-featured .format-price { color: #fff; }
.format-text { margin: 16px 0 22px; color: var(--muted); font-size: .95rem; line-height: 1.62; }
.format-card.is-featured .format-text { color: rgba(255, 255, 255, .85); }
.format-card a { font-weight: 800; font-size: .92rem; color: var(--accent-dark); }
.format-card.is-featured a { color: #fff; }
.format-note {
    margin: 26px 0 0;
    color: var(--muted);
    font-size: .9rem;
    max-width: 68ch;
}

/* -------------------------------------------------- horarios y reparto --- */
.menus-area { background: var(--paper-alt); }
.area-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(40px, 6vw, 84px);
    align-items: center;
}
.area-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}
.area-list {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.area-list li {
    position: relative;
    padding: 15px 18px 15px 50px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 600;
}
.area-list li::before {
    content: "◷";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 1.1rem;
}
.area-phones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.area-phones a {
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font: 800 1rem/1 var(--font-head);
    transition: transform .25s var(--ease);
}
.area-phones a:hover { transform: translateY(-2px); }

.menus-contact { background: var(--surface); }

/* ========================================================= GOURMET BURGER === */
.burger-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(52px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
    background: radial-gradient(ellipse at 15% 0%, #1b2620 0%, var(--paper) 58%);
}
.burger-hero-glow {
    position: absolute;
    width: 640px;
    height: 640px;
    right: -180px;
    top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 138, 31, .22), transparent 68%);
    pointer-events: none;
}
.burger-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(36px, 6vw, 78px);
    align-items: center;
}

.burger-hero-shot {
    position: relative;
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.burger-hero-shot > img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.burger-hero-shot figcaption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 18px 22px;
    border-radius: 20px;
    background: rgba(10, 15, 13, .72);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .1);
}
.burger-hero-shot figcaption img { height: 62px; width: auto; margin-inline: auto; object-fit: contain; }

/* ---------------------------------------------------------------- carta --- */
.burger-menu { background: var(--paper-alt); }
.burger-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.burger-card {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.burger-card:hover { transform: translateY(-8px); border-color: rgba(255, 138, 31, .45); }
.burger-photo { position: relative; overflow: hidden; }
.burger-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.burger-card:hover .burger-photo img { transform: scale(1.06); }
.burger-num {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(10, 15, 13, .68);
    backdrop-filter: blur(6px);
    color: var(--hot);
    font: 900 .78rem/1 var(--font-head);
}
.burger-info { padding: 22px 22px 26px; }
.burger-info h3 {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.22rem;
    letter-spacing: -.035em;
}
.burger-price { color: var(--hot); font-size: 1rem; font-weight: 800; white-space: nowrap; }
.burger-info p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.6;
}

/* -------------------------------------------------------------- proceso --- */
.burger-craft { background: var(--paper); }
.craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.craft-card {
    position: relative;
    padding: 36px 32px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
}
.craft-card::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -100px;
    bottom: -110px;
    border-radius: 50%;
    background: var(--hot);
    opacity: .07;
}
.craft-mark {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--hot);
    font: 900 .82rem/1 var(--font-head);
}
.craft-card h3 { margin: 28px 0 12px; font-size: 1.4rem; letter-spacing: -.035em; }
.craft-card p { margin: 0; color: var(--muted); line-height: 1.68; }

/* -------------------------------------------------------------- galería --- */
.burger-gallery { padding-bottom: clamp(20px, 3vw, 40px); background: var(--paper); }
.gallery-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 14px;
    padding-inline: clamp(14px, 3vw, 30px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.gallery-rail img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-lg);
    scroll-snap-align: center;
    filter: saturate(1.05);
}

/* ------------------------------------------------------ extras y pedidos --- */
.burger-order { background: var(--paper-alt); }
.order-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(30px, 4vw, 58px);
    align-items: start;
}
.order-hours {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
}
.order-hours > span { font-size: 1.7rem; color: var(--hot); line-height: 1; }
.order-hours strong { display: block; font: 900 1.1rem/1.3 var(--font-head); letter-spacing: -.03em; }
.order-hours small { display: block; margin-top: 6px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.order-phones { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }

.order-extras {
    padding: 32px 30px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
}
.order-extras h3 { margin: 0 0 18px; font-size: 1.5rem; letter-spacing: -.04em; }
.order-extras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.order-extras li {
    padding: 14px 16px;
    border-radius: var(--r-sm);
    background: var(--paper-alt);
    font-weight: 600;
    font-size: .94rem;
}
.order-form { margin-top: clamp(38px, 5vw, 64px); }

/* ============================================================ responsive === */
@media (max-width: 1040px) {
    .home-hero-grid,
    .menus-hero-grid,
    .burger-hero-grid,
    .about-grid,
    .area-grid,
    .contact-grid,
    .order-grid { grid-template-columns: 1fr; }

    .home-hero-stack { max-width: 620px; height: clamp(360px, 62vw, 480px); }
    .menus-hero-plate { max-width: 480px; }
    .burger-hero-shot { max-width: 620px; }
    .about-visual { max-width: 560px; }

    .burger-grid { grid-template-columns: repeat(3, 1fr); }
    .step-rail { grid-template-columns: repeat(2, 1fr); }

    /* Los tres servicios pasan a columna: todo el texto siempre visible. */
    .worlds-rail { flex-direction: column; height: auto; }
    .world-panel { min-height: 340px; flex: 1 1 auto; }
    .worlds-rail:hover .world-panel:not(:hover) { flex-grow: 1; }
    .world-panel:hover,
    .world-panel.is-open { flex-grow: 1; }
    .world-text { opacity: 1; max-height: none; margin-top: 14px; }
}

@media (max-width: 860px) {
    .burger-grid { grid-template-columns: repeat(2, 1fr); }
    .format-grid,
    .craft-grid { grid-template-columns: 1fr; }
    .week-courses { grid-template-columns: 1fr; }
    .hero-stats { gap: 14px; }
}

@media (max-width: 700px) {
    /* El círculo punteado cruzaba el titular en pantallas estrechas. */
    .hero-blob--b { display: none; }
    .plate-chip--top { left: -6px; }
}

@media (max-width: 640px) {
    .home-hero-stack { height: 400px; }
    .stack-seal { width: 74px; height: 74px; left: 42%; }
    .stack-seal img { width: 20px; height: 46px; }
    .step-rail { grid-template-columns: 1fr; }
    .burger-grid { grid-template-columns: 1fr; }
    .week-tab { padding: 16px 4px; }
    .week-tab span { display: block; font-size: .9rem; font-weight: 800; }
    .week-tab b { display: none; }
    .hero-stats { grid-template-columns: 1fr; gap: 18px; }
    .hero-actions .btn { width: 100%; }
    .about-badge { right: 12px; bottom: -14px; padding: 13px 18px; }
    .contact-direct strong { font-size: 1.4rem; }
    .gallery-rail { grid-auto-columns: 78%; }
}

/* ============================================ ajustes de carta real (v2) === */

/* Menú semanal: cada plato del día es ahora una lista, no una sola línea. */
.week-range {
    margin: 14px 0 0;
    font: 800 .92rem/1.4 var(--font-head);
    letter-spacing: .04em;
    color: var(--hot-dark);
}
.week-courses dd ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
}
.week-courses dd li {
    position: relative;
    padding-left: 18px;
    font: 700 1rem/1.35 var(--font-head);
    letter-spacing: -.015em;
}
.week-courses dd li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}
.week-tab.is-closed { opacity: .45; }
.week-tab.is-closed:hover { opacity: .7; }
.week-closed {
    margin: 0;
    padding: 44px 20px;
    text-align: center;
    border-radius: var(--r-md);
    background: var(--paper-alt);
    border: 1px dashed var(--line);
    color: var(--muted);
    font: 800 1.15rem/1 var(--font-head);
    letter-spacing: .04em;
}
.format-grid--dos { grid-template-columns: repeat(2, 1fr); max-width: 820px; }

/* Distintivo sobre la foto (por ejemplo, 100% VEGAN en la Vegaluz). */
.burger-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: #0e1512;
    font: 900 .64rem/1 var(--font-head);
    letter-spacing: .1em;
}

/* Complementos */
.burger-extras { background: var(--paper-alt); }
.extras-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.extra-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.extra-card:hover { transform: translateY(-4px); border-color: rgba(255, 138, 31, .45); }
.extra-card strong { display: block; font: 800 1.15rem/1.25 var(--font-head); letter-spacing: -.03em; }
.extra-card small { display: block; margin-top: 5px; color: var(--muted); font-size: .88rem; }
.extra-price {
    flex: 0 0 auto;
    font: 900 1.3rem/1 var(--font-head);
    letter-spacing: -.03em;
    color: var(--hot);
}

.burger-order .order-form { margin-top: 0; }

@media (max-width: 860px) {
    .format-grid--dos { grid-template-columns: 1fr; }
    .extras-grid { grid-template-columns: 1fr; }
}

/* ================================= cambios pedidos por el cliente (v3) === */

/* --- Los cuatro pasos ahora llevan foto ---------------------------------- */
.step-card { padding: 0 0 26px; overflow: hidden; }
.step-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
}
.step-media img { width: 100%; height: 100%; object-fit: cover; }
/* Mientras no haya foto real, el hueco muestra la marca en grande sobre el
   degradado de la casa: se ve intencionado, no como una imagen que falta. */
.step-media.is-empty { background: linear-gradient(140deg, var(--accent-soft), var(--hot-soft)); }
.step-media.is-empty .step-mark {
    width: auto;
    height: 58%;
    max-width: 40%;
    object-fit: contain;
    opacity: .38;
    transform: rotate(-12deg);
}
.step-card .step-num {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--hot-dark);
    font: 900 .84rem/1 var(--font-head);
    box-shadow: var(--shadow-sm);
}
.step-card h3 { margin: 22px 24px 10px; font-size: 1.1rem; letter-spacing: -.03em; }
.step-card p { margin: 0 24px; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* --- Avisos que el cliente quiere que resalten --------------------------- */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 30px 0 0;
    padding: 22px 26px;
    border-radius: var(--r-lg);
    font-size: 1.02rem;
    line-height: 1.6;
    font-weight: 600;
}
.aviso i {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-style: normal;
    font-weight: 900;
    font-size: .95rem;
}
.aviso--verde {
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--ink-soft);
}
.aviso--verde i { background: var(--accent); color: #fff; }
.aviso--naranja {
    background: var(--hot-soft);
    border: 1px solid color-mix(in srgb, var(--hot) 45%, transparent);
    color: var(--ink-soft);
}
.aviso--naranja i { background: var(--hot); color: #2a1a00; }

/* --- Selector de las cuatro semanas -------------------------------------- */
.week-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 18px 0;
    background: var(--paper-alt);
}
.week-chip {
    padding: 11px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: 800 .88rem/1 var(--font-head);
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.week-chip:hover { border-color: var(--accent); color: var(--ink); }
.week-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.week-day small {
    display: block;
    margin-top: 6px;
    font: 700 .78rem/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Horario destacado en la sección del salón --------------------------- */
.area-hours {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 0;
    padding: 15px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font: 800 1rem/1 var(--font-head);
}
.area-hours span { color: var(--hot); font-size: 1.2rem; }

/* --- Complementos con foto ---------------------------------------------- */
.extras-grid { grid-template-columns: repeat(4, 1fr); }
.extra-card {
    display: block;
    padding: 0 0 22px;
    overflow: hidden;
}
.extra-foto { background: #000; }
.extra-foto img { width: 100%; aspect-ratio: 7 / 6; object-fit: cover; }
.extra-info { padding: 20px 22px 0; }
.extra-info strong { display: block; font: 800 1.1rem/1.25 var(--font-head); letter-spacing: -.03em; }
.extra-info small { display: block; margin-top: 5px; color: var(--muted); font-size: .86rem; }
.extra-info .extra-price { display: block; margin-top: 12px; }

/* --- Fotos del salón ----------------------------------------------------- */
.burger-salon { background: var(--paper); }
.salon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
}
.salon-foto {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
/* Con tres fotos, la primera ocupa toda la fila de arriba. */
.salon-grid .salon-foto--1:nth-last-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.area-photo .salon-grid { gap: 12px; }

@media (max-width: 1040px) {
    .extras-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .week-switch { padding: 14px 14px 0; }
    .week-chip { flex: 1 1 calc(50% - 8px); text-align: center; }
    .salon-grid { grid-template-columns: 1fr; }
    .salon-grid .salon-foto--1:nth-last-child(3) { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
    .extras-grid { grid-template-columns: 1fr; }
    .aviso { padding: 18px 20px; font-size: .96rem; }
    .area-hours { font-size: .92rem; padding: 13px 18px; }
}

/* En móvil los seis días se reparten justos: se reduce el texto para que
   "Sáb" no quede pegado al borde redondeado de la tarjeta. */
@media (max-width: 520px) {
    .week-tab { padding: 15px 2px; }
    .week-tab span { font-size: .82rem; letter-spacing: -.01em; }
    .week-chip { padding: 11px 12px; font-size: .84rem; }
}

/* ============================================= páginas legales (v4) === */
.legal-wrap { padding: clamp(46px, 6vw, 84px) 0 clamp(60px, 7vw, 100px); background: var(--paper); }
.legal-shell { display: grid; grid-template-columns: 250px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }

.legal-nav {
    position: sticky;
    top: calc(var(--nav-h) + 20px);
    display: grid;
    gap: 4px;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
}
.legal-nav a {
    padding: 13px 15px;
    border-radius: var(--r-sm);
    font-size: .92rem;
    font-weight: 700;
    color: var(--muted);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.legal-nav a:hover { background: var(--accent-soft); color: var(--ink); }
.legal-nav a.is-active { background: var(--accent); color: #fff; }

.legal-doc {
    max-width: 74ch;
    padding: clamp(28px, 4vw, 52px);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.legal-doc .title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.legal-doc h2 {
    margin: 42px 0 14px;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    letter-spacing: -.03em;
    color: var(--accent-dark);
}
.legal-doc p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.75; }
.legal-doc a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--hot-dark); }

.legal-lista { margin: 0 0 16px; padding-left: 22px; color: var(--ink-soft); line-height: 1.75; }
.legal-lista li { margin-bottom: 7px; }

.legal-datos { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.legal-datos > div { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 14px 18px; background: var(--paper); }
.legal-datos dt { font-weight: 800; font-size: .86rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.legal-datos dd { margin: 0; font-weight: 600; }

.legal-alerta {
    margin: 22px 0 0 !important;
    padding: 18px 22px;
    border-radius: var(--r-md);
    background: #fff4e3;
    border: 1px solid #ffc06a;
    color: #7a4a00 !important;
    font-size: .94rem;
}

.legal-tabla-wrap { overflow-x: auto; margin: 0 0 18px; }
.legal-tabla { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9rem; }
.legal-tabla th, .legal-tabla td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-tabla thead th { background: var(--accent-soft); color: var(--accent-dark); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.legal-tabla code { font-size: .86rem; background: var(--paper-alt); padding: 3px 7px; border-radius: 6px; }

.legal-nota { padding: 16px 20px; border-radius: var(--r-md); background: var(--accent-soft); font-weight: 600; }
.legal-revision { margin-top: 42px !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted) !important; }

/* Información básica de privacidad, bajo la casilla del formulario */
.privacy-basica {
    margin: -4px 0 0;
    font-size: .78rem;
    line-height: 1.6;
    color: var(--muted);
}
.privacy-basica strong { color: var(--ink-soft); font-weight: 800; }
.privacy-check a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Enlaces legales del pie */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a { color: var(--footer-ink); transition: color .2s var(--ease); }
.footer-legal a:hover { color: var(--hot); }

@media (max-width: 880px) {
    .legal-shell { grid-template-columns: 1fr; }
    .legal-nav { position: static; display: flex; flex-wrap: wrap; }
    .legal-nav a { flex: 1 1 auto; text-align: center; }
    .legal-datos > div { grid-template-columns: 1fr; gap: 4px; }
}

/* === La scooter de reparto sobre la foto del salón (paso 4) ============== */
/* El SVG lleva su propia animación; también respeta "reducir movimiento". */
.step-media .step-ride {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 78px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.step-media .step-ride img {
    width: 56px;
    height: auto;
    object-fit: contain;
}