/* PARM CO CSS - la salsa completa */

:root {
    --red: #c1272d;
    --green: #1f623a;
    --gold: #f2b555;
    --black: #070707;
    --cream: #fff7ea;
    --soft: #f4eadc;
    --white: #ffffff;
    --gray: #dddddd;
}

/* reset rapido para que nada venga raro */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--cream);
    color: var(--black);
}

/* nav arriba pegadito y limpio */

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.25);
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    list-style: none;
    padding: 1.3rem 2rem;
}

nav a {
    color: var(--gold);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    position: relative;
}

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 0%;
    height: 2px;
    background-color: var(--gold);
    transition: 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

.menuToggle {
    display: none;
    color: var(--gold);
    font-size: 2rem;
    cursor: pointer;
    text-align: center;
    padding: 1.2rem;
}

/* botones con flow */

.btn,
.addBtn,
.checkoutBtn {
    display: inline-block;
    background-color: var(--gold);
    color: var(--black);
    text-decoration: none;
    padding: 1rem 2.7rem;
    border-radius: 999px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    border: none;
    transition: 0.3s ease;
    box-shadow: 0 0.7rem 1.5rem rgba(0,0,0,0.18);
    position: relative;
    overflow: hidden;
}

.btn:hover,
.addBtn:hover,
.checkoutBtn:hover {
    background-color: var(--red);
    color: var(--white);
    transform: translateY(-0.25rem);
}

.heroBoton {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* heroes grandes para que entre con presencia */

.hero,
.menuHero,
.aboutHero,
.eventsHero,
.cateringHero,
.orderHero, 
.contactHero {
    min-height: 85vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    overflow: hidden;
}

.hero {
    background-image:
        linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.76)),
        url("img/hero.webp");
}

.menuHero {
    background-image:
        linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.76)),
        url("img/menuHero.webp");
}

.aboutHero {
    background-image:
        linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.76)),
        url("img/aboutHero.webp");
}

.eventsHero {
    background-image:
        linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.76)),
        url("img/eventsHero.webp");
}

.cateringHero {
    background-image:
        linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.76)),
        url("img/cateringHero.webp");
}

.orderHero {
    background-image:
        linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.76)),
        url("img/orderHero.webp");
}

.contactHero {
    background-image:
        linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.76)),
        url("img/contactHero.webp");
}

.hero img,
.menuLogo {
    width: 22rem;
    max-width: 85%;
    margin-bottom: 2rem;
    filter: drop-shadow(0 1rem 2rem rgba(0,0,0,0.65));
}

.orderLogo {
    width: 16rem;
    max-width: 80%;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 1rem 2rem rgba(0,0,0,0.65));
}

.hero h1,
.menuHero h1,
.aboutHero h1,
.eventsHero h1,
.cateringHero h1,
.orderHero h1,
.contactHero h1 {
    color: var(--gold);
    font-size: clamp(2.6rem, 6vw, 5rem);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    line-height: 1.05;
    margin-bottom: 2rem;
    text-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.85);
}

/* titulos globales - que todos hablen el mismo idioma */

.menuPreview h2,
.aboutText h2,
.locationText h2,
.mediaHeader h2,
.menuBoard h2,
.storyText h2,
.whyUs h2,
.testimonials h2,
.currentLocation h2,
.weeklySchedule h2,
.upcomingEvents h2,
.mapSection h2,
.cateringText h2,
.cateringBanner h2,
.eventTypes h2,
.cateringPackages h2,
.cateringFormSection h2,
.orderSection h2,
.contactText h2,
.contactFormSection h2 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    position: relative;
    text-align: center;
}

.menuPreview h2,
.aboutText h2,
.locationText h2,
.mediaHeader h2,
.menuBoard h2,
.storyText h2,
.whyUs h2,
.testimonials h2,
.currentLocation h2,
.weeklySchedule h2,
.upcomingEvents h2,
.mapSection h2,
.cateringText h2,
.cateringBanner h2,
.eventTypes h2,
.cateringPackages h2,
.cateringFormSection h2,
.orderSection h2,
.contactText h2,
.contactFormSection h2 {
    margin-left: auto;
    margin-right: auto;
}


