<?php
// Catálogo de Servicios - Centro SER
// Programa de Nutrición Integral

$servicios = [
    [
        'categoria' => 'Evaluación Nutricional',
        'subtitulo' => 'Diagnóstico y base para el tratamiento',
        'items' => [
            [
                'titulo' => 'Evaluación Nutricional Básica',
                'icono' => '📊',
                'descripcion' => 'Valoración del estado nutricional mediante antropometría, historia alimentaria y análisis de hábitos.',
                'incluye' => ['Antropometría (peso, talla, composición)', 'Historia alimentaria', 'Análisis de hábitos', 'Recomendaciones básicas'],
                'indicaciones' => 'Chequeo general, Control de peso, Chequeo preventivo',
                'modalidad' => 'Presencial',
                'duracion' => '60 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Evaluación Nutricional Integral',
                'icono' => '🔬',
                'descripcion' => 'Evaluación completa con análisis de composición corporal, metabólico y evaluaciones específicas.',
                'incluye' => ['Antropometría avanzada', 'Bioimpedancia', 'Perfiles metabólicos', 'Plan alimentario inicial'],
                'indicaciones' => 'Pacientes con TCA, Obesidad, Desnutrición, Patologías específicas',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Seguimiento Nutricional',
                'icono' => '📈',
                'descripcion' => 'Control y evolución del estado nutricional, ajustes al plan alimentario según progreso.',
                'incluye' => ['Antropometría', 'Análisis de evolución', 'Ajustes de plan', 'Orientación continua'],
                'indicaciones' => 'Pacientes en tratamiento activo, control mensual, Seguimiento',
                'modalidad' => 'Presencial y Virtual',
                'duracion' => '30 min',
                'precio' => 'consultar',
            ],
        ]
    ],
    [
        'categoria' => 'Planes Alimentarios',
        'subtitulo' => 'Adaptados a cada necesidad',
        'items' => [
            [
                'titulo' => 'Plan Alimentario Básico',
                'icono' => '🥗',
                'descripcion' => 'Plan de alimentación equilibrada adaptado a necesidades generales.',
                'incluye' => ['Plan alimentario semanal', 'Listado de compras', 'Recetas básicas', 'Educación nutricional'],
                'indicaciones' => 'Mantenimiento de peso, Hábitos saludables, Chequeo preventivo',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Plan para TCA',
                'icono' => '🍽️',
                'descripcion' => 'Plan especializado para trastornos alimentarios con enfoque de recuperación y relación con la comida.',
                'incluye' => ['Plan individualizado', 'Manejo de ansiedad', 'Técnicas de alimentación consciente', 'Coordinación con equipo terapéutico'],
                'indicaciones' => 'Anorexia, Bulimia, Trastorno por atracón, Otros TCA',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Plan de Peso Controlado',
                'icono' => '⚖️',
                'descripcion' => 'Estrategias nutricionales para perdida o ganho de peso de forma saludable y sostenible.',
                'incluye' => ['Cálculo de necesidades', 'Plan estructurado', 'Estrategias de porciones', 'Seguimiento cercano'],
                'indicaciones' => 'Obesidad, Bajo peso, Síndrome metabólico',
                'modalidad' => 'Presencial y Virtual',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Plan Vegetariano/Vegano',
                'icono' => '🥬',
                'descripcion' => 'Planes adaptados a dietas vegetarianas y veganas, asegurando completitud nutricional.',
                'incluye' => ['Análisis de micronutrientes', 'Suplementación si es necesaria', 'Recetas adaptadas', 'Plan completo'],
                'indicaciones' => 'Dietas vegetarianas, veganas, restrictivas',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
        ]
    ],
    [
        'categoria' => 'Patologías Específicas',
        'subtitulo' => 'Atención especializada',
        'items' => [
            [
                'titulo' => 'Nutrición Diabetes',
                'icono' => '💉',
                'descripcion' => 'Plan para控制和 maneja la diabetes mediante alimentación.',
                'incluye' => ['Conteo de Hidratos', 'Índice glucémico', 'Distribución de comidas', 'Educación en carbohidratos'],
                'indicaciones' => 'Diabetes tipo 1, Tipo 2, Prediabetes',
                'modalidad' => 'Presencial y Virtual',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Nutrición Cardiovascular',
                'icono' => '❤️',
                'descripcion' => 'Alimentación para salud cardíaca y vascular.',
                'incluye' => ['Perfil lipídico', 'Plan cardioprotector', 'Guía de sodio', 'Coordinación con cardiólogo'],
                'indicaciones' => 'Hipertensión, Dislipidemia, Insuficiencia cardíaca',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Nutrición Gastrointestinal',
                'icono' => '🫃',
                'descripcion' => 'Planes para trastornos gastrointestinales y salud digestiva.',
                'incluye' => ['Identificación de alimentos trigger', 'Plan bajo en FODMAP', 'Educación en FIBRA', 'Seguimiento'],
                'indicaciones' => 'SII, Crohn, Celiaquía, Gastritis, Reflujo',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Nutrición Renal',
                'icono' => '🫘',
                'descripcion' => 'Plan adaptado para función renal reducida.',
                'incluye' => ['Cálculo de proteínas', 'Control de electrolitos', 'Restricción sódica/potásica', 'Coordinación con nefrólogo'],
                'indicaciones' => 'Enfermedad renal crónica, Diálisis',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
        ]
    ],
    [
        'categoria' => 'Nutrición Deportiva',
        'subtitulo' => 'Para atletas y actividad física',
        'items' => [
            [
                'titulo' => 'Evaluación Deportivo',
                'icono' => '🏃',
                'descripcion' => 'Evaluación de necesidades nutricionales específicas del deporte.',
                'incluye' => ['Cálculo de gasto energético', 'Análisis de composición', 'Metas deportivas', 'Plan inicial'],
                'indicaciones' => 'Atletas recreativos, Deportistas federados',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Plan de Performancia',
                'icono' => '🏆',
                'descripcion' => 'Plan nutricional orientado a maximizar rendimiento deportivo.',
                'incluye' => ['Periodización nutricional', 'Nutrición pre/post entrenamiento', 'Estrategia de hidratación', 'Suplementación guiaday'],
                'indicaciones' => 'Preparación competitiva, Alto rendimiento',
                'modalidad' => 'Presencial',
                'duracion' => '90 min',
                'precio' => 'consultar'],
            [
                'titulo' => 'Plan de Recuperación',
                'icono' => '🔄',
                'descripcion' => 'Nutrición adaptada para recuperación de lesiones.',
                'incluye' => ['Nutrición anti-inflamatoria', 'Apoyo a regeneración', 'Macronutrientes específicos', 'Seguimiento'],
                'indicaciones' => 'Lesiones musculares, Recuperación post-quirúrgica',
                'modalidad' => 'Presencial y Virtual',
                'duracion' => '60 min',
                'precio' => 'consultar',
            ],
        ]
    ],
    [
        'categoria' => 'Servicios Complementarios',
        'subtitulo' => 'Apoyo adicional',
        'items' => [
            [
                'titulo' => 'Charla Nutricional',
                'icono' => '📢',
                'descripcion' => 'Talleres educativos sobre alimentación saludable.',
                'incluye' => ['Tema personalizado', 'Material educativo', 'Preguntas y respuestas'],
                'indicaciones' => 'Empresas, Schools, Comunidades',
                'modalidad' => 'Presencial/Virtual',
                'duracion' => '60 min',
                'precio' => 'consultar',
            ],
            [
                'titulo' => 'Suplementación Guiada',
                'icono' => '💊',
                'descripcion' => 'Asesoría en uso de suplementos nutricionales.',
                'incluye' => ['Evaluación de needs', 'Selección de suplementos', 'Dosis y horarios', 'Seguimiento'],
                'indicaciones' => 'Deficiencias, Apoyo en procesos específicos',
                'modalidad' => 'Presencial y Virtual',
                'duracion' => '30 min',
                'precio' => 'consultar',
            ],
        ]
    ],
];

$pilares = [
    [
        'titulo' => 'Alimentación Consciente',
        'icono' => '🍴',
        'descripcion' => 'No solo qué comes, sino cómo lo comes. Desarrollamos una relación sana con la comida.',
    ],
    [
        'titulo' => 'Nutrición Basada en Evidencia',
        'icono' => '🔬',
        'descripcion' => 'Todas nuestras recomendaciones están basadas en investigación científica actualizada.',
    ],
    [
        'titulo' => 'Enfoque Integrador',
        'icono' => '🤝',
        'descripcion' => 'Coordinación con el equipo multidisciplinar (psicología, medicina) para un tratamiento integral.',
    ],
];

$enfoque = [
    [
        'titulo' => 'Educación Alimentaria',
        'icono' => '📚',
        'descripcion' => 'Te enseñamos a tomar decisiones informadas sobre tu alimentación.',
    ],
    [
        'titulo' => 'Adaptación Personalizada',
        'icono' => '👤',
        'descripcion' => 'Cada plan se adapta a tus preferencias culturales, horarios y situación económica.',
    ],
    [
        'titulo' => 'Relación Saludable con la Comida',
        'icono' => '💚',
        'descripcion' => 'Trabajamos para que puedas comer sin guilt ni ansiedad.',
    ],
    [
        'titulo' => 'Sostenibilidad',
        'icono' => '🌱',
        'descripcion' => 'Cambios que puedes mantener a largo plazo, no dietas temporales.',
    ],
];

$testimonios = [
    [
        'nombre' => 'Laura M.',
        'texto' => 'Gracias al programa de nutrición aprendí a comer de todo sin culpa. Mi relación con la comida cambió completamente.',
        'servicio' => 'Plan para TCA',
    ],
    [
        'nombre' => 'Roberto K.',
        'texto' => 'Como atleta, el plan de rendimiento me ayudó a mejorar mi recuperación y mis marcas personales.',
        'servicio' => 'Nutrición Deportiva',
    ],
    [
        'nombre' => 'Carmen R.',
        'texto' => 'Mi hijo tiene enfermedad celíaca y el equipo de SER nos dio las herramientas para una alimentación segura y variada.',
        'servicio' => 'Plan Vegano',
    ],
];
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centro SER - Programa de Nutrición Integral</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Animate CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <!-- AOS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root {
            --primary: #E85D04;
            --primary-light: #F48C06;
            --secondary: #FAA307;
            --accent: #FFBA08;
            --dark: #1a1a2e;
            --darker: #0f0f1a;
            --light: #f8f9fa;
            --text-light: #e8e8e8;
            --text-muted: #a0a0a0;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, var(--darker) 0%, #1a1a2e 50%, #1a1a2e 100%);
            color: var(--text-light);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* Animated Background */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .bg-animation::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 20% 80%, rgba(232, 93, 4, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(244, 140, 6, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 40% 40%, rgba(250, 163, 7, 0.05) 0%, transparent 40%);
            animation: float 20s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(-2%, 2%) rotate(1deg); }
        }
        
        /* Header */
        .header {
            background: rgba(15, 15, 26, 0.9);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-light);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo:hover {
            color: var(--primary);
            transform: scale(1.02);
            transition: all 0.3s ease;
        }
        
        /* Hero */
        .hero {
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 150px 20px 80px;
            position: relative;
        }
        
        .hero-content {
            max-width: 900px;
        }
        
        .hero-badge {
            display: inline-block;
            background: rgba(232, 93, 4, 0.2);
            border: 1px solid var(--primary);
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.9rem;
            color: var(--primary-light);
            margin-bottom: 20px;
        }
        
        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #fff, var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            color: var(--primary-light);
            margin-bottom: 1.5rem;
        }
        
        .hero p {
            font-size: 1.2rem;
            color: var(--text-muted);
            max-width: 700px;
            margin: 0 auto 2rem;
            line-height: 1.7;
        }
        
        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-top: 40px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-light);
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--text-muted);
        }
        
        /* Section */
        .section {
            padding: 100px 0;
            position: relative;
        }
        
        .section-alt {
            background: rgba(0, 0, 0, 0.2);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #fff;
        }
        
        .section-title p {
            font-size: 1.1rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .section-title .highlight {
            color: var(--primary-light);
        }
        
        /* Enfoque */
        .enfoque-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .enfoque-card {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            padding: 35px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .enfoque-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            box-shadow: 0 20px 40px rgba(232, 93, 4, 0.15);
        }
        
        .enfoque-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            display: block;
        }
        
        .enfoque-card h4 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--primary-light);
        }
        
        .enfoque-card p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-muted);
        }
        
        /* Pilares */
        .pilares-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .pilar-card {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 24px;
            padding: 40px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }
        
        .pilar-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
        
        .pilar-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            box-shadow: 0 25px 50px rgba(232, 93, 4, 0.15);
        }
        
        .pilar-card:hover::before {
            transform: scaleX(1);
        }
        
        .pilar-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            display: block;
        }
        
        .pilar-card h3 {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-light);
        }
        
        .pilar-card p {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-muted);
        }
        
        /* Programas/Servicios */
        .programa-container {
            margin-bottom: 60px;
        }
        
        .programa-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .programa-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        .programa-title h3 {
            font-size: 1.8rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 5px;
        }
        
        .programa-title span {
            font-size: 1rem;
            color: var(--text-muted);
        }
        
        .servicios-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
        }
        
        .servicio-card {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .servicio-card:hover {
            transform: translateY(-8px);
            border-color: var(--primary-light);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .servicio-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .servicio-icon {
            width: 50px;
            height: 50px;
            background: rgba(232, 93, 4, 0.15);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        
        .servicio-header h4 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #fff;
        }
        
        .servicio-card > p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-muted);
            margin-bottom: 20px;
        }
        
        .incluye-section {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .incluye-section h6 {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .incluye-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .incluye-list li {
            font-size: 0.9rem;
            color: var(--text-muted);
            padding: 5px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .incluye-list li::before {
            content: '✓';
            color: var(--secondary);
            font-weight: bold;
        }
        
        .indicaciones {
            font-size: 0.85rem;
            color: var(--primary-light);
            font-style: italic;
            margin-bottom: 15px;
        }
        
        .servicio-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            flex-wrap: wrap;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* Diferencial */
        .diferencial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .diferencial-item {
            background: linear-gradient(135deg, rgba(232, 93, 4, 0.15), rgba(244, 140, 6, 0.1));
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            border: 1px solid rgba(232, 93, 4, 0.3);
        }
        
        .diferencial-item span {
            font-size: 2rem;
            display: block;
            margin-bottom: 10px;
        }
        
        .diferencial-item h5 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--primary-light);
        }
        
        /* Testimonios */
        .testimonios-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .testimonio-card {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
        }
        
        .testimonio-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 25px;
            font-size: 4rem;
            color: var(--primary);
            opacity: 0.3;
            font-family: Georgia, serif;
        }
        
        .testimonio-texto {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-muted);
            margin-bottom: 20px;
            padding-left: 30px;
            font-style: italic;
        }
        
        .testimonio-autor {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-left: 30px;
        }
        
        .testimonio-avatar {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .testimonio-info h5 {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
        }
        
        .testimonio-info span {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        
        /* CTA */
        .cta-section {
            background: linear-gradient(135deg, rgba(232, 93, 4, 0.2), rgba(244, 140, 6, 0.15));
            padding: 80px 40px;
            text-align: center;
            border-radius: 30px;
            margin: 40px 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .cta-content {
            position: relative;
            z-index: 1;
        }
        
        .cta-section h2 {
            font-size: 2.2rem;
            margin-bottom: 15px;
            color: #fff;
        }
        
        .cta-section p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            color: var(--text-muted);
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .btn-whatsapp {
            background: linear-gradient(135deg, #25D366, #20BD5A);
            color: white;
            padding: 18px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-whatsapp:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 15px 40px rgba(37, 211, 102, 0.3);
            color: white;
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--text-light);
            border: 2px solid rgba(255, 255, 255, 0.2);
            padding: 16px 38px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            border-color: var(--primary-light);
            color: var(--primary-light);
        }
        
        /* Footer */
        .footer {
            background: rgba(0, 0, 0, 0.4);
            padding: 60px 20px 30px;
            text-align: center;
            margin-top: 80px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .footer-logo {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-light);
            margin-bottom: 15px;
        }
        
        .footer p {
            font-size: 0.95rem;
            opacity: 0.6;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
            color: var(--primary-light);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .hero-stats {
                flex-direction: column;
                gap: 20px;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
            
            .servicios-grid {
                grid-template-columns: 1fr;
            }
            
            .cta-section {
                padding: 60px 20px;
            }
        }
    </style>
</head>
<body>
    <!-- Animated Background -->
    <div class="bg-animation"></div>

    <!-- Header -->
    <header class="header">
        <div class="container">
            <nav class="d-flex justify-content-between align-items-center">
                <a href="index.php" class="logo">
                    <span>🥗</span> Centro SER
                </a>
                <a href="index.php" class="btn btn-secondary" style="padding: 8px 20px; font-size: 0.9rem;">
                    <i class="bi bi-arrow-left"></i> Volver
                </a>
            </nav>
        </div>
    </header>

    <!-- Hero -->
    <section class="hero">
        <div class="container">
            <div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
                <div class="hero-badge">
                    <i class="bi bi-heart-pulse"></i> Área de Nutrición
                </div>
                <h1>Programa de Nutrición Integral</h1>
                <p class="hero-subtitle">Alimentación Consciente + Ciencia + Sostenibilidad</p>
                <p>Servicios Nutricionales especializados para todas las etapas de la vida, con enfoque en una relación saludable con la comida y basée en evidencia científica.</p>
                
                <div class="hero-stats">
                    <div class="stat-item">
                        <span class="stat-number">1000+</span>
                        <span class="stat-label">Pacientes atendidos</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">10+</span>
                        <span class="stat-label">Años de experiencia</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">95%</span>
                        <span class="stat-label">Adherencia al tratamiento</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Enfoque -->
    <section class="section">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Nuestro <span class="highlight">Enfoque</span></h2>
                <p>Nutrición basada en evidencia y educación alimentaria</p>
            </div>
            <div class="enfoque-grid">
                <?php foreach ($enfoque as $index => $e): ?>
                <div class="enfoque-card" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                    <span class="enfoque-icon"><?php echo $e['icono']; ?></span>
                    <h4><?php echo $e['titulo']; ?></h4>
                    <p><?php echo $e['descripcion']; ?></p>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Pilares -->
    <section class="section section-alt">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Nuestros <span class="highlight">Pilares</span></h2>
                <p>La base de nuestro trabajo nutricional</p>
            </div>
            <div class="pilares-grid">
                <?php foreach ($pilares as $index => $pilar): ?>
                <div class="pilar-card" data-aos="fade-up" data-aos-delay="<?php echo $index * 150; ?>">
                    <span class="pilar-icon"><?php echo $pilar['icono']; ?></span>
                    <h3><?php echo $pilar['titulo']; ?></h3>
                    <p><?php echo $pilar['descripcion']; ?></p>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Programas -->
    <section class="section">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Servicios de <span class="highlight">Nutrición</span></h2>
                <p>Atención especializada para cada necesidad</p>
            </div>
            
            <?php foreach ($servicios as $categoria): ?>
            <div class="programa-container">
                <div class="programa-header" data-aos="fade-up">
                    <div class="programa-icon">
                        <?php if($categoria['categoria'] == 'Evaluación Nutricional'): ?>📊
                        <?php elseif($categoria['categoria'] == 'Planes Alimentarios'): ?>🥗
                        <?php elseif($categoria['categoria'] == 'Patologías Específicas'): ?>🏥
                        <?php elseif($categoria['categoria'] == 'Nutrición Deportiva'): ?>🏃
                        <?php else: ?>🔄
                        <?php endif; ?>
                    </div>
                    <div class="programa-title">
                        <h3><?php echo $categoria['categoria']; ?></h3>
                        <span><?php echo $categoria['subtitulo']; ?></span>
                    </div>
                </div>
                <div class="servicios-grid">
                    <?php foreach ($categoria['items'] as $index => $item): ?>
                    <div class="servicio-card" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                        <div class="servicio-header">
                            <div class="servicio-icon"><?php echo $item['icono']; ?></div>
                            <h4><?php echo $item['titulo']; ?></h4>
                        </div>
                        <p><?php echo $item['descripcion']; ?></p>
                        
                        <?php if(!empty($item['incluye'])): ?>
                        <div class="incluye-section">
                            <h6>Incluye:</h6>
                            <ul class="incluye-list">
                                <?php foreach($item['incluye'] as $inc): ?>
                                <li><?php echo $inc; ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                        <?php endif; ?>
                        
                        <?php if(!empty($item['indicaciones'])): ?>
                        <div class="indicaciones">
                            <i class="bi bi-info-circle"></i> <?php echo $item['indicaciones']; ?>
                        </div>
                        <?php endif; ?>
                        
                        <div class="servicio-meta">
                            <div class="meta-item">
                                <i class="bi bi-geo-alt"></i> <?php echo $item['modalidad']; ?>
                            </div>
                            <div class="meta-item">
                                <i class="bi bi-clock"></i> <?php echo $item['duracion']; ?>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- Diferencial -->
    <section class="section section-alt">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Nuestro <span class="highlight">Diferencial</span></h2>
                <p>Lo que nos hace únicos</p>
            </div>
            <div class="diferencial-grid">
                <div class="diferencial-item" data-aos="fade-up">
                    <span>🍴</span>
                    <h5>Alimentación Consciente</h5>
                </div>
                <div class="diferencial-item" data-aos="fade-up" data-aos-delay="100">
                    <span>🔬</span>
                    <h5>Basado en Evidencia</h5>
                </div>
                <div class="diferencial-item" data-aos="fade-up" data-aos-delay="200">
                    <span>🤝</span>
                    <h5>Enfoque Integrador</h5>
                </div>
                <div class="diferencial-item" data-aos="fade-up" data-aos-delay="300">
                    <span>🌱</span>
                    <h5>Sostenible</h5>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonios -->
    <section class="section">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Lo que dicen <span class="highlight">nuestros pacientes</span></h2>
                <p>Historias de transformación alimentaria</p>
            </div>
            <div class="testimonios-grid">
                <?php foreach ($testimonios as $index => $t): ?>
                <div class="testimonio-card" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                    <p class="testimonio-texto"><?php echo $t['texto']; ?></p>
                    <div class="testimonio-autor">
                        <div class="testimonio-avatar"><?php echo substr($t['nombre'], 0, 1); ?></div>
                        <div class="testimonio-info">
                            <h5><?php echo $t['nombre']; ?></h5>
                            <span><?php echo $t['servicio']; ?></span>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="container">
        <div class="cta-section" data-aos="fade-up">
            <div class="cta-content">
                <h2>¿Necesitas orientación nutricional?</h2>
                <p>Contáctanos para una evaluación y conozcamos juntos tu plan de alimentación.</p>
                <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
                    <a href="https://wa.me/591" target="_blank" class="btn-whatsapp">
                        <i class="bi bi-whatsapp"></i> Escríbenos por WhatsApp
                    </a>
<a href="catalogo.php" class="btn btn-secondary">
                        <i class="bi bi-heart-pulse"></i> Psicología
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-logo">🥗 Centro SER</div>
            <div class="footer-links">
                <a href="index.php">Inicio</a>
                <a href="catalogo.php">Psicología</a>
                <a href="#servicios">Servicios</a>
            </div>
            <p>© <?php echo date('Y'); ?> Centro SER - Nutrición Integral</p>
            <p class="mt-2">Alimentación Consciente + Ciencia + Sostenibilidad</p>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 800,
            once: true,
            offset: 100,
            easing: 'ease-out-cubic'
        });
    </script>
</body>
</html>