/* Home/landing page styles.
   Extraído de site.css para poder mantener la web por bloques. */

/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.home-page {
    width: 100%;
    min-height: 100dvh;
    padding: 26px;
    display: grid;
    place-items: center;
}

.home-shell {
    width: min(1180px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: 46% 54%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .90);
    box-shadow: var(--shadow-main);
    border: 1px solid rgba(255, 255, 255, .88);
    backdrop-filter: blur(24px);
}

/* =========================================================
   LADO IZQUIERDO
   ========================================================= */

.home-visual {
    position: relative;
    min-height: 720px;
    padding: 42px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, rgba(18, 18, 18, .98), rgba(42, 42, 42, .88)), radial-gradient(circle at 38% 28%, rgba(239, 75, 50, .62), transparent 30%), radial-gradient(circle at 84% 84%, rgba(255, 255, 255, .13), transparent 26%);
}

    .home-visual::before {
        content: "";
        position: absolute;
        left: -132px;
        top: -126px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        border: 58px solid rgba(255, 255, 255, .055);
    }

    .home-visual::after {
        content: "";
        position: absolute;
        right: -104px;
        bottom: -126px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

.language-selector {
    position: absolute;
    z-index: 5;
    top: 30px;
    right: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #202020;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}

.flag-es {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%);
}

.visual-content {
    position: relative;
    z-index: 2;
    min-height: 100%;
    padding: 76px 0 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-card {
    width: 146px;
    height: 146px;
    display: grid;
    place-items: center;
    border-radius: 40px;
    background: linear-gradient(145deg, #fff, #eeeeee);
    color: var(--black);
    box-shadow: 0 26px 76px rgba(0, 0, 0, .34);
    transform: rotate(-4deg);
}

    .logo-card span {
        font-size: 44px;
        font-weight: 950;
        letter-spacing: -4px;
    }

.eyebrow {
    width: fit-content;
    margin-top: 28px;
    padding: 12px 17px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.visual-content h2 {
    max-width: 430px;
    margin: 30px 0 0;
    font-size: clamp(38px, 3.2vw, 48px);
    line-height: 1.02;
    letter-spacing: -2.4px;
}

.visual-content p {
    max-width: 430px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 18px;
    line-height: 1.48;
}

.visual-note {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 320px;
    padding: 17px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    color: #222;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

    .visual-note > span {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 17px;
        background: #f2f2f2;
        font-size: 23px;
    }

    .visual-note strong {
        display: block;
        font-size: 16px;
        margin-bottom: 3px;
    }

    .visual-note small {
        display: block;
        color: #777;
        font-size: 13px;
        line-height: 1.25;
    }

.note-one {
    left: 42px;
    bottom: 126px;
}

.note-two {
    right: 42px;
    bottom: 42px;
}

/* =========================================================
   LADO DERECHO
   ========================================================= */

.home-content {
    min-width: 0;
    padding: 64px 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.top-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.status-badge {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

    .status-badge span {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #bdbdbd;
    }

    .status-badge.closed {
        background: #f1f1f1;
        color: #747474;
    }

    .status-badge.open {
        background: rgba(24, 164, 99, .11);
        color: #12824f;
    }

        .status-badge.open span {
            background: var(--green);
        }

    .status-badge.available {
        background: var(--accent-soft);
        color: #bb321f;
    }

.restaurant-header h1 {
    margin: 0;
    color: var(--black);
    font-size: clamp(60px, 5vw, 82px);
    line-height: .96;
    letter-spacing: -4.8px;
    white-space: nowrap;
}

.restaurant-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 24px;
    color: var(--muted);
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.35;
}

    .restaurant-data i {
        width: 1px;
        height: 24px;
        background: var(--line);
    }

.intro-text {
    max-width: 560px;
    margin: 34px 0 0;
    color: #565656;
    font-size: clamp(20px, 1.75vw, 24px);
    line-height: 1.46;
}

.action-panel {
    width: 100%;
    max-width: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 42px;
}

.home-action {
    min-width: 0;
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border-radius: 28px;
    cursor: pointer;
    text-align: left;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

    .home-action:active {
        transform: scale(.985);
    }

    .home-action.primary {
        background: var(--black);
        color: #fff;
        box-shadow: 0 22px 52px rgba(0, 0, 0, .23);
    }

        .home-action.primary:hover {
            background: #050505;
            box-shadow: 0 26px 64px rgba(0, 0, 0, .30);
        }

    .home-action.secondary {
        background: #fff;
        color: var(--black);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-soft);
    }

    .home-action.disabled {
        background: #f1f1f1;
        color: #9a9a9a;
        border: 1px solid #e2e2e2;
        cursor: not-allowed;
    }

.action-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    font-size: 24px;
}

.home-action.secondary .action-icon,
.home-action.disabled .action-icon {
    background: #fff;
}

.action-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

    .action-text strong {
        display: block;
        font-size: clamp(20px, 1.6vw, 24px);
        line-height: 1.05;
    }

    .action-text small {
        display: block;
        font-size: 13px;
        font-weight: 750;
        opacity: .7;
        line-height: 1.25;
    }

.opening-info {
    width: 100%;
    max-width: 560px;
    margin-top: 24px;
    padding: 22px 26px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}

    .opening-info span {
        display: block;
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 900;
    }

    .opening-info strong {
        display: block;
        color: var(--black);
        font-size: 22px;
        line-height: 1.15;
    }

/* =========================================================
   PC MEDIANO: EVITA SOLAPES
   ========================================================= */

@media (max-width: 1240px) {
    .home-page {
        padding: 22px;
    }

    .home-shell {
        width: min(1080px, 100%);
        grid-template-columns: 44% 56%;
    }

    .home-content {
        padding: 58px 62px;
    }

    .restaurant-header h1 {
        font-size: clamp(54px, 4.7vw, 74px);
    }

    .intro-text {
        max-width: 520px;
    }

    .action-panel,
    .opening-info {
        max-width: 520px;
    }

    .visual-note {
        width: 300px;
    }

    .note-one {
        left: 36px;
        bottom: 124px;
    }

    .note-two {
        right: 36px;
        bottom: 40px;
    }
}

/* =========================================================
   TABLET: UNA COLUMNA
   ========================================================= */

@media (max-width: 1050px) {
    .home-shell {
        width: min(760px, 100%);
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .home-visual {
        min-height: 390px;
        padding: 36px;
    }

    .visual-content {
        min-height: 320px;
        padding: 76px 0 110px;
    }

        .visual-content h2 {
            max-width: 500px;
        }

        .visual-content p {
            max-width: 500px;
        }

    .visual-note {
        width: 300px;
    }

    .note-one {
        left: 32px;
        bottom: 106px;
    }

    .note-two {
        right: 32px;
        bottom: 28px;
    }

    .home-content {
        padding: 48px 54px 56px;
    }

    .restaurant-header h1 {
        white-space: normal;
        font-size: clamp(52px, 8vw, 72px);
    }

    .intro-text,
    .action-panel,
    .opening-info {
        max-width: none;
    }
}

/* =========================================================
   MÓVIL: COMPACTO, SIN BLOQUES INNECESARIOS
   ========================================================= */

@media (max-width: 700px) {
    body {
        background: #fff;
    }

    .home-page {
        display: block;
        padding: 0;
    }

    .home-shell {
        width: 100%;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
        display: flex;
        flex-direction: column;
    }

    .home-visual {
        min-height: 205px;
        padding: 18px;
        border-bottom-left-radius: 32px;
        border-bottom-right-radius: 32px;
        flex: 0 0 auto;
    }

    .language-selector {
        top: 18px;
        right: 18px;
        padding: 8px 14px;
        font-size: 15px;
    }

    .flag-es {
        width: 25px;
        height: 25px;
    }

    .visual-content {
        min-height: 168px;
        padding: 56px 0 18px;
        justify-content: flex-end;
    }

    .logo-card {
        width: 90px;
        height: 90px;
        border-radius: 27px;
    }

        .logo-card span {
            font-size: 30px;
            letter-spacing: -3px;
        }

    .eyebrow {
        margin-top: 14px;
        padding: 9px 13px;
        font-size: 11px;
    }

    .visual-content h2,
    .visual-content p,
    .visual-note {
        display: none;
    }

    .home-content {
        flex: 1 1 auto;
        padding: 23px 22px 22px;
        justify-content: flex-start;
    }

    .top-status {
        margin-bottom: 15px;
        gap: 8px;
    }

    .status-badge {
        min-height: 32px;
        padding: 7px 12px;
        font-size: 12px;
    }

        .status-badge span {
            width: 9px;
            height: 9px;
        }

    .restaurant-header h1 {
        font-size: clamp(39px, 12vw, 50px);
        line-height: .96;
        letter-spacing: -2.8px;
        white-space: normal;
    }

    .restaurant-data {
        display: block;
        margin-top: 13px;
        font-size: 16px;
        line-height: 1.35;
    }

        .restaurant-data span {
            display: block;
        }

        .restaurant-data i {
            display: none;
        }

    .intro-text {
        margin-top: 16px;
        font-size: 16px;
        line-height: 1.35;
    }

    .action-panel {
        max-width: none;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 22px;
    }

    .home-action {
        min-height: 70px;
        border-radius: 23px;
        padding: 14px;
        gap: 13px;
    }

    .action-icon {
        width: 42px;
        height: 42px;
        border-radius: 15px;
        font-size: 21px;
    }

    .action-text strong {
        font-size: 19px;
    }

    .action-text small {
        font-size: 12px;
    }

    .opening-info {
        max-width: none;
        margin-top: 14px;
        padding: 16px 18px;
        border-radius: 22px;
    }

        .opening-info span {
            font-size: 12px;
            margin-bottom: 4px;
        }

        .opening-info strong {
            font-size: 18px;
        }
}