/* =====================================================
   RESTAURANTE MARISCOS
   ===================================================== */

/* =====================================================
   VARIABLES
   ===================================================== */

:root {

    --azul-principal: #071a2f;
    --azul-secundario: #0d2e4f;
    --azul-claro: #173d63;

    --rojo: #c62828;
    --rojo-hover: #a91f1f;

    --dorado: #f3bd4e;
    --dorado-hover: #ffd273;

    --blanco: #ffffff;

    --fondo: #f5f7fa;
    --fondo-secundario: #eef2f6;

    --texto: #17202a;
    --texto-secundario: #5d6875;

    --radio: 1.35rem;
    --radio-grande: 2rem;

    --sombra:
        0 18px 50px rgba(7, 26, 47, 0.12);

    --sombra-fuerte:
        0 24px 65px rgba(7, 26, 47, 0.22);

}

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

html {

    scroll-behavior: smooth;

}

body {

    overflow-x: hidden;

    color: var(--texto);

    background-color: var(--fondo);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

}

img {

    display: block;

}

.section-anchor {

    scroll-margin-top: 86px;

}

.section-padding {

    padding:
        clamp(
            4.5rem,
            7vw,
            7rem
        )
        0;

}

/* =====================================================
   TIPOGRAFÍA GENERAL
   ===================================================== */

.section-eyebrow {

    margin-bottom: 0.8rem;

    color: var(--rojo);

    font-size: 0.86rem;

    font-weight: 850;

    letter-spacing: 0.13rem;

    text-transform: uppercase;

}

.section-title {

    margin: 0;

    color: var(--azul-principal);

    font-size:
        clamp(
            2.15rem,
            4vw,
            3.7rem
        );

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -0.025em;

}

.section-description {

    color: var(--texto-secundario);

    font-size:
        clamp(
            1.05rem,
            1.5vw,
            1.28rem
        );

    line-height: 1.75;

}

.section-heading {

    max-width: 850px;

}

/* =====================================================
   NAVBAR
   ===================================================== */

.site-header {

    z-index: 1030;

    background-color:
        var(--azul-principal);

    box-shadow:
        0
        6px
        24px
        rgba(0, 0, 0, 0.17);

}

.site-navbar {

    min-height: 78px;

    background-color:
        var(--azul-principal);

}

.brand-logo {

    width: 64px;

    height: 52px;

    object-fit: contain;

}

.brand-name {

    color: var(--blanco);

    font-size:
        clamp(
            1rem,
            1.6vw,
            1.5rem
        );

    font-weight: 750;

}

.brand-company {

    color: #d8e2ec;

    font-size: 0.72rem;

}

.site-navbar .nav-link {

    color:
        rgba(
            255,
            255,
            255,
            0.9
        );

    font-weight: 600;

    border-radius: 0.55rem;

}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {

    color: var(--dorado);

    background-color:
        rgba(
            255,
            255,
            255,
            0.06
        );

}

.navbar-toggler {

    border-color:
        rgba(
            255,
            255,
            255,
            0.35
        );

}

/* =====================================================
   BOTONES
   ===================================================== */

.btn {

    border-radius: 0.7rem;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}

.btn:hover {

    transform:
        translateY(-2px);

}

.btn-red {

    color: var(--blanco);

    border-color: var(--rojo);

    background-color: var(--rojo);

}

.btn-red:hover {

    color: var(--blanco);

    border-color: var(--rojo-hover);

    background-color: var(--rojo-hover);

}

.btn-gold {

    color: var(--azul-principal);

    border-color: var(--dorado);

    background-color: var(--dorado);

}

.btn-gold:hover {

    color: var(--azul-principal);

    border-color: var(--dorado-hover);

    background-color: var(--dorado-hover);

}

.btn-reservation {

    color: var(--azul-principal);

    border:
        2px solid
        var(--dorado);

    background-color:
        var(--dorado);

    box-shadow:
        0
        12px
        28px
        rgba(243, 189, 78, 0.28);

}

.btn-reservation:hover {

    color: var(--azul-principal);

    border-color:
        var(--dorado-hover);

    background-color:
        var(--dorado-hover);

}

.btn-outline-hero {

    color: var(--blanco);

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.9
        );

    background-color:
        rgba(
            7,
            26,
            47,
            0.25
        );

}

.btn-outline-hero:hover {

    color:
        var(--azul-principal);

    border-color:
        var(--blanco);

    background-color:
        var(--blanco);

}

