/* ==========================================================================
   Neodes — hoja de estilos de la nueva web.

   Dirección visual: A + C (sobria y segura con detalles con personalidad).
   Mucho blanco, tipografía con contraste (serif grande + sans para texto),
   acentos de color valientes pero no estridentes, animaciones al bajar.

   Toda la paleta y los espaciados están en variables en :root, para que
   cambiar la marca sea cambiar números en un solo sitio.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* --- paleta ---
     El azul-índigo profundo es la marca Neodes, actualizada: el azul-morado
     de la web actual (#4b4bff) se veía muy «2015». El cian como acento 2
     es el detalle valiente que da modernidad sin pasarse. */
  --bg:    #fafafa;
  --bg2:   #f1f3f7;
  --tx:    #0f172a;
  --mu:    #64748b;
  --hi:    #020617;
  --card:  #ffffff;
  --bd:    #e2e8f0;

  --ac:    #1E88E5;   /* azul del logo Neodes — la marca manda */
  --ac2:   #0D3C78;   /* azul profundo del borde de la esfera, acento secundario */
  --acg:   30,136,229;/* --ac  en rgb, para rgba() */
  --ac2g:  13,60,120; /* --ac2 en rgb, para rgba() */

  /* --- medidas --- */
  --max:   1200px;
  --paso:  clamp(60px, 10vw, 130px);   /* separación vertical entre bloques */

  /* --- tipografía ---
     Dos familias: una serif con carácter para titulares (de ahí la
     personalidad) y una sans cómoda para texto largo. Las dos se cargan
     desde el servidor local, no desde Google. */
  --f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Resetamos lo mínimo. */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--f-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Contenedor estándar: todo el contenido vive aquí dentro. */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Un helper por si hay que centrar algo rápido. */
.center{text-align:center}
.mu{color:var(--mu)}

/* --------------------------------------------------------------------------
   Tipografía: titulares con la serif, texto con la sans. El contraste de
   familia es parte del estilo de la casa.
   -------------------------------------------------------------------------- */

h1,h2,h3,h4{margin:0;font-family:var(--f-serif);font-weight:400;
  color:var(--hi);letter-spacing:-.02em;line-height:1.05}

h1{font-size:clamp(36px,5.4vw,72px)}
h2{font-size:clamp(32px,5vw,60px)}
h3{font-size:clamp(22px,2.6vw,32px)}

/* El «eyebrow»: la etiqueta pequeña sobre los titulares. Pequeña, en
   mayúsculas, con el acento 2 (cian), para dar el detalle que distingue
   del clásico «consultora elegante». */
.eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--ac);margin:0 0 20px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ac2)}

/* Párrafos de introducción largos, bajo cada titular. */
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--mu);
  max-width:none;margin:28px 0 0;line-height:1.6}
/* El del hero mantiene el ancho controlado para no quedar demasiado largo */
.hero .lead{max-width:62ch;margin-top:36px}

/* En "Que hacemos" el subtitulo va mas junto al titular y a las tarjetas */
/* Mismos tamaños que #por-que (Quiénes somos) para unificar criterio. */
#servicios h2{font-size:clamp(24px,3vw,38px)}
#servicios .lead{margin-top:8px;font-size:clamp(14px,1.1vw,16px);line-height:1.5;max-width:none;white-space:nowrap}
@media (max-width:900px){ #servicios .lead{white-space:normal} }
#servicios .servicios{margin-top:18px}
#servicios{padding:clamp(10px,1.8vw,22px) 0 clamp(20px,3vw,36px)}

/* Chips verde muy clara, texto verde oscuro. Más editorial que gris puro
   y menos "landing azul". Esquinas apenas redondeadas (6 px), no pastilla. */
.s-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.s-chips span{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;letter-spacing:.005em;
  color:#2f6a3b;
  background:#eaf4ec;
  border:0;
  padding:3px 10px;border-radius:6px;
}


/* ==========================================================================
   AZURE PHARMA — sección propia con un producto propio de Neodes.
   Fondo con un sutil degradado azul para diferenciarla de las secciones
   normales (es un bloque "showcase"), con una rejilla de 5 cards de
   característica + CTA al pie.
   ========================================================================== */
/* Azure Pharma: reutiliza .servicios + .servicio y añade override de columnas +
   una card ancha "Multidispositivo" con imagen y texto. */
#azure-pharma h2{font-size:clamp(24px,3vw,38px)}
#azure-pharma .lead{margin-top:10px;max-width:none;font-size:clamp(14px,1.1vw,16px);line-height:1.5;white-space:nowrap}
@media (max-width:1100px){ #azure-pharma .lead{white-space:normal} }
#azure-pharma{padding:clamp(10px,1.8vw,22px) 0 clamp(20px,3vw,36px)}
#azure-pharma .servicios.azp-grid{margin-top:18px;grid-template-columns:repeat(4,1fr)}
#azure-pharma .servicio-ancho{grid-column:1 / -1}

/* Bloque interno de la card "Multidispositivo": texto izq + capturas en cascada der */
.s-multi{
  display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start;
  margin-top:8px;
}
.servicio .s-multi-txt p{font-size:14px;line-height:1.6;color:var(--mu);margin:0 0 40px}
.s-multi-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.s-multi-bullets li{
  font-size:13px;line-height:1.45;
  color:#2f6a3b;background:#eaf4ec;
  padding:8px 14px;border-radius:8px;
}

/* 3 placeholders en cascada para futuras capturas de la app.
   Tamaño fijo de cada captura (en px), cascada que cabe en su contenedor. */
.s-multi-shots{
  position:relative;
  height:340px;
  width:100%;max-width:440px;
  margin:0 auto;
}
.s-shot{
  position:absolute;
  width:240px;height:180px;
  background:
    linear-gradient(135deg, #f3f8ff 0%, #e6eef9 100%);
  border:1px solid rgba(var(--acg),.3);
  border-radius:10px;
  box-shadow:0 14px 32px -18px rgba(13,60,120,.35);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.s-shot:nth-child(1){ top:0;     left:0;     transform:rotate(-4deg); z-index:1; }
.s-shot:nth-child(2){ top:80px;  left:100px; transform:rotate(0deg);  z-index:2; }
.s-shot:nth-child(3){ top:160px; left:200px; transform:rotate(4deg);  z-index:3; }
.servicio-ancho:hover .s-shot:nth-child(1){ transform:rotate(-7deg) translate(-6px,-3px); }
.servicio-ancho:hover .s-shot:nth-child(3){ transform:rotate(7deg)  translate(6px,3px); }

@media (max-width:900px){
  .s-shot{width:200px;height:150px}
  .s-shot:nth-child(2){ top:70px;  left:85px;  }
  .s-shot:nth-child(3){ top:140px; left:170px; }
  .s-multi-shots{height:290px;max-width:380px}
}

.azp-cta{margin-top:28px;display:flex;justify-content:center}

@media (max-width:1024px){ #azure-pharma .servicios.azp-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){
  .s-multi{grid-template-columns:1fr;gap:16px}
  .s-multi-shots{height:200px;min-width:0;margin:0 auto;max-width:360px}
}
@media (max-width:460px){ #azure-pharma .servicios.azp-grid{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------
   Barra de arriba: logo a la izquierda, menú a la derecha. Fondo blanco
   casi translúcido, para que al bajar quede flotando sobre el contenido.
   -------------------------------------------------------------------------- */

header{position:sticky;top:0;z-index:50;
  background:
    linear-gradient(90deg, transparent 0%, rgba(var(--acg),.05) 50%, transparent 100%),
    var(--bg);
  border-bottom:1px solid var(--bd);
  transition:box-shadow .2s ease}
header.pegado{box-shadow:0 2px 20px -4px rgba(15,23,42,.08)}

/* Una fina linea de color sobre la frontera inferior, como detalle de marca. */
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--ac) 20%, var(--ac2) 50%, var(--ac) 80%, transparent 100%);
  opacity:0;transition:opacity .3s}
header.pegado::after{opacity:.5}

.nav{display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;max-width:var(--max);margin:0 auto}

/* Grupo de botones (CTA) a la derecha del header: Información cursos + Hablemos */
.nav-ctas{display:flex;align-items:center;gap:10px}
.nav-ctas .cta{white-space:nowrap}

.logo,
.pie-logo{display:inline-flex;align-items:center;gap:12px;
  color:var(--hi);text-decoration:none}
.logo .logo-mark,
.pie-logo .logo-mark{display:block;width:54px;height:50px;
  transition:transform .25s ease}
.logo:hover .logo-mark{transform:scale(1.05) rotate(-3deg)}
.logo .logo-txt,
.pie-logo .logo-txt{display:flex;flex-direction:column;line-height:1;gap:4px;text-align:left}
.logo .logo-nombre,
.pie-logo .logo-nombre{font-family:var(--f-serif);font-size:30px;letter-spacing:-.02em}
.logo .logo-sub,
.pie-logo .logo-sub{font-family:'Inter',sans-serif;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--mu);font-weight:500}

.menu{display:flex;gap:34px;font-size:14.5px;font-weight:500;color:var(--mu)}
.menu a{
  position:relative;padding:4px 0;
  transition:color .18s;
}
.menu a:hover{color:var(--hi)}
/* Estado activo (scrollspy): color de marca + línea azul por debajo que
   se expande con una pequeña animación al activarse. */
.menu a.activo{color:var(--hi)}
.menu a.activo::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));
  transform-origin:left;
  animation:menuSub .3s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes menuSub{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

/* Botones (CTA) — rediseñados 07/10/2026 para que no se vean "pegotes".
   - .cta sólido: degradado azul Neodes → azul profundo, sombra proyectada,
     flecha o icono empujado al hover. Es la acción primaria.
   - .cta.hollow: transparente, borde fino con color de marca, hover
     invierte a sólido suavemente.
   Ambos comparten padding, radius y transición. */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 24px;border-radius:999px;
  font-family:var(--f-sans);font-weight:600;font-size:14.5px;letter-spacing:-.005em;
  line-height:1;
  color:#fff;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);
  background-size:150% 150%;background-position:0% 50%;
  box-shadow:0 10px 24px -10px rgba(var(--acg),.5),
             inset 0 1px 0 rgba(255,255,255,.18);
  border:1px solid transparent;
  cursor:pointer;
  transition:
    transform .25s cubic-bezier(.2,.8,.3,1),
    box-shadow .3s ease,
    background-position .4s ease;
}
.cta:hover{
  transform:translateY(-2px);
  background-position:100% 50%;
  box-shadow:0 16px 32px -12px rgba(var(--acg),.6),
             inset 0 1px 0 rgba(255,255,255,.25);
}
.cta:active{transform:translateY(0)}

