/* ============================================================
   🍺 LA MICHELADA ESCOLAR
   ESTILO: BAR / STREET / PREMIUM / JUVENIL
   ============================================================ */

:root {
    --morado: #211a2e;
    --morado2: #30203f;
    --morado3: #432653;

    --verde: #c6f24e;
    --verde2: #e5ff88;

    --naranja: #ff9d1f;
    --amarillo: #ffc857;

    --rojo: #ff4d4d;
    --rojo2: #d93636;

    --crema: #fff6e8;
    --blanco: #ffffff;

    --texto: #292331;

    --sombra:
        0 15px 40px rgba(33, 26, 46, .15);

    --sombra-grande:
        0 25px 70px rgba(33, 26, 46, .25);
}


/* ============================================================
   🌎 CUERPO
   ============================================================ */

html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--texto);

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

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(198,242,78,.18),
            transparent 22%
        ),

        radial-gradient(
            circle at 95% 15%,
            rgba(255,157,31,.15),
            transparent 25%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(255,77,77,.08),
            transparent 25%
        ),

        var(--crema);

    overflow-x: hidden;
}


/* textura decorativa */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:
        radial-gradient(
            rgba(33,26,46,.12) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

    z-index: -1;
}


::selection {
    background: var(--verde);
    color: var(--morado);
}


/* ============================================================
   ✨ ANIMACIONES
   ============================================================ */

@keyframes entrada {
    from {
        opacity: 0;
        transform:
            translateY(35px)
            scale(.96);
    }

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


@keyframes entradaIzquierda {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes entradaDerecha {
    from {
        opacity: 0;
        transform: translateX(70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes flotar {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


@keyframes levitar {
    0%, 100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(1deg);
    }
}


@keyframes pulso {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }
}


@keyframes brillo {
    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(150%);
    }
}


@keyframes girar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes aparecerBrillo {
    0%, 100% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }
}


@keyframes burbuja {
    0% {
        transform:
            translateY(0)
            scale(.5);

        opacity: 0;
    }

    20% {
        opacity: .7;
    }

    100% {
        transform:
            translateY(-400px)
            translateX(30px)
            scale(1.2);

        opacity: 0;
    }
}


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

.navbar.bg-oscuro {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #17121f,
            var(--morado),
            var(--morado2)
        ) !important;

    border-bottom:
        4px solid var(--verde);

    box-shadow:
        0 8px 30px rgba(33,26,46,.3);

    z-index: 1000;
}


.navbar.bg-oscuro::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 4px;

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

    background-size: 300% 100%;

    animation:
        moverGradiente 5s linear infinite;
}


@keyframes moverGradiente {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 300% 0;
    }
}


.navbar-brand {
    font-weight: 900;

    transition:
        transform .3s ease,
        filter .3s ease;
}


.navbar-brand:hover {
    transform:
        scale(1.08);

    filter:
        drop-shadow(
            0 0 12px
            rgba(198,242,78,.6)
        );
}


.navbar-brand img {
    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);
}


.navbar-brand:hover img {
    transform:
        rotate(-12deg)
        scale(1.15);
}


.navbar .nav-link {
    position: relative;

    color: rgba(255,255,255,.9) !important;

    font-weight: 700;

    margin: 0 5px;

    transition:
        color .25s ease,
        transform .25s ease;
}


.navbar .nav-link:hover {
    color: var(--verde) !important;

    transform:
        translateY(-3px);
}


.navbar .nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -4px;

    width: 0;
    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--verde),
            var(--naranja)
        );

    transform:
        translateX(-50%);

    transition:
        width .3s ease;
}


.navbar .nav-link:hover::after {
    width: 90%;
}


.navbar .badge {
    animation:
        pulso 2s infinite;
}


/* ============================================================
   🍺 PORTADA / HERO
   ============================================================ */

.portada {
    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(198,242,78,.20),
            transparent 20%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(255,157,31,.20),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #17121f,
            var(--morado),
            #47294c
        );

    color: white;

    border-bottom:
        7px solid var(--verde);

    box-shadow:
        0 20px 50px rgba(33,26,46,.3);
}


/* círculos gigantes */

.portada::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -250px;

    border-radius: 50%;

    border:
        2px solid rgba(198,242,78,.15);

    box-shadow:
        0 0 0 40px rgba(198,242,78,.03),
        0 0 0 80px rgba(198,242,78,.02);

    animation:
        girar 25s linear infinite;
}


.portada::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -180px;
    bottom: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,157,31,.25),
            transparent 65%
        );

    animation:
        flotar 5s ease-in-out infinite;
}


