/* ============================================================
   IT CAPITAL® — PÁGINA DE BOLETÍN  ·  rediseño ronda 13
   ------------------------------------------------------------
   Instrucción de la dirección, literal:

     "quita la barra lateral y lleva esas opciones abajo … la paleta de
      colores y los botones se ven disonantes con el resto de los
      contenidos … el héroe y toda la atención la debe tener la imagen
      del newsletter, la imagen de fondo, el encuadre blanco con el
      texto limpio y el resto de los elementos minimalistas construido
      en orden como en el boletín #32 y 33"

   Tres decisiones que salen de ahí y que conviene no deshacer sin motivo:

   1. NO HAY COLUMNA LATERAL. Antes había una a la derecha con cajas de
      suscripción, agenda y patrocinador. Robaba ancho al artículo y, al
      ir en la paleta neón del sitio, chocaba con el interior del boletín,
      que es sobrio y sobre blanco. Ahora esas opciones van al pie, en una
      sola fila, después de leer.

   2. LA PALETA DE DENTRO MANDA. El marco exterior sigue siendo oscuro
      —es el sitio—, pero todo lo que toca al artículo usa los colores
      corporativos impresos: azul 265C, turquesa 7456C y amarillo 128C.
      Nada de neón dentro del encuadre blanco.

   3. LA HOJA BLANCA ES EL PROTAGONISTA. Ancho de lectura fijo, tipografía
      de cuerpo generosa, y el HTML de correo que va dentro (tablas
      anidadas con estilos en línea) se domestica al final de esta hoja
      en vez de reescribirlo: reescribirlo rompería 66 páginas a la vez.
   ============================================================ */
:root{
  /* Corporativos impresos — los del manual de identidad */
  --navy:#413D61;      /* Pantone 265C */
  --teal:#58C1B4;      /* Pantone 7456C */
  --yellow:#F1D666;    /* Pantone 128C */
  --navy-d:#2C2942;
  /* Marco exterior (el sitio). Los neón siguen aquí porque el índice de
     Prensa comparte esta hoja y su titular se pinta con un degradado que los
     usa: al quitarlos en el rediseño, el degradado quedaba inválido y el
     título "Prensa" desaparecía —el texto es transparente por diseño y sin
     fondo válido no se veía nada. */
  --neon-teal:#4FE3D0; --neon-green:#8FE64A; --neon-yellow:#FFE14D;
  --bg:#050B14; --bg2:#0A1120; --line:rgba(255,255,255,.10);
  --ink:#fff; --dim:#c3ccd8; --mute:#8590a3;
  /* Dentro de la hoja blanca */
  --papel:#fff; --texto:#1B2130; --texto2:#4A5468; --raya:#E3E7EE;
  --t:'Archivo','Inter',system-ui,sans-serif;
  --b:'Open Sans',system-ui,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.boletin{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--b);
  line-height:1.65;overflow-x:hidden;
}
img{max-width:100%;height:auto}

/* ── FONDO ────────────────────────────────────────────────────────────
   La imagen del propio boletín, fija, a pantalla completa. Se desenfoca
   y se oscurece porque su trabajo es dar atmósfera, no competir con el
   texto: sobre una foto nítida, la hoja blanca se lee como un recorte
   pegado encima. Los boletines 30 y 31 traían su propio fondo a 1920px
   y se respeta.                                                        */
.bl-fondo{
  position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:blur(30px) saturate(112%);transform:scale(1.14);opacity:.34;pointer-events:none;
}
.bl-fondo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,11,20,.70),rgba(5,11,20,.94))}

/* ── CABECERA ─────────────────────────────────────────────────────── */
.bl-cab{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding:13px clamp(16px,5vw,44px);
  background:rgba(5,11,20,.74);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* El logotipo original, a su proporción real (1030×225). Nada de recortes
   redondos: se muestra completo, sólo escalado por la altura. */
.bl-marca{display:flex;align-items:center;text-decoration:none}
.bl-marca img{height:30px;width:auto;display:block}
@media (max-width:520px){ .bl-marca img{height:24px} }
.bl-nav{display:flex;gap:9px;flex-wrap:wrap}
.bl-nav a{color:var(--dim);text-decoration:none;font-family:var(--m);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);
  padding:9px 14px;border-radius:2px;transition:.22s;min-height:40px;display:flex;align-items:center}
