/* El breadcrumb del tema usa un glifo de Font Awesome Pro ("\f105") que no cargamos
   en el sitio (usamos Bootstrap Icons), por lo que se veía como un cuadro vacío.
   Lo reemplazamos por un separador simple. */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    font-family: inherit !important;
}

/* La sección "Nuestro Trabajo" del home reusa el marcado .project-slider-item del
   tema, cuyo CSS solo revela .video/.content cuando Slick.js añade la clase
   .slick-active. Como aquí es un solo item estático (sin carrusel), forzamos
   la visibilidad para que no quede oculto por opacity:0. */
.project-slider-item .video,
.project-slider-item .content {
    opacity: 1 !important;
    transform: translate(0) !important;
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.header p {
    font-size: 1.2rem;
    opacity: 0.95;
}

.card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.25);
    overflow: hidden;
}

.card-header {
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    padding: 25px 30px;
    border-bottom: 1px solid #eee;
}

.card-header h2 {
    color: #333;
    font-size: 1.4rem;
    margin-bottom: 6px;
    font-weight: 600;
}

.card-header p {
    color: #666;
    font-size: 0.95rem;
}

.benefits {
    display: flex;
    gap: 25px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 0.9rem;
}

.benefit-icon {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

/* ========== STEPS INDICATOR ========== */
.steps-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.step-number.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.step-number.completed {
    background: #28a745;
    color: white;
}

.step-number.inactive {
    background: #e0e0e0;
    color: #999;
}

.step-label {
    font-size: 0.9rem;
    color: #666;
}

.step-label.active {
    color: #333;
    font-weight: 500;
}

.step-connector {
    width: 60px;
    height: 3px;
    background: #e0e0e0;
    border-radius: 2px;
}

.step-connector.completed {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* ========== FORM STYLES ========== */
.form-container {
    padding: 40px;
}

.form-title {
    text-align: center;
    margin-bottom: 30px;
}

.form-title h3 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.form-title p {
    color: #666;
    font-size: 0.95rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 6px;
    font-weight: 500;
}

.form-group label .required {
    color: #e74c3c;
}

.form-group input,
.form-group select {
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-group input.error,
.form-group select.error {
    border-color: #e74c3c;
}

.form-group .error-message {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 4px;
}

.form-group select {
    cursor: pointer;
    background: white;
}

.btn-submit {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 14px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ========== CALENDLY FIXES ========== */
.calendly-wrapper {
    position: relative;
    background: #fff;
}

.calendly-inline-widget,
.calendly-container {
    min-width: 100% !important;
    width: 100% !important;
    height: 680px !important;
    border: none !important;
    background: transparent !important;
}

.calendly-inline-widget iframe {
    border: none !important;
    background: #fff !important;
}

.calendly-badge-widget {
    display: none !important;
}

/* ========== LOADING ========== */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #888;
    background: #fff;
}

.spinner {
    width: 45px;
    height: 45px;
    border: 3px solid #f0f0f0;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== SUCCESS ========== */
.success-message {
    text-align: center;
    padding: 80px 30px;
    background: linear-gradient(to bottom, #f0fff4, #fff);
}

.success-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 45px;
    color: white;
    box-shadow: 0 10px 40px rgba(40, 167, 69, 0.3);
}

.success-message h3 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.success-message p {
    color: #666;
    font-size: 1.1rem;
    max-width: 400px;
    margin: 0 auto;
}

/* ========== FOOTER ========== */
.footer {
    text-align: center;
    color: white;
    margin-top: 25px;
    opacity: 0.85;
    font-size: 0.9rem;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .container {
        padding: 20px 15px;
    }

    .header h1 {
        font-size: 1.7rem;
    }

    .header p {
        font-size: 1rem;
    }

    .card-header {
        padding: 20px;
    }

    .card-header h2 {
        font-size: 1.2rem;
    }

    .benefits {
        flex-direction: column;
        gap: 10px;
    }

    .form-container {
        padding: 25px 20px;
    }

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

    .steps-indicator {
        padding: 15px;
        gap: 5px;
    }

    .step-label {
        display: none;
    }

    .step-connector {
        width: 30px;
    }

    .calendly-inline-widget,
    .calendly-container {
        height: 750px !important;
    }
}

/* Partners (Nuestros Aliados): logos con altura uniforme */
.partners-area .partner-item img {
    height: 50px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 575px) {
    .partners-area .partner-item img {
        height: 38px;
    }
}

/* Logo header y footer: tamaño acorde a la plantilla Jeena */
.main-header .logo img,
.main-header .mobile-logo img {
    max-height: 50px;
    max-width: 160px;
    width: auto;
}

header.main-header.header-one .logo-outer {
    padding: 15px 20px;
}

.footer-logo img {
    max-height: 50px;
    max-width: 160px;
    width: auto;
}

/* ==========================================================================
   "Agenda una reunión": estilos alineados a la plantilla Jeena
   (fuentes Poppins/Roboto y colores del tema). Solo diseño, sin cambios
   de funcionalidad. Las variables vienen del :root de theme/style.css.
   ========================================================================== */
#app {
    font-family: "Roboto", sans-serif;
    color: var(--base-color);
}

#app .header h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--heading-color);
}

#app .header p {
    color: var(--base-color);
}

#app .card {
    border-radius: 7px;
    box-shadow: 3px 0 60px rgba(103, 77, 243, 0.15);
}