/* título */

.portada h1 {
    position: relative;

    z-index: 2;

    font-size:
        clamp(2.5rem, 6vw, 5rem);

    line-height:
        .95;

    font-weight:
        1000;

    letter-spacing:
        -3px;

    color:
        white;

    text-shadow:
        0 5px 0 #111,
        0 12px 30px rgba(0,0,0,.4);

    animation:
        entradaIzquierda .8s ease both;
}


.portada h1 span {
    color:
        var(--verde);

    text-shadow:
        0 0 25px rgba(198,242,78,.35);
}


.portada .lead {
    position: relative;

    z-index: 2;

    font-size:
        1.15rem;

    color:
        rgba(255,255,255,.88);

    animation:
        entradaIzquierda .8s ease .15s both;
}


/* imagen hero */

.portada img {
    position: relative;

    z-index: 2;

    width: 100%;

    max-height: 370px;

    object-fit: cover;

    border:
        5px solid var(--verde);

    border-radius:
        25px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        0 0 0 10px rgba(198,242,78,.05);

    animation:
        entradaDerecha .9s ease .15s both,
        levitar 5s ease-in-out 1s infinite;

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.portada img:hover {
    transform:
        scale(1.04)
        rotate(1deg);

    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 40px rgba(198,242,78,.25);
}


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

.btn-michelada {
    position: relative;

    overflow: hidden;

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

    border-radius:
        14px;

    padding:
        .75rem 1.35rem;

    background:
        linear-gradient(
            135deg,
            var(--amarillo),
            var(--naranja)
        );

    color:
        var(--morado);

    font-weight:
        900;

    box-shadow:
        0 5px 0 #9c5b0b,
        0 12px 25px rgba(255,157,31,.25);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.btn-michelada::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.7),
            transparent
        );

    transform:
        skewX(-20deg);
}


.btn-michelada:hover::after {
    animation:
        brillo .7s ease;
}


.btn-michelada:hover {
    color:
        var(--morado);

    transform:
        translateY(-5px)
        scale(1.04);

    background:
        linear-gradient(
            135deg,
            var(--verde2),
            var(--verde)
        );

    box-shadow:
        0 7px 0 #7d982b,
        0 18px 35px rgba(198,242,78,.3);
}


.btn-michelada:active {
    transform:
        translateY(2px)
        scale(.97);

    box-shadow:
        0 2px 0 #7d982b;
}


.btn-outline-dark {
    border-radius:
        12px;

    font-weight:
        700;

    transition:
        all .25s ease;
}


.btn-outline-dark:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 10px 20px rgba(33,26,46,.15);
}


/* ============================================================
   🍺 PRODUCTOS
   ============================================================ */

.card-producto {
    position: relative;

    height: 100%;

    overflow: hidden;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(33,26,46,.08);

    border-top:
        6px solid var(--verde);

    border-radius:
        20px;

    box-shadow:
        0 8px 25px rgba(33,26,46,.08);

    animation:
        entrada .6s ease both;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .3s ease;
}


/* brillo de tarjeta */

.card-producto::before {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;
    left: -100%;

    width: 60%;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--naranja),
            white,
            var(--verde),
            transparent
        );
}


.card-producto:hover::before {
    animation:
        brillo .8s ease;
}


.card-producto:hover {
    transform:
        translateY(-15px)
        rotateX(2deg);

    border-top-color:
        var(--naranja);

    box-shadow:
        var(--sombra-grande);
}


/* imagen */

.card-producto img {
    width: 100%;

    height: 220px;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}


.card-producto:hover img {
    transform:
        scale(1.12);

    filter:
        saturate(1.2)
        contrast(1.04);
}


.card-producto .card-body {
    padding:
        1.4rem;
}


.card-producto h2,
.card-producto h3 {
    font-weight:
        900;

    color:
        var(--morado);

    transition:
        color .25s ease,
        transform .25s ease;
}


.card-producto:hover h2,
.card-producto:hover h3 {
    color:
        var(--rojo);

    transform:
        translateX(5px);
}


/* precio */

.precio {
    display:
        inline-block;

    color:
        var(--rojo);

    font-size:
        1.45rem;

    font-weight:
        1000;

    transition:
        transform .25s ease;
}


.card-producto:hover .precio {
    transform:
        scale(1.12);

    animation:
        pulso 1s ease;
}


/* ============================================================
   🏷️ BADGES
   ============================================================ */

.badge {
    border-radius:
        999px;

    padding:
        .55em .85em;

    font-weight:
        800;

    transition:
        transform .2s ease;
}


