/**
 * ============================================
 * COMPONENTS.CSS
 * ============================================
 * 
 * Componentes reutilizables del sitio web.
 * Siguiendo el principio SOLID: cada componente tiene una responsabilidad única.
 * 
 * @author: [Tu nombre]
 * @version: 1.0.0
 * @fecha: Noviembre 2024
 * 
 * COMPONENTES INCLUIDOS:
 * 1. Botones (Primary, Secondary)
 * 2. Tarjetas de Servicios
 * 3. Tarjetas de Público
 * 4. Items de FAQ
 * 5. Items de Contacto
 * 6. Formularios
 * 7. Badges/Números
 * 
 * USO:
 * - Estos estilos son reutilizables en toda la web
 * - Mantén la consistencia usando estos componentes
 * - Para modificar un componente, hazlo aquí
 * 
 * ============================================
 */

/* ==========================================
   1. BOTONES
   ========================================== 
   Estilos para todos los botones del sitio
   
   CLASES:
   .btn         - Estilo base de botón
   .btn-primary - Botón principal (fondo color)
   .btn-secondary - Botón secundario (outline)
*/

.btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);             /* Espacio entre ícono y texto */
    
    /* Espaciado */
    padding: 1rem 2rem;                 /* Padding vertical/horizontal */
    
    /* Tipografía */
    font-size: var(--font-size-lg);     /* 18px */
    font-weight: var(--font-weight-semibold); /* 600 */
    font-family: var(--font-primary);   /* Inter */
    text-align: center;
    text-decoration: none;
    
    /* Estilo visual */
    border-radius: var(--radius-full);  /* Bordes redondeados completos */
    border: 2px solid transparent;      /* Borde transparente por defecto */
    background: none;
    
    /* Interacción */
    cursor: pointer;
    transition: all var(--transition-base); /* Transición suave */
    
    /* Accesibilidad */
    user-select: none;                  /* No seleccionable */
    -webkit-tap-highlight-color: transparent; /* Sin highlight en móvil */
}

/* Icono dentro del botón */
.btn i {
    font-size: 1.2em;                   /* Ligeramente más grande que el texto */
}

/* Estado hover para todos los botones */
.btn:hover {
    transform: translateY(-2px);        /* Levantamiento sutil */
}

/* Estado focus para accesibilidad */
.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Estado disabled */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* --- Variantes de botones --- */

/* Botón Principal */
.btn-primary {
    background: var(--color-primary);   /* Fondo color principal */
    color: var(--color-white);          /* Texto blanco */
    box-shadow: var(--shadow-md);       /* Sombra media */
}

.btn-primary:hover {
    background: var(--color-primary-dark); /* Oscurece al hover */
    box-shadow: var(--shadow-lg);       /* Sombra más grande */
    color: var(--color-white);          /* Mantiene texto blanco */
}

/* Botón Secundario (outline) */
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary);   /* Rellena con color al hover */
    color: var(--color-white);          /* Texto blanco al hover */
}


/* ==========================================
   2. TARJETAS DE SERVICIOS
   ========================================== 
   Tarjetas usadas en la sección "¿Qué ofrecemos?"
   
   ESTRUCTURA HTML:
   <div class="service-card">
     <span class="service-number">1</span>
     <i class="service-icon fas fa-..."></i>
     <h3 class="service-title">Título</h3>
     <p class="service-description">Descripción</p>
   </div>
*/

.service-card {
    /* Layout */
    position: relative;
    text-align: center;
    
    /* Espaciado */
    padding: var(--spacing-xl);         /* 48px de padding */
    
    /* Estilo visual */
    background: var(--color-white);
    border-radius: var(--radius-lg);    /* Bordes redondeados */
    border-top: 4px solid var(--color-primary); /* Borde superior destacado */
    box-shadow: var(--shadow-md);       /* Sombra suave */
    
    /* Interacción */
    transition: all var(--transition-base);
    
    /* Animación inicial (se sobrescribe en animations.css) */
    opacity: 0;
}

/* Hover de la tarjeta */
.service-card:hover {
    transform: translateY(-12px);       /* Se eleva al pasar el mouse */
    box-shadow: var(--shadow-xl);       /* Sombra más pronunciada */
}

/* Variación de color del borde para tarjetas pares */
.service-card:nth-child(even) {
    border-top-color: var(--color-accent);
}

