:root{--mc-primary:#2F7BBE;--mc-dark:#54575C;--mc-bg:#F4F7FB;--mc-bg-2:#FFFFFF;--mc-card:rgba(255,255,255,.88);--mc-border:rgba(47,123,190,.18)}
 
  body{
      background : #ffff;
      
  }
  .navbar-brand{font-weight:800; letter-spacing:.4px}
  .brand-mcwatt span:nth-child(1){color:var(--mc-dark)} .brand-mcwatt span:nth-child(2){color:var(--mc-primary)}
  .hero{position:relative; overflow:hidden; isolation:isolate}
  .hero:before{content:""; position:absolute; inset:-20%; background:radial-gradient(1200px 400px at 10% -10%, rgba(47,123,190,.25), transparent 60%),radial-gradient(1000px 400px at 90% -10%, rgba(47,123,190,.15), transparent 60%); z-index:-1; filter:blur(10px)}
  .glass{background:var(--mc-card); border:1px solid var(--mc-border); backdrop-filter:saturate(140%) blur(8px)}
  .btn-gradient{background:linear-gradient(90deg, var(--mc-primary), #4EA0FF); border:0} .btn-gradient:hover{filter:brightness(1.05)}
  .section-title{font-weight:800} .section-kicker{color:#8EA6C6; text-transform:uppercase; letter-spacing:.12em; font-size:.88rem}
  .card.mc{background:var(--mc-card); border:1px solid var(--mc-border)} .card.mc .bi{font-size:2rem}
  .project{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--mc-border)} .project img{width:100%; height:240px; object-fit:cover; display:block}
  .project .overlay{position:absolute; inset:0; display:grid; place-items:end start; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1) 60%, transparent); padding:1rem; opacity:0; transition:opacity .35s ease} .project:hover .overlay{opacity:1}
  .logo-pill{border:1px solid var(--mc-border); border-radius:999px; padding:.8rem 1.2rem; background:var(--mc-card)} .logos-track{display:flex; gap:1rem; animation:scroll 22s linear infinite} @keyframes scroll{to{transform:translateX(-50%)}}
  footer{border-top:1px solid var(--mc-border)}

  .brand-subtitle{
    font-family: "Montserrat", system-ui, sans-serif; /* tipo de letra */
    font-weight: 500;
    font-size:.40rem;
    letter-spacing:.12em;
    color: #8B8F94;
    line-height:1;
    margin-top:.10rem;
    text-transform:uppercase;
  }


  @media (max-width: 576px){
    .brand-subtitle{ display:none; }
  }


  body{
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
    /* ...tu background actual... */
  }
  .section-title{ font-weight:800; font-family:"Montserrat","Inter",system-ui,sans-serif }
  h1,h2,h3,h4,h5,.navbar-brand .fs-4{
    font-family:"Montserrat","Inter",system-ui,sans-serif;
    font-weight:800;
  }


  

  .brand-hero{ display:block; width:100%; margin:0 auto; text-align:center }
  .brand-video{ width:100%; display:block }
  .brand-video__el{
    display:block;
    width:100%;
    height:clamp(320px, 100vh, 960px); /* ajusta a gusto: +alto o -alto */
    object-fit:cover;                  /* mantiene ancho total sin bandas laterales */
    border:none; outline:0; box-shadow:none; border-radius:0;
    background:transparent;
  }
  .brand-strapline{
    font-family:"Montserrat",system-ui,sans-serif; font-weight:500;
    text-transform:uppercase; letter-spacing:.20em; color:#8B8F94;
    font-size:clamp(.48rem,1.2vw,.75rem);
    display:block; width:100%; max-width:1200px; margin:.35rem auto 0; text-align:center;
  }
  .brand-underline{
    height:4px; width:100%; max-width:1200px; margin:0 auto;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(47,123,190,.15), rgba(47,123,190,.7), rgba(47,123,190,.15));
  }




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



  :root{
    /* ...tus variables... */
    --nav-h: 64px; /* altura aprox. del navbar */
  }

  /* El hero sube y su padding evita que el texto se esconda bajo el nav */
  .hero{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-top: calc(-1 * var(--nav-h));
    padding-top: var(--nav-h);
  }


  @media (min-width: 992px){
    :root{ --nav-h: 72px; }
  }


  /* Estilo translúcido del navbar */
  .navbar.glass{
    background: rgba(255,255,255, .20) !important;   /* ← más claro */
    border-bottom: 1px solid rgba(47,123,190, .12) !important;
    backdrop-filter: saturate(140%) blur(10px) !important;
  }







  /* Hover/focus: sutil lift + color corporativo */
  .navbar .nav-link:hover,
  .navbar .nav-link:focus{
    color: var(--mc-primary);
    transform: translateY(-1px) scale(1.03);
  }



  /* Asegura que el contenedor del video pueda posicionar hijos */
  .brand-video{ width:100%; display:block; position:relative; }



  /* CTA overlay dentro del video */
  /* === CTA post-video (SUAVE) — reemplazo real del ctaDrop === */
  :root{
    --cta-in: .90s;                         /* duración de entrada */
    --cta-delay: .14s;                      /* escalonado entre botones */
    --cta-ease: cubic-bezier(.16,1,.3,1);   /* butter-smooth */
  }

  .cta-overlay{
    position:absolute;
    left:var(--cta-x, 50%);
    top:var(--cta-y, 78%);
    transform:translate(-50%,-50%);
    display:flex; gap:var(--cta-gap,.5rem); align-items:center; flex-wrap:wrap;
    opacity:0; visibility:hidden; pointer-events:none; z-index:2;
  }
  .cta-overlay .btn{ pointer-events:auto; }

  /* visible + animación suave (sin caída/brinco) */
  .cta-overlay.show{ opacity:1; visibility:visible; }
  .cta-overlay.show .btn{
    animation: ctaEnter var(--cta-in) var(--cta-ease) both;
  }
  .cta-overlay.show .btn:nth-child(2){ animation-delay: var(--cta-delay); }

  @keyframes ctaEnter{
    0%   { opacity:0;  transform: translate3d(0,12px,0) scale(.985); filter: blur(.4px); }
    55%  { opacity:.98;transform: translate3d(0,1px,0)  scale(1.007); }
    100% { opacity:1;  transform: translate3d(0,0,0)  scale(1);      filter: none; }
  }

  /* accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .cta-overlay .btn{
      animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
    }
  }



  /* ===== Franja azul premium ===== */
  .intro-band{
    position:relative; color:#fff;
    background:linear-gradient(135deg, var(--mc-primary) 0%, var(--mc-primary-deep) 45%, var(--mc-primary) 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.25), inset 0 -1px rgba(0,0,0,.12);
    overflow:hidden;
  }
  .intro-band:before{
    content:""; position:absolute; top:-35%; right:-10%;
    width:60vw; height:60vw; pointer-events:none;
    background:radial-gradient(closest-side, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    filter:blur(8px); opacity:.9;
  }
  .intro-band:after{
    content:""; position:absolute; bottom:-40%; left:-10%;
    width:50vw; height:50vw; pointer-events:none;
    background:radial-gradient(closest-side, rgba(78,160,255,.25), rgba(78,160,255,0) 70%);
    filter:blur(10px); opacity:.6;
  }
  /* por si usas container o container-fluid */
  .intro-band .container,
  .intro-band .container-fluid{ position:relative; z-index:2; }

  .intro-band h1{ color:#fff; }
  .intro-band h1 span{
    color:transparent;
    background:linear-gradient(90deg, #fff 0%, #e9f5ff 60%, #fff 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .intro-band .lead{ color:rgba(255,255,255,.9); }

  /* Franja azul sin padding/gutters */
  .intro-band .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  .intro-band .row {
    --bs-gutter-x: 0;      /* sin gutters entre columnas */
    margin-left: 0;        /* por si el tema añade márgenes */
    margin-right: 0;
  }

  /* Modo “flush” para que la imagen no tenga borde ni sombra */
  .intro-img--flush {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  :root{
    --mc-primary:#2F7BBE;
    --mc-dark:#54575C;
    --mc-bg:#F4F7FB;
    --mc-bg-2:#FFFFFF;
    --mc-card:rgba(255,255,255,.85);
    --mc-border:rgba(47,123,190,.18);
    --mc-primary-deep:#1F5EA0;     /* deja UNA sola línea de ésta */
    --mc-primary-light:#4EA0FF;
    --nav-h:64px;
  }


  /* ===== Imagen de la izquierda ===== */
  .intro-img{
    width:100%;
    height:clamp(260px, 38vh, 320px);   /* súbelo para “ampliar” la imagen */
    object-fit:cover;
    object-position: var(--img-x, 0%) var(--img-y, 50%);  /* encuadre fino */
    display:block;                      /* evita espacios fantasma */
    border-radius: 0 14px 14px 0;       /* esquinas solo del lado derecho */
    border:4px solid rgba(255,255,255,.6);
    box-shadow:0 20px 40px rgba(0,0,0,.22);
  }


  /* Altura controlada de la imagen de la franja */
  .intro-band .intro-img {
    width: 100%;
    height: var(--intro-img-h, 420px); /* altura por defecto */
    object-fit: cover;                 /* rellena recortando */
    object-position: var(--img-x, 50%) var(--img-y, 50%);
  }

  /* Alturas sugeridas por breakpoints (ajústalas a gusto) */
  @media (max-width: 575.98px) {  /* XS */
    .intro-band .intro-img { --intro-img-h: 260px; }
  }
  @media (min-width: 576px) and (max-width: 991.98px) { /* SM–MD */
    .intro-band .intro-img { --intro-img-h: 320px; }
  }
  @media (min-width: 992px) {    /* LG+ */
    .intro-band .intro-img { --intro-img-h: 420px; }
  }


  /* ===== Franja azul (HERO) – control de altura ===== */
  .intro-band{
    /* valores por defecto (puedes subir/bajar a gusto) */
    --band-py: 24px;     /* padding vertical de la franja */
    --img-h: 250px;      /* altura de la imagen */

    padding-top: var(--band-py);
    padding-bottom: var(--band-py);
  }

  /* Versión más baja: activa esta clase en el <section> */
  .intro-band--short{
    --band-py: 10px;     /* MENOS padding arriba/abajo */
    --img-h: 240px;      /* imagen más baja */
  }

  /* La imagen del lado izquierdo toma la altura definida arriba */
  .intro-band .intro-img{
    width: 100%;
    height: var(--img-h);
    object-fit: cover;                /* recorta para que llene sin deformar */
    object-position: var(--img-x, 50%) var(--img-y, 50%);
  }

  /* Reducimos aire interno del texto (títulos y párrafo) */
  .intro-band h1, .intro-band h2{ margin-bottom: .5rem; }
  .intro-band p.lead{ margin-bottom: 0; }

  /* Asegura que no haya espacios verticales extra en la fila */
  .intro-band .row{ --bs-gutter-y: 0; }



  /* ===== CTA Contacto blanco con hover moderno ===== */
  .btn-cta-white{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;                 /* blanco como pediste */
    color: var(--mc-primary);         /* texto en azul de marca */
    border: none;
    border-radius: 999px;
    padding: .75rem 1.25rem;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
    transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
    overflow: hidden;
  }

  /* shimmer/shine al pasar el mouse */
  .btn-cta-white::after{
    content: "";
    position: absolute;
    inset: 0;
    left: -130%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.75) 30%, transparent 60%);
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
  }

  .btn-cta-white:hover{
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 36px rgba(34,118,182,.35);
  }

  .btn-cta-white:hover::after{
    left: 130%;
  }

  /* foco accesible */
  .btn-cta-white:focus-visible{
    outline: 3px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 6px rgba(34,118,182,.35);
  }

  /* Posición del CTA dentro de la franja azul */
  .intro-band .cta-contacto{
    position: absolute;
    right: clamp(12px, 2.5vw, 28px);
    bottom: clamp(10px, 2vw, 24px);
    z-index: 5;
  }

  /* En móvil preferimos el CTA del navbar */
  @media (max-width: 767.98px){
    .intro-band .cta-contacto{
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      bottom: 12px;
    }
  }


  /* === CTA Contacto: centrado vertical y tamaño grande === */

  /* Posición en desktop: a la derecha y CENTRADO VERTICAL */
  .intro-band .cta-contacto{
    position: absolute;
    right: clamp(12px, 2.5vw, 28px);
    top: 50%;
    transform: translateY(-50%);   /* ← centra verticalmente */
    z-index: 5;
  }

  /* Tamaño XL del botón */
  .btn-cta-white.btn-xl{
    padding: 1rem 4.75rem;                          /* más grande */
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }

  /* Móvil: mantenlo abajo y centrado (no al medio para no tapar el texto) */
  @media (max-width: 767.98px){
    .intro-band .cta-contacto{
      top: auto;
      right: auto;
      left: 50%;
      bottom: 12px;
      transform: translateX(-50%);  /* centrado horizontal abajo */
    }
  }




  /* ===== NOSOTROS (about-v2) ===== */
  :root{
    --brand: #2276b6;
    --brand-600: #1b5f91;
    --brand-300: #4aa3e0;
  }

  .about-v2{ position: relative; overflow: hidden; }

  .about-v2 .about-title{
    font-weight: 800;
    font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.4rem);
    color: #0b2239;
    letter-spacing: .2px;
    margin-bottom: .75rem;
    text-align: center;
  }
  .about-v2 .about-title span{ color: var(--brand); }

  /* subrayado del título */

  .about-v2 .about-subtitle{
    margin-bottom: clamp(3.25rem, 5.2vw, 5.25rem); /* ↑ más espacio bajo el título */
    max-width: 820px;
    color:#4a6076;
    text-align: justify;
  }

  /* Pilares */
  .about-v2 .feature-item .icon-wrap{
    --size:64px;
    width: var(--size); height: var(--size);
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid; place-items: center;
    color:#fff;
    background: radial-gradient(120% 120% at 30% 30%, var(--brand-300), var(--brand-600));
    box-shadow: 0 10px 24px rgba(34,118,182,.25), inset 0 0 0 2px rgba(255,255,255,.15);
  }
  .about-v2 .feature-title{ font-weight:700; margin-bottom:.25rem; color:#0b2239; }
  .about-v2 .feature-text{ font-size:.95rem; color:#5e7188; margin:0; }

  /* Tarjeta de métricas */
  .about-v2 .stats-card{
    max-width: 980px;
    border-radius: 20px;
    padding: clamp(16px, 2vw, 24px) clamp(16px, 2.4vw, 28px);
    background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand) 45%, var(--brand-300) 100%);
    position: relative; isolation: isolate;
  }
  .about-v2 .stats-card::after{
    content:""; position:absolute; inset:-14px; border-radius:24px;
    background: radial-gradient(60% 80% at 80% 50%, rgba(255,255,255,.22), transparent 70%);
    z-index:-1;
  }
  .about-v2 .stat-number{
    color:#fff; font-weight:800; line-height:1;
    font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.8rem);
  }
  .about-v2 .stat-number .plus{ margin-left:2px; }
  .about-v2 .stat-label{
    color:#e8f3ff; opacity:.95; margin-top:.35rem;
    font-weight:500; font-size: clamp(.85rem, .8rem + .3vw, 1rem);
  }
  @media (max-width: 575.98px){
    .about-v2 .feature-item{ max-width:260px; margin-inline:auto; }
  }


  /* ==== Extensiones de NOSOTROS (coexisten con tu .about-v2 actual) ==== */
  :root{
    --brand: #2276b6;
    --brand-600:#1b5f91;
    --brand-300:#4aa3e0;
    --ice:#e9f6ff;
  }

  /* EXCELENCIA OPERATIVA */
  .about-v2 .excellence .equip-img{
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 20px;
    overflow: visible;
  }
  .about-v2 .excellence .equip-shape{
    position: absolute;
    inset: 8% 12%;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand-300), var(--brand-600));
    
  }

  /* después */
  .solu-figure{
    position:relative;
    aspect-ratio: 16/10;
    box-shadow: 0 18px 40px rgba(34,118,182,.18); /* mucho más barato */
    border-radius:24px;
  }
  .solu-shape{ filter:none; } /* o quítale esa línea por completo */


  .solu-img,
  .solu-img--b,
  .solu-stage .solu-left{
    will-change: opacity, transform;
  }

  .about-v2 .excellence img{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }
  .about-v2 .excellence-title{
    font-weight: 800;
    font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
    color:#0b2239;
  }
  .about-v2 .excellence-title span{ color: var(--brand); }

  /* MISIÓN / VISIÓN */
  .about-v2 .mv-band{
    background: var(--ice);
  }
  .about-v2 .mv-card{
    background:#fff;
    border-radius: 16px;
    padding: clamp(16px, 1.6vw, 22px);
    box-shadow: 0 10px 26px rgba(13,46,76,.08);
  }
  .about-v2 .mv-card h4{
    font-weight: 800;
    margin-bottom: .5rem;
    color:#0b2239;
  }
  .about-v2 .mv-card p{
    color:#4a6076;
    margin: 0;
  }
  /* Visión en azul sólido */
  .about-v2 .mv-vision{
    background: linear-gradient(160deg, var(--brand), var(--brand-600));
    color:#fff;
  }
  .about-v2 .mv-vision h4{ color:#fff; }

  /* VALORES */
  .about-v2 .values-grid .value-item{ max-width: 220px; margin-inline: auto; }
  .about-v2 .value-icon{
    --s:72px;
    width:var(--s); height:var(--s);
    margin-inline:auto; margin-bottom:10px;
    border-radius:50%;
    display:grid; place-items:center;
    color:#fff;
    background: radial-gradient(120% 120% at 30% 30%, var(--brand-300), var(--brand-600));
    box-shadow: 0 10px 24px rgba(34,118,182,.25), inset 0 0 0 2px rgba(255,255,255,.18);
  }
  .about-v2 .value-icon i{ font-size: 32px; line-height:1; }
  .about-v2 .value-label{
    font-size: .93rem;
    color:#31475e;
  }



  /* ===== Full-bleed (a pantalla completa) para un bloque dentro de .container ===== */
  .full-bleed{
    width: 100vw;                 /* ocupa todo el viewport */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;           /* escapa de los padding laterales del .container */
    margin-right: -50vw;
  }

  /* Variante de la tarjeta azul a ancho completo */
  .about-v2 .stats-card--full{
    max-width: none;              /* sin límite de ancho */
    border-radius: 0;             /* sin esquinas para “pegar” a los bordes */
    padding: clamp(16px, 2.2vw, 28px) clamp(20px, 5vw, 80px); /* más respiro lateral */
    box-shadow: 0 12px 36px rgba(0,0,0,.18);                  /* sombra suave */
  }

  /* (Opcional) si quieres mantener esquinas redondeadas pero FULL width,
    comenta el border-radius:0 de arriba y usa solo top/bottom: */
  /* .about-v2 .stats-card--full{ border-radius: 24px 24px 24px 24px; } */

  /* Evita espacios internos verticales extra dentro de la fila */
  .about-v2 .stats-card--full .row{ --bs-gutter-x: 0; }


  /* ==== Control fino del ancho y alineación de la banda Misión/Visión ==== */
  .about-v2 .mv-band.mv-narrow{
    /* ancho controlado, nunca más ancho que la pantalla */
    width: min(100%, var(--mv-max, 1100px));
    margin-inline: auto;                 /* base: centrado */
    transform: translateX(var(--mv-shift, 0));
  }

  /* Alineaciones rápidas */
  .about-v2 .mv-band.mv-align-left { margin-left: 0;  margin-right: auto; }
  .about-v2 .mv-band.mv-align-right{ margin-left: auto; margin-right: 0;  }
  .about-v2 .mv-band.mv-align-center{ margin-left: auto; margin-right: auto; }

  /* (opcional) Si en móviles quieres que la banda use todo el ancho visible */
  @media (max-width: 575.98px){
    .about-v2 .mv-band.mv-narrow{ width: 100%; --mv-shift: 0; }
  }



  /* ===== Soluciones: bloque moderno (pills + detalle con imagen) ===== */
  :root{
    /* ya usas --mc-primary en otros estilos; lo reutilizamos */
    --solu-ink:#0b2239;
    --solu-muted:#5e7188;
  }

  .solu-hero{ margin-bottom: 2rem; }

  .solu-pills .solu-pill{
    border:1px solid rgba(13,46,76,.18);
    background:#fff;
    border-radius: 999px;
    padding:.55rem 1.15rem;
    font-weight:700;
    letter-spacing:.1px;
    transition: all .2s ease;
  }
  .solu-pills .solu-pill:hover{
    transform: translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
  }
  .solu-pills .solu-pill.active{
    border-color: var(--mc-primary);
    background: rgba(34,118,182,.10);
    color: var(--mc-primary);
    box-shadow:0 6px 16px rgba(34,118,182,.20);
  }

  .solu-stage .solu-title{
    font-weight:800;
    color: var(--solu-ink);
  }
  .solu-stage .solu-sub{
    color: var(--mc-primary);
    font-weight:700;
  }
  .solu-points{
    list-style:none;
    padding-left:0;
    margin:0;
    display:grid;
    gap:.5rem;
  }
  .solu-points li{
    color: var(--solu-muted);
    position:relative;
    padding-left:1.3rem;
  }
  .solu-points li::before{
    content:"";
    position:absolute; left:0; top:.45rem;
    width:.6rem; height:.6rem;
    border-radius:50%;
    background: var(--mc-primary);
    box-shadow: 0 0 0 6px rgba(34,118,182,.12);
  }

  .solu-figure{ position:relative; aspect-ratio: 16/10; }
  .solu-shape{
    position:absolute; inset:0;
    background: linear-gradient(135deg, var(--mc-primary), #4aa3e0);
    border-radius: 24px;
    /* “esquina achaflanada” abajo-derecha */
    clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 0 100%);
    filter: drop-shadow(0 18px 40px rgba(34,118,182,.25));
  }
  .solu-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit: cover;
    border-radius: 24px;
  }

  /* small refinements */
  @media (max-width: 991.98px){
    .solu-figure{ aspect-ratio: 16/11; }
  }


  /* ===== Carrusel dentro de SolucionesPlus ===== */
  .solu-figure{ position:relative; aspect-ratio: 16/10; }
  .solu-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:24px; }
  .solu-shape{
    position:absolute; inset:0;
    background: linear-gradient(135deg, var(--mc-primary), #4aa3e0);
    border-radius:24px;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 0 100%);
    filter: drop-shadow(0 18px 40px rgba(34,118,182,.25));
  }

  /* flechas */
  .solu-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border:none; border-radius:50%;
    background:#fff; color:#0b2239; display:grid; place-items:center;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    transition:transform .15s ease, box-shadow .15s ease;
    z-index:5;
  }
  .solu-nav:hover{ transform:translateY(-50%) scale(1.05); box-shadow:0 14px 28px rgba(0,0,0,.22); }
  .solu-prev{ left:-14px; }
  .solu-next{ right:-14px; }

  /* contador 1/4 */
  .solu-count{
    position:absolute; right:12px; bottom:12px;
    background:rgba(255,255,255,.9); color:#0b2239;
    padding:.25rem .5rem; border-radius:12px; font-weight:700; font-size:.85rem;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
  }

  /* si solo hay 1 slide, oculta flechas/contador */
  .solu-figure.single .solu-nav,
  .solu-figure.single .solu-count{ display:none; }

  @media (max-width: 991.98px){
    .solu-prev{ left:0; } .solu-next{ right:0; }
  }


  /* ===== Solu-pills: una sola fila con scroll horizontal ===== */
  #soluTabs.solu-pills{
    position: relative;
    display: flex;
    flex-wrap: nowrap;               /* <-- nunca salta a 2 filas */
    overflow-x: auto;                /* scroll si no entra */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: .35rem .5rem;
    gap: .75rem;
    scrollbar-width: none;           /* Firefox */
    justify-content: center;         /* centra en desktop */
  }
  #soluTabs.solu-pills::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

  /* “Píldora” con glass + elevación al hover */
  .solu-pill{
    position: relative;
    z-index: 1;                      /* por encima del indicador */
    display: inline-flex;
    align-items: center;
    padding: .65rem 1.15rem;
    border-radius: 999px;
    border: 1px solid #e8edf6;
    background: rgba(255,255,255,.65);
    backdrop-filter: saturate(140%) blur(6px);
    font-weight: 600;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
    will-change: transform;
  }
  .solu-pill:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -14px rgba(33,114,229,.38), 0 4px 8px rgba(15,23,42,.10);
    border-color: rgba(47,128,237,.35);
  }
  .solu-pill:active{ transform: translateY(-1px); }

  .solu-pill.active{
    color: var(--mc-primary, #2f80ed);
    border-color: rgba(47,128,237,.45);
  }

  /* Indicador que se desplaza debajo de la pestaña activa */
  #soluTabs .solu-indicator{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0;
    height: calc(100% - .5rem);      /* mismo alto visual que las pills */
    border-radius: 999px;
    background: linear-gradient(180deg,#eef6ff,#ffffff);
    border: 1px solid rgba(47,128,237,.45);
    box-shadow: 0 18px 36px -18px rgba(33,114,229,.45);
    transition: left .28s cubic-bezier(.22,.61,.36,1), width .28s cubic-bezier(.22,.61,.36,1), height .18s ease;
    z-index: 0;
  }

  /* En pantallas estrechas, alinear a la izquierda para facilitar el scroll */
  @media (max-width: 991.98px){
    #soluTabs.solu-pills{ justify-content: flex-start; }
  }

  .solu-pill:hover::after{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    background: radial-gradient(100px 40px at 20% 10%, rgba(255,255,255,.6), transparent 60%);
    pointer-events:none;
  }


  /* Píldoras: texto más pequeño y compacto para que encaje */
  #soluTabs.solu-pills{ gap: .6rem; }                /* menos espacio entre pills */

  .solu-pill{
    white-space: nowrap;                             /* 1 sola línea */
    font-weight: 600;
    /* ~14px en desktop, baja en tablet/móvil automáticamente */
    font-size: clamp(12px, 1.05vw + .2rem, 14px);
    line-height: 1.15;
    padding: .42rem .85rem;                          /* padding compacto */
    letter-spacing: .01em;
  }

  .solu-pill.active{ font-weight: 700; }

  /* Ajustes finos por breakpoint (opcional) */
  @media (max-width: 1200px){
    .solu-pill{ font-size: 13px; padding:.4rem .8rem; }
  }
  @media (max-width: 992px){
    #soluTabs.solu-pills{ gap: .5rem; }
    .solu-pill{ font-size: 12.5px; padding:.38rem .75rem; }
  }
  @media (max-width: 576px){
    .solu-pill{ font-size: 12px; padding:.36rem .65rem; }
  }


  /* ===== Animación moderna de cambio de slide ===== */
  .solu-stage .solu-left,
  .solu-stage .solu-figure{
    transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
  }

  /* fase OUT */
  .solu-stage.swap-out .solu-left{
    opacity: 0;
    transform: translateX(-18px) scale(.98);
  }
  .solu-stage.swap-out .solu-figure{
    opacity: 0;
    transform: translateX(18px) scale(.98);
  }

  /* fase IN (se retira automáticamente con JS) */
  .solu-stage.swap-in .solu-left,
  .solu-stage.swap-in .solu-figure{
    opacity: 1;
    transform: translateX(0) scale(1);
  }


  /* === Fade-out on nav click (global) === */
  /* === Page transition (nav click) — overlay suave === */
  :root{ --nav-fade: .55s; }        /* duración única para JS + CSS */
  body.no-smooth{ scroll-behavior: auto !important; }

  /* Overlay que cruza opacidades (no apaga el body de golpe) */
  body.fade-transition::after{
    content:"";
    position: fixed; inset: 0;
    background:
      radial-gradient(1000px 480px at 50% -10%, rgba(47,123,190,.08), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nav-fade) cubic-bezier(.22,1,.36,1);
    will-change: opacity;
  }

  /* Estado “apagado” (cubre con overlay) */
  body.is-fading::after{
    opacity: 1;
    pointer-events: auto;
  }

  /* Accesibilidad: sin animación para quien la reduzca */
  @media (prefers-reduced-motion: reduce){
    body.fade-transition::after{ transition: none !important; }
  }



  /* === Hero Typer (loop) === */
  .typer{ z-index: 3; }
  .typer__text{
    --c1:#2F7BBE; --c2:#3B91D8;               /* colores marca */
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip:text; background-clip:text;
    color: transparent;
    font-weight: 500;
    font-size: clamp(10px, 2.2vw + .7rem, 20px); /* responsivo */
    letter-spacing: .02em; line-height: 1.2;
    white-space: nowrap; text-align: center;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
  }
  /* Cursor elegante */
  .typer__cursor{
    display:inline-block; width:.08em; height:1em;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    margin-left:.06em; vertical-align:-.12em;
    animation: typer-blink 1s steps(1) infinite; border-radius:1px; opacity:.9;
  }
  @keyframes typer-blink{ 50%{ opacity: 0; } }

  /* Shimmer suave sobre el texto */
  .typer__text::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
    background-size:200% 100%; animation: typer-shimmer 3.6s ease-in-out infinite;
    mix-blend-mode: screen; pointer-events:none; opacity:.22;
  }
  @keyframes typer-shimmer{ 0%{background-position:200% 0} 50%{background-position:0 0} 100%{background-position:-200% 0} }

  @media (max-width: 420px){
    .typer__text{ white-space: normal; display:inline-block; max-width: 92vw; }
  }
  @media (prefers-reduced-motion: reduce){
    .typer__cursor{ animation:none }
    .typer__text::before{ display:none }
  }


  /* === Marco animado alrededor del título "Sobre Nosotros" === */
  .about-title{ margin-bottom: 1.75rem; }

  .about-ring{
    position: relative;
    display: inline-block;
    padding: .6rem 1.1rem;
    border-radius: 16px;
    isolation: isolate;
  }

  /* ANTES estaba con opacity:0 y animation-play-state: paused; */
  /* === Anillo animado alrededor del título "Sobre Nosotros" (sin mask) === */
  #nosotros{ --nosotros-bg: #f5f8fc; } /* color de fondo de la sección (ajústalo si usas otro) */

  .about-ring{
    position: relative;
    display: inline-block;
    padding: .6rem 1.1rem;         /* separación entre texto y borde */
    border-radius: 16px;
  }

  .about-ring__bg{
    position: absolute;
    inset: -3px;                   /* grosor total del anillo */
    border-radius: inherit;
    background: conic-gradient(#2F7BBE, #3B91D8, #2F7BBE);
    animation: ring-spin 6s linear infinite;  /* siempre en movimiento */
    z-index: 0;
  }
  /* “abre un hueco” del color del fondo para que solo se vea el aro */
  .about-ring__bg::before{
    content: "";
    position: absolute;
    inset: 3px;                    /* = grosor visible del borde */
    border-radius: inherit;
    background: var(--nosotros-bg, #fff); /* mismo color que el fondo detrás */
  }

  .about-ring__inner{
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: clamp(22px, 4.8vw, 44px);
    line-height: 1.1;
    color: #0F172A;                /* color del texto */
  }

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

  /* Accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .about-ring__bg{ animation: none; }
  }
  .about-ring:hover .about-ring__bg{ animation-duration: 3s; }


  /* === Marco tipo logo-loader alrededor de "Sobre Nosotros" === */
  .logo-frame{
    --thick: 6px;                /* grosor de la barra */
    --corner: 16px;              /* separación del vértice */
    --c1: #2F7BBE;               /* colores marca */
    --c2: #3B91D8;

    position: relative;
    display: inline-block;
    padding: .65rem 1.15rem;     /* espacio interno entre texto y marco */
    border-radius: 16px;
    isolation: isolate;
  }

  .logo-frame__text{
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: clamp(22px, 4.8vw, 44px);
    line-height: 1.1;
    color: #0F172A;
    display: inline-block;
  }

  /* Largo útil de cada barra: ancho/alto del contenedor menos dos "corners" */
  .logo-frame{ --spanW: calc(100% - (var(--corner) * 2)); }
  .logo-frame{ --spanH: calc(100% - (var(--corner) * 2)); }

  .lf-edge{
    position: absolute;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(63, 140, 205, .35);
    z-index: 0;
  }

  /* TOP: recorre de izquierda a derecha */
  .lf-top{
    left: var(--corner); top: 0;
    height: var(--thick); width: var(--thick);
    animation: lf-x 1.2s linear infinite;
  }

  /* RIGHT: recorre de arriba a abajo (medio desfase) */
  .lf-right{
    right: 0; top: var(--corner);
    width: var(--thick); height: var(--thick);
    animation: lf-y 1.2s linear infinite .6s;
  }

  /* BOTTOM: recorre de derecha a izquierda */
  .lf-bottom{
    right: var(--corner); bottom: 0;
    height: var(--thick); width: var(--thick);
    animation: lf-x-rev 1.2s linear infinite;
  }

  /* LEFT: recorre de abajo hacia arriba (desfase) */
  .lf-left{
    left: 0; bottom: var(--corner);
    width: var(--thick); height: var(--thick);
    animation: lf-y-rev 1.2s linear infinite .6s;
  }

  /* Animaciones (como el zip: ensancha hasta el tramo y luego se desplaza) */
  @keyframes lf-x{
    0%   { width: 0; transform: translateX(0); }
    50%  { width: var(--spanW); transform: translateX(0); }
    100% { width: var(--thick); transform: translateX(var(--spanW)); }
  }
  @keyframes lf-x-rev{
    0%   { width: 0; transform: translateX(0); }
    50%  { width: var(--spanW); transform: translateX(0); }
    100% { width: var(--thick); transform: translateX(calc(-1 * var(--spanW))); }
  }

  @keyframes lf-y{
    0%   { height: 0; transform: translateY(0); }
    50%  { height: var(--spanH); transform: translateY(0); }
    100% { height: var(--thick); transform: translateY(var(--spanH)); }
  }
  @keyframes lf-y-rev{
    0%   { height: 0; transform: translateY(0); }
    50%  { height: var(--spanH); transform: translateY(0); }
    100% { height: var(--thick); transform: translateY(calc(-1 * var(--spanH))); }
  }

  /* Hover opcional: acelera */
  .logo-frame:hover .lf-edge{ animation-duration: .9s; }

  /* Respeto accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .lf-edge{ animation: none; }
  }


  /* =========================================
    Cards de "Sobre Nosotros" (look imagen 2)
    ========================================= */
  :root{
    --mc-primary: #2F7BBE;
    --mc-accent:  #06B6D4;
    --title-ink:  #0F172A;
    --text-soft:  #667085;
  }

  /* Card base */
  .feature-card{
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border-top: 4px solid var(--mc-primary);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    transition: transform .28s cubic-bezier(.2,.7,.3,1),
                box-shadow .28s cubic-bezier(.2,.7,.3,1),
                filter .28s;
  }
  .feature-card--accent{ border-top-color: var(--mc-accent); }

  /* Hover: flota y la sombra se marca */
  .feature-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 42px rgba(15,23,42,.12);
  }
  .feature-card:active{ transform: translateY(-2px); }

  /* Icono circular (azul degradado) */
  .feature-icon{
    width: 56px; height: 56px; border-radius: 999px;
    display: grid; place-items: center;
    color: #fff;
    background: radial-gradient(circle at 30% 20%, #62a9df, #2f7bbe 60%);
    box-shadow:
      inset 0 10px 24px rgba(47,123,190,.35),
      0 8px 18px rgba(0,0,0,.12);
    transition: transform .45s cubic-bezier(.16,.84,.36,1), filter .45s;
  }

  /* micro-animación del icono al pasar el mouse */
  .feature-card:hover .feature-icon{
    transform: translateY(-3px) rotate(8deg) scale(1.06);
    filter: brightness(1.06) saturate(1.05);
  }

  /* Si usas <i> o <svg> dentro del icono */
  .feature-icon svg,
  .feature-icon i{
    width: 24px; height: 24px; font-size: 24px;
  }

  /* Tipografías del card */
  .feature-title{ font-weight: 800; color: var(--title-ink); font-size: 1.125rem; }
  .feature-desc{ color: var(--text-soft); font-size: .95rem; line-height: 1.55; }

  /* Solo aplica hover fuerte en punteros finos (evita “saltos” en táctiles) */
  @media (hover: hover) and (pointer: fine){
    .feature-card:hover{ transform: translateY(-8px); }
  }

  /* Accesibilidad: respetar reduce motion */
  @media (prefers-reduced-motion: reduce){
    .feature-card, .feature-icon{ transition: none; }
    .feature-card:hover .feature-icon{ transform: none; filter: none; }
  }

  .feature-card:hover .feature-icon{ animation: spin360 1.2s linear infinite; }
  @keyframes spin360 { to { transform: rotate(360deg) scale(1.06) translateY(-3px); } }

  /* =========================================================
    GLASS THEME – MCWATT (v3)
    Solo visual; no cambia ninguna animación ni el HTML
    ========================================================= */
  :root{
    --mc-primary:#2F7BBE;
    --mc-accent:#3B91D8;
    --ink:#0F172A;
    --soft:#5b677a;
    --glass-bg-1: rgba(255,255,255,.18);
    --glass-bg-2: rgba(255,255,255,.06);
    --glass-brd : rgba(255,255,255,.35);
    --glass-brd-weak: rgba(255,255,255,.22);
    --glass-shadow: 0 12px 30px rgba(15,23,42,.10), 0 24px 60px rgba(15,23,42,.08);
    --glass-shadow-sm: 0 8px 22px rgba(15,23,42,.08), 0 16px 36px rgba(15,23,42,.06);
  }

  /* ============== Contexto: fondo suave para la sección ============== */
  /* (opcional) si tienes MV y Valores en el mismo bloque con degradado,
    estos detalles hacen que el glass se note más */
  #mv, #valores{
    position: relative;
    overflow: visible;
  }
  #valores::before{
    content:""; position:absolute; inset:-80px -10% auto -10%;
    height: 220px;
    background:
      radial-gradient(60% 80% at 20% 20%, rgba(59,145,216,.25), transparent 60%),
      radial-gradient(50% 60% at 80% 0%, rgba(47,123,190,.20), transparent 60%);
    filter: blur(24px);
    pointer-events:none; z-index:0;
  }

  /* ============== Misión / Visión ============== */
  .mv-card{
    position: relative;
    border-radius: 22px;
    padding: 28px 26px;
    background: linear-gradient(135deg, var(--glass-bg-1), var(--glass-bg-2));
    border: 1px solid var(--glass-brd);
    box-shadow: var(--glass-shadow-sm);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: transform .35s cubic-bezier(.2,.7,.3,1),
                box-shadow .35s, border-color .35s, background .35s;
  }
  .mv-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow);
    border-color: var(--glass-brd);
  }
  .mv-card__bar{
    position:absolute; inset:0 0 auto 0; height:4px;
    background: linear-gradient(90deg,var(--mc-primary),var(--mc-accent));
    border-top-left-radius:22px; border-top-right-radius:22px;
    opacity:.9;
  }
  .mv-card--light p{ color: var(--soft); }

  /* Visión: vidrio tintado con gradiente de marca */
  .mv-card--grad{
    background:
      linear-gradient(135deg, rgba(47,123,190,.25), rgba(59,145,216,.28)),
      linear-gradient(135deg, var(--glass-bg-1), var(--glass-bg-2));
    border: 1px solid var(--glass-brd-weak);
    color:#eaf4ff;
    box-shadow:
      0 12px 30px rgba(47,123,190,.22),
      0 24px 60px rgba(15,23,42,.08);
  }
  .mv-card__title{ font-weight:900; color:var(--ink); letter-spacing:.2px; }
  .mv-card__title--invert{ color:#fff; }
  .mv-card__text--invert{ color:#e7f1ff; }

  /* Fallback para navegadores sin backdrop-filter */
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
    .mv-card{
      background: rgba(255,255,255,.88);
      border-color: rgba(47,123,190,.18);
    }
    .mv-card--grad{
      background: linear-gradient(135deg, rgba(47,123,190,.92), rgba(59,145,216,.92));
    }
  }

  /* ============== Nuestros Valores (tiles) ============== */
  .values-title{
    font-weight: 900; color: var(--ink);
    font-size: clamp(28px, 4.6vw, 42px);
    letter-spacing:.2px;
  }
  .values-underline{
    display:block; width:100px; height:4px; margin:.5rem auto 0;
    border-radius:999px;
    background: linear-gradient(90deg,var(--mc-primary),var(--mc-accent));
    box-shadow:0 6px 18px rgba(47,123,190,.25);
  }

  .value-tile{
    position: relative;
    background: linear-gradient(135deg, var(--glass-bg-1), var(--glass-bg-2));
    border: 1px solid var(--glass-brd);
    border-radius: 16px;
    padding: 18px 16px; text-align:center;
    box-shadow: var(--glass-shadow-sm);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    transition: transform .28s cubic-bezier(.2,.7,.3,1),
                box-shadow .28s, border-color .28s, background .28s;
  }
  .value-tile:hover{
    transform: translateY(-9px);
    box-shadow: var(--glass-shadow);
    border-color: rgba(255,255,255,.55);
  }

  /* icono “glass pill” */
  .value-icon{
    width:58px; height:58px; margin-inline:auto; border-radius:14px;
    display:grid; place-items:center; color:#fff; font-size:26px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.12)),
      linear-gradient(135deg, var(--mc-primary), var(--mc-accent));
    border: 1px solid rgba(255,255,255,.35);
    box-shadow:
      inset 0 10px 20px rgba(255,255,255,.22),
      0 10px 22px rgba(47,123,190,.28);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    backdrop-filter: blur(6px) saturate(150%);
    position:relative; overflow:hidden;
    transition: transform .45s cubic-bezier(.16,.84,.36,1), filter .45s, box-shadow .45s;
  }
  .value-tile:hover .value-icon{
    transform: translateY(-4px) scale(1.07) rotate(5deg);
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
      inset 0 12px 24px rgba(255,255,255,.24),
      0 14px 28px rgba(47,123,190,.34);
  }
  /* destello diagonal */
  .value-icon::after{
    content:""; position:absolute; inset:-40% -120% auto -120%;
    height:140%; width:70%;
    transform: rotate(25deg) translateX(-20%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    opacity:0; pointer-events:none;
  }
  .value-tile:hover .value-icon::after{
    animation: value-shine 700ms ease forwards;
    opacity:.9;
  }
  @keyframes value-shine{
    to{ transform: rotate(25deg) translateX(260%); opacity:0; }
  }

  .value-label{ color:#5f6f86; font-size:.95rem; line-height:1.35; margin-top:.55rem; }
  /* stagger (lo dispara tu JS con .values-grid.in) */
  .values-grid .value-tile{ opacity:0; transform:translateY(14px) scale(.985); }
  .values-grid.in .value-tile{ opacity:1; transform:none; transition-delay:var(--d,0ms); }
  .values-grid.in .value-tile:nth-child(1){ --d:80ms; }
  .values-grid.in .value-tile:nth-child(2){ --d:140ms; }
  .values-grid.in .value-tile:nth-child(3){ --d:200ms; }
  .values-grid.in .value-tile:nth-child(4){ --d:260ms; }
  .values-grid.in .value-tile:nth-child(5){ --d:320ms; }
  .values-grid.in .value-tile:nth-child(6){ --d:380ms; }

  /* ============== Contadores (stats) ============== */
  .stat-card{
    position:relative;
    background:
      linear-gradient(135deg, var(--glass-bg-1), var(--glass-bg-2));
    border: 1px solid var(--glass-brd);
    border-radius: 22px;
    padding: 28px 18px;
    text-align:center;
    box-shadow: var(--glass-shadow-sm);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: transform .28s cubic-bezier(.2,.7,.3,1),
                box-shadow .28s, border-color .28s, background .28s;
  }
  .stat-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow);
    border-color: rgba(255,255,255,.55);
  }
  .stat-value{
    font-weight:900;
    font-size: clamp(34px, 6vw, 54px);
    line-height:1;
    background: linear-gradient(90deg,var(--mc-primary),var(--mc-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
  }
  .stat-label{
    color:#3f4f66; opacity:.92; font-weight:700;
    margin-top:.35rem; letter-spacing:.2px;
  }

  /* Fallback si no hay blur */
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
    .value-tile, .stat-card{
      background: rgba(255,255,255,.9);
      border-color: rgba(47,123,190,.18);
    }
  }

  /* Accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .mv-card, .value-tile, .value-icon, .stat-card{ transition:none !important; }
    .value-icon::after{ animation:none !important; opacity:0 !important; }
  }



  /* --- Icon pill for Misión/Visión --- */
  .mv-card{ position: relative; }
  .mv-card__icon{
    position: absolute;
    inset: 16px auto auto 16px;
    width: 44px; height: 44px; border-radius: 12px;
    display:grid; place-items:center; color:#fff;
    background:
      linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.12)),
      linear-gradient(135deg, var(--mc-primary), var(--mc-accent));
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 10px 18px rgba(255,255,255,.2), 0 6px 14px rgba(13,46,76,.15);
    transform: translateZ(0);
  }
  .mv-card__icon.is-mision{ background: linear-gradient(135deg, #2563eb, #22c1dc); }
  .mv-card__icon.is-vision{ background: linear-gradient(135deg, #0ea5e9, #10b981); }

  /* pop-in animation for value tiles */
  .value-tile.pop-in{ animation: pop-in .6s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--delay, 0ms); }
  @keyframes pop-in{
    from{ opacity:0; transform: translateY(12px) scale(.98); }
    to  { opacity:1; transform: translateY(0) scale(1); }
  }

  /* slightly slower hover lift */
  .value-tile{ transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }



  /* ===== Patch V2: Ajustes para igualar Imagen 2 ===== */

  /* Título pequeño con subrayado tipo enlace */
  .about-v2 .values-title{
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    color: #E9F3FF;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    margin-bottom: .25rem;
  }

  /* Quita la barra larga decorativa debajo del h2 grande */
  .about-v2 .values-underline{ display:none !important; }

  /* Misión/Visión: deja espacio al icono y evita que tape el texto */
  .about-v2 .mv-card{ 
    position: relative;
    padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px) 76px !important; 
  }
  .about-v2 .mv-card__icon{ 
    left: 20px; top: 18px; z-index: 2;
  }
  .about-v2 .mv-card__title{ 
    margin-top: 2px;
    font-size: 1rem;
    font-weight: 700;
  }
  /* Decoración sutil de esquina para visión (círculo difuso) */
  .about-v2 .mv-card--grad::after{
    content:""; position:absolute; right:-20px; top:-30px; width:160px; height:160px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent 70%);
    pointer-events:none;
  }

  /* Tiles blancos con icono de color (glass suave) */
  .about-v2 .value-tile{
    background: rgba(255,255,255,.9) !important;
    border: 1px solid rgba(255,255,255,.6) !important;
    box-shadow: 0 8px 24px rgba(13,46,76,.10), inset 0 1px rgba(255,255,255,.4) !important;
    backdrop-filter: blur(6px);
  }
  .about-v2 .value-label{ color:#293B4B; font-weight:600; font-size:.92rem; }

  /* Colores distintos por tile (1..6) */
  .about-v2 #valores .col-6:nth-child(1) .value-icon{ background: linear-gradient(135deg,#1d4ed8,#60a5fa) !important; }
  .about-v2 #valores .col-6:nth-child(2) .value-icon{ background: linear-gradient(135deg,#f59e0b,#f97316) !important; }
  .about-v2 #valores .col-6:nth-child(3) .value-icon{ background: linear-gradient(135deg,#a855f7,#ec4899) !important; }
  .about-v2 #valores .col-6:nth-child(4) .value-icon{ background: linear-gradient(135deg,#10b981,#059669) !important; }
  .about-v2 #valores .col-6:nth-child(5) .value-icon{ background: linear-gradient(135deg,#22c55e,#0ea5e9) !important; }
  .about-v2 #valores .col-6:nth-child(6) .value-icon{ background: linear-gradient(135deg,#ef4444,#f97316) !important; }

  /* Contadores en tarjetas blancas con puntitos y blobs suaves */
  .about-v2 .stats-card{
    background:
      radial-gradient(circle at 20% 30%, rgba(80,160,255,.18), transparent 35%),
      radial-gradient(circle at 85% 65%, rgba(80,200,255,.16), transparent 45%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)) !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    box-shadow: 0 10px 28px rgba(13,46,76,.10), inset 0 1px rgba(255,255,255,.4) !important;
  }
  .about-v2 .stat-number{ color:#1A2C3C !important; }
  .about-v2 .stat-label{ color:#375971 !important; }

  /* Ajustes de espaciados para alinear todo como en el mock */
  @media (min-width: 992px){
    .about-v2 #mv .col-lg-6 article{ min-height: 176px; }
    .about-v2 #valores .row{ margin-top: .6rem; }
  }



  /* ===== Patch V3: Fondos animados (efecto blob) en Misión/Visión ===== */
  .about-v2 .mv-card{
    overflow: hidden;
    isolation: isolate;
    contain: paint; /* optimiza repintado */
  }
  /* Blob 1 y 2: se dibujan con gradientes y se mueven con keyframes (GPU-friendly) */
  .about-v2 .mv-card::before,
  .about-v2 .mv-card::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    mix-blend-mode: screen;
    opacity:.9;
    will-change: transform, opacity;
  }
  /* Card clara (Misión): blob tenue blanco/azul al lado derecho */
  .about-v2 .mv-card.mv-card--light::before{
    width:280px; height:280px;
    right:-30px; top:-60px;
    background:
      radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.35) 60%, transparent 61%),
      radial-gradient(circle at 60% 60%, rgba(126,182,255,.18), transparent 60%);
    animation: mvBlobDrift1 14s cubic-bezier(.2,.7,.2,1) infinite alternate;
  }
  .about-v2 .mv-card.mv-card--light::after{
    width:220px; height:220px;
    right:90px; top:10px;
    background: radial-gradient(circle at 40% 40%, rgba(146,196,255,.16), transparent 60%);
    animation: mvBlobDrift2 16s cubic-bezier(.2,.7,.2,1) infinite alternate-reverse;
    opacity:.55;
  }

  /* Card gradiente (Visión): blob celeste/verde detrás del icono y otro suave a la derecha */
  .about-v2 .mv-card.mv-card--grad::before{
    width:260px; height:260px;
    left:12px; top:-18px;
    background:
      radial-gradient(closest-side, rgba(255,255,255,.35), transparent 62%),
      radial-gradient(circle at 55% 55%, rgba(34,197,94,.20), rgba(14,165,233,.22) 55%, transparent 65%);
    animation: mvBlobDrift3 13s cubic-bezier(.2,.7,.2,1) infinite alternate;
    opacity:.9;
  }
  .about-v2 .mv-card.mv-card--grad::after{
    width:220px; height:220px;
    right:-30px; top:30px;
    background: radial-gradient(circle at 50% 50%, rgba(14,165,233,.16), transparent 60%);
    animation: mvBlobDrift4 17s cubic-bezier(.2,.7,.2,1) infinite alternate-reverse;
    opacity:.65;
  }

  /* Pequeño “flotar” del icono pill para dar vida */
  .about-v2 .mv-card .mv-card__icon{
    animation: mvIconFloat 6.5s ease-in-out infinite;
    will-change: transform;
  }

  /* Keyframes */
  @keyframes mvBlobDrift1{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(18px,10px,0) scale(1.06); }
  }
  @keyframes mvBlobDrift2{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(-16px,6px,0) scale(1.03); }
  }
  @keyframes mvBlobDrift3{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(10px,12px,0) scale(1.05) rotate(2deg); }
  }
  @keyframes mvBlobDrift4{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(-14px,-8px,0) scale(1.04) rotate(-2deg); }
  }
  @keyframes mvIconFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-3px); }
  }

  /* Respeta accesibilidad: si el usuario pide menos animación, las apagamos */
  @media (prefers-reduced-motion: reduce){
    .about-v2 .mv-card::before,
    .about-v2 .mv-card::after,
    .about-v2 .mv-card .mv-card__icon{ animation: none !important; }
  }

  /* ===== Patch V3.1: Fix visibilidad de blobs (z-index/capas) ===== */
  .about-v2 .mv-card{
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* Pseudos por debajo del contenido, por encima del fondo */
  .about-v2 .mv-card::before,
  .about-v2 .mv-card::after{
    z-index: 0;
    mix-blend-mode: normal; /* quitar screen para que se note sobre blanco */
  }
  /* Contenido siempre arriba */
  .about-v2 .mv-card > *{
    position: relative;
    z-index: 1;
  }

  /* Subo un poco el contraste de los blobs para que se noten */
  .about-v2 .mv-card.mv-card--light::before{
    background:
      radial-gradient(closest-side, rgba(255,255,255,.80), rgba(240,246,255,.50) 60%, transparent 61%),
      radial-gradient(circle at 60% 60%, rgba(126,182,255,.20), transparent 60%);
  }
  .about-v2 .mv-card.mv-card--grad::before{
    background:
      radial-gradient(closest-side, rgba(255,255,255,.45), transparent 62%),
      radial-gradient(circle at 55% 55%, rgba(34,197,94,.24), rgba(14,165,233,.26) 55%, transparent 65%);
  }




  /* Aumentar espacio entre “Sobre Nosotros” y el texto */
  #nosotros .about-title{
    margin-bottom: clamp(2.25rem, 4.2vw, 4.25rem) !important;
  }

  /* (opcional) si aún lo ves muy cerca en desktop, súbelo un poco más ahí */
  @media (min-width: 992px){
    #nosotros .about-title{ margin-bottom: 2.5rem !important; }
  }


  /* ====== MV: más separación entre tarjetas ====== */
  #mv .mv-gap{
    --bs-gutter-x: 2.5rem;  /* ↑ separa más en horizontal */
    --bs-gutter-y: 1.25rem; /* ↑ separa más en vertical (móvil) */
  }
  @media (min-width: 1200px){
    #mv .mv-gap{ --bs-gutter-x: 3rem; }  /* un poco más en desktop ancho */
  }

  /* ====== MV: header horizontal (icono + título centrados) ====== */
  #mv .mv-head{
    display: flex;
    align-items: center;                /* centra verticalmente ícono y texto */
    gap: clamp(.6rem, 1.6vw, 1rem);     /* espacio entre icono y título */
    margin: .35rem 0 .85rem;            /* respiro arriba/abajo del header */
  }

  /* El icono en header debe ser “en flujo”, no absoluto */
  #mv .mv-head .mv-card__icon{
    position: static;                   /* ← quita el absolute del tema */
    inset: auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    box-shadow: inset 0 10px 18px rgba(255,255,255,.18), 0 6px 14px rgba(13,46,76,.12);
  }

  /* Título sin margen inferior para que quede alineado al centro del icono */
  #mv .mv-head .mv-card__title{
    margin: 0;
    line-height: 1;
    font-weight: 900;                   /* mantiene tu estilo fuerte */
  }

  /* Si tu tema pone el icono absoluto por defecto, neutralízalo SOLO en esta sección */
  #mv .mv-card__icon{ position: absolute; }           /* default del tema… */
  #mv .mv-head .mv-card__icon{ position: static; }    /* …pero dentro del header, en flujo */


  /* ====== MV: más separación entre tarjetas ====== */
  #mv .mv-gap{
    --bs-gutter-x: 2.5rem;  /* ↑ separa más en horizontal */
    --bs-gutter-y: 1.25rem; /* ↑ separa más en vertical (móvil) */
  }
  @media (min-width: 1200px){
    #mv .mv-gap{ --bs-gutter-x: 3rem; }  /* un poco más en desktop ancho */
  }

  /* ====== MV: header horizontal (icono + título centrados) ====== */
  #mv .mv-head{
    display: flex;
    align-items: center;                /* centra verticalmente ícono y texto */
    gap: clamp(.6rem, 1.6vw, 1rem);     /* espacio entre icono y título */
    margin: .35rem 0 .85rem;            /* respiro arriba/abajo del header */
  }

  /* El icono en header debe ser “en flujo”, no absoluto */
  #mv .mv-head .mv-card__icon{
    position: static;                   /* ← quita el absolute del tema */
    inset: auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    box-shadow: inset 0 10px 18px rgba(255,255,255,.18), 0 6px 14px rgba(13,46,76,.12);
  }

  /* Título sin margen inferior para que quede alineado al centro del icono */
  #mv .mv-head .mv-card__title{
    margin: 0;
    line-height: 1;
    font-weight: 900;                   /* mantiene tu estilo fuerte */
  }

  /* Si tu tema pone el icono absoluto por defecto, neutralízalo SOLO en esta sección */
  #mv .mv-card__icon{ position: absolute; }           /* default del tema… */
  #mv .mv-head .mv-card__icon{ position: static; }    /* …pero dentro del header, en flujo */


  /* === MV: Normalizar header (icono + título) y color de texto === */

  /* La barra azul superior: mismo aire antes del header */
  #mv .mv-card__bar{ margin-bottom: .60rem; }

  /* Header horizontal y alineado verticalmente */
  #mv .mv-head{
    display: flex;
    align-items: center;                 /* centra el título contra el icono */
    gap: .8rem;                          /* separación constante icono/título */
    margin: .35rem 0 .85rem;             /* respiro arriba/abajo */
  }

  /* El icono dentro del header VA en flujo (no absoluto) y mide lo mismo en ambas */
  #mv .mv-head .mv-card__icon{
    position: static !important;         /* anula el absolute del tema SOLO aquí */
    inset: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;                      /* ancho fijo para alinear con el título */
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin: 0;                           /* sin desplazamientos distintos */
  }

  /* Si el tema dibuja el icono con transform/offset, lo neutralizamos aquí */
  #mv .mv-head .mv-card__icon svg,
  #mv .mv-head .mv-card__icon img{
    max-width: 60%;
    max-height: 60%;
    transform: none !important;
  }

  /* Título con la misma línea base y color negro para ambas tarjetas */
  #mv .mv-head .mv-card__title{
    margin: 0;
    line-height: 1;
    font-weight: 800;
    color: #111 !important;              /* NEGRO (unificado) */
    text-shadow: none !important;
  }

  /* Por si quedó alguna clase “invert”, la apagamos en MV */
  #mv .mv-card__title--invert{ color: #111 !important; }

  /* (opcional) texto de la tarjeta en gris oscuro consistente */
  #mv .mv-card p{ color: #3b4b59; }

  /* Ya habías abierto separación entre tarjetas; si aún las ves juntas, sube el gutter: */
  #mv .mv-gap{ --bs-gutter-x: 3rem; --bs-gutter-y: 1.25rem; }
  @media (min-width: 1200px){
    #mv .mv-gap{ --bs-gutter-x: 3.5rem; }
  }


  /* === VALORES: título visible (marca) === */
  #valores .values-title{
    color: var(--brand, #2276b6) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
  }

  /* === VALORES: más separación homogénea entre tarjetas === */
  #valores .values-grid{
    --bs-gutter-x: 1.5rem;   /* separa horizontalmente */
    --bs-gutter-y: 1.2rem;   /* separa verticalmente en móvil */
  }

  /* === VALORES: carrusel continuo (wrapper + pista) === */
  #valuesSlider{
    position: relative;
    overflow: hidden;     /* oculta lo que sale por los lados */
  }

  /* La pista corre en una sola fila (flex), manteniendo tu .values-grid */
  #valuesSlider .values-track{
    display: flex !important;        /* anulamos grid aquí si algún navegador lo aplica */
    align-items: stretch;
    gap: var(--bs-gutter-x, 1.5rem);
    will-change: transform;
    --values-duration: 28s;          /* JS recalcula esto según ancho real */
  }

  /* cada tarjeta ocupa su ancho y no se encoge */
  #valuesSlider .values-track > *{
    flex: 0 0 auto;
  }

  /* animación: desplazamiento continuo de la mitad (duplicamos por JS) */
  #valuesSlider .values-track.values-animate{
    animation: values-marquee var(--values-duration) linear infinite;
  }
  #valuesSlider .values-track.values-animate:hover{
    animation-play-state: paused;    /* pausa al hover */
  }

  @keyframes values-marquee{
    from{ transform: translateX(0); }
    to  { transform: translateX(calc(-50% - var(--bs-gutter-x,1.5rem)/2)); }
  }

  /* Respeta “reducir movimiento” */
  @media (prefers-reduced-motion: reduce){
    #valuesSlider .values-track.values-animate{ animation: none !important; }
  }


  /* === VALORES: carrusel correlativo (sale 1 a la izq. y aparece al final) === */
  #valuesSlider{
    position: relative;
    overflow: hidden;
  }

  /* Pista en UNA sola fila, sin wraps; usamos gap uniforme */
  #valuesSlider .values-track{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: var(--values-gap, 1.25rem);         /* separación entre cards */
    margin: 0 !important;                    /* anulamos márgenes negativos del .row */
    transition: transform var(--values-step-dur, 900ms) cubic-bezier(.16,1,.3,1);
    will-change: transform;
  }

  /* Quitamos padding de las columnas Bootstrap y evitamos que “ocupen 12” */
  #valuesSlider .values-track > [class*="col-"]{
    padding: 0 !important;
    flex: 0 0 auto !important;               /* ancho por contenido */
    width: auto !important;
    max-width: none !important;
    min-width: clamp(230px, 24vw, 300px);    /* tamaño mínimo consistente */
  }

  /* Si quedó alguna animación previa, la neutralizamos aquí */
  #valuesSlider .values-track.values-animate{ animation: none !important; }


  /* ====== STATS: más separación entre tarjetas (solo esta fila) ====== */
  #valores .stats-row{
    --bs-gutter-x: 2rem;      /* ↑ separa horizontalmente */
    --bs-gutter-y: 1.25rem;   /* ↑ separa verticalmente en móvil */
  }
  @media (min-width: 992px){
    #valores .stats-row{ --bs-gutter-x: 2.5rem; } /* un poco más de aire en desktop */
  }

  /* ====== STATS: glassmorphism + entrada suave ====== */
  .stat-card{
    position: relative;
    border-radius: 20px;
    /* glass */
    background:
      radial-gradient(120% 160% at 15% 0%,
        rgba(255,255,255,.72),
        rgba(255,255,255,.58) 40%,
        rgba(255,255,255,.46) 70%,
        rgba(255,255,255,.36) 100%),
      rgba(255,255,255,.38);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255,255,255,.42);
    box-shadow:
      0 18px 40px rgba(17, 58, 95, .12),
      inset 0 1px 0 rgba(255,255,255,.35);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);

    /* estado inicial (fuera de vista) */
    transform: translateY(8px) scale(.985);
    opacity: 0;
    transition:
      transform .6s cubic-bezier(.16,1,.3,1),
      box-shadow .6s cubic-bezier(.16,1,.3,1),
      opacity .6s ease;
  }

  /* cuando entra al viewport (lo pone el JS que ya tienes) */
  .stat-card.in{
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* hover sutil */
  .stat-card:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 22px 46px rgba(17, 58, 95, .18),
      inset 0 1px 0 rgba(255,255,255,.40);
  }

  /* brillo muy leve al hover (sheen) */
  .stat-card::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(120deg,
        rgba(255,255,255,.32) 0%,
        rgba(255,255,255,0) 28%,
        rgba(255,255,255,.24) 62%,
        rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
  }
  .stat-card:hover::after{ opacity: .55; }

  /* colores de texto consistentes */
  .stat-value{ color: var(--brand, #2276b6); font-weight: 800; }
  .stat-label{ color: #5b6a79; }

  /* =========================
    SOLUCIONES — Píldoras + indicador
    ========================= */
  #soluTabs{
    position: relative; /* para posicionar el indicador dentro */
    flex-wrap: wrap;    /* ya lo tienes, por si acaso */
  }
  #soluTabs .solu-pill{
    position: relative; z-index: 2;
  }

  /* Indicador: borde animado que “abraza” la pill activa */
  #soluTabs .solu-indicator{
    position: absolute;
    top: 50%;
    left: 0;
    height: calc(100% - 4px);         /* igual alto que las pills menos un margen */
    transform: translate3d(0,-50%,0);
    width: 0;
    border: 2px solid var(--brand, #2276b6);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition:
      transform 420ms cubic-bezier(.16,1,.3,1),
      width     420ms cubic-bezier(.16,1,.3,1),
      opacity   200ms ease;
  }
  #soluTabs.is-ready .solu-indicator{ opacity: 1; }

  /* =========================
    SOLUCIONES — Animaciones de stage (texto + imagen)
    ========================= */
  .solu-stage{
    --solu-dur: 520ms;
    --solu-ease: cubic-bezier(.16,1,.3,1);
  }
  .solu-stage.is-leaving .solu-left,
  .solu-stage.is-leaving .solu-img{ will-change: transform, opacity; }
  .solu-stage.is-entering .solu-left,
  .solu-stage.is-entering .solu-img{ will-change: transform, opacity; }

  /* Sale: texto baja un poco y se desvanece */
  .solu-stage.is-leaving .solu-left{
    animation: soluTextOut var(--solu-dur) var(--solu-ease) both;
  }
  /* Entra: texto aparece desde +10px */
  .solu-stage.is-entering .solu-left{
    animation: soluTextIn var(--solu-dur) var(--solu-ease) both;
  }

  /* Sale: imagen hace leve zoom y se desplaza a la derecha */
  .solu-stage.is-leaving .solu-img{
    animation: soluImgOut var(--solu-dur) var(--solu-ease) both;
  }
  /* Entra: imagen viene con leve zoom-out desde la izquierda */
  .solu-stage.is-entering .solu-img{
    animation: soluImgIn var(--solu-dur) var(--solu-ease) both;
  }

  @keyframes soluTextOut{
    from{ opacity:1; transform: translateY(0); }
    to  { opacity:0; transform: translateY(10px); }
  }
  @keyframes soluTextIn{
    from{ opacity:0; transform: translateY(10px); }
    to  { opacity:1; transform: translateY(0); }
  }

  @keyframes soluImgOut{
    from{ opacity:1; transform: translateX(0) scale(1); }
    to  { opacity:0; transform: translateX(8px) scale(1.02); }
  }
  @keyframes soluImgIn{
    from{ opacity:0; transform: translateX(-8px) scale(.985); }
    to  { opacity:1; transform: translateX(0) scale(1); }
  }


  /* ===== SOLUCIONES — pills: look fino y sin indicador “descuadrado” ===== */
  #soluTabs .solu-indicator{ display:none !important; } /* ocultamos el indicador anterior */
  #soluTabs{ gap:.5rem; flex-wrap:wrap; }

  .solu-pill{
    border:1px solid rgba(34,118,182,.35);
    background:#fff;
    border-radius:999px;
    padding:.55rem 1rem;
    transition: color .2s, border-color .2s, box-shadow .25s, background .25s, transform .18s;
  }
  .solu-pill:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(34,118,182,.16);
  }
  .solu-pill.active{
    color:#fff;
    background:linear-gradient(90deg,#2a7cc5,#5aa3ff);
    border-color:transparent;
    box-shadow:0 10px 24px rgba(42,124,197,.25);
  }

  /* ===== SOLUCIONES — figura con cross-fade estable y sin “pantalla azul” ===== */
  .solu-figure{
    position:relative;
    isolation:isolate;
    aspect-ratio:16/10;            /* altura estable; evita saltos */
  }
  @supports not (aspect-ratio: 1){
    .solu-figure{ min-height:420px; }
  }

  .solu-figure .solu-img,
  .solu-figure .solu-img--b{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    border-radius:14px;
    opacity:0;
    transition:opacity 520ms cubic-bezier(.16,1,.3,1);
    background:radial-gradient(120% 130% at 30% 20%, #f4f8fb, #eef6fd); /* fondo agradable por si tarda */
  }
  .solu-figure .is-show{ opacity:1; }

  /* ===== SOLUCIONES — texto del stage con entrada/salida suave ===== */
  .solu-stage .solu-left{
    transition:opacity 420ms cubic-bezier(.16,1,.3,1), transform 420ms cubic-bezier(.16,1,.3,1);
  }
  .solu-stage.is-out .solu-left{ opacity:0; transform:translateY(8px); }
  .solu-stage.is-in  .solu-left{ opacity:1; transform:translateY(0); }


  /* === HERO — LOGO COMO TEXTO (reemplaza al video) =================== */
  .brand-hero{
    position: relative;
    padding-bottom: 15vh; /* <-- puedes subirlo a 10–12vh si quieres más aire */
  }

  /* Contenedor centrado, misma presencia del video */
  .brand-logo{
    position: relative;
    min-height: var(--hero-min, clamp(420px, 82vh, 760px)); /* ← altura controlable */
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    padding-top: var(--logo-down, 8vh);
    padding-bottom: var(--hero-pad-bottom, 0);              /* ← espacio extra abajo */
  }
  .brand-logo .brand-word{
    line-height: 1;
    white-space: nowrap;
  }

  /* Colores “MC” gris y “WATT” azul (mismos de tu marca) */
  .brand-logo__mc{
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    color: #4a4a4a; /* gris título */
    font-size: clamp(72px, 15vw, 260px);
    letter-spacing: .01em;
    display: inline-block;
    transform-origin: left center;
  }
  .brand-logo__watt{
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    color: #2a7cc5; /* azul marca */
    font-size: clamp(72px, 15vw, 260px);
    letter-spacing: .01em;
    display: inline-block;
    transform-origin: left center;
  }

  /* Subtítulo */
  .brand-logo{
    position: relative;
    min-height: clamp(420px, 82vh, 760px);
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    /* NUEVO: desplaza el bloque MCWATT hacia abajo sin romper la animación */
    padding-top: var(--logo-down, 8vh);
  }


  /* Barras decorativas (imitan la “línea superior” del video) */
  .brand-bar{
    position: absolute;
    height: clamp(6px, .9vw, 10px);
    background: #2a7cc5;
    border-radius: 6px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .brand-bar.bar-1{ top: 18%; left: 22%; width: 18%; }
  .brand-bar.bar-2{ top: 18%; right: 18%; width: 18%; transform-origin: right center; }

  /* ====== ANIMACIÓN (se activa cuando .brand-logo tiene .is-play) ====== */
  .brand-logo:not(.is-play) .brand-logo__mc,
  .brand-logo:not(.is-play) .brand-logo__watt{ opacity: 0; transform: translateY(10px) scale(.985); }
  .brand-logo.is-play .brand-logo__mc{
    animation: bl_reveal 1100ms cubic-bezier(.16,1,.3,1) forwards;
  }
  .brand-logo.is-play .brand-logo__watt{
    animation: bl_reveal 1100ms cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: .15s;
  }
  .brand-logo.is-play .brand-logo__tag{
    animation: bl_tag 820ms cubic-bezier(.16,1,.3,1) .45s forwards;
  }
  .brand-logo.is-play .brand-bar.bar-1{
    animation: bl_barL 900ms cubic-bezier(.16,1,.3,1) .2s forwards;
  }
  .brand-logo.is-play .brand-bar.bar-2{
    animation: bl_barR 900ms cubic-bezier(.16,1,.3,1) .35s forwards;
  }

  /* keyframes — wipe + leve lift */
  @keyframes bl_reveal{
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px) scale(.985); }
    55%  { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0 0 0 0);     transform: translateY(0)   scale(1);    }
  }
  @keyframes bl_tag{
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes bl_barL{
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: .95; transform: scaleX(1); }
  }
  @keyframes bl_barR{
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: .95; transform: scaleX(1); }
  }

  /* Respeta reduce motion */
  @media (prefers-reduced-motion: reduce){
    .brand-logo__mc,.brand-logo__watt,.brand-logo__tag,.brand-bar{ animation:none !important; opacity:1 !important; transform:none !important; }
  }

  /* Subtítulo: subirlo de forma responsiva sin afectar la animación */
  .brand-logo__tag{
    display: block;
    margin-top: var(--tag-gap, .2rem);
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .12em;
    color: #656b73;
    font-size: clamp(18px, 3vw, 42px);
    opacity: 0;
    transform: translateY(8px);   /* la animación sigue igual */
    position: relative;
    /* 👉 mueve el subtítulo hacia ARRIBA de forma responsiva */
    top: var(--tag-lift, -20vh) !important; /* mueve hacia ARRIBA; vh = responsivo */
  }

  /* (opcional) afina por breakpoint */
  @media (max-width: 992px){
    .brand-hero{ --tag-lift: calc(-1 * clamp(12px, 3vw, 40px)); }
  }
  @media (max-width: 576px){
    .brand-hero{ --tag-lift: calc(-1 * clamp(8px, 2.6vw, 28px)); }
  }




  /* === HERO — Alargar el subtítulo sin cambiar el HTML ================== */
  /* 1) En desktop, que vaya en una sola línea y “crezca” con tracking */
  .brand-logo__tag{
    white-space: nowrap; /* 1 sola línea en pantallas grandes */
    letter-spacing: var(--tag-track, clamp(.10em, .25vw, .35em));
    word-spacing:   var(--tag-word,  clamp(.20em, .40vw, .70em));
  }

  /* 2) Ajustes responsivos para no desbordar en tablets/móviles */
  @media (max-width: 992px){
    .brand-logo__tag{
      letter-spacing: var(--tag-track, clamp(.06em, .18vw, .22em));
      word-spacing:   var(--tag-word,  clamp(.12em, .30vw, .50em));
    }
  }
  @media (max-width: 576px){
    .brand-logo__tag{
      /* en móviles permitimos partir si hace falta */
      white-space: normal;
      letter-spacing: var(--tag-track, .06em);
      word-spacing:   var(--tag-word,  .28em);
    }
  }


  #inicio #heroTyper{ --cta-y: 85% !important; }


  /* === HERO con imagen de fondo (full-bleed) ============================ */
  #inicio.hero-bg{
    background-image: var(--hero-bg);
    background-size: cover;          /* que cubra todo el área */
    background-position: center;     /* centrada */
    background-repeat: no-repeat;
    margin: 0;                       /* sin márgenes */
  }

  /* Asegura que no haya padding lateral en el contenedor interno */
  #inicio.hero-bg .container-fluid{
    padding-left: 0;
    padding-right: 0;
  }

  /* (Opcional) si ves recortes, quita overflow oculto en el logo contenedor */
  #inicio .brand-logo{ overflow: visible; }

  /* (Opcional) si quieres más alto el hero para que siempre llene la pantalla */
  #inicio .brand-logo{
    min-height: clamp(460px, 86vh, 750px);
  }


  /* === HERO con fondo + velo borroso ==================================== */
  /* Asegura que el hero cree un contexto para el overlay */
  #inicio.hero-bg{
    position: relative;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Velo: borra lo que está detrás (el fondo) y aplica una capa blanca */
  #inicio.hero-bg::before{
    content: "";
    position: absolute;
    inset: 0;                           /* cubre todo */
    z-index: 0;
    /* Lava/blanquea la imagen: sube o baja --hero-wash (0 a 1) */
    background: rgba(255, 255, 255, var(--hero-wash, .35));
    /* Borroso real del fondo */
    backdrop-filter: blur(var(--hero-blur, 6px));
    -webkit-backdrop-filter: blur(var(--hero-blur, 6px));
    pointer-events: none;               /* no bloquea clics */
  }

  /* El contenido del hero debe ir por encima del overlay */
  #inicio.hero-bg > *{
    position: relative;
    z-index: 1;
  }

  /* (Opcional) en móviles baja un poco el blur y sube el velo para legibilidad */
  @media (max-width: 576px){
    #inicio.hero-bg::before{
      --hero-blur: 4px;                 /* menos blur en móviles */
      --hero-wash: .44;                 /* un poco más blanco */
    }
  }


  /* ===== HERO: preparación general ===== */
  #inicio.hero-bg{
    position: relative;
    overflow: hidden;         /* que nada se salga al moverse */
    background: none;         /* evitamos doble imagen si existía */
  }

  /* Velo/blanqueo + blur (quedará ENCIMA de la imagen en movimiento) */
  #inicio.hero-bg::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;               /* encima del fondo, debajo del contenido */
    background: rgba(255, 255, 255, var(--hero-wash, .35));
    backdrop-filter: blur(var(--hero-blur, 6px));
    -webkit-backdrop-filter: blur(var(--hero-blur, 6px));
    pointer-events: none;
  }

  /* Contenedor de las dos capas que se mueven */
  #inicio.hero-bg .hero-mover{
    position: absolute;
    inset: 0;
    z-index: 0;               /* fondo real */
  }

  /* Cada “frame” es el mismo fondo, agrandado y moviéndose */
  #inicio.hero-bg .hero-frame{
    position: absolute;
    /* extendemos un poco para que al moverse nunca se vean bordes */
    inset: -8%;
    background-image: var(--hero-bg);
    background-size: 120% 120%;    /* agrandado para tener margen de movimiento */
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    animation: hero-walk var(--walk-speed, 28s) linear infinite;
    transform: translate3d(0,0,0);
  }

  /* La segunda capa empieza “a medio ciclo” para cubrir el salto de la primera */
  #inicio.hero-bg .hero-frame--b{
    animation-delay: calc(var(--walk-speed, 28s) / -2);
  }

  /* Movimiento continuo: como caminando hacia una dirección */
  @keyframes hero-walk{
    0%{
      transform: translate3d(0, 0, 0);
    }
    100%{
      transform: translate3d(var(--walk-x, -6%), var(--walk-y, -4%), 0);
    }
  }

  /* El contenido del hero (logo, botones) siempre por encima del velo */
  #inicio.hero-bg > *{
    position: relative;
    z-index: 2;
  }

  /* (Opcional) en móviles suavizamos un poco */
  @media (max-width: 576px){
    #inicio.hero-bg::before{
      --hero-blur: 4px;
      --hero-wash: .42;
    }
    #inicio.hero-bg .hero-frame{
      background-size: 125% 125%;
    }
  }


  /* === Ajuste de logos en pills === */
  .logo-pill{
    /* ya tienes border/radius en tu CSS; aquí normalizamos tamaño */
    display: inline-grid;
    place-items: center;
    width: clamp(120px, 14vw, 180px);
    height: clamp(60px, 8vw, 84px);
    padding: 0;                /* los logos no necesitan padding de texto */
    border: 1px solid var(--mc-border);
    border-radius: 999px;
    background: var(--mc-card);
  }

  /* Las imágenes se escalan sin deformarse ni salirse */
  .logo-pill img{
    display: block;
    height: clamp(22px, 3.5vw, 34px); /* controla el alto del logo */
    width: auto;                      /* mantiene proporción */
    max-width: 80%;                   /* evita overflow horizontal */
    object-fit: contain;              /* por si el logo es muy ancho/alto */
  }

  /* (Opcional) estilo gris y color al hover
  .logo-pill img{ filter: grayscale(1) opacity(.8); }
  .logo-pill:hover img{ filter: none; opacity: 1; transition: .2s; }
  */


  /* === MCWATT: letras con onda + brillo (HERO) === */
  .brand-logo .mcwatt{
    --logo-size: clamp(72px, 15vw, 260px);
    display: inline-flex;
    gap: .02em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 800;
  }
  .brand-logo .mcwatt span{
    font-size: var(--logo-size);
    background: linear-gradient(90deg, #545454, #545454, var(--mc-primary), #1b63a0);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    animation: mcwatt-shine 6s ease-in-out infinite, mcwatt-wave 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * .09s), calc(var(--i) * .09s);
    transform-origin: 50% 70%;
  }
  @keyframes mcwatt-shine{ 50%{ background-position: 100% 0 } }
  @keyframes mcwatt-wave{
    0%,100%{ transform: translateY(0) rotate(.2deg) }
    50%{ transform: translateY(-10px) rotate(-.6deg) }
  }
  /* Respeta reduce motion */
  @media (prefers-reduced-motion: reduce){
    .brand-logo .mcwatt span{ animation: none }
  }

  :root{ --mc-primary:#2276b6; }

  /* === MCWATT: texto con onda + brillo === */
  .mcwatt{
    display:inline-flex;
    gap:.02em;
    line-height:1;
    letter-spacing:.02em;
    font-weight:800; /* Montserrat 800 ya está cargado en base.html */
  }

  .mcwatt span{
    font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--logo-size, 2rem); /* tamaño por defecto si no se define */
    background: linear-gradient(90deg, #cfeaff, #ffffff, var(--mc-primary), #1b63a0);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    animation: mcwatt-shine 6s ease-in-out infinite, mcwatt-wave 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * .09s), calc(var(--i) * .09s);
    transform-origin: 50% 70%;
  }

  /* Tamaños por contexto */
  .brand-logo .mcwatt{ --logo-size: clamp(72px, 15vw, 260px); } /* HERO */
  .mcwatt--mini{ --logo-size: clamp(20px, 2.8vw, 32px); }       /* NAVBAR */

  @keyframes mcwatt-shine { 50% { background-position: 100% 0; } }
  @keyframes mcwatt-wave{
    0%,100%{ transform: translateY(0) rotate(.2deg); }
    50%    { transform: translateY(-10px) rotate(-.6deg); }
  }

  /* Respeta reduce motion */
  @media (prefers-reduced-motion: reduce){
    .mcwatt span{ animation:none; }
  }



  /* ===== Footer ===== */
  .site-footer{
    background: #172233;
    color: #C7D3E3;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .site-footer a{ color: #C7D3E3; text-decoration: none; }
  .site-footer a:hover{ color: #E3ECF8; text-decoration: underline; }

  .footer-heading{
    color:#E3ECF8;
    font-weight:700;
    letter-spacing:.02em;
    margin-bottom:.75rem;
  }
  .footer-links li{ margin: .25rem 0; }
  .text-footer-muted{ color: #9EB0C7; }
  .footer-sep{ border-color: rgba(255,255,255,.08); opacity:1; }

  .icon-circle{
    display:inline-grid;
    place-items:center;
    width:36px; height:36px;
    border-radius:50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #C7D3E3;
    transition: transform .2s ease, background .2s ease, color .2s ease;
  }
  .icon-circle:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.12);
    color: #fff;
  }

  .lead-xxs{ font-size: .95rem; line-height:1.5; }

  @media (max-width: 576px){
    .site-footer .footer-heading{ margin-top: .5rem; }
  }
  /* ===== /Footer ===== */




  /* El <body> de esta página se vuelve un contenedor flex vertical */
  .page-login{
    min-height: 100svh;             /* cubre todo el alto de la ventana */
    display: flex;
    flex-direction: column;
  }

  /* El contenido del login ocupa el espacio disponible y centra el card */
  .page-login .login-wrap{
    flex: 1 0 auto;
    display: grid;
    place-items: center;             /* centra vertical y horizontal */
    padding-block: clamp(24px, 8vh, 64px);
  }

  /* El footer se empuja al borde inferior SOLO aquí */
  .page-login .site-footer{
    margin-top: auto !important;
  }

  /* Evita que el header fijo oculte el inicio de la sección al navegar con anclas */
  #soluciones, #nosotros, #marcas, #contacto { scroll-margin-top: 96px; }

  @media (max-width: 992px){
    #soluciones, #nosotros, #marcas, #contacto { scroll-margin-top: 72px; }
  }

  /* Bonus: desactiva el "scroll anchoring" dentro del héroe de soluciones
    para que los cambios de altura no muevan la página */
  .solu-hero { overflow-anchor: none; }


  /* Solo detén la animación del logo en el NAVBAR (arriba a la izquierda) */
  .navbar .brand-mcwatt .mcwatt span,
  .navbar .mcwatt--mini span{
    animation: none !important;
    transform: none !important;
    background-position: 0 0 !important;
    transition: none !important;
  }

  /* NAVBAR: logo estático con colores sólidos corporativos */
  .navbar .brand-mcwatt .mcwatt span,
  .navbar .mcwatt--mini span{
    animation: none !important;
    transform: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--mc-dark) !important;
  }
  .navbar .brand-mcwatt .mcwatt span:nth-child(2),
  .navbar .mcwatt--mini span:nth-child(2){
    color: var(--mc-primary) !important;
  }

  /* NAVBAR: logo estático con colores por letra (MC = gris, WATT = celeste) */
  .navbar .brand-mcwatt .mcwatt span,
  .navbar .mcwatt--mini span{
    /* sin animación ni degradado */
    animation: none !important;
    transform: none !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: var(--mc-dark, #4a4a4a) !important; /* color por defecto */
    filter: none !important;
  }

  /* MC (las 2 primeras letras) = gris oscuro */
  .navbar .brand-mcwatt .mcwatt span:nth-child(1),
  .navbar .brand-mcwatt .mcwatt span:nth-child(2),
  .navbar .mcwatt--mini span:nth-child(1),
  .navbar .mcwatt--mini span:nth-child(2){
    color: var(--mc-dark, #4a4a4a) !important;
  }

  /* WATT (desde la 3ra letra) = celeste corporativo */
  .navbar .brand-mcwatt .mcwatt span:nth-child(n+3),
  .navbar .mcwatt--mini span:nth-child(n+3){
    color: var(--mc-primary, #1b63a0) !important;
  }






  /* === HERO: logo + tagline alineados a la izquierda === */
  :root{
    /* Ajusta estos 2 valores a tu gusto */
    --hero-logo-left: clamp(16px, 6vw, 96px);   /* cuánto a la izquierda */
    --hero-logo-size: clamp(50px, 10vw, 100px); /* tamaño del logo grande */
  }

  /* Contenedor del logo del héroe */
  .brand-hero .brand-logo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;         /* ← alinea contenido a la izquierda */
    width: fit-content;
    margin-left: var(--hero-logo-left);
    text-align: left;
  }

  /* Tamaño del texto “MCWATT” */
  .brand-hero .brand-logo .mcwatt{
    --logo-size: var(--hero-logo-size);
  }

  /* Tagline: “GESTIÓN DE PROYECTOS DE INGENIERÍA” */

  /* Si algún contenedor trae .text-center, forzamos a la izquierda solo aquí */
  .brand-hero .brand-logo.text-center,
  .brand-hero .brand-logo__tag.text-center{
    text-align: left !important;
  }



  /* --- Offsets verticales independientes (positivo = bajar, negativo = subir) --- */
  :root{
    --hero-logo-y: 0px;   /* mueve SOLO el texto "MCWATT" */
    --hero-tag-y:  350px;   /* mueve SOLO "GESTIÓN DE PROYECTOS..." */
  }

  /* Logo grande */
  .brand-hero .brand-logo .mcwatt{
    /* Si quieres que empuje el layout, usa margin-top: */
    margin-top: var(--hero-logo-y);
    /* Si prefieres que no afecte el flujo, comenta la de arriba y usa translate:
      transform: translateY(var(--hero-logo-y)); */
  }

  /* Tagline debajo del logo */
  .brand-hero .brand-logo__tag{
    margin-top: var(--hero-tag-y);
    /* Alternativa sin afectar layout:
      transform: translateY(var(--hero-tag-y)); */
  }



  /* HÉROE: tamaño del LOGO y del tagline */
  .brand-hero .brand-logo .mcwatt{
    /* más pequeño aquí ↓ */
    --logo-size: clamp(20px, 5vw, 100px);
    font-family:  Alexandria-Black_3;
  }

  .brand-hero .brand-logo__tag{
    /* si también quieres bajar el subtítulo */
    font-size: clamp(18px, 1.4vw, 13px);
  }


  /* TAGLINE debajo del logo: estilo "tipo Black" usando Montserrat existente */
  .brand-hero .brand-logo__tag{
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;              /* ↑ bien grueso (casi Black) */
    letter-spacing: .18em;         /* tracking similar al logo */
    text-transform: uppercase;     /* como tu línea actual */
    line-height: 1.1;
    color: var(--mc-dark, #4a4a4a);
  }

  /* Si lo quieres aún más “compacto” visualmente (opcional, elige uno): */
  /* A) un pelín más grueso */
  .brand-hero .brand-logo__tag.tag--strong { font-weight: 900; }
  /* B) un poquito menos de espaciado */
  .brand-hero .brand-logo__tag.tag--tight  { letter-spacing: .12em; }


  /* Sube SOLO el párrafo descriptivo del héroe */
  :root{ --hero-desc-y: 40px; }  /* ajusta: -10, -16, -30, etc. */

  .brand-hero .brand-logo__tag_p{
    display:block;
    margin-top: var(--hero-desc-y);   /* mueve hacia arriba (negativo = sube) */
    /* opcionales de lectura (toca si quieres) */
    max-width: 68ch;
    line-height: 1.45;
    font-size: clamp(25px, 1.05vw, 18px);
    color: var(--mc-dark, #4a4a4a);
    text-align: justify;
  }









  /* =========================================================
    HERO con imagen a la derecha (portal)
    - Ajusta tamaño con --portal-w
    - Ajusta posición vertical con --portal-y (positivo baja, negativo sube)
    - Ajusta posición horizontal con --portal-x (positivo mueve a la derecha, negativo a la izquierda)
    ========================================================= */

  @media (min-width: 992px){
    .brand-hero{
      position: relative;
      display: grid;                               /* 2 columnas: texto + imagen */
      grid-template-columns: 1fr minmax(320px, 52vw);
      align-items: center;
      gap: clamp(12px, 3vw, 36px);
      text-align: left;
    }
    .brand-hero .brand-logo{ text-align:left; place-items:start; }



  }


  /* Solo el subtítulo debajo del logo */
  #inicio .brand-logo__tag{
    font-size: clamp(18px, 3.2vw, 20px) !important;
  }

  /* Asegura que el párrafo NO cambie */
  #inicio .brand-logo__tag_p{
    font-size: clamp(14px, 1.05vw, 18px) !important;
  }



  /* === Beneficios bajo botones del HERO ===================== */
  .hero-benefits{
    /* usa el sistema de overlay del hero */
    gap: 16px;
    align-items: stretch;
    pointer-events: auto;                     /* que sean clicables */
    z-index: 2;
  }

  .hero-benefits .benefit{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    padding: 12px 16px;
    min-width: 230px;                         /* ancho similar al ejemplo */
  }

  .hero-benefits .tick{
    width: 18px; height: 18px;
    border-radius: 4px;
    background: #22c55e;                      /* verde */
    display: inline-grid; place-items: center;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
  }
  .hero-benefits .tick::after{
    content: "✔";
    color: #fff;
    font-size: 12px;
    line-height: 1;
  }

  .hero-benefits .benefit span:last-child{
    font-weight: 500;
    color: #384048;
  }

  /* Responsivo: en móvil apílalos y saca el posicionamiento absoluto */
  @media (max-width: 991.98px){
    .hero-benefits{
      position: static !important;
      left: auto; top: auto; transform: none !important;
      opacity: 1; visibility: visible;
      display: grid; grid-template-columns: 1fr;
      gap: 10px;
      width: min(92vw, 560px);
      margin: 10px auto 0;
    }
    .hero-benefits .benefit{ min-width: 0; }
  }

  /* === Ajustes de tamaño y centrado de los beneficios === */
  .hero-benefits{
    /* Puedes cambiar estos valores a gusto */
    --benefit-minw: 250px;   /* ANCHO mínimo del cuadro */
    --benefit-minh: 115px;    /* ALTO mínimo (lo hace más “gordito”) */
    --benefit-pad-y: 18px;   /* padding vertical */
    --benefit-pad-x: 22px;   /* padding horizontal */
    --benefit-gap: 12px;     /* separación entre icono y texto */
    --tick-size: 20px;       /* tamaño del ícono verde */
  }

  .hero-benefits .benefit{
    display: flex;
    align-items: center;                           /* icono + texto centrados verticalmente */
    /* Si los quieres centrados también en horizontal: 
      descomenta la línea de abajo y quedarán al centro del cuadro */
    /* justify-content: center; text-align: center; */

    gap: var(--benefit-gap);
    padding: var(--benefit-pad-y) var(--benefit-pad-x);
    min-width: var(--benefit-minw);
    min-height: var(--benefit-minh);
  }

  .hero-benefits .tick{
    width: var(--tick-size);
    height: var(--tick-size);
    border-radius: 6px;                             /* opcional, un pelín más suave */
  }






  /* ===== Tarjetas “Nuestras soluciones” (grid) ===== */
  .solu-cards{
    --card-gap: 22px;
    --card-pad: 18px 20px;
    --card-minw: 320px;
    --card-minh: 120px;

    display: grid;
    grid-template-columns: repeat(3, minmax(var(--card-minw), 1fr));
    gap: var(--card-gap);
    max-width: 1200px;
    margin: 5.25rem auto 5.25rem; /* ↑ más espacio arriba (título) y abajo (pills/carrusel) */
    padding: 0 10px;
  }

  .solu-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    padding: var(--card-pad);
    min-height: var(--card-minh);

    
  }



  .solu-card p{
    color: #f0f2f5;
    margin: 0;
    line-height: 1.45;
  }

  /* Responsive */
  @media (max-width: 1199.98px){
    .solu-cards{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  }
  @media (max-width: 767.98px){
    .solu-cards{ grid-template-columns: 1fr; }
  }


  /* === Tema azul para tarjetas de “Nuestras soluciones” === */
  .solu-cards{
    /* variables para que puedas “jugar” luego si quieres */
    --card-bg:        #f7fafd;    /* fondo normal */
    --card-fg:        #0a0a0a;    /* texto normal sobre fondo azul */
    --card-border:    #1c1d1d;    /* borde normal */

    --card-bg-hover:  #EAF3FF;    /* fondo en hover */
    --card-fg-hover:  #545454;    /* texto en hover */

    --card-shadow:        0 10px 28px rgba(5, 5, 5, 0.22);
    --card-shadow-hover:  0 16px 36px rgba(3, 3, 3, 0.28);
  }

  /* base */
  .solu-card{
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--card-fg);
    box-shadow: var(--card-shadow);
    transition:
      background-color .28s ease,
      color .28s ease,
      border-color .28s ease,
      box-shadow .25s cubic-bezier(.16,1,.3,1),
      transform .25s cubic-bezier(.16,1,.3,1);
  }

  /* colores internos */
  .solu-card h3{ color: var(--card-fg); }
  .solu-card p { color: #080808; }  /* un pelín más claro que el título */

  /* “brillo” suave en la esquina al pasar el mouse */
  .solu-card::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    border-radius: inherit;
    background:
      radial-gradient(120% 80% at -10% -20%, rgba(255,255,255,.22), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
  }

  /* hover / focus (accesible con teclado) */
  .solu-card:hover,
  .solu-card:focus-within{
    background: var(--card-bg-hover);
    color: var(--card-fg-hover);
    border-color: #545454;
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
  }
  .solu-card:hover::after,
  .solu-card:focus-within::after{ opacity: .9; }

  /* asegurar que el texto cambie también */
  .solu-card:hover h3,
  .solu-card:hover p,
  .solu-card:focus-within h3,
  .solu-card:focus-within p{ color: var(--card-fg-hover); }







  /* ===== Footer v2 (modelo imagen) =============================== */
  .site-footer{
    /* Colores base (ajústalos si quieres acercar aún más el tono) */
    --ft-grad-a: #545454;   /* violeta superior */
    --ft-grad-b: #545454;   /* violeta más oscuro */
    --ft-text:   #f5f6f8;   /* texto principal */
    --ft-muted:  #f4f4f5;   /* texto suave */
    --ft-accent: #f3f4f8;   /* botón */
    --ft-accent-txt: #0B1C3B;
    --ft-bottom:#545454;

    background: transparent;
    color: var(--ft-text);
    padding: 0;  /* quitamos paddings viejos */
  }

  /* Franja superior */
  .site-footer .ft-top{
    background: linear-gradient(180deg, var(--ft-grad-a) 0%, var(--ft-grad-b) 100%);
    padding: 42px 0 28px;
  }

  /* Franja inferior */
  .site-footer .ft-bottom{
    background: var(--ft-bottom);
    backdrop-filter: saturate(120%) blur(0.0px);
    -webkit-backdrop-filter: saturate(120%) blur(0.0px);
    border-top: 1px solid rgba(255,255,255,.18);
    padding: 10px 0;
    color: var(--ft-muted);
  }

  /* Tipografías */
  .site-footer .brand-subtitle{ color: var(--ft-muted); }
  .site-footer .ft-heading{
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 .5rem 0;
  }
  .site-footer .ft-text{ color: var(--ft-muted); }

  /* Listas de contacto */
  .site-footer .ft-list{
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--ft-text);
  }
  .site-footer .ft-list li{
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: .40rem 0;
    line-height: 1.45;
    color: var(--ft-muted);
  }
  .site-footer .ft-ico{
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Botón CTA */
  .site-footer .btn-ft{
    background: var(--ft-accent);
    color: var(--ft-accent-txt);
    border: none;
    border-radius: 10px;
    padding: .98  rem 1rem;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    transition: transform .18s ease, filter .18s ease;
  }
  .site-footer .btn-ft:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
  }

  /* Enlaces franja inferior */
  .site-footer .ft-bottom .ft-link{
    color: var(--ft-muted);
    text-decoration: none;
  }
  .site-footer .ft-bottom .ft-link:hover{
    color: #FFFFFF;
    text-decoration: underline;
  }

  /* Responsive */
  @media (max-width: 991.98px){
    .site-footer .ft-top{ padding: 34px 0 22px; }
  }
  @media (max-width: 575.98px){
    .site-footer .ft-top{ padding: 28px 0 18px; }
    .site-footer .ft-list li{ margin: .3rem 0; }
  }
  /* ===== /Footer v2 ============================================== */




  /* ===== NOSOTROS ===== */
  .about-sec, .about-v2{ position: relative; }

  /* Corrección: mueve sutilmente el texto a la izquierda con variable */
  #nosotros .about-copy{
    transform: translateX(var(--about-shift, -12px));
  }

  /* Título y párrafo (puedes afinar colores si quieres) */
  #nosotros .about-title{
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 800;
    letter-spacing: .4px;
    color: #1a3b66;
    margin-bottom: .6rem;
  }
  #nosotros .about-lead{
    font-size: var(--lead-size, clamp(16px, 1.12vw, 20px));
    line-height: 1.75;
    color: #2d3b48;
  }

  /* IMAGEN: llenar contenedor, sin marcos/blancos */
  #nosotros .about-photo{
    /* quita márgenes por defecto del <figure> y cualquier “marco” */
    margin: 0 0 0 auto;
    background: transparent;
    padding: 0;

    /* tarjeta visual */
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,.18);

    /* asegura proporción agradable y que “llene” */
    width: 100%;
    aspect-ratio: 4 / 3;           /* cambia a 16/9 si la quieres más panorámica */
  }
  #nosotros .about-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;              /* llena sin dejar blancos */
    border-radius: inherit;
  }

  /* Responsive: en móvil quita el corrimiento y centra la foto */
  @media (max-width: 991.98px){
    #nosotros .about-copy{ transform: none; }
    #nosotros .about-photo{ margin: 0 auto; max-width: 680px; }
  }


  /* Igual altura también a nivel de col para asegurar relleno */
  #nosotros .about-row > [class*="col-"]{ display: flex; }

  /* Texto con “empuje” opcional */
  #nosotros .about-copy{
    margin-left: var(--about-nudge, -22px);  /* mueve más a la izq si quieres */
    align-self: center;                      /* centra verticalmente el texto */
  }

  /* Contenedor de foto: ocupa TODO el alto de la columna */
  #nosotros .about-photo{
    position: relative;
    margin: 0 0 0 auto;
    width: 100%;
    height: 100%;                 /* << clave: llena la col completa */
    border-radius: 28px;
    overflow: hidden;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
  }

  /* La imagen cubre 100% sin dejar espacios */
  #nosotros .about-photo img{
    position: absolute; inset: 0; /* pega a los bordes del figure */
    width: 100%; height: 100%;
    object-fit: cover;            /* rellena y recorta lo que sobre */
    border-radius: inherit;
  }

  /* Responsive: sin empuje y foto centrada */
  @media (max-width: 991.98px){
    #nosotros .about-copy{ margin-left: 0; }
    #nosotros .about-row > [class*="col-"]{ display: block; }
    #nosotros .about-photo{ height: auto; max-width: 680px; margin: 0 auto; }
    #nosotros .about-photo img{ position: static; height: auto; }
  }


    /* ==========================
    LOGO DEL HERO: ESTÁTICO
    ========================== */

  /* (Por si no existieran, define los colores corporativos) */
  :root{
    --mc-dark: #545454;     /* gris para M y C (igual que el header) */
    --mc-primary: #2377b5;  /* azul para WATT (igual que el header) */
  }

  /* 1) Quita TODAS las animaciones/efectos del texto MCWATT */
  #inicio .brand-logo.static .mcwatt span{
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: currentColor !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }

  /* 2) Fija los colores como el logo superior:
        - M y C en gris
        - W, A, T, T en azul */
  #inicio .brand-logo.static .mcwatt span:nth-child(-n+2){
    color: var(--mc-dark) !important;
    -webkit-text-fill-color: var(--mc-dark) !important;
  }
  #inicio .brand-logo.static .mcwatt span:nth-child(n+3){
    color: var(--mc-primary) !important;
    -webkit-text-fill-color: var(--mc-primary) !important;
  }

  /* 3) Quita también animaciones del subtítulo/barras si las hubiera */
  #inicio .brand-logo.static .brand-logo__tag,
  #inicio .brand-logo.static .brand-logo__tag_p,
  #inicio .brand-logo.static .brand-bar{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    top: 0 !important;
    filter: none !important;
  }


  /* ===== HERO PORTAL (versión definitiva) ===== */
  /* Contenedor con fondo que LLENA TODO, sin huecos ni márgenes */
  #inicio .hero-portal{
    /* sin márgenes/padding que agregan huecos */
    margin: 0 !important;
    padding: 0 !important;

    /* dimensiones/posición controlables por variables inline */
    width: clamp(320px, var(--portal-w, 50vw), 1000px) !important;
    transform: translate(var(--portal-x, 0px), var(--portal-y, 0px)) !important;

    /* fondo = la imagen (cubre todo) */
    background: var(--portal-img) center / cover no-repeat !important;

    /* tarjeta visual */
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.10) !important;

    /* altura para que se vea llena aun si el texto de la izquierda es corto */
    min-height: 420px !important;
    max-height: min(80vh, 860px) !important;

    /* que se comporte como bloque normal */
    display: block !important;
    background-color: #fff; /* base por si tarda en cargar la imagen */
  }

  /* En móvil: ocupa el ancho total y una altura razonable */
  @media (max-width: 991.98px){
    #inicio .hero-portal{
      width: 100% !important;
      min-height: 300px !important;
      transform: none !important;
    }
  }

  /* === Quitar el fondo blanco del portal del héroe (derecha) === */
  #inicio .hero-portal{
    /* SIN tarjeta: ni fondo, ni sombra */
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;

    /* si no quieres esquinas redondeadas, deja 0; si sí quieres, pon 18px */
    border-radius: 0 !important;

    /* por si algún estilo anterior metió espacios */
    margin: 0 !important;
    padding: 0 !important;

    /* deja ver la imagen hasta el borde */
    overflow: visible !important;

    /* si usas mi versión con fondo por CSS, mantenla pero SIN color de base */
    background-image: var(--portal-img) !important;         /* <- tu imagen */
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* Si hay pseudo-elementos pintando una tarjeta, elimínalos */
  #inicio .hero-portal::before,
  #inicio .hero-portal::after{
    content: none !important;
  }

  /* Si usas <figure class="hero-portal"> en lugar de <div> */
  #inicio figure.hero-portal{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }


  /* ============================
    NAV hover "glass pill" suave
    ============================ */
  :root{
    --mc-primary: #2377b5;                 /* tu azul corporativo */
    --nav-pill-a: rgba(35,119,181,.18);    /* capa fuerte (centro) */
    --nav-pill-b: rgba(35,119,181,.10);    /* capa suave (borde)  */
    --nav-pill-shadow: 0 6px 20px rgba(35,119,181,.16);
  }

  /* mata cualquier subrayado viejo */
  #mcNav .navbar-nav .nav-link::after{ display:none !important; }

  /* base del link */
  #mcNav .navbar-nav .nav-link{
    position: relative;
    padding: .45rem .80rem;
    border-radius: 12px;
    color: inherit;
    transition: color .25s ease, transform .25s ease;
    overflow: hidden;              /* para que el pill no se salga */
    z-index: 0;                    /* el ::before queda debajo */
  }

  /* “pill” de glass (fondo) */
  #mcNav .navbar-nav .nav-link::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* degradé radial para que parezca luz suave */
    background:
      radial-gradient(140% 140% at 30% 20%, var(--nav-pill-a) 0%, var(--nav-pill-b) 35%, transparent 72%);
    opacity: 0;
    transform: scale(.92);
    transition:
      opacity .28s ease,
      transform .32s cubic-bezier(.2,.6,.2,1);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    z-index: -1;                   /* detrás del texto */
  }

  /* hover / focus: aparece el glass suavito */
  #mcNav .navbar-nav .nav-link:hover,
  #mcNav .navbar-nav .nav-link:focus{
    color: var(--mc-primary);
    transform: translateY(-1px);
  }
  #mcNav .navbar-nav .nav-link:hover::before,
  #mcNav .navbar-nav .nav-link:focus::before{
    opacity: 1;
    transform: scale(1);
    box-shadow: var(--nav-pill-shadow);
  }

  /* página activa: pill persistente, un pelín más marcado */
  #mcNav .navbar-nav .nav-link.active,
  #mcNav .navbar-nav .nav-link[aria-current="page"]{
    color: var(--mc-primary);
  }
  #mcNav .navbar-nav .nav-link.active::before,
  #mcNav .navbar-nav .nav-link[aria-current="page"]::before{
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(35,119,181,.18) inset, var(--nav-pill-shadow);
  }

  /* accesibilidad: enfoque teclado visible */
  #mcNav .navbar-nav .nav-link:focus-visible{
    outline: 2px solid rgba(35,119,181,.45);
    outline-offset: 2px;
  }

  /* un poco de aire en móvil */
  @media (max-width: 991.98px){
    #mcNav .navbar-nav .nav-link{ margin: .2rem 0; }
  }

  /* respeta usuarios con “reducir movimiento” */
  @media (prefers-reduced-motion: reduce){
    #mcNav .navbar-nav .nav-link,
    #mcNav .navbar-nav .nav-link::before{
      transition: none;
    }
  }


  @media (min-width: 992px){
    #mcNav .navbar-nav{ margin-right: 70px !important; } /* ajusta 8px a tu gusto */
  }


  /* Modal de soluciones */
  #modalSoluciones .card-img-top{
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
  }
  #modalSoluciones .modal-body{ padding-top: 1rem; }


  /* Modal de cotización: uñita estética */
  #modalCotizar .modal-content{
    border-radius: 18px;
    box-shadow: 0 18px 56px rgba(0,0,0,.18);
  }
  #modalCotizar .modal-header .small{
    letter-spacing: .12em;
  }


  /* Prioridad sobre cualquier overlay del sitio */
  #modalCotizar { z-index: 1200; }
  .modal-backdrop.show { z-index: 1190; }

  /* Centrado correcto y altura/scroll interno */
  #modalCotizar .modal-dialog { margin: 0 auto; }               /* evita empujarlo abajo */
  #modalCotizar .modal-content {
    max-height: calc(100vh - 3rem);                              /* que nunca se salga de la pantalla */
    display: flex;
    flex-direction: column;
  }
  #modalCotizar .modal-body {
    overflow: auto;                                              /* si el contenido es largo, que scrollee dentro */
  }

  /* Subirlo un poco visualmente (ajusta el -2vh a tu gusto) */
  @media (min-width: 576px){
    #modalCotizar .modal-dialog { transform: translateY(-2vh); } /* -2vh = un poquito más arriba */
  }

  /* Estética opcional */
  #modalCotizar .modal-content{ border-radius:18px; box-shadow:0 18px 56px rgba(0,0,0,.18); }
  #modalCotizar .modal-header .small{ letter-spacing:.12em; }


  /* === Modal de cotización: por encima de TODO === */
  #modalCotizar { 
    z-index: 20000 !important;                 /* más alto que cualquier nav/overlay */
  }
  .modal-backdrop.show {
    z-index: 19990 !important;                 /* backdrop justo debajo del modal */
  }

  /* Subir un poco el modal y permitir scroll interno si el contenido es largo */
  #modalCotizar .modal-dialog { 
    margin: 0 auto;
    transform: translateY(-4vh);               /* súbelo (ajusta -2vh, -6vh a tu gusto) */
  }
  #modalCotizar .modal-content {
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
  }
  #modalCotizar .modal-body { 
    overflow: auto;
  }

  /* Asegura que el botón de cerrar queda clickeable */
  #modalCotizar .modal-header,
  #modalCotizar .btn-close {
    position: relative;
    z-index: 20001;                            /* por encima de cualquier overlay raro */
  }

  /* Cuando hay modal abierto, desactiva clicks del fondo (footer/logos) */
  body.modal-open footer,
  body.modal-open .logos-track {
    pointer-events: none;                      /* el fondo no intercepta clics */
  }

  /* Estética opcional */
  #modalCotizar .modal-content{ border-radius:18px; box-shadow:0 18px 56px rgba(0,0,0,.18); }
  #modalCotizar .modal-header .small{ letter-spacing:.12em; }



  /* ===== FIX MODAL COTIZAR (encima de todo y clickeable) ===== */

  /* Subir por encima de cualquier overlay del sitio */
  #modalCotizar{
    position: fixed;                /* Bootstrap ya lo usa, reforzamos */
    z-index: 2147483000 !important; /* más alto que todo */
  }

  /* Backdrop inmediatamente debajo del modal */
  .modal-backdrop.show{
    z-index: 2147482900 !important;
  }

  /* Centrado y un poco más arriba */
  #modalCotizar .modal-dialog{
    margin: 0 auto;
    transform: translateY(-6vh);    /* súbelo/ajusta: -4vh, -8vh, etc. */
  }

  /* Si el contenido es largo, que scrollee dentro del modal */
  #modalCotizar .modal-content{
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
  }
  #modalCotizar .modal-body{ overflow: auto; }

  /* Asegura que el botón X sea clickeable, sin capas encima */
  #modalCotizar .modal-header,
  #modalCotizar .btn-close{
    position: relative;
    z-index: 2147483100; /* por arriba del resto del modal y del fondo */
    pointer-events: auto;
  }

  /* Mientras el modal esté abierto, el fondo NO recibe clics */
  body.modal-open header,
  body.modal-open footer,
  body.modal-open .hero,
  body.modal-open .hero-portal,
  body.modal-open .hero-mover,
  body.modal-open .logos-track,
  body.modal-open #soluciones,
  body.modal-open #marcas{
    pointer-events: none !important;
  }

  /* Estética opcional (deja igual si ya la pusiste) */
  #modalCotizar .modal-content{ border-radius:18px; box-shadow:0 18px 56px rgba(0,0,0,.18); }
  #modalCotizar .modal-header .small{ letter-spacing:.12em; }



  /* ===== Proyectos grid ===== */
  .projects-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  @media (max-width: 992px){
    .projects-grid{ grid-template-columns: repeat(6, 1fr); }
  }
  @media (max-width: 576px){
    .projects-grid{ grid-template-columns: repeat(4, 1fr); gap:16px; }
  }

  .pcard{
    grid-column: span 4;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(0,0,0,.12);
    cursor: pointer;
    background: #111;
    transform: translateZ(0);
  }
  .pcard .pc-img{
    width: 100%; height: 100%;
    aspect-ratio: 16/11;
    object-fit: cover;
    display: block;
    transition: transform .6s ease, filter .6s ease;
  }
  .pcard .pc-overlay{
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.72) 32%, rgba(10,10,10,.92) 100%);
    color: #fff;
    transform: translateY(48%);
    transition: transform .35s ease;
  }
  .pcard:hover .pc-img{ transform: scale(1.05); filter: brightness(.9); }
  .pcard:hover .pc-overlay{ transform: translateY(0%); }

  @media (hover:none){
    .pcard .pc-overlay{ transform: translateY(0%); }
  }


  /* ====== PROYECTOS: Tarjeta con overlay ====== */
  .proj-card{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    outline: none;
  }
  .proj-card:focus-visible{
    box-shadow: 0 0 0 3px rgba(21, 101, 216, .35), 0 10px 28px rgba(0,0,0,.12);
  }

  .proj-img{
    display: block;
    width: 100%;
    height: 320px;          /* ajusta si quieres más alto */
    object-fit: cover;
  }

  /* Capa de información (gradient + contenido al fondo) */
  .proj-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,0) 65%
    );
    transition: background .35s ease;
  }

  /* Título: SIEMPRE visible */
  .proj-title{
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
  }

  /* Descripción: OCULTA en reposo, aparece en hover/focus */
  .proj-desc{
    color: #fff;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(6px);
    max-height: 0;
    overflow: hidden;
    transition: opacity .25s ease, transform .25s ease, max-height .35s ease;
    white-space: pre-wrap; /* respeta saltos de línea */
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }

  /* Efecto al hover y al usar teclado (focus-within) */
  .proj-card:hover .proj-overlay,
  .proj-card:focus-within .proj-overlay{
    background: linear-gradient(
      to top,
      rgba(0,0,0,.80) 5%,
      rgba(0,0,0,.55) 40%,
      rgba(0,0,0,.08) 85%,
      rgba(0,0,0,0) 100%
    );
  }
  .proj-card:hover .proj-desc,
  .proj-card:focus-within .proj-desc{
    opacity: 1;
    transform: none;
    max-height: 75vh; /* grande para que quepa completa; ajustable */
  }

  /* Opcional: borde suave al pasar mouse */
  .proj-card:hover .proj-img{
    filter: saturate(1.02);
  }


  /* ============================
    NAVBAR RIPPLE (clip-path circular)
    Restaura la animación al hacer click en los enlaces del navbar
    ============================ */
  :root{
    /* Duraciones que lee el JS (base.html) */
    --nav-ripple-in: 750ms;
    --nav-ripple-out: 650ms;
  }

  /* Capa de revelado que usa el JS (ya existe el <div id="pageReveal"> en base.html) */
  .page-reveal{
    position: fixed;
    inset: 0;
    z-index: 2000;              /* por encima del contenido */
    pointer-events: none;       /* no bloquea clics */
    /* halo suave + tu fondo */
    background:
      radial-gradient(140% 140% at var(--cx,50%) var(--cy,0),
        rgba(35,119,181,.18) 0%,
        rgba(35,119,181,.12) 35%,
        rgba(35,119,181,.06) 55%,
        transparent 65%),
      linear-gradient(180deg, var(--mc-bg), var(--mc-bg-2));
    opacity: 1;

    /* punto de inicio: un círculo de radio 0 en la coordenada del click */
    clip-path: circle(0 at var(--cx,50%) var(--cy,0));
    -webkit-clip-path: circle(0 at var(--cx,50%) var(--cy,0));
    transition:
      clip-path var(--nav-ripple-in) cubic-bezier(.2,.6,.2,1),
      -webkit-clip-path var(--nav-ripple-in) cubic-bezier(.2,.6,.2,1),
      opacity .25s ease;
    will-change: clip-path, opacity;
    isolation: isolate;
  }

  /* expansión: el JS establece --r, --cx, --cy en cada click */
  .page-reveal.reveal-in{
    clip-path: circle(var(--r,0) at var(--cx,50%) var(--cy,0));
    -webkit-clip-path: circle(var(--r,0) at var(--cx,50%) var(--cy,0));
  }

  /* replegado */
  .page-reveal.reveal-out{
    transition:
      clip-path var(--nav-ripple-out) ease-in,
      -webkit-clip-path var(--nav-ripple-out) ease-in,
      opacity .35s ease;
    clip-path: circle(0 at var(--cx,50%) var(--cy,0));
    -webkit-clip-path: circle(0 at var(--cx,50%) var(--cy,0));
    opacity: 0;
  }

  /* Micro feedback al “press” del link (extra, opcional y suave) */
  #mcNav .navbar-nav .nav-link:active{
    transform: translateY(0) scale(.98);
  }
  #mcNav .navbar-nav .nav-link:active::before{
    opacity: 1;
    box-shadow: 0 6px 18px rgba(35,119,181,.22),
                0 0 0 1px rgba(35,119,181,.18) inset;
  }



  ------------------------------------------------------------
  /* Modal de soluciones */
  #modalSoluciones .card-img-top{
    aspect-ratio: 16/9;
    object-fit: cover;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
  }

  /* ✅ Justificar descripciones dentro del modal */
  #modalSoluciones .card-text{
    text-align: justify;        /* Justifica las líneas */
    text-justify: inter-word;   /* Ajuste clásico entre palabras */
    hyphens: auto;              /* Silabeo automático */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: anywhere;    /* Evita desbordes en móvil */
    line-height: 1.45;          /* Mejor lectura */
    text-align-last: left;      /* La última línea no se estira */
  }

  /* Opcional: tipografía más bonita si el navegador lo soporta */
  #modalSoluciones .card-body{
    text-wrap: pretty;
  }

  /* ====== PROYECTOS: justificar la descripción del overlay ====== */
  #proyectos .proj-overlay .proj-desc,
  #proyectos .proj-overlay .proj-desc p{
    text-align: justify;        /* Justifica las líneas */
    text-justify: inter-word;   /* Ajuste clásico entre palabras */
    hyphens: auto;              /* Silabeo automático */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: anywhere;    /* Evita desbordes en móvil */
    line-height: 1.45;          /* Mejor lectura */
    text-align-last: left;      /* La última línea no se estira */
  }

  /* (Opcional) separa líneas si tu contenido trae <br> por los saltos */
  #proyectos .proj-overlay .proj-desc br{
    content: "";
    display: block;
    margin-bottom: .35rem;
  }

  /* FOOTER: dejar el logo quieto (sin animación) */
  footer .mcwatt,
  footer .mcwatt *{
    animation: none !important;
    transform: none !important;
  }


  /* ==== FOOTER: MCWATT estático y con los mismos colores del header ==== */

  /* 1) Congelar cualquier animación y transform del logo en footer */
  :is(footer, #footer, .site-footer) .mcwatt,
  :is(footer, #footer, .site-footer) .mcwatt *{
    animation: none !important;
    transform: none !important;
  }

  /* 2) Resetear efectos heredados del header (gradiente, blend, text-fill) */
  :is(footer, #footer, .site-footer) .mcwatt{
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: initial !important; /* hace que use 'color' */
    mix-blend-mode: normal !important;
    filter: none !important;
  }

  /* 3) Definir colores de marca (usa los del header si ya existen en :root) */
  :root{
    --brand-mc:  #545454 ;   /* AJUSTA a tu tono de "MC" del header */
    --brand-watt: #2276b6; /* AJUSTA a tu tono de "WATT" del header */
  }

  /* 4) Pintar letras: M y C con --brand-mc, WATT con --brand-watt */
  :is(footer, #footer, .site-footer) .mcwatt span:nth-child(-n+2){
    color: var(--brand-mc) !important;            /* M, C */
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }
  :is(footer, #footer, .site-footer) .mcwatt span:nth-child(n+3){
    color: var(--brand-watt) !important;          /* W, A, T, T */
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }


  /* En desktop, el hero puede ocupar casi toda la pantalla */
  #inicio.hero{
    min-height: 84vh;                 /* más alto para que entre el portal */
  }

  /* El contenedor no debe recortar el portal grande */
  #inicio .container-fluid{ overflow: visible; }