.badge:hover {
    transform:
        scale(1.1)
        rotate(-2deg);
}


.badge-michelada {
    display:
        inline-block;

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--verde2)
        );

    color:
        var(--morado);

    border-radius:
        999px;

    padding:
        .5rem .9rem;

    font-weight:
        900;

    box-shadow:
        0 5px 15px rgba(198,242,78,.25);
}


/* ============================================================
   🖼️ IMAGEN DETALLE
   ============================================================ */

.imagen-detalle {
    width: 100%;

    max-height: 440px;

    object-fit: cover;

    border:
        6px solid white;

    border-radius:
        25px;

    box-shadow:
        0 20px 45px rgba(33,26,46,.18);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.imagen-detalle:hover {
    transform:
        scale(1.035)
        rotate(.5deg);

    box-shadow:
        0 30px 65px rgba(33,26,46,.25);
}


/* ============================================================
   📝 FORMULARIOS
   ============================================================ */

.caja-formulario {
    position: relative;

    max-width:
        450px;

    margin:
        50px auto;

    padding:
        35px;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid #eadbc2;

    border-top:
        7px solid var(--naranja);

    border-radius:
        22px;

    box-shadow:
        var(--sombra);

    animation:
        entrada .7s ease both;
}


.caja-formulario::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -45px;
    top: -50px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(198,242,78,.25),
            transparent 70%
        );

    animation:
        pulso 4s infinite;
}


.form-control,
.form-select {
    border:
        2px solid #eadfcd;

    border-radius:
        12px;

    padding:
        .7rem .9rem;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}


.form-control:hover,
.form-select:hover {
    border-color:
        var(--amarillo);
}


.form-control:focus,
.form-select:focus {
    border-color:
        var(--naranja);

    box-shadow:
        0 0 0 4px
        rgba(255,157,31,.14);

    transform:
        translateY(-2px);

    outline:
        none;
}


/* ============================================================
   📊 TARJETAS ADMIN
   ============================================================ */