/* Variante "hollow": fondo blanco con borde azul profundo visible.
   Al hover se rellena con el degradado azul y el texto pasa a blanco. */
.cta.hollow{
  color:var(--ac2);
  background:#fff;
  border:1.5px solid var(--ac2);
  box-shadow:0 4px 12px -6px rgba(var(--ac2g),.3);
}
.cta.hollow:hover{
  color:#fff;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);
  border-color:transparent;
  box-shadow:0 12px 24px -10px rgba(var(--acg),.5);
}

/* --------------------------------------------------------------------------
   Hero: lo primero que se ve. Mucho espacio arriba y abajo, titular grande
   que ocupa la pantalla, dos credenciales rápidas y una llamada a la acción.
   La «etiqueta» de arriba es un detalle de boutique: identifica a Neodes
   sin tener que repetir el nombre.
   -------------------------------------------------------------------------- */

.hero{padding:clamp(6px,1.2vw,16px) 0 clamp(20px,3vw,40px);
  position:relative;overflow:hidden}

/* Dos manchas de color muy sutiles detrás del titular. No se ven directamente
   pero dan un «aire» de color sin recurrir a ilustraciones. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(800px 500px at 92% 20%, rgba(var(--acg),.22), transparent 60%),
    radial-gradient(500px 400px at 15% 100%, rgba(var(--ac2g),.18), transparent 65%),
    radial-gradient(400px 300px at 50% 50%, rgba(var(--acg),.05), transparent 70%)}

.hero h1{max-width:22ch}
.hero .lead{margin-top:26px;max-width:58ch}

/* ---------- credenciales ----------
   La principal (17 años con GSK) va a la izquierda con el numero gigante
   en serif. Las otras dos a la derecha, como pastillas pequeñas. Debajo,
   una linea de puntos cian pulsantes como detalle vivo. */

.credenciales{margin-top:44px;display:flex;flex-direction:column;align-items:flex-start;
  gap:20px}
.credenciales .destacado{width:auto;max-width:100%}

/* El destacado: numero grande + etiqueta */
.destacado{display:flex;align-items:baseline;gap:16px;position:relative;
  padding:12px 22px 14px 20px;border-left:3px solid var(--ac);
  background:linear-gradient(90deg, rgba(var(--acg),.05), transparent 70%)}

.destacado .num{font-family:var(--f-serif);font-size:clamp(56px,7vw,96px);
  line-height:.9;color:var(--ac);font-feature-settings:"tnum" 1;
  min-width:1.4em;text-align:right}

.destacado .et{display:flex;flex-direction:column;line-height:1.3}
.destacado .et strong{font-size:16px;font-weight:600;color:var(--hi);
  font-family:var(--f-sans)}
.destacado .et small{font-size:13.5px;color:var(--mu);margin-top:3px}

/* Linea de puntos pulsantes debajo del destacado */
.destacado::after{content:"";position:absolute;left:22px;right:0;bottom:-14px;
  height:6px;background:
    radial-gradient(circle, var(--ac2) 1.5px, transparent 2px) 0 50% / 14px 6px repeat-x;
  mask:linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
  -webkit-mask:linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
  animation:recorrer 3s ease-in-out infinite;opacity:.7}
@keyframes recorrer{
  0%,100%{background-position:0 50%}
  50%   {background-position:14px 50%}
}

/* Las dos pastillas pequeñas */
.pastillas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pastillas span{display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border:1px solid var(--bd);border-radius:999px;
  background:var(--card);font-size:13px;color:var(--tx);white-space:nowrap}
.pastillas span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ac2);box-shadow:0 0 0 3px rgba(var(--ac2g),.2)}

@media (max-width:640px){
  .credenciales{grid-template-columns:1fr;gap:18px}
  .destacado{padding:14px 18px}
}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Badge "+30 años construyendo software" entre el lead y las CTAs */
.hero-anios{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:28px;
  padding:4px 0 4px 16px;
  border-left:3px solid var(--ac);
}
.hero-anios-pre{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);line-height:1;
}
.hero-anios-big{
  font-family:var(--f-serif);color:var(--ac);
  font-size:56px;line-height:.9;letter-spacing:-.02em;
  display:inline-flex;align-items:flex-start;gap:1px;
}
.hero-anios-big .pre{font-size:.6em;color:var(--ac2);line-height:1;padding-top:4px}
.hero-anios-txt{
  font-family:var(--f-serif);color:var(--hi);
  font-size:22px;line-height:1.1;letter-spacing:-.01em;
}
@media (max-width:560px){
  .hero-anios{gap:10px}
  .hero-anios-big{font-size:42px}
  .hero-anios-txt{font-size:17px}
}

/* --------------------------------------------------------------------------
   Sección genérica: separación grande arriba y abajo, con el párrafo de
   entrada separado del titular. El silencio es parte del diseño.
   -------------------------------------------------------------------------- */

section{padding:var(--paso) 0;position:relative}

/* Scroll suave: cuando se pulsa un enlace del menú (#servicios, #cursos…)
   el navegador coloca la sección en el borde superior de la ventana. Como
   la cabecera es sticky (~90 px), scroll-margin-top deja ese margen justo
   para que el titular quede visible pegado a la cabecera, sin huecos. */
section[id]{scroll-margin-top:95px}

/* La seccion de servicios va justo despues del hero, asi que lleva menos
   aire arriba para no quedar deshilachada. Y la de clientes va a continuacion,
   dentro de la misma franja: el salto normal (var(--paso) + var(--paso))
   sumaba 260px entre titulares, que se veia desconectado. */
.hero + section{padding-top:clamp(50px,6vw,80px)}
#clientes{padding:clamp(16px,2.4vw,32px) 0 clamp(28px,4vw,52px)}

/* Franja alternativa, en el gris muy suave del fondo 2. Rompe la monotonía
   del blanco sin tener que meter color de verdad. */
section.franja{background:var(--bg2);position:relative;overflow:hidden}

/* Capa de puntos tenues */
.franja::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(100,116,139,.4) 1px, transparent 1.2px);
  background-size:28px 28px}

/* Capa de manchas de color con fuerza (franjas IMPARES: #servicios, #clientes) */
.franja::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 5% 100%, rgba(var(--acg),.22), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(var(--ac2g),.18), transparent 60%),
    radial-gradient(500px 350px at 50% 50%, rgba(var(--acg),.08), transparent 70%)}

/* Franjas PARES (#cursos, #contacto): posiciones invertidas y un toque
   de violeta/añil para romper la monotonía entre bloques consecutivos. */
#cursos.franja::after,
#contacto.franja::after{
  background:
    radial-gradient(900px 600px at 95% 100%, rgba(var(--ac2g),.22), transparent 60%),
    radial-gradient(700px 500px at 0% 0%, rgba(var(--acg),.2), transparent 60%),
    radial-gradient(500px 350px at 50% 50%, rgba(99,102,241,.1), transparent 70%);
}

.franja > .wrap{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   Pie: discreto, cuatro líneas, enlaces legales. Igual que appvaguada.
   -------------------------------------------------------------------------- */

footer{padding:60px 0 40px;border-top:1px solid var(--bd);background:var(--bg)}
footer .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;color:var(--mu);font-size:13.5px}
footer .pie-logo{margin-bottom:6px}
footer a{color:inherit}
footer a:hover{color:var(--hi)}

/* --------------------------------------------------------------------------
   Responsive: en móvil, menos relleno y menú recogido.
   -------------------------------------------------------------------------- */

@media (max-width: 760px){
  .menu{display:none}
  .nav{padding:14px 16px}
  .credenciales{gap:8px}
  .credenciales span{font-size:12px;padding:6px 11px}
}

/* ---------- rejilla del hero: texto + pieza visual ---------- */
/* align-items:start así cuando el acordeón de la columna derecha se abre
   y crece, la columna izquierda no se desplaza (antes era center y se
   recolocaba). */
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}

/* La pieza: constelación de clientes. 4 grandes al cargar y 6 pequeñas en los
   huecos. Al pasar el ratón sobre cualquiera (sobre todo sobre una pequeña)
   crece y revela el proyecto completo. Las que no están tocadas se apagan
   ligeramente para hacer sitio al foco. */
.pieza{position:relative;height:520px}

.tarjeta{position:absolute;background:var(--card);border:1px solid var(--bd);
  border-radius:14px;padding:16px 18px;box-shadow:0 20px 50px -20px rgba(15,23,42,.14);
  display:flex;flex-direction:column;gap:4px;cursor:default;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),
             box-shadow .35s ease,
             opacity .3s ease,
             z-index 0s linear .35s;
  animation:flotar 7s ease-in-out infinite}

.tarjeta .sector{font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mu);white-space:nowrap}
.tarjeta .nombre{font-family:var(--f-serif);line-height:1.1;color:var(--hi);white-space:nowrap}
.tarjeta .proy{font-size:12.5px;color:var(--mu);margin-top:2px;
  opacity:1;max-height:40px;overflow:hidden;
  transition:opacity .3s ease,max-height .35s ease}

/* --- grandes --- */
.grande{min-width:230px}
.grande .nombre{font-size:24px}

/* --- chicas: iguales de ancho más estrecho, nombre más pequeño y el proy
       oculto hasta que se pase el ratón --- */
.chica{min-width:150px;padding:12px 14px;background:rgba(255,255,255,.86);
  box-shadow:0 10px 24px -14px rgba(15,23,42,.14)}
.chica .nombre{font-size:16px}
.chica .proy{opacity:0;max-height:0;margin-top:0;
  transition:opacity .25s ease,max-height .35s ease,margin-top .35s ease}

/* --- posiciones ---
   Cada tarjeta tiene su esquina. He probado el reparto para que no se solapen
   demasiado y que al crecer una, haya hueco. */
