/* ===========================================================================
   styles.css — Christian Moreno
   Orden: 1) tokens  2) base  3) piezas reutilizables  4) secciones  5) móvil
   Para cambiar colores o tamaños, tocá solo el bloque 1.
   =========================================================================== */

/* === 1. TOKENS ==========================================================
   Dos temas. El claro ("Enterprise Data Stream") es el de por defecto; el
   oscuro ("Insight Oscuro") se activa con data-tema="oscuro" en <html>, que
   pone main.js leyendo la preferencia guardada o la del sistema operativo.

   Para cambiar un color, tocá acá y cambia en todo el sitio. Cada token
   existe en los dos temas: si agregás uno, agregalo en los dos bloques.
   ======================================================================== */
:root{
  /* --- Tema claro ------------------------------------------------------ */
  /* Superficies */
  --canvas:    #F8FAFC;   /* fondo general de la página                    */
  --surface:   #FFFFFF;   /* tarjetas y bloques de contenido               */
  --paper:     #FFFFFF;   /* alias histórico de --surface                  */
  --surface-2: #F1F5F9;   /* secciones alternas                            */
  --velo:      rgba(241,245,249,.74);  /* secciones alternas translúcidas  */
  --barra-bg:  rgba(248,250,252,.82);  /* barra superior con desenfoque    */

  /* Texto */
  --ink:       #0F172A;   /* texto principal                               */
  --ink-2:     #334155;   /* texto secundario                              */
  --ink-3:     #64748B;   /* metadatos, fechas                             */
  --trazo:     #1E293B;   /* líneas de los iconos y bordes marcados        */

  /* Líneas */
  --rule:      #E2E8F0;
  --rule-warm: #E2E8F0;   /* alias histórico: ya no hay fondo cálido       */

  /* Acentos */
  --acento:       #0B6BCB;             /* azul Fabric: enlaces y datos     */
  --acento-2:     #07529F;             /* hover del acento                 */
  --acento-suave: rgba(11,107,203,.10);
  --cta:          #F2C811;             /* amarillo Power BI: solo CTAs     */
  --cta-2:        #DCB50A;
  --cta-ink:      #15202E;             /* texto sobre el amarillo          */
  --ocre:         #A16207;             /* estado "próximo" y borradores    */
  --ocre-suave:   rgba(161,98,7,.09);

  /* Capa de fondo */
  --punto:   rgba(15,23,42,.065);      /* la grilla de puntos              */
  --glow-1:  rgba(11,107,203,.07);     /* resplandor superior derecho      */
  --glow-2:  rgba(14,165,233,.05);     /* resplandor medio izquierdo       */
  --red-op:  .85;                      /* opacidad de la red de nodos      */
  --red-filtro: none;

  /* Código */
  --codigo-bg: #0F172A;
  --codigo-ink:#E2E8F0;

  /* Tipografía */
  --ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --prosa:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Medidas */
  --ancho: 1120px;
  --gutter: 20px;
  --r-chica: 6px;
  --r-media: 12px;
  --r-grande: 18px;
  --barra-alto: 64px;
  --sombra: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
  --sombra-alta: 0 2px 6px rgba(15,23,42,.06), 0 18px 48px -18px rgba(15,23,42,.25);

  /* Movimiento */
  --salida: cubic-bezier(.22,.7,.3,1);

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
}

/* --- Tema oscuro ------------------------------------------------------- */
:root[data-tema="oscuro"]{
  --canvas:    #0B0F19;
  --surface:   #151D2C;
  --paper:     #151D2C;
  --surface-2: #111827;
  --velo:      rgba(17,24,39,.62);
  --barra-bg:  rgba(11,15,25,.80);

  --ink:       #F1F5F9;
  --ink-2:     #CBD5E1;
  --ink-3:     #94A3B8;
  --trazo:     #CBD5E1;

  --rule:      #243044;
  --rule-warm: #243044;

  --acento:       #5CB3FF;
  --acento-2:     #93CCFF;
  --acento-suave: rgba(92,179,255,.14);
  --cta:          #F2C811;
  --cta-2:        #FFD941;
  --cta-ink:      #15202E;
  --ocre:         #F0B429;
  --ocre-suave:   rgba(240,180,41,.10);

  --punto:   rgba(226,232,240,.055);
  --glow-1:  rgba(37,99,235,.14);
  --glow-2:  rgba(14,165,233,.08);
  --red-op:  .32;
  --red-filtro: brightness(1.9) saturate(1.15);

  --codigo-bg: #080C14;
  --codigo-ink:#CBD5E1;

  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --sombra-alta: 0 2px 6px rgba(0,0,0,.45), 0 18px 48px -18px rgba(0,0,0,.8);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing: inherit; }

/* Mientras main.js cambia el tema, no queremos ver la transición a medias */
:root.cambiando-tema *,
:root.cambiando-tema *::before,
:root.cambiando-tema *::after{ transition:none !important; }

/* === 2. BASE ============================================================ */
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-alto) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;   /* la l con cola, en Inter */
  transition: background-color .3s ease, color .3s ease;
}

h1,h2,h3,h4{
  font-family: var(--display); font-weight:650; line-height:1.14;
  letter-spacing:-0.022em; margin:0 0 .5em;
}
p{ margin:0 0 1em; }
a{ color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--acento-2); }

/* Los números se leen mejor alineados en columna */
.hero__pruebas strong,.cert__codigo,.ficha dd,.video__duracion,
.tabla-scroll td,.linea-fecha,.formacion__periodo{ font-variant-numeric: tabular-nums; }
img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
strong{ font-weight:600; }

:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:2px; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--surface); color:var(--ink);
  padding:12px 18px; border:1px solid var(--acento); border-radius:var(--r-chica);
}
.saltar:focus{ left:12px; top:12px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:1.15em; height:1.15em; flex:none;
  fill:none; stroke:var(--trazo); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-0.2em;
}

.caja{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.caja--angosta{ max-width:760px; }

/* === 3. PIEZAS REUTILIZABLES ============================================ */

/* 3.1 Botones */
.boton{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--ui); font-size:.94rem; font-weight:550; line-height:1;
  padding:.85em 1.35em; border-radius:var(--r-chica);
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s var(--salida), box-shadow .18s ease;
}
.boton:active{ transform:translateY(1px); }

/* Sólido = el amarillo Power BI. Es el único color que pide atención,
   así que se reserva para la acción principal de cada bloque. */
.boton--solido{ background:var(--cta); color:var(--cta-ink); border-color:var(--cta); }
.boton--solido:hover{ background:var(--cta-2); border-color:var(--cta-2); color:var(--cta-ink);
  box-shadow:0 6px 18px -8px rgba(242,200,17,.7); }