/* =====================================================
   HERO
   ===================================================== */

.hero-section {

    position: relative;

    min-height:
        calc(
            100vh - 78px
        );

    display: flex;

    align-items: center;

    overflow: hidden;

    background-color:
        var(--azul-principal);

}

.hero-background-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(23, 61, 99, 0.34),
            rgba(23, 61, 99, 0.44)
        );

}

.hero-container {

    position: relative;

    z-index: 3;

    padding-top:
        clamp(
            5rem,
            10vh,
            8rem
        );

    padding-bottom:
        clamp(
            6rem,
            12vh,
            9rem
        );

}

.hero-content {

    max-width: 900px;

    margin-inline: auto;

}

.hero-eyebrow-wrapper {

    display: flex;

    align-items: center;

    gap: 0.8rem;

}

.hero-eyebrow {

    color:
        var(--dorado);

    font-weight: 850;

    letter-spacing: 0.14rem;

}

.hero-eyebrow-line {

    width: 42px;

    height: 2px;

    background-color:
        var(--dorado);

}

.hero-title {

    margin-top: 1.4rem;

    color:
        var(--blanco);

    font-size:
        clamp(
            3rem,
            6.5vw,
            5.8rem
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.025em;

}

.hero-title span {

    display: block;

    color:
        var(--dorado);

}

.hero-description {

    max-width: 720px;

    margin-top: 1.7rem;

    color:
        rgba(
            255,
            255,
            255,
            0.95
        );

    font-size:
        clamp(
            1.1rem,
            1.7vw,
            1.45rem
        );

    line-height: 1.7;

}

.hero-actions {

    margin-top: 2rem;

}

.hero-decoration {

    position: absolute;

    z-index: 2;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 50%;

}

.hero-decoration-one {

    top: -180px;

    right: -120px;

    width: 430px;

    height: 430px;

}

.hero-decoration-two {

    bottom: -240px;

    left: -180px;

    width: 520px;

    height: 520px;

}

/* =====================================================
   NOSOTROS
   ===================================================== */

.about-section {

    position: relative;

    overflow: hidden;

    background-color:
        var(--azul-principal);

}

.about-background-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.about-container {

    position: relative;

    z-index: 3;

    padding-top:
        clamp(
            5rem,
            8vw,
            7rem
        );

    padding-bottom:
        clamp(
            5rem,
            8vw,
            7rem
        );

}

.about-intro-card {

    max-width: 850px;

    margin-bottom: 3rem;

    padding:
        clamp(
            2rem,
            4vw,
            3rem
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius:
        var(--radio);

    background:
        linear-gradient(
            145deg,
            rgba(7, 26, 47, 0.92),
            rgba(13, 46, 79, 0.86)
        );

    backdrop-filter:
        blur(9px);

}

.about-eyebrow-wrapper {

    display: flex;

    align-items: center;

    gap: 0.8rem;

}

.about-eyebrow {

    color:
        var(--dorado);

    font-weight: 850;

    letter-spacing: 0.14rem;

}

.about-eyebrow-line {

    width: 38px;

    height: 2px;

    background-color:
        var(--dorado);

}

.about-title {

    margin-top: 1rem;

    color:
        var(--blanco);

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.4rem
        );

    font-weight: 900;

}

.about-title span {

    display: block;

    color:
        var(--dorado);

}

.about-description {

    max-width: 660px;

    margin:
        1.25rem auto 0;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    line-height: 1.7;

}

.about-grid {

    max-width: 1220px;

    margin-inline: auto;

}

.about-card {

    padding: 1.8rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius:
        var(--radio);

    background:
        linear-gradient(
            145deg,
            rgba(7, 26, 47, 0.9),
            rgba(13, 46, 79, 0.8)
        );

    color:
        var(--blanco);

    backdrop-filter:
        blur(9px);

}

.about-card-label {

    color:
        var(--dorado);

    font-size: 0.72rem;

    font-weight: 850;

    letter-spacing: 0.13rem;

}

.about-card h3 {

    color:
        var(--blanco);

    font-size: 1.4rem;

    font-weight: 800;

}

.about-card-text {

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

    line-height: 1.65;

}

.about-values-list {

    color:
        rgba(
            255,
            255,
            255,
            0.92
        );

}

.about-decoration {

    position: absolute;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 50%;

}

.about-decoration-one {

    top: -170px;

    left: -180px;

    width: 430px;

    height: 430px;

}

.about-decoration-two {

    right: -230px;

    bottom: -250px;

    width: 540px;

    height: 540px;

}

/* =====================================================
   MENÚ
   ===================================================== */

.menu-section {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-color:
        var(--azul-principal);

}

.menu-background-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.menu-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(7, 26, 47, 0.50),
            rgba(7, 26, 47, 0.66)
        );

}