.grande.t1{top:0;    left:0;   animation-delay:0s}
.grande.t2{top:60px; right:0;  animation-delay:1.4s}
.grande.t3{bottom:100px; left:30px; animation-delay:2.8s}
.grande.t4{bottom:30px;  right:20px; animation-delay:4.2s}

.chica.p1{top:0;   right:30px; animation-delay:.6s}
.chica.p2{top:170px; left:60px; animation-delay:1.8s}
.chica.p3{top:200px; right:70px; animation-delay:3.1s}
.chica.p4{bottom:200px; left:0; animation-delay:2.1s}
.chica.p5{bottom:150px; right:0; animation-delay:3.9s}
.chica.p6{bottom:0; left:60px; animation-delay:5s}

/* --- interacción: al pasar el ratón ---
   La tocada crece, sale al frente y revela el proy si lo tenía oculto.
   Las demás se apagan al 55 % de opacidad para que destaque la del foco. */
/* Al pasar el raton por la pieza: todas las tarjetas se apagan y se paran
   de flotar, para que destaque la del foco. */
.pieza:hover .tarjeta{opacity:.5;animation-play-state:paused}
.pieza:hover .tarjeta:hover{opacity:1;z-index:10;
  box-shadow:0 30px 60px -20px rgba(15,23,42,.3);
  animation:none !important;                 /* corta la keyframe */
  transform:scale(1.1) translateY(-6px) !important}
.pieza:hover .chica:hover{transform:scale(1.3) translateY(-6px) !important}

/* El proyecto se queda OCULTO siempre: ia pide no mostrarlo en el hero, se
   verá luego en la sección de clientes. */
.chica .proy{display:none}

@keyframes flotar{
  0%,100%{transform:translateY(0)}
  50%   {transform:translateY(-8px)}
}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .pieza{display:none}
  /* El panel de cursos del hero NO se oculta en móvil: es lo que queremos
     vender. En su lugar, baja y se ajusta a ancho completo. */
  .hero-cursos{order:2}
}

/* Un patron de puntos muy sutil en el hero. Al estar en gradient, nada que
   descargar, cero peticiones extra. */
.hero{background-image:radial-gradient(rgba(100,116,139,.35) 1px, transparent 1.2px);
  background-size:28px 28px;background-position:0 0}

/* ---------- filos de color por cliente ----------
   Cada tarjeta lleva una banda vertical a la izquierda con el color de la
   marca. No invento: cada color sale del logo del cliente. */
.tarjeta{border-left-width:3px;border-left-style:solid}

