/* =========================================================
   SYNERGIAS — Hoja de estilos principal
   Réplica HTML del sitio www.synergias.co
   Sin dependencias externas. Todo auto-hospedado.
   ========================================================= */

/* ---------- Tipografías auto-hospedadas ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-400.woff2?v=3efed036') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-600.woff2?v=3efed036') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-700.woff2?v=3efed036') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-400.woff2?v=3efed036') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-500.woff2?v=3efed036') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-700.woff2?v=3efed036') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Variables de marca ---------- */
:root {
  --azul:           #2626A5;
  --azul-brillante: #3636DD;
  --azul-profundo:  #060396;
  --purpura:        #4442B0;
  --navy:           #26235E;
  --naranja:        #FF7300;
  --magenta:        #FF3DCD;
  --menta:          #15CC8A;
  --azul-claro:     #E6F4FF;
  --blanco:         #FFFFFF;
  --gris-texto:     #4A4A6A;

  --gradiente: linear-gradient(90deg, #FF7300 0%, #FF3DCD 100%);
  --gradiente-diag: linear-gradient(135deg, #FF3DCD 0%, #FF7300 100%);

  --fuente-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fuente-texto:  'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ancho: 980px;
  --alto-header: 98px;
  --radio: 16px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.55;
  color: var(--azul);
  background: var(--blanco);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); margin: 0; line-height: 1.12; font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0; padding-left: 1.2em; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0; }

/* Accesibilidad: salto al contenido */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--naranja); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--blanco);
  height: var(--alto-header);
  display: flex; align-items: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.header__inner {
  max-width: none; width: 100%; margin: 0; padding: 0 54px 0 40px;
  display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.86vw, 28px);
}
.logo { margin-right: auto; }
.logo img { height: 66px; width: auto; }
.logo__texto {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 30px;
  color: var(--azul); letter-spacing: -.02em; line-height: 1;
}
.logo__texto small { display:block; font-size: 10px; letter-spacing: .08em; font-weight: 600; }

.nav { display: flex; align-items: center; gap: 40px; position: relative; top: 2px; }
.nav a {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 15px;
  color: var(--azul-brillante); padding: 0 15px; transition: color .18s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--naranja); }
.nav a[aria-current="page"] { color: var(--naranja); }