.menu-container {

    position: relative;

    z-index: 3;

    padding:
        clamp(
            5rem,
            8vw,
            7rem
        )
        0;

}

.menu-content-card {

    max-width: 850px;

    padding:
        clamp(
            2.2rem,
            5vw,
            3.8rem
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius:
        var(--radio-grande);

    background:
        linear-gradient(
            145deg,
            rgba(7, 26, 47, 0.91),
            rgba(13, 46, 79, 0.84)
        );

    backdrop-filter:
        blur(9px);

}

.menu-eyebrow-wrapper {

    display: flex;

    align-items: center;

    gap: 0.8rem;

}

.menu-eyebrow {

    color:
        var(--dorado);

    font-weight: 850;

    letter-spacing: 0.14rem;

}

.menu-eyebrow-line {

    width: 38px;

    height: 2px;

    background-color:
        var(--dorado);

}

.menu-title {

    color:
        var(--blanco);

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.4rem
        );

    font-weight: 900;

}

.menu-title span {

    display: block;

    color:
        var(--dorado);

}

.menu-description {

    max-width: 680px;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

    line-height: 1.7;

}

.menu-category-list {

    margin-top: 1.8rem;

    display: flex;

    flex-wrap: wrap;

    gap: 0.65rem;

}

.menu-category-list span {

    padding:
        0.55rem
        0.85rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    border-radius: 50rem;

    color:
        var(--blanco);

    background-color:
        rgba(
            255,
            255,
            255,
            0.09
        );

}

.menu-button {

    margin-top: 2rem;

}

/* =====================================================
   PROMOCIONES
   ===================================================== */

.experience-section {

    background-color:
        var(--blanco);

}

.experience-card {

    position: relative;

    padding:
        clamp(
            1.6rem,
            3vw,
            2rem
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(
            7,
            26,
            47,
            0.10
        );

    border-radius:
        var(--radio);

    background-color:
        var(--blanco);

    box-shadow:
        0
        14px
        38px
        rgba(
            7,
            26,
            47,
            0.10
        );

}

.experience-card::before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--rojo),
            var(--dorado)
        );

}

.experience-icon {

    width: 48px;

    height: 48px;

    margin-bottom: 1.15rem;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    color:
        var(--azul-principal);

    background-color:
        var(--dorado);

    font-weight: 900;

}

.promotion-day {

    width: fit-content;

    padding:
        0.35rem
        0.65rem;

    border-radius: 50rem;

    color:
        var(--rojo);

    background-color:
        rgba(
            198,
            40,
            40,
            0.08
        );

    font-weight: 900;

}

.experience-card h3 {

    margin-top: 0.8rem;

    color:
        var(--azul-principal);

    font-weight: 850;

}

.experience-card p {

    color:
        var(--texto-secundario);

    line-height: 1.65;

}

.promotion-note {

    margin-bottom: 1.4rem;

    color: #7a8490;

}

/* =====================================================
   RESEÑAS DE GOOGLE
   ===================================================== */

.reviews-section {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #071a2f,
            #0b2949
        );

}

.reviews-section::before {

    position: absolute;

    top: -230px;

    right: -180px;

    width: 520px;

    height: 520px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius: 50%;

    content: "";

}

.reviews-section .container-xxl {

    position: relative;

    z-index: 2;

}

.reviews-section .section-eyebrow,
.reviews-section .section-title,
.reviews-section .section-description {

    color:
        var(--blanco);

}

/* =====================================================
   RESUMEN GENERAL DE GOOGLE
   ===================================================== */

.google-rating-summary {

    margin:
        0
        auto
        2.5rem;

    display: flex;

    justify-content: center;

}

.google-rating-brand {

    padding:
        0.8rem
        1.3rem;

    display: inline-flex;

    align-items: center;

    gap: 0.9rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 1rem;

    color:
        var(--blanco);

    background-color:
        rgba(
            255,
            255,
            255,
            0.08
        );

    backdrop-filter:
        blur(8px);

}