.grande.t1,  /* GSK — naranja de su isotipo */
.chica.p1    /* Haleon — tomamos el verde brillante del logo */
{border-left-color:#F36633}
.chica.p1{border-left-color:#39FF14}        /* Haleon es verde acido */

.grande.t2{border-left-color:#005BAC}       /* CSIC — azul institucional */
.grande.t3{border-left-color:#009FDF}       /* Antares — cian Telefonica */
.grande.t4{border-left-color:#1A1A1A}       /* LVMH — negro de su serif */

.chica.p2{border-left-color:#2E7FBE}        /* Cantabria Labs — azul */
.chica.p3{border-left-color:#009A49}        /* Bayer — verde de su cruz */
.chica.p4{border-left-color:#2BA6B8}        /* Mejocasa — azul-cian */
.chica.p5{border-left-color:#555}           /* Oronoz — firma, gris oscuro */
.chica.p6{border-left-color:#0A4FBF}        /* NeuDomains — azul fuerte */

/* El «+» delante del número grande: igual familia pero más pequeño y con
   un pelo de separación, para que no quede pegado. */
.destacado .num .pre{font-size:.55em;color:var(--ac);
  font-family:var(--f-serif);margin-right:.04em;line-height:1;
  position:relative;top:-.08em}
.destacado .num .numero{font-family:var(--f-serif);line-height:.9}


/* ==========================================================================
   SERVICIOS — «Qué hacemos»

   Rejilla de 3x2 con 6 tarjetas. Cada una:
     · un numero grande en serif (01, 02, 03...)
     · un icono SVG monoline que se dibuja a si mismo al entrar en pantalla
     · titulo + parrafo
     · al pasar el raton: la tarjeta sube, el icono salta y aparece una
       linea de color sutil en el borde superior

   El dibujado se hace con stroke-dasharray/dashoffset. Lo activa la clase
   .ver que pone el JavaScript cuando la tarjeta entra en pantalla.
   ========================================================================== */

/* Diseño ORIGINAL (antes del rediseño del 07/10/2026): rejilla con separador
   de 1px, número gigante serif, icono con dibujado animado al entrar en
   pantalla, hover con línea de acento arriba. */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--bd);margin-top:28px;
  border:1px solid var(--bd);border-radius:16px;overflow:hidden;
}

.servicio{position:relative;background:var(--card);padding:18px 22px 18px;
  display:flex;flex-direction:column;gap:6px;
  transition:background .3s ease}

/* Borde superior de color que aparece al pasar el raton: detalle de marca */
.servicio::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.servicio:hover::before{transform:scaleX(1)}
.servicio:hover{background:#fcfcff}

.s-cab{display:flex;align-items:center;gap:12px;
  margin-bottom:2px}
.s-cab .s-num{order:1}
.s-cab h3{order:2;flex:1;min-width:0;margin:0}
.s-cab .s-icono{order:3}

.s-num{font-family:var(--f-serif);font-size:28px;line-height:.9;
  color:var(--mu);opacity:.5;
  transition:color .3s ease,opacity .3s ease;
  flex:none}
.servicio:hover .s-num{color:var(--ac);opacity:1}

/* Icono — elemento vivo de la card (se dibuja al entrar en pantalla y gira al hover). */
.s-icono{width:40px;height:40px;color:var(--ac);flex:none;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.servicio:hover .s-icono{transform:scale(1.1) rotate(-6deg);color:var(--ac2)}

/* --- dibujado del icono: cada path arranca con la linea "escondida"
       (dasharray=300, dashoffset=300), y al añadir .ver va a 0 progresivamente */
.s-icono path, .s-icono circle, .s-icono rect, .s-icono ellipse{
  stroke-dasharray:300;
  stroke-dashoffset:300;
  transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1);
  will-change:stroke-dashoffset}
.servicio.ver .s-icono path,
.servicio.ver .s-icono circle,
.servicio.ver .s-icono rect,
.servicio.ver .s-icono ellipse,
.eje.ver .s-icono path,
.eje.ver .s-icono circle,
.eje.ver .s-icono rect,
.eje.ver .s-icono ellipse{stroke-dashoffset:0}

/* Retardo escalonado entre tarjetas */
.servicio:nth-child(1) .s-icono *{transition-delay:0ms}
.servicio:nth-child(2) .s-icono *{transition-delay:150ms}
.servicio:nth-child(3) .s-icono *{transition-delay:300ms}
.servicio:nth-child(4) .s-icono *{transition-delay:450ms}
.servicio:nth-child(5) .s-icono *{transition-delay:600ms}
.servicio:nth-child(6) .s-icono *{transition-delay:750ms}
.servicio:nth-child(7) .s-icono *{transition-delay:900ms}
.servicio:nth-child(8) .s-icono *{transition-delay:1050ms}

.servicio h3{font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:28px;line-height:.9;letter-spacing:-.015em;margin:0;margin-top:0}
.servicio p{font-size:13px;line-height:1.5;color:var(--mu);margin:0}

/* Respetar "reducir movimiento" */
@media (prefers-reduced-motion: reduce){
  .s-icono path, .s-icono circle, .s-icono rect, .s-icono ellipse{
    stroke-dashoffset:0;transition:none}
}

/* Enlace "Saber más" al pie de la card (ahora solo en CRM) */
.s-saber-mas{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:auto;padding-top:10px;align-self:flex-start;
  font-size:13px;font-weight:600;letter-spacing:-.005em;
  color:#2f6a3b;text-decoration:none;
  padding-bottom:1px;border-bottom:1px solid transparent;
  transition:gap .3s cubic-bezier(.2,.8,.3,1),color .25s ease,border-color .25s ease;
}
.s-saber-mas:hover{color:#1e4a28;gap:9px;border-bottom-color:#2f6a3b}

/* ==== Dialog "Saber más" ==== */
.dlg-saber{
  width:min(720px, 92vw);
  max-height:88vh;
  padding:0;border:none;border-radius:20px;
  background:var(--card);color:var(--tx);
  box-shadow:0 40px 80px -20px rgba(13,60,120,.4);
  overflow:hidden;
}
.dlg-saber::backdrop{
  background:rgba(10,38,72,.55);
  backdrop-filter:blur(3px);
}
.dlg-contenido{
  padding:30px 36px 32px;
  max-height:88vh;overflow-y:auto;
}
.dlg-cerrar{
  position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(var(--acg),.08);border:none;color:var(--ac2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.dlg-cerrar:hover{background:rgba(var(--acg),.2);color:var(--ac);transform:rotate(90deg)}
.dlg-cerrar svg{width:18px;height:18px}

.dlg-eye{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);margin:0 0 8px;
}
.dlg-tit{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.015em;
  margin:0 0 14px;
}
.dlg-intro{
  font-size:15px;line-height:1.55;color:var(--mu);
  margin:0 0 22px;
}
.dlg-sub{
  font-family:var(--f-sans);font-weight:700;color:var(--hi);
  font-size:14px;letter-spacing:-.005em;
  margin:18px 0 10px;
  padding-top:12px;border-top:1px solid var(--bd);
}
.dlg-lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.dlg-lista li{
  position:relative;padding-left:18px;
  font-size:13.5px;line-height:1.5;color:var(--tx);
}
.dlg-lista li::before{
  content:"";position:absolute;left:0;top:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--ac);
}
.dlg-lista strong{color:var(--hi);font-weight:600}

@media (max-width:560px){
  .dlg-contenido{padding:24px 20px 24px}
  .dlg-tit{font-size:22px}
}

/* Responsive */
@media (max-width:960px){ .servicios{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .servicios{grid-template-columns:1fr} }


/* ---------- rapidos: 3 cosas que entregamos, en linea ----------
   Van entre el subtitulo y el bloque del +30. Icono monoline en indigo +
   texto. Al pasar el raton, el fondo se tiñe y el icono gira ligeramente.
   Pensado para quien escanea en 3 segundos. */
/* ---------- rapidos: 3 servicios destacados, con icono en circulo coloreado ----------
   Diseño «chip de categoria»: cada pastilla tiene un circulo con el icono
   en color de marca, pegado al texto. Mas peso visual que una pastilla
   normal, pero sigue siendo compatible con las otras del hero. */
.rapidos{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.rapido{display:inline-flex;align-items:center;gap:11px;
  padding:7px 18px 7px 7px;
  border:1px solid var(--bd);border-radius:999px;
  background:var(--card);color:var(--hi);
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.rapido:hover{border-color:var(--ac);transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(var(--acg),.45)}

/* El icono dentro de un circulo coloreado */
.rapido .ico{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg, rgba(var(--acg),.12), rgba(var(--ac2g),.14));
  color:var(--ac);
  transition:transform .3s ease,background .3s ease,color .3s ease}
.rapido:hover .ico{transform:scale(1.08) rotate(-6deg);
  background:linear-gradient(135deg, var(--ac), var(--ac2));
  color:#fff}

.rapido svg{width:18px;height:18px;flex:none}

@media (max-width:640px){
  .rapidos{gap:8px}
  .rapido{padding:5px 14px 5px 5px;font-size:13px;gap:9px}
  .rapido .ico{width:28px;height:28px}
  .rapido svg{width:15px;height:15px}
}


/* ---------- paneles de detalle de las 3 pastillas ----------
   Al pasar el raton por una pastilla, se despliega su panel debajo con el
   texto largo. Al salir, se recoge. */

.rapidos{position:relative}

.detalles{position:relative;height:0;pointer-events:none}

.detalle{position:absolute;left:0;top:14px;right:0;
  background:var(--card);border:1px solid var(--bd);border-radius:14px;
  padding:20px 22px;max-width:580px;
  box-shadow:0 24px 50px -24px rgba(15,23,42,.22);
  opacity:0;transform:translateY(-6px);
  pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  z-index:20}

.detalle::before{content:"";position:absolute;left:28px;top:-7px;
  width:12px;height:12px;background:var(--card);
  border-top:1px solid var(--bd);border-left:1px solid var(--bd);
  transform:rotate(45deg)}

.detalle.ver{opacity:1;transform:translateY(0)}

.detalle p{font-size:14px;line-height:1.55;color:var(--tx);margin:0 0 10px}
.detalle p:last-child{margin-bottom:0}
.detalle strong{color:var(--hi);font-weight:600}
.detalle ul{margin:6px 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px}
.detalle li{display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border:1px solid var(--bd);border-radius:999px;
  font-size:13px;font-weight:500;color:var(--tx);background:var(--bg2)}
.detalle li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ac2)}

/* Reposicionar la flecha segun el panel que esta activo: la aproximamos a
   la pastilla que lo abre. */
.rapidos.ac-1 ~ .detalles #d1::before{left:28px}
.rapidos.ac-2 ~ .detalles #d2::before{left:28px}
.rapidos.ac-3 ~ .detalles #d3::before{left:28px}


/* El bloque .rapidos-bloque ya no se usa (los rapidos vuelven al hero el
   05/10/2026 con mas aire entre bloques). Se deja el apunte por historia. */


/* ==========================================================================
   SECCIÓN CLIENTES — rejilla de los 12 clientes activos.
   Logos en color siempre. La "cosa bonita" al pasar el ratón: una barra de
   acento se dibuja arriba de izquierda a derecha, la tarjeta se tiñe un poco
   y el logo da un pequeño paso adelante. La entrada: cada tarjeta aparece
   con un fade-up al entrar en pantalla (dispara desde JS vía .ver).
   La sección vive en una franja (fondo gris + puntitos + manchas de color).
   ========================================================================== */

/* Mismo ritmo de espacios que "Qué hacemos": lead muy pegado al titular
   y la rejilla a 32px del lead. Si en algún momento se le mete subtítulo,
   que respire igual que allí. */
#clientes .lead{margin-top:8px;max-width:70ch;font-size:clamp(14px,1.1vw,16px);line-height:1.5}
#clientes h2{font-size:clamp(24px,3vw,38px)}
#clientes .clientes{margin-top:18px}

.clientes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--bd);
  border:1px solid var(--bd);
  border-radius:16px;
  overflow:hidden;
}

.cliente{
  position:relative;
  background:var(--card);
  padding:18px 18px 16px;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:4px;
  isolation:isolate;
  overflow:hidden;
  /* Estado inicial de la entrada: oculto y bajado 14px. */
  opacity:0;transform:translateY(14px);
  transition:background .35s ease,opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1);
}

/* Barra de acento ARRIBA: se dibuja de izquierda a derecha al hover.
   Es el toque "humaan": una línea de color que crece al entrar. */
.cliente::before{
  content:"";position:absolute;left:0;top:0;height:4px;width:0;
  background:linear-gradient(90deg,var(--ac),var(--ac2));
  transition:width .55s cubic-bezier(.2,.8,.3,1);
  z-index:2;
}
.cliente:hover::before{width:100%}

/* Barra de acento ABAJO: igual pero crece de derecha a izquierda. Las dos
   juntas enmarcan la tarjeta y hacen el hover muy obvio. */
.cliente::after{
  content:"";position:absolute;right:0;bottom:0;height:4px;width:0;
  background:linear-gradient(270deg,var(--ac),var(--ac2));
  transition:width .55s cubic-bezier(.2,.8,.3,1);
  z-index:2;
}
.cliente:hover::after{width:100%}

/* El logo manda la cabecera de cada tarjeta: altura fija para que, aunque
   cada archivo tenga su proporción, todos ocupen el mismo espacio y la
   rejilla quede alineada verticalmente. Al hover: lift + scale notables. */
.cliente-logo{
  height:48px;width:100%;
  display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:8px;
}
.cliente-logo img{
  max-height:38px;max-width:140px;width:auto;object-fit:contain;
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}

/* Hover: fondo tiñe en azul muy claro para que se note el cambio sin
   agredir. Al logo se le da un salto perceptible (-5px) y crece 1.07. */
.cliente:hover{background:rgba(var(--acg),.06)}
.cliente:hover .cliente-logo img{transform:translateY(-5px) scale(1.07)}

/* El h3 y la descripción cambian al hover: el h3 se tiñe azul profundo
   y la descripción pasa de "mu" a texto normal para subir el contraste. */
.cliente h3{
  font-size:17px;color:var(--hi);margin:0;line-height:1.1;
  transition:color .3s ease;
}
.cliente:hover h3{color:var(--ac2)}
.cliente:hover .cliente-descr{color:var(--tx)}

.cliente-sector{
  font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mu);
  margin:0;
}

.cliente-descr{
  font-size:12.5px;line-height:1.45;color:var(--mu);
  margin:4px 0 0;
  transition:color .3s ease;
}

/* Entrada al hacer scroll: el JS añade .ver a cada tarjeta cuando entra en
   pantalla, con un stagger (--d) para que caigan en cascada. */
.cliente.ver{opacity:1;transform:translateY(0);transition-delay:var(--d,0ms)}

/* Si el usuario tiene "reduce motion" activado, nada de animaciones. */
@media (prefers-reduced-motion:reduce){
  .cliente{opacity:1;transform:none;transition:background .2s ease}
  .cliente::before,.cliente-logo img,.cliente h3{transition:none}
  .cliente:hover .cliente-logo img{transform:none}
}

@media (max-width:1024px){ .clientes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px) { .clientes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px) { .clientes{grid-template-columns:1fr} }


/* ==========================================================================
   HERO · acento del titular ("inteligencia artificial" en cursiva + azul).
   El resto del hero está en el bloque "rejilla del hero" más arriba.
   ========================================================================== */
h1 .t-ia{
  font-style:italic;
  color:var(--ac);
  background:linear-gradient(90deg,var(--ac) 0%,var(--ac2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}


/* ==========================================================================
   POR QUÉ NEODES — sección debajo del hero.
   Hereda la retícula general. Dentro: línea de estadísticas gorda, luego
   las 3 pastillas rápidas con sus paneles de detalle y el bloque +30 años
   animado con las credenciales. Es el "quiénes somos" en vertical.
   ========================================================================== */

/* ================================================================
   SECCIÓN QUIÉNES SOMOS — rediseño completo según el boceto adjunto.
   Lead en dos párrafos, 4 stat-cards con icono, split izquierda
   (nuestro trabajo + ilustración de código) / derecha (ahora también:
   IA en azul profundo con red neural), 3 pastillas ampliadas y bloque
   +30 al pie en dos columnas.
   ================================================================ */

#por-que{padding-top:clamp(26px,3.5vw,48px);padding-bottom:clamp(44px,5.5vw,80px)}
#por-que h2{font-size:clamp(27px,3.4vw,42px)}

/* --- lead en varios párrafos --- */
.qs-lead{margin:14px 0 30px;max-width:none}
.qs-lead p{
  font-family:var(--f-sans);font-weight:400;
  font-size:clamp(14.5px,1.1vw,16px);line-height:1.6;
  color:var(--mu);
  margin:0 0 10px;
}
.qs-lead p:last-child{margin-bottom:0}
.qs-lead strong{color:var(--hi);font-weight:600}

/* --- 4 stat cards --- */
.qs-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin:0 0 28px;
}
.qs-stat{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:14px;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.qs-stat:hover{
  border-color:rgba(var(--acg),.4);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -20px rgba(13,60,120,.3);
}
.qs-stat-ico{
  width:40px;height:40px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(var(--acg),.14);
  color:var(--ac);
}
.qs-stat-ico svg{width:20px;height:20px}
.qs-stat strong{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:clamp(28px,2.6vw,38px);line-height:1;letter-spacing:-.025em;
  margin-right:2px;
}
.qs-stat span:last-child{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);line-height:1.3;
}
@media (max-width:960px){ .qs-stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:500px){ .qs-stats{grid-template-columns:1fr} }

/* --- split: dos tarjetas lado a lado, blanca (nuestro trabajo + ilustración)
   y navy (IA + badge). Ilustración DENTRO del cuadro blanco. --- */
.qs-split{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
  margin-bottom:26px;
}
.qs-split article{
  position:relative;
  padding:0;
  display:grid;
  grid-template-columns:1fr 200px;
  grid-template-rows:auto 1fr auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(13,60,120,.06);
}

/* Las tres filas de la izquierda: cab + txt + pie */
.qs-split-cab{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;gap:6px;
  padding:16px 20px 0;
}
.qs-split-txt{
  grid-column:1;grid-row:2;
  display:flex;flex-direction:column;gap:8px;justify-content:center;
  padding:10px 20px;
}

.qs-split-eye{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ac);
}
.qs-split-eye::before{content:"";width:16px;height:1px;background:currentColor}
.qs-split-eye-ai{color:#38bdf8}
.qs-split-eye-ai::before{background:#38bdf8}

.qs-split h3{
  font-family:var(--f-serif);font-weight:400;line-height:1.1;
  font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;margin:0;
}
.qs-split p{font-size:13.5px;line-height:1.5;margin:0}
.qs-split-lead{font-weight:400}

/* --- izquierda (blanca) --- */
.qs-split-izq{
  background:#fff;
  border:1px solid var(--bd);
}
.qs-split-izq h3{color:var(--hi)}
.qs-split-izq p{color:var(--mu)}
.qs-split-izq p strong{color:var(--hi);font-weight:600}

/* ilustración embebida a la derecha: contenedor cuadrado FIJO para que
   ambas ilustraciones ocupen exactamente el mismo espacio visual
   (la landscape se centra dentro, la square llena el cuadrado). */
/* Ilustración: ocupa TODA la columna derecha, de arriba a abajo del card */
.qs-split-ilustracion{
  grid-column:2;grid-row:1 / -1;
  width:100%;height:100%;
  display:block;overflow:hidden;
}
.qs-split-ilustracion img{
  width:100%;height:100%;display:block;padding-right:3px;
}

@media (max-width:1100px){
  .qs-split article{grid-template-columns:1fr 160px}
}

/* --- derecha (navy) --- */
.qs-split-der{
  background:linear-gradient(160deg,#092040 0%,#051329 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}
.qs-split-der h3{color:#fff}
.qs-split-der .qs-split-lead{color:#cbd5e1}
.qs-split-der p{color:#94a3b8}
.qs-split-der p strong{color:#fff;font-weight:600}

/* Badge de "Agentes autónomos" dentro de la tarjeta navy */
.qs-split-badge{
  margin-top:auto;
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(56,189,248,.22);
}
.qs-split-badge-ico{
  flex:none;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(56,189,248,.15);
  color:#7dd3fc;
}
.qs-split-badge-ico svg{width:22px;height:22px}
.qs-split-badge strong{
  display:block;font-size:14px;color:#fff;font-weight:600;margin-bottom:2px;
}
.qs-split-badge span{
  display:block;font-size:12.5px;color:#94a3b8;line-height:1.4;
}

/* Pie: línea separadora + texto corto */
.qs-split-pie{
  grid-column:1;grid-row:3;
  margin:0 20px;padding:10px 0 14px;
  border-top:1px solid var(--bd);
  font-size:12.5px;color:var(--mu);font-weight:500;
}
.qs-split-pie-ai{
  border-top-color:rgba(255,255,255,.1);
  color:#38bdf8;
  display:flex;align-items:center;gap:8px;
}
.qs-split-pie-ai::before{
  content:"✦";color:#7dd3fc;font-size:12px;
}

@media (max-width:860px){
  .qs-split{grid-template-columns:1fr;gap:18px}
  .qs-split article{padding:26px 24px 20px}
  .qs-split-cuerpo{grid-template-columns:1fr;gap:16px}
  .qs-split-ilustracion img{width:100%;max-width:280px}
  .qs-split-der .qs-split-ilustracion img{width:100%;max-width:240px}
}

/* --- 4 pastillas ampliadas --- */
.qs-pills{
  display:grid;grid-template-columns:repeat(4,1fr);gap:13px;
  margin-bottom:0;
}
.qs-pills article{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 16px;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:999px;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.qs-pills article:hover{
  border-color:rgba(var(--acg),.4);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -18px rgba(13,60,120,.3);
}
.qs-pill-ico{
  width:36px;height:36px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(var(--acg),.14);
  color:var(--ac);
}
.qs-pill-ico svg{width:18px;height:18px}
.qs-pills strong{
  display:block;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hi);line-height:1.3;
}
.qs-pills p{font-size:12.5px;line-height:1.4;color:var(--mu);margin:2px 0 0}
@media (max-width:1024px){ .qs-pills{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px) { .qs-pills{grid-template-columns:1fr} }

/* --- bloque +30 al pie, dos columnas con línea azul vertical --- */
.qs-treinta{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;
  padding-top:28px;
  position:relative;
}
.qs-treinta-num{
  position:relative;padding-left:24px;
  display:flex;flex-direction:column;gap:4px;
}
.qs-treinta-num::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  background:linear-gradient(180deg,var(--ac),var(--ac2));
  border-radius:2px;
}
.qs-pre{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);
}
.qs-big{
  font-family:var(--f-serif);font-weight:400;color:var(--ac);
  font-size:clamp(60px,8vw,112px);line-height:.95;letter-spacing:-.03em;
  display:flex;align-items:flex-start;gap:2px;
}
.qs-big .pre{font-size:.65em;line-height:1.1;color:var(--ac2);opacity:.9}
.qs-txt{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:clamp(20px,2vw,26px);line-height:1.15;margin-top:4px;
}
.qs-treinta-txt{
  display:flex;align-items:center;
}
.qs-treinta-txt p{
  font-size:15px;line-height:1.6;color:var(--tx);margin:0;max-width:50ch;
}
@media (max-width:720px){
  .qs-treinta{grid-template-columns:1fr;gap:24px}
}

/* Línea de estadísticas con los números GORDOS. Serif enorme, cada bloque
   con una línea azul encima que crece al hover. Es la primera cosa que
   impacta al llegar a Quiénes somos. */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:36px 0 10px;
  padding:0;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
}
.stats > div{
  position:relative;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  padding:28px 24px 26px;
  border-right:1px solid var(--bd);
  transition:background .3s ease;
}
.stats > div:last-child{border-right:0}
.stats > div::before{
  content:"";position:absolute;left:0;top:-1px;height:3px;width:0;
  background:linear-gradient(90deg,var(--ac),var(--ac2));
  transition:width .5s cubic-bezier(.2,.8,.3,1);
}
.stats > div:hover{background:rgba(var(--acg),.04)}
.stats > div:hover::before{width:100%}
.stats strong{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-.025em;
}
.stats span{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);
}
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > div{border-bottom:1px solid var(--bd)}
  .stats > div:nth-child(odd){border-right:1px solid var(--bd)}
  .stats > div:nth-child(even){border-right:0}
  .stats > div:nth-last-child(-n+2){border-bottom:0}
}

/* Dentro de .por-que, los bloques .rapidos / .detalles / .credenciales
   ya tienen estilos definidos arriba en este fichero. */
.por-que .rapidos{margin-top:36px}
.por-que .credenciales{margin-top:36px}

/* ---- Bloque GIRO: "Lo de siempre" vs "Lo nuevo" ----
   Dos columnas en escritorio, separadas por una línea vertical gorda, con
   un pequeño "antes" / "después" por encima de cada una. La izquierda en
   gris (lo que llevamos haciendo décadas), la derecha en azul fuerte
   (lo nuevo). Hover en cualquier columna la empuja hacia arriba un poco. */
.giro{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:40px;
  position:relative;
  border:1px solid var(--bd);
  border-radius:18px;
  overflow:hidden;
  background:var(--card);
}
.giro::before{
  content:"";position:absolute;top:28px;bottom:28px;left:50%;width:1px;
  background:var(--bd);
}
.giro article{
  padding:32px 32px 30px;
  display:flex;flex-direction:column;gap:12px;
  transition:background .3s ease,transform .3s cubic-bezier(.2,.8,.3,1);
}
.giro article:hover{transform:translateY(-3px)}

/* Columna 1: "Lo de siempre" — gris */
.giro article:first-child:hover{background:var(--bg2)}

/* Columna 2: "Lo nuevo" — azul profundo con texto blanco */
.giro article:last-child{
  background:linear-gradient(160deg,var(--ac2) 0%,#0a2e5f 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.giro article:last-child::after{
  content:"";position:absolute;top:-80px;right:-80px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(var(--acg),.4),transparent 60%);
  pointer-events:none;
}
.giro article:last-child:hover{filter:brightness(1.08)}

.giro-eye{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);
  display:inline-flex;align-items:center;gap:8px;
}
.giro-eye::before{content:"";width:16px;height:1px;background:var(--mu)}
.giro article:last-child .giro-eye{color:rgba(255,255,255,.8)}
.giro article:last-child .giro-eye::before{background:rgba(255,255,255,.5)}

.giro h3{
  font-family:var(--f-serif);font-weight:400;line-height:1.12;
  font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;
  color:var(--hi);margin:0;
}
.giro article:last-child h3{color:#fff}

.giro p{
  font-size:14.5px;line-height:1.55;color:var(--tx);margin:0;
}
.giro article:last-child p{color:rgba(255,255,255,.85)}

@media (max-width:720px){
  .giro{grid-template-columns:1fr}
  .giro::before{display:none}
  .giro article{border-bottom:1px solid var(--bd)}
  .giro article:last-child{border-bottom:0}
}


/* ==========================================================================
   BANDA NOVEDAD — lo primero que se ve, encima del header.
   Franja fina, texto blanco sobre degradado de la marca. Enlaza a #cursos.
   ========================================================================== */

.novedad{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:12px 20px;
  background:linear-gradient(90deg,#071a3a 0%,var(--ac2) 35%,var(--ac) 65%,#071a3a 100%);
  background-size:220% 100%;
  color:#fff;
  font-size:14px;letter-spacing:.01em;
  text-align:center;
  animation:novedadDeriva 14s ease-in-out infinite;
  transition:background-position .3s ease;
  position:relative;overflow:hidden;
}
/* Brillo que recorre la franja cada ciertos segundos */
.novedad::after{
  content:"";position:absolute;top:0;left:-30%;
  width:30%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);
  animation:novedadBrillo 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes novedadDeriva{
  0%,100%{background-position:0% 0}
  50%    {background-position:100% 0}
}
@keyframes novedadBrillo{
  0%,70%,100%{left:-30%}
  85%{left:130%}
}
.novedad:hover{background-position:100% 0}

/* Punto amarillo con pulso cálido */
.novedad-dot{
  width:9px;height:9px;border-radius:50%;background:#ffd166;
  box-shadow:0 0 0 0 rgba(255,209,102,.7);
  animation:novedadPulso 1.8s ease-in-out infinite;
  flex:none;
}
@keyframes novedadPulso{
  0%,100%{box-shadow:0 0 0 0 rgba(255,209,102,.7)}
  50%    {box-shadow:0 0 0 10px rgba(255,209,102,0)}
}

/* "NOVEDAD" como pastilla amarilla con texto navy */
.novedad strong{
  display:inline-flex;align-items:center;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;
  background:#ffd166;color:#0a2648;
  padding:4px 10px;border-radius:999px;
  box-shadow:0 2px 10px -4px rgba(255,209,102,.6);
}
.novedad-txt{opacity:.95;font-weight:500}
.novedad-flecha{font-size:17px;color:#ffd166;font-weight:700;transition:transform .3s ease}
.novedad:hover .novedad-flecha{transform:translateX(5px)}

@media (max-width:620px){
  .novedad{font-size:12.5px;gap:10px;padding:9px 14px}
  .novedad-txt{display:none}
  .novedad::after{content:"Cursos de IA · 4 h · streaming";opacity:.92}
}


/* ==========================================================================
   HERO · panel de CURSOS (columna derecha del hero).
   Tema OSCURO: fondo azul profundo con degradado y mancha radial.
   Cards semi-transparentes blancas con icono circular azul claro, descripción
   y meta en blanco con alfa. "Ver programa completo" en blanco con underline.
   ========================================================================== */

.hero-cursos{
  position:relative;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(var(--acg),.22), transparent 60%),
    linear-gradient(160deg, var(--ac2) 0%, #0a2e5f 100%);
  color:#fff;
  padding:24px 26px 20px;
  border-radius:20px;
  box-shadow:0 30px 60px -30px rgba(13,60,120,.5);
  display:flex;flex-direction:column;gap:11px;
}

/* Eyebrow en blanco con alfa */
.hero-cursos .eyebrow{color:#fff;margin:0 0 2px}
.hero-cursos .eyebrow::before{background:rgba(255,255,255,.5)}

.hero-cursos-tit{
  font-family:var(--f-serif);font-weight:400;color:#fff;
  font-size:clamp(23px,2.2vw,30px);line-height:1.1;letter-spacing:-.01em;
  margin:0 0 2px;
}

/* Línea bajo el titular */
.hero-cursos-sub{
  font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.82);
  margin:0 0 4px;
}
.hero-cursos-sub-hi{
  font-weight:700;font-size:16px;
  color:#ffd166;
  letter-spacing:.005em;
}

/* --- Cards de curso dentro del panel oscuro ---
   Opción "recessed": azul más oscuro que el panel, texto blanco. Las cards
   se perciben como entalladas dentro del panel — jerarquía visual clara. */
.hc-card{
  display:flex;align-items:flex-start;gap:13px;
  padding:14px 16px;
  background:#0a2648;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             inset 0 -1px 0 rgba(0,0,0,.3);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
  cursor:default;
}
.hc-card:hover{
  background:#0d2d55;
  border-color:rgba(255,255,255,.22);
  transform:translateY(-2px);
}

.hc-card-ico{
  flex:none;
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--acg),.2);
  color:#9ec5ff;
}
.hc-card-ico svg{width:19px;height:19px}

.hc-card-cuerpo{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}

.hc-card-nom{
  font-family:var(--f-serif);font-weight:400;color:#fff;
  font-size:19px;line-height:1.12;letter-spacing:-.005em;
  margin:0;
}
.hc-card-descr{
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);margin:2px 0 0;
}
.hc-card-bullets{
  list-style:none;margin:3px 0 0;padding:0;
  display:flex;flex-direction:column;gap:3px;
}
.hc-card-bullets li{
  position:relative;padding-left:18px;
  font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.86);
}
.hc-card-bullets li::before{
  content:"";position:absolute;left:0;top:5px;
  width:10px;height:6px;
  border-left:2px solid #ffd166;border-bottom:2px solid #ffd166;
  transform:rotate(-45deg);
}

/* Pie de la card: 2 metas + enlace */
.hc-card-pie{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 13px;
  margin-top:8px;
}
.hc-meta{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:rgba(255,255,255,.78);line-height:1;
}
.hc-meta svg{width:13px;height:13px;color:#9ec5ff}

.hc-ver{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;
  color:#fff;
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);
  box-shadow:0 6px 14px -6px rgba(var(--acg),.6);
  transition:transform .2s ease,box-shadow .25s ease,gap .25s ease;
}
.hc-ver:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(var(--acg),.7);gap:9px}

/* Enlace "Cuéntame más" al final del panel: amarillo discreto, centrado */
.hero-cursos-mas{
  align-self:center;
  display:inline-flex;align-items:center;gap:6px;
  margin-top:0;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  color:#ffd166;
  text-decoration:none;
  transition:gap .25s ease,color .2s ease;
}
.hero-cursos-mas:hover{color:#ffe29a;gap:10px}
.hero-cursos-mas span{transition:transform .25s ease}
.hero-cursos-mas:hover span{transform:translateY(2px)}


/* ==========================================================================
   TRABAJAMOS EN — integrado al final del HERO.
   Franja fina con 6 iconos horizontales con etiqueta. Separada visualmente
   de las dos columnas del hero con un border-top sutil y un poco de aire.
   ========================================================================== */
/* IMPORTANTE: anular el grid de .hero .wrap para esta banda (si no, el
   eyebrow se va a la columna izquierda y los items a la derecha). */
.hero .wrap.trabajamos-en{display:block}

.trabajamos-en{
  margin-top:18px;
  background:linear-gradient(90deg, rgba(var(--acg),.06) 0%, rgba(var(--acg),.02) 100%);
  border:1px solid rgba(var(--acg),.18);
  border-radius:16px;
  padding:10px 20px 12px;
}
.trabajamos-en .eyebrow{margin:0 0 6px}

/* Los 6 items en UNA fila; tipografía e icono compactados para que quepan.
   justify-content:space-between los reparte uniformemente a lo ancho. */
.te-lista{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 16px;
  justify-content:space-between;
  list-style:none;margin:0;padding:0;
}
.te-lista li{
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .2s ease;
}
.te-lista li:hover{transform:translateY(-1px)}
.te-ico{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--acg),.14);
  color:var(--ac);
  transition:background .25s ease,color .25s ease;
}
.te-ico svg{width:14px;height:14px}
.te-lista li:hover .te-ico{background:var(--ac);color:#fff}
.te-lista li span:last-child{
  font-size:12px;font-weight:600;color:var(--hi);line-height:1.25;white-space:nowrap;
}
@media (max-width:1024px){
  .te-lista li span:last-child{white-space:normal}
}


/* ==========================================================================
   PANELES FLOTANTES del programa de cada curso (dentro del HERO).
   Mismo patrón que las pastillas rápidas (hover muestra el detalle, pero
   aquí dentro del hero para no obligar a bajar). El panel se posiciona
   absoluto sobre la columna izquierda del hero, encima del brand text, y
   solo se activa cuando el ratón está sobre una card de curso del panel.
   ========================================================================== */

.hero{overflow:visible}

.detalles-cursos{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:30;
}

/* Popup del programa posicionado en la MITAD DERECHA del hero (sobre el
   propio panel de cursos). Antes salía por la izquierda y tapaba el
   titular; ahora queda sobre la columna de cursos, al lado del cursor. */
.detalle-curso{
  position:absolute;
  top:50%;
  right:max(24px, calc(50vw - var(--max)/2 + 24px));
  transform:translateY(-50%) translateX(10px);
  width:min(560px, calc(100vw - 48px));
  max-height:calc(100% - 40px);
  overflow-y:auto;
  background:#fff;
  border-radius:20px;
  box-shadow:
    0 50px 100px -30px rgba(13,60,120,.5),
    0 0 0 1px var(--bd);
  padding:22px 26px 20px;
  opacity:0;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}

.detalle-curso.ver{
  opacity:1;
  transform:translateY(-50%) translateX(0);
  pointer-events:auto;
}

/* Botón X para cerrar: arriba a la derecha del popup. */
.dc-cerrar{
  position:absolute;top:12px;right:12px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg2);border:0;cursor:pointer;color:var(--mu);
  transition:background .2s ease,color .2s ease,transform .3s ease;
}
.dc-cerrar:hover{background:var(--ac);color:#fff;transform:rotate(90deg)}
.dc-cerrar svg{width:14px;height:14px}

/* Cabecera: eyebrow + título del curso */
.detalle-curso .dc-cab{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.detalle-curso .dc-eye{
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);
}
.detalle-curso h3{
  font-size:clamp(17px,1.5vw,20px);color:var(--hi);line-height:1.15;margin:0;
}

/* Bloques del programa */
.dc-bloques{
  list-style:none;margin:0;padding:10px 0 0;
  border-top:1px solid var(--bd);
  display:flex;flex-direction:column;gap:10px;
}
.dc-bloques > li{display:flex;gap:10px;align-items:flex-start}
.dc-num{
  font-family:var(--f-serif);font-weight:400;color:var(--ac);
  font-size:17px;line-height:1;letter-spacing:-.02em;flex:none;width:22px;
}
.dc-bloques h4{
  font-family:var(--f-sans);font-weight:600;font-size:11.5px;color:var(--hi);
  margin:0 0 3px;letter-spacing:.005em;
}
.dc-bloques ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.dc-bloques ul li{
  font-size:11px;line-height:1.5;color:var(--tx);
  padding-left:10px;position:relative;
}
.dc-bloques ul li::before{
  content:"";position:absolute;left:0;top:7px;
  width:3px;height:3px;border-radius:50%;background:var(--ac);
}

/* Requisitos */
.dc-reqs{margin-top:12px;padding:10px 12px;background:var(--bg2);border-radius:8px}
.dc-reqs h4{
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);margin:0 0 5px;
}
.dc-reqs ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.dc-reqs li{font-size:10.5px;line-height:1.5;color:var(--tx);padding-left:12px;position:relative}
.dc-reqs li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ac);font-weight:700;font-size:11px}

/* En móvil, los paneles no se enseñan: la pantalla no da para flotar.
   El visitante llega al detalle completo haciendo click en la card
   (va a la sección Cursos y se abre el acordeón). */
@media (max-width:900px){
  .detalles-cursos{display:none}
}

/* El CTA interno al panel: blanco sobre azul */
.hero-cursos .cta{
  background:#fff;color:var(--ac2);
  padding:12px 22px;border-radius:999px;font-weight:600;
  text-align:center;
  transition:transform .2s ease,box-shadow .25s ease;
  align-self:flex-start;margin-top:4px;
}
.hero-cursos .cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.3);
}

/* En móvil el panel sigue viéndose, pero con menos padding */
@media (max-width:860px){
  .hero-cursos{padding:26px 22px}
  .hero-cursos-tit{font-size:24px}
}


/* ==========================================================================
   SECCIÓN CURSOS (detalle)
   Fondo blanco limpio con una franja de acento azul arriba. Dos cards
   grandes con la información completa de cada curso.
   ========================================================================== */

/* Mismo padding vertical que #por-que. Background lo da .franja. */
.cursos-sec{position:relative;
  padding-top:clamp(16px,2.4vw,32px);
  padding-bottom:clamp(28px,4vw,56px);
}
#cursos h2{font-size:clamp(24px,3vw,38px)}
.cursos-sec .lead{margin-top:8px;max-width:none;font-size:clamp(14px,1.1vw,16px);line-height:1.5}

/* 3 ejes de personalización. MISMO ESTILO que las cards de "Qué hacemos"
   (número gigante serif + icono con animación de dibujado), y al pasar
   el ratón se revelan las tecnologías disponibles para ese eje como
   chips verdes en línea. */
.ejes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--bd);
  margin-top:16px;
  border:1px solid var(--bd);border-radius:16px;overflow:hidden;
}
.eje{
  position:relative;background:var(--card);
  padding:15px 18px 14px;
  display:flex;flex-direction:column;gap:7px;
  transition:background .3s ease;
}
/* Barra superior de acento al hover (igual que .servicio) */
.eje::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.eje:hover::before{transform:scaleX(1)}
.eje:hover{background:#fcfcff}

/* Cabecera: número + título juntos a la izquierda, icono a la derecha */
.eje .s-cab{display:flex;align-items:center;gap:12px;margin-bottom:2px}

.eje .s-num{font-size:26px;flex:none}

/* El h3 va dentro de .s-cab, al lado del número, al mismo tamaño */
.eje .s-cab h3{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:26px;line-height:.9;letter-spacing:-.015em;margin:0;
  flex:1;             /* ocupa el centro y empuja el icono a la derecha */
}

.eje .s-icono{
  width:36px;height:36px;color:var(--ac);flex:none;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),color .25s ease;
}
.eje:hover .s-icono{transform:scale(1.1) rotate(-6deg);color:var(--ac2)}

/* Lista de tecnologías visible siempre, chips verdes en línea (mismo
   estilo que los chips de las cards de servicios). */
.eje-lista{
  list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:5px;
}
.eje-lista li{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;letter-spacing:.005em;
  color:#2f6a3b;background:#eaf4ec;
  padding:3px 10px;border-radius:6px;
}

.ejes-pie{
  margin:14px 0 0;
  text-align:center;
  font-size:13.5px;color:var(--mu);
  letter-spacing:.01em;
}
.ejes-pie::before{
  content:"";display:inline-block;width:24px;height:1px;background:var(--ac);
  vertical-align:middle;margin-right:10px;
}
.ejes-pie::after{
  content:"";display:inline-block;width:24px;height:1px;background:var(--ac);
  vertical-align:middle;margin-left:10px;
}

@media (max-width:720px){ .ejes{grid-template-columns:1fr} }

.cursos-rejilla{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  margin-top:16px;
}

/* ---- Card del curso (REDISEÑO 07/10/2026) ---- */
.curso{
  position:relative;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:20px;
  padding:19px 20px 17px;
  display:flex;flex-direction:column;gap:8px;
  overflow:hidden;
  box-shadow:0 20px 44px -32px rgba(13,60,120,.2);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease,border-color .25s ease;
}
.curso:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -24px rgba(13,60,120,.28);
  border-color:rgba(var(--acg),.35);
}