.btn-oficina {
  background: var(--naranja); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: 15px;
  padding: 6px 22px; border-radius: 0; white-space: nowrap; line-height: 18px;
  min-width: 142px; height: 30px; text-align: center;
  transition: background .18s ease;
}
.btn-oficina:hover { background: #e66700; }

/* En escritorio el botón vive fuera del menú: se oculta el duplicado
   que está dentro de <nav> y que solo se usa en el menú móvil. */
.nav .btn-oficina { display: none; }

/* Menú móvil */
.menu-btn {
  display: none; background: none; border: 0; padding: 8px;
  width: 44px; height: 44px;
}
.menu-btn span {
  display: block; height: 2px; background: var(--azul); margin: 5px 0; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   COMPONENTES REUTILIZABLES
   ========================================================= */

/* Píldora de resaltado con gradiente */
.pildora {
  display: inline-block; padding: .06em .38em; border-radius: 999px;
  background: var(--gradiente); color: #fff;
}
.pildora--blanca { background: #fff; color: var(--magenta); }
.pildora--magenta { background: var(--magenta); color: #fff; }

/* Íconos circulares */
.ico {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ico svg { width: 28px; height: 28px; }
.ico--naranja { background: var(--naranja); color: #fff; }
.ico--magenta { background: var(--magenta); color: #fff; }
.ico--azul    { background: var(--azul-brillante); color: #fff; }
.ico--blanco  { background: #fff; color: var(--azul); }
.ico--borde   { background: transparent; border: 2px solid currentColor; }

/* Subrayado corto decorativo */
.subrayado { display: block; width: 38px; height: 0; border-top: 3px solid; margin-top: 14px; }
.subrayado--menta { border-color: var(--menta); }
.subrayado--blanco { border-color: #fff; }
.subrayado--naranja { border-color: var(--naranja); }
.subrayado--magenta { border-color: var(--magenta); }
.panel .subrayado--magenta { width: 24px; border-top-width: 3px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: 15px;
  padding: 0 21px; height: 33px; border-radius: 50px; border: 0;
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover { transform: translateX(2px); filter: brightness(1.06); }
.btn svg { width: 14px; height: 14px; }
.btn--naranja  { background: var(--naranja); color: #fff; }
.btn--magenta  { background: var(--magenta); color: #fff; }
.btn--azul     { background: var(--azul-brillante); color: #fff; }
.btn--claro    { background: var(--azul-claro); color: var(--azul); }
.btn--azul-osc { background: var(--azul); color: #fff; border-radius: 50px; height: 33px; min-width: 158px; justify-content: center; font-size: 15px; font-weight: 700; font-family: var(--fuente-texto); }

/* Fondos con formas geométricas diagonales */
.formas { position: relative; overflow: hidden; }
.formas::before, .formas::after {
  content: ''; position: absolute; pointer-events: none;
}
.formas--azul { background: var(--azul); }
.formas--navy { background: var(--navy); padding: 60px 0; }
.formas--navy::before, .formas--navy::after { display: none; }
.formas--soporte {
  background: var(--azul) center/cover no-repeat;
  background-image: url('../img/fondo-soporte.jpg?v=3efed036');
}
.formas--soporte::before, .formas--soporte::after { display: none; }
.formas--azul::before {
  width: 60%; height: 200%; left: -25%; top: -50%;
  background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  transform: rotate(18deg);
}
.formas--azul::after {
  width: 45%; height: 200%; right: -18%; top: -50%;
  background: linear-gradient(200deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  transform: rotate(-14deg);
}
.formas > * { position: relative; z-index: 1; }

/* =========================================================
   HERO INTERNO (Servicios, Nosotros, Contacto, PQRS, Blog)
   ========================================================= */
.hero-int {
  height: 407px; display: flex; align-items: center;
  background-size: cover; background-position: center;
  background-color: var(--magenta);
  position: relative;
}
/* Sin capa de color: la imagen original ya trae el degradado incorporado. */
.hero-int .contenedor { position: relative; z-index: 1; width: 100%; }
.hero-int--nosotros .contenedor { padding-left: 76px; }
/* PQRS va a la derecha pero conserva la píldora blanca con texto magenta */
.hero-int--pqrs { justify-content: flex-end; text-align: right; }
.hero-int--pqrs .contenedor { padding-right: 471px; }
.hero-int--contacto .contenedor { padding-left: 63px; }
.hero-int h1 {
  font-size: clamp(30px, 3.4vw, 50px); font-weight: 800; line-height: 55px;
  display: inline-block; background: #fff; color: var(--magenta);
  padding: 0 .18em; border-radius: 30px;
}
.hero-int--der h1 { background: transparent; color: #fff; padding: 0; }
.hero-int--der .pildora--blanca {
  background: #fff; color: var(--magenta); border-radius: 30px; padding: 0 .18em;
}
.hero-int--der { justify-content: flex-end; text-align: right; }
.hero-int--der .contenedor { max-width: none; width: 100%; padding-right: 361px; }
.hero-int--der h1 { background: transparent; color: #fff; padding: 0; }
.hero-int--der .pildora--magenta { padding: .08em .34em; }

/* =========================================================
   CARRUSEL HERO (portada)
   ========================================================= */
.carrusel { position: relative; height: 559px; background: var(--azul); overflow: hidden; }
/* Deslizamiento horizontal: nunca se superponen dos textos */
.carrusel__pista {
  height: 100%; display: flex; width: 100%;
  transition: transform .62s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.carrusel__slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  padding-top: 24px;
  display: flex; align-items: center; justify-content: flex-end;
  background-size: cover; background-position: center;
}
.carrusel__slide .contenedor { width: 100%; }
.carrusel h2 {
  color: #fff; text-align: right;
  font-size: clamp(30px, 3.4vw, 51px); line-height: 1.1; font-weight: 800;
  max-width: 700px; margin-left: auto; margin-right: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; padding: 14px;
  z-index: 3; opacity: .85; transition: opacity .2s ease;
}
.carrusel__flecha:hover { opacity: 1; }
.carrusel__flecha svg { width: 26px; height: 42px; }
.carrusel__flecha--izq { left: 22px; }
.carrusel__flecha--der { right: 22px; }
.carrusel__puntos {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 3;
}
.carrusel__punto {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.45); transition: background .2s ease;
}
.carrusel__punto.activo { background: #fff; }

/* =========================================================
   PORTADA — Sección Servicios
   ========================================================= */
.seccion { padding: 101px 0 101px; }
.titulo-centro {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-bottom: 83px; padding-right: 40px; flex-wrap: wrap;
}
.titulo-centro h2 { font-size: clamp(23px, 2vw, 30px); font-weight: 800; line-height: 36px; color: var(--azul); }
.titulo-centro .pildora { margin-left: 13px; }

.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta {
  background: var(--azul); border-radius: var(--radio);
  padding: 22px 23px 24px; display: flex; flex-direction: column;
  min-height: 396px;
}
.tarjeta__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border-radius: 999px; padding: 8px 8px 8px 11px; margin-bottom: 26px;
}
.tarjeta__cab h3 { font-size: 20px; font-weight: 900; line-height: 26px; letter-spacing: -1px; }
.tarjeta--naranja .tarjeta__cab h3 { color: var(--naranja); }
.tarjeta--magenta .tarjeta__cab h3 { color: var(--magenta); }
.tarjeta--azul    .tarjeta__cab h3 { color: var(--azul-brillante); }
.tarjeta__cab .ico { width: 42px; height: 42px; }
.tarjeta__cab .ico svg { width: 21px; height: 21px; }
.tarjeta p { color: #fff; font-size: 15px; font-weight: 400; line-height: 18px; flex: 1; padding: 0 11px; }
.tarjeta .btn { align-self: flex-start; margin-top: 12px; margin-left: 11px; }

/* =========================================================
   PORTADA — Compañías aliadas
   ========================================================= */
.aliadas {
  background: var(--gradiente-diag) center/cover no-repeat;
  background-image: url('../img/fondo-aliadas.jpg?v=3efed036');
  height: 418px; display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.aliadas .contenedor {
  position: relative; z-index: 1;
  max-width: none; width: 100%; padding: 0 11.3% 0 22%;
}
.aliadas__grid {
  display: flex; justify-content: space-between; align-items: center; gap: 40px;
}
.aliadas h2 { color: #fff; font-size: clamp(28px, 2.7vw, 40px); font-weight: 700; margin-top: 20px; }
.logos { display: flex; align-items: center; gap: 14px; }
/* 3 tarjetas de 151px + 2 separaciones de 12px = 477px exactos */
.logos__pista {
  display: flex; gap: 12px; overflow: hidden; scroll-behavior: smooth;
  width: 477px; flex: 0 0 477px;
}
.logos__item {
  background: #fff; border-radius: 10px; width: 151px; height: 151px;
  flex: 0 0 151px; display: flex; align-items: center; justify-content: center;
  padding: 11px; box-shadow: 0 3px 14px rgba(0,0,0,.10);
}
.logos__item img { max-height: 100%; object-fit: contain; }
/* En Servicios los logos van sin recuadro, sobre el fondo claro */
.logos--sueltos .logos__item {
  background: transparent; box-shadow: none; border-radius: 0;
  width: 167px; height: 167px; flex: 0 0 167px; padding: 0;
}
.logos--sueltos .logos__pista { width: 707px; flex: 0 0 707px; gap: 103px; }
.logos--sueltos .logos__item {
  width: 167px; flex: 0 0 167px; height: 167px;
  background: #fff; border-radius: 20px; box-shadow: none; padding: 16px;
}
.logos--sueltos { justify-content: flex-start; padding-left: 132px; }
.logos--sueltos .logos__nav { margin-left: 20px; }
.logos--sueltos .logos__nav { background: var(--naranja); color: #fff; }
.logos__nav {
  width: 34px; height: 34px; border-radius: 50%; border: 0; flex: 0 0 34px;
  background: rgba(255,255,255,.92); color: var(--naranja);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: opacity .18s ease;
}
.logos__nav svg { width: 13px; height: 13px; }
.logos__nav:disabled { opacity: 0; pointer-events: none; }

/* =========================================================
   SERVICIOS
   ========================================================= */
.franja-azul .ico { width: 60px; height: 60px; }
.franja-azul .ico svg { width: 40px; height: 40px; }
.franja-azul {
  background: var(--azul-brillante) center/cover no-repeat;
  background-image: url('../img/franja-azul.jpg?v=3efed036');
  height: 174px; display: flex; align-items: center;
}
.franja-azul .contenedor { display: flex; align-items: center; gap: 31px; padding-left: 49px; }
.franja-azul p { color: #fff; font-size: 18px; font-weight: 600; line-height: 23.4px; margin: 0; max-width: 811px; }

.bloque { padding: 80px 0; }
.bloque__cab { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.bloque--aliados .bloque__cab h2 { min-width: 375px; }
.bloque--aliados .bloque__cab .ico { width: 62px; height: 62px; }
.bloque--aliados .bloque__cab .ico svg { width: 31px; height: 31px; }
.bloque__cab h2 { font-size: clamp(30px, 3.4vw, 50px); font-weight: 800; line-height: 1; letter-spacing: -1px; }
.split__texto .bloque__cab h2 { font-size: 44px; font-weight: 900; line-height: 57.2px; letter-spacing: -2.2px; font-family: var(--fuente-texto); }
.split__texto .bloque__cab { gap: 157px; }
.split--invertido .split__texto .bloque__cab { gap: 102px; }
.split__texto .bloque__cab .ico { width: 51px; height: 51px; }
.split__texto .bloque__cab .ico svg { width: 36px; height: 36px; }
.bloque--aliados {
  padding-top: 135px;
  background: var(--azul-claro) center/cover no-repeat;
  background-image: url('../img/fondo-aliados.jpg?v=3efed036');
  min-height: 729px;
}
.bloque--aliados h2 { color: var(--naranja); }
.bloque--aliados .dos-col > p { font-size: 16px; line-height: 1.3; }
.dos-col { display: grid; grid-template-columns: 456px 1fr; gap: 132px; margin-top: 3px; }
.dos-col > div > p:first-child { font-size: 20px; font-weight: 900; line-height: 22px; margin-bottom: 26px; }
.dos-col ul { padding-left: 28px; }
.dos-col ul li { font-size: 16px; line-height: 22.4px; }
.dos-col ul li { margin-bottom: 6px; }

/* El original no es mitad y mitad: 747 de color y 750 de foto */
.split { display: grid; grid-template-columns: 747fr 750fr; min-height: 494px; }
.split--invertido { grid-template-columns: 750fr 747fr; min-height: 530px; }
.split__texto { padding: 70px 0 70px 163px; display: flex; flex-direction: column; justify-content: flex-start; }
.split__texto > * { max-width: 421px; }
.split--invertido .split__texto { padding-left: 161px; padding-top: 48px; }
.split__texto--grad { background: var(--azul-profundo); color: #fff; }
.split__texto--grad h2 { color: #fff; }
.split__texto p { font-size: 15px; font-weight: 300; line-height: 16.5px; margin-bottom: 26px; }
.split__texto p strong { font-size: 16px; font-weight: 900; line-height: 22.4px; }
.split__texto p em strong, .split__texto p strong em { font-size: 16px; font-weight: 900; }
.split__img { background-size: cover; background-position: center; min-height: 420px; background-color: var(--azul-claro); }

/* Acordeón */
.acordeon { width: 917px; max-width: none; margin: 40px 0 0 2px; }
/* Esta sección usa una columna de 902px, no la de 980 */
.formas--soporte { padding: 86px 0 80px; }
.formas--soporte .contenedor { max-width: 902px; }
.formas--soporte .bloque__cab h2 {
  font-size: 50px; font-weight: 900; line-height: 65px; letter-spacing: -2.5px;
  font-family: var(--fuente-texto);
}
.formas--soporte .bloque__cab { gap: 405px; }
.formas--soporte .bloque__cab .ico { width: 60px; height: 60px; }
.formas--soporte .bloque__cab .ico svg { width: 34px; height: 34px; }
.formas--soporte > .contenedor > p { font-size: 15px; font-weight: 300; line-height: 16.5px; max-width: 902px; }
.formas--soporte > .contenedor > p strong { font-weight: 700; }
.acordeon__item {
  border: 1px solid #C1C0E5; border-radius: 0;
  margin-bottom: 5px; background: transparent;
}
.acordeon__btn {
  width: 100%; background: transparent; border: 0; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 79px; padding: 0 25px; text-align: left;
  font-family: var(--fuente-texto); font-weight: 700; font-size: 19px; line-height: 26.6px;
  transition: background .18s ease;
}
.acordeon__btn:hover { background: rgba(255,255,255,.08); }
.acordeon__btn svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .3s ease; }
.acordeon__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acordeon__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acordeon__panel { display: none; padding: 4px 25px 26px; color: #fff; font-size: 14px; line-height: 21px; }
.acordeon__panel.abierto { display: block; }
.persona { padding: 16px 0; }
.persona + .persona { border-top: 1px dotted rgba(255,255,255,.5); }
.persona strong { font-family: var(--fuente-titulo); font-size: 16px; display: block; }
.persona span { display: block; font-size: 14.5px; opacity: .92; }
.persona a { text-decoration: underline; color: #fff; }

/* =========================================================
   NOSOTROS
   ========================================================= */
.beneficios { display: grid; grid-template-columns: 311fr 311fr 322fr; gap: 18px; }

/* Bloque "Nos caracterizamos": panel blanco que sobresale 59px a la izquierda */
.panel-blanco {
  background: #fff; border-radius: 0; padding: 65px 0 0 58px;
  margin-left: -59px; width: 398px; min-height: 530px;
}
.nosotros-intro { padding-bottom: 18px; }
.panel-blanco h2 { font-size: 30px; font-weight: 700; line-height: 30px; color: var(--azul); max-width: 317px; margin: 28px 0 0; font-family: var(--fuente-texto); }
.panel-blanco p { font-size: 14px; font-weight: 400; line-height: 19.6px; color: var(--azul); max-width: 337px; }
.panel-blanco .ico { width: 60px; height: 60px; }
.panel-blanco .ico svg { width: 33px; height: 33px; }
.nosotros-intro { display: grid; grid-template-columns: 404px 576px; align-items: start; }
.nosotros-intro img { width: 576px; height: 532px; object-fit: cover; border-radius: 0; }
.beneficio {
  border-radius: 10px; padding: 39px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 33px;
  height: 294px; justify-content: flex-start;
}
.beneficio h3 { font-size: 28px; font-weight: 400; line-height: 30.8px; font-family: var(--fuente-texto); }
.beneficio--magenta { background: var(--magenta); color: #fff; }
.beneficio--claro   { background: var(--azul-claro); color: var(--azul); }
.beneficio--naranja { background: var(--naranja); color: #fff; }
.beneficio .ico { width: 78px; height: 78px; border: 2px solid currentColor; background: transparent; border-radius: 100px; }
.beneficio .ico svg { width: 36px; height: 36px; }

.puntos-sep {
  height: 0; margin: 63px auto 0; width: 608px; max-width: 100%;
  border-top: 5px dotted var(--azul-claro);
}
.lista-3 { display: grid; grid-template-columns: repeat(3, 270px); gap: 0; color: #fff; }
/* Fila de viñetas: ícono en 281.5 y primera columna en 390.5 */
.fila-vinetas { display: flex; align-items: flex-start; gap: 31px; padding-left: 22px; margin-top: 69px; flex-wrap: wrap; }
.fila-vinetas > .ico { width: 78px; height: 78px; }
.fila-vinetas > .ico svg { width: 44px; height: 38px; }
.lista-3 ul { padding-left: 28.8px; margin: 0; }
.lista-3 li { margin-bottom: 0; font-size: 16px; font-weight: 400; line-height: 22.4px; }

/* =========================================================
   FORMULARIOS (Contacto y PQRS)
   ========================================================= */
.form-grid { display: grid; grid-template-columns: 552fr 795fr; gap: 30px; align-items: stretch; }
.panel { background: #fff; border-radius: 0; padding: 60px 0 60px 117px; min-height: 717px; }
/* El panel del formulario arranca el contenido en 814.4 = 641.8 + 172.6 */
.form-grid .panel:last-child { padding: 33px 0 33px 172.6px; }
.panel h2 { font-size: 40px; font-weight: 700; line-height: 36px; color: var(--azul); max-width: 285px; }
.panel > p { font-size: 16px; font-weight: 400; max-width: 317px; }
.panel h3 { font-size: 20px; font-weight: 700; line-height: 22px; }
.panel .ico { width: 48px; height: 48px; }
.panel .ico svg { width: 33px; height: 33px; }
/* Los paneles de Contacto y PQRS son más anchos que la columna de 980 */
.contenedor--ancho { max-width: none; width: 100%; padding: 0 60px; margin: 0; }
.panel h2 { color: var(--azul); font-size: clamp(28px, 3.4vw, 40px); }

.dato { margin: 15px 0; display: grid; grid-template-columns: 84px 1fr; gap: 0; align-items: start; }
.etiqueta {
  display: inline-block; background: var(--naranja); color: #fff;
  font-size: 12px; line-height: 15.6px; padding: 1px 6px; border-radius: 30px; text-align: center;
}
.etiqueta--menta { background: var(--menta); color: var(--navy); }
.dato span { font-size: 12px; line-height: 15.6px; }
.footer .dato > span:not(.etiqueta) { font-size: 14.5px; line-height: 1.5; }
.footer .etiqueta { font-size: 12px; line-height: 15.6px; }
.dato a { text-decoration: underline; }

.campo { margin-bottom: 12px; }   /* 25 etiqueta + 33 campo + 12 = paso de 70px */
.campo label, .campo legend {
  display: block; font-family: var(--fuente-texto); font-weight: 400;
  font-size: 14px; line-height: 17px; color: var(--azul); margin-bottom: 20px; padding: 0;
}
.campo input[type=text], .campo input[type=email], .campo input[type=tel],
.campo select, .campo textarea {
  width: 100%; max-width: 450px; font-size: 12px;
  background: rgba(230,244,255,.5); border: 1px solid rgba(6,3,150,.3);
  border-radius: 100px; padding: 5px 18px; height: 33px;
  font-family: var(--fuente-texto); font-size: 14px; color: var(--azul);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.campo textarea { border-radius: 21px; min-height: 92px; height: auto; padding: 10px 18px; resize: vertical; }
.campo select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%232626A5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px; padding-right: 42px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul-brillante);
  box-shadow: 0 0 0 3px rgba(54,54,221,.16);
}
.campo-fila { display: grid; grid-template-columns: 216px 216px; gap: 18px; }
.campo-fila .campo input, .campo-fila .campo select { max-width: 216px; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }

.check { display: flex; align-items: flex-start; gap: 11px; margin: 9px 0; font-size: 12px; }
.check--consentimiento { font-size: 10px; color: #000; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--azul-brillante); flex: 0 0 16px; }
.opciones-pildora { display: flex; gap: 12px; flex-wrap: wrap; }
.opcion-pildora {
  border: 1px solid var(--azul-claro); background: var(--azul-claro);
  border-radius: 999px; padding: 9px 20px; font-size: 14px; cursor: pointer;
  transition: all .18s ease;
}
.opcion-pildora:has(input:checked) { background: var(--azul-brillante); color: #fff; border-color: var(--azul-brillante); }
.opcion-pildora input { position: absolute; opacity: 0; width: 0; height: 0; }

.politica-titulo { color: var(--magenta); font-family: var(--fuente-texto); font-weight: 700; font-size: 16px; margin: 26px 0 14px; }
.btn-enviar {
  width: 100%; max-width: 450px; height: 41.2px; background: var(--naranja); color: #fff; border: 0;
  font-family: var(--fuente-texto); font-weight: 700; font-size: 16px;
  padding: 0 15px; border-radius: 100px; margin-top: 14px;
  transition: background .18s ease;
}
.btn-enviar:hover { background: #e66700; }
.link-politica { display: block; text-align: center; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--azul); text-decoration: none; }
.oculto-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* =========================================================
   BLOG
   ========================================================= */
.blog-fondo { background: linear-gradient(180deg, var(--magenta) 0%, #F2568B 45%, var(--naranja) 100%); }
/* La franja superior del blog mide 93px y no lleva texto */
.blog-franja { height: 93px; background: var(--magenta); }
.blog-fondo .contenedor { padding-top: 0 !important; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 356px); gap: 52px; padding-bottom: 80px; }
/* El blog usa una columna más ancha que el resto del sitio */
.blog-fondo .contenedor { max-width: 1171px; }
.post-card {
  background: #fff; border-radius: 5px; overflow: hidden;
  display: flex; flex-direction: column; height: 555px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.16); }
.post-card__img { height: 266px; flex: 0 0 266px; background: var(--azul-claro) center/cover no-repeat; }
.post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--azul-brillante); margin-bottom: 12px; }
.post-card__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--azul-claro); flex: 0 0 32px; overflow: hidden; }
.post-card h3 { font-size: 22px; font-weight: 400; line-height: 30.8px; color: var(--azul-brillante); margin-bottom: 10px; font-family: var(--fuente-texto); }
.post-card p { font-size: 16px; line-height: 24px; color: var(--azul-brillante); flex: 1; }
.post-card__pie { display: none; }

/* Artículo individual */
.articulo { background: #fff; }
.articulo__hero { height: 380px; background: var(--azul-claro) center/cover no-repeat; }
.articulo__cuerpo { max-width: 780px; margin: 0 auto; padding: 54px 24px 84px; }
.articulo__cuerpo h1 { font-size: clamp(28px, 4vw, 42px); color: var(--azul); margin-bottom: 14px; }
.articulo__meta { color: #6b6b8a; font-size: 14px; margin-bottom: 34px; }
.articulo__cuerpo p { font-size: 17px; color: #2f2f4a; line-height: 1.72; }
.aviso-fuente {
  background: var(--azul-claro); border-left: 4px solid var(--azul-brillante);
  padding: 20px 24px; border-radius: 0 10px 10px 0; margin: 32px 0; font-size: 15px;
}
.aviso-fuente a { color: var(--azul-brillante); text-decoration: underline; font-weight: 500; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--navy); color: #fff; padding: 62px 0 0; }
.footer__grid { display: grid; grid-template-columns: 44.8% 45.9% auto; gap: 0; }
.footer h2 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.footer .dato { grid-template-columns: 64px 1fr; gap: 16px; margin: 19px 0 0; padding-left: 0; }
.footer .etiqueta { background: var(--menta); color: var(--navy); }
.footer__grid > div:last-child { padding-top: 73px; }
.footer__redes { display: flex; gap: 14px; margin-top: 16px; }
.footer__redes a {
  width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.footer__redes svg { width: 20px; height: 20px; }
.footer__barra {
  margin-top: 54px; padding: 18px 0 22px;
  display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.footer__barra a:first-child { text-decoration: underline; font-size: 14.5px; }
.footer__pqrs {
  background: var(--naranja); color: #fff; padding: 7px 42px;
  border-radius: 4px; font-size: 13.5px; font-family: var(--fuente-titulo); font-weight: 600;
}
.footer__legal { text-align:center; font-size: 12.5px; opacity: .55; padding-bottom: 22px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .menu-btn { display: block; }
  .nav {
    position: fixed; top: var(--alto-header); left: 0; right: 0;
    background: #fff; flex-direction: column; gap: 0; align-items: stretch;
    padding: 12px 24px 24px; box-shadow: 0 12px 24px rgba(0,0,0,.12);
    transform: translateY(-140%); transition: transform .28s ease; z-index: 90;
  }
  .nav.abierto { transform: translateY(0); }
  .nav a { padding: 14px 0; border-bottom: 1px solid #eee; }
  .header__inner > .btn-oficina { display: none; }
  .nav .btn-oficina { display: block; text-align: center; margin-top: 14px; border-bottom: 0; }

  .tarjetas, .beneficios, .blog-grid, .lista-3 { grid-template-columns: 1fr; }
  .contenedor { padding: 0 24px; }
  .nav { gap: 0; }
  .nav a { padding: 14px 0; }
  .dos-col, .split, .form-grid, .footer__grid { grid-template-columns: 1fr; }
  .contenedor--ancho { padding: 0 24px; }
  .beneficios { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; gap: 30px; }
  .aliadas { height: auto; padding: 54px 0; }
  .aliadas .contenedor { padding: 0 24px; }
  .aliadas__grid { flex-direction: column; align-items: flex-start; gap: 30px; }
  .logos { width: 100%; }
  .logos__pista { width: auto; flex: 1; }
  .split__texto { padding: 52px 28px; }
  .split__img { min-height: 280px; order: -1; }
  .carrusel { height: 440px; }
  .carrusel h2 { text-align: center; margin: 0 auto; }
  .carrusel__slide { justify-content: center; }
  .carrusel__flecha--izq { left: 4px; }
  .carrusel__flecha--der { right: 4px; }
  .hero-int { height: 300px; }
  .hero-int--der { justify-content: center; text-align: center; }
  .panel { padding: 34px 24px; }
  .seccion, .bloque { padding: 56px 0; }
  .titulo-centro { margin-bottom: 36px; }
  .campo-fila { grid-template-columns: 1fr; }
  .logos__item { width: 120px; height: 120px; flex-basis: 120px; }
  .footer__barra { gap: 20px; }
}

@media (max-width: 560px) {
  .logo img { height: 52px; }
  .blog-grid { gap: 22px; }
  .tarjeta { min-height: auto; }
  .articulo__hero { height: 220px; }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Impresión */
@media print {
  .header, .footer__barra, .carrusel__flecha, .carrusel__puntos { display: none; }
}

/* En pantallas táctiles los campos crecen: 31px es muy pequeño para el dedo. */
@media (max-width: 980px), (pointer: coarse) {
  .campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo select {
    height: 44px; padding: 10px 18px; font-size: 16px; max-width: none;
  }
  .btn-enviar { max-width: none; height: 48px; }
  .campo { margin-bottom: 16px; }
}


/* Transición suave al abrir cada página, similar al deslizamiento del sitio original */
@keyframes entrada {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
main { animation: entrada .38s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }

/* =========================================================
   AJUSTES FINALES DE ESPACIADO
   Estas reglas van al final a propósito: llevan dos clases para
   ganarle a la regla general .bloque, que se declara más arriba.
   ========================================================= */
.bloque.formas--soporte { padding: 86px 0 80px; }
.bloque.formas--navy    { padding: 60px 0; }

/* =========================================================
   ALTURAS EXACTAS DE SECCIÓN EN SERVICIOS
   El original usa posicionamiento absoluto, así que cada sección
   tiene una altura fija. Fijarlas evita que las diferencias se
   vayan acumulando hacia abajo.
   ========================================================= */
.bloque--aliados { height: 729px; padding-bottom: 0; }
.split           { height: 494.5px; min-height: 0; }
.split--invertido{ height: 530.3px; }

/* La columna derecha de Aliados arranca a la altura del título */
.bloque--aliados .dos-col > div:last-child { margin-top: -56px; }

/* En pantallas pequeñas las alturas vuelven a ser automáticas */
@media (max-width: 980px) {
  .bloque--aliados, .split, .split--invertido { height: auto; }
  .bloque--aliados { padding-bottom: 56px; }
  .bloque--aliados .dos-col > div:last-child { margin-top: 0; }
}

/* ---------- Últimos ajustes finos ---------- */
/* El acordeón arranca en y=2704.8 (30px más abajo) */
.acordeon { margin-top: 70px; }

/* La píldora de PQRS va en x=890 */
.hero-int--pqrs .contenedor { padding-right: 195px; }

/* Los paneles de Contacto y PQRS miden 717px de alto */
.form-grid .panel { height: 717px; }
@media (max-width: 980px) {
  .form-grid .panel { height: auto; }
}

/* =========================================================
   CORRECCIONES DEL BARRIDO VISUAL COMPARATIVO
   Cada regla sale de comparar capturas de los dos sitios.
   ========================================================= */

/* CRÍTICA 2 — Tecnología y Capacitación llevan el degradado de marca,
   no el azul marino que había puesto por una medición equivocada */
.split__texto--grad { background: var(--gradiente); }

/* CRÍTICA 3 — la franja de Contacto y PQRS es índigo vivo, no navy */
.bloque.formas--navy { background: #2f2fb8; }

/* CRÍTICA 5 — el párrafo de la franja azul de Servicios no va en negrita */
.franja-azul p { font-weight: 400; }

/* CRÍTICA 7 — los títulos de las tarjetas de Nosotros sí van en negrita */
.beneficio h3 { font-weight: 700; }

/* ALTA 8 — el círculo de la flecha de la portada es de 36px, no 55 */
.titulo-centro .ico { width: 36px; height: 36px; }
.titulo-centro .ico svg { width: 18px; height: 18px; }

/* ALTA 9 — el botón PQRS del pie es una píldora baja de 148x19 */
.footer__pqrs {
  min-width: 148px; height: 19px; padding: 0 12px; border-radius: 30px;
  font-size: 12px; line-height: 19px; display: inline-block; text-align: center;
}

/* ALTA 10 — la rayita bajo "Aliados" es azul, no naranja */
.bloque--aliados .subrayado--naranja { border-color: var(--azul-brillante); }

/* ALTA 12 — las píldoras de Contacto dejan aire antes del texto */
.panel .dato { grid-template-columns: 72px 1fr; gap: 14px; }

/* ALTA 13 — los botones "Sí/No soy referido" son más compactos */
.opcion-pildora { padding: 5px 14px; font-size: 12px; }

/* ALTA 14 — el enlace de la política va alineado a la izquierda del formulario */
.link-politica { text-align: left; padding-left: 29px; }

/* ALTA 15 — la flecha del carrusel de logos de Servicios */
.logos--sueltos .logos__nav { margin-left: -42px; width: 28px; height: 28px; }

/* ALTA 16 — el original no lleva línea de derechos reservados */
.footer__legal { display: none; }

/* MEDIA 22/28 — la fila inferior del pie y sus proporciones */
.footer__barra { font-size: 12px; }
.footer__barra a:first-child { font-size: 13px; }

/* MEDIA 25 — las rayitas decorativas son más cortas */
.subrayado { width: 24px; }
.footer .subrayado--menta { width: 24px; }

/* BAJA 28 — el header mide 94px, no 98 */
:root { --alto-header: 94px; }

/* CRÍTICA 1 — el titular de PQRS cabe en 4 líneas, no 7 */
.panel h2 { line-height: 29px; max-width: 340px; }

/* CRÍTICA 6 — la fila de estadísticas de las tarjetas del blog */
.post-card__pie {
  display: flex; gap: 22px; align-items: center;
  border-top: 1px solid var(--azul-brillante); padding-top: 12px; margin-top: 12px;
  font-size: 12px; color: var(--azul-brillante);
}
.post-card__pie span::before { margin-right: 5px; }
.post-card__pie span:nth-child(1)::before { content: "\1F441"; }
.post-card__pie span:nth-child(2)::before { content: "\1F4AC"; }
.post-card__pie span:nth-child(3)::before { content: "\2661"; }
/* el extracto no debe desbordar la tarjeta */
.post-card p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* el avatar lleva el logo de Synergias */
.post-card__avatar { background: var(--azul-claro) url('../img/favicon.png?v=3efed036') center/60% no-repeat; }

/* MEDIA 17 — "Nuestros / Servicios" 36px más arriba y 20px a la izquierda */
.hero-int--der .contenedor { padding-right: 381px; }
.hero-int--der h1 { position: relative; top: -36px; }

/* MEDIA 18 — la píldora "Nosotros" 32px más arriba */
.hero-int--nosotros h1 { position: relative; top: -32px; }

/* MEDIA 19/21 — párrafo de tarjeta y botón "Ver más" */
.tarjeta p { margin-top: 19px; }
.tarjeta .btn { margin-top: 0; }

/* MEDIA 20 — interlineado de las viñetas de Servicios */
.dos-col ul li { line-height: 20px; }

/* MEDIA 23 — la fila de logos de Servicios 22px más abajo */
.logos--sueltos { margin-top: 74px !important; }

/* MEDIA 26 — el bloque "Compañías Aliados" y su ícono */
.aliadas__grid > div:first-child { position: relative; top: -11px; }
.aliadas .ico--blanco { width: 50px; height: 50px; }
.aliadas .ico--blanco svg { width: 25px; height: 25px; }

/* BAJA 30/32 — interlineado y posición del titular del hero */
.carrusel h2 { line-height: 1.02; }
.carrusel__slide { padding-top: 18px; }

/* BAJA 31 — los puntos del carrusel */
.carrusel__punto { width: 7px; height: 7px; }
.carrusel__puntos { bottom: 39px; }

/* BAJA 33 — la píldora del título de tarjeta */
.tarjeta__cab { padding-top: 6px; padding-bottom: 6px; }

/* =========================================================
   BARRIDO FINAL — carrusel y correcciones críticas
   ========================================================= */

/* La primera diapositiva usa letra más grande que las otras tres.
   Medido por ancho de la palabra "Juntos": 186 px en el original. */
.carrusel__slide--grande h2 { font-size: clamp(36px, 4.07vw, 61px); }

/* Interlínea del titular del carrusel: 65.6 px, no 55.9 */
.carrusel h2 { line-height: 65.6px; }
.carrusel__slide--grande h2 { line-height: 74px; }

/* Las flechas del carrusel */
.carrusel__flecha--izq { left: 79px; }
.carrusel__flecha--der { right: 82px; }

/* CRÍTICA 1 — el titular de PQRS es de 26 px, no de 40 */
.panel h2 { font-size: 26px; line-height: 34px; max-width: 400px; }
/* Contacto sí lleva "Dónde estamos" a 40 px */
.hero-int--contacto ~ .bloque .panel h2,
.formas--navy .panel:first-child h2 { font-size: 40px; line-height: 36px; }

/* Blog — los títulos se recortan a 3 líneas con puntos suspensivos */
.post-card h3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Servicios — los logotipos de aliadas van 20 % más grandes */
.logos--sueltos .logos__item { width: 200px; flex: 0 0 200px; height: 200px; }
.logos--sueltos .logos__pista { width: 848px; flex: 0 0 848px; gap: 124px; }
.logos--sueltos .logos__nav { margin-left: 24px; }

/* Servicios — el párrafo de Aliados deja 53 px bajo el subrayado */
.bloque--aliados .dos-col { margin-top: 48px; }

/* Nosotros — los círculos de las tarjetas van rellenos */
.beneficio .ico { border: 0; }
.beneficio--magenta .ico { background: #fff; color: var(--magenta); }
.beneficio--claro   .ico { background: var(--azul); color: #fff; }
.beneficio--naranja .ico { background: #fff; color: var(--naranja); }

/* Formularios — las casillas son cuadradas */
.check input[type=checkbox] { border-radius: 0; appearance: auto; }

/* ---------- Ajuste fino del carrusel (medidas del barrido final) ---------- */

/* La letra baja un punto: el informe da 61 px y se veía un pelo grande */
.carrusel__slide--grande h2 { font-size: clamp(35px, 3.97vw, 60px); }

/* El bloque de texto va 13 px más abajo (estaba 10-15 px arriba) */
.carrusel__slide { padding-top: 31px; }

/* El borde derecho del recuadro sobresale 17 px del texto,
   no coincide con la columna: se corre a la derecha */
.carrusel h2 { margin-right: 0; }
.carrusel .pildora { padding-right: .28em; }

/* Los puntos indicadores van 3.4 px más arriba */
.carrusel__puntos { bottom: 42px; }

/* La cabecera del original mide 3.9 px más */
:root { --alto-header: 97px; }

/* ---------- Diferencias menores del resto de páginas ---------- */

/* El párrafo de las tarjetas de la portada y su botón */
.tarjeta p { margin-top: 12px; }

/* Las píldoras del pie: alto y separación entre filas */
.footer .etiqueta { padding: 2px 6px; }

/* Los íconos sociales del pie */
.footer__redes a { width: 36px; height: 36px; }
.footer__redes svg { width: 18px; height: 18px; }

/* La fila de puntos de Nosotros */
.puntos-sep { border-top-width: 4px; }

/* El botón "Ir a mi oficina" de Servicios */
.btn--azul-osc { height: 33px; font-size: 14.5px; }

/* La flecha del acordeón */
.acordeon__btn svg { width: 17px; height: 17px; }

/* =========================================================
   TANDA FINAL — diferencias 29 a 58 del barrido
   ========================================================= */

/* 29/30/31/48 — la píldora blanca de los hero: más ancha, más alta y a la derecha */
.hero-int h1 { padding: 0 .24em; line-height: 62px; }
.hero-int--der .contenedor { padding-right: 366px; }
.hero-int--nosotros .contenedor { padding-left: 76px; }
.hero-int--nosotros h1 { position: relative; top: -27px; }

/* 32 — el párrafo de la franja azul arranca 13.5px más a la izquierda */
.franja-azul .contenedor { padding-left: 35px; }

/* 33 — "Aliados" a 52.5px */
.bloque--aliados .bloque__cab h2 { font-size: 52.5px; }

/* 34 — el párrafo deja 53px bajo el subrayado, no 5 */
.bloque--aliados .dos-col { margin-top: 91px; }

/* 35/50 — las líneas naranjas de subrayado */
.subrayado { width: 36px; border-top-width: 3px; }
.panel-blanco .subrayado--naranja { width: 35px; border-top-width: 3px; }

/* 37 — el ícono de Aliados: 59px y 3px a la izquierda */
.bloque--aliados .bloque__cab .ico { width: 59px; height: 59px; }
.bloque--aliados .bloque__cab h2 { min-width: 372px; }

/* 38/39/40/41 — logotipos de aliadas: +25%, y la flecha a la derecha de CHUBB */
.logos--sueltos .logos__item { width: 250px; flex: 0 0 250px; height: 210px; }
.logos--sueltos .logos__pista { width: 900px; flex: 0 0 900px; gap: 75px; }
.logos--sueltos { padding-left: 118px; }
.logos--sueltos .logos__nav { margin-left: 78px; width: 30px; height: 30px; }

/* 43/44/45/46 — Tecnología y Capacitación */
.split__texto .bloque__cab { gap: 152px; }
.split__texto p { padding-left: 6px; margin-bottom: 30px; }
.btn--azul-osc { min-width: 156px; }

/* 51/52/53 — el bloque blanco de Nosotros */
.panel-blanco p { margin-bottom: 26px; }
.panel-blanco { min-height: 573px; padding-top: 80px; }

/* 55/56 — los círculos de las tarjetas van rellenos, con el glifo en color */
.beneficio .ico { border: 0; }
.beneficio--magenta .ico { background: #fff; color: var(--magenta); }
.beneficio--claro   .ico { background: var(--azul); color: #fff; }
.beneficio--naranja .ico { background: #fff; color: var(--naranja); }

/* 57/58 — los títulos de las tarjetas se centran verticalmente */
.beneficio { justify-content: center; }
.beneficio h3 { line-height: 33.8px; }

/* =========================================================
   BARRIDO DE CIERRE — informe 07-cierre.md
   ========================================================= */

/* --- CARRUSEL --- */
/* Los recuadros degradados miden 60 px de alto, no 71.8 */
.carrusel .pildora {
  line-height: 54px; padding-top: 3px; padding-bottom: 3px;
  vertical-align: middle; position: relative; top: 0;
}
/* La primera diapositiva: letra 61 px e interlínea 60 px */
.carrusel__slide--grande h2 { font-size: clamp(35px, 4.03vw, 61px); line-height: 60px; }
/* En las diapositivas con recuadro, la línea sin recuadro termina 18 px antes */
.carrusel h2 { padding-right: 18px; max-width: 718px; }
.carrusel__slide--grande h2 { padding-right: 0; max-width: 700px; }
.carrusel .pildora { margin-right: -18px; }

/* --- PORTADA --- */
/* El título de servicios baja 10.5 px y se corre 16 px a la derecha */
.seccion { padding-top: 111.5px; }
.titulo-centro { padding-right: 8px; margin-bottom: 92.5px; }
/* El texto dentro de las tarjetas deja 11 px más de aire a la izquierda */
.tarjeta__cab { padding-left: 22px; }
.tarjeta p { padding-left: 11px; }
.tarjeta .btn { margin-left: 11px; }
/* La franja de Compañías Aliadas */
.aliadas .contenedor { padding: 0 10.4% 0 22.36%; }

/* --- PIE DE PÁGINA (todas las páginas) --- */
.footer .dato { margin-top: 35px; }
.footer__barra { margin-top: 20px; }
.footer__grid > div:last-child { padding-left: 10px; }
/* La barra inferior no está centrada: su centro va 54 px a la izquierda */
.footer__barra { padding: 18px 108px 22px 0; gap: 32.7px; }
.footer__barra a:first-child { font-size: 13.25px; }
.footer__pqrs { min-width: 142px; }
/* En las páginas sin bloque de ciudades el pie es una banda baja */
.footer:not(:has(.footer__grid)) { padding-top: 0; }
.footer:not(:has(.footer__grid)) .footer__barra { margin-top: 0; }

/* --- SERVICIOS --- */
/* La píldora "Servicios" sobresale 16 px del borde derecho de "Nuestros" */
.hero-int--der .pildora--blanca { padding-right: .5em; margin-right: -.32em; }
/* El bloque de Aliados sube: la columna derecha mucho más que la izquierda */
.bloque--aliados .dos-col { margin-top: 52px; }
.bloque--aliados .dos-col > div:last-child { margin-top: -116px; }
.bloque--aliados .dos-col ul { padding-top: 15.5px; }
.bloque--aliados .dos-col li { line-height: 22.4px; }
/* La franja de logotipos: sube 96 px y los logos se juntan */
.logos--sueltos { margin-top: 49.9px !important; padding-left: 92px; }
.logos--sueltos .logos__pista { width: 774px; flex: 0 0 774px; gap: 12px; }
.logos--sueltos .logos__nav { margin-left: 36px; }
/* Tecnología / Capacitación */
.split__texto p { margin-bottom: 18px; }
.split__texto .btn { margin-top: 30.6px !important; }
/* La sección azul de soporte deja 201 px por debajo de la última fila */
.bloque.formas--soporte { padding: 86px 0 205.5px; }

/* --- NOSOTROS --- */
.panel-blanco { min-height: 533px; }

/* --- BLOG --- */
/* El extracto se recorta a 2 líneas para que quepa la fila de estadísticas */
.post-card p { -webkit-line-clamp: 2; }

/* --- CONTACTO Y PQRS --- */
/* Los nombres de ciudad van a 20 px */
.panel h3 { font-size: 20px !important; }
/* La columna de datos no pasa de 200 px de ancho */


/* El titular de PQRS va a 26 px */
.panel--pqrs h2 { font-size: 26px !important; line-height: 28.6px !important; max-width: 420px; }
/* El ritmo etiqueta → campo del formulario */
.campo label, .campo legend { margin-bottom: 8px; font-weight: 700; }
fieldset legend { font-weight: 700; }
.campo { margin-bottom: 12px; }
/* El texto de consentimiento va a 12 px y ocupa dos líneas */
.check--consentimiento { font-size: 12px; max-width: 472px; }
/* Las casillas de "Sí / No tengo clave" son cuadradas */
.check input[type=radio] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 0;
  border: 1px solid rgba(6,3,150,.45); background: #fff;
}
.check input[type=radio]:checked {
  background: var(--azul-brillante); box-shadow: inset 0 0 0 3px #fff;
}
/* El campo de teléfono lleva selector de país */
.campo input[type=tel] {
  padding-left: 58px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Ccircle cx='11' cy='10' r='7' fill='none' stroke='%232626A5' stroke-width='1.4'/%3E%3Cellipse cx='11' cy='10' rx='3' ry='7' fill='none' stroke='%232626A5' stroke-width='1.4'/%3E%3Cpath d='M4 10h14' stroke='%232626A5' stroke-width='1.4'/%3E%3Cpath d='M25 8l3 3 3-3' fill='none' stroke='%232626A5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M38 3v14' stroke='%232626A5' stroke-width='1' opacity='.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 44px 20px;
}

/* Nosotros: la sección azul sube 23 px y compensa por debajo */
.bloque:has(.panel-blanco) { padding-bottom: 57px; }
.bloque.formas--azul:not(.formas--soporte) { padding-top: 103.4px; padding-bottom: 86.6px; }
/* Formulario: los grupos de opciones van más juntos */
fieldset { margin-bottom: 8px; }
.form-grid .panel:last-child form { padding-top: 13.6px; }

/* Contacto: la dirección de Cali deja 10 px más */
.panel .dato:last-child { margin-top: 25px; }

/* La diapositiva de "Emite tus pólizas" deja 11 px, no 18 */
.carrusel__slide--emite h2 { padding-right: 11px; }
.carrusel__slide--emite .pildora { margin-right: -11px; }

/* --- SEGUNDA REVISIÓN VISUAL --- */
/* Las viñetas de Aliados no llevan separación extra: interlínea 22 px */
.bloque--aliados .dos-col ul li { margin-bottom: 0; }
/* Los logotipos de la portada vuelven a su sitio y solo se mueve la flecha */
.aliadas .contenedor { padding: 0 11.3% 0 22.36%; }
.aliadas .logos__nav--sig { position: relative; left: 13.5px; }
/* Los botones "Ver más" de las tarjetas suben 16 px */
.tarjeta { padding-bottom: 40px; }
/* El texto de Tecnología corta más tarde */
.split:not(.split--invertido) .split__texto > * { max-width: 485px; }

/* PQRS lleva más campos: su formulario arranca arriba del todo para no desbordar el panel */
.form-grid .panel--pqrs + .panel form { padding-top: 0 !important; }