.menuPreview h2::after,
.aboutText h2::after,
.locationText h2::after,
.mediaHeader h2::after,
.menuBoard h2::after,
.storyText h2::after,
.whyUs h2::after,
.testimonials h2::after,
.currentLocation h2::after,
.weeklySchedule h2::after,
.upcomingEvents h2::after,
.mapSection h2::after,
.cateringText h2::after,
.cateringBanner h2::after,
.eventTypes h2::after,
.cateringPackages h2::after,
.cateringFormSection h2::after,
.orderSection h2::after,
.contactText h2::after,
.contactFormSection h2::after {
    content: "";
    display: block;
    width: 5rem;
    height: 4px;
    background-color: var(--gold);
    border-radius: 2rem;
    margin: 1rem auto 0;
}

/* menu preview de home - las cartas ricas */

.menuPreview {
    padding: 7rem 2rem;
    background-color: var(--cream);
    text-align: center;
}

.menuPreview h2 {
    color: var(--black);
    margin-bottom: 4rem;
}

.menuParent {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.menuItem {
    width: 23rem;
    background-color: var(--white);
    border-radius: 1.7rem;
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.13);
    transition: 0.3s ease;
}

.menuItem img {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    display: block;
    transition: 0.5s ease;
}

.menuItem h2 {
    font-size: 1.8rem;
    color: var(--red);
    margin: 1.6rem 1rem 0.7rem;
}

.menuItem h2::after {
    width: 3.5rem;
    height: 3px;
}

.menuItem p {
    margin: 0 1.5rem 1rem;
    line-height: 1.6;
}

.menuItem .price {
    color: var(--green);
    font-size: 1.3rem;
    font-weight: bold;
}

.menuItem .btn {
    margin: 0.7rem 0 1.8rem;
}

.menuItem:hover {
    transform: translateY(-0.8rem);
}

.menuItem:hover img {
    transform: scale(1.07);
}

/* about preview - imagen y texto como debe ser */

.aboutPreview {
    padding: 8rem 2rem;
    background-color: var(--white);
}

.aboutParent,
.locationParent,
.cateringParent {
    max-width: 1150px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.aboutImage,
.locationImage,
.cateringImage {
    flex: 1;
}

.aboutImage img,
.locationImage img,
.cateringImage img {
    width: 100%;
    border-radius: 1.7rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.16);
}

.aboutText,
.locationText,
.cateringText {
    flex: 1;
}

.aboutText h2,
.cateringText h2 {
    color: var(--red);
    margin-bottom: 1.5rem;
}

.aboutText p,
.cateringText p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* location preview - bloque verde nice */

.locationPreview {
    padding: 8rem 2rem;
    background:
        linear-gradient(rgba(31,98,58,0.96), rgba(31,98,58,0.96)),
        url("img/hero.jpg");
    background-size: cover;
    background-position: center;
}

.locationText {
    color: var(--white);
}

.locationText h2 {
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.locationText p {
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* socials de home - fotitos con estilo */

.mediaHome {
    padding: 8rem 2rem;
    background-color: var(--cream);
    text-align: center;
}

.mediaHeader h2 {
    color: var(--red);
    margin-bottom: 1rem;
}

.mediaHeader p {
    max-width: 650px;
    margin: 0 auto 3.5rem;
    line-height: 1.7;
}

.mediaParent {
    max-width: 1050px;
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
}

.mediaParent img {
    width: 100%;
    height: 18rem;
    object-fit: cover;
    border-radius: 1.5rem;
    box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.12);
    transition: 0.3s ease;
}

.mediaParent img:nth-child(2),
.mediaParent img:nth-child(5) {
    transform: translateY(-1rem);
}

.mediaParent img:hover {
    transform: scale(1.04);
}

.mediaParent img:nth-child(2):hover,
.mediaParent img:nth-child(5):hover {
    transform: translateY(-1rem) scale(1.04);
}

.mediaLinks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.mediaLinks a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
}