.tarjeta-resumen {
    position: relative;

    overflow: hidden;

    padding:
        25px;

    background:
        linear-gradient(
            135deg,
            white,
            #fff9ef
        );

    border:
        none;

    border-left:
        7px solid var(--verde);

    border-radius:
        18px;

    box-shadow:
        0 8px 25px rgba(33,26,46,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.tarjeta-resumen::before {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -60px;
    bottom: -60px;

    border-radius:
        50%;

    background:
        rgba(198,242,78,.15);

    transition:
        transform .5s ease;
}


.tarjeta-resumen:hover {
    transform:
        translateY(-10px);

    box-shadow:
        var(--sombra);
}


.tarjeta-resumen:hover::before {
    transform:
        scale(1.7);
}


.tarjeta-resumen .numero {
    font-size:
        2.4rem;

    font-weight:
        1000;

    color:
        var(--morado);

    transition:
        color .25s ease,
        transform .25s ease;
}


.tarjeta-resumen:hover .numero {
    color:
        var(--rojo);

    transform:
        scale(1.1);
}


/* ============================================================
   🛒 CARRITO
   ============================================================ */

.carrito-item {
    background:
        rgba(255,255,255,.98);

    border:
        1px solid #eadfcd;

    border-radius:
        18px;

    padding:
        16px;

    margin-bottom:
        15px;

    box-shadow:
        0 7px 22px rgba(33,26,46,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.carrito-item:hover {
    transform:
        translateX(8px);

    border-color:
        var(--verde);

    box-shadow:
        var(--sombra);
}


.input-cantidad {
    max-width:
        90px;

    border-radius:
        10px;

    transition:
        transform .2s ease;
}


.input-cantidad:focus {
    transform:
        scale(1.08);
}


/* ============================================================
   📋 TABLAS
   ============================================================ */

.tabla-mini {
    overflow:
        hidden;

    border-radius:
        16px;

    box-shadow:
        0 7px 22px rgba(33,26,46,.08);
}


.tabla-mini thead {
    background:
        linear-gradient(
            135deg,
            var(--morado),
            var(--morado2)
        );

    color:
        white;
}


.tabla-mini tbody tr {
    transition:
        background .2s ease,
        transform .2s ease;
}


.tabla-mini tbody tr:hover {
    background:
        #fff1d9;

    transform:
        scale(1.005);
}


.tabla-mini td,
.tabla-mini th {
    vertical-align:
        middle;
}


/* ============================================================
   🚨 ALERTAS
   ============================================================ */

.alert {
    border:
        none;

    border-left:
        6px solid currentColor;

    border-radius:
        14px;

    box-shadow:
        0 8px 20px rgba(33,26,46,.08);

    animation:
        entradaIzquierda .5s ease both;
}


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

footer.bg-oscuro {
    position:
        relative;

    overflow:
        hidden;

    border-top:
        6px solid var(--verde);

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(198,242,78,.13),
            transparent 25%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(255,157,31,.12),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #17121f,
            var(--morado)
        ) !important;
}


footer.bg-oscuro::before {
    content:
        "🍋";

    position:
        absolute;

    right:
        8%;

    top:
        20px;

    font-size:
        70px;

    opacity:
        .08;

    animation:
        flotar 5s ease-in-out infinite;
}


footer a {
    color:
        var(--verde);

    text-decoration:
        none;

    transition:
        color .2s ease,
        transform .2s ease;
}


footer a:hover {
    color:
        var(--naranja);

    transform:
        translateX(5px);
}


/* ============================================================
   🌈 SECCIONES
   ============================================================ */

.seccion-michelada {
    position:
        relative;

    padding:
        30px;

    border-radius:
        22px;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid rgba(33,26,46,.06);

    box-shadow:
        0 8px 25px rgba(33,26,46,.06);

    backdrop-filter:
        blur(8px);

    animation:
        entrada .6s ease both;
}


.separador-michelada {
    width:
        100px;

    height:
        6px;

    border-radius:
        999px;

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

    margin:
        12px 0 25px;

    animation:
        pulso 3s ease-in-out infinite;
}


/* ============================================================
   📱 RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    .portada {
        min-height:
            620px;

        padding:
            60px 0;
    }


    .portada h1 {
        font-size:
            2.8rem;

        letter-spacing:
            -2px;
    }


    .portada img {
        max-height:
            280px;

        margin-top:
            30px;
    }


    .card-producto img {
        height:
            200px;
    }


    .caja-formulario {
        margin:
            30px 15px;

        padding:
            25px;
    }


    .seccion-michelada {
        padding:
            20px;
    }
}


/* ============================================================
   ♿ MENOS MOVIMIENTO
   ============================================================ */

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

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

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;

        scroll-behavior:
            auto !important;
    }
}

.navbar-brand img {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.navbar-brand img {
    background: transparent !important;
    mix-blend-mode: normal !important;
    padding: 0 !important;
    border: none !important;
}


/* LOGO MICHEBROS */
.navbar-brand img {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain;
}


/* =========================================
   FOOTER PROFESIONAL - LA MICHELADA ESCOLAR
========================================= */

.footer-profesional {
    position: relative;
    overflow: hidden;
    padding: 32px 0 !important;
    margin-top: 60px !important;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #211a2e 0%,
        #30243e 55%,
        #382b3e 100%
    );
    border-top: 4px solid #c6f24e;
    box-shadow: 0 -8px 30px rgba(33, 26, 46, 0.08);
}

/* Contenido principal */
.footer-profesional .footer-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Nombre del proyecto */
.footer-profesional .footer-proyecto {
    flex: 1;
}

.footer-profesional .footer-titulo {
    display: inline-block;
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.footer-profesional .footer-proyecto p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.7;
}

/* Equipo de desarrollo */
.footer-profesional .footer-equipo {
    flex: 1;
    text-align: right;
}

.footer-profesional .footer-subtitulo {
    margin-bottom: 10px;
    color: #c6f24e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.footer-profesional .footer-equipo p {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.8;
}

.footer-profesional .footer-descripcion {
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 12px !important;
}

/* Efectos suaves */
.footer-profesional .footer-titulo,
.footer-profesional .footer-equipo p {
    transition: color 0.25s ease;
}

.footer-profesional .footer-titulo:hover {
    color: #c6f24e;
}

/* Adaptación para celulares */
@media (max-width: 650px) {
    .footer-profesional {
        padding: 26px 0 !important;
        margin-top: 40px !important;
    }

    .footer-profesional .footer-contenido {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-profesional .footer-equipo {
        width: 100%;
        text-align: left;
    }

    .footer-profesional .footer-equipo p {
        overflow-wrap: anywhere;
    }
}


/* ---------- Botón de cambio de idioma (ES / EN) ---------- */
.btn-idioma {
  background: var(--verde, #c6f24e);
  color: #211a2e;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: .3rem .9rem;
  margin: .25rem 0;
}
.btn-idioma:hover {
  background: #ffc65c;
  color: #211a2e;
}