.bl-nav a:hover{color:#fff;border-color:var(--teal)}
.bl-idioma{color:var(--teal)!important;border-color:rgba(88,193,180,.5)!important}

/* ── COLUMNA ÚNICA ────────────────────────────────────────────────── */
.bl-main{
  position:relative;z-index:2;max-width:920px;margin:0 auto;
  padding:clamp(22px,4.5vh,46px) clamp(14px,4vw,28px) 56px;
}
.bl-kicker{font-family:var(--m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin:0 0 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bl-kicker span{color:var(--yellow)}
.bl-kicker a{color:var(--mute);text-decoration:none}
.bl-kicker a:hover{color:var(--teal)}

/* ── HOJA BLANCA ──────────────────────────────────────────────────── */
.bl-hoja{
  background:var(--papel);color:var(--texto);border-radius:3px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06);
}
/* Héroe: a sangre dentro de la hoja, sin margen. Es lo primero que se ve
   y lo que la dirección pidió que mandara. */
/* ── HÉROE ────────────────────────────────────────────────────────────
   RONDA 23 · «el boletín #28 y #14 tienen la imagen del header cortada».

   La caja estaba fijada a 16/8 —o sea 2.00— y `object-fit:cover` recorta
   al centro lo que no cabe. Medí los 66 archivos: NINGUNO es 2.00. Se
   estaban recortando todos. Los peores:

       #14   768×512   = 1.50   se perdía el 25 % de la altura
       #28   537×588   = 0.91   se perdía el 55 %
       #06   560×710   = 0.79   se perdía el 60 %

   Ahora cada página declara la proporción REAL de su imagen en
   `--heroe-prop`, leída del propio archivo por el guion, y la caja la
   respeta: recorte cero. El 16/8 queda sólo como respaldo por si alguna
   página llegara sin el dato.                                          */
.bl-heroe{margin:0;display:block;position:relative;overflow:hidden}
.bl-heroe img{display:block;width:100%;
  aspect-ratio:var(--heroe-prop,16/8);object-fit:cover}

/* Las verticales son otro problema: a todo el ancho de la hoja, una foto
   más alta que ancha ocuparía media pantalla antes del titular. Ésas se
   muestran ENTERAS, centradas, sobre una copia desenfocada de sí mismas
   —el recurso del cine para material que no es del formato— en una caja
   de proporción cómoda. Se ve la imagen completa y la página respira. */
.bl-heroe[data-forma="alta"]{aspect-ratio:16/10;background:#0A1120}
.bl-heroe[data-forma="alta"]::before{
  content:'';position:absolute;inset:0;
  background-image:var(--heroe-fondo);background-size:cover;background-position:center;
  filter:blur(26px) saturate(115%) brightness(.55);transform:scale(1.2);
}
.bl-heroe[data-forma="alta"] img{
  position:relative;z-index:1;
  width:auto;max-width:100%;height:100%;margin:0 auto;
  aspect-ratio:auto;object-fit:contain;
}
.bl-heroe figcaption{
  font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto2);padding:10px clamp(20px,5vw,54px) 0;
}
.bl-titulo{
  font-family:var(--t);font-weight:900;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(1.55rem,4.4vw,2.5rem);color:var(--navy);
  margin:clamp(18px,3vw,26px) clamp(20px,5vw,54px) 0;
}
.bl-titulo::after{content:'';display:block;width:64px;height:4px;background:var(--teal);
  margin-top:18px;border-radius:2px}

/* El cuerpo es HTML de correo. No se reescribe: se acota. */
.bl-cuerpo{padding:clamp(16px,3vw,26px) clamp(20px,5vw,54px) clamp(26px,5vw,44px)}
.bl-cuerpo,.bl-cuerpo *{max-width:100%}
.bl-cuerpo table{width:100%!important;max-width:100%!important;
  border-collapse:collapse;table-layout:fixed}
.bl-cuerpo td,.bl-cuerpo th{word-break:break-word}
/* Los editores de correo (BeeFree, Doppler, Mailchimp) maquetan con divs
   anidados que fijan 620 px y se centran con margin:0 auto. Metidos en la
   hoja blanca, el artículo quedaba en una columnita estrecha en medio de un
   gran vacío. Aquí se sueltan esos anchos: el ancho de lectura lo decide la
   hoja, no el correo. */
.bl-cuerpo div,.bl-cuerpo table,.bl-cuerpo td,.bl-cuerpo tbody,.bl-cuerpo tr{
  min-width:0!important;max-width:100%!important;width:auto!important;
  float:none!important}
.bl-cuerpo .block-grid,.bl-cuerpo .col,.bl-cuerpo .col_cont,
.bl-cuerpo [class*="num12"],.bl-cuerpo [class*="nl-container"]{
  display:block!important;width:100%!important;max-width:100%!important;margin:0!important}
.bl-cuerpo table{width:100%!important}

/* Los correos traen fondos oscuros y colores de plantilla en línea. Dentro
   de la hoja blanca eso se veía como parches. Se neutraliza. */
.bl-cuerpo table,.bl-cuerpo td,.bl-cuerpo th,.bl-cuerpo div,.bl-cuerpo tr{
  background-image:none!important;background-color:transparent!important}
.bl-cuerpo p,.bl-cuerpo td,.bl-cuerpo span,.bl-cuerpo div,.bl-cuerpo li{
  font-family:var(--b)!important;color:var(--texto)!important;
  font-size:1.03rem!important;line-height:1.72!important}
/* El correo centraba y justificaba los párrafos dentro de celdas estrechas.
   A ancho de lectura eso deja ríos de espacio y renglones sueltos en el
   centro. Se alinea a la izquierda, que es como se lee un artículo. */
.bl-cuerpo p,.bl-cuerpo td,.bl-cuerpo div,.bl-cuerpo li,.bl-cuerpo span{
  text-align:left!important}
.bl-cuerpo td{padding-left:0!important;padding-right:0!important}
.bl-cuerpo h1,.bl-cuerpo h2,.bl-cuerpo h3,.bl-cuerpo h4{
  font-family:var(--t)!important;color:var(--navy)!important;font-weight:800!important;
  letter-spacing:-.015em;line-height:1.2;margin:1.6em 0 .5em}
.bl-cuerpo h1{font-size:1.45rem!important}
.bl-cuerpo h2{font-size:1.25rem!important}
.bl-cuerpo h3{font-size:1.08rem!important}
.bl-cuerpo a{color:var(--navy)!important;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--teal);text-decoration-thickness:2px}
.bl-cuerpo a:hover{color:var(--teal)!important}
.bl-cuerpo img.bl-img{display:block;width:100%;height:auto;margin:26px 0;border-radius:2px}
.bl-cuerpo hr{border:0;border-top:1px solid var(--raya);margin:28px 0}
.bl-cuerpo blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid var(--yellow);
  font-style:italic;color:var(--texto2)!important}