.mediaLinks img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* footer - cierre elegante */

footer {
    background:
        linear-gradient(rgba(0,0,0,0.96), rgba(0,0,0,0.96)),
        url("img/hero.jpg");
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 4.5rem 2rem 2rem;
}

.footerParent {
    max-width: 1150px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.footerItem {
    max-width: 320px;
}

.footerItem h2,
.footerItem h3 {
    color: var(--gold);
    margin-bottom: 1rem;
}

.footerItem p {
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.footerItem ul {
    list-style: none;
}

.footerItem li {
    margin-bottom: 0.5rem;
}

.footerItem a {
    color: var(--white);
    text-decoration: none;
    transition: 0.3s ease;
}

.footerItem a:hover {
    color: var(--gold);
}

.footerSocials {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.footerSocials img {
    width: 1.8rem;
    transition: 0.3s ease;
}

.footerSocials img:hover {
    transform: translateY(-0.3rem);
}

.footerBottom {
    text-align: center;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #333333;
}

/* menu page - lista completa de comida */

.menuBoard {
    max-width: 1100px;
    margin: 5rem auto;
    padding: 5rem;
    background-color: #fffdf8;
    border-radius: 2rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.12);
}

.menuBoard h2 {
    color: var(--red);
    text-align: center;
    margin-bottom: 3.5rem;
}

.menuGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 4rem;
}

.menuFoodItem {
    border-bottom: 1px solid var(--gray);
    padding-bottom: 1.7rem;
    transition: 0.3s ease;
}

.menuItemTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.menuItemTop h3 {
    color: var(--red);
    font-size: 1.3rem;
    text-transform: uppercase;
}

.menuItemTop span {
    background-color: var(--green);
    color: var(--white);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-weight: bold;
}

.menuFoodItem p {
    line-height: 1.6;
}

.menuFoodItem:hover {
    transform: translateX(0.4rem);
}

/* about page - la historia de PARM CO */

.aboutStory {
    max-width: 1150px;
    margin: auto;
    padding: 8rem 2rem;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.storyText,
.storyImage {
    flex: 1;
}

.storyText span {
    color: var(--green);
    font-weight: bold;
    text-transform: uppercase;
}

.storyText h2 {
    color: var(--red);
    margin: 1rem 0 1.5rem;
}

.storyText p {
    line-height: 1.8;
    margin-bottom: 1rem;
}

.storyImage img {
    width: 100%;
    border-radius: 1.7rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.16);
}

.missionBanner,
.cateringBanner {
    padding: 6rem 2rem;
    background:
        linear-gradient(rgba(31,98,58,0.96), rgba(31,98,58,0.96)),
        url("img/hero.jpg");
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-align: center;
}

.missionBanner h2,
.cateringBanner h2 {
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.missionBanner p,
.cateringBanner p {
    max-width: 850px;
    margin: auto;
    line-height: 1.8;
}

.whyUs {
    padding: 8rem 2rem;
    background-color: var(--cream);
    text-align: center;
}

.whyUs h2 {
    color: var(--red);
    margin-bottom: 4rem;
}

.whyGrid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.whyCard {
    background-color: var(--white);
    padding: 2.3rem;
    border-radius: 1.5rem;
    border-left: 6px solid var(--gold);
    box-shadow: 0 1rem 2.3rem rgba(0,0,0,0.10);
    text-align: left;
}

.whyCard h3 {
    color: var(--green);
    margin-bottom: 1rem;
}

.whyCard p {
    line-height: 1.7;
}

.testimonials {
    padding: 8rem 2rem;
    background-color: var(--white);
    text-align: center;
}

.testimonials h2 {
    color: var(--red);
    margin-bottom: 4rem;
}

.testimonialGrid {
    max-width: 1000px;
    margin: auto;
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 1rem 1rem 2rem;
    scroll-snap-type: x mandatory;
}

.testimonialCard {
    min-width: 280px;
    background-color: var(--cream);
    padding: 2rem;
    border-radius: 1.5rem;
    border-left: 6px solid var(--gold);
    text-align: left;
    box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.10);
    scroll-snap-align: start;
}

.testimonialCard p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.testimonialCard span {
    color: var(--green);
    font-weight: bold;
}

/* events page - donde esta la guagua */

.currentLocation,
.upcomingEvents {
    padding: 8rem 2rem;
    background-color: var(--white);
    text-align: center;
}

.weeklySchedule {
    padding: 8rem 2rem;

    background-image:
        linear-gradient(rgba(31,98,58,0.96), rgba(31,98,58,0.96)),
        url("img/eventsHero.webp");

    background-size: cover;
    background-position: center;

    text-align: center;
}

.mapSection {
    text-align: center;
    padding: 8rem 2rem;
}

.currentLocation h2,
.upcomingEvents h2,
.mapSection h2 {
    color: var(--red);
    margin-bottom: 1.5rem;
}

.weeklySchedule h2 {
    color: #f2b555;
}

.currentLocation p {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    line-height: 1.8;
}

.locationBox,
.scheduleCard,
.eventItem {
    background-color: var(--white);
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.10);
}