.google-logo-letter {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #4285f4;

    background-color:
        var(--blanco);

    font-size: 1.5rem;

    font-weight: 900;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}

.google-rating-info {

    display: flex;

    flex-direction: column;

}

.google-rating-top {

    display: flex;

    align-items: center;

    gap: 0.65rem;

}

.google-rating-number {

    color:
        var(--blanco);

    font-size: 1.35rem;

    font-weight: 900;

}

.google-rating-stars {

    color: #fbbc04;

    font-size: 1.05rem;

    letter-spacing: 0.04rem;

}

.google-rating-count {

    margin-top: 0.1rem;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 0.78rem;

}

/* =====================================================
   GRID RESEÑAS
   ===================================================== */

.google-reviews-grid {

    max-width: 1180px;

    margin-inline: auto;

}

.review-card {

    position: relative;

    padding:
        clamp(
            1.7rem,
            3vw,
            2.1rem
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(
            7,
            26,
            47,
            0.08
        );

    border-radius:
        var(--radio);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6f8fb
        );

    box-shadow:
        0
        16px
        40px
        rgba(
            0,
            0,
            0,
            0.20
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}

.review-card::before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    content: "";

    background:
        linear-gradient(
            90deg,
            #4285f4,
            #34a853,
            #fbbc04,
            #ea4335
        );

}

.review-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0
        24px
        52px
        rgba(
            0,
            0,
            0,
            0.26
        );

}

.review-top {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 1rem;

}

.review-quote {

    color:
        var(--rojo);

    font-size: 4rem;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 700;

    line-height: 0.8;

}

.review-stars {

    color: #f4b400;

    font-size: 1rem;

    letter-spacing: 0.04rem;

    white-space: nowrap;

}

.review-card > .review-text {

    flex: 1;

    margin:
        1.2rem
        0
        1.8rem;

    color:
        var(--texto-secundario);

    font-size: 1rem;

    line-height: 1.75;

}

/* =====================================================
   AUTOR RESEÑA
   ===================================================== */

.review-author {

    display: flex;

    align-items: center;

    gap: 0.85rem;

}

.review-avatar {

    width: 46px;

    height: 46px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color:
        var(--blanco);

    background:
        linear-gradient(
            145deg,
            var(--azul-principal),
            var(--azul-claro)
        );

    font-size: 1rem;

    font-weight: 900;

}

.review-author-info {

    min-width: 0;

}

.review-author strong {

    display: block;

    color:
        var(--azul-principal);

    font-size: 0.95rem;

    font-weight: 850;

}

.review-date {

    display: block;

    margin-top: 0.05rem;

    color: #88919c;

    font-size: 0.74rem;

}

.google-review-source {

    margin-top: 0.28rem;

    display: flex;

    align-items: center;

    gap: 0.3rem;

    color: #64707d;

    font-size: 0.68rem;

    font-weight: 650;

}

.google-mini-logo {

    width: 18px;

    height: 18px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    border:
        1px solid
        #dce1e6;

    border-radius: 50%;

    color: #4285f4;

    background-color:
        var(--blanco);

    font-size: 0.65rem;

    font-weight: 900;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}

/* =====================================================
   BOTÓN RESEÑAS GOOGLE
   ===================================================== */

.google-reviews-actions {

    margin-top: 2.3rem;

    display: flex;

    justify-content: center;

}

.btn-google-reviews {

    padding:
        0.78rem
        1.4rem;

    color:
        var(--azul-principal);

    border:
        2px solid
        var(--dorado);

    background-color:
        var(--dorado);

    box-shadow:
        0
        10px
        28px
        rgba(
            243,
            189,
            78,
            0.18
        );

}

.btn-google-reviews:hover,
.btn-google-reviews:focus {

    color:
        var(--azul-principal);

    border-color:
        var(--dorado-hover);

    background-color:
        var(--dorado-hover);

}

/* =====================================================
   RESERVACIÓN
   ===================================================== */

.reservation-section {

    position: relative;

    overflow: hidden;

    background:
        url(
            "img/reservacionImg.webp"
        )
        center
        center /
        cover
        no-repeat;

}

.reservation-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(7, 26, 47, 0.72) 0%,
            rgba(7, 26, 47, 0.84) 100%
        );

}

