/* ===========================
   BrightPixel Brand Styling
   =========================== */

.bg-cream {
    background-color: #91c2f3; /* gris ultraligero */
}

/* Hero Banner con onda blanca solo en desktop */
.hero-banner {
  position: relative;
  overflow: hidden;
}

.bg-hero {
  background-color: #91c2f3; /* mismo color del hero banner */
}

/* ===========================
   Navbar Shadow on Scroll
   =========================== */
/* navbar transparente sobre hero */
.navbar {
  background-color: #91c2f3; /* mismo color del hero banner */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.3s ease; /* transición suave */
}

/* Cuando se hace scroll */
.navbar.scrolled {
  background-color: #ffffff;
  backdrop-blur: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-transition {
    transition: all 0.3s ease-in-out;
}

#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
  
/* ===========================
   Fullscreen Mobile Menu
   =========================== */
@media (max-width: 768px) {
    #mobile-menu {
        /* 1. Posicionamiento fijo para cubrir todo */
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* 100% de la altura de la pantalla */
        background-color: #ffffff; /* Fondo blanco sólido */
        z-index: 40; /* Por debajo del botón (z-50) pero sobre el resto */
        
        /* 2. Alineación Central Vertical */
        display: none; /* Se controla con la clase .hidden de Tailwind/JS */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem; /* Espacio entre los links */
    }

    /* Cuando el JS quita la clase .hidden, forzamos que sea flex */
    #mobile-menu:not(.hidden) {
        display: flex !important;
    }

    /* Estilo para los links dentro del menú fullscreen */
    #mobile-menu a {
        font-size: 1.5rem; /* Letra más grande para que se vea importante */
        font-weight: 600;
    }
/* Hacemos que el dropdown se vea bien en el menú gigante */
    .dropdown-menu-custom {
        position: relative !important; /* Ya no flota, se mete en la columna */
        min-width: 100% !important;
        box-shadow: none !important;
        background-color: #f8fafc !important; /* Un gris muy tenue para diferenciarlo */
        display: block !important; /* Que siempre se vea si el menú está abierto */
    }
    
    #mobile-menu .group {
        width: 100%;
        text-align: center;
    }


}


/* Onda blanca como background SVG */
@media (min-width: 1024px) { /* visible solo desde md (tablet/desktop) */
 .hero-banner::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;           /* igual que el SVG pisando 1px */
    width: 100%;
    height: 10rem;          /* ~ xl:h-40 (160px) */
    pointer-events: none;   /* no bloquea clics */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%; /* equivale a preserveAspectRatio="none" */

    /* SVG con TU path exacto y fill blanco (#ffffff) */
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'>\<path d='M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z' fill='%23ffffff'/>\</svg>");}
}

/* Font */
body {
    font-family: 'Poppins', sans-serif;
    color: #1E293B;
   padding-top: 5rem; /* ~80px, coincide con h-16 + py-2 */ 
}

section[id] {
  scroll-margin-top: 5rem;
}

/* Tablet (md ≥ 768px) */
@media (min-width: 768px) {
  body {
    padding-top: 8rem; /* ~128px */
  }
  section[id] {
    scroll-margin-top: 8rem;
  }
}

/* Desktop (lg ≥ 1024px) */
@media (min-width: 1024px) {
  body {
    padding-top: 9rem; /* ~144px */
  }
  section[id] {
    scroll-margin-top: 9rem;
  }
}