/* ====== FIN HERO PORTAL (responsivo) ====== *

  /* === OVERRIDE HERO PORTAL (quitar topes de ancho/alto) === */
  #inicio .hero-portal{
    width: var(--portal-w, 80vw) !important;     /* SIN clamp */
    height: var(--portal-h, 70vh) !important;    /* usa la variable */
    min-height: unset !important;
    max-height: none !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* Por si algún contenedor lo recorta */
  #inicio .container-fluid,
  #inicio .brand-hero{ overflow: visible !important; }





  /* Habilita desplazamiento suave para anclas */
  html{ scroll-behavior: smooth; }

  /* Asegura que el hero sea referencia para el posicionamiento */
  #inicio{ position: relative; }

  /* Bloque del indicador */
  .hero-scroll{
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 3.5vh, 44px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 12;                   /* por encima del fondo del hero */
    color: rgba(255,255,255,.9);
    pointer-events: auto;
    text-align: center;
  }
  .hero-scroll__text{
    font-size: .9rem;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }

  /* Botón circular con chevron animado */
  .hero-scroll__btn{
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 1.6px solid rgba(255,255,255,.75);
    display: grid; place-items: center;
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(4px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .hero-scroll__btn:hover{ transform: translateY(2px); background: rgba(0,0,0,.26); border-color:#fff; }

  /* Chevron hecho con bordes */
  .hero-scroll__btn .chev{
    width: 13px; height: 13px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    animation: arrowMove 1.35s ease-in-out infinite;
    opacity: .9;
  }

  @keyframes arrowMove{
    0%   { transform: translateY(-2px) rotate(45deg); opacity:.6; }
    50%  { transform: translateY(5px)  rotate(45deg); opacity:1;  }
    100% { transform: translateY(-2px) rotate(45deg); opacity:.6; }
  }

  /* Accesibilidad: si el usuario prefiere menos movimiento */
  @media (prefers-reduced-motion: reduce){
    .hero-scroll__btn .chev{ animation: none; }
  }

  /* Ajustes móviles */
  @media (max-width: 576px){
    .hero-scroll__btn{ width: 42px; height: 42px; }
    .hero-scroll__text{ font-size: .85rem; }
  }


  /* Quitar espacio sobrante en Soluciones */
  #soluciones .solutions-grid{
    margin-bottom: 0;
  }

  /* Por si algún botón/tarjeta estuviera aportando margen inferior */
  #soluciones .solu-card{
    margin-bottom: 0;
  }


  /* ===== Soluciones: ancho estable y 100% responsivo ===== */
  :root{
    --page-max: 1600px;                        /* tope superior en pantallas enormes/zoom 50% */
    --page-gutter: clamp(16px, 3.2vw, 48px);   /* respiración a los lados */
  }

  /* Contenedor de la sección (sin “estirarse infinito” pero bien ancho) */
  #soluciones > .container{
    width: 100%;
    max-width: clamp(1140px, 92vw, var(--page-max)) !important;
    margin-inline: auto;
    padding-inline: var(--page-gutter) !important;
  }

  @media (max-width: 1200px){
    #soluciones .solutions-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px){
    #soluciones .solutions-grid{ grid-template-columns: 1fr; }
  }

  /* Las tarjetas no deben meter márgenes extras */
  #soluciones .solu-card{
    width: 100%;
    margin: 0;
  }

  /* (Opcional) que PROYECTOS use el mismo ancho y gutters para alinear perfecto */
  #proyectos > .container{
    max-width: clamp(1140px, 92vw, var(--page-max)) !important;
    padding-inline: var(--page-gutter) !important;
    margin-inline: auto;
  }



  /* ====== NUESTRAS SOLUCIONES esto dejar – Look mejorado + tarjetas estirables ====== */

  /* Grid estable (3→2→1) y sin “encogerse” raro con zoom */
  #soluciones .solutions-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;           /* 🔹 estira los items a misma altura de fila */
  }

  /* ↓ breakpoints */
  @media (max-width: 1200px){
    #soluciones .solutions-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px){
    #soluciones .solutions-grid{ grid-template-columns: 1fr; }
  }

  /* Tarjeta (es un <button>) con mejor UI y configurable en altura */
  #soluciones .solu-card{
    /* 👉 controla la ALTURA con esta variable */
    --card-h: 220px;                /* súbela para “estirar” cada cuadrito (p.ej. 240–280px) */

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .45rem;

    height: 100%;
    min-height: var(--card-h);
    margin: 0;                      /* sin márgenes extra */
    padding: clamp(18px, 2.2vw, 28px);
    text-align: left;

    border-radius: 18px;
    border: 1.5px solid rgba(0,0,0,.14);
    background:
      radial-gradient(1200px 240px at 90% 0%, rgba(56,132,255,.08), transparent 45%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,255,.96));
    box-shadow: 0 10px 24px rgba(0,0,0,.08);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    position: relative; overflow: hidden; cursor: pointer;
  }

  /* Acento lateral sutil */
  #soluciones .solu-card::after{
    content:""; position:absolute; left:-1px; top:0; bottom:0; width:6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #2b6cb0, #60a5fa);
    transform: translateX(-6px);
    opacity:.9; transition: transform .2s ease, opacity .2s ease;
  }

  /* Hover/Focus */
  #soluciones .solu-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
    border-color: rgba(56,132,255,.35);
  }
  #soluciones .solu-card:hover::after{ transform: translateX(0); opacity:1; }
  #soluciones .solu-card:focus-visible{ outline: 2px solid #60a5fa; outline-offset: 2px; }

  /* Tipografía dentro de la tarjeta */
  #soluciones .solu-card h3{
    margin: 0 0 .25rem;
    font-weight: 800;
    font-size: clamp(1.1rem, 1rem + .6vw, 1.6rem);
    line-height: 1.2;
  }
  #soluciones .solu-card p{
    margin: 0;
    color: #475569;
    line-height: 1.55;
  }

  /* En móvil, deja que la altura sea natural para no “aplastar” */
  @media (max-width: 640px){
    #soluciones .solu-card{ --card-h: auto; }
  }



  /* === SOLUCIONES: control de columnas (ancho/largo por tarjeta) === */
  #soluciones{
    --sol-cols: ;       /* 🔧 pon 2 para que cada tarjeta sea MÁS LARGA (antes era 3) */
  }

  #soluciones .solutions-grid{
    display: grid !important;
    grid-template-columns: repeat(var(--sol-cols, 3), minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
  }

  /* Responsivo: en pantallas medianas 2 cols, en móvil 1 col */
  @media (max-width: 1200px){
    #soluciones{ --sol-cols: 2; }
  }
  @media (max-width: 640px){
    #soluciones{ --sol-cols: 1; }
  }







  /* ===== Soluciones: 3→2→1 columnas ===== */
  #soluciones .solutions-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(16px, 2vw, 28px);
  }
  @media (max-width:1200px){
    #soluciones .solutions-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width:640px){
    #soluciones .solutions-grid{ grid-template-columns: 1fr; }
  }

  /* ===== Rellenar la última fila sin huecos (solo CSS) ===== */
  /* Layout de 3 columnas (desktop):                                      */
  /* - Si el total ≡ 1 (mod 3), el ÚLTIMO ocupa las 3 columnas.            */
  /* - Si el total ≡ 2 (mod 3), el ÚLTIMO ocupa 2 columnas.                */
  @media (min-width:1201px){
    #soluCards > .solu-card:last-child:nth-child(3n+1){ grid-column: 1 / -1; } /* 1 en última fila */
    #soluCards > .solu-card:last-child:nth-child(3n+2){ grid-column: span 2; }  /* 2 en última fila */
  }

  /* Layout de 2 columnas (tablets): si el total es impar, el último ocupa ambas */
  @media (max-width:1200px) and (min-width:641px){
    #soluCards > .solu-card:last-child:nth-child(2n+1){ grid-column: 1 / -1; }
  }



  /* === Soluciones: reducir márgenes laterales del contenedor === */
  @media (min-width: 1200px){
    #soluciones > .container{
      /* Aumenta el ancho máximo del container SOLO en esta sección */
      max-width: 1580px !important;   /* sube a 1520/1560 si quieres aún menos margen */
      padding-left: clamp(8px, 1.2vw, 16px) !important;  /* menos padding lateral */
      padding-right: clamp(8px, 1.2vw, 16px) !important;
    }
  }
  /* En móvil/tablet se mantiene el comportamiento normal */



  /* ================== HERO (HEADER #inicio) — FIX ANTI-DESCUADRE ================== */
  #inicio.hero{
    --hero-min-h: clamp(520px, 70vh, 900px);
    --hero-pad-x: clamp(12px, 2.5vw, 32px);
    --hero-pad-y: clamp(24px, 6vh, 64px);
    position: relative;
    overflow: hidden;
  }
  #inicio.hero .container-fluid{
    max-width: 1600px;               /* sube/baja si quieres más/menos ancho */
    margin: 0 auto;
    padding-left: var(--hero-pad-x) !important;
    padding-right: var(--hero-pad-x) !important;
    padding-top: var(--hero-pad-y);
    padding-bottom: var(--hero-pad-y);
  }

  /* Layout principal SIEMPRE en grid (sin absolute para piezas clave) */
  #inicio .brand-hero{
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(540px, 1.2fr);
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
    min-height: var(--hero-min-h);
    position: relative;
  }

  /* Logo + texto (izquierda) */
  #inicio .brand-logo{
    margin: 0 !important;            /* neutraliza estilos inline previos */
    align-self: start;
    max-width: 62ch;
  }
  #inicio .brand-logo__tag_p,
  #inicio .brand-logo__tag_p p{      /* por si quedó <small><p> anterior */
    display: block;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.6;
    color: rgba(0,0,0,.75);
    margin-top: clamp(8px, 1.2vw, 14px);
  }

  /* Portal derecha (imagen): proporción estable, sin height fijos */
  #inicio .hero-portal{
    grid-column: 2;
    position: static !important;     /* evita descuadres por absolute */
    width: 100% !important;          /* ocupa toda su columna */
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--portal-ar, 16/9);   /* 16/9 por defecto */
    background: var(--portal-img) center / cover no-repeat;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(2,12,27,.18);
    transform: none !important;      /* ignora --portal-x/--portal-y */
  }

  /* Capas decorativas no influyen en layout */
  #inicio .hero-mover{ position:absolute; inset:0; pointer-events:none; }

  /* Indicador scroll: soporta ambas ubicaciones (dentro o fuera del grid) */
  #inicio > .hero-scroll{                         /* si está fuera del grid */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(12px, 4vh, 28px);
  }
  #inicio .brand-hero > .hero-scroll{             /* si lo pones dentro del grid */
    grid-column: 1 / -1;
    position: relative;
    left: auto; bottom: auto; transform: none;
    justify-self: center;
    margin-top: clamp(12px, 2vh, 24px);
  }

  /* Fondo seguro */
  #inicio.hero.hero-bg{
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(47,123,190,.12), transparent 60%),
      linear-gradient(180deg, var(--mc-bg, #F4F7FB), var(--mc-bg-2, #FFFFFF));
  }

  /* Responsive: en tablet/móvil se apila limpio */
  @media (max-width: 991.98px){
    #inicio .brand-hero{
      grid-template-columns: 1fr;
    }
    #inicio .hero-portal{
      grid-column: 1;
      aspect-ratio: var(--portal-ar-m, 16/9);
      margin-top: 12px;
    }
  }

  /* Neutralizadores por si había alturas fijas en otro CSS */
  #inicio,
  #inicio .brand-hero,
  #inicio .hero-portal{
    height: auto !important;
    min-height: unset !important;
  }


  /* === INICIO — reducir altura del hero === */