.mapBox {
    background-color: var(--white);
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.10);
    overflow: hidden;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}


.locationBox {
    max-width: 720px;
    margin: auto;
    padding: 2.5rem;
}

.locationBox h3 {
    color: var(--green);
    margin-bottom: 1rem;
}

.scheduleGrid {
    max-width: 1100px;
    margin: 3.5rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.scheduleCard {
    padding: 2.3rem;
    transition: 0.3s ease;
}

.scheduleCard h3 {
    color: var(--red);
    margin-bottom: 1rem;
}

.scheduleCard p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.scheduleCard span {
    color: var(--green);
    font-weight: bold;
}

.eventList {
    max-width: 900px;
    margin: 3.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.eventItem {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    text-align: left;
    transition: 0.3s ease;
}

.eventDate {
    min-width: 95px;
    background-color: var(--red);
    color: var(--white);
    padding: 1rem;
    border-radius: 1.2rem;
    text-align: center;
}

.eventDate span {
    display: block;
    color: var(--gold);
    font-weight: bold;
}

.eventDate h3 {
    font-size: 2rem;
}

.eventInfo h3 {
    color: var(--green);
    margin-bottom: 0.7rem;
}

.eventInfo p {
    line-height: 1.7;
}

.mapBox {
    max-width: 1000px;
    height: 350px;
    margin: 3.5rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapBox p {
    color: #777777;
    font-weight: bold;
}

/* catering page - reservas y eventos */

.cateringIntro {
    padding: 8rem 2rem;
    background-color: var(--white);
}

.eventTypes {
    padding: 8rem 2rem;
    background-color: var(--white);
    text-align: center;
}

.eventTypes h2,
.cateringPackages h2,
.cateringFormSection h2 {
    color: var(--red);
    margin-bottom: 4rem;
}

.eventTypesGrid {
    max-width: 1000px;
    margin: auto;
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 1rem 1rem 2rem;
    scroll-snap-type: x mandatory;
}

.eventTypeCard {
    min-width: 280px;
    background-color: var(--cream);
    padding: 2rem;
    border-radius: 1.5rem;
    border-left: 6px solid var(--gold);
    text-align: left;
    box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.10);
    scroll-snap-align: start;
}

.eventTypeCard h3 {
    color: var(--green);
    margin-bottom: 1rem;
}

.eventTypeCard p {
    line-height: 1.7;
}

.cateringPackages {
    padding: 8rem 2rem;
    background-color: var(--cream);
    text-align: center;
}

.packageGrid {
    max-width: 1100px;
    margin: 3.5rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.packageCard {
    background-color: var(--white);
    border-radius: 1.5rem;
    padding: 2.3rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.10);
    transition: 0.3s ease;
}

.packageCard h3 {
    color: var(--green);
    margin-bottom: 1rem;
}

.packageCard span {
    display: block;
    color: var(--red);
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.packageCard p {
    line-height: 1.7;
    margin-bottom: 2rem;
}

.cateringFormSection {
    padding: 8rem 2rem;
    background-color: var(--white);
    text-align: center;
}

.cateringForm {
    max-width: 850px;
    margin: 3rem auto 0;
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.10);

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cateringForm input,
.cateringForm select,
.cateringForm textarea {
    padding: 1.1rem;
    border: 2px solid var(--gold);
    border-radius: 1rem;
    background-color: #fffdf8;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    transition: 0.3s ease;
}

.cateringForm textarea {
    min-height: 180px;
    resize: vertical;
}

.cateringForm input:focus,
.cateringForm select:focus,
.cateringForm textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0.8rem rgba(193,39,45,0.22);
}

.aboutImage img,
.locationImage img,
.cateringImage img,
.contactImage img,
.storyImage img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 1.7rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.16);
}