/* Top: columna izquierda (pastilla + h3) + ilustración a la derecha,
   alineados por el borde superior. La imagen es grande y queda a la
   misma altura que el titular. */
.curso-top{
  display:flex;align-items:stretch;justify-content:space-between;gap:16px;
  margin-bottom:2px;
}
.curso-top-txt{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:9px;
}
.curso-top-txt .curso-resumen{margin:3px 0 0}
.curso-top-txt .curso-eye-pill{align-self:flex-start}
.curso-eye-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac2);
  background:rgba(var(--acg),.12);
  padding:6px 14px;border-radius:999px;
  line-height:1;
}
.curso-eye-pill svg{width:12px;height:12px;color:var(--ac)}

/* Ilustración del curso a la derecha: thumbnail con object-fit:cover y
   bordes redondeados. El fondo "degradado" lo pone la propia imagen. */
.curso-visual{
  width:220px;flex:none;align-self:stretch;
  display:block;
  border-radius:15px;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.curso-visual img{display:block;width:100%;height:100%;object-fit:cover}
.curso:hover .curso-visual{transform:translateY(-3px) rotate(-1.5deg)}

@media (max-width:800px){
  .curso-visual{width:200px;border-radius:14px}
}
@media (max-width:560px){
  .curso-top{flex-direction:column}
  .curso-visual{width:100%;max-width:340px;height:244px;align-self:center}
}

.curso h3{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:clamp(23px,2vw,28px);line-height:1.05;letter-spacing:-.015em;margin:0;
}
.curso-resumen{font-size:14px;line-height:1.5;color:var(--mu);margin:2px 0 0}

/* 4 metas en rejilla 2x2 con icono circular azul tenue + título + texto */
.curso-meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:11px 18px;
  margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--bd);
}
.curso-meta-item{display:flex;align-items:flex-start;gap:10px;margin:0}
.curso-meta-ico{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--acg),.12);color:var(--ac);
}
.curso-meta-ico svg{width:18px;height:18px}
.curso-meta dt{
  font-family:var(--f-sans);font-weight:700;color:var(--hi);
  font-size:12.5px;margin:0 0 1px;letter-spacing:-.005em;
}
.curso-meta dd{font-size:12px;color:var(--mu);margin:0;line-height:1.45}