:root{
  --hero-altura: 70vh;           /* <— cambia aquí 52vh por 48vh / 46vh si lo quieres más bajo */
}

/* Hero con logo/texto */
#inicio .brand-logo{ min-height: var(--hero-altura) !important; }

/* Hero “tipo sección” */
#inicio.hero{ min-height: var(--hero-altura) !important; }

/* Quita aire extra abajo del hero */
.brand-hero{ padding-bottom: 6vh !important; } /* antes 15vh */

/* Si usas portal (imagen a la derecha) */
#inicio .hero-portal{ --portal-h: var(--hero-altura) !important; }

/* Si usas el hero con VIDEO */
.brand-video__el{ height: var(--hero-altura) !important; }




/* === Forzar UNA SOLA FILA en el popup de Seguridad Electrónica === */
#modalSoluciones .modal-dialog{
  max-width: 1320px;                /* ancho grande del modal */
}

/* Convertimos el contenedor de las tarjetas a fila única */
#modalSoluciones #soluCards{
  display: flex !important;
  flex-wrap: nowrap !important;     /* NO permitir salto a 2da línea */
  gap: 1.25rem !important;          /* separación entre tarjetas */
}

/* Cada tarjeta ocupa exactamente el 25% del ancho del modal */
#modalSoluciones #soluCards .solu-card{
  flex: 0 0 calc(25% - 0.9375rem) !important;  /* 4 por fila */
  width: auto !important;
  min-width: 0 !important;          /* evita que “empuje” la fila */
}