.reservation-container {

    position: relative;

    z-index: 2;

    max-width: 1080px;

    padding-top:
        clamp(
            4.5rem,
            7vw,
            6rem
        );

    padding-bottom:
        clamp(
            4.5rem,
            7vw,
            6rem
        );

}

/* =====================================================
   ENCABEZADO RESERVACIÓN
   ===================================================== */

.reservation-heading {

    max-width: 740px;

    margin-inline: auto;

}

.reservation-eyebrow {

    margin-bottom: 0.7rem;

    color:
        var(--dorado);

    font-size: 0.78rem;

    font-weight: 900;

    letter-spacing: 0.15rem;

    text-transform: uppercase;

}

.reservation-title {

    margin: 0;

    color:
        var(--blanco);

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.2rem
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.035em;

}

.reservation-title span {

    color:
        var(--dorado);

}

.reservation-description {

    margin:
        1rem
        auto
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        1.05rem;

    line-height: 1.6;

}

/* =====================================================
   INDICADORES
   ===================================================== */

.reservation-features {

    max-width: 820px;

    margin:
        2rem
        auto
        2rem;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 0.8rem;

}

.reservation-feature {

    min-height: 72px;

    padding:
        0.9rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.7rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 1rem;

    background:
        rgba(
            7,
            26,
            47,
            0.55
        );

    color:
        var(--blanco);

    backdrop-filter:
        blur(7px);

}

.reservation-feature span {

    width: 34px;

    height: 34px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color:
        var(--azul-principal);

    background-color:
        var(--dorado);

    font-size: 0.72rem;

    font-weight: 900;

}

.reservation-feature strong {

    font-size: 0.9rem;

    line-height: 1.3;

}

/* =====================================================
   TARJETA FORMULARIO
   ===================================================== */

.reservation-card {

    max-width: 900px;

    margin-inline: auto;

    padding:
        clamp(
            1.6rem,
            4vw,
            2.6rem
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.28
        );

    border-radius:
        1.6rem;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0
        28px
        70px
        rgba(
            0,
            0,
            0,
            0.34
        );

}

.reservation-card-header {

    margin-bottom: 1.7rem;

}

.reservation-card-label {

    margin-bottom: 0.35rem;

    color:
        var(--rojo);

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.12rem;

}

.reservation-card-header h3 {

    margin-bottom: 0.35rem;

    color:
        var(--azul-principal);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.4rem
        );

    font-weight: 850;

}

.reservation-card-header p {

    margin: 0;

    color:
        var(--texto-secundario);

    font-size: 0.92rem;

}

/* =====================================================
   FORMULARIO
   ===================================================== */

.reservation-form .form-label {

    margin-bottom: 0.45rem;

    color:
        var(--azul-principal);

    font-size: 0.84rem;

    font-weight: 700;

}

.optional-field {

    color: #838c96;

    font-size: 0.74rem;

    font-weight: 500;

}

.reservation-control {

    min-height: 50px;

    border:
        1px solid
        #d5dce5;

    border-radius: 0.7rem;

    color:
        var(--texto);

    background-color:
        #f8fafc;

    font-size: 0.9rem;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;

}

.reservation-control:focus {

    border-color:
        var(--dorado);

    background-color:
        var(--blanco);

    box-shadow:
        0
        0
        0
        0.2rem
        rgba(
            243,
            189,
            78,
            0.20
        );

}

.reservation-control::placeholder {

    color: #9aa4ae;

}

.reservation-textarea {

    min-height: 50px;

    height: 50px;

    resize: vertical;

}

/* =====================================================
   BOTÓN RESERVACIÓN
   ===================================================== */

.reservation-submit-area {

    margin-top: 1.7rem;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.btn-reservation-submit {

    min-width: 300px;

    min-height: 54px;

    padding-inline: 2.2rem;

    color:
        var(--azul-principal);

    border:
        2px solid
        var(--dorado);

    background-color:
        var(--dorado);

    font-weight: 850;

    box-shadow:
        0
        12px
        28px
        rgba(
            243,
            189,
            78,
            0.25
        );

}

.btn-reservation-submit:hover,
.btn-reservation-submit:focus {

    color:
        var(--azul-principal);

    border-color:
        var(--dorado-hover);

    background-color:
        var(--dorado-hover);

}

.reservation-submit-area p {

    margin:
        0.65rem
        0
        0;

    color: #78828c;

    font-size: 0.72rem;

    text-align: center;

}

/* =====================================================
   SUCURSALES
   ===================================================== */

.locations-section {

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f5f7fa
        );

}

