/* ============================================================
   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. */
.bl-heroe{margin:0;display:block;position:relative}
.bl-heroe img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover}
.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}
.bl-patro a{color:var(--navy);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:3px}
.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);
}
/* Globo terráqueo dibujado en CSS: no hace falta pedir un icono a nadie. */
.pie-op-globo{
  width:13px;height:13px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid currentColor;position:relative;
}
.pie-op-globo::before,.pie-op-globo::after{
  content:'';position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid currentColor;
}
.pie-op-globo::before{border-left-color:transparent;border-right-color:transparent;transform:scaleX(.45)}
.pie-op-globo::after{border-top-color:transparent;border-bottom-color:transparent;transform:scaleY(.999);
  clip-path:inset(45% 0 45% 0)}
.pie-op-trad{color:var(--yellow,#FBD601)}
.pie-op-trad:hover{color:#fff}
.pie-op-trad.cargando .pie-op-globo{animation:cgGiro 1.6s linear infinite}
.pie-traductor{margin-right:12px}
/* El selector que inyecta Google trae su propio aspecto; se le quita el
   ruido para que no rompa la estética del pie. */
.pie-traductor .goog-te-gadget{font-family:inherit!important;font-size:.68rem!important;color:inherit!important}
.pie-traductor .goog-te-gadget img,.pie-traductor .goog-logo-link{display:none!important}
.pie-traductor select{
  background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:2px;padding:7px 10px;font-size:.72rem;font-family:inherit;
}
.pie-traductor select option{background:#0A1120;color:#fff}
/* Google añade una barra propia arriba del todo que desplaza la página. */
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}

/* ── TRADUCTOR: PODER APAGARLO ─────────────────────────────────────────
   Reportado: el traductor de Google sí funciona, pero después no se puede
   apagar.

   Es cierto y la razón es del propio widget: cuando traduce, Google deja
   una cookie (`googtrans`) que sobrevive a la recarga, así que la página
   vuelve traducida una y otra vez. Quitar el selector de pantalla no
   apaga nada — hay que borrar esa cookie.

   Así que la opción del pie pasa a tener dos estados y el botón dice en
   cada momento lo que va a hacer.                                       */
.pie-op-trad.activo{color:var(--neon-teal,#4FE3D0)}
.pie-op-trad.activo .pie-op-globo{border-style:solid}
.pie-op-apagar{
  color:var(--ink-mute,#8590a3);
  border-left:1px solid rgba(255,255,255,.14);
  padding-left:16px;margin-left:2px;
}
.pie-op-apagar:hover{color:#fff}
/* El selector de Google y la barra que inyecta arriba: se ordenan para
   que no rompan la estética del pie ni desplacen la página. */
.pie-traductor{display:inline-flex;align-items:center;margin-right:12px}