/* Número de servicio (badge en esquina) */
.service-number {
    /* Posicionamiento */
    position: absolute;
    top: 16px;
    left: 16px;
    
    /* Tamaño */
    width: 36px;
    height: 36px;
    
    /* Estilo */
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;                 /* Círculo perfecto */
    
    /* Layout interno */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Tipografía */
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

/* Icono del servicio */
.service-icon {
    font-size: 3.5rem;                  /* 56px */
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
}

/* Animación del icono al hover de la tarjeta */
.service-card:hover .service-icon {
    transform: scale(1.1);              /* Crece ligeramente */
    color: var(--color-accent);         /* Cambia de color */
}

/* Título del servicio */
.service-title {
    font-size: var(--font-size-xl);     /* 20px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

/* Descripción del servicio */
.service-description {
    font-size: var(--font-size-base);   /* 16px */
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}


/* ==========================================
   3. TARJETAS DE PÚBLICO OBJETIVO
   ========================================== 
   Tarjetas de la sección "¿A quién va dirigido?"
   
   Similar a service-card pero sin número
*/

.audience-card {
    /* Layout */
    text-align: center;
    
    /* Espaciado */
    padding: var(--spacing-xl);
    
    /* Estilo visual */
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;      /* Borde transparente inicial */
    
    /* Interacción */
    transition: all var(--transition-base);
}

.audience-card:hover {
    border-color: var(--color-primary); /* Muestra borde al hover */
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.audience-icon {
    font-size: 4rem;                    /* 64px */
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.audience-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.audience-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}


/* ==========================================
   4. ITEMS DE FAQ (Acordeón)
   ========================================== 
   Items de preguntas frecuentes con efecto acordeón
   
   ESTRUCTURA HTML:
   <div class="faq-item">
     <button class="faq-question">
       <span>Pregunta</span>
       <i class="faq-icon fas fa-chevron-down"></i>
     </button>
     <div class="faq-answer">
       <div class="faq-answer-content">Respuesta</div>
     </div>
   </div>
*/

.faq-item {
    /* Estilo visual */
    background: var(--color-white);
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    
    /* Interacción */
    transition: all var(--transition-base);
}

.faq-item:hover {
    border-color: var(--color-primary); /* Resalta al hover */
}

/* Botón de pregunta */
.faq-question {
    /* Layout */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Espaciado */
    padding: var(--spacing-lg);
    
    /* Estilo */
    background: none;
    border: none;
    text-align: left;
    
    /* Tipografía */
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    
    /* Interacción */
    cursor: pointer;
    transition: all var(--transition-fast);
}

.faq-question:hover {
    color: var(--color-primary);
}

/* Icono de flecha */
.faq-icon {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

/* Rotación del icono cuando está activo */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Contenedor de respuesta (acordeón) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base) ease;
}

/* Respuesta expandida */
.faq-item.active .faq-answer {
    max-height: 500px;                  /* Altura máxima cuando está abierto */
}

/* Contenido de la respuesta */
.faq-answer-content {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}


/* ==========================================
   5. ITEMS DE CONTACTO
   ========================================== 
   Items de información de contacto
   
   ESTRUCTURA HTML:
   <div class="contact-item">
     <i class="contact-item-icon fas fa-phone"></i>
     <div class="contact-item-content">
       <h4>Título</h4>
       <a href="#" class="contact-item-link">Info</a>
     </div>
   </div>
*/

.contact-item {
    /* Layout */
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    
    /* Espaciado */
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    
    /* Estilo */
    background: var(--color-secondary);
    border-radius: var(--radius-sm);
    
    /* Interacción */
    transition: all var(--transition-fast);
}

.contact-item:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Cambiar color de icono y links al hover */
.contact-item:hover .contact-item-icon,
.contact-item:hover .contact-item-link {
    color: var(--color-white);
}

/* Icono de contacto */
.contact-item-icon {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    min-width: 40px;
    transition: color var(--transition-fast);
}

/* Contenido del item */
.contact-item-content h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

/* Link de contacto */
.contact-item-link {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    transition: color var(--transition-fast);
    text-decoration: none;
}

.contact-item-link:hover {
    text-decoration: underline;
}


/* ============================================
   COLUMNA DERECHA: WHATSAPP + MAPA
   ============================================ */

.contact-actions-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* WhatsApp Card */
.whatsapp-card {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
}

.whatsapp-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.whatsapp-icon {
    width: 80px;
    height: 80px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-lg);
}

.whatsapp-icon i {
    font-size: 42px;
    color: white;
}

.whatsapp-card p {
    font-size: 15px;
    color: #666666;
    margin-bottom: 25px;
}

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: var(--color-primary);   /* Fondo color principal */
    color: var(--color-white);          /* Texto blanco */
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);       /* Sombra media */
}

.whatsapp-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px var(--color-secondary);
    background: var(--color-primary);
}

.whatsapp-button i {
    font-size: 24px;
}


/* ==========================================
   MAPA CARD
   ========================================== */

.map-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.map-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.map-card h3 {
    margin-bottom: 20px;
    text-align: center;
}

/* ==========================================
   MAPA CONTAINER - RESPONSIVE CON ASPECT RATIO
   ========================================== */

.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Aspect ratio 4:3 por defecto */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

/* ==========================================
   7. MENSAJE DE CONTACTO
   ========================================== 
   Caja de mensaje especial en sección contacto
*/

.contact-message {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--color-secondary);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

.contact-message p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    font-style: italic;
}


/**
 * ============================================
 * NOTAS DE USO
 * ============================================
 * 
 * CÓMO USAR ESTOS COMPONENTES:
 * 
 * 1. Botones:
 *    <button class="btn btn-primary">Texto</button>
 * 
 * 2. Tarjeta de servicio:
 *    Copia la estructura HTML del comentario
 * 
 * 3. FAQ:
 *    Requiere JavaScript para funcionalidad acordeón
 *    Ver js/faq.js
 * 
 * 4. Formulario:
 *    Usa las clases form-* para mantener consistencia
 * 
 * PERSONALIZACIÓN:
 * - Para cambiar colores: edita variables.css
 * - Para nuevos componentes: añádelos aquí
 * - Mantén la documentación actualizada
 * 
 * ============================================
 */

/* ==========================================
   8. PROCESO - TIMELINE (Desktop Layout)
   ========================================== 
   Estilos para la sección de proceso en escritorio
   con diseño alternado izquierda-derecha
*/

.process-timeline {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 60px;
    position: relative;
}

.process-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
}

/* Números circulares centrados */
.process-number {
    width: 80px;
    height: 80px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

/* Contenido del paso */
.process-content {
    flex: 1;
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.process-content:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.process-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-secondary);
}

.process-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}