.location-card {

    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius:
        var(--radio);

    background-color:
        var(--blanco);

    box-shadow:
        var(--sombra);

}

.location-number {

    position: absolute;

    top: 1.4rem;

    right: 1.4rem;

    width: 45px;

    height: 45px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background-color:
        var(--dorado);

    color:
        var(--azul-principal);

    font-weight: 900;

}

.location-card-content {

    height: 100%;

    padding: 2rem;

    display: flex;

    flex-direction: column;

}

.location-zone-label {

    color:
        var(--rojo);

    font-weight: 850;

}

.location-card h3 {

    color:
        var(--azul-principal);

    font-weight: 850;

}

.location-separator {

    width: 45px;

    height: 3px;

    margin:
        1.1rem
        0
        1.6rem;

    background-color:
        var(--dorado);

}

.location-info {

    margin-bottom: 1.8rem;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}

.location-info strong {

    display: block;

    color:
        var(--rojo);

}

.location-info p {

    margin: 0;

    color:
        var(--texto-secundario);

}

.location-info a {

    color:
        var(--azul-secundario);

    font-weight: 750;

    text-decoration: none;

}

/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {

    padding:
        4.5rem
        0
        1.6rem;

    color:
        var(--blanco);

    background:
        linear-gradient(
            135deg,
            #071a2f 0%,
            #0b2745 100%
        );

}

.footer-main {

    align-items:
        flex-start;

}

.footer-brand {

    display:
        inline-flex;

    align-items: center;

    gap: 0.8rem;

    margin-bottom: 1.4rem;

    color:
        var(--blanco);

    text-decoration: none;

}

.footer-brand:hover {

    color:
        var(--blanco);

}

.footer-brand img {

    width: 68px;

    height: 56px;

    object-fit: contain;

}

.footer-brand span {

    display: flex;

    flex-direction: column;

}

.footer-brand strong {

    color:
        var(--blanco);

    font-size: 1.25rem;

    font-weight: 800;

}

.footer-brand small {

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 0.78rem;

}

.footer-about-text {

    max-width: 390px;

    margin-bottom: 1rem;

    color:
        rgba(
            255,
            255,
            255,
            0.83
        );

    font-size: 0.93rem;

    line-height: 1.7;

}

.footer-about-secondary {

    margin-bottom: 0;

}

.footer-column-title {

    margin-bottom: 1.35rem;

    color:
        var(--blanco);

    font-size: 1.08rem;

    font-weight: 800;

}

.footer-links {

    display: flex;

    flex-direction: column;

    align-items:
        flex-start;

    gap: 0.72rem;

}

.footer-links a {

    color:
        rgba(
            255,
            255,
            255,
            0.83
        );

    font-size: 0.91rem;

    text-decoration: none;

}

.footer-links a:hover {

    color:
        var(--dorado);

}

.footer-contact-list {

    display: flex;

    flex-direction: column;

    gap: 1.3rem;

}

.footer-contact-item {

    display: flex;

    align-items:
        flex-start;

    gap: 0.85rem;

}

.footer-contact-icon {

    width: 24px;

    height: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    color:
        var(--dorado);

}

.footer-contact-icon svg {

    width: 20px;

    height: 20px;

    fill:
        currentColor;

}

.footer-contact-item strong {

    display: block;

    color:
        var(--blanco);

}

.footer-contact-item a {

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

    text-decoration: none;

}

.footer-contact-item a:hover {

    color:
        var(--dorado);

}

.footer-socials {

    margin-top: 1.7rem;

    display: flex;

    gap: 0.8rem;

}

.social-button {

    width: 44px;

    height: 44px;

    display:
        inline-flex;

    justify-content: center;

    align-items: center;

    color:
        var(--blanco);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.42
        );

    border-radius: 50%;

    text-decoration: none;

}

.social-button svg {

    width: 21px;

    height: 21px;

    fill:
        currentColor;

}

.social-button:hover {

    color:
        var(--azul-principal);

    border-color:
        var(--dorado);

    background-color:
        var(--dorado);

}

.footer-line {

    margin:
        3.4rem
        0
        1.5rem;

    border: 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    opacity: 1;

}

.footer-bottom {

    text-align: center;

}

.footer-copyright {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 0.82rem;

}

/* =====================================================
   WHATSAPP FLOTANTE
   ===================================================== */

