{\rtf1\ansi\ansicpg1252\cocoartf2639
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 /* ========== VARIABLES Y RESET ========== */\
* \{\
    margin: 0;\
    padding: 0;\
    box-sizing: border-box;\
\}\
\
:root \{\
    --color-primary: #ff6b00;\
    --color-secondary: #ffc107;\
    --color-dark: #1a1a1a;\
    --color-darker: #0d0d0d;\
    --color-light: #f5f5f5;\
    --color-white: #ffffff;\
    --color-text: #333333;\
    --color-text-light: #666666;\
    --transition: all 0.3s ease;\
\}\
\
html \{\
    scroll-behavior: smooth;\
\}\
\
body \{\
    font-family: 'Montserrat', sans-serif;\
    line-height: 1.6;\
    color: var(--color-text);\
    background-color: var(--color-white);\
\}\
\
.container \{\
    max-width: 1200px;\
    margin: 0 auto;\
    padding: 0 20px;\
\}\
\
/* ========== NAVEGACI\'d3N ========== */\
.navbar \{\
    position: fixed;\
    top: 0;\
    width: 100%;\
    background-color: var(--color-dark);\
    padding: 1rem 0;\
    z-index: 1000;\
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);\
    transition: var(--transition);\
\}\
\
.navbar.scrolled \{\
    padding: 0.5rem 0;\
    background-color: rgba(26, 26, 26, 0.98);\
\}\
\
.nav-wrapper \{\
    display: flex;\
    justify-content: space-between;\
    align-items: center;\
\}\
\
.logo h1 \{\
    color: var(--color-white);\
    font-size: 1.8rem;\
    font-weight: 900;\
    letter-spacing: 2px;\
\}\
\
.logo h1 span \{\
    color: var(--color-primary);\
\}\
\
.nav-menu \{\
    display: flex;\
    list-style: none;\
    gap: 2rem;\
\}\
\
.nav-link \{\
    color: var(--color-white);\
    text-decoration: none;\
    font-weight: 600;\
    font-size: 0.95rem;\
    transition: var(--transition);\
    position: relative;\
\}\
\
.nav-link::after \{\
    content: '';\
    position: absolute;\
    bottom: -5px;\
    left: 0;\
    width: 0;\
    height: 2px;\
    background-color: var(--color-primary);\
    transition: var(--transition);\
\}\
\
.nav-link:hover::after \{\
    width: 100%;\
\}\
\
.nav-link:hover \{\
    color: var(--color-primary);\
\}\
\
.hamburger \{\
    display: none;\
    flex-direction: column;\
    background: none;\
    border: none;\
    cursor: pointer;\
    padding: 0;\
\}\
\
.hamburger span \{\
    width: 25px;\
    height: 3px;\
    background-color: var(--color-white);\
    margin: 3px 0;\
    transition: var(--transition);\
\}\
\
/* ========== HERO SECTION ========== */\
.hero \{\
    height: 100vh;\
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), \
                url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1600') center/cover;\
    display: flex;\
    align-items: center;\
    justify-content: center;\
    text-align: center;\
    color: var(--color-white);\
    position: relative;\
\}\
\
.hero-overlay \{\
    position: absolute;\
    top: 0;\
    left: 0;\
    width: 100%;\
    height: 100%;\
    background: linear-gradient(135deg, rgba(255,107,0,0.3), rgba(26,26,26,0.7));\
\}\
\
.hero-content \{\
    position: relative;\
    z-index: 1;\
    max-width: 800px;\
    padding: 0 20px;\
\}\
\
.hero-title \{\
    font-size: 4rem;\
    font-weight: 900;\
    margin-bottom: 1rem;\
    text-transform: uppercase;\
    letter-spacing: 3px;\
    animation: fadeInUp 1s ease;\
\}\
\
.hero-subtitle \{\
    font-size: 1.8rem;\
    font-weight: 300;\
    margin-bottom: 1rem;\
    animation: fadeInUp 1.2s ease;\
\}\
\
.hero-text \{\
    font-size: 1.2rem;\
    margin-bottom: 2rem;\
    animation: fadeInUp 1.4s ease;\
\}\
\
@keyframes fadeInUp \{\
    from \{\
        opacity: 0;\
        transform: translateY(30px);\
    \}\
    to \{\
        opacity: 1;\
        transform: translateY(0);\
    \}\
\}\
\
/* ========== BOTONES ========== */\
.btn \{\
    display: inline-block;\
    padding: 1rem 2.5rem;\
    text-decoration: none;\
    border-radius: 50px;\
    font-weight: 700;\
    font-size: 1rem;\
    transition: var(--transition);\
    text-transform: uppercase;\
    letter-spacing: 1px;\
    border: none;\
    cursor: pointer;\
\}\
\
.btn-primary \{\
    background-color: var(--color-primary);\
    color: var(--color-white);\
    box-shadow: 0 5px 15px rgba(255,107,0,0.3);\
\}\
\
.btn-primary:hover \{\
    background-color: #ff8533;\
    transform: translateY(-3px);\
    box-shadow: 0 8px 20px rgba(255,107,0,0.4);\
\}\
\
.btn-secondary \{\
    background-color: transparent;\
    color: var(--color-primary);\
    border: 2px solid var(--color-primary);\
\}\
\
.btn-secondary:hover \{\
    background-color: var(--color-primary);\
    color: var(--color-white);\
\}\
\
/* ========== SECCIONES ========== */\
.section \{\
    padding: 5rem 0;\
\}\
\
.section-title \{\
    font-size: 2.5rem;\
    font-weight: 700;\
    text-align: center;\
    margin-bottom: 3rem;\
    color: var(--color-dark);\
    position: relative;\
\}\
\
.section-title::after \{\
    content: '';\
    display: block;\
    width: 80px;\
    height: 4px;\
    background-color: var(--color-primary);\
    margin: 1rem auto;\
\}\
\
.bg-light \{\
    background-color: var(--color-light);\
\}\
\
.bg-dark \{\
    background-color: var(--color-dark);\
\}\
\
/* ========== SOBRE NOSOTROS ========== */\
.about-content \{\
    max-width: 900px;\
    margin: 0 auto;\
    font-size: 1.1rem;\
    line-height: 1.8;\
\}\
\
.about-content p \{\
    margin-bottom: 1.5rem;\
\}\
\
/* ========== FAQ ========== */\
.faq-grid \{\
    display: grid;\
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\
    gap: 2rem;\
    margin-top: 3rem;\
\}\
\
.faq-item \{\
    background-color: var(--color-white);\
    padding: 2rem;\
    border-radius: 10px;\
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);\
    transition: var(--transition);\
\}\
\
.faq-item:hover \{\
    transform: translateY(-5px);\
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);\
\}\
\
.faq-item h3 \{\
    color: var(--color-primary);\
    margin-bottom: 1rem;\
    font-size: 1.2rem;\
\}\
\
.faq-item i \{\
    margin-right: 0.5rem;\
\}\
\
/* ========== SERVICIOS ========== */\
.services-grid \{\
    display: grid;\
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\
    gap: 2.5rem;\
    margin-top: 3rem;\
\}\
\
.service-card \{\
    background-color: var(--color-white);\
    padding: 3rem 2rem;\
    border-radius: 15px;\
    text-align: center;\
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);\
    transition: var(--transition);\
\}\
\
.service-card:hover \{\
    transform: translateY(-10px);\
    box-shadow: 0 15px 40px rgba(255,107,0,0.2);\
\}\
\
.service-icon \{\
    font-size: 3.5rem;\
    color: var(--color-primary);\
    margin-bottom: 1.5rem;\
\}\
\
.service-card h3 \{\
    font-size: 1.5rem;\
    margin-bottom: 1rem;\
    color: var(--color-dark);\
\}\
\
.service-card p \{\
    color: var(--color-text-light);\
    margin-bottom: 2rem;\
    line-height: 1.8;\
\}\
\
/* ========== NUTRICI\'d3N / PRICING ========== */\
.pricing-grid \{\
    display: grid;\
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\
    gap: 2.5rem;\
    margin-top: 3rem;\
\}\
\
.pricing-card \{\
    background-color: var(--color-white);\
    padding: 3rem 2rem;\
    border-radius: 15px;\
    text-align: center;\
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);\
    position: relative;\
    transition: var(--transition);\
\}\
\
.pricing-card.featured \{\
    border: 3px solid var(--color-primary);\
    transform: scale(1.05);\
\}\
\
.pricing-card:hover \{\
    transform: translateY(-10px) scale(1.05);\
\}\
\
.pricing-card.featured:hover \{\
    transform: translateY(-10px) scale(1.08);\
\}\
\
.badge \{\
    position: absolute;\
    top: -15px;\
    right: 20px;\
    background-color: var(--color-primary);\
    color: var(--color-white);\
    padding: 0.5rem 1rem;\
    border-radius: 20px;\
    font-weight: 700;\
    font-size: 0.85rem;\
\}\
\
.pricing-card h3 \{\
    font-size: 1.8rem;\
    margin-bottom: 1.5rem;\
    color: var(--color-dark);\
\}\
\
.price \{\
    font-size: 3rem;\
    font-weight: 900;\
    color: var(--color-primary);\
    margin-bottom: 2rem;\
\}\
\
.pricing-card ul \{\
    list-style: none;\
    text-align: left;\
    margin-bottom: 2rem;\
\}\
\
.pricing-card ul li \{\
    padding: 0.7rem 0;\
    border-bottom: 1px solid #eee;\
\}\
\
.pricing-card ul li i \{\
    color: var(--color-primary);\
    margin-right: 0.5rem;\
\}\
\
/* ========== EQUIPO ========== */\
.team-grid \{\
    display: grid;\
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\
    gap: 2.5rem;\
    margin-top: 3rem;\
\}\
\
.team-card \{\
    background-color: var(--color-white);\
    padding: 2.5rem 2rem;\
    border-radius: 15px;\
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);\
    transition: var(--transition);\
    text-align: center;\
\}\
\
.team-card:hover \{\
    transform: translateY(-10px);\
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);\
\}\
\
.team-card h3 \{\
    font-size: 1.5rem;\
    color: var(--color-dark);\
    margin-bottom: 0.5rem;\
\}\
\
.role \{\
    color: var(--color-primary);\
    font-weight: 600;\
    margin-bottom: 1.5rem;\
    font-size: 1.1rem;\
\}\
\
.team-card ul \{\
    list-style: none;\
    text-align: left;\
    margin-bottom: 1.5rem;\
\}\
\
.team-card ul li \{\
    padding: 0.5rem 0;\
    color: var(--color-text-light);\
    line-height: 1.6;\
\}\
\
.social-links \{\
    display: flex;\
    gap: 1rem;\
    justify-content: center;\
\}\
\
.social-links a \{\
    color: var(--color-primary);\
    font-size: 1.5rem;\
    transition: var(--transition);\
\}\
\
.social-links a:hover \{\
    color: var(--color-secondary);\
    transform: scale(1.2);\
\}\
\
/* ========== CONTACTO ========== */\
.contact-grid \{\
    display: grid;\
    grid-template-columns: 1fr 1fr;\
    gap: 3rem;\
    margin-top: 3rem;\
\}\
\
.contact-info \{\
    display: flex;\
    flex-direction: column;\
    gap: 2rem;\
\}\
\
.contact-item \{\
    display: flex;\
    align-items: start;\
    gap: 1.5rem;\
\}\
\
.contact-item i \{\
    font-size: 2rem;\
    color: var(--color-primary);\
    margin-top: 0.3rem;\
\}\
\
.contact-item h3 \{\
    font-size: 1.3rem;\
    margin-bottom: 0.5rem;\
    color: var(--color-dark);\
\}\
\
.contact-item p, .contact-item a \{\
    color: var(--color-text-light);\
    text-decoration: none;\
    font-size: 1.1rem;\
\}\
\
.contact-item a:hover \{\
    color: var(--color-primary);\
\}\
\
.map-container \{\
    width: 100%;\
    height: 400px;\
    border-radius: 15px;\
    overflow: hidden;\
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);\
\}\
\
.map-container iframe \{\
    width: 100%;\
    height: 100%;\
    border: none\
}