.boton--solido .ico{ stroke:var(--cta-ink); }

/* De línea = el resto */
.boton--linea{ border-color:var(--rule); color:var(--ink); background:var(--surface); }
.boton--linea:hover{ border-color:var(--acento); color:var(--acento); background:var(--acento-suave); }
.boton--linea:hover .ico{ stroke:var(--acento); }
.boton--ancho{ width:100%; justify-content:center; }

/* 3.2 Bloques y tarjetas: el color sale de la sección que los contiene */
.bloque,.tarjeta{
  background: var(--bloque, var(--surface));
  border:1px solid var(--borde, var(--rule));
  border-radius: var(--r-media);
}
.bloque{ padding:28px; }

/* 3.3 Chips de tecnología */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.chip{
  font-size:.76rem; font-weight:500; color:var(--ink-2); padding:3px 9px;
  border:1px solid var(--borde, var(--rule)); border-radius:999px;
  background:var(--surface-2);
}

/* 3.4 Etiqueta de estado */
.estado{
  font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:999px;
  border:1px solid currentColor; letter-spacing:.01em; white-space:nowrap;
}
.estado--publicado{ color:var(--acento); }
.estado--desarrollo{ color:var(--ink-2); }
.estado--planificado,.estado--proximo,.estado--objetivo{ color:var(--ocre); border-style:dashed; }
.estado--retirada{ color:var(--ink-3); }

