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

$servicios = [
    [
        'categoria' => 'Programa Infantil',
        'subtitulo' => '6 – 11 años',
        'items' => [
            [
                'titulo' => 'Paquete 4 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Seguimiento básico para casos leves, adaptación escolar u orientación emocional inicial.',
                'incluye' => ['4 sesiones con el niño', '1 devolución a padres'],
                'indicaciones' => 'Casos leves, Adaptación escolar, Orientación emocional inicial',
                'modalidad' => 'Presencial y Virtual',
            ],
            [
                'titulo' => 'Paquete 8 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Intervención activa para ansiedad infantil, problemas de conducta y dificultades emocionales moderadas.',
                'incluye' => ['6 sesiones con el niño', '2 sesiones con padres'],
                'indicaciones' => 'Ansiedad infantil, Problemas de conducta, Dificultades emocionales moderadas',
                'modalidad' => 'Presencial y Virtual',
            ],
            [
                'titulo' => 'Paquete 12 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Intervención intensiva para TDAH, desregulación emocional severa y problemas vinculares importantes.',
                'incluye' => ['8 sesiones con el niño', '4 sesiones con padres/familia'],
                'indicaciones' => 'TDAH, Desregulación emocional severa, Problemas vinculares importantes',
                'modalidad' => 'Presencial y Virtual',
            ],
        ]
    ],
    [
        'categoria' => 'Programa Adolescente',
        'subtitulo' => '12 – 18 años',
        'items' => [
            [
                'titulo' => 'Paquete 4 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Soporte para dudas vocacionales, autoestima y conflictos leves.',
                'incluye' => ['4 sesiones individuales'],
                'indicaciones' => 'Dudas vocacionales, Autoestima, Conflictos leves',
                'modalidad' => 'Presencial y Virtual',
            ],
            [
                'titulo' => 'Paquete 8 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Proceso terapéutico para ansiedad, depresión leve-moderada, conductas impulsivas y problemas vinculares.',
                'incluye' => ['6 sesiones con adolescente', '2 sesiones familiares'],
                'indicaciones' => 'Ansiedad, Depresión leve-moderada, Conductas impulsivas, Problemas vinculares',
                'modalidad' => 'Presencial y Virtual',
            ],
            [
                'titulo' => 'Paquete 12 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Intervención intensiva para TCA, TLP, autolesiones y crisis emocionales.',
                'incluye' => ['8 sesiones con adolescente', '4 sesiones familiares'],
                'indicaciones' => 'TCA, TLP, Autolesiones, Crisis emocionales',
                'modalidad' => 'Presencial y Virtual',
            ],
        ]
    ],
    [
        'categoria' => 'Programa Adultos',
        'subtitulo' => '18+ años',
        'items' => [
            [
                'titulo' => 'Paquete 4 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Acompañamiento para estrés, crisis puntual, orientación y mentoría personal.',
                'incluye' => ['Sesiones individuales', 'Plan de trabajo personalizado', 'Seguimiento emocional'],
                'indicaciones' => 'Estrés, Crisis puntual, Orientación, Mentoría personal',
                'modalidad' => 'Presencial y Virtual',
            ],
            [
                'titulo' => 'Paquete 8 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Proceso terapéutico para ansiedad, depresión, conflictos relacionales y bloqueo personal.',
                'incluye' => ['Sesiones individuales', 'Plan de trabajo personalizado', 'Seguimiento emocional'],
                'indicaciones' => 'Ansiedad, Depresión, Conflictos relacionales, Bloqueo personal',
                'modalidad' => 'Presencial y Virtual',
            ],
            [
                'titulo' => 'Paquete 12 Sesiones',
                'icono' => '📦',
                'descripcion' => 'Intervención profunda para TCA, depresión severa y crisis existencial profunda.',
                'incluye' => ['Sesiones individuales', 'Plan de trabajo personalizado', 'Seguimiento emocional'],
                'indicaciones' => 'TCA, Depresión severa, Crisis existencial profunda',
                'modalidad' => 'Presencial y Virtual',
            ],
        ]
    ],
    [
        'categoria' => 'Servicios Transversales',
        'subtitulo' => 'Todas las edades',
        'items' => [
            [
                'titulo' => 'Intervención Familiar Integral',
                'icono' => '👨‍👩‍👧',
                'descripcion' => 'Trabajo con la familia como sistema para fortalecer vínculos y comunicación.',
                'incluye' => ['Sesiones familiares', 'Orientación parental', 'Plan de intervención familiar'],
                'indicaciones' => 'Problemas vinculares, Apoyo familiar en proceso terapéutico',
                'modalidad' => 'Presencial',
            ],
            [
                'titulo' => 'Intervención Complementaria Médica',
                'icono' => '🏥',
                'descripcion' => 'Apoyo médico según diagnóstico (psiquiatría, nutrición, medicina).',
                'incluye' => ['Evaluación médica', 'Seguimiento pharmacological', 'Coordinación con equipo multidisciplinar'],
                'indicaciones' => 'Necesita evaluación médica, Casos que requieren complementación con área médica',
                'modalidad' => 'Presencial',
            ],
        ]
    ],
];

$pilares = [
    [
        'titulo' => 'Sostener',
        'icono' => '🌿',
        'descripcion' => 'Te acompañamos en cada paso del proceso con un equipo que te sostiene y contiene en los momentos más difíciles.',
    ],
    [
        'titulo' => 'Escuchar',
        'icono' => '👂',
        'descripcion' => 'Creamos un espacio seguro donde tu voz es escuchada con empatía y sin juicios. Tu historia es importante para nosotros.',
    ],
    [
        'titulo' => 'Renacer',
        'icono' => '🌱',
        'descripcion' => 'Te ayudamos a construir una nueva relación con la vida, tus emociones y tu propósito. La recuperación es posible.',
    ],
];