/* Botones que venían dentro del correo (descargar el artículo en PDF, etc.).
   Traían el azul antiguo #04537f y esquinas de 25 px: al lado de los botones
   nuevos del pie se leían como de otra marca. Se igualan a la paleta
   corporativa sin tocar los enlaces normales del texto. */
.bl-cuerpo a[style*="background-color"],.bl-cuerpo a[style*="background:"]{
  background:var(--navy)!important;color:#fff!important;border:2px solid var(--navy)!important;
  border-radius:2px!important;text-decoration:none!important;
  font-family:var(--t)!important;font-weight:700!important;
  padding:11px 22px!important;display:inline-block!important;margin:6px 0!important}
.bl-cuerpo a[style*="background-color"] *,.bl-cuerpo a[style*="background:"] *{
  color:#fff!important;font-family:var(--t)!important;font-size:.9rem!important;
  padding:0!important;line-height:1.3!important}
.bl-cuerpo a[style*="background-color"]:hover{background:var(--navy-d)!important;
  border-color:var(--navy-d)!important}

/* ── VÍDEO ────────────────────────────────────────────────────────────
   Carátula local; el reproductor de YouTube sólo entra al primer clic. */
.bl-video{padding:0 clamp(20px,5vw,54px) clamp(26px,5vw,40px)}
.bl-video h2{font-family:var(--t);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto2);font-weight:700;margin:0 0 12px}
.yt-lite{position:relative;display:block;width:100%;aspect-ratio:16/9;cursor:pointer;
  background:#0A1120;border-radius:3px;overflow:hidden}
.yt-lite img.yt-thumb{width:100%;height:100%;object-fit:cover;display:block}
.yt-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;inset:0;pointer-events:none}
.yt-lite:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.bl-fine{font-family:var(--m);font-size:.66rem;letter-spacing:.06em;color:var(--texto2);
  margin:10px 0 0}
/* Salida a YouTube: siempre presente bajo el reproductor, para que ningún
   vídeo pueda quedar sin forma de verse. */
.yt-salida{color:var(--navy);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--teal);text-underline-offset:3px}
.yt-salida:hover{color:var(--teal)}
.yt-nota{opacity:.8}

/* ── DESCARGA DEL PDF ─────────────────────────────────────────────────
   Va debajo de las referencias, dentro de la hoja blanca. Se marca con el
   turquesa de marca porque es la única acción del artículo: todo lo demás
   —suscribirse, agendar, aplicar— vive en el pie. */
.bl-descarga{padding:0 clamp(20px,5vw,54px) clamp(28px,5vw,40px)}
.bl-descarga h2{font-family:var(--t);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto2);font-weight:700;margin:0 0 6px}
.bl-descarga p{font-size:.9rem;color:var(--texto2);margin:0 0 14px;line-height:1.55}
.bl-pdf-btn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;margin-bottom:9px;text-decoration:none;border-radius:2px;
  background:var(--navy);color:#fff;border:2px solid var(--navy);transition:.2s;
  font-family:var(--t);font-weight:700;font-size:.95rem;
}
.bl-pdf-btn::before{content:'';flex:0 0 auto;width:18px;height:22px;
  background:currentColor;
  -webkit-mask:var(--ico-pdf) center/contain no-repeat;mask:var(--ico-pdf) center/contain no-repeat}