/* CTA grande: botón azul sólido con icono de carrito y flecha */
.curso .cta.curso-cta{
  margin-top:12px;align-self:stretch;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);
  color:#fff;
  padding:11px 22px;border-radius:999px;font-weight:600;font-size:14px;
  box-shadow:0 10px 24px -10px rgba(var(--acg),.55);
  transition:transform .2s ease,box-shadow .25s ease,gap .25s ease;
}
.curso .cta.curso-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px -12px rgba(var(--acg),.7);
  gap:14px;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);
}
.curso .cta.curso-cta svg{width:18px;height:18px;flex:none}

/* Acordeón "Ver programa completo" dentro de la card. Usamos <details>
   nativo: funciona sin JS, el toggle es gratis. Lo decoramos con CSS. */
/* Botón "Ver programa completo": link discreto, borde superior.
   Al pulsar abre el popup (<dialog>) con el temario completo. */
.curso-programa-btn{
  margin-top:14px;
  border:none;border-top:1px solid var(--bd);
  background:transparent;cursor:pointer;
  width:100%;text-align:left;
  padding:13px 0 3px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13.5px;font-weight:600;color:var(--ac2);
  letter-spacing:.01em;
  transition:color .25s ease,gap .25s ease;
}
.curso-programa-btn svg{
  width:18px;height:18px;color:var(--ac);
  transition:transform .25s ease;
}
.curso-programa-btn:hover{color:var(--ac);gap:14px}
.curso-programa-btn:hover svg{transform:translateX(3px)}