/* order page - carrito y comida */

.orderLayout {
    max-width: 1400px;
    margin: auto;
    padding: 6rem 2rem;
    background-color: var(--cream);
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 2rem;
}

.orderCategories,
.cart {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 1.5rem;
    height: fit-content;
    position: sticky;
    top: 7rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.10);
}

.orderCategories h2,
.cart h2 {
    color: var(--red);
    margin-bottom: 1.5rem;
}

.orderCategories a {
    display: block;
    margin-bottom: 1rem;
    color: var(--black);
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease;
}

.orderCategories a:hover {
    color: var(--red);
    transform: translateX(0.3rem);
}

.orderSection {
    margin-bottom: 4rem;
}

.orderSection h2 {
    color: var(--red);
    margin-bottom: 2rem;
}

.orderItem {
    background-color: var(--white);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.10);
    transition: 0.3s ease;
}

.orderText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
}

.addBtn {
    margin-top: 1rem;
}

.orderText h3 {
    color: var(--red);
    font-size: 1.3rem;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.orderText p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.orderText span {
    color: var(--green);
    font-weight: bold;
    font-size: 1.1rem;
}

.orderItem img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 1.2rem;
}

.cartLine,
.cartTotal,
.cartItem {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.cartLine,
.cartTotal {
    margin-bottom: 1rem;
}

.cartTotal {
    font-weight: bold;
    font-size: 1.2rem;
    border-top: 1px solid var(--gray);
    padding-top: 1rem;
}

.cartItem {
    border-bottom: 1px solid var(--gray);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.cartItem h4 {
    margin-bottom: 0.3rem;
}

.cartItem p {
    color: #777777;
    font-size: 0.9rem;
}

.cartItem span {
    color: var(--green);
    font-weight: bold;
}

.checkoutBtn {
    display: block;
    text-align: center;
    margin-top: 2rem;
}

/* contact page - para que nos escriban */
.contactIntro {
    padding: 8rem 2rem;
    background-color: var(--white);
}

.contactParent {
    max-width: 1150px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.contactImage,
.contactText {
    flex: 1;
}

.contactImage img {
    width: 100%;
    border-radius: 1.7rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.16);
}

.contactText h2 {
    color: var(--red);
    margin-bottom: 1.5rem;
}

.contactText p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.contactDetails {
    margin-top: 2rem;
    background-color: var(--cream);
    padding: 1.5rem;
    border-radius: 1.5rem;
    border-left: 6px solid var(--gold);
}

.contactFormSection {
    padding: 8rem 2rem;
    background-color: var(--cream);
    text-align: center;
}

.contactFormSection h2 {
    color: var(--red);
    margin-bottom: 4rem;
}

.contactForm {
    max-width: 850px;
    margin: auto;
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.10);

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.contactForm input,
.contactForm select,
.contactForm textarea {
    padding: 1.1rem;
    border: 2px solid var(--gold);
    border-radius: 1rem;
    background-color: #fffdf8;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    transition: 0.3s ease;
}

.contactForm textarea {
    min-height: 190px;
    resize: vertical;
}

.contactForm input:focus,
.contactForm select:focus,
.contactForm textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0.8rem rgba(193,39,45,0.22);
}

/* hovers - movimiento suavecito */

.whyCard,
.testimonialCard,
.eventTypeCard,
.packageCard,
.scheduleCard,
.eventItem,
.locationBox,
.orderItem,
.contactCard {
    transition: 0.3s ease;
}

.whyCard:hover,
.testimonialCard:hover,
.eventTypeCard:hover,
.packageCard:hover,
.scheduleCard:hover,
.eventItem:hover,
.locationBox:hover,
.orderItem:hover,
.contactCard:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.16);
}