/* Ajuste de imagen dentro de la card (opcional visual) */
#modalSoluciones #soluCards .solu-card img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}


/* === Modal "Seguridad Electrónica": forzar UNA COLUMNA === */
#modalSoluciones #soluCards{
  /* mata cualquier grid/column/flex previo */
  display: block !important;
  column-count: 1 !important;              /* por si venía con "columns" */
  grid-template-columns: 1fr !important;   /* por si era CSS Grid */
  flex-direction: column !important;       /* por si era Flexbox */
  gap: 0 !important;                       /* evita espacios extra si eran grid/flex */
}

/* cada tarjeta ocupa todo el ancho */
#modalSoluciones #soluCards .solu-card{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
  /* si venían como columnas de Bootstrap (col-*) las anulamos: */
  flex: 0 0 100% !important;
}

/* si tus cards están dentro de columnas Bootstrap, también pisa eso: */
#modalSoluciones #soluCards [class*="col-"]{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* (opcional) imagen más cómoda en layout vertical */
#modalSoluciones #soluCards .solu-card img{
  width: 100%;
  height: auto;          /* o fija, p.ej. 220px con object-fit:cover */
  object-fit: cover;
  display: block;
}

/* Justificar texto del detalle en el modal de proyectos */
#modalProyecto #mpDetails{
  text-align: justify;
  text-justify: inter-word;   /* mejor distribución de palabras */
  hyphens: auto;              /* cortes suaves si el navegador lo soporta */
}