.bl-pdf-btn > span:first-child{flex:1}
.bl-pdf-btn:hover{background:var(--navy-d);border-color:var(--navy-d)}
.bl-pdf-btn.ghost{background:transparent;color:var(--navy);border-color:var(--raya)}
.bl-pdf-btn.ghost:hover{border-color:var(--teal);background:rgba(88,193,180,.10)}
.bl-pdf-peso{font-family:var(--m);font-size:.68rem;letter-spacing:.08em;opacity:.72;
  font-weight:400;white-space:nowrap}
:root{--ico-pdf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2 4 4h-4V4zM8 13h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E")}

/* ── GALERÍA ──────────────────────────────────────────────────────────
   Los .docx del 32 y del 33 traen mucho más material gráfico que el correo
   (portadas de prensa, mapas, gráficos). En vez de tirarlo, se publica
   ordenado al final: es contenido real del artículo y además da a Google
   imágenes propias que indexar. */
.bl-galeria{padding:0 clamp(20px,5vw,54px) clamp(28px,5vw,42px)}
.bl-galeria h2{font-family:var(--t);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto2);font-weight:700;margin:0 0 14px}
.bl-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.bl-rejilla img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  border:1px solid var(--raya);background:#F4F6F9}

/* ── AVISO LEGAL ──────────────────────────────────────────────────── */
.bl-legal{padding:0 clamp(20px,5vw,54px) clamp(30px,5vw,44px)}
.bl-legal h3{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto2);margin:0 0 8px;font-weight:500}
.bl-legal p{font-size:.86rem!important;color:var(--texto2)!important;margin:0;
  border-top:1px solid var(--raya);padding-top:14px;line-height:1.65!important}

/* ── OPCIONES AL PIE ──────────────────────────────────────────────────
   Lo que antes era la columna lateral. Va después del artículo, en la
   paleta corporativa impresa, sobre blanco, para que no rompa con lo que
   se acaba de leer.                                                    */
.bl-acciones{
  margin-top:18px;background:var(--papel);color:var(--texto);border-radius:3px;
  padding:clamp(22px,4vw,34px) clamp(20px,5vw,54px);
  box-shadow:0 20px 60px rgba(0,0,0,.42);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,3vw,30px);
}
.bl-bloque h3{font-family:var(--t);font-size:.98rem;font-weight:800;color:var(--navy);
  margin:0 0 4px;letter-spacing:-.01em}
