/* ========= Paleta Altitud 100K ========= */
:root{
  --bg:#02183D;        /* azul noche */
  --ink:#FFFFFF;       /* blanco */
  --muted:#9FB3D1;     /* texto secundario */
  --brand:#F21651;     /* rosa/fucsia */
  --brand-2:#F9921C;   /* naranja */
  --brand-3:#8C1C3F;   /* vino */
  --brand-4:#913793;   /* violeta */
  --surface:#0B1430;   /* panel oscuro */
  --outline:#ffffff22; /* bordes sutiles */
  --success:#28a745;   /* verde para el tile de TikTok */
  --radius:14px;
  --logo-shift: 0px;   /* mueve el logo del hero a la derecha (+) */
}

/* ========= Tipografía ========= */
/* Si en el futuro generas WOFF2, añade la línea woff2 antes del .otf */
@font-face{
  font-family:"Altitud100K";
  /* src: url("FuturaExtraBoldOblique.woff2") format("woff2"), */
  src: url("FuturaExtraBoldOblique.otf") format("opentype");
  font-weight:800;
  font-style:oblique;
  font-display:swap;
}

/* Aplica la tipografía corporativa a los títulos */
h1,h2,h3{ font-family:"Altitud100K", system-ui, Inter, sans-serif; }

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}
h1,h2,h3{
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 10px;
}
h1{font-size:clamp(32px,6vw,64px); line-height:1.1}
h2{font-size:clamp(22px,3.5vw,36px)}
h3{font-size:clamp(18px,2.4vw,22px)}
p{margin:0 0 10px}
.muted{color:var(--muted)}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ========= Botones ========= */
.btn{
  display:inline-block;
  background:var(--brand);
  color:rgb(255, 255, 255);
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border-color:#ffffff55;
}
.btn.small{ padding:8px 12px; font-weight:700; }

.btn-cursos {
  background: #28a745; /* verde */
  color: white;
}

.btn-colegios {
  background: #F9921C; /* amarillo */
  color: white;
}


.btn-cursos:hover {
  background: #218838;
}

.btn-ver-investigaciones {
    background-color: #913793 !important;
    border-color: #913793 !important;
    color: #fff !important;
}
.btn-ver-investigaciones:hover {
    background-color: #7b2f7e !important;
    border-color: #7b2f7e !important;
}