/* Modal PROYECTOS: que la galería/imágenes queden encajadas al borde */
#modalProyecto .modal-dialog{
  max-width: min(1200px, 95vw);
}

#modalProyecto .modal-content{
  border-radius: 16px;
  overflow: hidden;          /* recorta cualquier desborde y quita “bordes grises” */
}

#modalProyecto .modal-body{
  padding: 0;                /* quita el margen interno que deja espacios grises */
}

/* Si muestras UNA imagen grande arriba/derecha */
#modalProyecto #mpImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* llena el contenedor sin deformarse */
}

/* Si en tu modal usas una cuadricula de fotos (clase .mp-gallery o similar),
   encájala también: */
#modalProyecto .mp-gallery{
  padding: 16px;             /* deja un respiro interno, ajusta si quieres 0 */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* cambia a 2 o 4 si te conviene */
  gap: 12px;
}

#modalProyecto .mp-gallery img{
  display: block;
  width: 100%;
  height: 320px;             /* o usa aspect-ratio: 4/3; si prefieres altura fluida */
  object-fit: cover;         /* encaja cada miniatura */
  border-radius: 12px;
}


/* ===== Collage genérico ===== */
.collage{
  display: grid;
  gap: 6px;                 /* “líneas” blancas */
  background: #fff;         /* el gap deja ver el fondo blanco como líneas */
  padding: 6px;
  border-radius: .6rem;
  overflow: hidden;
}

