/* =========================
   TOKENS / BASE
   ========================= */
   :root{
    /* Marca */
    --primary:#0A3D62;     /* Azul Profundo */
    --accent:#48C9B0;      /* Cian suave */
    --lav:#B88ED1;         /* Lavanda */
    --purple:#8A5BB8;      /* Púrpura */
  
    /* UI claro */
    --bg:#F5F5F5;
    --surface:#FFFFFF;
    --surface2:#F9FAFB;
    --text:#0B1220;
    --muted:#4B5563;
    --border: rgba(10,61,98,.12);
    --shadow: 0 12px 30px rgba(10,61,98,.10);
    --radius: 18px;
    --max: 1120px;
  
    /* Efectos */
    --ring: rgba(72,201,176,.28);
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:
      radial-gradient(900px 500px at 12% 38%, rgba(72,201,176,.18), transparent 60%),
      radial-gradient(900px 500px at 85% 48%, rgba(184,142,209,.18), transparent 60%),
      radial-gradient(900px 500px at 50% 125%, rgba(10,61,98,.10), transparent 55%),
      var(--bg);
    line-height:1.45;
  }
  
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 18px; }
  
  
  /* =========================
     BUTTONS
     ========================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.75);
    color:var(--primary);
    font-weight:700;
    transition:.2s ease;
    backdrop-filter: blur(10px);
  }
  
  .btn:hover{
    transform: translateY(-1px);
    border-color: rgba(10,61,98,.22);
    box-shadow: 0 10px 20px rgba(10,61,98,.10);
  }
  
  .btn.primary{
    color:#fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(10,61,98,.18);
  }
  .btn.primary:hover{ filter: brightness(1.03); }
  
  .icon-btn{
    padding:12px;
    min-width:44px;
    justify-content:center;
    font-size:16px;
  }
  
  
  /* =========================
     HEADER / NAV
     ========================= */
  header{
    position: sticky;
    top:0;
    z-index:20;
    background: rgba(245,245,245,.78);
    backdrop-filter: blur(14px);
    border-bottom:1px solid var(--border);
  }
  
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    gap:14px;
    flex-wrap: nowrap;
  }
  
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ height:45px; width:auto; }
  .brand .name{ font-weight:800; letter-spacing:.5px; }
  .mini{ color:var(--muted); font-size:13px; }
  
  .nav-cta{ display:flex; gap:10px; align-items:center; }
  .burger{ display:none; }
  
  /* Main nav links */
  .nav--main{ padding: 12px 0; }
  .mainnav__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  
  .mainnav__item{ flex: 0 0 auto; }
  
  .mainnav__link{
    appearance:none;
    border:0;
    background: transparent;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 800;
    color: rgba(10,61,98,.82);
    cursor: pointer;
  }
  .mainnav__link:hover{
    background: rgba(72,201,176,.12);
    color: var(--primary);
  }
  
  /* Mega menu */
  .has-mega{ position: relative; }
  
  .mega{
    position:absolute;
    top: calc(100% + 10px);
    left: 0;
    width: fit-content;
    min-width: 220px;    
    max-width: 92vw;       
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    display:none;
    z-index: 50;
  }
  .has-mega.is-open .mega{ display:block; }
  
  .mega__grid{display:block;}
  
  .mega__col{
    padding: 10px;
    border-radius: 14px;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(10,61,98,.08);
  }
  
  .mega__title{
    font-weight: 900;
    color: var(--text);
    margin-bottom: 8px;
  }
  
  .mega__link{
    display:block;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text);
    font-weight: 750;
  }
  .mega__link:hover{
    background: rgba(72,201,176,.12);
  }
  
  
  /* =========================
     HERO
     ========================= */
  .hero{
    position: relative;
    padding: 72px 0 42px;
    background-image: url("../imagenes/empresa_02.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* overlay + fundido inferior */
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(
        to bottom,
        rgba(245,245,245,0) 0%,
        rgba(245,245,245,0) 70%,
        rgba(245,245,245,.65) 85%,
        rgba(245,245,245,1) 100%
      ),
      linear-gradient(
        90deg,
        rgba(245,245,245,.88) 0%,
        rgba(245,245,245,.55) 55%,
        rgba(245,245,245,.15) 100%
      ),
      radial-gradient(900px 500px at 15% 15%, rgba(72,201,176,.12), transparent 60%),
      radial-gradient(900px 500px at 80% 20%, rgba(184,142,209,.12), transparent 60%);
  }
  
  .hero > .wrap{ position: relative; z-index: 1; }
  
  .hero-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:24px;
  }
  
  .hero-main{ padding:28px; }
  
  .hero-main--no-card{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  
  h1{
    margin:14px 0 10px;
    font-size: clamp(30px, 4vw, 46px);
    line-height:1.05;
    letter-spacing:-.8px;
  }
  
  .lead{
    color:var(--muted);
    font-size: 16px;
    max-width: 75ch;
  }
  
  .hero-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  
  .hero-note{ margin-top:14px; }
  
  
  /* =========================
     CARDS / SECTIONS
     ========================= */
  section{ padding:42px 0; }
  
  .card{
    background: var(--surface);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  
  /* títulos de sección */
  .section-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:16px;
    flex-wrap: wrap;
  }
  .section-title h2{
    margin:0;
    font-size: 26px;
    letter-spacing:-.4px;
  }
  .section-title p{
    margin:0;
    color:var(--muted);
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  
  .section-title--wide p{
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.65;
    max-width: 120ch;
    text-align: justify;
    text-justify: inter-word;
  }

  
  /* =========================
     BADGES
     ========================= */
  .badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size: 12px;
    font-weight:800;
    color: var(--purple);
    padding:7px 10px;
    border-radius: 999px;
    background: rgba(184,142,209,.16);
    border: 1px solid rgba(138,91,184,.22);
  }
  
  
  /* =========================
     WHY (Por qué / Filosofía) 
     ========================= */
     .why{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      align-items: stretch;
    }
    
    /* blindaje visual premium */
    .why .service.card{
      background: var(--surface) ;
      border: 1px solid var(--border) ;
      border-radius: 18px;
      box-shadow: var(--shadow) ;
    
      padding: 18px;
      position: relative;
      overflow: hidden;
    
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .why .service.card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(700px 220px at 20% 0%, rgba(72,201,176,.10), transparent 60%),
        radial-gradient(700px 220px at 85% 10%, rgba(184,142,209,.10), transparent 60%);
      pointer-events:none;
      opacity: 1;
    }
    
    /* mantener contenido sobre el overlay */
    .why .service.card > *{
      position: relative;
      z-index: 1;
    }
    
    /* badge premium */
    .why .badge{
      align-self: flex-start;
    }
    
    /* título y texto */
    .why .service.card h3{
      margin: 0;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: -.2px;
      color: var(--accent);
    }
    
    .why .service.card p{
      margin: 0;
      color: var(--text);
      opacity: .92;
      line-height: 1.45;
    }
    
  
  .media-card--full{
    margin-top: 18px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: var(--surface);
    max-height: 450px;
    max-width: 1080px;
  }
  
  .media-card--full img{
    width: 100%;
    height: 450px;
    display:block;
    object-fit: cover;
  }

  .why--center-one{
    grid-template-columns: repeat(3, 1fr); 
  }
  
  /* cuando hay solo una card */
  .why--center-one > .service{
    grid-column: 2;        
  }
  
  
  /* =========================
     CONTACT
     ========================= */
  .contact{ padding:18px; }
  
  form{ display:grid; gap:10px; margin-top:10px; }
  
  input, textarea{
    width:100%;
    padding:12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(10,61,98,.16);
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(10,61,98,.06);
    color:var(--text);
    outline:none;
  }
  
  input:focus, textarea:focus{
    border-color: rgba(72,201,176,.55);
    box-shadow: 0 0 0 4px var(--ring);
  }
  
  input::placeholder, textarea::placeholder{
    color: rgba(11,18,32,.55);
  }
  
  textarea{ min-height:180px; resize:vertical; }

  
  
  
  /* =========================
     FOOTER
     ========================= */
  footer{
    padding:28px 0 40px;
    border-top:1px solid rgba(233,236,245,.08);
    color: var(--muted);
  }
  
  .foot{
    display:grid;
    grid-template-columns: 1fr .8fr .8fr .8fr;
    gap:14px;
  }
  
  .foot h4{ margin:0 0 8px; color: var(--text); }
  .foot a{ color: var(--muted); display:block; padding:6px 0; }
  .foot a:hover{ color: var(--text); }
  
  .footer-bottom{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(10,61,98,.10);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
  }

  .footer-contact{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  .contact-link{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-weight:600;
    transition:.2s;
  }
  
  .contact-link:hover{
    color:var(--accent);
  }
  
  .contact-icon{
    width:16px;
    height:16px;
    opacity:.9;
  }

  /* ===========================
   BOTÓN WHATSAPP FLOTANTE
=========================== */

.wa-float{
  position: fixed;
  bottom: 60px;
  right: 60px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: all 0.3s ease;
  animation: wa-pulse 2s infinite;
}

.wa-float:hover{
  transform: scale(1.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  animation: none;
}

.wa-icon{
  width: 30px;
  height: 30px;
}

/* animación tipo páginas profesionales */
@keyframes wa-pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(37,211,102,0.7);
  }
  70%{
    box-shadow: 0 0 0 15px rgba(37,211,102,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(37,211,102,0);
  }
}
  
  
  /* =========================
     UTILS
     ========================= */
  .m0{ margin:0 }
  .mb6{ margin-bottom:6px }
  .mb8{ margin-bottom:8px }
  .mb10{ margin-bottom:10px }
  .mt10{ margin-top:10px }
  .mt12{ margin-top:12px }
  .muted{ color:var(--muted) }
  
  
  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width: 920px){
    .grid{ grid-template-columns: 1fr; }
    .why{ grid-template-columns: 1fr; }
    .split{ grid-template-columns: 1fr; }
    nav ul{ display:none; }
    .burger{ display:inline-flex; }
    .media-card--full img{ min-height: 200px; }
    .foot{ grid-template-columns: 1fr; }
  }