#app .card-header {
    background: var(--lighter-color);
    border-bottom: 1px solid var(--border-color);
}

#app .benefit {
    color: var(--base-color);
}

#app .benefit-icon {
    background: var(--primary-color);
    color: var(--heading-color);
}

#app .steps-indicator {
    background: var(--lighter-color);
    border-bottom: 1px solid var(--border-color);
}

#app .step-number.active {
    background: var(--secondary-color);
    color: white;
}

#app .step-number.completed {
    background: var(--primary-color);
    color: var(--heading-color);
}

#app .step-label {
    color: var(--base-color);
}

#app .step-label.active {
    color: var(--heading-color);
    font-weight: 500;
}

#app .step-connector.completed {
    background: var(--primary-color);
}

#app .form-title h3,
#app .success-message h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--heading-color);
}

#app .form-title p,
#app .success-message p {
    color: var(--base-color);
}

#app .form-group label {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: var(--heading-color);
}

#app .form-group input,
#app .form-group select {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--heading-color);
    background: var(--lighter-color);
}

#app .form-group input:focus,
#app .form-group select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 4px rgba(103, 77, 243, 0.1);
    background: white;
}

/* Botón estilo .theme-btn de la plantilla: fondo verde, hover morado */
#app .btn-submit {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 12px 30px;
    background: var(--secondary-color);
    color: var(--heading-color);
    box-shadow: none;
}

#app .btn-submit:after {
    content: '';
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    z-index: -1;
    left: 50%;
    top: 50%;
    transition: 0.75s;
    position: absolute;
    background: var(--primary-color);
    transform: translate(-50%, -50%) scale(1);
}

#app .btn-submit:hover {
    color: white;
    transform: none;
    box-shadow: none;
}

#app .btn-submit:hover:after {
    transform: translate(-50%, -50%) scale(0);
}

#app .btn-submit:disabled {
    opacity: 0.6;
}

#app .spinner {
    border-top-color: var(--secondary-color);
}

#app .success-message {
    background: var(--lighter-color);
}

#app .success-icon {
    background: var(--primary-color);
    color: var(--heading-color);
    box-shadow: 0 10px 40px rgba(48, 240, 182, 0.35);
}

/* Grilla de horarios disponibles (agenda con Google Calendar) */
#app .slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    max-width: 600px;
    margin: 0 auto 10px;
}

#app .slot-btn {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 10px 0;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--lighter-color);
    color: var(--heading-color);
    cursor: pointer;
    transition: 0.3s;
}

#app .slot-btn:hover {
    border-color: var(--secondary-color);
    background: white;
}

#app .slot-btn.selected {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

#app .slots-empty {
    text-align: center;
    color: var(--base-color);
    margin: 20px 0;
}

#app .booking-error {
    text-align: center;
    margin-top: 15px;
}

/* ==========================================================================
   Espaciados de secciones del home (ritmo visual del tema Jeena)
   ========================================================================== */

/* Sección de contacto/agenda: título centrado con aire, como los
   section-title del tema */
#app .header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 45px;
}

#app .header h2 {
    margin-bottom: 15px;
}

/* Sidebar oscuro del bloque de contacto: mismo padding generoso del tema */
.contact-sidebar {
    padding: 45px 40px;
}

/* Separación entre el título del paso y el contenido del formulario */
#app .form-title {
    margin-bottom: 35px;
}

/* La grilla de horarios respira respecto al selector de fecha y al botón */
#app .slot-grid {
    margin-top: 25px;
    margin-bottom: 20px;
}

#app .btn-submit {
    margin-top: 35px;
}

/* Card del formulario: sombra y separación respecto al wrapper */
.contact-card-wrapper {
    margin-top: 10px;
}

/* Los service-two-item de la sección oscura mantienen margen inferior
   uniforme aunque la fila no esté completa */
.services-area .service-two-item {
    margin-bottom: 60px;
}

/* Slider "Nuestro Trabajo": aire inferior igual al ritmo del tema */
.project-area .project-slider-active {
    margin-bottom: 100px;
}

@media (max-width: 991px) {
    .project-area .project-slider-active {
        margin-bottom: 70px;
    }
}

/* En móvil, la imagen del collage "Sobre Nosotros" no se pega al texto */
@media (max-width: 991px) {
    .about-area .about-images {
        margin-top: 40px;
    }

    .contact-sidebar {
        padding: 35px 25px;
    }
}