/* Tarjetas: cuadrícula 3 col (2 en md, 1 en xs) */
.collage--card{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px){ .collage--card{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .collage--card{ grid-template-columns: 1fr; } }

/* Collage en modal: compacto, sin huecos “fantasma” */
.collage--modal{
  display: grid;
  /* Antes: grid-auto-flow: dense;  ← provoca huecos aparentes */
  grid-auto-flow: row;            /* pinta en filas, sin reacomodo */
  grid-template-columns: repeat(3, 1fr);
  align-content: start;           /* no estires para “rellenar” */
  gap: 6px;
}

/* Responsive del modal (conservado) */
@media (max-width: 1199.98px){ .collage--modal{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){  .collage--modal{ grid-template-columns: 1fr; } }



/* Celdas e imágenes */
.collage__cell{
  position: relative;
  aspect-ratio: 4/3;
  background: #f7f7f7;
  border-radius: .35rem;
  overflow: hidden;
}
.collage__cell img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

/* Patrón: primera celda grande (para 3-6 imgs, queda bonito) */
.collage--card.n3 .collage__cell:nth-child(1),
.collage--card.n4 .collage__cell:nth-child(1),
.collage--card.n5 .collage__cell:nth-child(1),
.collage--card.n6 .collage__cell:nth-child(1){
  grid-column: span 2; grid-row: span 2;
}
/* En el modal, todas las celdas del mismo tamaño (evita huecos) */
.collage--modal.n3 .collage__cell:nth-child(1),
.collage--modal.n4 .collage__cell:nth-child(1),
.collage--modal.n5 .collage__cell:nth-child(1),
.collage--modal.n6 .collage__cell:nth-child(1){
  grid-column: span 1;
  grid-row: span 1;
}


/* Texto del pop-up justificado */
#modalProyecto #mpDetails{ text-align: justify; }

/* Overlay de tarjeta (igual estilo que ya usas) */
.proj-card{ position: relative; }
.proj-card .proj-overlay{
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
  color:#fff; padding:.8rem 1rem;
}




/* Truncado elegante para detalles en tarjeta */
.clamp-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Collage en panel admin === */
.collage{
  display: grid;
  gap: 6px;
  background: #fff;
  padding: 6px;
  border-radius: .6rem;
  overflow: hidden;
}
.collage--admin{
  grid-template-columns: repeat(3, 1fr);
}
.collage__cell{
  position: relative;
  aspect-ratio: 4/3;
  background: #f7f7f7;
  border-radius: .35rem;
  overflow: hidden;
}
.collage__cell img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay para botón/etiqueta de portada en cada celda */
.thumb-overlay{
  position: absolute;
  top: 6px; right: 6px;
  display: flex; gap: 6px;
  align-items: center;
  opacity: 0;
  transition: opacity .15s ease;
}
.collage__cell:hover .thumb-overlay{
  opacity: 1;
}

/* Si prefieres que SIEMPRE se vea (sin hover), descomenta la siguiente línea: */
/* .thumb-overlay{ opacity: 1; } */

.thumb-overlay .btn{
  padding: .2rem .45rem;
  line-height: 1;
  font-size: .75rem;
}


/* Mostrar overlay también cuando el elemento tiene foco (teclado) */
.collage__cell:focus-within .thumb-overlay{
  opacity: 1;
}

/* En dispositivos táctiles (sin hover), mostrar SIEMPRE el overlay */
@media (hover: none) {
  .thumb-overlay{ opacity: 1; }
}


/* ==== Ripple Navbar Overlay ==== */
.page-reveal{
  position: fixed;
  inset: 0;
  background: var(--mc-bg-2, #ffffff);
  /* punto inicial: sin radio */
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 0%));
  transition: clip-path var(--nav-ripple-in, 750ms) ease-out;
  pointer-events: none;
  z-index: 1; /* los modales pasan por encima (tú ya forzaste z-index en base.html) */
}
.page-reveal.reveal-in{
  /* se expande hasta --r calculado por JS */
  clip-path: circle(var(--r, 1200px) at var(--cx, 50%) var(--cy, 0%));
}
.page-reveal.reveal-out{
  transition: clip-path var(--nav-ripple-out, 650ms) ease-in;
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 0%));
}