/* scroll reveal - aparece bonito */

.hidden {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 1s ease, transform 1s ease;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

/* boton para volver arriba */
.topBtn {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    display: none;
    background-color: var(--gold);
    border: none;
    padding: 1rem;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    z-index: 200;
    box-shadow: 0 0.6rem 1.5rem rgba(0,0,0,0.18);
}

.topBtn.showTop {
    display: block;
}

.activeLink {
    color: #ffffff;
}

.activeLink::after {
    width: 100%;
}

.lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.92);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 2rem;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 1.5rem;
}

.closeLightbox {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background-color: #f2b555;
    color: #000000;
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
}

.inputError {
    border-color: #c1272d !important;
    background-color: #fff0f0 !important;
}

.removeItem {
    margin-left: 0.5rem;
    background-color: #c1272d;
    color: white;
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%) translateY(2rem);
    background-color: #070707;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 10000;
}

.toast.showToast {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* animaciones - que no se vea muerto */

.hero img,
.menuLogo,
.orderLogo {
    animation: fadeDown 1s ease, floatingLogo 4s ease-in-out infinite;
}

.hero h1,
.menuHero h1,
.aboutHero h1,
.eventsHero h1,
.cateringHero h1,
.orderHero h1, 
.contactHero h1{
    animation: fadeUp 1s ease;
}

@keyframes floatingLogo {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.7rem);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }

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

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-2rem);
    }

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

/* responsive - que no explote en celular */

@media (max-width: 1000px) {
    .aboutParent,
    .locationParent,
    .cateringParent,
    .contactParent,
    .aboutStory {
        flex-direction: column;
        text-align: center;
    }

    .menuGrid,
    .whyGrid,
    .scheduleGrid,
    .packageGrid,
    .mediaParent {
        grid-template-columns: 1fr;
    }

    .orderLayout {
        grid-template-columns: 1fr;
    }

    .orderCategories,
    .cart {
        position: static;
    }

    .mediaParent img:nth-child(2),
    .mediaParent img:nth-child(5) {
        transform: none;
    }

    .contactGrid {
        grid-template-columns: 1fr;
    }
    .formRow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .menuToggle {
        display: block;
    }

    nav ul {
        display: none;
        flex-direction: column;
        background-color: rgba(0,0,0,0.96);
        padding: 2rem;
    }

    nav ul.active {
        display: flex;
    }

    .hero,
    .menuHero,
    .aboutHero,
    .eventsHero,
    .cateringHero,
    .orderHero, 
    .contactHero{
        min-height: 75vh;
    }

    .heroBoton {
        flex-direction: column;
        gap: 1rem;
    }

    .menuBoard {
        padding: 3rem 1.5rem;
        margin: 3rem 1rem;
    }

    .orderItem,
    .eventItem {
        flex-direction: column;
        text-align: center;
    }

    .orderText {
        align-items: center;
    }

    .orderItem img {
        width: 100%;
        height: 13rem;
    }

    .mediaLinks {
        flex-direction: column;
    }
}