/* ===================================================================
   QUINOA — Identidad clara (amarillo clarito + verde agua)
   Cabecera fija con logo secundario en todas las páginas,
   hero del inicio con degradado animado y precargador claro.
=================================================================== */

:root {
    --qc-amarillo: #fbf6c4;
    --qc-amarillo-2: #f3ec8f;
    --qc-agua: #c4efe2;
    --qc-agua-2: #8fdcc6;
    --qc-verde-oscuro: #1d4a2c;
    --qc-verde: #3f8a4b;
    --qc-degradado: linear-gradient(120deg,
            var(--qc-amarillo) 0%,
            var(--qc-agua) 22%,
            var(--qc-amarillo-2) 45%,
            var(--qc-agua-2) 68%,
            var(--qc-amarillo) 86%,
            var(--qc-agua) 100%);
}

@keyframes qcDegradado {
    0% {
        background-position: 0% 30%;
    }

    25% {
        background-position: 60% 0%;
    }

    50% {
        background-position: 100% 70%;
    }

    75% {
        background-position: 40% 100%;
    }

    100% {
        background-position: 0% 30%;
    }
}

/* ===================================
   PRECARGADOR CLARO
=================================== */
#loader {
    background: var(--qc-degradado);
    background-size: 320% 320%;
    animation: qcDegradado 10s ease-in-out infinite;
}

#loader .glow {
    width: 520px;
    height: 520px;
    top: 50%;
    left: 50%;
    filter: blur(70px);
}

#loader .glow-a {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
}

#loader .glow-b {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(143, 220, 198, 0.55) 0%, transparent 70%);
    animation-delay: -2s;
}

#loader .brand {
    letter-spacing: 0;
    padding-left: 0;
    margin-bottom: 26px;
    animation: qcLoaderLogo 1s cubic-bezier(.22, 1, .36, 1) forwards .2s;
}

#loader .brand img {
    display: block;
    width: min(320px, 72vw);
    height: auto;
}

@keyframes qcLoaderLogo {
    from {
        opacity: 0;
        transform: scale(.92);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* barra de carga fina debajo del logo */
#loader .tagline {
    width: min(220px, 60vw);
    height: 3px;
    padding: 0;
    border-radius: 3px;
    background: rgba(29, 74, 44, 0.15);
    overflow: hidden;
    animation: ldr-fade-up .6s ease forwards .5s;
}

#loader .tagline::after {
    content: '';
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 3px;
    background: var(--qc-verde-oscuro);
    animation: qcBarra 1.2s ease-in-out infinite;
}

@keyframes qcBarra {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

/* ===================================
   CABECERA FIJA — todas las páginas
=================================== */
.header2-wrap {
    background: var(--qc-degradado);
    background-size: 320% 320%;
    animation: qcDegradado 16s ease-in-out infinite;
    padding: 14px 0;
    box-shadow: 0 8px 30px rgba(29, 74, 44, 0.08);
}

.header2-wrap.scrolled {
    padding: 8px 0;
    background: var(--qc-degradado);
    background-size: 320% 320%;
    border-bottom: 1px solid rgba(29, 74, 44, 0.1);
    box-shadow: 0 10px 40px rgba(29, 74, 44, 0.12);
}

/* En el inicio la cabecera se funde con el hero hasta hacer scroll */
.home-claro .header2-wrap:not(.scrolled) {
    background: transparent;
    box-shadow: none;
    animation: none;
}

.header2-navbar {
    min-height: 0;
}

.header2-logo img {
    height: 84px;
    width: auto;
}

.header2-wrap.scrolled .header2-logo img {
    height: 52px;
}

.header2-menu>.header2-menu-item>a,
.header2-menu>.header2-menu-item>a:link,
.header2-menu>.header2-menu-item>a:visited,
.header2-menu>.header2-menu-item>a:focus,
.header2-menu>.header2-menu-item>a:active {
    color: var(--qc-verde-oscuro) !important;
    -webkit-text-fill-color: var(--qc-verde-oscuro);
}

.header2-menu>.header2-menu-item>a:hover,
.header2-menu>.header2-menu-item>a:link:hover,
.header2-menu>.header2-menu-item>a:visited:hover {
    color: var(--qc-verde) !important;
    -webkit-text-fill-color: var(--qc-verde);
}

.header2-menu-item>a::after {
    background: var(--qc-verde-oscuro);
}

.header2-icon {
    color: var(--qc-verde-oscuro);
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(29, 74, 44, 0.15);
}

.header2-icon:hover {
    background: var(--qc-verde-oscuro);
    color: var(--white-color);
    transform: none;
    box-shadow: 0 0 0 6px rgba(29, 74, 44, 0.12);
}

.header2-toggle {
    background: rgba(255, 255, 255, 0.6);
}

.header2-toggle span {
    background: var(--qc-verde-oscuro);
}

/* Menú móvil: logo secundario en blanco sobre el panel oscuro */
.header2-mobile-logo img {
    height: 54px;
    width: auto;
}

/* El menú móvil cerrado proyectaba su sombra sobre el borde derecho */
.header2-mobile-menu:not(.active) {
    box-shadow: none;
}

@media (max-width: 991px) {
    .header2-logo img {
        height: 64px;
    }

    .header2-wrap.scrolled .header2-logo img {
        height: 46px;
    }
}

@media (max-width: 767px) {
    .header2-wrap {
        padding: 10px 0;
    }

    .header2-logo img {
        height: 54px;
    }

    .header2-wrap.scrolled .header2-logo img {
        height: 42px;
    }
}

/* ===================================
   HERO DEL INICIO — degradado en movimiento
=================================== */
.home-claro .hero-section {
    background: var(--qc-degradado);
    background-size: 320% 320%;
    animation: qcDegradado 16s ease-in-out infinite;
}

.home-claro .hero-orb {
    filter: blur(70px);
}

.home-claro .orb-1 {
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, transparent 70%);
    mix-blend-mode: soft-light;
    animation: qcOrbA 22s ease-in-out infinite;
}