/* Lista de bloques del programa. Cada <li> con número grande en serif +
   titulito + bullets. */
.curso-bloques{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}
.curso-bloques > li{display:flex;gap:14px;align-items:flex-start}
.curso-bloque-num{
  font-family:var(--f-serif);font-weight:400;color:var(--ac);
  font-size:26px;line-height:1;letter-spacing:-.02em;flex:none;
  width:34px;
}
.curso-bloques h4{
  font-family:var(--f-sans);font-weight:600;font-size:14.5px;color:var(--hi);
  margin:0 0 6px;letter-spacing:.005em;
}
.curso-bloques ul{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:6px;
}
.curso-bloques ul li{
  font-size:13.5px;line-height:1.55;color:var(--tx);
  padding-left:14px;position:relative;
}
.curso-bloques ul li::before{
  content:"";position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:50%;background:var(--ac);
}

/* Requisitos previos: bloque gris claro al final del acordeón. */
.curso-reqs{
  margin-top:20px;padding:14px 16px;
  background:var(--bg2);border-radius:10px;
}
.curso-reqs h4{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);margin:0 0 8px;
}
.curso-reqs ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.curso-reqs li{
  font-size:13px;line-height:1.5;color:var(--tx);
  padding-left:14px;position:relative;
}
.curso-reqs li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--ac);font-weight:700;
}

/* Animación suave de apertura. */
.curso-programa[open] > *:not(summary){
  animation:programaAbrir .35s ease both;
}
@keyframes programaAbrir{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:none}
}

@media (max-width:800px){ .cursos-rejilla{grid-template-columns:1fr} }


/* ==========================================================================
   FORMULARIOS (compartido entre #solicitar y #contacto)
   Dos secciones distintas que usan el mismo estilo de inputs/botones:
     - #solicitar : el grande, con los 4 combos de personalización.
     - #contacto  : el simple + mapa (reemplazo del de la web antigua).
   Reglas comunes de .form-contacto arriba, variantes de cada sección abajo.
   ========================================================================== */

/* El formulario grande vive ahora DENTRO de la sección Cursos IA, no en
   una sección aparte. Variable del scroll para que el ancla #cursos-form
   no quede pisado por la cabecera sticky. */
