/* ---------- Reset minimal ---------- */
    *,*::before,*::after{
        box-sizing:border-box
    }
    
    html,body{
        height:100%;
    }
    
    body{
        margin:0;
        font-family:Inter, "Helvetica Neue", Arial, sans-serif;
        line-height:1.5;
        color:#0f1724;
        background:linear-gradient(100deg,#f7fbff 0%, #ffffff 50%);
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale
    }
    
    a{
        color:inherit;
        text-decoration:none
    }

    img{
        max-width:100%;
        height:auto;
        display:block
    }

    .logoppal{
          width: 20%;
        }    

    /* ---------- Layout ---------- */
    .container{
        max-width:85%;
        margin:0 auto;
        padding:0 2%
    }
    
    header{
        position:fixed;
        left:0;
        right:0;
        top:0;
        z-index:50;
        background:transparent;
        transition:background .25s,box-shadow .25s;
        padding:2% 0
    }

    header.scrolled{
        background:rgba(28, 41, 61, 0.98);
        box-shadow:0 6px 24px rgba(15,23,36,0.08);
        color:#fff;
    }

    .nav{display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:12px;color:#0f1724;font-weight:700;font-size:18px}
    .brand .logo{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#6ee7b7,#60a5fa);display:flex;align-items:center;justify-content:center;color:#032;box-shadow:0 6px 18px rgba(16,24,40,0.08)}
    nav ul{display:flex;gap:18px;align-items:center;margin:0;padding:0;list-style:none}
    .cta-btn{padding:10px 16px;border-radius:10px;background:linear-gradient(90deg,#0ea5a4,#7c3aed);color:white;font-weight:600;box-shadow:0 6px 18px rgba(124,58,237,0.18); font-size: 22px;}
    
    .ghost{
        padding:8px 12px;
        border-radius:10px;
        border:1px solid rgba(15,23,36,0.06);
        background:linear-gradient(180deg,#0ea5a4 0%, #5363d7 100%);
        color:#ffffff;
    }

    .line{
        width: 100%;
        height: 3px;
        margin: 28px 0;
        border-radius: 4px;
        background-color: rgba(30, 50, 45, 0.14);
        box-shadow: 0 2px 6px rgba(30, 50, 45, 0.06);
        pointer-events: none;
    }

    .contacto1{
        margin-top: 3%;
    }

/* ---------- Mobile menu ---------- */
    /* .mobile-toggle{display:none;background:transparent;border:0;color:inherit;font-size:20px} */
    .mobile-nav{display:none;position:fixed;inset:0;background:rgba(2,6,23,0.6);padding:80px 20px}
    .mobile-nav .panel{background:#fff;padding:18px;border-radius:10px}

    /* ---------- Hero ---------- */
    .hero{
        padding:13% 0 5%;
        display:grid;
        grid-template-columns:1fr 520px;
        gap:36px;
        align-items:center
    }

    .eyebrow{
        display:inline-block;
        background:linear-gradient(90deg,#fef3c7,#fee2e2);
        padding:6px 10px;
        border-radius:999px;
        font-size:13px;
        color:#92400e;
        margin-bottom:14px
    }

    h1{font-size:36px;margin:0 0 14px;color:#082032;line-height:1.06}
    p.lead{margin:0 0 22px;color:#334155;font-size:16px;text-align: justify;}
    .cta-row{display:flex;gap:12px;align-items:center}
    .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
    .feature-pill{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 6px 16px rgba(2,6,23,0.06);font-size:14px;color:#0f1724}

    /* ---------- Mockup card ---------- */
    .mockup{padding:22px;}
    .mockup .screen{min-height:320px;display:flex;flex-direction:column;gap:12px}
    
    /* ---------- Sections ---------- */
    section{padding:60px 0}
    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.04)}
    .card h3{margin:8px 0 10px;font-size:18px;color:#082032}
    .card p{margin:0;color:#3a485c;font-size:14px}

    .benefits{display:flex;gap:16px;flex-wrap:wrap}
    .benefit{flex:1 1 220px;background:linear-gradient(180deg,#fefffe,#e4e5e6);padding:16px;border-radius:12px;box-shadow:0 8px 18px rgba(2,6,23,0.03)}

    /* ---------- Testimonios ---------- */
    .testimonials{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .testimonial{background:linear-gradient(180deg,#ffffff,#fbfbff);padding:16px;border-radius:12px;box-shadow:0 8px 18px rgba(2,6,23,0.04)}


    /* ---------- Carrusel ---------- */




/* Carrusel */
.carousel-wrapper {
  position: relative; overflow: hidden;
}

.carousel-track {
  display: flex; transition: transform 0.4s ease-in-out; gap: 20px;
}

.testimonial {
  width: 55%;
  flex: 0 0 auto;
  background: rgba(30, 50, 45, 0.04);
  border: 1px solid rgba(30, 50, 45, 0.1);
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  box-shadow: 0 4px 8px rgba(30,50,45,0.05);
  margin-left: 7%;
}

/* .testimonial strong {
  font-size: 1.1rem;
} */

.testimonial p {
  margin: 8px 0 6px 0;
  color: #334155;
  line-height: 1.5;
}

.testimonial small {
  color: #64748b;
  font-size: 0.9rem;
}

/* Botones */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(2, 7, 97, 0.1);
  border: none;
  font-size: 2rem;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(30,50,45,0.25);
}

.carousel-btn.prev {
  left: 5px;
}

.carousel-btn.next {
  right: 5px;
}

/* Responsivo */
@media (max-width: 768px) {
  #casos h2 { font-size: 1.6rem; }
  .testimonial { min-width: 220px; padding: 20px; }
}

@media (max-width: 480px) {
  .testimonial { min-width: 170px; padding: 10px; margin-left: 16%; }
}



    /* ---------- Contact ---------- */
    .contact-grid{display:grid;grid-template-columns:1fr 420px;gap:22px;align-items:start}
    form{display:flex;flex-direction:column;gap:12px}
    input,textarea,select,option {padding:12px;border-radius:8px;border:1px solid rgba(2,6,23,0.06);font-size:14px}
    button[type="submit"]{background:linear-gradient(90deg,#0ea5a4,#7c3aed);color:white;padding:12px;border-radius:10px;border:0;font-weight:700;cursor:pointer}

#formStatus {
  margin-top: 10px;
  font-size: 13px;
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: 8px;
  padding: 10px;
}

/* Animaciones de estado */
#formStatus.success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  opacity: 1;
}

#formStatus.error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  opacity: 1;
}

#formStatus.sending {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
  opacity: 1;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top: 2px solid #334155;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Animación al desaparecer --- */
.fade-out {
  opacity: 0 !important;
  transition: opacity 0.8s ease;
}

    /* ---------- Footer ---------- */
    footer{padding:32px 0;background:#071331;color:#cfe8ff}
    footer .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

    /* ---------- Responsive ---------- */
    @media (max-width:1024px){
      .hero{grid-template-columns:1fr;gap:18px;padding-top:100px}
      .mockup{order:2}
      .services{grid-template-columns:repeat(2,1fr)}
      .testimonials{grid-template-columns:1fr}
      .contact-grid{grid-template-columns:1fr}
      .m_ppal{
        padding-right: 4% !important;
    }
}
     @media (max-width:720px){
     .m_ppal{
        font-size: 12px;
    }
    }

    
    @media (max-width:640px){
      header{padding:12px 0}
      /* .mobile-toggle{display:block} */
      nav ul{display:none}
      .mobile-nav{display:block}
      .hero{padding-top:90px}
      .features-grid{grid-template-columns:repeat(2,1fr)}
      .services{grid-template-columns:1fr}
      .ghost{display: none;}
      .logoppal{ width: 30%;}
      .eyebrow{margin-top: 2%;}  
    }

    @media (max-width:450px){
     .serv{
        margin-top: -40%;
    }
    }

    /* ---------- Small animations ---------- */
    .fade-up{opacity:0.9;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
    .fade-up.in-view{opacity:1;transform:none}