.whatsapp-floating {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 1020;

    width: 76px;

    height: 76px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    transition:
        transform 0.25s ease;

}

.whatsapp-logo-img {

    width: 64px;

    height: 64px;

    object-fit: contain;

    border-radius: 50%;

    filter:
        drop-shadow(
            0
            10px
            20px
            rgba(
                0,
                0,
                0,
                0.28
            )
        );

}

.whatsapp-floating:hover {

    transform:
        translateY(-3px)
        scale(1.05);

}

/* =====================================================
   TABLETS Y DISPOSITIVOS FOLD ABIERTOS
   ===================================================== */

@media (max-width: 991.98px) {

    .hero-section {

        min-height: 760px;

    }

    .hero-container {

        padding-top: 5rem;

        padding-bottom: 6rem;

    }

    .hero-title {

        font-size:
            clamp(
                2.7rem,
                6vw,
                3.5rem
            );

        line-height: 1.02;

    }

    .about-card {

        text-align: center;

    }

    .menu-section {

        min-height: 650px;

    }

    .reservation-features {

        max-width: 760px;

    }

    .reservation-card {

        max-width: 820px;

    }

}

/* =====================================================
   MÓVIL Y PLEGABLES
   ===================================================== */

@media (max-width: 767.98px) {

    .hero-title {

        font-size:
            clamp(
                2.2rem,
                7vw,
                2.8rem
            );

        line-height: 1.03;

    }

    .reservation-features {

        grid-template-columns: 1fr;

        max-width: 430px;

    }

    .reservation-feature {

        justify-content:
            flex-start;

    }

    .google-rating-brand {

        width: 100%;

        max-width: 400px;

        justify-content: center;

    }

}

/* =====================================================
   CELULARES
   iPhone / Pixel / Fold cerrado
   ===================================================== */

@media (max-width: 575.98px) {

    .brand-logo {

        width: 48px;

        height: 42px;

    }

    .brand-name {

        font-size: 0.95rem;

    }

    /* =================================================
       HERO
       ================================================= */

    .hero-section {

        min-height:
            calc(
                100svh - 70px
            );

    }

    .hero-container {

        padding-top: 3.7rem;

        padding-bottom: 5rem;

    }

    .hero-eyebrow-line,
    .about-eyebrow-line,
    .menu-eyebrow-line {

        display: none;

    }

    .hero-title {

        margin-top: 1.15rem;

        font-size:
            clamp(
                2rem,
                8.5vw,
                2.4rem
            );

        line-height: 1.03;

        letter-spacing: -0.035em;

    }

    .hero-description {

        max-width: 340px;

        margin-top: 1.25rem;

        font-size: 0.94rem;

        line-height: 1.6;

    }

    .hero-eyebrow {

        font-size: 0.72rem;

        line-height: 1.4;

        letter-spacing: 0.09rem;

    }

    .hero-actions {

        width: 100%;

        margin-top: 1.5rem;

    }

    .hero-actions .btn {

        width: 100%;

    }

    /* =================================================
       NOSOTROS
       ================================================= */

    .about-container {

        padding:
            4rem
            0;

    }

    .about-intro-card {

        padding:
            1.7rem
            1.35rem;

    }

    .about-title,
    .menu-title {

        font-size:
            clamp(
                2.25rem,
                11vw,
                3.1rem
            );

    }

    /* =================================================
       MENÚ
       ================================================= */

    .menu-section {

        min-height: 620px;

    }

    .menu-container {

        padding:
            4rem
            0;

    }

    .menu-content-card {

        padding:
            1.8rem
            1.35rem;

    }

    .menu-button {

        width: 100%;

        max-width: 340px;

    }

    /* =================================================
       RESEÑAS GOOGLE
       ================================================= */

    .google-rating-summary {

        margin-bottom: 2rem;

    }

    .google-rating-brand {

        padding:
            0.8rem
            1rem;

    }

    .google-logo-letter {

        width: 38px;

        height: 38px;

        font-size: 1.3rem;

    }

    .google-rating-number {

        font-size: 1.2rem;

    }

    .google-rating-stars {

        font-size: 0.9rem;

    }

    .review-card {

        padding:
            1.6rem
            1.4rem;

    }

    .review-card > .review-text {

        font-size: 0.95rem;

    }

    .google-reviews-actions .btn {

        width: 100%;

        max-width: 360px;

    }

    /* =================================================
       RESERVACIÓN
       ================================================= */

    .reservation-container {

        padding-top: 4rem;

        padding-bottom: 4rem;

    }

    .reservation-title {

        font-size:
            clamp(
                2.4rem,
                12vw,
                3.2rem
            );

    }

    .reservation-description {

        font-size: 0.95rem;

    }

    .reservation-features {

        margin-top: 1.6rem;

        margin-bottom: 1.6rem;

    }

    .reservation-card {

        padding:
            1.5rem
            1.2rem;

        border-radius: 1.25rem;

    }

    .reservation-card-header {

        margin-bottom: 1.4rem;

    }

    .reservation-control {

        min-height: 52px;

    }

    .reservation-textarea {

        min-height: 85px;

        height: auto;

    }

    .btn-reservation-submit {

        width: 100%;

        min-width: 0;

    }

    /* =================================================
       FOOTER
       ================================================= */

    .site-footer {

        padding:
            3.5rem
            0
            1.4rem;

    }

    .footer-main {

        text-align: center;

    }

    .footer-brand {

        justify-content: center;

    }

    .footer-about-text {

        margin-left: auto;

        margin-right: auto;

    }

    .footer-links {

        align-items: center;

    }

    .footer-contact-list {

        width: fit-content;

        max-width: 100%;

        margin-inline: auto;

        text-align: left;

    }

    .footer-socials {

        justify-content: center;

    }

    /* =================================================
       WHATSAPP
       ================================================= */

    .whatsapp-floating {

        right: 12px;

        bottom: 12px;

        width: 68px;

        height: 68px;

    }

    .whatsapp-logo-img {

        width: 58px;

        height: 58px;

    }

}