/* Primary brand color (azul) */
.bg-primary { background-color: #1D4ED8; /* azul fuerte */ }
.text-primary { color: #1D4ED8; }

/* Secondary brand (naranja) */
.bg-secondary { background-color: #F97316; }
.text-secondary { color: #F97316; }

/* Accent (amarillo cálido para destacar) */
.bg-accent { background-color: #FACC15; }
.text-accent { color: #FACC15; }

/* Dark text */
.text-darken { color: #111827; }

/* Hover */
.btn-primary:hover { background-color: #1E40AF; }
.btn-secondary:hover { background-color: #EA580C; }
.btn-accent:hover { background-color: #EAB308; }

/* Animations */
.flip-card {
  background-color: transparent;
  perspective: 1000px;
  width: 100%;
  height: 320px; /* <-- da un alto fijo, ajusta según el diseño */
  position: relative; /* importante para contener bien el flip */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%; /* <- ocupa todo el alto definido */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* ambas caras mismo alto */
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.flip-card-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
}

/* Animation for floating icons */
/* ===========================
   Floating Animations
   =========================== */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

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

.floating-2 { animation: float 8s ease-in-out infinite; }

.floating-4 { animation: float 10s ease-in-out infinite; }


/* styles.css */
.bg-brand-blue {
    background-color: #5B72EE;
}
.bg-brand-orange {
    background-color: #F48C06;
}
.bg-brand-cyan {
    background-color: #29B9E7;
}
.bg-brand-red {
    background-color: #FF4C60;
}
.text-darken {
    color: #111827;
}

/* ===========================
   Custom Edits 2025-08-26
   =========================== */
/* Fondo celeste pastel */
.bg-light-blue {
    background-color: #D6EDFF; /* azul pastel suave */
}

/* Texto azul suave */
.text-light-blue {
    color: #5DB8FF;
}

/* Borde y efecto hover en cards */
.card-light-blue {
    border: 1px solid #AEE1FF; /* borde celeste claro */
    background-color: #FFFFFF;  /* fondo blanco por defecto */
    transition: all 0.3s ease;
}

.card-light-blue:hover {
    background-color: #D6EDFF;  /* cambia a azul pastel al pasar el mouse */
    transform: translateY(-5px); /* pequeño efecto de elevación */
}


/* ===========================
   Custom Edits 2025-08-28
   =========================== */
   .nav-link {
  position: relative;
  color: #1E293B; /* gris oscuro por defecto */
  transition: all 0.3s ease-in-out;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: #1D4ED8; /* azul primary */
  transition: width 0.3s ease-in-out;
}

.nav-link:hover {
  color: #1D4ED8;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link {
  display: inline-block;
  transition: all 0.3s ease;
}

.nav-link:hover {
  transform: translateY(-3px);
}

/* CTA css */
.cta-btn {
  background-color: #1D4ED8;
  color: white;
  border-radius: 9999px;
  padding: 0.75rem 2.5rem;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.cta-btn:hover {
  background-color: #1E40AF;
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.3);
  transform: translateY(-3px);
}

/* Animation for the carousel */
#carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  overflow-x: hidden; /* esto oculta el scroll */
}

.carousel-card {
  flex: 0 0 calc((100% / 3) - 0px); /* 3 cards visibles - gap */
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Tarjeta central */
#carousel-container .center {
  transform: scale(1); /* un poco más pequeña que 1.1 */
  opacity: 1;
}

/* Tarjetas laterales */
#carousel-container .side {
  transform: scale(0.88); /* más pequeña que 0.9 */
  opacity: 0.6;
}

.carousel-wrapper {
  overflow-x: hidden;
}

#portfolio {
  background: linear-gradient(to right, #91c2f3, #ffffff, #91c2f3);
}


/* En mobile solo mostrar el centro */
/* En pantallas menores a 1024px (tablets y móviles) */
@media (max-width: 1024px) {
  #carousel-container .side {
    display: none !important;
  }

  #carousel-container {
    justify-content: center;
  }

  /* Ocultar botones flotantes en tablet/móvil */
  #prev-btn,
  #next-btn {
    display: none !important;
  }

  .carousel-card.center,
  .carousel-card.side {
    transform: scale(1) !important;
  }

}


/* ===========================
   New values of Custom Edits - December 2025
   =========================== */
/* Espaciado personalizado para el Hero */
.hero-flex-gap { gap: 5rem; /* Esto equivale a gap-20 de Tailwind, un espacio generoso */ }

@media (min-width: 1024px) { 
      .hero-flex-gap {
        gap: 7rem; /* Aún más espacio en pantallas grandes (gap-28 aprox) */
    }
}

/* Fondo personalizado que combina con tu marca */
.bg-brand-soft-blue {
    background-color: #f0f7ff;
}

/* Clase para forzar la alineación a la izquierda si el contenedor general centrara algo */
.text-align-left {
    text-align: left !important;
}

/* Lista con checks color Primary (#1D4ED8) */
.check-list {
    list-style: none !important;
    padding-left: 0;
    margin-top: 1.5rem;
}

.check-list li {
    position: relative;
    padding-left: 2.2rem; /* Espacio exacto para que no se vea apretado */
    margin-bottom: 1rem;
    line-height: 1.5;
    display: block;
    color: #475569; /* Un gris suave para que el azul del check resalte */
}

/* Generamos el icono con el color preciso #1D4ED8 */
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem; /* Alineación vertical fina */
    width: 1.4rem;
    height: 1.4rem;
    background-repeat: no-repeat;
    background-size: contain;
    /* Aplicamos tu color preciso: %231D4ED8 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
}


/* ===========================
   Edit in services/web-design.html - December 2025
   =========================== */
.bg-brand-cta { background-color: #F9FAF7; /* slate-like, puente entre soft blue y footer */}

.bg-brand-roadmap { background-color: #e6f0ff; /* azul ligeramente más profundo */}

.pt-2{ padding-top: 0.5rem; }
.pt-4{ padding-top: 1rem; }
.space-x-2{ gap: 0.5rem; }
.py-10{ padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pb-10{ padding-bottom: 2.5rem; }
.pb-20{ padding-bottom: 5rem; }
.pb-28{ padding-bottom: 7rem; }
.gap-12{ gap: 3rem; }
.mb-16{ margin-bottom: 4rem; }

/* Lógica de visualización */
.group:hover .group-hover\:block {
    display: block !important;
}

/* Estilos de contenedor manuales */
.dropdown-menu-custom {
    background-color: #ffffff !important;
    border-radius: 0.75rem !important; /* Esto es el 'rounded-xl' de Tailwind */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
    min-width: 260px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Un borde sutil para definición */
    overflow: hidden; /* Asegura que los enlaces no se salgan de las esquinas redondeadas */
    z-index: 9999 !important;
}

/* Ajuste para los items del menú */
.dropdown-item {
    display: block;
    padding: 0.75rem 1.5rem !important;
    color: #374151 !important; /* gray-700 */
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f9fafb !important; /* gray-50 */
    color: #2563eb !important; /* blue-600 / primary */
}

/* ===========================
   Edits in services/web-design.html - January 2026
   =========================== */
@media (max-width: 768px) {
    .md-reverse {
        flex-direction: column-reverse !important;
    }

    /* Añade esto: separa la imagen del texto solo en móvil */
    .md-reverse img {
        margin-top: 1rem !important; /* Esto es igual a un gap-8 (32px) */
    }

    /* Para las secciones que NO son reverse, también necesitamos espacio */
    .flex-col > div:last-child img {
        margin-top: 1rem !important;
    }

/* Forzamos que el submenú sea parte de la lista y no flote */
#services-accordion {
        /* 1. Cambiamos display:none por control de altura y opacidad */
        display: block !important; /* Debe estar en block para que la transición funcione */
        max-height: 0;             /* Empieza sin altura */
        opacity: 0;                /* Invisible */
        overflow: hidden;          /* Esconde el contenido que "sobra" */
        
        /* 2. Propiedades de posicionamiento que ya tenías */
        position: static !important;
        width: 100% !important;
        background-color: #f8fafc !important;
        box-shadow: none !important;
        margin-top: 0 !important;
        
        /* 3. La transición: aquí defines la velocidad (0.4s es ideal) */
        transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
    }

    /* Cuando se activa el acordeón */
    #services-accordion.show-accordion {
        max-height: 500px; /* Un valor lo suficientemente alto para cubrir el contenido */
        opacity: 1;        /* Se vuelve visible */
        padding: 1rem 0;   /* Un poco de aire al abrirse */
    }

    /* Esta clase la pondrá el JS al hacer click */
    #services-accordion.show-accordion {
        display: block !important;
    }


    /* Rotación suave */
    #services-icon {
        transition: transform 0.3s ease;
        display: inline-block;
    }

    /* Rotación de la flechita */
    #services-icon.rotate {
        transform: rotate(180deg);
    }
    

}