/* 3.5 Grillas */
.grilla{ display:grid; gap:20px; }
.grilla--servicios{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grilla--proyectos{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.grilla--posts{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.grilla--videos{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

/* === 4. BARRA SUPERIOR ==================================================
   Queda fija arriba en todas las páginas. Ojo: no le pongas position en
   otro bloque más abajo del archivo, porque pisa el sticky y deja de
   acompañar el scroll (es el error que tenía antes).                     */
.barra{
  position:sticky; top:0; z-index:60;
  background:var(--barra-bg);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
  padding-top: env(safe-area-inset-top, 0px);
}
.barra.esta-fija{ border-bottom-color:var(--rule); box-shadow:0 6px 24px -20px rgba(15,23,42,.6); }
.barra__caja{
  max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter);
  height:var(--barra-alto); display:flex; align-items:center; gap:14px;
}
.marca{ text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  line-height:1.15; margin-right:auto; }
.marca__nombre{ font-family:var(--display); font-weight:650; font-size:1.04rem; letter-spacing:-0.02em; }
.marca__rol{ font-size:.75rem; color:var(--ink-3); }

.nav ul{ display:flex; align-items:center; gap:2px; }
.nav a{
  position:relative; display:block; padding:8px 11px; border-radius:var(--r-chica);
  color:var(--ink-2); text-decoration:none; font-size:.9rem;
  transition:color .18s ease, background-color .18s ease;
}
.nav a:hover{ color:var(--ink); background:var(--acento-suave); }
.nav a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px;
  background:var(--acento); border-radius:2px;
  transform:scaleX(0); transform-origin:center; transition:transform .22s var(--salida);
}
.nav a.activo{ color:var(--ink); }
.nav a.activo::after{ transform:scaleX(1); }
.nav__cta{
  margin-left:6px; background:var(--cta); color:var(--cta-ink) !important;
  font-weight:600; padding:9px 15px !important;
}
.nav a.nav__cta:hover{ background:var(--cta-2); }
.nav a.nav__cta::after{ display:none; }

.barra__progreso{ height:2px; background:linear-gradient(90deg,var(--acento),var(--cta));
  width:0; transition:width .1s linear; }

/* 4.1 Controles de idioma y tema */
.barra__controles{ display:flex; align-items:center; gap:6px; }

.idioma{ display:flex; border:1px solid var(--rule); border-radius:var(--r-chica); overflow:hidden; }
.idioma a{
  display:block; padding:5px 9px; font-size:.76rem; font-weight:600; letter-spacing:.03em;
  text-decoration:none; color:var(--ink-3); background:transparent;
  transition:background-color .18s ease, color .18s ease;
}
.idioma a:hover{ color:var(--ink); background:var(--acento-suave); }
.idioma a[aria-current="true"]{ background:var(--acento); color:#fff; }
:root[data-tema="oscuro"] .idioma a[aria-current="true"]{ color:#0B0F19; }

.tema-btn{
  display:grid; place-items:center; width:36px; height:36px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-chica);
  color:var(--ink-2); transition:background-color .18s ease, border-color .18s ease;
}
.tema-btn:hover{ background:var(--acento-suave); border-color:var(--acento); }
.tema-btn .ico{ width:17px; height:17px; stroke:var(--ink-2); }
.tema-btn:hover .ico{ stroke:var(--acento); }
/* Se ve el sol o la luna según el tema activo, nunca los dos */
.tema-btn .ico--luna{ display:none; }
:root[data-tema="oscuro"] .tema-btn .ico--sol{ display:none; }
:root[data-tema="oscuro"] .tema-btn .ico--luna{ display:block; }

.menu-btn{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0 10px;
}
.menu-btn span{ display:block; height:1.5px; background:var(--trazo); transition:transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* === 5. PORTADA ========================================================= */
.hero{ padding-top:56px; }
.hero__caja{ display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:center; }
.hero__saludo{ font-size:.92rem; font-weight:550; letter-spacing:.04em; text-transform:uppercase;
  color:var(--acento); margin-bottom:.7em; }
.hero__titulo{ font-size:clamp(2.05rem,4.6vw,3.3rem); letter-spacing:-0.034em; font-weight:700; max-width:16ch; }
.hero__bajada{ font-size:1.09rem; line-height:1.7; color:var(--ink-2); max-width:56ch; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 32px; }

/* Las métricas: el número va centrado sobre su descripción */
.hero__pruebas{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:24px; padding-top:24px; border-top:1px solid var(--rule);
}
.hero__pruebas li{ font-size:.86rem; color:var(--ink-3); text-align:center; line-height:1.4; }
.hero__pruebas strong{
  display:block; font-family:var(--display); font-size:1.65rem; color:var(--ink);
  font-weight:700; letter-spacing:-0.03em; margin-bottom:4px;
}

.hero__ficha{ margin:0; }
.hero__foto{
  width:100%; aspect-ratio:11/13; object-fit:cover;
  border-radius:var(--r-media) var(--r-media) 2px 2px;
  background:var(--surface); border:1px solid var(--rule);
}
.hero__pie{ display:flex; flex-direction:column; gap:6px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--rule); border-top:0; border-radius:0 0 var(--r-media) var(--r-media); }
.ficha__linea{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ink-2); }

/* La tubería: única animación automática del sitio */
.tuberia{ margin-top:72px; padding-bottom:8px; }
.tuberia__caja{ position:relative; }
.tuberia__linea{
  height:1px; background:var(--trazo); opacity:.35;
  transform-origin:left center; transform:scaleX(0);
  animation:dibujar 1.1s .35s cubic-bezier(.2,.7,.3,1) forwards;
}
.tuberia__nodos{ display:flex; justify-content:space-between; margin-top:-5px; }
.tuberia__nodos li{
  display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-3);
  background:var(--canvas); padding-right:10px; opacity:0;
  animation:aparecer .5s forwards;
}
.tuberia__nodos li:nth-child(1){ animation-delay:.7s; }
.tuberia__nodos li:nth-child(2){ animation-delay:1.0s; padding-inline:10px; }
.tuberia__nodos li:nth-child(3){ animation-delay:1.3s; padding-right:0; padding-left:10px; }
.tuberia__nodos span{ width:9px; height:9px; border:1.5px solid var(--trazo); border-radius:50%; background:var(--canvas); }
.tuberia__nodos li:last-child span{ background:var(--acento); border-color:var(--acento); }
@keyframes dibujar{ to{ transform:scaleX(1); } }
@keyframes aparecer{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .tuberia__linea{ animation:none; transform:scaleX(1); }
  .tuberia__nodos li{ animation:none; opacity:1; }
}

/* === 6. SECCIONES =======================================================
   Las secciones son transparentes para que la capa de fondo (sección 10)
   se vea de punta a punta. Las alternas llevan un velo translúcido, no un
   color opaco: así se distinguen sin tapar el patrón.                    */
.seccion{
  --fondo: var(--surface); --bloque: var(--surface); --borde: var(--rule);
  background:transparent; padding-block:84px;
  scroll-margin-top:calc(var(--barra-alto) + 14px);
  position:relative;
}
.seccion--alterna{
  background:var(--velo);
  border-block:1px solid var(--rule);
}
.seccion__titulo{ font-size:clamp(1.55rem,3vw,2.1rem); margin-bottom:.35em; letter-spacing:-0.028em; }
.seccion__bajada{ color:var(--ink-2); max-width:62ch; margin-bottom:38px; font-size:1.03rem; }
.seccion__cierre{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.sub-titulo{ font-size:.82rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 20px; padding-bottom:10px; border-bottom:1px solid var(--borde); }
.sub-titulo--espaciado{ margin-top:56px; }

.dos-columnas{ display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:start; }
.dos-columnas--formacion{ grid-template-columns:1fr 1fr; margin-top:64px; }
/* Trayectoria y Skills, una al lado de la otra */
.dos-columnas--par{ grid-template-columns:1fr 1fr; gap:48px; }

.prosa{ font-size:1.05rem; line-height:1.78; color:var(--ink-2); }
.prosa p:last-child{ margin-bottom:0; }

/* 6.1 Redes */
.redes{ display:flex; flex-direction:column; gap:2px; margin-bottom:20px; }
.redes a{
  display:flex; align-items:center; gap:12px; padding:10px 8px;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--borde); font-size:.95rem;
}
.redes li:last-child a{ border-bottom:0; }
.redes a:hover{ color:var(--acento); }
.redes a:hover .ico{ stroke:var(--acento); }
.redes .meta{ margin-left:auto; font-size:.8rem; color:var(--ink-3); }
.bloque__titulo{ font-size:1rem; margin-bottom:12px; }

/* 6.2 Tarjetas de servicio */
.servicio{ padding:26px; display:flex; flex-direction:column; }
.servicio__titulo{ font-size:1.12rem; margin-bottom:6px; }
.servicio__publico{ font-size:.85rem; color:var(--ink-3); margin-bottom:16px; }
.servicio__incluye li{ position:relative; padding-left:26px; font-size:.92rem; color:var(--ink-2); margin-bottom:9px; line-height:1.5; }
.servicio__incluye .ico{ position:absolute; left:0; top:.28em; width:1.05em; height:1.05em; stroke:var(--acento); stroke-width:2; }
.servicio__pie{ margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.servicio__entrega{ font-size:.82rem; color:var(--ink-3); }

/* 6.3 Proyectos */
.filtros{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filtro{
  font-family:var(--ui); font-size:.88rem; padding:7px 14px; cursor:pointer;
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--borde); border-radius:var(--r-chica);
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.filtro:hover{ color:var(--ink); }
.filtro[aria-pressed="true"]{ background:var(--acento); border-color:var(--acento); color:#fff; }
:root[data-tema="oscuro"] .filtro[aria-pressed="true"]{ color:#0B0F19; }

.proyecto{ display:flex; flex-direction:column; overflow:hidden; }
.proyecto__img{ aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--borde); }
.proyecto__vacio{
  aspect-ratio:16/9; border-bottom:1px solid var(--borde);
  background:
    repeating-linear-gradient(135deg, var(--punto) 0 1px, transparent 1px 9px);
  display:flex; align-items:center; justify-content:center;
}
.proyecto__vacio .ico{ width:28px; height:28px; opacity:.4; }
.proyecto__cuerpo{ padding:22px; display:flex; flex-direction:column; flex:1; }
.proyecto__alto{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.proyecto__titulo{ font-size:1.05rem; margin:0; }
.proyecto__resumen{ font-size:.93rem; color:var(--ink-2); margin-bottom:10px; }
.proyecto__detalle{ font-size:.88rem; color:var(--ink-3); margin-bottom:0; }
.proyecto__links{ display:flex; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--borde); }
.proyecto__links a{ display:flex; align-items:center; gap:6px; font-size:.88rem; text-decoration:none; }
.proyecto__links a:hover{ text-decoration:underline; }

/* 6.4 Radar de skills */
.radar-zona{ display:grid; grid-template-columns:1fr; gap:20px; }
.radar-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.radar-caja{ padding:20px; display:flex; flex-direction:column; align-items:center; }
#radar svg{ width:100%; max-width:480px; height:auto; display:block; }
.radar-malla{ fill:none; stroke:var(--ink-3); stroke-width:.5; opacity:.45; }
.radar-eje{ stroke:var(--ink-3); stroke-width:.5; opacity:.45; }
.radar-area{ fill:var(--acento); fill-opacity:.14; stroke:var(--acento); stroke-width:1.5; stroke-linejoin:round; }
.radar-punto{ fill:var(--surface); stroke:var(--acento); stroke-width:1.5; cursor:pointer; transition:r .15s ease; }
.radar-punto:hover,.radar-punto.activo{ fill:var(--acento); r:6; }
.radar-etiqueta{ font-family:var(--ui); font-size:9.5px; fill:var(--ink-2); }
.radar-valor{ font-family:var(--ui); font-size:8px; fill:var(--ink-3); }
.radar-nota{
  margin:16px 0 0; font-size:.94rem; color:var(--ink-2);
  text-align:center; min-height:3em; max-width:46ch;
}
.radar-leyenda{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.radar-leyenda li{ display:contents; }
.radar-leyenda button{
  font-family:var(--ui); font-size:.84rem; padding:6px 12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--borde); border-radius:999px; color:var(--ink-2);
  transition:border-color .18s ease, color .18s ease;
}
.radar-leyenda button:hover,.radar-leyenda button.activo{ border-color:var(--acento); color:var(--acento); }

/* 6.5 Líneas de tiempo */
.linea{ position:relative; padding-left:34px; }
.linea::before{
  content:""; position:absolute; left:7px; top:10px; bottom:10px;
  width:1px; background:var(--borde);
}
.linea-item{ position:relative; padding-bottom:28px; }
.linea-item:last-child{ padding-bottom:0; }
.linea-punto{
  position:absolute; left:-34px; top:4px; width:15px; height:15px; padding:0;
  border-radius:50%; background:var(--surface); border:1.5px solid var(--ink-3);
  cursor:pointer; transition:border-color .18s ease, transform .18s var(--salida);
}
.linea-punto:hover{ border-color:var(--acento); transform:scale(1.15); }
.linea-punto::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:transparent; transition:background-color .18s ease;
}
.linea-item.abierto .linea-punto::after{ background:var(--acento); }
.linea-item[data-estado="proximo"] .linea-punto{ border-style:dashed; border-color:var(--ocre); }

.linea-cabezal{
  width:100%; text-align:left; background:transparent; border:0; padding:0 0 0 2px;
  font-family:var(--ui); color:inherit; cursor:pointer; display:block;
}
.linea-fecha{ font-size:.8rem; color:var(--ink-3); display:block; margin-bottom:2px; }
.linea-titulo{ font-size:1.05rem; font-weight:600; margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.linea-titulo .ico{ width:.9em; height:.9em; opacity:.5; transition:transform .2s ease; }
.linea-item.abierto .linea-titulo .ico{ transform:rotate(180deg); }
.linea-org{ font-size:.92rem; color:var(--ink-2); }
.linea-resumen{ display:block; font-size:.96rem; color:var(--ink-2); margin:6px 0 0; max-width:64ch; }
.linea-detalle{ padding:18px 20px; margin-top:14px; }
.linea-detalle ul li{ position:relative; padding-left:18px; font-size:.93rem; color:var(--ink-2); margin-bottom:8px; }
.linea-detalle ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--acento); }
.linea-item[data-estado="proximo"] .linea-titulo,
.linea-item[data-estado="proximo"] .linea-org{ color:var(--ink-3); }
.linea-item[data-estado="proximo"] .linea-resumen{ color:var(--ink-3); }

/* 6.6 Educación y certificaciones */
.lista-formacion li{ padding:16px 0; border-bottom:1px solid var(--borde); }
.lista-formacion li:last-child{ border-bottom:0; }
.formacion__titulo{ font-size:1rem; font-weight:600; margin:0 0 2px; }
.formacion__inst{ font-size:.92rem; color:var(--ink-2); }
.formacion__periodo{ font-size:.82rem; color:var(--ink-3); }
.formacion__detalle{ font-size:.88rem; color:var(--ink-2); margin:8px 0 0; }

/* Las certificaciones se estilan en la sección 16: ahora viven en la
   ventana emergente que abre «Dónde encontrarme». */

/* 6.7 Contenido: posts y videos */
.post{ padding:0; }
.post__cuerpo{ padding:24px; display:flex; flex-direction:column; flex:1; }
.post__fecha{ font-size:.8rem; color:var(--ink-3); margin-bottom:8px; }
.post__titulo{ font-size:1.05rem; margin-bottom:8px; }
.post__resumen{ font-size:.95rem; color:var(--ink-2); margin-bottom:0; }
.post__pie{ margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; }
.post__fuente{ font-size:.8rem; color:var(--ink-3); display:flex; align-items:center; gap:6px; }

.video{ overflow:hidden; }
.video__marco{ position:relative; aspect-ratio:16/9; background:#0F172A; cursor:pointer; width:100%; padding:0; border:0; display:block; }
/* El orden de las capas dentro de la miniatura: el texto de respaldo va al
   fondo, la imagen lo tapa cuando carga, y el play y la duración quedan
   arriba de todo. Sin esto el título se dibujaba encima de la miniatura. */
.video__marco img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.video__respaldo{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  color:#E2E8F0; font-size:.85rem; padding:16px; text-align:center; }
.video__play{
  position:absolute; inset:0; z-index:2; margin:auto; width:52px; height:52px; border-radius:50%;
  background:var(--cta); display:flex; align-items:center; justify-content:center;
  transition:transform .18s var(--salida);
}
.video__marco:hover .video__play{ transform:scale(1.08); }
.video__play .ico{ width:24px; height:24px; stroke-width:1.5; stroke:var(--cta-ink); }
.video__duracion{
  position:absolute; right:8px; bottom:8px; z-index:2; background:rgba(8,12,20,.85); color:#E2E8F0;
  font-size:.74rem; padding:2px 6px; border-radius:2px; font-variant-numeric:tabular-nums;
}
.video__cuerpo{ padding:14px 16px; }
.video__titulo{ font-size:.95rem; font-weight:500; margin:0 0 4px; line-height:1.35; }
.video__meta{ font-size:.78rem; color:var(--ink-3); }
.video iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

/* 6.8 Preguntas frecuentes */
.faq-item{ border-bottom:1px solid var(--borde); }
.faq-pregunta{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:transparent; border:0; padding:20px 2px; cursor:pointer;
  font-family:var(--ui); font-size:1rem; font-weight:500; color:var(--ink); text-align:left;
}
.faq-pregunta .ico{ transition:transform .2s ease; }
.faq-item.abierto .faq-pregunta .ico{ transform:rotate(180deg); }
.faq-respuesta{ color:var(--ink-2); padding:0 2px 20px; max-width:68ch; }

/* 6.9 Formulario */
.seccion--contacto{ --fondo: var(--canvas); }
.form{ padding:28px; }
.campo{ margin-bottom:18px; }
.campo label{ display:block; font-size:.88rem; color:var(--ink-2); margin-bottom:6px; }
.campo input,.campo select,.campo textarea{
  width:100%; font-family:var(--ui); font-size:.98rem; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--r-chica);
  padding:11px 13px; transition:border-color .18s ease, box-shadow .18s ease;
}
.campo textarea{ resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.trampa{ position:absolute; left:-9999px; }
.form__estado{ margin:14px 0 0; font-size:.9rem; color:var(--acento); }
.form__alternativa{ margin:18px 0 0; font-size:.9rem; color:var(--ink-3); }

/* 6.10 Respaldo para imágenes que todavía no existen */
.img-respaldo{
  background: var(--bloque, var(--surface));
  background-image: repeating-linear-gradient(135deg, var(--punto) 0 1px, transparent 1px 10px);
  border:1px solid var(--borde, var(--rule)); border-radius:var(--r-media);
  width:100%; aspect-ratio:11/13;
}
.img-respaldo.proyecto__img{ aspect-ratio:16/9; border-radius:0; border:0; border-bottom:1px solid var(--borde); }

/* === 7. PIE ============================================================= */
.pie{ background:var(--velo); border-top:1px solid var(--rule); padding-block:44px; }
.pie__caja{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.pie__marca{ font-weight:600; margin:0; }
.redes--pie{ flex-direction:row; gap:4px; margin:0; }
.redes--pie a{ border:0; padding:8px; }
.redes--pie span:not(.ico){ position:absolute; left:-9999px; }
.pie__legal{ font-size:.82rem; color:var(--ink-3); margin:0; width:100%; }

/* === 8. MÓVIL =========================================================== */
@media (max-width:900px){
  .hero__caja{ grid-template-columns:1fr; gap:32px; }
  .hero__ficha{ max-width:300px; margin-inline:auto; }
  .dos-columnas,.dos-columnas--formacion{ grid-template-columns:1fr; }
  .tuberia__nodos li{ font-size:.74rem; }
}

@media (max-width:760px){
  .menu-btn{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--canvas); border-bottom:1px solid var(--rule);
    max-height:0; overflow:hidden; transition:max-height .28s var(--salida);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .nav.abierto{ max-height:420px; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 20px; }
  .nav a{ padding:13px 4px; border-bottom:1px solid var(--rule); border-radius:0; }
  .nav a::after{ display:none; }
  .nav a.activo{ box-shadow:inset 3px 0 0 var(--acento); padding-left:12px; }
  .nav__cta{ margin:14px 0 0; justify-content:center; text-align:center; border-radius:var(--r-chica); }
  .nav a.nav__cta{ border-bottom:0; }

  .seccion{ padding-block:52px; }
  .hero{ padding-top:36px; }
    .hero__pruebas{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr));
    gap:16px 14px;
  }
  .hero__pruebas li{ font-size:.76rem; line-height:1.35; }
  .hero__pruebas strong{ font-size:1.12rem; }
  .hero__texto{ text-align:left; }
  .bloque{ padding:22px; }
  .tuberia{ margin-top:48px; }
  .tuberia__nodos li:nth-child(2){ display:none; }
  .linea{ padding-left:28px; }
  .linea-punto{ left:-28px; }
  .grilla{ gap:16px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print{
  .barra,.menu-btn,.hero__acciones,.form,.filtros,.barra__controles{ display:none; }
  body{ background:#fff; }
  .linea-detalle{ display:block !important; }
}
.video__marco .img-respaldo{ display:none; }


/* === 9. PÁGINAS INTERNAS =============================================== */

.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* 9.1 Tarjetas enteramente clicables */
.tarjeta{ overflow:hidden; box-shadow:var(--sombra);
  transition:border-color .2s ease, transform .22s var(--salida), box-shadow .22s ease; }
.tarjeta:has(.tarjeta__enlace:hover){ border-color:var(--acento); transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.tarjeta__enlace{
  display:flex; flex-direction:column; height:100%;
  color:inherit; text-decoration:none;
}
.tarjeta__enlace:focus-visible{ outline-offset:-3px; }
.tarjeta__ver{
  margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:6px;
  font-size:.86rem; color:var(--acento); font-weight:500;
}
.ico--derecha{ transform:rotate(-90deg); width:.9em; height:.9em; stroke:var(--acento); }
.tarjeta__enlace:hover .tarjeta__ver{ text-decoration:underline; }

/* 9.2 Migas de pan */
.miga{ font-size:.84rem; color:var(--ink-3); margin-bottom:22px; }
.miga a{ color:var(--ink-3); text-decoration:none; }
.miga a:hover{ color:var(--acento); text-decoration:underline; }
.miga span{ margin:0 6px; }

/* 9.3 Artículo y caso de proyecto */
.articulo{ --bloque: var(--surface); --borde: var(--rule); padding-block:48px 72px; }
.articulo__alto{ margin-bottom:36px; }
.articulo__alto h1{ font-size:clamp(1.8rem,4.4vw,2.7rem); letter-spacing:-0.025em; max-width:20ch; }
.articulo__eje{ font-size:.86rem; color:var(--acento); margin-bottom:8px; }
.articulo__meta{ font-size:.85rem; color:var(--ink-3); margin-bottom:16px; }
.articulo__resumen{
  font-size:1.15rem; line-height:1.7; color:var(--ink-2);
  max-width:60ch; margin-bottom:16px;
}
.articulo__origen{
  font-size:.9rem; color:var(--ink-2);
  border-left:2px solid var(--acento); padding:10px 0 10px 16px; margin-bottom:28px;
}
.articulo__portada{
  width:100%; max-width:1120px; margin:0 auto 44px; border-radius:var(--r-media);
}

/* 9.4 Tipografía de textos largos */
.prosa--larga{ font-size:1.11rem; line-height:1.78; max-width:68ch; }
.prosa--larga h2{
  font-size:1.5rem; margin:48px 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--rule); scroll-margin-top:90px;
}
.prosa--larga h3{ font-size:1.18rem; margin:34px 0 10px; }
.prosa--larga h4{ font-size:1.02rem; margin:26px 0 8px; color:var(--ink-2); }
.prosa--larga > p:first-child{ font-size:1.17rem; }
.prosa--larga .prosa-lista{ margin:0 0 1.2em; padding-left:4px; }
.prosa--larga .prosa-lista li{ position:relative; padding-left:26px; margin-bottom:10px; }
.prosa--larga ul.prosa-lista li::before{
  content:""; position:absolute; left:7px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--acento);
}
.prosa--larga ol.prosa-lista{ counter-reset:paso; }
.prosa--larga ol.prosa-lista li::before{
  counter-increment:paso; content:counter(paso) "."; position:absolute; left:0; top:0;
  color:var(--acento); font-family:var(--ui); font-weight:600; font-size:.92em;
}
.prosa--larga blockquote{
  margin:32px 0; padding:4px 0 4px 24px; border-left:2px solid var(--acento);
  font-size:1.2rem; font-style:italic; color:var(--ink);
}
.prosa--larga blockquote p{ margin:0; }
.prosa--larga code{
  font-family:var(--mono);
  font-size:.86em; background:var(--surface-2); border:1px solid var(--rule);
  border-radius:4px; padding:1px 5px; color:var(--ink);
}
.prosa--larga pre{
  background:var(--codigo-bg); color:var(--codigo-ink); border-radius:var(--r-media);
  border:1px solid var(--rule); font-family:var(--mono);
  padding:20px 22px; overflow-x:auto; margin:28px 0; font-size:.86rem; line-height:1.65;
}
.prosa--larga pre code{ background:none; border:0; padding:0; color:inherit; font-size:1em; }
.prosa--larga img{ border-radius:var(--r-media); border:1px solid var(--rule); margin:28px 0; }
.prosa--larga hr{ border:0; border-top:1px solid var(--rule); margin:44px 0; }
.prosa--larga a{ text-decoration:underline; text-underline-offset:3px; }

.tabla-scroll{ overflow-x:auto; margin:28px 0; border:1px solid var(--rule); border-radius:var(--r-media); background:var(--surface); }
.tabla-scroll table{ width:100%; border-collapse:collapse; font-family:var(--ui); font-size:.93rem; }
.tabla-scroll th,.tabla-scroll td{ padding:11px 16px; text-align:left; border-bottom:1px solid var(--rule); }
.tabla-scroll th{ background:var(--surface-2); font-weight:650; color:var(--ink); }
.tabla-scroll{ position:relative; }
.tabla-scroll::after{
  content:""; position:absolute; top:0; right:0; width:28px; height:100%;
  background:linear-gradient(to right, transparent, var(--canvas));
  pointer-events:none;
}
.tabla-scroll td{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tabla-scroll tr:last-child td{ border-bottom:0; }

/* 9.5 Ficha del proyecto */
.ficha{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; margin:0 0 40px; }
.ficha dt{ font-size:.78rem; color:var(--ink-3); margin-bottom:4px; }
.ficha dd{ margin:0; font-size:.95rem; font-weight:500; }
.acciones-proyecto{ display:flex; flex-wrap:wrap; gap:12px; margin:36px 0; }
.acciones-proyecto:empty{ display:none; }

.cta-proyecto{ margin:48px 0 0; text-align:left; }
.cta-proyecto h2{ font-size:1.25rem; margin-bottom:8px; }
.cta-proyecto p{ color:var(--ink-2); max-width:52ch; }

/* 9.6 Newsletter */
.newsletter-zona{ margin-top:48px; }
.newsletter-zona:empty{ display:none; }
.newsletter{ display:grid; gap:18px; }
.newsletter__titulo{ font-size:1.18rem; margin-bottom:6px; }
.newsletter p{ color:var(--ink-2); font-size:.96rem; max-width:56ch; margin:0; }
.newsletter__nota{ font-size:.82rem; color:var(--ink-3); margin:0; }
.newsletter--compacta{ background:var(--surface); border-color:var(--rule); }

/* 9.7 Listados y 404 */
.seccion--listado{ padding-top:48px; }
.seccion--listado h1{ font-size:clamp(1.8rem,4vw,2.5rem); }
.perdido{ min-height:62vh; display:flex; align-items:center; }
.perdido h1{ font-size:clamp(1.8rem,5vw,2.6rem); max-width:18ch; }
.perdido .boton{ margin-right:10px; }

@media (max-width:760px){
  .articulo{ padding-block:32px 52px; }
  .prosa--larga{ font-size:1.06rem; }
  .prosa--larga h2{ font-size:1.3rem; margin-top:36px; }
}


/* === 10. CAPA DE FONDO ==================================================
   Tres capas, todas decorativas y fijas a la ventana, así acompañan el
   scroll y el patrón se ve de la primera a la última sección:
     1. dos resplandores suaves que dan profundidad,
     2. una grilla de puntos que sostiene todo el largo de la página,
     3. la red de nodos (assets/img/red.svg), arriba a la derecha.
   En tema oscuro la red se aclara con un filtro en vez de cambiar el SVG.
   ======================================================================== */
body{ position:relative; }
.fondo-red{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 88% -8%, var(--glow-1), transparent 62%),
    radial-gradient(760px 540px at -5% 42%, var(--glow-2), transparent 62%),
    radial-gradient(circle at 1px 1px, var(--punto) 1px, transparent 0);
  background-size: auto, auto, 30px 30px;
}
.fondo-red::before{
  content:""; position:absolute; top:0; right:0;
  width:min(104%, 1040px); height:clamp(380px, 74vh, 720px);
  background:url("/assets/img/red.svg") top right / cover no-repeat;
  opacity:var(--red-op); filter:var(--red-filtro);
}

/* El orden de apilado: fondo (0) · contenido (1) · barra y pie (2) */
.pie{ position:relative; z-index:2; }
main{ position:relative; z-index:1; }

/* Estas zonas no llevan fondo propio: dejan ver la capa de atrás */
.hero,
.articulo,
.seccion--listado,
.perdido{ background:transparent; }

@media (max-width:760px){
  .fondo-red::before{ width:150%; right:-28%; height:clamp(320px, 56vh, 480px); opacity:calc(var(--red-op) * .85); }
  .fondo-red{ background-size: auto, auto, 24px 24px; }
}
@media print{ .fondo-red{ display:none; } }

.volver{ margin-top:48px; padding-top:24px; border-top:1px solid var(--rule); font-size:.95rem; }


/* === 11. IMÁGENES Y VIDEOS DENTRO DE LOS ARTÍCULOS ===================== */
.figura{ margin:32px 0; }
.figura img{
  width:100%; height:auto; border-radius:var(--r-media);
  border:1px solid var(--rule); background:var(--surface); margin:0;
}
.figura figcaption{
  font-size:.86rem; color:var(--ink-3);
  margin-top:10px; line-height:1.5; max-width:62ch;
}
.figura--video{ position:relative; }
.figura--video .video__marco{ aspect-ratio:16/9; border-radius:var(--r-media); overflow:hidden; }
.figura--video .video__marco img{ border:0; border-radius:0; height:100%; object-fit:cover; }
.figura--video iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r-media); display:block; }
.prosa--larga .figura img{ margin:0; }

.articulo__portada{ margin:0 auto 44px; max-width:1120px; }
.articulo__portada img{
  width:100%; height:auto; border-radius:var(--r-media); border:1px solid var(--rule);
}

/* Portada dentro de la tarjeta del blog */
.post__img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--borde); }
.ico--chica{ width:.85em; height:.85em; stroke:var(--acento); margin-left:2px; }

/* === 12. BORRADORES Y PROGRAMADOS (solo con --borradores) ============== */
.marca-retenido{
  align-self:flex-start; display:inline-block; margin-bottom:10px;
  font-size:.72rem; font-weight:600; color:var(--ocre);
  border:1px dashed var(--ocre); border-radius:2px; padding:2px 8px;
}
.aviso-retenido{
  font-size:.9rem; color:var(--ocre);
  background:var(--ocre-suave); border:1px dashed var(--ocre);
  border-radius:var(--r-chica); padding:12px 16px; margin:0 0 24px;
}
.aviso-retenido code{ font-size:.85em; }

/* === 13. NEWSLETTER: ELECCIÓN DE TEMA ================================= */
.newsletter__form{ display:block; }
.newsletter__fila{ display:flex; flex-wrap:wrap; gap:10px; }
.newsletter__fila input{
  flex:1 1 220px; font-family:var(--ui); font-size:.98rem; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--r-chica); padding:11px 14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.newsletter__fila input:focus{ border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.newsletter__rama{ border:0; padding:0; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:8px 10px; }
.newsletter__rama legend{ font-size:.86rem; color:var(--ink-2); margin-bottom:8px; padding:0; }
.newsletter__opcion{ position:relative; cursor:pointer; }
.newsletter__opcion input{ position:absolute; opacity:0; width:1px; height:1px; }
.newsletter__opcion span{
  display:inline-block; font-size:.88rem; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:var(--r-chica); padding:7px 12px;
  background:var(--surface-2); transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.newsletter__opcion input:checked + span{ border-color:var(--acento); color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento); }
.newsletter__opcion input:focus-visible + span{ outline:2px solid var(--acento); outline-offset:2px; }
.newsletter .newsletter__nota{ margin-top:14px; font-size:.82rem; line-height:1.5; color:var(--ink-3); }
.newsletter__nota a{ color:var(--ink-2); }

/* === 14. CONTACTO ===================================================== */
.contacto-opciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; }
.contacto-op{ display:flex; flex-direction:column; gap:6px; }
.contacto-op h3{ font-size:1.12rem; margin:0; }
.contacto-op p{ color:var(--ink-2); font-size:.95rem; margin:0 0 14px; }
.contacto-op .boton{ margin-top:auto; align-self:flex-start; }
.contacto-op .boton--solido .ico{ stroke:var(--cta-ink); }
.forms-embebido{
  width:100%; min-height:880px; border:1px solid var(--rule);
  border-radius:var(--r-media); background:#fff; margin-top:24px;
  color-scheme:light;   /* Forms se dibuja claro siempre: no lo forzamos a oscuro */
}

.vacio{ color:var(--ink-3); font-style:italic; }

@media (max-width:760px){
  .newsletter__fila input{ flex:1 1 100%; }
  .newsletter__fila .boton{ width:100%; justify-content:center; }
  .contacto-op .boton{ align-self:stretch; justify-content:center; }
}

.newsletter__iframe{ width:100%; min-height:420px; border:0; border-radius:var(--r-media); background:transparent; }

/* === 15. CLIENTES Y TESTIMONIOS ======================================== */
.clientes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:16px; margin:0 0 40px; align-items:center;
}
.cliente{
  display:flex; align-items:center; justify-content:center;
  height:84px; padding:14px 18px;
  border:1px solid var(--borde); border-radius:var(--r-media); background:var(--surface);
}
.cliente__logo{
  max-height:44px; max-width:100%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.78;
}
.cliente__nombre{ font-weight:600; font-size:.95rem; color:var(--ink-2); text-align:center; }