/* =====================================================
   iPhone 16 / Pixel
   391px - 440px
   ===================================================== */

@media (min-width: 391px) and (max-width: 440px) {

    .hero-title {

        font-size: 2.05rem;

        line-height: 1.03;

        letter-spacing: -0.035em;

    }

    .hero-content {

        max-width: 350px;

        margin-inline: auto;

    }

    .hero-description {

        max-width: 315px;

    }

}

/* =====================================================
   MÓVILES PEQUEÑOS
   ===================================================== */

@media (max-width: 390px) {

    .hero-title {

        font-size: 1.9rem;

        line-height: 1.04;

        letter-spacing: -0.03em;

    }

    .hero-content {

        max-width: 320px;

        margin-inline: auto;

    }

    .hero-description {

        max-width: 290px;

        font-size: 0.9rem;

    }

    .hero-eyebrow {

        font-size: 0.66rem;

        letter-spacing: 0.07rem;

    }

    .about-title,
    .menu-title {

        font-size: 2.2rem;

    }

    .reservation-title {

        font-size: 2.2rem;

    }

    .reservation-card {

        padding:
            1.3rem
            1rem;

    }

    .google-rating-brand {

        align-items: center;

    }

    .google-rating-top {

        gap: 0.4rem;

    }

    .google-rating-stars {

        font-size: 0.82rem;

    }

    .google-rating-count {

        font-size: 0.7rem;

    }

    .review-top {

        gap: 0.5rem;

    }

    .review-stars {

        font-size: 0.86rem;

    }

    .footer-brand img {

        width: 58px;

        height: 50px;

    }

    .footer-brand strong {

        font-size: 1.05rem;

    }

    .whatsapp-floating {

        right: 10px;

        bottom: 10px;

    }

}

/* =====================================================
   GALAXY Z FOLD MUY ANGOSTO
   ===================================================== */

@media (max-width: 360px) {

    .hero-title {

        font-size: 1.75rem;

        line-height: 1.05;

    }

    .hero-description {

        font-size: 0.86rem;

    }

    .hero-container {

        padding-top: 3.2rem;

        padding-bottom: 4rem;

    }

    .hero-actions {

        gap: 0.65rem !important;

    }

    .hero-actions .btn {

        font-size: 0.9rem;

        padding-top: 0.65rem;

        padding-bottom: 0.65rem;

    }

    .google-rating-brand {

        padding:
            0.7rem
            0.8rem;

    }

    .google-logo-letter {

        width: 34px;

        height: 34px;

    }

    .google-rating-number {

        font-size: 1.05rem;

    }

    .google-rating-stars {

        font-size: 0.74rem;

    }

}

/* =====================================================
   ACCESIBILIDAD
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}