.bl-bloque p{font-size:.84rem;color:var(--texto2);margin:0 0 14px;line-height:1.55}
.bl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 20px;width:100%;margin-bottom:9px;
  font-family:var(--t);font-weight:700;font-size:.86rem;letter-spacing:.01em;
  text-decoration:none;border-radius:2px;transition:.2s;
  background:var(--navy);color:#fff;border:2px solid var(--navy);
}
.bl-btn:hover{background:var(--navy-d);border-color:var(--navy-d)}
.bl-btn.ghost{background:transparent;color:var(--navy);border-color:var(--raya)}
.bl-btn.ghost:hover{border-color:var(--teal);color:var(--navy);background:rgba(88,193,180,.10)}
.bl-btn.acento{background:var(--teal);border-color:var(--teal);color:#10231F}
.bl-btn.acento:hover{background:#46AFA2;border-color:#46AFA2}
/* RONDA 22 · AQUÍ ESTABA EL BOTÓN «INVISIBLE».
   Esta regla decía `.bl-patro a{color:var(--navy)}` a secas. Como va
   DESPUÉS de `.bl-btn{color:#fff}` y tiene la misma especificidad, ganaba
   ella: todo enlace dentro del bloque de patrocinio se pintaba de azul
   marino — incluidos los botones, que ya tienen fondo azul marino. Azul
   sobre azul. Lo único que quedaba visible era el subrayado amarillo que
   añaden las dos líneas de abajo, y por eso el botón se veía como una caja
   azul con una raya amarilla dentro y nada más.

   El `:not(.bl-btn)` deja la regla donde hace falta —los enlaces de texto
   del bloque— y fuera de donde rompía. */
.bl-patro a:not(.bl-btn){color:var(--navy);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:3px}
/* Y por si alguna regla futura vuelve a intentarlo: el texto de un botón
   sólido se decide en el botón, no en su contenedor. */
.bl-patro .bl-btn{color:#fff;text-decoration:none}
.bl-patro .bl-btn.ghost{color:var(--navy)}
.bl-patro small{display:block;font-family:var(--m);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto2);margin-bottom:6px}

/* ── PIE ──────────────────────────────────────────────────────────── */
.bl-pie{
  position:relative;z-index:2;border-top:1px solid var(--line);margin-top:10px;
  padding:26px clamp(16px,5vw,44px) 40px;display:flex;gap:16px;flex-wrap:wrap;
  justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--mute);max-width:1360px;margin-inline:auto;
}
.bl-pie a{color:var(--dim);text-decoration:none}
.bl-pie a:hover{color:var(--teal)}
.bl-social{display:flex;gap:16px;flex-wrap:wrap}

/* ── MÓVIL ────────────────────────────────────────────────────────────
   El correo original fija anchos en píxeles (600, 640…). Sin esto, en un
   teléfono la hoja blanca se desbordaba y aparecía barra horizontal. */
@media (max-width:820px){
  .bl-cuerpo table,.bl-cuerpo td,.bl-cuerpo img{width:100%!important;height:auto!important;
    max-width:100%!important;display:block}
  .bl-cuerpo td{padding-left:0!important;padding-right:0!important}
  .bl-heroe img{aspect-ratio:16/10}
  .bl-rejilla{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bl-fondo{filter:none;transform:none;opacity:.16}
}

/* ══════════════════════════════════════════════════════════════════════
   RONDA 15 — pantalla de carga, opciones del pie y titular
   ══════════════════════════════════════════════════════════════════════ */

/* ── PANTALLA DE CARGA ─────────────────────────────────────────────────
   El símbolo gira EN CONTRA DE LAS MANECILLAS, como se pidió y como gira
   el fractal del hero: es el mismo gesto de marca, no un spinner cualquiera.

   La regla de oro está al final del bloque: a los 6 segundos la capa se
   retira SOLA, por CSS, sin depender de ningún guión. Una pantalla de carga
   que se queda pegada es peor que la espera que venía a resolver.        */
#itcap-carga{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#050B14;
  animation:cgSeguro 0s linear 6s forwards;
}
#itcap-carga.fuera{opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s .55s}
.cg-caja{text-align:center;display:grid;justify-items:center;gap:0}
html.cargando .cursor-fx{opacity:0!important}
.cg-simbolo{
  width:96px;height:96px;display:block;object-fit:contain;
  /* −360°: sentido antihorario */
  animation:cgGiro 5.5s linear infinite;
}
#itcap-carga.quieto .cg-simbolo{animation:none}
@keyframes cgGiro{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
.cg-nombre{
  font-family:var(--font-title,'Archivo',system-ui,sans-serif);
  font-weight:900;letter-spacing:-.02em;font-size:1.5rem;color:#fff;
  margin:26px 0 0;line-height:1.1;
}
.cg-c{font-size:.55em;vertical-align:super;font-weight:700;margin-left:.06em}
.cg-lema{
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:#4FE3D0;margin:10px 0 0;
}
.cg-tm{font-size:.7em;vertical-align:super;letter-spacing:0}
.cg-barra{
  display:block;width:132px;height:2px;margin-top:26px;
  background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px;
}
.cg-barra i{
  display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,#4FE3D0,#8FE64A);
  animation:cgBarra 1.25s ease-in-out infinite;
}
@keyframes cgBarra{
  0%{transform:translateX(-110%)} 100%{transform:translateX(360%)}
}
#itcap-carga.quieto .cg-barra i{animation:none;width:100%}
/* Mientras la capa está puesta, no se puede hacer scroll por debajo. */
html.cargando,html.cargando body{overflow:hidden}
/* Red de seguridad SIN JavaScript: pasados 6 s la capa desaparece sí o sí. */
@keyframes cgSeguro{ to{opacity:0;visibility:hidden;pointer-events:none} }
@media (prefers-reduced-motion:reduce){
  .cg-simbolo,.cg-barra i{animation:none}
}

/* ── OPCIONES DEL PIE ──────────────────────────────────────────────────
   Movimiento y traductor, escritos con palabras y dentro del pie: ya no
   flotan encima del contenido. Tono del pie, sin gritar.                */
.pie-opciones{
  display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;
  width:100%;padding-top:16px;margin-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.pie-op{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute,#8590a3);transition:color .22s;
  min-height:34px;
}
.pie-op:hover,.pie-op:focus-visible{color:#fff}
.pie-op:focus-visible{outline:2px solid var(--neon-teal,#4FE3D0);outline-offset:4px}
.pie-op-punto{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--ink-mute,#8590a3);transition:.25s;
}
.pie-op-mov.on .pie-op-punto{
  background:var(--neon-teal,#4FE3D0);box-shadow:0 0 10px var(--neon-teal,#4FE3D0);
}
/* RONDA 22 · el traductor del pie se retiró por completo (ver la cabecera
   de opciones-pie.js). Con él se van su globo terráqueo, el selector de
   Google y los parches que hacían falta para domar la barra que inyectaba.
   Se deja UNA regla de las suyas, a propósito: */
/* `body{top:0}` neutraliza el desplazamiento que dejaba la barra de Google
   en el navegador de quien tenga todavía la cookie puesta, durante el
   instante que va desde que pinta la página hasta que el guion la borra y
   recarga. Cuesta una línea y evita un salto visible. */
body{top:0!important}
.skiptranslate iframe{display:none!important}

/* ── MOVIMIENTO APAGADO ────────────────────────────────────────────────
   Cuando el visitante apaga el movimiento hay que apagarlo DE VERDAD: no
   sólo los lienzos, también las transiciones y las revelaciones al hacer
   scroll. Antes se apagaban a medias y por eso parecía que el interruptor
   no hacía nada.                                                        */
html.sin-movimiento *,
html.sin-movimiento *::before,
html.sin-movimiento *::after{
  animation-duration:.001s!important;
  animation-iteration-count:1!important;
  transition-duration:.001s!important;
  scroll-behavior:auto!important;
}
html.sin-movimiento .clients-set{animation:none!important}
html.sin-movimiento .section{opacity:1!important;transform:none!important}

/* ── TITULAR DEL HERO ──────────────────────────────────────────────────
   Seguía perdiendo milímetros en los bordes. La ronda anterior le dio aire
   arriba y abajo, pero el recorte también muerde a los LADOS cuando la
   última letra es redonda o lleva un remate que se sale de su caja —la "s"
   de Experts y la "T" de The—, y el ™ en superíndice sobresale por arriba
   del ancho de línea. Se amplía el aire horizontal y se deja que el bloque
   desborde su caja sin recortarse.                                       */
.hero h1,
.hero h1 .grad,
.hero h1 .split,
.hero h1 .ch{
  padding-left:.08em;padding-right:.14em;
  margin-left:-.08em;margin-right:-.14em;
  overflow:visible!important;
}
.hero h1{overflow:visible!important}
.hero,.hero .container,.hero-inner{overflow:visible}
.hero h1 .tm{
  /* el ™ vuela por encima de la línea; sin sitio propio, se recortaba */
  padding-top:.35em;margin-top:-.35em;display:inline-block;
}

/* ══════════════════════════════════════════════════════════════════════
   RONDA 16 — título de clientes centrado y traductor que se puede apagar
   ══════════════════════════════════════════════════════════════════════ */

/* ── TÍTULO DE "EMPRESAS QUE YA CONFÍAN EN NOSOTROS" ───────────────────
   Reportado: el título no está centrado.

   La causa no estaba en la sección de clientes, que pide `margin:auto`
   correctamente, sino en una regla anterior:

       body.home .section h2 { padding-left:.05em; margin-left:-.05em; }

   Ese par se puso para que los títulos con degradado no perdieran el
   remate de la primera letra. Funciona en un título alineado a la
   izquierda, pero en uno CENTRADO el `margin-left` deja de ser `auto` y
   el centrado se rompe: el bloque se pega al margen izquierdo.

   Aquí se le devuelve el centrado a los títulos que lo piden, y el aire
   óptico se reparte a los DOS lados para que siga sin recortarse.       */
body.home .clients-section h2,
.clients-section h2{
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:.05em;
  padding-right:.05em;
  text-align:center;
}
.clients-section .section-tag{text-align:center}

/* RONDA 22 · aquí vivían las reglas del botón de apagado del traductor.
   Se fueron con él: el widget que intentaban domar ya no se carga. */


/* --- PUNTO 8 · el espacio de patrocinio libre ---------------------------
   Se distingue del patrocinador real con un borde punteado: comunica «aquí
   cabe algo» sin gritar. Los botones heredan el estilo de los del bloque
   de contacto, para no introducir un cuarto tipo de botón en la página. */
.bl-patro-libre{
  border:1px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.02);
}
.bl-patro-libre h3{ opacity:.95; }
.bl-patro-libre p{ margin-bottom:14px; }
.bl-patro-libre .bl-btn{ margin-right:8px; margin-top:4px; }


/* ══════════════════════════════════════════════════════════════════════
   RONDA 22 · TIPOGRAFÍA DEL BOLETÍN
   ----------------------------------------------------------------------
   Instrucción, literal: «ve que en el contenido el texto se pega mucho a
   la izquierda, trata de justificarlo y centrar».

   Lo que estaba pasando, medido: la hoja blanca tiene 920 px y el cuerpo
   ocupaba unos 810 px útiles. A 1.03rem eso son ~95 caracteres por
   renglón. La medida cómoda de lectura está entre 60 y 75: por encima de
   ahí el ojo pierde el principio del renglón siguiente y la página se lee
   como un bloque pegado al borde izquierdo de una hoja demasiado ancha.
   No era un margen mal puesto: era el ancho de línea.

   Se hacen tres cosas y ninguna es decorativa:

   1. Se acota la columna a 66ch y se CENTRA dentro de la hoja. El titular,
      el héroe y el pie siguen a todo el ancho — el contraste entre la
      columna estrecha de texto y los elementos a sangre es lo que da el
      aire de publicación impresa.

   2. Se JUSTIFICA, con partición de palabras activada. Justificar sin
      `hyphens:auto` es el error clásico: deja ríos de espacio en blanco
      dentro del párrafo, y en español, que tiene palabras largas, se nota
      mucho más que en inglés. Con partición, el renglón cierra sin
      estirar los espacios.

   3. Ritmo vertical coherente: un solo valor de separación entre
      párrafos, uno mayor antes de un encabezado, y las figuras a sangre
      de la columna con su propia holgura.
   ══════════════════════════════════════════════════════════════════════ */
/* El `!important` no es pereza, y conviene dejar escrito por qué está.
   Más arriba de esta hoja, el bloque que domestica el HTML de correo dice:

       .bl-cuerpo div, .bl-cuerpo table, … { max-width:100%!important;
                                             width:auto!important }

   `.cuerpo-boletin` es un `div`, así que caía ahí dentro y la columna se
   quedaba a todo el ancho de la hoja. Medido en el navegador: 756 px en vez
   de los ~548 que pide la medida de lectura. Contra un `!important` sólo
   vale otro; la alternativa era aflojar aquella regla, que sigue haciendo
   falta para las tablas de correo de los boletines que aún las traen. */
.bl-cuerpo .cuerpo-boletin{
  max-width:66ch!important;
  width:auto!important;
  margin-inline:auto!important;
}
.bl-cuerpo .cuerpo-boletin p{
  text-align:justify!important;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  /* Sin esto, el navegador parte palabras dejando dos letras colgando al
     final del renglón, que en español se lee fatal. Mínimo 6 letras en la
     palabra, 3 antes del guion y 3 después. */
  hyphenate-limit-chars:6 3 3;
  -webkit-hyphenate-limit-chars:6 3 3;
  /* Reparte mejor la última línea para que no quede una palabra sola.
     Los navegadores que no lo entienden lo ignoran. */
  text-wrap:pretty;
  margin:0 0 1.15em;
}
/* NOTA COMPROBADA, para quien venga después: la partición de palabras
   depende de que el navegador traiga el diccionario del idioma. El `lang`
   está bien puesto en las 66 páginas —`es` en unas, `en` en otras, lo
   verifiqué— y Chrome, Safari y Firefox de escritorio y móvil traen esos
   dos diccionarios. El Chromium sin interfaz con el que se hacen las
   capturas de este proyecto NO los trae: lo medí comparando la altura de
   una misma caja con `hyphens:none` y con `hyphens:auto` y da el mismo
   número. Así que en las capturas verá el texto justificado SIN guiones,
   con los espacios algo más abiertos; en un navegador de verdad se parte.
   No lo corrija creyendo que la regla no funciona. */
/* La última línea de un párrafo justificado no se estira: es el
   comportamiento correcto y conviene dejarlo explícito. */
.bl-cuerpo .cuerpo-boletin p:last-child{margin-bottom:0}

.bl-cuerpo .cuerpo-boletin h2{
  text-align:left!important;
  hyphens:none;
  margin:2.1em 0 .6em;
  font-size:1.2rem!important;
  line-height:1.3;
}
.bl-cuerpo .cuerpo-boletin h2:first-child{margin-top:0}

/* ── FIGURAS ──────────────────────────────────────────────────────────
   Van DENTRO del artículo, no amontonadas al final. Se salen un poco de
   la columna de texto —hasta el ancho de la hoja— porque una imagen
   encajada exactamente en 66ch parece un sello pegado; sobresalir
   ligeramente es lo que la hace leer como ilustración del texto. */
.bl-cuerpo .cuerpo-boletin .bl-fig{
  margin:2.2em calc(50% - 50vw) 2.2em;
  margin-inline:-6%;
  max-width:112%;
}
.bl-cuerpo .cuerpo-boletin .bl-fig img{
  display:block;width:100%;height:auto;border-radius:2px;
}
@media (max-width:640px){
  .bl-cuerpo .cuerpo-boletin .bl-fig{margin-inline:0;max-width:100%}
  /* En pantalla estrecha justificar es contraproducente: con 35–40
     caracteres por renglón los huecos entre palabras se vuelven enormes.
     Por debajo de 640 px se vuelve a alineación izquierda. */
  .bl-cuerpo .cuerpo-boletin p{text-align:left!important;hyphens:auto}
}

/* ── FIRMA DEL AUTOR ──────────────────────────────────────────────────
   Sin acentos en el nombre, por instrucción de la dirección y con
   fundamento: los buscadores indexan «Rodríguez» y «Rodriguez» como
   cadenas distintas, y él usa la forma sin acentos en LinkedIn y en el
   resto de sus perfiles. Una sola grafía en las 66 páginas es lo que
   permite que todas las menciones consoliden en la misma entidad. */
.bl-cuerpo .cuerpo-boletin .bl-firma{
  text-align:left!important;
  margin:2.4em 0 1.6em;
  padding-top:1.3em;
  border-top:1px solid var(--raya);
  hyphens:none;
}
.bl-cuerpo .cuerpo-boletin .bl-firma strong{
  display:block;font-family:var(--t);font-weight:800;color:var(--navy);
  font-size:1.02rem;letter-spacing:-.01em;
}
.bl-cuerpo .cuerpo-boletin .bl-firma span{
  display:block;font-family:var(--m);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto2);margin-top:5px;
}

/* ── REFERENCIAS ──────────────────────────────────────────────────────
   Son fuentes, no prosa: ni se justifican ni se parten. Cuerpo menor y
   una raya que las separa del artículo. */
.bl-cuerpo .cuerpo-boletin .bl-refcab{
  font-family:var(--m)!important;font-size:.7rem!important;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto2)!important;
  font-weight:700!important;margin:2.4em 0 .9em;
  padding-top:1.3em;border-top:1px solid var(--raya);
}
.bl-cuerpo .cuerpo-boletin .bl-ref{
  text-align:left!important;hyphens:none;
  font-size:.86rem!important;line-height:1.6!important;
  color:var(--texto2)!important;margin:0 0 .45em;
  /* RONDA 23 · «en el boletín #22 en las referencias el contenido rebasa
     el margen». Son URLs de cien caracteres sin un solo espacio, guion ni
     signo donde el navegador pueda partir; `word-break:break-word` no las
     toca porque técnicamente son UNA palabra. `overflow-wrap:anywhere` sí
     autoriza a cortar donde haga falta, y es lo correcto para una URL:
     nadie la lee, se copia. Se aplica sólo a las referencias, no a la
     prosa, donde partir en cualquier sitio sería horrible. */
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Y al enlace en sí, que es quien de verdad desborda. */
.bl-cuerpo .cuerpo-boletin .bl-ref a,
.bl-cuerpo .cuerpo-boletin a[href^="http"]{
  overflow-wrap:anywhere;
}

/* ══════════════════════════════════════════════════════════════════════
   RONDA 23 · OBJETIVOS TÁCTILES EN LAS PÁGINAS DE BOLETÍN
   ----------------------------------------------------------------------
   Auditoría de 12 páginas × 5 anchos: cero desbordes, pero en móvil había
   enlaces de menos de 32 px de alto — el logotipo de la cabecera, el
   enlace «Prensa», y los del pie (IT Capital©, el correo, LinkedIn,
   YouTube, Facebook, Aviso legal).

   La recomendación de accesibilidad (WCAG 2.5.8) es 24 px como mínimo
   absoluto; 44 px es la medida cómoda para un pulgar y la que usa el
   resto del sitio. Un enlace de 18 px en el pie no es que se vea mal: es
   que se falla al tocarlo y se acaba pulsando el de al lado.

   Se resuelve con relleno vertical, sin mover nada de sitio: el área
   táctil crece, la tipografía no.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .bl-marca{ min-height:44px; align-items:center; }
  .bl-nav a{ min-height:44px; }
  /* El «Prensa» del antetítulo (`.bl-kicker`) medía 17 px de alto: es un
     enlace de navegación real, no texto corrido, así que también necesita
     área para el dedo. Se le da altura sin separar la línea del kicker. */
  .bl-kicker a{ display:inline-flex; align-items:center; min-height:44px; }
  .bl-kicker{ align-items:center; min-height:44px; }
  .bl-pie a{
    display:inline-flex; align-items:center;
    min-height:44px; padding:0 2px;
  }
  .bl-social{ gap:14px; flex-wrap:wrap; }
  .bl-cuerpo .cuerpo-boletin a{
    /* los enlaces dentro del texto no se tocan: partirían el renglón.
       Sólo se les da algo de aire vertical para el dedo. */
    padding-block:4px;
  }
}