.home-claro .orb-2 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(143, 220, 198, 0.5) 0%, transparent 70%);
    animation: qcOrbB 26s ease-in-out infinite;
}

@keyframes qcOrbA {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-220px, 180px) scale(1.2);
    }
}

@keyframes qcOrbB {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(260px, -160px) scale(0.85);
    }
}

.home-claro .hero-shape {
    opacity: 0.9;
    filter: drop-shadow(0 10px 14px rgba(29, 74, 44, 0.18));
}

.home-claro .hero-title {
    color: var(--qc-verde-oscuro);
}

.home-claro .hero-highlight {
    color: var(--qc-verde);
    font-weight: 400;
    letter-spacing: 0;
}

.home-claro .plate-ring {
    border-color: rgba(29, 74, 44, 0.45);
}

.home-claro .ring-2 {
    border-color: rgba(63, 138, 75, 0.25);
}

.home-claro .plate-glow {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
}

.home-claro .hero-pizza {
    border-color: var(--qc-verde-oscuro);
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.6), 0 30px 70px rgba(29, 74, 44, 0.22);
}

/* Accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {

    #loader,
    .header2-wrap,
    .home-claro .hero-section,
    .home-claro .orb-1,
    .home-claro .orb-2 {
        animation: none;
    }
}

/* ===================================
   FUENTE ARTÍSTICA — Karmina Italic
=================================== */
.eyebrow,
.cp-left__tag {
    font-size: 24px;
    font-weight: 500;
}

/* ===================================
   RESPONSIVE — cabecera y presentación del inicio
=================================== */

/* Notebooks chicas / tablets apaisadas: el menú no debe partirse en 2 líneas */
@media (min-width: 992px) and (max-width: 1299px) {
    .header2-navbar {
        gap: 18px;
    }

    .header2-logo img {
        height: 68px;
    }

    .header2-menu {
        gap: 22px;
    }

    .header2-menu>.header2-menu-item>a {
        font-size: 17px;
        white-space: nowrap;
    }

    .header2-reservation-btn {
        white-space: nowrap;
        font-size: 15px;
    }

    .home-claro .hero-title {
        font-size: 62px;
    }

    .home-claro .hero-plate-wrapper {
        width: 420px;
        height: 420px;
    }

    .home-claro .hero-pizza,
    .home-claro .plate-glow {
        width: 360px;
        height: 360px;
    }
}

/* Tablets verticales */
@media (min-width: 768px) and (max-width: 991px) {
    .home-claro .hero-row {
        padding: 120px 0 110px;
        align-content: center;
    }

    .home-claro .hero-title {
        font-size: 58px;
    }

    .home-claro .hero-visual {
        margin-top: 40px;
    }

    .home-claro .hero-plate-wrapper {
        width: 380px;
        height: 380px;
    }

    .home-claro .hero-pizza,
    .home-claro .plate-glow {
        width: 320px;
        height: 320px;
    }
}

/* Celulares */
@media (max-width: 767px) {
    /* deja asomar la sección siguiente para invitar a deslizar */
    .home-claro .hero-section {
        min-height: 90vh;
        min-height: 90svh;
    }

    .home-claro .hero-row {
        min-height: 90vh;
        min-height: 90svh;
        padding: 100px 0 80px;
        align-content: center;
        row-gap: 0;
    }

    .home-claro .hero-title {
        font-size: clamp(38px, 11.5vw, 50px);
        line-height: 1.05;
        letter-spacing: -0.5px;
        margin-bottom: 0;
    }

    .home-claro .hero-highlight {
        display: block;
        margin-top: 6px;
        font-size: 0.74em;
        line-height: 1.1;
    }

    .home-claro .hero-visual {
        margin-top: 26px;
    }

    .home-claro .hero-plate-wrapper {
        width: min(330px, 80vw);
        height: min(330px, 80vw);
    }

    .home-claro .hero-pizza {
        width: min(300px, 72vw);
        height: min(300px, 72vw);
        border-width: 4px;
    }

    .home-claro .plate-glow {
        width: min(300px, 72vw);
        height: min(300px, 72vw);
    }

    /* manchas de luz más chicas para no recargar la pantalla */
    .home-claro .orb-1 {
        width: 380px;
        height: 380px;
    }

    .home-claro .orb-2 {
        width: 320px;
        height: 320px;
    }

    .home-claro .curve-shape {
        width: 100%;
        min-width: 900px;
        left: 0;
    }
}

/* Celulares acostados: título y logo lado a lado */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
    .home-claro .hero-row {
        min-height: 100vh;
        padding: 80px 0 60px;
        text-align: left;
    }

    .home-claro .hero-shape {
        display: none !important;
    }

    .home-claro .hero-content,
    .home-claro .hero-visual {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .home-claro .hero-title {
        font-size: 38px;
    }

    .home-claro .hero-highlight {
        display: block;
        font-size: 0.9em;
    }

    .home-claro .hero-visual {
        margin-top: 0;
    }

    .home-claro .hero-plate-wrapper {
        width: 220px;
        height: 220px;
    }

    .home-claro .hero-pizza,
    .home-claro .plate-glow {
        width: 200px;
        height: 200px;
    }
}