#cursos-form{scroll-margin-top:95px}
.cursos-form-wrap{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid var(--bd);
}
.cursos-form-wrap h3{font-size:clamp(22px,2vw,30px);line-height:1.1;margin:4px 0 0}
.cursos-form-wrap .lead{margin-top:10px;max-width:62ch;font-size:clamp(15px,1.2vw,17px)}

.form-contacto{
  margin-top:36px;max-width:760px;
  display:flex;flex-direction:column;gap:18px;
}

.form-fila{display:flex;flex-direction:column}
.form-dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-tres{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media (max-width:640px){ .form-dos,.form-tres{grid-template-columns:1fr} }

/* Pareja email/teléfono: al menos uno obligatorio */
.form-contacto-dual{position:relative}
.form-contacto-dual .form-nota{
  grid-column:1 / -1;
  margin:0;font-size:12px;color:var(--mu);font-style:italic;
}

.form-contacto label{display:flex;flex-direction:column;gap:8px;font-size:14px}
.form-contacto label > span{
  font-weight:600;color:var(--hi);font-size:13.5px;letter-spacing:.005em;
}
.form-contacto label > span em{color:var(--ac);font-style:normal;margin-left:2px}

.form-contacto input[type=text],
.form-contacto input[type=email],
.form-contacto input[type=tel],
.form-contacto textarea,
.form-contacto select{
  font-family:inherit;font-size:15px;color:var(--tx);
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:12px 14px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
  width:100%;
}
.form-contacto textarea{resize:vertical;min-height:120px;line-height:1.5}
.form-contacto input:focus,
.form-contacto textarea:focus,
.form-contacto select:focus{
  outline:none;border-color:var(--ac);
  box-shadow:0 0 0 4px rgba(var(--acg),.15);
  background:#fff;
}

/* Casilla RGPD */
.form-check{flex-direction:row !important;align-items:flex-start;gap:10px;font-size:13.5px}
.form-check input{margin-top:3px;flex:none;accent-color:var(--ac)}
.form-check a{color:var(--ac);text-decoration:underline}
.form-rgpd label > span{font-weight:400;color:var(--mu)}

.form-contacto button.cta{
  background:var(--ac);color:#fff;border:0;cursor:pointer;
  padding:14px 32px;border-radius:999px;font-weight:600;font-size:15px;
  align-self:flex-start;
  transition:transform .2s ease,background .25s ease,box-shadow .25s ease;
}
.form-contacto button.cta:hover{
  background:var(--ac2);transform:translateY(-1px);
  box-shadow:0 14px 28px -10px rgba(var(--acg),.55);
}

/* Mensajes de resultado */
.form-ok,.form-ko{
  margin-top:28px;padding:16px 20px;border-radius:12px;
  font-size:14.5px;line-height:1.5;
}
.form-ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.4);color:#15803d}
.form-ko{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.4);color:#b91c1c}
.form-ok strong,.form-ko strong{display:block;margin-bottom:4px}


/* ==========================================================================
   SECCIÓN CONTACTO (simple + mapa). Formulario corto a la derecha, info de
   la empresa + mapa de Google Maps a la izquierda. En móvil se apila.
   ========================================================================== */

/* Sección más compacta para que entre en una pantalla normal sin scroll
   dentro de la sección. Reducimos h2, padding vertical y mapa. */
#contacto{padding-top:clamp(50px,5vw,70px);padding-bottom:clamp(50px,5vw,70px)}

/* Fondo de puntitos activo en #contacto (coherente con el resto de secciones). */
#contacto h2{font-size:clamp(26px,3vw,36px);line-height:1.1}
/* Lead a ancho completo del wrap: así la frase cabe en 2 líneas en
   escritorio en vez de romperse en 3-4. */
#contacto .lead{margin-top:10px;max-width:none;font-size:15.5px;line-height:1.5}

.contacto-rejilla{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  margin-top:26px;
  align-items:start;
}
@media (max-width:860px){
  .contacto-rejilla{grid-template-columns:1fr;gap:24px}
}

/* --- izquierda: info + mapa --- */
.contacto-info{display:flex;flex-direction:column;gap:16px}

.contacto-datos{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.contacto-datos li{display:flex;flex-direction:column;gap:1px}
.contacto-datos strong{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);
}
.contacto-datos span{font-size:14px;color:var(--tx);line-height:1.4}
.contacto-datos a{color:var(--ac2);transition:color .2s ease}
.contacto-datos a:hover{color:var(--ac)}

.contacto-mapa{
  border-radius:14px;overflow:hidden;
  box-shadow:0 20px 40px -24px rgba(13,60,120,.3);
  border:1px solid var(--bd);
  background:var(--card);
}
.contacto-mapa iframe{display:block;width:100%;height:220px}

/* Formulario simple: inputs un pelín más compactos para que entre todo. */
.form-simple .form-fila{margin-bottom:0}
.form-simple label{gap:5px}
.form-simple input,.form-simple textarea{padding:9px 12px;font-size:14px}
.form-simple textarea{min-height:88px}
.form-simple button.cta{padding:11px 24px}

/* --- derecha: formulario simple ---
   Hereda los estilos de .form-contacto. Ajustes: ancho de la columna
   completa, menos aire entre filas para que entre junto al mapa sin
   que la sección obligue a scroll. */
.form-simple{margin-top:0;max-width:none;gap:12px}

/* ==========================================================================
   Botón flotante "ir arriba". Aparece al bajar scroll, lleva al principio.
   ========================================================================== */
.ir-arriba{
  position:fixed;bottom:24px;right:24px;z-index:60;
  width:44px;height:44px;border-radius:50%;
  background:var(--ac);color:#fff;border:none;
  box-shadow:0 10px 24px -8px rgba(13,60,120,.5);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility 0s .25s,background .2s ease;
}
.ir-arriba.ver{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .25s ease,transform .25s ease,visibility 0s,background .2s ease;
}
.ir-arriba:hover{background:var(--ac2);transform:translateY(-3px)}
.ir-arriba svg{width:20px;height:20px}
@media (max-width:560px){ .ir-arriba{bottom:16px;right:16px;width:40px;height:40px} }

/* ==========================================================================
   Páginas legales (aviso legal, privacidad, cookies).
   Lectura cómoda: columna estrecha, interlineado generoso, jerarquía clara.
   ========================================================================== */
.wrap.legal{max-width:800px;padding:70px 24px 100px}
.wrap.legal .eyebrow{margin:0 0 10px}
.wrap.legal h1{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:clamp(32px,3.6vw,48px);line-height:1.05;letter-spacing:-.015em;
  margin:0 0 8px;
}
.wrap.legal h2{
  font-family:var(--f-serif);font-weight:400;color:var(--hi);
  font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-.01em;
  margin:40px 0 12px;
}
.wrap.legal h3{
  font-family:var(--f-sans);font-weight:600;color:var(--hi);
  font-size:16px;line-height:1.3;letter-spacing:-.005em;
  margin:22px 0 8px;
}
.wrap.legal p,
.wrap.legal li{
  font-family:var(--f-sans);font-weight:400;color:var(--tx);
  font-size:15.5px;line-height:1.65;
}
.wrap.legal p{margin:0 0 14px}
.wrap.legal ul,
.wrap.legal ol{margin:0 0 18px;padding-left:22px}
.wrap.legal li{margin-bottom:6px}
.wrap.legal a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.wrap.legal a:hover{color:var(--ac2)}
.wrap.legal strong{color:var(--hi);font-weight:600}
.wrap.legal .legal-fecha{
  font-size:13px;color:var(--mu);margin:0 0 36px;letter-spacing:.005em;
}
.wrap.legal .legal-pie{
  margin-top:48px;padding-top:20px;border-top:1px solid var(--bd);
  font-size:13.5px;color:var(--mu);
}
.wrap.legal .legal-pie a{color:var(--mu);text-decoration:underline;text-underline-offset:3px}
.wrap.legal .legal-pie a:hover{color:var(--ac)}

/* Tabla simple (lista de cookies) */
.wrap.legal table.tabla{
  width:100%;border-collapse:collapse;margin:0 0 18px;
  font-size:14px;
}
.wrap.legal table.tabla th,
.wrap.legal table.tabla td{
  padding:10px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--bd);
}
.wrap.legal table.tabla th{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mu);background:var(--bg2);
}
.wrap.legal table.tabla code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12.5px;color:var(--ac2);background:rgba(var(--acg),.08);
  padding:1px 6px;border-radius:4px;
}

/* Pie bajo el mapa: enlaces discretos (ver más grande / cómo llegar) */
.contacto-mapa-pie{
  margin:8px 0 0;font-size:12px;color:var(--mu);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.contacto-mapa-pie a{color:var(--ac2);text-decoration:underline;text-underline-offset:3px}
.contacto-mapa-pie a:hover{color:var(--ac)}

/* Popups legales (aviso, privacidad, cookies): dialog con márgenes claros
   y contenido compacto dentro (una sola capa de padding, sin duplicar). */
.dlg-legal{
  width:min(760px,85vw);max-height:85vh;
  margin:auto;
}
.dlg-legal .dlg-contenido{padding:0;max-height:85vh}
.dlg-legal .wrap.legal{padding:28px 36px 28px;max-width:none}
.dlg-legal .wrap.legal .eyebrow{margin:0 0 6px}
.dlg-legal .wrap.legal h1{font-size:clamp(22px,2.2vw,30px);margin:0 0 4px}
.dlg-legal .wrap.legal .legal-fecha{margin:0 0 18px}
.dlg-legal .wrap.legal h2{font-size:clamp(17px,1.5vw,20px);margin:20px 0 8px}
.dlg-legal .wrap.legal h3{font-size:14.5px;margin:14px 0 6px}
.dlg-legal .wrap.legal p{margin:0 0 10px}
.dlg-legal .wrap.legal ul,
.dlg-legal .wrap.legal ol{margin:0 0 12px;padding-left:20px}
.dlg-legal .wrap.legal li{margin-bottom:4px;line-height:1.5}
.dlg-legal .wrap.legal p,
.dlg-legal .wrap.legal li{font-size:14px;line-height:1.55}
@media (max-width:560px){
  .dlg-legal{width:92vw}
  .dlg-legal .wrap.legal{padding:22px 20px}
}