/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Hero Section Gradient */
.hero-gradient {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #FF7A00 100%);
}

/* Section Title Underline */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 4px;
    background: #FF7A00;
}

/* Service Cards Hover Effect */
.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
}

/* Back to Top Button */
#backToTop {
    transition: opacity 0.3s, visibility 0.3s;
}

/* Mobile Menu */
.mobile-menu {
    transition: transform 0.3s ease-in-out;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #FF7A00;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e66d00;
}

/* Form Input Focus */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    ring: 2px;
    ring-color: #FF7A00;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Button Hover Effects */
button,
a.button {
    transition: all 0.3s ease;
}

button:hover,
a.button:hover {
    transform: scale(1.05);
}

/* Card Shadows */
.shadow-custom {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.shadow-custom-lg {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #FF7A00 0%, #e66d00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Link Hover Effect */
a {
    transition: color 0.3s ease;
}

/* Image Hover Effect */
img {
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.05);
}

/* Error Message */
.error-message {
    font-size: 0.875rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

/* Form Success/Error Messages */
.form-message-success {
    background-color: #d1fae5;
    color: #065f46;
    padding: 1rem;
    border-radius: 0.5rem;
}

.form-message-error {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 1rem;
    border-radius: 0.5rem;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    h4 {
        font-size: 1.25rem;
    }
}

/* Header Shadow on Scroll */
.header-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Loading Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* Bounce Animation for CTA Buttons */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.bounce-on-hover:hover {
    animation: bounce 1s;
}

/* Floating Animation for WhatsApp Button */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Site Logo (header y footer) */
.site-logo {
    object-fit: contain;
    flex-shrink: 0;
}

/* El logo no debe heredar el efecto hover global de las imágenes */
.site-logo:hover,
.site-logo img:hover {
    transform: none;
}

/* Team Section - Image Styling */
.team-member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Team Card Container */
.team-card-image-container {
    position: relative;
    overflow: hidden;
}

.team-card-image-container img {
    transition: transform 0.5s ease;
}

.team-card-image-container:hover img {
    transform: scale(1.1);
}

/* Remove generic image hover effect for team photos */
.team-card-image-container img:hover {
    transform: scale(1.1);
}

/* =========================================================================
   ASOCIACION: portada dividida, bloque Escuela Colombiana de Violin,
   navegacion con submenus y animaciones de aparicion
   ========================================================================= */

/* Las anclas no quedan tapadas por el header fijo */
section[id] {
    scroll-margin-top: 80px;
}

/* El menu movil puede ser mas alto que la pantalla: se desplaza por dentro */
.mobile-menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* ---------- Navegacion con submenus ---------- */
.nav-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown .nav-chevron {
    transition: transform 0.25s ease;
}

.nav-dropdown:hover .nav-chevron,
.nav-dropdown.is-open .nav-chevron {
    transform: rotate(180deg);
}

/* Anula el zoom global de botones en la navegacion */
.nav-dropdown-btn:hover {
    transform: none;
}

/* ---------- Portada ---------- */
.hero-title-band {
    background: linear-gradient(90deg, #0b0b0b 0%, #171717 45%, #0E1B36 100%);
}

.hero-title-rule {
    width: 120px;
    height: 2px;
    margin: 1.25rem auto 0;
    background: linear-gradient(90deg, #FF7A00, #B8965A);
}

.hero-split {
    display: flex;
    flex-direction: column;
}

.hero-half {
    position: relative;
    overflow: hidden;
    flex: 1 1 0%;
    transition: flex-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) {
    .hero-split {
        flex-direction: row;
        min-height: 600px;
    }

    /* La mitad sobre la que esta el cursor gana protagonismo */
    .hero-split:hover .hero-half {
        flex-grow: 0.85;
    }

    .hero-split .hero-half:hover {
        flex-grow: 1.15;
    }
}

.hero-half-conciliacion {
    background: linear-gradient(140deg, #000000 0%, #141414 55%, #6b3300 100%);
}

/* Fondo azul profundo con lineas de pentagrama doradas muy sutiles */
.hero-half-escuela,
.escuela-staff {
    background-color: #0E1B36;
    background-image:
        linear-gradient(to bottom,
            rgba(184, 150, 90, 0.12) 0 1px, transparent 1px 12px,
            rgba(184, 150, 90, 0.12) 12px 13px, transparent 13px 24px,
            rgba(184, 150, 90, 0.12) 24px 25px, transparent 25px 36px,
            rgba(184, 150, 90, 0.12) 36px 37px, transparent 37px 48px,
            rgba(184, 150, 90, 0.12) 48px 49px, transparent 49px 150px),
        linear-gradient(140deg, #0E1B36 0%, #16284D 60%, #0a1328 100%);
    background-size: 100% 150px, 100% 100%;
}

/* Linea divisoria dorada entre las dos mitades */
@media (min-width: 1024px) {
    .hero-half-escuela::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        z-index: 20;
        background: linear-gradient(to bottom, transparent, rgba(217, 192, 143, 0.7), transparent);
    }
}

.hero-deco {
    position: absolute;
    pointer-events: none;
    opacity: 0.07;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}

.hero-half:hover .hero-deco {
    opacity: 0.13;
    transform: scale(1.06) rotate(-4deg);
}

@keyframes heroFadeDown {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFromLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroFromRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.hero-enter-down  { animation: heroFadeDown 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-enter-left  { animation: heroFromLeft 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.hero-enter-right { animation: heroFromRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

/* ---------- Bloque de conciliacion ---------- */
.bloque-conciliacion-intro {
    background: linear-gradient(90deg, #000000 0%, #1a1a1a 60%, #3d1d00 100%);
}

/* ---------- Escuela Colombiana de Violin ---------- */
.escuela-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #7F6232;
}

.escuela-eyebrow-light {
    color: #D9C08F;
}

.escuela-ornament {
    position: relative;
    width: 96px;
    height: 1px;
    margin: 1.25rem auto 0;
    background: linear-gradient(90deg, transparent, #B8965A, transparent);
}

.escuela-ornament::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background: #B8965A;
    transform: translate(-50%, -50%) rotate(45deg);
}

.escuela-card {
    background: #ffffff;
    border: 1px solid rgba(184, 150, 90, 0.25);
    border-radius: 0.875rem;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.escuela-card:hover,
.js .escuela-card[data-reveal].is-visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(14, 27, 54, 0.35);
    border-color: rgba(184, 150, 90, 0.65);
}

.escuela-diamond {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: #B8965A;
    transform: rotate(45deg);
}

.escuela-cta-bg {
    background:
        radial-gradient(circle at 15% 20%, rgba(184, 150, 90, 0.22), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(184, 150, 90, 0.14), transparent 40%),
        linear-gradient(135deg, #0E1B36 0%, #16284D 100%);
}

/* Linea que une los pasos del proceso en escritorio */
@media (min-width: 1024px) {
    .proceso-linea::before {
        content: '';
        position: absolute;
        top: 32px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #B8965A 12%, #B8965A 88%, transparent);
    }
}

/* Preguntas frecuentes */
.faq-item summary {
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item .faq-icon {
    transition: transform 0.35s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-item[open] .faq-answer {
    animation: faqOpen 0.4s ease both;
}

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Aparicion al hacer scroll ----------
   Solo se ocultan si JS esta activo (clase .js en <html>), para que el
   contenido nunca quede invisible si el script falla. El retraso escalonado
   lo aplica JS, asi el hover de las tarjetas no hereda ningun retraso. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js [data-reveal="zoom"]  { transform: scale(0.96); }

/* Las entradas laterales solo en pantallas anchas: por debajo de 1280px el
   contenedor casi no tiene margen y un elemento desplazado a la derecha antes
   de aparecer se sale de la pantalla y provoca scroll horizontal */
@media (min-width: 1280px) {
    .js [data-reveal="left"]  { transform: translateX(-32px); }
    .js [data-reveal="right"] { transform: translateX(32px); }
}

/* Red de seguridad frente a cualquier desborde horizontal. Se usa clip y no
   hidden: hidden convertiria al body en contenedor de scroll y dejaria de
   funcionar window.scrollY, del que dependen el header y la navegacion activa */
body {
    overflow-x: clip;
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-enter-down,
    .hero-enter-left,
    .hero-enter-right,
    .float-animation {
        animation: none !important;
    }

    .hero-half,
    .hero-deco,
    .escuela-card,
    .nav-dropdown-menu {
        transition: none !important;
    }
}

/* =========================================================================
   INSOLVENTIC (plataforma digital)
   Misma composicion que la seccion del sitio de Constructores de Paz
   ========================================================================= */
.insolventic {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(1000px 520px at 12% -10%, rgba(60, 154, 227, 0.28), transparent 62%),
        radial-gradient(760px 420px at 92% 108%, rgba(246, 204, 4, 0.18), transparent 60%),
        linear-gradient(140deg, #041E3D 0%, #062E5C 48%, #01315F 100%);
}

/* Cuadricula tenue de fondo */
.insolventic::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
    mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
}

.insolventic__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 48px;
}

@media (min-width: 1024px) {
    .insolventic__inner {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 72px;
    }
}

.insolventic__lead {
    color: #C9DCF0;
    max-width: 56ch;
}

.insolventic__list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    gap: 12px;
}

.insolventic__list li {
    position: relative;
    padding-left: 32px;
    color: #DCE7F3;
}

.insolventic__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(246, 204, 4, 0.18);
    border: 1px solid rgba(246, 204, 4, 0.55);
}

.insolventic__list li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.5em;
    width: 6px;
    height: 3px;
    border-left: 2px solid #F6CC04;
    border-bottom: 2px solid #F6CC04;
    transform: rotate(-45deg);
}

.insolventic__note {
    margin: 14px 0 0;
    font-size: 0.86rem;
    color: #9DB6D0;
}

.insolventic__visual {
    display: flex;
    justify-content: center;
}

/* Mockup de ventana de aplicacion */
.app-window {
    width: 100%;
    max-width: 430px;
    background: #F7FAFD;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-window:hover {
    transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-6px);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1023px) {
    .insolventic__visual { order: -1; }
    .app-window { transform: none; max-width: 380px; }
    .app-window:hover { transform: translateY(-6px); }
}

.app-window__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: #E7EDF5;
    border-bottom: 1px solid #D3DEEB;
}

.app-window__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.app-window__dot--r { background: #FF5F57; }
.app-window__dot--y { background: #FEBC2E; }
.app-window__dot--g { background: #28C840; }

.app-window__url {
    margin-left: 10px;
    font-size: 0.76rem;
    color: #6B7F96;
    background: #ffffff;
    border-radius: 999px;
    padding: 4px 14px;
    border: 1px solid #D3DEEB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-window__body {
    padding: 40px 28px 44px;
    text-align: center;
    background: radial-gradient(circle at 50% 22%, #FFFFFF 0%, #EDF3FA 100%);
}

.app-window__logo {
    width: clamp(120px, 26vw, 158px);
    height: auto;
    margin: 0 auto 20px;
    filter: drop-shadow(0 12px 26px rgba(6, 46, 92, 0.22));
}

/* El logo no hereda el zoom global de las imagenes */
.app-window__logo:hover {
    transform: none;
}

.app-window__name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #062E5C;
    margin: 0 0 6px;
}

.app-window__tag {
    margin: 0;
    font-size: 0.9rem;
    color: #5B6B7F;
}

@media (prefers-reduced-motion: reduce) {
    .app-window {
        transition: none !important;
    }
}

/* =========================================================================
   Ventana emergente de perfil y credito de Insolventic
   ========================================================================= */
.modal-perfil {
    width: calc(100% - 2rem);
    max-width: 52rem;
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    color: inherit;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.modal-perfil::backdrop {
    background: rgba(10, 12, 20, 0.65);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.modal-perfil[open] {
    animation: modalEntrada 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modalEntrada {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dentro de la ventana no aplica el zoom global de imagenes ni de botones */
.modal-perfil img:hover {
    transform: none;
}

.modal-cerrar:hover {
    transform: rotate(90deg);
}

/* Credito bajo el mockup de Insolventic */
.insolventic__visual {
    flex-direction: column;
    align-items: center;
}

.insolventic__by {
    margin-top: 1.75rem;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: #C9DCF0;
}

@media (prefers-reduced-motion: reduce) {
    .modal-perfil[open] {
        animation: none;
    }
}