:root{
  --nav-ripple-in: 720ms;   /* entrar */
  --nav-ripple-out: 560ms;  /* salir */
}


/* === FIX 1: Apagar overlay/fade de navegación por completo === */
body.fade-transition::after,
body.is-fading::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === FIX 2: Detener por completo el “caminar” del fondo en el HERO === */
#inicio.hero-bg .hero-frame{
  animation: none !important;
  transform: none !important;
  background-size: cover !important;   /* evita zoom raro al quitar la animación */
}

/* (Opcional) si quieres retirar los dos layers duplicados sin tocar HTML */
#inicio .hero-mover{ display: none !important; }

/* === FIX 3: Quitar “puntitos” (bullets) de .solu-points === */
.solu-points li::before{
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}

/* === Limpieza visual: unificar color de párrafos en tarjetas de soluciones === */
/* Elige UN color y mantenlo. Ejemplo gris oscuro: */
.solu-card p{
  color: #3b4b59 !important; /* tono consistente y legible */
}


/* Si quedara una celda sin <img> por cualquier motivo, escóndela */
.collage--modal .collage__cell:not(:has(> img)){
  display: none !important;
}


/* Mantén el mismo layout: el modal clona el HTML del card */
.proj-collage--modal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Si tu collage usa grid con áreas/n-th-child, NO cambies orden:
   el clon respeta el mismo DOM de la tarjeta. Opcional: más gap en modal */
.proj-collage--modal {
  gap: .75rem;
}


/* === HERO: hacer más angosta la imagen de la derecha (.hero-portal) === */
/* Solo en desktop (>=992px); en móvil se mantiene a 100% como ya tienes */
@media (min-width: 992px){
  #inicio .hero-portal{
    /* Ancho: ajusta el 2º valor (42vw) y el tope (760px) a tu gusto */
    width: clamp(420px, 42vw, 760px) !important;

    /* Separación del borde derecho (opcional): sube/baja este valor */
    --portal-x: 8px;  /* antes estaba en -12px */
  }
}