$enfoque = [
    [
        'titulo' => 'Psicología Positiva Aplicada',
        'icono' => '✨',
        'descripcion' => 'Enfoque en fortalezas y recursos propios para construir bienestar sostenible.',
    ],
    [
        'titulo' => 'Enfoque Centrado en Propósito',
        'icono' => '🎯',
        'descripcion' => 'Logoterapia adaptada para encontrar sentido y dirección en la vida.',
    ],
    [
        'titulo' => 'Regulación Emocional',
        'icono' => '🫧',
        'descripcion' => 'Desarrollo de habilidades para identificar, expresar y modular emociones.',
    ],
    [
        'titulo' => 'Integración Mente-Cuerpo',
        'icono' => '🧘',
        'descripcion' => 'Trabajo consciente con el cuerpo como canal terapéutico, no solo cognitivo.',
    ],
];

$testimonios = [
    [
        'nombre' => 'María E.',
        'texto' => 'El Centro SER me dio las herramientas para entender mis emociones y recuperar mi relación con la vida. El equipo siempre me sintió acompañado.',
        'servicio' => 'Programa Adultos',
    ],
    [
        'nombre' => 'Carlos R.',
        'texto' => 'La terapia familiar transformó nuestra comunicación. Aprendimos a escucharnos de una manera que nunca imaginamos posible.',
        'servicio' => 'Intervención Familiar',
    ],
    [
        'nombre' => 'Ana L.',
        'texto' => 'Después de meses de terapias fallidas, encontré en SER un espacio donde realmente me escuchaban. El proceso de regeneración fue difícil, pero no estuve sola.',
        'servicio' => 'Programa Adolescente',
    ],
];
?>
<!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 Atención Psicológica 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: #2D8C6E;
            --primary-light: #3AAFA4;
            --secondary: #48BB78;
            --accent: #F4A261;
            --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%, #16213e 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(45, 140, 110, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(58, 170, 164, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 40% 40%, rgba(244, 162, 97, 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-light);
            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(45, 140, 110, 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-badge .directora {
            background: rgba(244, 162, 97, 0.2);
            border-color: var(--accent);
            color: var(--accent);
            margin-left: 10px;
        }
        
        .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(45, 140, 110, 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(45, 140, 110, 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(45, 140, 110, 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;
        }
        
        .servicio-meta {
            display: flex;
            align-items: center;
            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);
        }
        
        /* 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(45, 140, 110, 0.15), rgba(58, 170, 164, 0.1));
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            border: 1px solid rgba(45, 140, 110, 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(45, 140, 110, 0.2), rgba(58, 170, 164, 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> Centro de Acompañamiento Terapéutico
                    <span class="directora"><i class="bi bi-person"></i> Gabriela Deheza</span>
                </div>
                <h1>Programa de Atención Psicológica Integral</h1>
                <p class="hero-subtitle">Psicología + Mentoría + Propósito</p>
                <p>Un modelo integral que evoluciona del enfoque exclusivo en TCA para incorporar salud mental preventiva, intervención clínica, regulación emocional e integración mente-cuerpo.</p>
                
                <div class="hero-stats">
                    <div class="stat-item">
                        <span class="stat-number">500+</span>
                        <span class="stat-label">Pacientes atendidos</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">15+</span>
                        <span class="stat-label">Años de experiencia</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">98%</span>
                        <span class="stat-label">Satisfacción</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>Lo que nos diferencia: un modelo híbrido entre clínica, mentoría y desarrollo personal</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 esencia de nuestro acompañamiento</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>Programas de <span class="highlight">Atención</span></h2>
                <p>Paquetes mensuales adaptados a cada etapa de la vida</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'] == 'Programa Infantil'): ?>🧸
                        <?php elseif($categoria['categoria'] == 'Programa Adolescente'): ?>🎒
                        <?php elseif($categoria['categoria'] == 'Programa Adultos'): ?>👔
                        <?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">
                            <i class="bi bi-geo-alt"></i> <?php echo $item['modalidad']; ?>
                        </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 hace único este modelo</p>
            </div>
            <div class="diferencial-grid">
                <div class="diferencial-item" data-aos="fade-up">
                    <span>🧠</span>
                    <h5>Identidad</h5>
                </div>
                <div class="diferencial-item" data-aos="fade-up" data-aos-delay="100">
                    <span>💪</span>
                    <h5>Cuerpo</h5>
                </div>
                <div class="diferencial-item" data-aos="fade-up" data-aos-delay="200">
                    <span>🎯</span>
                    <h5>Propósito</h5>
                </div>
                <div class="diferencial-item" data-aos="fade-up" data-aos-delay="300">
                    <span>⚡</span>
                    <h5>Acción</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 recuperación y transformación</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>¿Estás listo para comenzar tu proceso?</h2>
                <p>Contáctanos para una evaluación sin costo y conoce el programa adaptado a tus necesidades.</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="nutricion.php" class="btn btn-secondary">
                        <i class="bi bi-heart-pulse"></i> Nutrición
                    </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="#programas">Programas</a>
                <a href="#contacto">Contacto</a>
            </div>
            <p>© <?php echo date('Y'); ?> Centro SER - Sostener, Escuchar, Renacer</p>
            <p class="mt-2">Psicología + Mentoría + Propósito</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>