/* ========= Topbar ========= */
.topbar{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg,#020a1dCC,#020a1d99 70%,transparent);
  border-bottom:1px solid var(--outline);
  backdrop-filter: blur(6px);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-logo{ width:36px; height:36px; object-fit:contain }
.brand-text{ font-weight:900; letter-spacing:1px }
.brand-text span{ color:var(--brand) }

/* Hamburguesa (sin JS) */
#nav-toggle{ display:none }
.burger{
  width:36px;height:28px;display:none;flex-direction:column;justify-content:space-between;cursor:pointer
}
.burger span{ height:3px;background:#fff;border-radius:2px;display:block }

/* Nav */
.mainnav{ display:flex; gap:18px; align-items:center }
.mainnav a{ color:var(--ink); text-decoration:none; opacity:.9; text-transform:uppercase; letter-spacing:.06em }
.mainnav a:hover{ opacity:1; color:var(--brand) }

/* ========= Hero ========= */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--outline);
  background:
    radial-gradient(1200px 500px at 70% -10%, #ffffff0f, transparent 60%),
    linear-gradient(180deg,#00000033,transparent 40%),
    var(--bg);
}
.hero-grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1.2fr .8fr;
  padding:64px 0 72px;
  position:relative;    /* asegura capa encima de .stars */
  z-index:2;
}
.lead{ color:var(--muted); max-width:720px }
.cta-row{ display:flex; gap:12px; margin-top:8px }

.hero-media{ display:flex; justify-content:flex-end }
.logo-hero{
  max-width:360px; width:100%;
  transform: translateX(var(--logo-shift));
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

/* estrellas */
.stars{
  position:absolute; inset:0; pointer-events:none;
  z-index:1;
  background:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent 40%),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent 40%),
    radial-gradient(1px 1px at 55% 15%, #fff, transparent 40%),
    radial-gradient(2px 2px at 80% 40%, #fff, transparent 40%),
    radial-gradient(1px 1px at 70% 70%, #fff, transparent 40%),
    radial-gradient(1.5px 1.5px at 20% 60%, #fff, transparent 40%),
    radial-gradient(1.5px 1.5px at 90% 30%, #fff, transparent 40%),
    radial-gradient(2px 2px at 40% 50%, #fff, transparent 40%),
    radial-gradient(1px 1px at 60% 10%, #fff, transparent 40%),
    radial-gradient(1px 1px at 85% 85%, #fff, transparent 40%);
  opacity:.35; /* sube a .5–.7 si quieres más intensidad */
}



/* ========= Secciones ========= */
.section{ padding:64px 0; }
.section.alt{ background:#ffffff08; border-top:1px solid var(--outline); border-bottom:1px solid var(--outline) }

/* Tarjetas */
.cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
  margin-top:14px;
}
.card{
  background:var(--surface);
  border:1px solid var(--outline);
  border-radius:var(--radius);
  padding:18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px #00000040 }
.card h3{ margin-bottom:6px }

/* Split layout */
.split{ display:grid; gap:24px; grid-template-columns: 1.2fr .8fr; align-items:center }
.pill-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.pill-list li{
  border:1px solid var(--outline);
  border-radius:999px;
  padding:10px 12px;
  background:#0f1a3b;
}


/* Hacer toda la tarjeta clicable sin subrayado */
.card-link{
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}
.card-link .card{ height: 100%; }

/* Grid de 4 columnas para servicios */
.cards.cards-4{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}

/* Responsivo */
@media (max-width: 980px){
  .cards.cards-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .cards.cards-4{ grid-template-columns: 1fr; }
}


/* Contacto */
.contact{ display:grid; gap:16px }
.contact-form{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }
.contact-form textarea{ grid-column: 1 / -1 }
.contact-form input, .contact-form textarea{
  background:#0f1630; color:var(--ink);
  border:1px solid var(--outline);
  border-radius:12px; padding:12px;
}
.contact-form .btn{ grid-column: auto }
.contact-form .btn.ghost{ grid-column: auto }

/* Footer */
.foot{ border-top:1px solid var(--outline); padding:20px 0; color:var(--muted) }
.foot-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.foot-nav{ display:flex; gap:14px }
.foot-nav a{ color:var(--muted); text-decoration:none }
.foot-nav a:hover{ color:var(--ink) }

/* ========= Responsive ========= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; padding:48px 0 56px }
  .hero-media{ justify-content:center }
  .logo-hero{ transform:none; max-width:280px }
  .cards{ grid-template-columns: 1fr 1fr }
  .split{ grid-template-columns: 1fr }
}
@media (max-width: 720px){
  .cards{ grid-template-columns: 1fr }
  /* menú móvil */
  .burger{ display:flex }
  .mainnav{
    position:fixed; inset:64px 0 auto 0;
    background:#061232; border-bottom:1px solid var(--outline);
    transform: translateY(-120%); transition: transform .2s ease;
    display:flex; flex-direction:column; gap:14px; padding:14px 20px; z-index:19;
  }
  #nav-toggle:checked ~ .burger + .mainnav{ transform: translateY(0) }
}



/* ===== Redes Sociales ===== */

.social-container {
    text-align: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 30px; /* espacio entre cuadros */
    flex-wrap: wrap; /* para que en pantallas pequeñas bajen a otra línea */
}

.social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.social-link {
    display: inline-block;
    text-align: center;
    margin: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border-radius: 20px;
    width: 120px;
    height: 120px;
    font-weight: bold;
    color: white;
    font-size: 28px;
    line-height: 120px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Colores iniciales */
.social-link.linkedin { background-color: #ff1744; } /* Rojo fluor */
.social-link.youtube { background-color: #ff9800; }   /* Naranja */
.social-link.instagram { background-color: #8e24aa; } /* Morado */
.social-link.tiktok { background-color: #2ecc71; }    /* Verde Altitud 100K */

/* Hover con imagen */
.social-link.linkedin:hover {
    background-image: url('assets/linkedin.png');
    background-color: transparent;
}
.social-link.youtube:hover {
    background-image: url('assets/youtube.png');
    background-color: transparent;
}
.social-link.instagram:hover {
    background-image: url('assets/instagram.png');
    background-color: transparent;
}
.social-link.tiktok:hover {
    background-image: url('assets/tiktok.png');
    background-color: transparent;
}

/* Texto debajo */
.social-name {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}



.titulo-seccion {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.tarjetas-mision-vision {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.tarjeta {
  background-color: #02183D; /* azul de tu paleta */
  color: #fff;
  padding: 2rem;
  border-radius: 15px;
  flex: 1;
  min-width: 280px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 20px rgba(0,0,0,0.4);
}

.icono-tarjeta {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.tarjeta-mision {
  border-top: 5px solid #F21651; /* rojo de tu paleta */
}

.tarjeta-vision {
  border-top: 5px solid #913793; /* morado de tu paleta */
}

.tarjeta p {
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}






/* Canvas del hero */
.hero {
  position: relative; /* ya lo tienes, pero importante para anclar el canvas */
  overflow: hidden;
}

.hero-canvas{
  position:absolute;
  inset:0;
  z-index:0;           /* por debajo del contenido del hero */
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.9;
}

/* Asegura que el grid y texto queden por encima del canvas */
.hero-grid{ position:relative; z-index:2; }

/* (opcional) un brillo suave al logo para integrarlo con la escena */
.logo-hero{
  /* x, y, desenfoque, color (morado) */
  filter:
    drop-shadow(0 14px 36px rgba(145,55,147,.55))   /* halo principal */
    drop-shadow(0 0 80px   rgba(145,55,147,.30));   /* glow amplio */
}


/* Botón “Ver investigaciones” en morado corporativo */
.btn-investigaciones{
  background:#913793;           /* brand-4 violeta */
  color:#fff;
  border-color:transparent;
}
.btn-investigaciones:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}






/* ====== SELECT Altitud 100K ====== */
.select-curso{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 14px 48px 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background:
    /* flecha personalizada (SVG) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
      no-repeat right 14px center,
    linear-gradient(#F9921C, #f9b566); /* verde base */
  color:rgb(0, 0, 0);
  font-weight:800;
  letter-spacing:.2px;
  outline: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

/* texto de opción inicial más clarito */
.select-curso option[value=""]{
  color:#2a2a2a;
  font-weight:600;
}

/* Hover / focus: brillo y “bump” */
.select-curso:hover{ 
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Borde y resplandor en focus */
.select-curso:focus{
  border-color:#ffffff55;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 14px 34px rgba(0,0,0,.4);
}

/* Tema oscuro: hacemos contraste del texto */
@media (prefers-color-scheme: dark){
  .select-curso{ color:#001; }
}

/* Ajuste para que en móviles no “estire” raro */
@supports (-webkit-touch-callout: none) {
  .select-curso{ font-size:16px; }
}



/* ========= Enlaces de Tarjetas Servicio ========= */
.card-link {
  text-decoration: none;   /* quita el subrayado del enlace */
  color: inherit;          /* mantiene el color del texto original */
  display: block;          /* hace que todo el enlace sea clicable */
}

.card-link:hover .card {
  transform: scale(1.05);  /* efecto zoom */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}





/* ========== Mejoras móviles globales (index) ========== */

/* Tablet <= 768px */
@media (max-width: 768px){
  .topbar .wrap{ height:62px }
  .hero-grid{ grid-template-columns:1fr; padding:48px 0 56px } /* apila hero */
  .hero-media{ justify-content:center }
  .logo-hero{ max-width:260px; transform:none }                /* logo más chico */

  /* CTAs: columnas -> pila */
  .cta-row{ gap:10px; flex-wrap:wrap }
  .cta-row .btn{ padding:12px 14px }

  /* Servicios 2 columnas */
  .cards{ grid-template-columns:1fr 1fr }
}

/* Teléfonos <= 480px */
@media (max-width: 480px){
  /* Tipografías más cómodas */
  h1{ font-size:clamp(26px, 8.5vw, 38px) }
  h2{ font-size:clamp(20px, 5.5vw, 28px) }
  h3{ font-size:clamp(16px, 4.6vw, 20px) }

  .topbar .wrap{ height:56px }
  .brand-logo{ width:32px; height:32px }

  .hero{ padding:36px 0 44px }
  .hero-content .lead{ font-size:clamp(14px, 4vw, 16px) }

  /* Botones a ancho completo para tocar con el pulgar */
  .cta-row{ flex-direction:column }
  .cta-row .btn{ width:100%; text-align:center }

  /* Servicios 1 columna */
  .cards{ grid-template-columns:1fr }

  /* Social tiles un poco más chicos */
  .social-link{
    width:88px; height:88px; line-height:88px; font-size:22px; border-radius:16px;
  }
  .social-icons{ gap:18px }

  /* Footer en pila */
  .foot-flex{ flex-direction:column; gap:10px; text-align:center }
}

/* Mini teléfonos <= 360px */
@media (max-width: 360px){
  .cta-row .btn{ padding:10px 12px; font-weight:800 }
  .mainnav a{ font-size:14px }
}



/* ===== Firma inline en el footer ===== */
.foot-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;                 /* permite que salte a dos líneas en móvil */
}

/* Texto del copy + firma en la misma línea */
.foot-copy{
  display:flex;
  align-items:center;
  gap:0;
  color: var(--muted, #9FB3D1);
  opacity:.92;
}

/* Separador sutil entre copy y firma */
.foot-copy .sig{
  margin-left:12px;
  padding-left:12px;
  border-left:1px dashed var(--outline, #ffffff22);
  opacity:.85;
  white-space:nowrap;
}

.foot-copy .sig a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}

.foot-copy .sig a:hover{
  color: var(--ink, #ffffff);
  border-bottom-color: transparent;
}

/* En pantallas pequeñas, deja que todo respire */
@media (max-width:640px){
  .foot-flex{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }

  .foot-copy .sig{
    margin-left:10px;
    padding-left:10px;
    border-left-color: transparent;   /* sin barra en móvil */
    border-top:1px dashed var(--outline, #ffffff22);
    margin-top:6px;
    padding-top:6px;
  }
}



/* ====== Grid del formulario ====== */
.contact-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap:14px;
}

/* inputs/textarea look & feel */
.contact-form input,
.contact-form textarea{
  background:#0f1630;
  color:var(--ink);
  border:1px solid var(--outline);
  border-radius:12px;
  padding:12px;
}

/* Oculta el honeypot (cuadro anti-bots) */
.contact-form .hp{
  position:absolute;
  left:-9999px;
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
}

/* Grid del formulario (2 columnas) */
.contact-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.contact-form textarea{
  grid-column: 1 / -1;
}
.contact-form .btn{
  grid-column: 1 / 2;
}
.contact-form .btn-whatsapp{
  grid-column: 2 / 3;
}

/* WhatsApp: verde + icono */
.btn-whatsapp{
  background: #25D366;           /* verde WhatsApp */
  color: #001;                    /* contraste sobre verde */
  border: 1px solid transparent;
  position: relative;
  padding-left: 48px;             /* espacio para el icono */
  font-weight: 800;
}

/* Icono (data URI SVG) – no dependes de archivos extra */
.btn-whatsapp::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M19.11 17.21c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-1.77-.88-2.93-1.57-4.1-3.56-.31-.53.31-.49.88-1.63.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.03 1-1.03 2.43 0 1.42 1.06 2.79 1.2 2.98.15.2 2.08 3.18 5.05 4.46.71.31 1.26.5 1.69.64.71.22 1.36.19 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.18-1.42-.07-.12-.27-.2-.57-.35z'/%3E%3Cpath d='M26.9 5.1C24.2 2.4 20.7 1 17 1S9.8 2.4 7.1 5.1C4.4 7.8 3 11.3 3 15c0 2 .5 3.9 1.3 5.6L3 31l10.6-1.3c1.6.8 3.5 1.3 5.4 1.3 3.7 0 7.2-1.4 9.9-4.1 2.7-2.7 4.1-6.2 4.1-9.9s-1.4-7.2-4.1-9.9zM17 28c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-6.1.8.8-5.9-.3-.4C5 19.4 4.5 17.2 4.5 15 4.5 8.6 9.6 3.5 16 3.5S27.5 8.6 27.5 15 22.4 28 16 28z'/%3E%3C/svg%3E");
}


/* ===== Reveal on Scroll – SIEMPRE ACTIVO (móvil incluido) ===== */
.reveal-os{
  opacity:0;
  transform: translateY(22px) scale(.98) translateZ(0); /* fuerza GPU en iOS/Android */
  filter: blur(6px);
  transition:
    opacity .80s cubic-bezier(.2,.65,.2,1),
    transform .80s cubic-bezier(.2,.65,.2,1),
    filter  .80s cubic-bezier(.2,.65,.2,1);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;         /* anti-parpadeo en Safari iOS */
  -webkit-font-smoothing: antialiased; /* suaviza texto durante el blur */
}
.reveal-os.is-visible{
  opacity:1;
  transform: none;
  filter: blur(0);
}

/* Variantes */
.reveal-os[data-anim="fade-up"]{    transform: translateY(24px) translateZ(0); }
.reveal-os[data-anim="fade-right"]{ transform: translateX(-28px) translateZ(0); }
.reveal-os[data-anim="fade-left"]{  transform: translateX(28px) translateZ(0); }
.reveal-os[data-anim="scale-in"]{   transform: scale(.94) translateZ(0); }

/* 👇 IMPORTANTE: eliminamos el bloque que desactiva todo con reduce motion */
/* @media (prefers-reduced-motion: reduce){ ... }  ==> BORRADO */



/* ===== Servicios mejorados ===== */
.servicios .svc-head{ margin-bottom:18px; }
.servicios .svc-tagline{ margin-top:6px; max-width:60ch; }

/* grid */
/* Grid de servicios en 2x2 */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  grid-template-rows: repeat(2, auto);  /* 2 filas */
  gap: 24px; /* espacio entre cuadros */
  margin-top: 30px;
}

/* Ajustes responsivos */
@media (max-width: 768px){
  .svc-grid {
    grid-template-columns: 1fr; /* en móvil se apila */
    grid-template-rows: auto;
  }
}

/* tarjeta clicable */
.svc-card{
  --g1:#913793; --g2:#F21651; --g3:#F9921C;

  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 18px 16px;
  border-radius:16px;
  text-decoration:none;
  color:var(--ink);

  /* borde degradado + panel oscuro */
  background:
    linear-gradient(#0B1430, #0B1430) padding-box,
    linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)) border-box;
  border:1px solid transparent;

  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, background-size .4s ease;
}

/* brillo diagonal que “pasa” al hover */
.svc-card::after{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(115deg, #ffffff22 0%, transparent 35%, transparent 65%, #ffffff1c 100%);
  transform: translateX(-25%);
  transition: transform .5s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* ícono */
/* Badge circular “glass” con anillo temático */
.svc-icon{
  --ring: conic-gradient(from 0deg, var(--g1), var(--g2) 55%, var(--g3));
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 30%, #ffffff33, #ffffff0a 45%, #00000000 60%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
  box-shadow:
    0 8px 24px rgba(0,0,0,.45),
    0 0 0 1px #ffffff1f inset;
  overflow: visible;
}

/* Anillo de energía */
.svc-icon::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius: inherit;
  background: var(--ring);
  -webkit-mask:
    radial-gradient(circle 24px at center, #0000 28px, #000 0);
  mask:
    radial-gradient(circle 24px at center, transparent 28px, black 0);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--g2) 35%, transparent));
  animation: spinRing 16s linear infinite;
}

/* Icono de línea, nítido y responsive */
.svc-icon .i{
  width: 60%; height: 60%;
  fill: none;
  stroke: #fff;
  stroke-width: 2.1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .95;
  transform: translateZ(0);
}

/* Micro-interacción al hover (solo desktop) */
@media (hover:hover){
  .svc-card:hover .svc-icon .i{ transform: translateY(-1px); }
  .svc-card:hover .svc-icon::before{
    animation-duration: 10s; /* acelera un poco */
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--g2) 45%, transparent));
  }
}

/* Respeto a “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .svc-icon::before{ animation: none; }
}

@keyframes spinRing { to { transform: rotate(1turn); } }

/* tipografías dentro */
.svc-card h3{ margin:8px 0 4px; font-size:clamp(18px, 2.2vw, 22px); }
.svc-card p{ color:var(--muted); margin:0 0 6px; }

/* bullets cortos */
.svc-points{
  list-style:none; margin:0 0 6px; padding:0; display:grid; gap:6px;
}
.svc-points li{
  display:flex; align-items:center; gap:8px;
  font-size:.95rem; color:#dfe7f5;
}
.svc-points li::before{
  content:"✓";
  display:inline-grid; place-items:center;
  width:18px; height:18px; border-radius:50%;
  font-size:.75rem; background:#1b2447; color:#fff; opacity:.9;
}

/* CTA pequeña */
.svc-cta{
  margin-top:auto;
  font-weight:800;
  letter-spacing:.02em;
  opacity:.95;
}

/* hover / focus (solo en dispositivos con hover) */
@media (hover:hover){
  .svc-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.35);
  }
  .svc-card:hover::after{ transform: translateX(15%); }
}

/* variantes por tema (colores de borde/ícono) */
.svc-card[data-theme="violet"]{ --g1:#913793; --g2:#8C1C3F; --g3:#F9921C; }
.svc-card[data-theme="orange"]{ --g1:#F9921C; --g2:#F21651; --g3:#913793; }
.svc-card[data-theme="pink"]  { --g1:#F21651; --g2:#913793; --g3:#F9921C; }
.svc-card[data-theme="indigo"]{ --g1:#9FB3D1; --g2:#913793; --g3:#F21651; }


/* Mapas de color por servicio */
.svc-card[data-theme="green"] {   /* Educación STEM */
  --g1:#28a745;  /* verde btn-cursos */
  --g2:#2ecc71;  /* verde brillante */
  --g3:#9ef5c6;  /* acento suave para el borde */
}
.svc-card[data-theme="orange"]{  /* Bootcamps */
  --g1:#F9921C;
  --g2:#ffb347;
  --g3:#ffd7a1;
}
.svc-card[data-theme="pink"]{    /* Team Building */
  --g1:#F21651;
  --g2:#ff4d7a;
  --g3:#ffc1d1;
}
.svc-card[data-theme="violet"]{  /* Ingeniería */
  --g1:#913793;
  --g2:#b36ac0;
  --g3:#e0c3ff;
}

/* (opcional) títulos con el color del tema */
.svc-card h3{ color:#fff; }


















/* ===== Misión & Visión — versión limpia ===== */
.mv{ position:relative; overflow:hidden; }
.mv .wrap{ position:relative; z-index:2; }

/* Más aire al título y subrayado con gradiente marca */
.mv-title{
  text-align:center;
  margin: 0 0 36px;
}
.mv-title::after{
  content:"";
  display:block;
  height:6px;
  width:min(520px, 60vw);
  margin:10px auto 0;
  background:linear-gradient(90deg,#F21651,#913793,#F9921C);
  border-radius:999px;
  filter: drop-shadow(0 4px 14px rgba(145,55,147,.35));
}

/* Grid */
.mv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:stretch;
}

/* Tarjeta */
.mv-card{
  position:relative;
  overflow:hidden; /* evita brillos fuera de la tarjeta */
  background:linear-gradient(180deg,#0B1430,#0f1630);
  border:1px solid var(--outline);
  border-radius:18px;
  padding:24px;
  box-shadow:0 10px 26px rgba(0,0,0,.40);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mv-card h3{ margin:4px 0 8px; }
.mv-card p{ color:var(--muted); }

/* Barra superior con glow tenue */
.mv-card .mv-cap{
  position:absolute; left:18px; right:18px; top:-7px; height:12px; border-radius:999px;
  background:linear-gradient(90deg,#F21651,#913793,#F9921C);
  box-shadow:0 0 14px rgba(145,55,147,.30);
  opacity:.95;
}

/* Sheen sutil al aparecer (queda dentro de la tarjeta por overflow:hidden) */
.mv-card.reveal-os.is-visible::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.16) 50%, transparent 55%);
  transform:translateX(-120%);
  animation: mvSweep 1000ms cubic-bezier(.2,.65,.2,1) both;
}
@keyframes mvSweep{ to { transform:translateX(120%); } }

/* Hover (desktop) */
@media (hover:hover) and (pointer:fine){
  .mv-card:hover{
    transform: translateY(-6px);
    box-shadow:0 18px 36px rgba(0,0,0,.55);
    border-color:#ffffff33;
  }
}

/* Limpieza: por si tenías aurora o línea punteada anteriores */
.mv-aurora, .mv-link, .mv-icon{ display:none !important; }

/* Responsive */
@media (max-width:980px){
  .mv-title{ margin-bottom:24px; }
  .mv-grid{ grid-template-columns:1fr; gap:20px; }
}

/* Encabezado Servicios */
.svc-head{
  display:flex;             /* o grid */
  flex-direction:column;
  gap:10px;                 /* <-- separa H2 y H3 */
  margin-bottom:24px;       /* <-- separa el bloque del grid de tarjetas */
}
.svc-head h2{ margin:0; }
.svc-head h3{ margin:0; color:var(--muted); font-weight:800; }




/* ===== Sello Empresa Mujer (card destacado tras Hero) ===== */
.sello-mujer{
  padding: 44px 0;
  background: #ffffff08;                    /* igual que .section.alt */
  border-top: 1px solid var(--outline);
  border-bottom: 1px solid var(--outline);
}

.sello-card{
  --g1:#F21651; --g2:#913793; --g3:#F9921C; /* mapa de color marca */

  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 26px;

  padding: 22px 22px;
  border-radius: 18px;
  color: var(--ink);

  /* panel + borde degradado (match con .svc-card) */
  background:
    linear-gradient(#0B1430, #0B1430) padding-box,
    linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)) border-box;
  border: 1px solid transparent;

  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}

/* brillo suave que cruza el card al aparecer/hover */
.sello-card::after{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(115deg, #ffffff22 0%, transparent 35%, transparent 65%, #ffffff1c 100%);
  transform: translateX(-25%);
  transition: transform .65s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}
@media (hover:hover){
  .sello-card:hover::after{ transform: translateX(18%); }
}

/* badge */
.sello-badge{
  width: 220px; height: 220px;
  display: grid; place-items: center;
  margin: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 30%, #ffffff22, #ffffff0a 50%, #0000 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px #ffffff1f inset;
}
.sello-badge img{
  width: 82%; height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* textos */
.sello-copy h2{
  margin: 6px 0 8px;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.15;
}
.sello-copy h2 span{
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;                       /* título con gradiente */
  text-shadow: 0 0 28px rgba(145,55,147,.18);
}
.sello-copy .pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  background: #1b2447;
  border: 1px solid var(--outline);
  color: #dfe7f5;
  margin: 0 0 8px;
}

/* responsive */
@media (max-width: 900px){
  .sello-card{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px;
  }
  .sello-badge{ margin: 0 auto; width: 200px; height: 200px; }
}
@media (max-width: 480px){
  .sello-badge{ width: 170px; height: 170px; }
}


/* ===== Mejora contraste del Sello ===== */
.sello-badge{
  position: relative;
  width: 220px; height: 220px;
  display: grid; place-items: center;
  margin: 0;
  border-radius: 50%;
  /* base más clara detrás del logo */
  background:
    radial-gradient(120% 120% at 35% 30%, #ffffffd8 0%, #ffffff66 48%, #ffffff1a 72%, #0000 74%),
    linear-gradient(180deg, #1d2e5a, #0b1430);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px #ffffff2a inset;
  overflow: hidden;
}

/* aro cian y halo para separar del fondo */
.sello-badge::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #9fe8ff66 35%, transparent 70%);
  box-shadow:
    0 0 0 2px #9fe8ff inset,           /* aro claro */
    0 0 26px #9fe8ff33;                /* glow suave */
  pointer-events:none;
}

/* disco claro interior (debajo del PNG, encima del fondo) */
.sello-badge::after{
  content:"";
  position:absolute; inset:22px;
  border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #ffffffe6 0%, #ffffff80 55%, #ffffff10 90%, transparent 100%);
  z-index: 0;
}

/* el PNG va por encima de los pseudo-elementos */
.sello-badge img{
  position: relative;
  z-index: 1;
  width: 84%; height: auto; display:block;
  /* sin cambiar colores oficiales del logo */
  filter: none;
}

/* tamaños responsivos */
@media (max-width: 900px){ .sello-badge{ width:200px; height:200px; } }
@media (max-width: 480px){ .sello-badge{ width:170px; height:170px; } }




/* === Sello: fondo claro + recorte del borde del PNG === */

/* Opcional: desactiva los pseudo-elementos anteriores si los dejaste */
.sello-badge::before,
.sello-badge::after{ content:none !important; display:none !important; }

.sello-badge{
  --d: 220px;        /* diámetro del badge */
  --crop: 6px;      /* cuánto recortamos el borde del PNG (ajusta 6–14px) */

  position: relative;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0;

  /* disco claro para dar contraste al logo azul */
  background:
    radial-gradient(110% 110% at 50% 38%, #ffffff 0%, #eef3ff 55%, #d7e2ff 100%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px #ffffff2a inset;
  overflow: hidden;
}

/* Recorte circular: “corta” el aro celeste incluido en el PNG */
.sello-badge img{
  width: 100%; height: auto; display: block;
  /* recorta unos píxeles del contorno del PNG */
  clip-path: circle(calc(50% - var(--crop)) at 50% 50%);
  /* sin filtros, respetamos colores oficiales */
  filter: none;
}

/* Responsivo */
@media (max-width: 900px){
  .sello-badge{ --d:200px; }
}
@media (max-width: 480px){
  .sello-badge{ --d:170px; }
}


/* === Sello Empresa Mujer: mantener logo completo y ocultar el aro del PNG === */
.sello-badge{
  --d: 220px;        /* diámetro del badge */
  --erase: 16px;     /* grosor del anillo "borrador" (ajusta 8–16px) */

  position: relative;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0;
  overflow: hidden;

  /* disco claro de contraste (no cambia colores del logo) */
  background: radial-gradient(110% 110% at 50% 38%, #ffffff 0%, #eef3ff 55%, #d7e2ff 100%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px #ffffff2a inset;
}

/* ⚠️ anulamos cualquier recorte previo */
.sello-badge img{
  position: relative;
  z-index: 1;
  width: 100%; height: auto; display: block;
  clip-path: none !important;
  filter: none;      /* respetar colores oficiales */
}

/* Anillo "borrador" blanco por encima que tapa el aro celeste del PNG */
.sello-badge::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  z-index: 2;
  /* borde interior blanco que cubre solo el perímetro */
  box-shadow: inset 0 0 0 var(--erase) #fff;
  pointer-events:none;
}

/* Ajustes responsivos */
@media (max-width: 900px){ .sello-badge{ --d:200px; } }
@media (max-width: 480px){ .sello-badge{ --d:170px; } }

.sello-badge img { width: 80%; }  /* 92–98% según gusto */


/* ====== Safe area + header sticky (fix mobile) ====== */
:root{ --header-h: 64px; }                /* altura header desktop */
@media (max-width: 980px){ :root{ --header-h: 62px; } }
@media (max-width: 480px){ :root{ --header-h: 56px; } }

/* da espacio al header sticky cuando hay notch (iOS/Android) */
.topbar{ padding-top: env(safe-area-inset-top); }

/* empuja SOLO el hero bajo el header (evita que se "corte" arriba) */
.hero{ margin-top: calc(var(--header-h) + env(safe-area-inset-top)); }

/* el menú móvil comienza justo bajo el header + notch */
@media (max-width: 720px){
  .mainnav{
    inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 auto 0;
  }
}

/* texto más cómodo en teléfonos (evita que se vea "apretado") */
@media (max-width: 480px){
  h1{ font-size: clamp(24px, 8vw, 34px); line-height: 1.15; }
  .hero-grid{ padding: 36px 0 44px; }  /* un poco menos de aire vertical */
}



/* --- FIX: que el empuje del hero sea SOLO en móviles --- */
.hero{ margin-top: 0 !important; }  /* desktop y tablets grandes, sin franja */

@media (max-width: 768px){
  .hero{ margin-top: calc(var(--header-h) + env(safe-area-inset-top)) !important; }
  .topbar{ padding-top: env(safe-area-inset-top); } /* safe-area solo en móvil */
}


/* Subtítulo del hero más grande y legible */
.hero-content .lead{
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.45;
  font-weight: 700;
  color: #E6EEFF;              /* un blanco azulado que lee mejor sobre el fondo */
  max-width: 820px;            /* un poco más ancho que antes */
  margin: 10px 0 18px;         /* separa del H1 y de los botones */
  text-wrap: balance;          /* quiebres de línea más bonitos */
  text-shadow: 0 2px 10px rgba(0,0,0,.25); /* contraste suave */
}

/* Teléfonos: que no quede chico frente a los botones */
@media (max-width: 480px){
  .hero-content .lead{
    font-size: clamp(17px, 5.2vw, 20px);
    line-height: 1.5;
  }
}





/* ====== HEADER & SAFE-AREA (móvil) ====== */
:root{
  --header-h: 56px;           /* alto real del header en teléfonos */
}
@media (min-width: 481px){ :root{ --header-h: 62px; } }
@media (min-width: 981px){ :root{ --header-h: 64px; } }

/* Header fijo y visible (sin recortes) */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: #061232;        /* sólido para evitar “bandas” */
  background: linear-gradient(180deg,#061232,#061232 70%,rgba(6,18,50,.6));
  box-shadow: 0 2px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
  overflow: visible;           /* ¡no ocultes el menú desplegado! */
  padding-top: env(safe-area-inset-top);
}

/* Reserva bajo el header (móvil) */
@media (max-width: 768px){
  body{ padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
  .hero{ margin-top: 0 !important; }
}

/* Pinta explícitamente la zona del notch (si existe) */
body::before{
  content:"";
  position: fixed;
  top: 0; left: 0; right:0;
  height: env(safe-area-inset-top);
  background: #061232;
  z-index: 1000;
  pointer-events: none;
}

/* ====== MENÚ MÓVIL (abre/cierra sin “asomarse”) ====== */
.burger{
  width: 44px; height: 34px;               /* tap target más grande */
  position: relative; z-index: 61;
  touch-action: manipulation;
}

@media (max-width: 720px){
  .mainnav{
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    background: #061232;
    border-bottom: 1px solid var(--outline);
    display: flex; flex-direction: column; gap: 14px;
    padding: 14px 20px;
    z-index: 60;

    /* Oculto por defecto SIN que se vea el borde rosa */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }

  /* Al abrir (checkbox checked) */
  #nav-toggle:checked ~ .burger + .mainnav{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
}




/* ===== NAV FIJOS Y VISIBLES SEGÚN TAMAÑO ===== */

/* Desktop / tablets grandes: menú siempre visible en la barra */
@media (min-width: 721px){
  .mainnav{
    position: static !important;
    display: flex !important;
    gap: 18px;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
}

/* Móvil: mostrar el hamburguesa y que quede sobre todo */
@media (max-width: 720px){
  .burger{
    display: flex !important;                 /* <- vuelve a aparecer */
    align-items: center; justify-content: center;
    width: 44px; height: 36px;
    cursor: pointer;
    z-index: 1001;                             /* sobre el header */
    touch-action: manipulation;
  }

  /* Menú móvil oculto por defecto */
  .mainnav{
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    background: #061232;
    border-bottom: 1px solid var(--outline);
    display: flex; flex-direction: column; gap: 14px;
    padding: 14px 20px;
    z-index: 1000;

    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }

  /* Al abrir (checkbox checked) */
  #nav-toggle:checked ~ .burger + .mainnav{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0); transition-delay: 0s;
  }
}

/* Asegura que el header no tape clics y no deje franjas */
.topbar{ overflow: visible; background:#061232; }
body{ padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }













/* ===== Servicios — WOW v2 (hero-style con color por tema) ===== */
.servicios .svc-card{
  position: relative;
  isolation: isolate;                 /* que los brillos no se “salgan” */
  border-radius: 18px;
  /* base oscura + viñeta como el hero */
  background:
    radial-gradient(120% 90% at 75% -10%, #ffffff12 0%, transparent 60%),
    linear-gradient(180deg, #0B1430, #061232);
  border: 1px solid transparent;
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Borde degradado fino (1–2px) con los colores del tema */
.servicios .svc-card::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  padding: 1.5px;                       /* grosor del “neon border” */
  background: linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; 
          mask-composite: exclude;      /* deja solo el borde */
  opacity:.85;
  pointer-events:none;
}

/* Aura cromática suave dentro de la tarjeta (no tapa el texto) */
.servicios .svc-card::after{
  content:"";
  position:absolute; inset:-6%;
  border-radius: inherit;
  background:
    radial-gradient(closest-corner at 18% 14%, color-mix(in srgb, var(--c1) 60%, transparent) 0 26%, transparent 60%),
    radial-gradient(closest-corner at 84% 82%, color-mix(in srgb, var(--c2) 40%, transparent) 0 18%, transparent 55%);
  filter: blur(24px);
  opacity:.55;
  z-index: 0;
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

/* Hover: levanta, más glow y borde un poco más brillante */
@media (hover:hover){
  .servicios .svc-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0,0,0,.5);
    border-color:#ffffff44;
  }
  .servicios .svc-card:hover::after{
    opacity:.75; filter: blur(28px); transform: scale(1.02);
  }
}

/* Icono circular “energizado” con el color del tema */
.servicios .svc-icon{
  position: relative;
  z-index: 1;                           /* sobre el aura */
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 30% 30%, #ffffff36, #ffffff10 55%, #0000 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px #ffffff24 inset;
}
.servicios .svc-icon::before{
  content:"";
  position:absolute; inset:-2px; border-radius: inherit;
  background: conic-gradient(from 0deg, var(--c1), var(--c2) 55%, var(--c3));
  -webkit-mask: radial-gradient(circle 24px at center, #0000 28px, #000 0);
          mask: radial-gradient(circle 24px at center, transparent 28px, black 0);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c2) 42%, transparent));
  opacity:.95;
  animation: svcRing 16s linear infinite;
}
@keyframes svcRing { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce){
  .servicios .svc-icon::before{ animation: none; }
}

/* Tipos & bullets con mejor contraste */
.servicios .svc-card h3{ color:#fff; }
.servicios .svc-card p{ color:#dfe7f5; }
.servicios .svc-points li{ color:#e6eeff; }
.servicios .svc-points li::before{
  background:#121d44; color:#fff; opacity:.95;
}

/* CTA como “pill” con gradiente del tema (match hero chips) */
.servicios .svc-cta{
  display:inline-block;
  margin-top:auto;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(135deg, var(--c1), var(--c2) 65%);
  color:#fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c2) 38%, transparent);
  transform: translateZ(0);
}

/* ===== Paletas por tema (potentes pero elegantes) ===== */
.svc-card[data-theme="pink"]  { --c1:#F21651; --c2:#FF4D7A; --c3:#F9921C; }
.svc-card[data-theme="violet"]{ --c1:#913793; --c2:#B36AC0; --c3:#8EC5FF; }
.svc-card[data-theme="orange"]{ --c1:#F9921C; --c2:#FF8A3D; --c3:#FFD7A1; }
.svc-card[data-theme="green"] { --c1:#2ECC71; --c2:#28A745; --c3:#9EF5C6; }

/* Cabecera de sección consistente con hero */
.servicios .svc-head h2{ color:#fff; }
.servicios .svc-head h3{ color:#E6EEFF; font-weight:800; opacity:.95; }








/* ===== Misión & Visión: fondo con imagen + parallax + glass ===== */
.mv{
  position: relative;
  overflow: clip;                     /* recorta el parallax */
}

/* Fondo con imagen + viñeta + oscurecido para lectura */
.mv::before{
  content:"";
  position:absolute; inset:-4% -2% -6%;  /* un poco más grande para parallax */
  z-index:0;
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(2,12,31,.35), rgba(2,24,61,.72)),
    url("assets/mv-rocket.png") center 35% / cover no-repeat;
  transform: translate3d(0, var(--mv-y, 0px), 0) scale(1.06);
  will-change: transform;
}

/* El contenido por encima del fondo */
.mv .wrap{ position:relative; z-index:2; }

/* Tarjetas: glass elegante con contorno sutil */
.mv-card{
  background: linear-gradient(180deg, rgba(11,20,48,.70), rgba(9,16,42,.52));
  border: 1px solid #ffffff2a;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (hover:hover){
  .mv-card:hover{
    transform: translateY(-6px);
    border-color:#ffffff40;
    box-shadow: 0 18px 36px rgba(0,0,0,.55);
  }
}

/* Barra superior “energía” con gradiente de marca */
.mv-card .mv-cap{
  top:-7px; height: 10px; border-radius:999px;
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  box-shadow:
    0 0 14px color-mix(in srgb, var(--acc1) 40%, transparent),
    0 0 10px color-mix(in srgb, var(--acc2) 32%, transparent);
  opacity:.97;
}

/* Borde luminoso fino alrededor de cada tarjeta (elegante, no “chillón”) */
.mv-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.5px;
  background: linear-gradient(135deg, var(--acc1), var(--acc2) 60%, #ffffff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.85;
}

/* Paletas (coherentes con tu marca) */
.mv-card[data-theme="pink"]   { --acc1:#F21651; --acc2:#F9921C; }  /* Misión */
.mv-card[data-theme="violet"] { --acc1:#913793; --acc2:#8EC5FF; }  /* Visión */

/* Tipos más legibles sobre imagen */
.mv-card h3{ color:#fff; }
.mv-card p{ color:#E1E9FF; }






/* MV: variables de altura y zoom + hover en desktop */
.section.mv{
  --mv-h: clamp(520px, 60vh, 780px);      /* altura base */
  --mv-h-hover: clamp(92vh, 100vh, 100vh);/* al pasar el mouse */
  --mv-y: 0px;                            /* ya la usas para parallax */
  --mv-zoom: 1.06;                        /* zoom inicial del fondo */
  min-height: var(--mv-h);
  transition: min-height .45s ease;
}

/* En desktop, si pasas el mouse se “abre” */
@media (hover:hover) and (pointer:fine){
  .section.mv:hover{ min-height: var(--mv-h-hover); }
}

/* Asegura que el ::before use el zoom variable y enfoque la zona del cohete */
.section.mv::before{
  transform: translate3d(0, var(--mv-y), 0) scale(var(--mv-zoom)) !important;
  /* Ajusta si quieres centrar más el cohete (está a la derecha): */
  background-position: 85% 30% !important;  /* X% Y% */
}







/* === MV: contención + centrado vertical + fondo sólo dentro === */
.section.mv{
  position: relative;
  overflow: hidden !important;            /* recorta el fondo dentro de la sección */

  /* variables de altura/zoom */
  --mv-h-base: clamp(520px, 60vh, 780px);
  --mv-h-expanded: 110vh;                 /* cuanto “abre” al efecto */
  --mv-h-current: var(--mv-h-base);
  --mv-zoom: 1.06;                        /* zoom inicial del fondo */
  --mv-y: 0px;                            /* parallax vertical */
}

/* Fondo con imagen (sólo dentro de .mv) */
.section.mv::before{
  content:"";
  position:absolute; inset:0;             /* <-- ya no se extiende fuera */
  z-index:0;
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(2,12,31,.35), rgba(2,24,61,.72)),
    url("assets/mv-rocket.png") 85% 22% / cover no-repeat;
  transform: translate3d(0, var(--mv-y), 0) scale(var(--mv-zoom));
  will-change: transform;
}

/* Contenido centrado verticalmente mientras cambia la altura */
.section.mv .wrap{
  position: relative; z-index: 2;
  min-height: var(--mv-h-current);        /* altura “viva” que animamos por JS */
  display: grid;
  align-content: center;                  /* <-- centrado vertical real */
  gap: 28px;
  padding: 36px 0;
}

/* Tarjetas “glass” (mantén tu estilo actual si ya lo tenías) */
.section.mv .mv-card{
  background: linear-gradient(180deg, rgba(11,20,48,.70), rgba(9,16,42,.52)) !important;
  border: 1px solid #ffffff2a !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Borde/barra (si los usas) */
.section.mv .mv-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.5px;
  background: linear-gradient(135deg, var(--acc1,#F21651), var(--acc2,#F9921C) 60%, #ffffff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.85;
}
.section.mv .mv-cap{
  top:-7px; height:10px; border-radius:999px;
  background: linear-gradient(90deg, var(--acc1,#F21651), var(--acc2,#F9921C));
}
.section.mv .mv-card[data-theme="pink"]   { --acc1:#F21651; --acc2:#F9921C; }
.section.mv .mv-card[data-theme="violet"] { --acc1:#913793; --acc2:#8EC5FF; }





/* Mejora de aislamiento y mezcla con la sección siguiente */
.section.mv{
  contain: layout paint;            /* aisla el pin y mejora performance */
}
.section.mv::before{
  pointer-events: none;             /* el fondo no bloquea clics */
}
.section.mv::after{
  /* degradé inferior para que visualmente no “se fusione” con lo de abajo */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:56px;
  background: linear-gradient(180deg, rgba(2,24,61,0), rgba(2,24,61,.85));
  z-index: 1;                        /* por encima del fondo, por debajo del contenido */
  pointer-events: none;
}



/* MV: fuerza visibles los elementos .reveal-os dentro de la sección */
.section.mv .reveal-os{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

















/* ====== Misión & Visión — v3: tipografías + proporciones ====== */

/* título más pro y con aire */
.section.mv .mv-title{
  font-size: clamp(28px, 4.8vw, 56px);
  letter-spacing: .2px;
  margin: 0 0 18px;
}

/* tarjetas más grandes y cómodas de leer */
.section.mv .mv-card{
  padding: clamp(18px, 2.8vw, 32px) !important;
  border-radius: 20px !important;
}
.section.mv .mv-card h3{
  font-size: clamp(20px, 2.6vw, 32px);
  margin: 6px 0 12px;
  line-height: 1.15;
}
.section.mv .mv-card p{
  font-size: clamp(15.5px, 1.25vw, 18.5px);
  line-height: 1.65;
  color: #E6EEFF !important;
}

/* grid con un pelín más de respiración */
.section.mv .mv-grid{
  gap: clamp(18px, 2.2vw, 28px);
}

/* CTA central estilo hero */
.section.mv .mv-cta{
  display:flex; justify-content:center; align-items:center;
  margin-top: clamp(12px, 2.2vw, 22px);
}
.btn.btn-nosotros{
  background: linear-gradient(90deg,#F21651,#913793,#F9921C);
  color:#fff; border:1px solid #ffffff22;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 900; letter-spacing:.02em; text-decoration:none;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 22px rgba(145,55,147,.25);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn.btn-nosotros:hover{ transform: translateY(-2px); filter:brightness(1.05); }

/* móvil: pila y tamaños óptimos */
@media (max-width: 900px){
  .section.mv .mv-grid{ grid-template-columns: 1fr; }
  .section.mv .mv-card{ padding: 18px !important; }
  .section.mv .mv-card p{ font-size: clamp(15px, 4.1vw, 17px); }
}






/* ===== I+D+i aplicada — makeover hero-style ===== */
.section.alt{
  --g1:#913793; --g2:#F21651; --g3:#F9921C;            /* paleta marca */
  position: relative;
  background:
    radial-gradient(1200px 500px at 70% -10%, #ffffff0d, transparent 60%),
    linear-gradient(180deg,#00000022, transparent 40%),
    #02183D;
  border-top:1px solid var(--outline);
  border-bottom:1px solid var(--outline);
}
.section.alt .wrap.split{
  align-items: center;
  gap: clamp(22px, 4vw, 48px);
  min-height: clamp(520px, 58vh, 760px);
}

/* Título y copy más grandes */
.section.alt h2{
  font-size: clamp(28px, 4.8vw, 56px);
  line-height: 1.1;
  margin: 0 0 8px;
}
.section.alt .muted{
  color: #E6EEFF;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
  opacity: .95;
  max-width: 52ch;
}

/* CTA estilo hero */
.section.alt .btn{
  margin-top: 14px;
  background: linear-gradient(90deg, var(--g1), var(--g2) 55%, var(--g3));
  border: 1px solid #ffffff22;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 22px rgba(145,55,147,.22);
  border-radius: 999px;
  padding: 13px 20px;
  font-weight: 900;
}
.section.alt .btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }

/* Lista a “chips” con borde degradado + glass */
.section.alt .pill-list{
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
}
.section.alt .pill-list li{
  position: relative;
  padding: 14px 18px 14px 56px;
  color:#E6EEFF;
  font-weight: 800;
  border-radius: 16px;
  background:
    linear-gradient(#0B1430, #0A1534) padding-box,
    linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.section.alt .pill-list li::before{
  /* “icono” genérico: disco con anillo de energía */
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, #ffffffcc 0 40%, #ffffff22 60%, transparent 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
  box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 0 1px #ffffff24 inset;
}
.section.alt .pill-list li::after{
  /* anillo animado sutil */
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--g1), var(--g2) 55%, var(--g3));
  -webkit-mask: radial-gradient(circle 12px at center, transparent 12px, #000 13px);
          mask: radial-gradient(circle 12px at center, transparent 12px, #000 13px);
  opacity:.9; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--g2) 40%, transparent));
  animation: iddRing 16s linear infinite;
}
@keyframes iddRing{ to{ transform: translateY(-50%) rotate(1turn); } }

@media (hover:hover){
  .section.alt .pill-list li:hover{
    transform: translateX(4px);
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
    border-color:#ffffff33;
  }
}

/* Responsive: pila limpia */
@media (max-width: 980px){
  .section.alt .wrap.split{ grid-template-columns: 1fr; }
}














/* ===== I+D+i aplicada — v2 full (chips + iconos + layout sólido) ===== */

/* layout consistente: 2 columnas y columna derecha visible */
.section.alt .wrap.split{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;        /* izquierda texto / derecha chips */
  align-items: center;
  gap: clamp(22px, 4vw, 48px);
  min-height: clamp(560px, 60vh, 780px);
}

/* título y copy con más jerarquía */
.section.alt h2{
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.1;
  margin: 0 0 10px;
}
.section.alt .muted{
  color: #E6EEFF;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.65;
  opacity: .95;
  max-width: 54ch;
}

/* CTA estilo hero */
.section.alt .btn{
  margin-top: 16px;
  background: linear-gradient(90deg,#913793,#F21651 55%,#F9921C);
  border: 1px solid #ffffff22;
  border-radius: 999px;
  padding: 13px 20px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 22px rgba(145,55,147,.22);
}

/* columna de chips (derecha) */
.section.alt .pill-list{
  justify-self: end;                         /* pega a la derecha */
  width: min(560px, 44vw);                   /* ancho visible */
  display: grid;
  grid-auto-rows: minmax(58px,auto);
  gap: clamp(10px, 1.6vw, 16px);
  margin: 0; padding: 0; list-style: none;
}

/* chip base glass + borde degradado */
.section.alt .pill-list li{
  position: relative;
  padding: 14px 18px 14px 56px;              /* espacio para icono */
  color:#E6EEFF;
  font-weight: 800;
  border-radius: 16px;
  background:
    linear-gradient(#0B1430, #0A1534) padding-box,
    linear-gradient(135deg,#913793,#F21651 55%,#F9921C) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

/* disco + icono centrado (en el mismo pseudo-elemento) */
.section.alt .pill-list li::before{
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:
    /* ICONO (segunda capa, centrada) — se cambia por nth-child */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.5'/><path d='M19.4 15a7.8 7.8 0 0 0 .1-2l2-1.2-2-3.5-2.3.5a7.9 7.9 0 0 0-1.7-1l-.3-2.4H11l-.3 2.4a7.9 7.9 0 0 0-1.7 1L6.7 8.3 4.7 11.8l2 1.2a8 8 0 0 0 .1 2l-2 1.2 2 3.5 2.3-.5c.54.39 1.12.72 1.73.98l.27 2.42h4l.27-2.42c.61-.26 1.19-.59 1.73-.98l2.3.5 2-3.5-2-1.2z'/></svg>") no-repeat center/16px 16px,
    /* DISCO base */
    radial-gradient(circle at 35% 35%, #ffffffcc 0 40%, #ffffff22 60%, transparent 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
  box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 0 1px #ffffff24 inset;
}

/* anillo de energía (gira sutil) */
.section.alt .pill-list li::after{
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background: conic-gradient(from 0deg,#913793,#F21651 55%,#F9921C);
  -webkit-mask: radial-gradient(circle 12px at center, transparent 12px, #000 13px);
          mask: radial-gradient(circle 12px at center, transparent 12px, #000 13px);
  opacity:.9; filter: drop-shadow(0 0 8px rgba(242,22,81,.4));
  animation: iddRing 16s linear infinite;
}
@keyframes iddRing{ to{ transform: translateY(-50%) rotate(1turn); } }

/* iconos específicos por ítem (satélite, medical, engranaje, cohete) */
.section.alt .pill-list li:nth-child(1)::before{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4l6 6'/><path d='M8 10l6 6'/><circle cx='7' cy='7' r='2'/><path d='M2 22l7-7'/></svg>") no-repeat center/16px 16px,
    radial-gradient(circle at 35% 35%, #ffffffcc 0 40%, #ffffff22 60%, transparent 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
}
.section.alt .pill-list li:nth-child(2)::before{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20'/><path d='M5 12h14'/></svg>") no-repeat center/16px 16px,
    radial-gradient(circle at 35% 35%, #ffffffcc 0 40%, #ffffff22 60%, transparent 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
}
.section.alt .pill-list li:nth-child(3)::before{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10z'/><path d='M2 22a10 10 0 0 1 20 0'/></svg>") no-repeat center/16px 16px,
    radial-gradient(circle at 35% 35%, #ffffffcc 0 40%, #ffffff22 60%, transparent 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
}
.section.alt .pill-list li:nth-child(4)::before{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l6-6 3 3 7-7'/><path d='M14 7l6 0l0 6'/></svg>") no-repeat center/16px 16px,
    radial-gradient(circle at 35% 35%, #ffffffcc 0 40%, #ffffff22 60%, transparent 70%),
    linear-gradient(180deg, #0e1b3f, #0a1430);
}

/* hover sutil */
@media (hover:hover){
  .section.alt .pill-list li:hover{
    transform: translateX(4px);
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
    border-color:#ffffff33;
  }
}

/* responsive: pila limpia */
@media (max-width: 980px){
  .section.alt .wrap.split{ grid-template-columns: 1fr; min-height: unset; }
  .section.alt .pill-list{ justify-self: stretch; width: 100%; }
}





/* ========== PATCH I+D+i aplicada (pegar al FINAL del CSS) ========== */

/* layout consistente: izquierda texto / derecha chips */
.section.alt .wrap.split{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,520px);
  align-items:center;
  gap:32px;
  min-height: clamp(520px, 58vh, 760px);
  position:relative;
  z-index:1;
}

/* lista de chips visible y con contraste */
.section.alt .pill-list{
  display:grid;
  grid-auto-rows:minmax(56px,auto);
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
  position:relative;
  z-index:2;
}

/* chip base: sin máscaras raras, fondo sólido y borde sutil */
.section.alt .pill-list li{
  position:relative;
  padding:14px 18px 14px 56px;     /* espacio para el “icono” */
  background:#0F1A3B;              /* CONTRASTE (más claro que el fondo) */
  color:#E6EEFF;
  border:1px solid #ffffff2d;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  opacity:1 !important;            /* por si algo le bajó la opacidad */
}

/* “icono” circular simple (sin -webkit-mask) */
.section.alt .pill-list li::before{
  content:"";
  position:absolute;
  left:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 40%, #ffffff44 60%, transparent 70%);
  box-shadow:0 0 0 1px #ffffff3a inset, 0 3px 10px rgba(0,0,0,.35);
}

/* tipografía y CTA coherentes */
.section.alt h2{ font-size:clamp(36px,5vw,58px); line-height:1.1; margin:0 0 10px; }
.section.alt .muted{ color:#E6EEFF; font-size:clamp(16px,1.3vw,20px); line-height:1.6; opacity:.95; }
.section.alt .btn{
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(90deg,#913793,#F21651 55%,#F9921C);
  border:1px solid #ffffff22;
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 22px rgba(145,55,147,.22);
  font-weight:900;
}

/* responsivo */
@media (max-width: 980px){
  .section.alt .wrap.split{ grid-template-columns:1fr; min-height:unset; }
}






/* PATCH contención Misión/Visión (opcional pero recomendado) */
.section.mv{ position:relative; overflow:hidden; }
.section.mv::before{ content:""; position:absolute; inset:0; z-index:0; }
.section.mv .wrap{ position:relative; z-index:1; display:grid; align-content:center; min-height:clamp(520px,60vh,780px); }







/* ====== FIX duro: que Misión/Visión NO invada lo de abajo ====== */
.section.mv{
  position: relative !important;
  overflow: hidden !important;      /* recorta el fondo dentro de la sección */
  z-index: 0 !important;
  contain: layout paint !important; /* aísla la capa */
}

/* El fondo de MV debe quedarse dentro (sin inset negativo ni zoom) */
.section.mv::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;              /* nada de -4%/-6% */
  z-index: 0 !important;
  transform: none !important;       /* sin translate/scale que se salga */
  pointer-events: none !important;
}

/* El degradé/velo inferior de MV no debe tapar la siguiente sección */
.section.mv::after{
  display: none !important;
}

/* Asegura que I+D+i esté por encima de MV en el apilado */
.section.alt{
  position: relative !important;
  z-index: 1 !important;
}

/* ====== FIX chips: que no haya recortes ni alturas impuestas ====== */
.section.alt .pill-list{
  overflow: visible !important;
  max-height: none !important;
}

.section.alt .pill-list li{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}



/* ====== FIX: que Misión/Visión NO invada la sección de I+D+i ====== */
.section.mv{
  position: relative !important;
  overflow: hidden !important;     /* recorta su propio fondo */
  z-index: 0 !important;           /* por debajo de lo que sigue */
  /* desactiva cualquier expansión que empuje a lo de abajo */
  min-height: initial !important;
}
.section.mv .wrap{
  min-height: initial !important;
}
.section.mv::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;             /* nada de insets negativos */
  z-index: 0 !important;
  transform: none !important;      /* sin translate/scale que salga del recorte */
  pointer-events: none !important;
}
/* por si quedaba un velo inferior */
.section.mv::after{ display: none !important; }

/* I+D+i debe pintarse por encima y sin límites de alto */
.section.alt{
  position: relative !important;
  z-index: 10 !important;          /* por encima de MV */
  padding: 80px 0 !important;      /* aire vertical cómodo */
}
/* quitamos cualquier altura mínima heredada */
.section.alt .wrap.split{
  min-height: unset !important;
  align-items: start !important;
}

/* ====== FIX chips: no recortes, 4 ítems visibles ====== */
.section.alt .pill-list{
  display: grid !important;
  grid-auto-rows: minmax(58px, auto) !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  width: min(560px, 44vw) !important;
  overflow: visible !important;
  max-height: none !important;
}
.section.alt .pill-list li{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 58px !important;
}




/* ===== I+D+i — MODO RESCATE (forzar visibilidad y layout) ===== */
.section.mv{ z-index:0 !important; }                 /* MV por debajo */
.section.alt{ position:relative !important; z-index:5 !important; }

.section.alt .wrap.split{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,520px) !important;
  align-items:center !important;
  gap:24px !important;
  min-height: clamp(520px,58vh,760px) !important;
}
@media (max-width:980px){
  .section.alt .wrap.split{ grid-template-columns:1fr !important; min-height:unset !important; }
}

/* Columna de chips: SIEMPRE visible (sin recortes ni transforms) */
.section.alt .pill-list{
  display:grid !important;
  grid-auto-rows:minmax(56px,auto) !important;
  gap:14px !important;
  justify-self:end !important;
  width:min(560px,44vw) !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
  overflow:visible !important; max-height:none !important;
  opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important;
}

/* Cada chip visible y con fondo/borde simple (sin efectos extra) */
.section.alt .pill-list li{
  position:relative !important;
  display:flex !important; align-items:center !important;
  min-height:58px !important;
  padding:14px 18px 14px 56px !important;
  background:#0F1A3B !important;
  color:#E6EEFF !important;
  border:1px solid #ffffff2d !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.35) !important;
  opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important;
}

/* Quitamos iconos/aros animados por si estaban causando conflictos */
.section.alt .pill-list li::before,
.section.alt .pill-list li::after{ content:none !important; }





/* ========== I+D+i — FIX MOBILE (chips a 100% ancho, debajo del texto) ========== */
@media (max-width: 720px){
  .section.alt .wrap.split{
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 18px !important;
    min-height: unset !important;
  }

  /* columna de chips a ancho completo */
  .section.alt .pill-list{
    justify-self: stretch !important;
    width: 100% !important;
    grid-auto-rows: minmax(52px, auto) !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  /* chip más compacto y legible */
  .section.alt .pill-list li{
    padding: 12px 14px 12px 52px !important; /* icono + texto */
    border-radius: 14px !important;
    min-height: 52px !important;
    line-height: 1.25 !important;
  }

  /* icono más chico y cerca del borde */
  .section.alt .pill-list li::before,
  .section.alt .pill-list li::after{
    left: 14px !important;
    width: 22px !important;
    height: 22px !important;
  }

  /* jerarquía de títulos/copy en móvil */
  .section.alt h2{
    font-size: clamp(26px, 7vw, 34px) !important;
    margin-bottom: 4px !important;
  }
  .section.alt .muted{
    font-size: clamp(14px, 4.5vw, 16px) !important;
    line-height: 1.5 !important;
  }

  /* opcional: quitar el anillo animado para ahorrar GPU en móvil */
  .section.alt .pill-list li::after{ display: none !important; }
}



/* ==== I+D+i (MÓVIL) – evita que los chips se monten sobre el botón ==== */
@media (max-width: 720px){
  /* una sola columna con hueco suficiente entre bloques */
  .section.alt .wrap.split{
    grid-template-columns: 1fr !important;
    gap: 22px !important;                 /* separación entre texto+botón y la lista */
    align-items: start !important;
    min-height: unset !important;
  }

  /* botón con margen inferior explícito para evitar colapsos de márgenes */
  .section.alt .wrap.split > div:first-child .btn{
    margin-bottom: 14px !important;
    position: relative; z-index: 2;       /* si llegara a tocarse, el botón queda arriba */
  }

  /* la lista empieza un poco más abajo y a ancho completo */
  .section.alt .pill-list{
    width: 100% !important;
    margin-top: 6px !important;
    justify-self: stretch !important;
  }

  /* chips compactos y SIN transform (anula animaciones que los mueven) */
  .section.alt .pill-list li{
    min-height: 52px !important;
    padding: 12px 14px 12px 52px !important;
    transform: none !important;
  }
  .section.alt .pill-list li::before,
  .section.alt .pill-list li::after{
    left: 14px !important; width: 22px !important; height: 22px !important;
  }
}





/* ==== I+D+i (móvil) — más aire entre el botón y los chips ==== */
@media (max-width: 720px){
  /* más hueco entre la columna del texto/botón y la lista */
  .section.alt .wrap.split{
    grid-template-columns: 1fr !important;
    row-gap: clamp(28px, 5vw, 42px) !important; /* antes 22px */
    gap: clamp(28px, 5vw, 42px) !important;     /* refuerzo */
    align-items: start !important;
    min-height: unset !important;
  }

  /* botón con margen inferior generoso */
  .section.alt .wrap.split > div:first-child .btn{
    margin-bottom: clamp(16px, 4vw, 24px) !important;
    position: relative; z-index: 2;
  }

  /* la lista arranca un poco más abajo y a ancho completo */
  .section.alt .pill-list{
    width: 100% !important;
    margin-top: clamp(10px, 3vw, 18px) !important;
    justify-self: stretch !important;
  }

  /* (opcional) chips un pelín más compactos */
  .section.alt .pill-list li{
    min-height: 52px !important;
    padding: 12px 14px 12px 52px !important;
  }
  .section.alt .pill-list li::before,
  .section.alt .pill-list li::after{
    left: 14px !important; width: 22px !important; height: 22px !important;
  }
}









/* ===== Servicios — Rediseño con imagen de fondo y borde grueso ===== */
.servicios .svc-card{
  --border-w: 3px;                   /* grosor del borde (antes ~1.5px) */
  --strip-h: 12px;                   /* alto de la franja inferior */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  padding: 20px 18px 16px;
  /* panel base + borde degradado (mantenemos tus colores por tema) */
  background:
    linear-gradient(#0B1430, #0B1430) padding-box,
    linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c3)) border-box;
  border: var(--border-w) solid transparent;
  box-shadow:
    inset 0 calc(-1 * var(--strip-h)) 0 0 color-mix(in srgb, var(--c2) 70%, #000 0%), /* franja de color abajo */
    0 12px 26px rgba(0,0,0,.38);
}

/* Capa de imagen + oscurecido para legibilidad */
.servicios .svc-card::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(2,12,31,.15), rgba(2,12,31,.55) 55%, rgba(2,12,31,.75) 100%),
    var(--bg, none) var(--bg-pos, center) / cover no-repeat;
  filter: saturate(1.05);
  transform: scale(1.03);             /* evita bordes vacíos al cover */
}

/* El contenido por encima de la imagen */
.servicios .svc-card > *{ position: relative; z-index: 1; }

/* Oculta posibles iconos antiguos (si quedaron en el HTML) */
.servicios .svc-card .svc-icon{ display:none !important; }

/* Tipos: más jerarquía y aire */
.servicios .svc-card h3{
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  margin: 2px 0 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.servicios .svc-card p{
  color:#E6EEFF;
  margin: 0 0 8px;
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
  /* opcional: limita a 3 líneas si el párrafo es largo */
  /* display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; */
}
.servicios .svc-points{ gap: 6px; }
.servicios .svc-points li{ color:#f0f4ff; }

/* Hover (solo desktop): leve lift, sin tapar el texto */
@media (hover:hover){
  .servicios .svc-card:hover{
    transform: translateY(-4px);
    box-shadow:
      inset 0 calc(-1 * var(--strip-h)) 0 0 color-mix(in srgb, var(--c2) 70%, #000 0%),
      0 18px 36px rgba(0,0,0,.48);
  }
}

/* Responsivo: títulos visibles y buena lectura */
@media (max-width: 768px){
  .servicios .svc-card{ padding: 18px 16px 14px; }
  .servicios .svc-card h3{ font-size: clamp(20px, 5.4vw, 24px); }
  .servicios .svc-card p{ font-size: 0.98rem; }
}












/* ==== MV full-bleed: fondo real de lado a lado ==== */

/* 1) Apagamos cualquier fondo anterior puesto en ::before */
.section.mv::before{ content:none !important; }

/* 2) Colgamos el fondo en la sección completa (no en .wrap) */
.section.mv{
  /* ajusta la ruta/encuadre si quieres */
  --mv-img: url("assets/cohete_de_web.png");
  --mv-pos: 85% 22%;
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(2,12,31,.35), rgba(2,24,61,.72)),
    var(--mv-img) var(--mv-pos) / cover no-repeat !important;
  background-attachment: scroll;   /* puedes poner 'fixed' si te gusta */
  position: relative;
  overflow: hidden;
}

/* 3) El contenido siempre por encima del fondo */
.section.mv .wrap{ position: relative; z-index: 1; }

/* 4) (Opcional) degradé suave al final para empaste con la sección siguiente */
.section.mv::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:56px;
  background: linear-gradient(180deg, rgba(2,24,61,0), rgba(2,24,61,.85));
  pointer-events:none;
  z-index: 0;
}










/* ===== MV FULL-BLEED FORZADO (pegar al FINAL del CSS) ===== */

/* 0) Nos aseguramos de no recortar el pseudo-elemento */
.section.mv{ 
  position: relative !important; 
  overflow: visible !important;     /* <- clave */
  z-index: 0 !important;
}

/* 1) Fondo a tamaño viewport, centrado respecto al viewport (no del contenedor) */
.section.mv::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;             /* ancla al centro del viewport */
  width: 100vw !important;          /* ocupa todo el viewport */
  height: 100% !important;
  transform: translateX(-50%) !important; /* compensa el 50% left */

  background:
    radial-gradient(120% 60% at 50% -6%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(2,12,31,.35), rgba(2,24,61,.72)),
    url("assets/cohete_de_web.png") 85% 22% / cover no-repeat !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

/* 2) Contenido siempre por encima del fondo */
.section.mv > .wrap{ 
  position: relative !important; 
  z-index: 1 !important; 
}

/* 3) Opcional: si algún “FIX” anterior añadió un velo abajo que te tape, lo apagamos */
.section.mv::after{ display: none !important; }




















/* Botón Blog (azul eléctrico dentro de la temática) */
.btn-blog{
  /* degradado intenso azul→cian (legible con texto blanco) */
  background: linear-gradient(90deg, #0047FF, #00A6FF);
  color: #fff;
  border: 1px solid #ffffff22;
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 18px rgba(0,166,255,.22);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.btn-blog:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-blog:focus-visible{
  outline: 2px solid #00A6FF;
  outline-offset: 3px;
}





/* ===== CTAs del hero en grilla con mismos tamaños ===== */
.cta-row{
  display: grid;                                    /* antes era flex */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.cta-row .btn{
  display: flex; align-items: center; justify-content: center;
  min-height: 72px;                                  /* misma altura para todos */
  border-radius: 16px;
  font-weight: 900;
  text-align: center;
  padding: 14px 16px;
  white-space: normal;                               /* permite 2 líneas si es necesario */
}

/* Responsivo: 3×2 en desktop, 2×3 en tablet, 1×6 en móvil */
@media (max-width: 980px){
  .cta-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .cta-row{ grid-template-columns: 1fr; }
}

/* ===== Botón “Portal de Capacitaciones” ===== */
/* Portal de Capacitaciones — fluor cian→violeta */
.btn-portal{
  --p1:#FF2F7A; --p2:#FF2F7A;   /* violeta neon */

  background: linear-gradient(90deg, var(--p1), var(--p2));
  color: #ffffff;
  border: 1px solid #ffffff22;
  box-shadow: 0 10px 22px rgba(0,0,0,.35),
              0 0 22px color-mix(in srgb, var(--p2) 40%, transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.btn-portal:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn-portal:focus-visible{ outline: 2px solid var(--p1); outline-offset: 3px; }




/* ===== HERO a pantalla completa (desktop + laptop + móvil) ===== */
:root{
  /* ya lo tienes, pero lo reiteramos aquí por si algún bloque lo pisa */
  --header-h: 64px;
}
@media (max-width: 980px){ :root{ --header-h: 62px; } }
@media (max-width: 480px){ :root{ --header-h: 56px; } }

/* El hero llena el alto visible por debajo del header fijo */
.hero{
  /* fallback universal */
  min-height: calc(100vh - var(--header-h) - env(safe-area-inset-top));

  /* navegadores modernos (evita “saltos” por UI del browser) */
}
@supports (height: 100dvh){
  .hero{
    min-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
  }
}
/* Safari iOS moderno (small viewport height) */
@supports (height: 100svh){
  .hero{
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top));
  }
}

/* El contenido interno del hero se centra verticalmente y hereda la altura */
.hero-grid{
  min-height: inherit;          /* se estira como el hero */
  align-content: center;        /* centra verticalmente el grid */
}

/* El canvas ocupa exactamente el hero */
#stars-canvas{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}