.grilla--testimonios{ grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
#clientes + .seccion{ border-top:1px solid var(--rule); }
.grilla--vacia{ display:none; }
.testimonio{ margin:0; display:flex; flex-direction:column; gap:18px; }
.testimonio__texto{ margin:0; padding:0; border:0; }
.testimonio__texto p{
  font-size:1.06rem; line-height:1.7; color:var(--ink); margin:0;
}
.testimonio__texto p::before{ content:"«"; color:var(--acento); margin-right:2px; }
.testimonio__texto p::after{ content:"»"; color:var(--acento); margin-left:2px; }
.testimonio__firma{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--borde);
  display:flex; flex-direction:column; gap:2px; font-size:.86rem;
}
.testimonio__persona{ font-weight:600; color:var(--ink); }
.testimonio__empresa{ color:var(--ink-3); }
.testimonio__caso{ margin-top:8px; display:inline-flex; align-items:center; gap:4px; font-size:.86rem; text-decoration:none; }
.testimonio__caso:hover{ text-decoration:underline; }

@media (max-width:760px){
  .clientes{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .cliente{ height:72px; }
}


/* === 16. CERTIFICACIONES: LISTA Y VENTANA EMERGENTE ====================
   La lista vive en «Dónde encontrarme» (Sobre mí). El botón abre un
   <dialog> nativo: no hace falta librería, el navegador se encarga del
   foco, del fondo y de la tecla Escape.                                 */
.certs{ display:flex; flex-direction:column; gap:0; }
.cert{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--borde);
}
.cert:last-child{ border-bottom:0; }
.cert__codigo{
  font-weight:650; font-size:.8rem; letter-spacing:.02em; min-width:66px;
  color:var(--acento); background:var(--acento-suave);
  padding:3px 8px; border-radius:var(--r-chica); text-align:center;
}
.cert__cuerpo{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.cert__nombre{ font-size:.92rem; color:var(--ink); text-decoration:none; }
a.cert__nombre:hover{ color:var(--acento); text-decoration:underline; }
a.cert__nombre .ico{ width:.8em; height:.8em; stroke:var(--acento); margin-left:4px; vertical-align:-0.05em; }
.cert__emisor{ font-size:.78rem; color:var(--ink-3); }
.cert--retirada .cert__codigo{ color:var(--ink-3); background:var(--surface-2); }
.cert--retirada .cert__nombre{ color:var(--ink-3); }
.cert--objetivo .cert__codigo{ color:var(--ocre); background:var(--ocre-suave); }

.certs__grupo{ margin-bottom:26px; }
.certs__grupo:last-child{ margin-bottom:0; }
.certs__emisor{
  font-size:.74rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 6px;
}

/* 16.1 El diálogo */
.modal{
  width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 720px);
  padding:0; border:1px solid var(--rule); border-radius:var(--r-grande);
  background:var(--surface); color:var(--ink); box-shadow:var(--sombra-alta);
  overflow:hidden;
}
.modal::backdrop{ background:rgba(8,12,20,.5); backdrop-filter:blur(3px); }
.modal[open]{ animation:modal-entra .24s var(--salida); }
.modal[open]::backdrop{ animation:modal-fondo .24s ease; }
@keyframes modal-entra{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes modal-fondo{ from{ opacity:0; } }

.modal__caja{ display:flex; flex-direction:column; max-height:inherit; }
.modal__alto{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 24px 0;
}
.modal__titulo{ font-size:1.22rem; margin:0; }
.modal__bajada{ font-size:.9rem; color:var(--ink-3); margin:6px 24px 18px; max-width:46ch; }
.modal__cuerpo{ padding:0 24px; overflow-y:auto; flex:1; }
.modal__pie{
  padding:18px 24px 24px; margin-top:4px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.modal__pie .boton{ flex:1 1 auto; justify-content:center; }
.modal__cerrar{
  flex:none; display:grid; place-items:center; width:34px; height:34px; padding:0;
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-chica);
  cursor:pointer; color:var(--ink-2); transition:background-color .18s ease, border-color .18s ease;
}
.modal__cerrar:hover{ background:var(--acento-suave); border-color:var(--acento); }
.modal__cerrar .ico{ width:16px; height:16px; stroke:var(--ink-2); }

/* 16.2 El botón que la abre */
.abre-certs{ justify-content:space-between; }
.abre-certs .cuenta{
  font-size:.78rem; font-weight:650; color:var(--acento);
  background:var(--acento-suave); padding:2px 8px; border-radius:999px;
}


/* === 17. TRAYECTORIA Y SKILLS, UNA AL LADO DE LA OTRA ================== */
#skills{ scroll-margin-top:calc(var(--barra-alto) + 14px); }
.columna-skills{ position:sticky; top:calc(var(--barra-alto) + 24px); }
.radar-zona{ gap:16px; }
.radar-caja{ padding:16px; }

@media (max-width:980px){
  .dos-columnas--par{ grid-template-columns:1fr; gap:56px; }
  .columna-skills{ position:static; }
}


/* === 18. MOVIMIENTO ====================================================
   Dos cosas: los bloques entran al entrar en pantalla (lo activa main.js
   agregando .revelado) y las páginas se cruzan con View Transitions en
   los navegadores que lo soportan. Todo se apaga con prefers-reduced-motion.
   ======================================================================== */
@view-transition{ navigation: auto; }

::view-transition-old(root){ animation:vt-sale .18s ease both; }
::view-transition-new(root){ animation:vt-entra .28s var(--salida) both; }
@keyframes vt-sale { to  { opacity:0; } }
@keyframes vt-entra{ from{ opacity:0; transform:translateY(8px); } }

/* La barra y el fondo no se cruzan: quedan quietos entre página y página */
.barra{ view-transition-name: barra; }
.fondo-red{ view-transition-name: fondo; }

/* Reveal al hacer scroll. Sin JS nada se oculta: la clase js la pone el
   script del <head>, así que si falla el contenido igual se ve. */
/* --dir la pone main.js: 1 si el bloque quedó abajo de la pantalla, -1 si
   quedó arriba. Así siempre entra moviéndose hacia el centro. */
:root.js [data-reveal]{
  opacity:0; transform:translateY(calc(18px * var(--dir, 1)));
  transition:opacity .5s var(--salida), transform .5s var(--salida);
  transition-delay:var(--retraso, 0ms);
}
:root.js [data-reveal].revelado{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  :root.js [data-reveal]{ opacity:1; transform:none; transition:none; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
  .modal[open]{ animation:none; }
}


/* === 19. AJUSTES FINOS ================================================= */
/* Enlaces de las redes: el ícono se tiñe al pasar por encima */
.redes a{ border-radius:var(--r-chica); transition:color .18s ease, background-color .18s ease, padding-left .18s ease; }
.redes a:hover{ background:var(--acento-suave); padding-left:12px; }
.redes a .ico{ transition:stroke .18s ease; }

/* Servicios: la tarjeta del medio no se destaca sola, pero todas suben */
.servicio__titulo{ letter-spacing:-0.02em; }
.servicio__publico{ font-size:.82rem; letter-spacing:.01em; }

/* Preguntas frecuentes: un poco más de aire y una línea de acento */
.faq-item{ transition:border-color .2s ease; }
.faq-item.abierto{ border-bottom-color:var(--acento); }
.faq-pregunta{ font-weight:550; }
.faq-pregunta:hover{ color:var(--acento); }
.faq-pregunta .ico{ stroke:var(--ink-3); }
.faq-item.abierto .faq-pregunta .ico{ stroke:var(--acento); }

/* Contacto: la tarjeta principal se distingue del resto */
.contacto-op--principal{ border-color:var(--acento); box-shadow:var(--sombra); }

/* El aviso de que una página está en el otro idioma */
.aviso-idioma{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:.88rem; color:var(--ink-2);
  background:var(--acento-suave); border:1px solid var(--rule);
  border-radius:var(--r-chica); padding:11px 16px; margin:0 0 28px;
}
.aviso-idioma .ico{ stroke:var(--acento); }
.aviso-idioma a{ font-weight:600; }

@media (max-width:760px){
  .barra__caja{ gap:8px; }
  .marca__rol{ display:none; }
  .modal{ width:calc(100vw - 20px); max-height:86vh; }
  .modal__alto,.modal__cuerpo,.modal__pie{ padding-inline:18px; }
  .modal__bajada{ margin-inline:18px; }
  .seccion{ padding-block:56px; }
  .hero__pruebas{ grid-template-columns:repeat(3, 1fr); gap:14px; }
  .hero__pruebas strong{ font-size:1.22rem; }
}


/* === 20. SERVICIOS CON OFERTAS EXTERNAS ================================
   Debajo de lo que incluye el servicio pueden ir enlaces a ofertas
   concretas: el gig de Fiverr, el perfil de Superprof. Son secundarios
   respecto del botón, así que van más chicos y sin caja.             */
.servicio__enlaces{
  display:flex; flex-direction:column; gap:2px;
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--borde);
}
.servicio__enlace{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  font-size:.86rem; color:var(--ink-2); text-decoration:none;
  transition:color .18s ease, gap .18s ease;
}
.servicio__enlace:hover{ color:var(--acento); gap:11px; }
.servicio__enlace .ico{ width:.9em; height:.9em; stroke:var(--acento); }
.servicio__pie{ margin-top:auto; }


/* === 21. VENTANA DE COMUNIDAD =========================================
   Reusa el .modal de las certificaciones, pero más ancho: adentro va una
   línea de tiempo completa, no una lista de dos columnas.             */
.modal--ancho{ width:min(760px, calc(100vw - 32px)); }
.linea--modal{ margin-bottom:28px; }
.linea--modal:last-child{ margin-bottom:0; }
.linea--modal .linea-item{ padding-bottom:20px; }
.linea--modal .linea-titulo{ font-size:.98rem; }
.linea--modal .linea-resumen{ font-size:.9rem; }
/* Dentro de la ventana los puntos se apoyan en el fondo de la tarjeta */
.modal .linea-punto{ background:var(--surface); }

/* El botón que abre la ventana va alineado con los demás de la sección */
.seccion__cierre .abre-certs{ width:auto; justify-content:flex-start; gap:12px; }