/* =========================
   Reset & Base
   ========================= */
   *{ margin:0; padding:0; box-sizing:border-box; }

   :root{
     --mv-blue:#3399FF;
     --mv-blue-dark:#2980E6;
     --mv-ease:cubic-bezier(0.4,0,0.2,1);
   }
   
   body{
     font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background:#fff;
     min-height:100vh;
     position:relative;
     overflow-x:hidden;
   }
   
   /* =========================
      Keyframes (únicas)
      ========================= */
   @keyframes fadeInUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
   @keyframes expandLine{ from{opacity:1;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
   @keyframes slideInLeft{ from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:translateX(0)} }
   @keyframes slideInRight{ from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
   @keyframes floatIn{ from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
   @keyframes logoPulse{ 0%{transform:scale(1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))} 50%{transform:scale(1.1);filter:drop-shadow(0 8px 16px rgba(51,153,255,.4))} 100%{transform:scale(1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))} }
   @keyframes scaleIn{ from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
   @keyframes circleIn{ from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
   @keyframes bubbleIn{ from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
   @keyframes dotFloat{ 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:.6;transform:translateY(-10px)} }
   @keyframes scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
   @keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
   @keyframes badgeIn{ from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }
   @keyframes ripple{ to{ transform:scale(6); opacity:0; } }
   
   /* =========================
      Header
      ========================= */
   .header{
     background:#fff;
     border-radius:0 0 20px 20px;
     box-shadow:0 2px 10px rgba(0,0,0,.1);
     position:sticky; top:0; z-index:100;
   }
   .header-content{
     max-width:1200px; margin:0 auto; padding:15px 30px;
     display:flex; justify-content:space-between; align-items:center;
   }
   .header .logo-container{ display:flex; align-items:center; gap:12px; }
   .header .logo-link{ display:flex; align-items:center; gap:12px; text-decoration:none; transition:all .3s ease; }
   .header .logo-link:hover{ transform:scale(1.05); }
   .header .logo{ height:40px; width:auto; }
   .header .brand{ font-weight:600; color:#333; font-size:18px; }
   .nav{ display:flex; align-items:center; gap:30px; }
   .nav-link{ text-decoration:none; color:#333; font-weight:500; transition:color .3s ease; }
   .nav-link:hover{ color:#3399FF; }
   .contact-btn{
     background:#3399FF; color:#fff; padding:12px 24px; border-radius:25px; text-decoration:none; font-weight:600; transition:all .3s ease;
   }
   .contact-btn:hover{ background:#2980E6; transform:translateY(-2px); }
   
   /* =========================
      Hero
      ========================= */
   .main-content{
     position:relative; width:100%; padding:100px 30px 120px; text-align:center; overflow:hidden;
   }
   .main-content::before{
     content:""; position:absolute; left:50%; top:-100px; width:100vw; height:calc(100% + 100px);
     transform:translateX(-50%); z-index:-1;
     background:
       radial-gradient(1200px 800px at 50% 120%, rgba(66,176,255,.55) 0%, rgba(66,176,255,0) 60%),
       linear-gradient(180deg, rgba(240,244,247,.95) 0%, rgba(238,246,253,.7) 45%, rgba(66,176,255,.25) 100%),
       radial-gradient(circle, rgba(255,255,255,.8) 1.1px, transparent 1.1px);
     background-size:100% 100%, 100% 100%, 22px 22px;
     background-repeat:no-repeat, no-repeat, repeat;
   }
   .content-container{ max-width:1200px; margin:0 auto; }
   
   .tag{
     display:inline-flex; align-items:center; gap:10px; background:#fff; padding:12px 20px; border-radius:25px;
     box-shadow:0 4px 15px rgba(0,0,0,.1); margin-bottom:30px; opacity:0; transform:translateY(20px);
     animation:fadeInUp .8s ease forwards;
   }
   .tag-logo{ height:24px; width:auto; }
   .tag span{ color:#333; font-weight:600; font-size:14px; }
   
   .headline-container{ margin-bottom:24px; }
   .main-headline{ margin-bottom:16px; }
   .headline-image{ display:block; max-width:100%; height:auto; margin-bottom:10px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .2s forwards; }
   .headline-with{ display:block; font-size:2rem; color:#333; font-weight:400; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .4s forwards; }
   
   .cowin-container{ display:flex; align-items:center; justify-content:center; gap:20px; margin:30px 0; opacity:0; transform:translateY(30px); visibility:hidden; }
   .cowin-btn{ background:#3399FF; color:#fff; padding:15px 25px; border-radius:30px; font-weight:700; font-size:1.2rem; position:relative; transition:.3s; cursor:pointer; }
   .cowin-btn:hover{ background:#2980E6; transform:scale(1.05); }
   .arrow-left,.arrow-right{ position:absolute; top:50%; width:0; height:0; border:8px solid transparent; }
   .arrow-left{ right:-15px; border-left-color:#3399FF; transform:translateY(-50%); }
   .arrow-right{ left:-15px; border-right-color:#3399FF; transform:translateY(-50%); }
   .cowin-main{ position:relative; }
   .cowin-logo{ height:80px; width:auto; filter:drop-shadow(0 4px 8px rgba(0,0,0,.2)); transition:.3s; }
   .cowin-logo:hover{ transform:scale(1.1); }
   
   .description{
     font-size:1.1rem; color:#666; line-height:1.6; max-width:760px; margin:0 auto;
     opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease 1.2s forwards;
   }
   
   /* =========================
      Bottom Cards
      ========================= */
   .bottom-cards{
     max-width:1200px; margin:48px auto 0;
     display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch; padding:0 10px;
   }
   .bottom-cards .card{ background:#fff; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.12); padding:22px 24px; }
   
   .badge-card{ display:flex; align-items:center; gap:14px; }
   .badge-card .card-icon{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#E8F3FF; box-shadow: inset 0 2px 0 rgba(255,255,255,.7); }
   .badge-card .card-content h3{ margin:0 0 6px 0; font-size:1.15rem; font-weight:800; color:#111; text-align:left; }
   .badge-card .card-content p{ margin:0; font-size:.95rem; color:#6a6a6a; text-align:left; }
   
   .analytics-card{ border:1px solid rgba(0,0,0,.06); }
   .analytics-card .card-header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
   .analytics-card .card-header .card-icon{ width:38px; height:38px; border-radius:50%; background:#2F9EFF; color:#fff; display:grid; place-items:center; box-shadow:0 6px 14px rgba(47,158,255,.35); }
   .analytics-card .card-header span{ font-weight:700; font-size:1rem; color:#111; }
   .analytics-card .stat-row{ display:flex; justify-content:space-between; align-items:center; margin:10px 0 12px; }
   .analytics-card .stat-row span{ color:#333; font-weight:600; }
   .analytics-card .progress-bar{ width:100%; height:26px; border-radius:999px; background:linear-gradient(#F4F6F8,#F0F2F4); box-shadow: inset 0 2px 6px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9); overflow:hidden; position:relative; }
   .analytics-card .progress-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#52B3FF,#3399FF); box-shadow: inset 0 -2px 6px rgba(0,0,0,.15); position:relative; transition:width 1s ease; }
   .analytics-card .progress-text{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#fff; font-weight:800; font-size:.9rem; letter-spacing:.02em; }
   
   /* =========================
      Services Section
      ========================= */
   .services-section{ background:#fff; padding:80px 30px; position:relative; overflow:hidden; }
   .services-container{ max-width:1200px; margin:0 auto; }
   .top-line{ width:100%; height:2px; background:linear-gradient(90deg,#E3F2FD 0%,#3399FF 50%,#E3F2FD 100%); margin-bottom:60px; opacity:0; transform:scaleX(0); animation:expandLine 1s ease .5s forwards; }
   .services-headline{ text-align:center; margin-bottom:80px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .8s forwards; }
   .services-headline h2{ font-size:3rem; font-weight:700; color:#333; margin:0; }
   .cowin-highlight{ color:#3399FF; }
   .services-content{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
   
   .services-left{ opacity:0; transform:translateX(-50px); animation:slideInLeft .8s ease 1.2s forwards; }
   .services-badge{ display:inline-flex; align-items:center; gap:10px; border:2px solid #333; border-radius:25px; padding:12px 20px; margin-bottom:30px; }
   .badge-logo{ height:20px; width:auto; }
   .services-badge span{ color:#3399FF; font-weight:600; font-size:14px; }
   .services-text h3{ font-size:2.5rem; font-weight:700; color:#333; margin:0 0 10px 0; }
   .services-text h4{ font-size:3.5rem; font-weight:700; color:#3399FF; margin:0; }
   
   .services-right{ position:relative; opacity:0; transform:translateX(50px); animation:slideInRight .8s ease 1.4s forwards; }
   .service-cards{ display:flex; flex-direction:column; gap:20px; }
   
   .service-card{ 
     background:#F8F9FA; 
     border-radius:15px; 
     box-shadow:0 4px 15px rgba(0,0,0,.1); 
     transition:all .3s ease; 
     opacity:0; 
     transform:translateY(30px); 
     overflow:hidden; 
     cursor:pointer; 
     border:1px solid transparent;
   }
   .service-card:nth-child(1){ animation:fadeInUp .8s ease 1.6s forwards; }
   .service-card:nth-child(2){ animation:fadeInUp .8s ease 1.8s forwards; }
   .service-card:nth-child(3){ animation:fadeInUp .8s ease 2s forwards; }
   .service-card:hover{ 
     transform:translateY(-5px); 
     box-shadow:0 8px 25px rgba(0,0,0,.15); 
     border-color:rgba(51,153,255,.2);
   }
   .service-card.expanded{ 
     background:#fff; 
     box-shadow:0 8px 25px rgba(0,0,0,.15); 
     border-color:rgba(51,153,255,.3);
   }
   
   .card-header{ 
     padding:25px; 
     display:flex; 
     justify-content:space-between; 
     align-items:center; 
     transition:all .3s ease; 
   }
   .card-content span{ 
     font-size:1.1rem; 
     font-weight:600; 
     color:#333; 
     line-height:1.4;
     word-wrap: break-word;
     hyphens: auto;
   }
   
   .card-button{ 
     width:40px; 
     height:40px; 
     background:#3399FF; 
     border-radius:50%; 
     display:flex; 
     align-items:center; 
     justify-content:center; 
     cursor:pointer; 
     transition:all .3s ease; 
     flex-shrink:0; 
     border:none;
     position:relative;
   }
   .card-button:hover{ 
     background:#2980E6; 
     transform:scale(1.1); 
   }
   .card-button:focus-visible{ 
     outline:2px solid #fff; 
     outline-offset:2px; 
   }
   .card-button svg{ 
     transition:transform .3s ease; 
   }
   .service-card.expanded .card-button{ 
     background:#2980E6; 
   }
   .service-card.expanded .card-button svg{ 
     transform:rotate(180deg); 
   }
   
   /* Panel colapsable base */
   .card-expandable{
     max-height: 0;
     overflow: hidden;
     padding: 0 25px;           /* padding lateral fijo */
     background: #F8F9FA;
     transition: max-height .4s ease, padding-top .3s ease, padding-bottom .3s ease;
     will-change: max-height;
     box-sizing: border-box;
   }

   /* Cuando está abierto, solo agregamos padding vertical (la altura la maneja JS) */
   .card-expandable.open{
     padding-top: 15px;
     padding-bottom: 25px;
   }

   /* Contenido interno */
   .card-description{
     border-top: 1px solid #E0E0E0;
   }

   .card-description p{
     margin: 0;
     color: #666;
     line-height: 1.6;
     font-size: .95rem;
     overflow-wrap: anywhere;   /* mejora cortes largos en iOS */
   }

   /* Botón: mejora tap en iOS */
   .card-button{
     -webkit-tap-highlight-color: transparent;
   }

   /* Accesibilidad: respeta reduced motion */
   @media (prefers-reduced-motion: reduce){
     .card-expandable{ transition: none; }
   }
   
   /* Floating elements */
   .floating-elements{ position:absolute; inset:0; pointer-events:none; z-index:-1; }
   .floating-circle{ position:absolute; border-radius:50%; background:rgba(51,153,255,.1); backdrop-filter:blur(10px); opacity:0; animation:floatIn 1s ease forwards; }
   .circle-1{ width:80px; height:80px; top:-20px; right:20px; animation-delay:2.2s; }
   .circle-2{ width:60px; height:60px; top:80px; right:-10px; animation-delay:2.4s; }
   .circle-3{ width:100px; height:100px; bottom:100px; right:30px; animation-delay:2.6s; }
   .circle-4{ width:70px; height:70px; bottom:-20px; right:60px; animation-delay:2.8s; }
   
   /* =========================
      Companies Section
      ========================= */
   .companies-section{ background:#fff; padding:80px 30px; position:relative; overflow:hidden; }
   .companies-container{ max-width:1200px; margin:0 auto; text-align:center; }
   .quote-box{ background:#F5F5F5; border-radius:15px; padding:20px 30px; margin:0 auto 60px; max-width:600px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .5s forwards; }
   .quote-box p{ margin:0; color:#666; font-style:italic; font-size:1.1rem; line-height:1.5; }
   .companies-heading{ margin-bottom:60px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .8s forwards; }
   .companies-heading h2{ font-size:3rem; font-weight:700; color:#333; margin:0; }
   
   .carousel-container{ position:relative; overflow:hidden; margin:0 auto; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease 1.1s forwards; }
   .carousel-track{ display:flex; animation:scroll 20s linear infinite; gap:40px; align-items:center; }
   .carousel-slide{ flex:0 0 auto; display:flex; justify-content:center; align-items:center; }
   .company-logo{ display:flex; align-items:center; justify-content:center; padding:20px 30px; background:#fff; border-radius:15px; box-shadow:0 4px 15px rgba(0,0,0,.1); transition:all .3s ease; min-width:200px; height:80px; }
   .company-logo:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,.15); }
   .company-image{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(20%); transition:all .3s ease; }
   .company-logo:hover .company-image{ filter:grayscale(0%); transform:scale(1.05); }
   .carousel-container:hover .carousel-track{ animation-play-state:paused; }
   
   /* =========================
      Why Different
      ========================= */
   .why-different-section{ background:#F5F9F7; padding:80px 30px 0 30px; position:relative; overflow:hidden; }
   .why-different-section::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(0,0,0,.05) 1px, transparent 1px); background-size:20px 20px; pointer-events:none; z-index:0; }
   .why-different-container{ max-width:1200px; margin:0 auto; text-align:center; position:relative; z-index:1; }
   .section-badge{ display:inline-flex; align-items:center; gap:10px; background:#E3F2FD; border-radius:25px; padding:12px 20px; margin-bottom:30px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .5s forwards; }
   .section-badge .badge-logo{ height:20px; width:auto; }
   .section-badge span{ color:#3399FF; font-weight:600; font-size:14px; }
   .section-heading{ margin-bottom:60px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .8s forwards; }
   .section-heading h2{ font-size:3rem; font-weight:700; color:#333; margin:0; }
   .section-heading .highlight{ color:#3399FF; }
   
   .why-content-grid {
     display:grid;
     grid-template-columns:1fr minmax(260px,320px) 1fr;
     gap:40px;
     align-items:start; 
     max-width:1200px;
     margin:0 auto;
     position:relative;
     min-height:500px;
     padding-bottom: 80px;
   }

   .why-center {
     display:flex;
     justify-content:center;
     align-items:flex-end;   
     position:relative;
     height: 118%;
     min-height: 320px;
   }
  
  .why-center-phone {
    position:relative;
    margin:0;
    z-index:100;
    opacity:0;
    animation:scaleIn .8s ease 1.1s forwards;
  }
  
   .why-left,.why-right{ display:flex; flex-direction:column; gap:30px; justify-content:space-between; }
   .why-phone-image{ width:auto; height:280px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.2)); transition:transform .3s ease, filter .3s ease; }
   .why-phone-image:hover{ transform:scale(1.05); filter:drop-shadow(0 15px 40px rgba(0,0,0,.3)); }
   
   .why-card{ background:#fff; border-radius:15px; padding:25px; box-shadow:0 4px 15px rgba(0,0,0,.1); transition:all .3s ease; opacity:0; transform:translateY(30px); text-align:left; flex:1; display:flex; flex-direction:column; }
   .why-left .why-card:nth-child(1), .why-right .why-card:nth-child(1){ animation:fadeInUp .8s ease 1.4s forwards; }
   .why-left .why-card:nth-child(2), .why-right .why-card:nth-child(2){ animation:fadeInUp .8s ease 1.6s forwards; }
   .why-card:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,.15); }
   .why-card .card-icon{ margin-bottom:15px; }
   .why-card-content h3{ font-size:1.3rem; font-weight:700; color:#333; margin:0 0 15px; }
   .why-card-content p{ color:#666; line-height:1.6; margin:0; font-size:.95rem; flex:1; }
   
   /* =========================
      Mission / Vision / About
      ========================= */
   .mission-vision-section{ background:#fff; padding:80px 30px; position:relative; overflow:hidden; }
   .mission-vision-container{ max-width:1200px; margin:0 auto; }
   
   .main-title-container{ text-align:center; margin-bottom:80px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .5s forwards; }
   .main-title{ margin:0; line-height:1.1; }
   .title-line-1{ display:block; font-size:3.5rem; font-weight:700; color:#333; margin-bottom:10px; }
   .title-line-2{ display:block; font-size:3.5rem; font-weight:700; color:var(--mv-blue); margin-left:20px; }
   
   .mission-vision-content{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
   .mv-left{ display:flex; flex-direction:column; gap:40px; opacity:0; transform:translateX(-50px); animation:slideInLeft .8s ease .8s forwards; }
   
   .mission-card,.vision-card{
     background:#fff; border-radius:20px; padding:30px; box-shadow:0 8px 25px rgba(0,0,0,.1);
     position:relative; transition:transform .4s var(--mv-ease), box-shadow .4s var(--mv-ease);
     z-index:0; isolation:isolate;
   }
   .mission-card:hover,.vision-card:hover{ transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,.15); }
   
   /* Glow decorativo */
   .mission-card::before,.vision-card::before{
     content:""; position:absolute; width:140px; height:140px; border-radius:50%; z-index:-1;
     background:radial-gradient(circle at 50% 50%, rgba(51,153,255,.45) 0%, rgba(51,153,255,.25) 45%, rgba(51,153,255,0) 70%);
     filter:blur(1px);
   }
   .mission-card::before{ right:-28px; top:-24px; }
   .vision-card::before{ right:48px; bottom:-36px; }
   
   /* Contenedor animable + morph */
   .mv-card-content{ position:relative; background:#fff; border-radius:999px; padding:16px 45px 16px 18px; box-shadow:0 10px 26px rgba(0,0,0,.12); overflow:hidden; transition:border-radius .35s var(--mv-ease), box-shadow .35s var(--mv-ease), background .35s var(--mv-ease), max-height .4s ease, padding .4s ease; max-height:0; }
   .mv-card-content::after{ content:""; position:absolute; width:120px; height:120px; right:-28px; top:-28px; border-radius:50%; z-index:-1; background:radial-gradient(circle, rgba(51,153,255,.35), rgba(51,153,255,0) 60%); transition:opacity .3s ease; }
   
   /* Contenido de las cartas */
   .mv-card-inner{ 
     height:auto; 
     transition:height .45s var(--mv-ease); 
     will-change:height; 
     overflow:visible;
   }
   
   .card-text-short{ 
     font-weight:500; 
     color:#222; 
     margin:0; 
     transition:opacity .35s var(--mv-ease), transform .35s var(--mv-ease); 
     will-change:opacity, transform; 
   }
   
   .card-text-full{ 
     color:#666; 
     line-height:1.6; 
     font-size:1rem; 
     margin:0; 
     opacity:0; 
     transform:translateY(10px); 
     max-height:0; 
     overflow:hidden; 
     transition:opacity .35s var(--mv-ease), transform .35s var(--mv-ease), max-height .45s var(--mv-ease), margin .35s var(--mv-ease); 
     will-change:opacity, transform, max-height; 
   }
   
   /* Estados de las cartas */
    .mission-card[data-state="collapsed"] .mv-card-content,
    .vision-card[data-state="collapsed"] .mv-card-content{
      max-height: var(--mv-collapsed-h);
      min-height: var(--mv-collapsed-h);
      padding: 14px 45px 14px 18px;     /* pill alto parejito */
      display: flex;
      align-items: center;               /* centra vertical */
    }
   .mission-card[data-state="expanded"] .mv-card-content,
   .vision-card[data-state="expanded"] .mv-card-content{ 
     border-radius:16px; 
     box-shadow:0 8px 20px rgba(0,0,0,.1); 
     max-height:500px; 
     padding:16px 45px 25px 18px;
     align-items: flex-start;
   }
   
   .mission-card[data-state="expanded"] .mv-card-content::after,
   .vision-card[data-state="expanded"] .mv-card-content::after{ 
     opacity:0; 
   }
   
   .mission-card[data-state="expanded"] .card-text-short,
   .vision-card[data-state="expanded"] .card-text-short{ 
     opacity:0; 
     transform:translateY(-8px); 
   }
   
   .mission-card[data-state="expanded"] .card-text-full,
   .vision-card[data-state="expanded"] .card-text-full{ 
     opacity:1; 
     transform:translateY(0); 
     max-height:500px; 
     margin-top:10px; 
   }
   
   /* Botón */
   .mv-card-button{
     position:absolute; right:10px; top:50%; transform:translateY(-50%);
     width:40px; height:40px; border:0; border-radius:50%; background:var(--mv-blue); color:#fff;
     display:grid; place-items:center; box-shadow:0 6px 16px rgba(51,153,255,.4);
     cursor:pointer; transition:background .3s var(--mv-ease), box-shadow .3s var(--mv-ease), transform .2s var(--mv-ease); overflow:hidden;
   }
   .mv-card-button:hover{ background:var(--mv-blue-dark); transform:translateY(-50%) scale(1.06); box-shadow:0 8px 20px rgba(51,153,255,.5); }
   .mv-card-button svg{ transition:transform .28s var(--mv-ease); }
   .mission-card[data-state="expanded"] .mv-card-button svg,
   .vision-card[data-state="expanded"] .mv-card-button svg{ transform:rotate(180deg); }
   
   .mv-right{ position:relative; opacity:0; transform:translateX(50px); animation:slideInRight .8s ease 1s forwards; }
   
   /* Quienes Somos (pill) */
   .quienes-somos-btn{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:2px solid #E3F2FD; border-radius:25px; padding:8px 16px; margin-bottom:30px; cursor:pointer; transition:border-color .3s ease, transform .3s ease; }
   .quienes-somos-btn:hover{ border-color:#3399FF; transform:translateY(-2px); }
   .btn-text{ color:#3399FF; font-weight:600; font-size:14px; }
   
   .about-title{ margin-bottom:40px; }
   .about-title h2{ margin:0; line-height:1.1; }
   .about-title .title-line-1{ display:block; font-size:2.5rem; font-weight:700; color:#333; margin-bottom:10px; }
   .about-title .title-line-2{ display:block; font-size:2.5rem; font-weight:700; color:#3399FF; }
   
   /* Headset + hexágono */
   .headset-container{ position:relative; display:flex; justify-content:center; align-items:center; }
   .headset-background{ padding:36px; position:relative; z-index:1; }
   .hexagon-shape{ width:320px; aspect-ratio:1; background:#F5F7FA; clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); border-radius:14px; box-shadow:0 22px 40px rgba(0,0,0,.12), 0 2px 0 rgba(255,255,255,.8) inset; display:grid; place-items:center; }
   .headset-image{ max-width:72%; height:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18)); transition:transform .3s ease; }
   .headset-image:hover{ transform:scale(1.04); }
   .decorative-dots{ position:absolute; inset:0; pointer-events:none; z-index:0; }
   .dot{ position:absolute; border-radius:50%; background:rgba(51,153,255,.3); opacity:.3; animation:dotFloat 2s ease-in-out infinite; }
   .dot-1{ width:20px; height:20px; top:20px; left:20px; animation-delay:0s; }
   .dot-2{ width:15px; height:15px; bottom:30px; left:30px; animation-delay:.5s; }
   .dot-3{ width:25px; height:25px; bottom:20px; right:20px; animation-delay:1s; }
   
   /* =========================
      Benefits
      ========================= */
   .benefits-section{ background:#F5F9F7; padding:80px 30px; position:relative; overflow:hidden; }
   .benefits-section::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(0,0,0,.05) 1px, transparent 1px); background-size:20px 20px; pointer-events:none; z-index:0; }
   .benefits-container{ max-width:1200px; margin:0 auto; text-align:center; position:relative; z-index:1; }
   .benefits-badge{ display:inline-flex; align-items:center; gap:10px; border:2px solid #333; border-radius:25px; padding:12px 20px; margin-bottom:30px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .5s forwards; }
   .benefits-badge .badge-logo{ height:20px; width:auto; }
   .benefits-badge span{ color:#3399FF; font-weight:600; font-size:14px; }
   .benefits-title{ margin-bottom:60px; opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease .8s forwards; }
   .benefits-title h2{ margin:0; line-height:1.1; }
   .benefits-title .title-line-1{ display:block; font-size:3rem; font-weight:700; color:#333; margin-bottom:10px; }
   .benefits-title .title-line-2{ display:block; font-size:3rem; font-weight:700; color:#3399FF; }
   
   .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; max-width:1000px; margin:0 auto; }
   .benefit-card{ background:#fff; border-radius:20px; padding:40px 30px; box-shadow:0 8px 25px rgba(0,0,0,.1); text-align:left; transition:all .3s ease; opacity:0; transform:translateY(30px); position:relative; overflow:hidden; }
   .benefit-card:nth-child(1){ animation:fadeInUp .8s ease 1.1s forwards; }
   .benefit-card:nth-child(2){ animation:fadeInUp .8s ease 1.3s forwards; }
   .benefit-card:nth-child(3){ animation:fadeInUp .8s ease 1.5s forwards; }
   .benefit-card:nth-child(4){ animation:fadeInUp .8s ease 1.7s forwards; }
   .benefit-card:hover{ transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.15); }
   .benefit-icon{ width:60px; height:60px; background:#3399FF; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:25px; transition:all .3s ease; }
   .benefit-card:hover .benefit-icon{ background:#2980E6; transform:scale(1.1); }
   .benefit-icon svg{ transition:all .3s ease; }
   .benefit-card:hover .benefit-icon svg{ transform:rotate(5deg); }
   .benefit-card h3{ font-size:1.4rem; font-weight:700; color:#333; margin:0 0 15px; line-height:1.3; }
   .benefit-card p{ color:#666; line-height:1.6; margin:0; font-size:1rem; }
   .benefit-card::before{ content:''; position:absolute; top:-50%; right:-50%; width:100%; height:100%; background:radial-gradient(circle, rgba(51,153,255,.05) 0%, transparent 70%); opacity:0; transition:opacity .3s ease; }
   .benefit-card:hover::before{ opacity:1; }
   
   /* =========================
      Contact Section
      ========================= */
   .contact-section{ background:#fff; padding:80px 30px; position:relative; overflow:hidden; }
   .contact-container{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; min-height:600px; }
   .contact-left{ opacity:0; transform:translateX(-50px); animation:slideInLeft .8s ease .5s forwards; }
   
   .contact-badge{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #CFE8FF; border-radius:999px; padding:10px 16px; margin-bottom:28px; box-shadow:0 2px 0 rgba(255,255,255,.7) inset; }
   .contact-badge .badge-logo{ height:18px; width:auto; filter:none; }
   .contact-badge span{ color:#3399FF; font-weight:600; font-size:14px; }
   
   .contact-title{ margin-bottom:28px; }
   .contact-title h1{ margin:0; line-height:1.02; }
   .contact-title .title-line-1,.contact-title .title-line-2,.contact-title .title-line-3{ display:block; font-size:4.2rem; font-weight:800; color:#111; letter-spacing:-.02em; }
   .contact-title .title-highlight{ color:#3399FF; }
   
   .contact-button-container{ opacity:0; transform:translateY(20px); animation:fadeInUp .8s ease 1s forwards; }
   .contact-button{ background:#3399FF; color:#fff; border:none; border-radius:16px; padding:18px 32px; font-size:1.15rem; font-weight:700; cursor:pointer; box-shadow:0 10px 28px rgba(51,153,255,.35); transition:transform .25s ease, box-shadow .25s ease, background .25s ease; text-decoration:none; display:inline-block; }
   .contact-button:hover{ background:#2980E6; transform:translateY(-2px); box-shadow:0 14px 36px rgba(51,153,255,.45); }
   
   .contact-right{ position:relative; display:flex; justify-content:center; align-items:center; opacity:0; transform:translateX(50px); animation:slideInRight .8s ease .7s forwards; }
   .circles-container{ position:relative; width:520px; height:520px; display:flex; justify-content:center; align-items:center; }
   .circle-fill{ position:absolute; border-radius:50%; opacity:0; animation:circleIn .8s ease forwards; background:#3399FF; }
   .c3{ width:520px; height:520px; background:rgba(51,153,255,.10); animation-delay:.8s; }
   .c2{ width:360px; height:360px; background:rgba(51,153,255,.18); animation-delay:1s; }
   .c1{ width:240px; height:240px; background:rgba(51,153,255,.30); animation-delay:1.2s; }
   
   .bubble{ position:absolute; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,.35) 0 40%, rgba(0,0,0,0) 41%), #42B0FF; box-shadow:0 10px 18px rgba(66,176,255,.35); opacity:0; animation:bubbleIn .6s ease forwards, floatY 4s ease-in-out infinite; }
   .b1{ top:110px; left:145px; animation-delay:1.6s; }
   .b2{ right:0; top:240px; transform:translateX(40px); animation-delay:1.8s; }
   .b3{ bottom:65px; left:210px; animation-delay:2s; }
   
   /* Evitar colisión con header: scope del logo en esta sección */
   .contact-right .logo-container{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
   .logo-background{ width:150px; height:150px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.12); transform:translateZ(0); }
   .central-logo{ width:86px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
   
   .cowin-badge{ position:absolute; right:72px; bottom:96px; background:#3399FF; color:#fff; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:8px; z-index:3; opacity:0; animation:badgeIn .7s ease 2.4s forwards; }
   .cowin-badge::before{ content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:10px solid transparent; border-right:10px solid #3399FF; border-top:8px solid transparent; border-bottom:8px solid transparent; }
   
   /* =========================
      Footer
      ========================= */
   .footer{ background:#F8F9FA; padding:60px 30px 40px; border-top:1px solid #E9ECEF; }
   .footer-container{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; align-items:start; }
   .footer-column{ display:flex; flex-direction:column; }
   .footer-logo-container{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
   .footer-logo-icon{ width:60px; height:60px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
   .footer-logo-img{ width:70px; height:auto; }
   .footer-logo-text{ font-size:1.5rem; font-weight:700; color:#333; }
   .footer-description{ color:#666; line-height:1.6; font-size:.95rem; margin:0; }
   .footer-title{ font-size:1.1rem; font-weight:700; color:#333; margin:0 0 20px; }
   .footer-links{ list-style:none; padding:0; margin:0; }
   .footer-links li{ margin-bottom:12px; }
   .footer-link{ color:#666; text-decoration:none; font-size:.95rem; transition:color .3s ease; }
   .footer-link:hover{ color:#3399FF; }
   
   .newsletter-form{ margin-top:10px; }
   .newsletter-input-group{ display:flex; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.1); border:1px solid #E9ECEF; }
   .newsletter-input{ flex:1; padding:12px 16px; border:0; outline:0; font-size:.95rem; color:#333; background:transparent; }
   .newsletter-input::placeholder{ color:#999; }
   .newsletter-button{ background:#3399FF; color:#fff; border:0; padding:12px 20px; font-size:.95rem; font-weight:600; cursor:pointer; transition:background .3s ease; white-space:nowrap; }
   .newsletter-button:hover{ background:#2980E6; }
   
   /* =========================
      Responsive
      ========================= */
   @media (max-width: 992px){
     .description{ max-width:680px; }
     .bottom-cards{ gap:28px; }
     .contact-title .title-line-1,
     .contact-title .title-line-2,
     .contact-title .title-line-3{ font-size:3.4rem; }
     .circles-container{ width:460px; height:460px; }
     .c3{ width:460px; height:460px; } .c2{ width:320px; height:320px; } .c1{ width:220px; height:220px; }
     .cowin-badge{ right:56px; bottom:84px; }
     .footer-container{ grid-template-columns:1fr 1fr; gap:30px; }
     .footer-newsletter{ grid-column:1 / -1; margin-top:20px; }
   }
   
   @media (max-width: 768px){
     .header-content{ padding:15px 20px; flex-direction:column; gap:15px; }
     .nav{ gap:20px; }
     .headline-with{ font-size:1.5rem; }
     .cowin-container{ flex-direction:column; gap:15px; }
     .arrow-left,.arrow-right{ display:none; }
     .cowin-logo{ height:60px; }
   
     .main-content{ padding:80px 16px 80px; }
     .main-content::before{ width:100vw; top:-80px; height:calc(100% + 80px); }
   
     .bottom-cards{ grid-template-columns:1fr; gap:20px; padding:0; }
   
     .services-section{ padding:60px 20px; }
     .services-headline h2{ font-size:2.2rem; }
     .services-content{ grid-template-columns:1fr; gap:50px; }
     .services-text h3{ font-size:2rem; }
     .services-text h4{ font-size:2.8rem; }
     .service-card{ padding:20px; }
     .card-content span{ 
       font-size:1rem; 
       line-height:1.3;
       word-wrap: break-word;
       hyphens: auto;
     }
     .floating-circle{ display:none; }
     .card-header{ 
       padding:20px; 
       flex-wrap: wrap;
       gap: 15px;
     }
     .card-description p{ 
       font-size:.9rem; 
       line-height:1.5;
     }
     .card-button{ 
       width:36px; 
       height:36px; 
       flex-shrink: 0;
     }
     .card-button svg{ width:18px; height:18px; }
   
     .companies-section{ padding:60px 20px; }
     .companies-heading h2{ font-size:2.2rem; }
     .company-logo{ min-width:150px; padding:15px 20px; height:60px; }
     .company-image{ max-height:40px; }
   
     .why-different-section{ padding:60px 20px; }
     .why-content-grid{ grid-template-columns:1fr; gap:40px; text-align:center; min-height:auto; }
     .why-left,.why-right{ order:2; justify-content:flex-start; }
     .why-center{ order:1; }
     .why-center-phone{ margin:20px 0; }
     .why-phone-image{ max-width:200px; }
     .why-card{ text-align:center; padding:20px; }
     .why-card-content h3{ font-size:1.2rem; }
     .why-card-content p{ font-size:.9rem; }
   
     .mission-vision-section{ padding:60px 20px; }
     .main-title-container{ margin-bottom:60px; }
     .title-line-1,.title-line-2{ font-size:2.5rem; }
     .mission-vision-content{ grid-template-columns:1fr; gap:50px; }
     .mv-left{ order:2; } .mv-right{ order:1; }
     .mission-card,.vision-card{ padding:25px; }
     .about-title .title-line-1,.about-title .title-line-2{ font-size:2rem; }
     .headset-background{ padding:30px; }
     .hexagon-shape{ width:240px; }
     .headset-image{ max-width:74%; }
   
     .contact-section{ padding:60px 20px; }
     .contact-container{ grid-template-columns:1fr; gap:48px; text-align:center; }
     .contact-left{ order:2; }
     .contact-right{ order:1; }
     .contact-title .title-line-1,.contact-title .title-line-2,.contact-title .title-line-3{ font-size:2.6rem; }
     .circles-container{ width:340px; height:340px; }
     .c3{ width:340px; height:340px; } .c2{ width:240px; height:240px; } .c1{ width:170px; height:170px; }
     .logo-background{ width:120px; height:120px; }
     .central-logo{ width:68px; }
     .cowin-badge{ right:44px; bottom:64px; }
   
     .footer{ padding:40px 20px 30px; }
     .footer-container{ grid-template-columns:1fr; gap:30px; text-align:center; }
     .footer-logo-container{ justify-content:center; }
     .newsletter-input-group{ max-width:400px; margin:0 auto; }
   }
   
   @media (max-width:480px){
     .main-content{ padding:40px 20px; }
     .headline-with{ font-size:2rem; }
     .description{ font-size:1rem; }
     .cowin-btn{ padding:12px 20px; font-size:1rem; }
     
     .services-section{ padding:40px 15px; }
     .services-headline h2{ font-size:1.8rem; }
     .services-text h3{ font-size:1.6rem; }
     .services-text h4{ font-size:2.2rem; }
     .service-card{ padding:15px; }
     .card-header{ 
       padding:15px; 
       flex-wrap: wrap;
       gap: 12px;
     }
     .card-content span{ 
       font-size:.9rem; 
       line-height:1.2;
       word-wrap: break-word;
       hyphens: auto;
     }
     .card-description p{ 
       font-size:.85rem; 
       line-height:1.4;
     }
     .card-button{ 
       width:32px; 
       height:32px; 
       flex-shrink: 0;
     }
     .card-button svg{ width:16px; height:16px; }
     
     .companies-section{ padding:40px 15px; }
     .companies-heading h2{ font-size:1.8rem; }
     .quote-box{ padding:12px 16px; margin-bottom:30px; }
     .quote-box p{ font-size:.9rem; }
     .company-logo{ min-width:120px; padding:12px 16px; height:50px; }
     .company-image{ max-height:30px; }
     
     .why-different-section{ padding:40px 15px; }
     .section-heading h2{ font-size:1.8rem; }
     .why-card{ padding:15px; }
     .why-card-content h3{ font-size:1.1rem; }
     .why-card-content p{ font-size:.85rem; }
     .why-phone-image{ max-width:160px; }
     
     .mission-vision-section{ padding:40px 15px; }
     .title-line-1,.title-line-2{ font-size:1.8rem; }
     .mission-vision-content{ gap:30px; }
     .mission-card,.vision-card{ padding:15px; }
     .mv-card-content{ padding:12px 40px 12px 14px; }
     .mv-card-button{ width:32px; height:32px; }
     .about-title .title-line-1,.about-title .title-line-2{ font-size:1.6rem; }
     .headset-background{ padding:15px; }
     .hexagon-shape{ width:160px; }
     .headset-image{ max-width:78%; }
     
     .benefits-section{ padding:40px 15px; }
     .benefits-title .title-line-1,.benefits-title .title-line-2{ font-size:1.6rem; }
     .benefits-grid{ gap:20px; }
     .benefit-card{ padding:20px 15px; }
     .benefit-icon{ width:45px; height:45px; margin-bottom:15px; }
     .benefit-card h3{ font-size:1.1rem; }
     .benefit-card p{ font-size:.85rem; }
     
     .contact-section{ padding:40px 15px; }
     .contact-title .title-line-1,.contact-title .title-line-2,.contact-title .title-line-3{ font-size:1.6rem; }
     .contact-button{ padding:14px 24px; font-size:1rem; }
     .circles-container{ width:240px; height:240px; }
     .c3{ width:240px; height:240px; }
     .c2{ width:170px; height:170px; }
     .c1{ width:120px; height:120px; }
     .logo-background{ width:80px; height:80px; }
     .central-logo{ width:45px; }
     .cowin-badge{ right:20px; bottom:35px; font-size:11px; padding:5px 10px; }
     
     .footer{ padding:25px 15px 20px; }
     .footer-container{ gap:20px; }
     .footer-logo-icon{ width:40px; height:40px; }
     .footer-logo-img{ width:30px; }
     .footer-logo-text{ font-size:1.1rem; }
     .footer-description{ font-size:.85rem; }
     .footer-title{ font-size:.95rem; }
     .footer-link{ font-size:.85rem; }
     .newsletter-input,.newsletter-button{ padding:8px 12px; font-size:.85rem; }
   }
   
   /* =========================
      Extra Small Screens (320px)
      ========================= */
   @media (max-width: 320px){
     .service-card{ padding:12px; }
     .card-header{ 
       padding:12px; 
       flex-direction: column;
       align-items: flex-start;
       gap: 10px;
     }
     .card-content{ 
       width: 100%;
       order: 1;
     }
     .card-content span{ 
       font-size:.85rem; 
       line-height:1.2;
       word-wrap: break-word;
       hyphens: auto;
     }
     .card-button{ 
       width:30px; 
       height:30px; 
       flex-shrink: 0;
       order: 2;
       align-self: flex-end;
     }
     .card-button svg{ width:14px; height:14px; }
     .card-description p{ 
       font-size:.8rem; 
       line-height:1.3;
     }
   }
   
   /* =========================
      Accesibilidad y optimizaciones
      ========================= */
   @media (prefers-reduced-motion: reduce){
     *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
   }
   
   /* Focus visible para navegación por teclado */
   .nav-link:focus-visible, .contact-btn:focus-visible, .footer-link:focus-visible{
     outline:2px solid #3399FF; outline-offset:2px; border-radius:4px;
   }
   
   .card-button:focus-visible, .mv-card-button:focus-visible, .contact-button:focus-visible{
     outline:2px solid #fff; outline-offset:2px;
   }
   
   /* Mejoras de contraste para texto */
   @media (prefers-contrast: high){
     .description, .card-description p, .benefit-card p, .why-card-content p{ color:#333; }
     .footer-description{ color:#444; }
   }
   
   /* Print styles */
   @media print{
     .header, .floating-elements, .decorative-dots, .carousel-track{ display:none; }
     .main-content, .services-section, .companies-section, .why-different-section, .mission-vision-section, .benefits-section, .contact-section{ padding:20px; }
     .service-card, .benefit-card, .why-card, .mission-card, .vision-card{ box-shadow:none; border:1px solid #ddd; }
   }