/* ─────────────────────────────────────────────────────────────
   Kunko · las secciones que vivian dentro del cuerpo.

   Por que existe: cinco bloques <style> estaban escritos DENTRO
   del <body>, despues de todas las hojas. Por orden de carga
   ganaban siempre, asi que ninguna regla global los alcanzaba.
   Era la razon por la que los arreglos del sitio funcionaban en
   52 paginas y fallaban justo en estas.

   Y lo que guardaban adentro era el objeto que ya habiamos
   sacado del resto del sitio: la tarjeta blanca con esquina
   redondeada, sombra y salto al pasar el mouse.

   Aca quedan reescritas con el sistema: linea de base en vez de
   caja, sin radio, sin sombra, sin salto. El movimiento al pasar
   el mouse es de color y de linea, no de posicion.
   ───────────────────────────────────────────────────────────── */


/* ── El stack que operamos ─────────────────────────────────── */

.toolsec .toolgrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:34px 20px; margin-top:38px;
}
@media(max-width:860px){ .toolsec .toolgrid{grid-template-columns:repeat(2,1fr)} }

/* Sin caja: el logo se sostiene solo. */
.toolsec .tool{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  min-height:92px; padding:18px 12px;
  background:none; border:0; border-radius:0; max-width:none;
}

/* Los colores oficiales de cada marca se muestran como son.
   Se igualan por altura optica, no por la misma altura CSS:
   una marca ancha y baja necesita mas alto que una compacta. */
.toolsec .tool img{
  height:auto; max-height:30px; max-width:84%;
  filter:none; opacity:1;
}
.toolsec .tool img[src*="customerio-logo"]{ max-height:22px }
.toolsec .tool img[src*="mixpanel"]{ max-height:26px }
.toolsec .tool img[src*="hubspot"]{ max-height:32px }
/* Klaviyo es un logotipo apaisado con la banderita arriba: a la misma
   altura que los demas se ve enorme. Se iguala por altura optica. */
.toolsec .tool img[src*="klaviyo"]{ max-height:24px }
.toolsec .tool img[src*="braze"]{ max-height:28px }

.toolsec .tool .wm{
  font-family:'Satoshi',sans-serif; font-weight:800;
  font-size:23px; letter-spacing:-.02em; color:var(--ink,#111027);
}
.toolsec .tool .wm.activecampaign{ font-size:19px }

/* Las marcas que todavia no tienen archivo se escriben con su color
   oficial, no en gris esperando el hover. */
.toolsec .tool .wm.omnisend{ color:#00a35a }
.toolsec .tool .wm.activecampaign{ color:#356ae6 }
/* Brevo queda en gris mientras las otras dos llevan su color de marca, y la
   fila se lee a medio terminar. Se empareja el tratamiento tipografico hasta
   que exista el archivo del logo: Omnisend, ActiveCampaign y Brevo no tienen
   SVG en el repo, y no estan en las fuentes publicas que probamos. */
.toolsec .tool .wm.brevo{ color:#0b996e }
.toolsec .tool .lgbadge{ max-height:46px; width:auto }

/* La etiqueta de partner deja de ser un globo flotando en la
   esquina y pasa a ser el pie del logo, que es donde se lee. */
.toolsec .ttag{
  position:static; display:block; margin-top:2px;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted,#686678); background:none; padding:0; border-radius:0;
}
.toolsec .tool--p .ttag{ color:var(--pink,#e91e8a) }
.toolsec .tool--p{ border-color:transparent }

.toolsec .tsub{
  max-width:58ch; color:var(--muted,#686678);
  font-size:clamp(15px,1.6vw,18px); margin-top:14px; line-height:1.6;
}
.toolsec .tsub b{ color:var(--ink,#111027) }


/* ── Webinars, sobre fondo oscuro ──────────────────────────── */

.webisec{ background:var(--ink,#111027); color:#fff }
.webisec h2, .webisec .weby-h{ color:#fff }
.webisec .tsub{
  max-width:60ch; color:rgba(255,255,255,.72);
  font-size:clamp(15px,1.6vw,18px); margin-top:14px; line-height:1.6;
}

.webigrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:0; margin-top:40px; max-width:820px;
}
@media(max-width:860px){ .webigrid{grid-template-columns:1fr} }

/* Linea de base en vez de tarjeta. Sobre oscuro, la linea es la
   que separa; el fondo translucido solo ensuciaba. */
.webi{
  display:flex; flex-direction:column;
  background:none; border:0; border-radius:0;
  border-top:1px solid rgba(255,255,255,.22);
  padding:26px 30px 26px 0;
  transition:border-color .25s;
}
.webi + .webi{ padding-left:30px }
@media(max-width:860px){ .webi, .webi + .webi{ padding-left:0 } }
.webi:hover{ transform:none; background:none; border-top-color:var(--pink,#e91e8a) }

.webi .cob{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--yellow,#f5a623); margin-bottom:16px;
}
.webi .cob .dot{ width:6px; height:6px; border-radius:50%; background:var(--pink,#e91e8a) }
.webi h3{
  font-family:'Satoshi',sans-serif; font-weight:900; font-size:22px;
  line-height:1.1; letter-spacing:-.02em; margin-bottom:12px;
}
.webi p{ color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.55; flex:1 }
.webi .go{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-weight:700; font-size:14px; color:var(--pink,#e91e8a);
}
.webi .go svg{ width:15px; height:15px; transition:transform .2s }
.webi:hover .go svg{ transform:translateX(3px) }


/* ── El bloque con imagen al costado ───────────────────────── */

.ovsec .ovgrid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,60px); align-items:center; margin-top:8px;
}
@media(max-width:820px){ .ovsec .ovgrid{grid-template-columns:1fr} }

.ovsec .ovimg{ border-radius:0; overflow:hidden; border:0; box-shadow:none }
.ovsec .ovimg img{ width:100%; display:block }
.ovsec h2{
  font-family:'Satoshi',sans-serif; font-weight:900;
  font-size:clamp(34px,4.6vw,58px); letter-spacing:-.03em; line-height:1.02;
}
.ovsec h2 em{ font-style:normal; color:var(--pink,#e91e8a) }
.ovsec .ovp{
  font-size:clamp(16px,1.7vw,19px); color:var(--muted,#686678);
  line-height:1.6; margin-top:20px; max-width:46ch;
}
.ovsec .ovp b{ color:var(--ink,#111027) }
.ovsec .ovtags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px }
.ovsec .ovtag{
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink,#111027); background:none;
  border:0; border-bottom:1px solid var(--line,rgba(17,16,39,.16));
  padding:5px 2px; border-radius:0;
}


/* ── La grilla de cuatro ───────────────────────────────────── */

.ebsec{ background:#fff }
.ebgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:36px }
@media(max-width:900px){ .ebgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .ebgrid{grid-template-columns:1fr} }

.eb{
  display:flex; flex-direction:column;
  background:none; border:0; border-radius:0;
  border-top:1px solid var(--line,rgba(17,16,39,.16));
  padding:22px 24px 22px 0;
  transition:border-color .25s;
}
.eb + .eb{ padding-left:24px }
@media(max-width:520px){ .eb, .eb + .eb{ padding-left:0 } }
.eb:hover{ transform:none; box-shadow:none; border-top-color:var(--pink,#e91e8a) }

.eb .ebt{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--pink,#e91e8a); margin-bottom:14px;
}
.eb h3{
  font-family:'Satoshi',sans-serif; font-weight:800; font-size:18px;
  line-height:1.15; letter-spacing:-.015em; color:var(--ink,#111027); margin-bottom:8px;
}
.eb p{ font-size:13.5px; line-height:1.5; color:var(--muted,#686678); flex:1 }
.eb .ebc{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-weight:700; font-size:13.5px; color:var(--ink,#111027);
}
.eb:hover .ebc{ color:var(--pink,#e91e8a) }
.ebsec .rmore{
  display:inline-flex; align-items:center; gap:9px; margin-top:30px;
  font-weight:700; font-size:15px; color:var(--pink,#e91e8a);
}


/* ── Los mecanismos, en casos ──────────────────────────────── */

.mcsec .mcgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:36px }
@media(max-width:820px){ .mcsec .mcgrid{grid-template-columns:1fr} }

.mcard{
  background:none; border:0; border-radius:0;
  border-top:1px solid var(--line,rgba(17,16,39,.16));
  padding:28px 34px 28px 0;
  transition:border-color .25s;
}
.mcard:nth-child(even){ padding-left:34px }
@media(max-width:820px){ .mcard, .mcard:nth-child(even){ padding-left:0 } }
.mcard:hover{ transform:none; box-shadow:none; border-top-color:var(--pink,#e91e8a) }

.mcard .mc-h{
  font-family:'Satoshi',sans-serif; font-weight:900; font-size:21px;
  letter-spacing:-.02em; color:var(--ink,#111027);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.mcard .mc-h span{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--pink,#e91e8a);
}

/* Las filas del mecanismo: la linea que las separa ya la trae la
   fila, no hace falta que la tarjeta la encierre. */
.mcard .mc-row{
  display:grid; grid-template-columns:104px 1fr; gap:14px;
  align-items:baseline; padding:11px 0;
  border-top:1px solid var(--line,rgba(17,16,39,.16));
}
.mcard .mc-row b{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#686678);
}
.mcard .mc-row.res b{ color:var(--mint,#41d6a3) }
.mcard .mc-row p{ font-size:14px; color:var(--muted,#686678); line-height:1.5 }
.mcard .mc-row p b{
  color:var(--pink,#e91e8a); font-family:inherit; font-size:inherit;
  letter-spacing:0; text-transform:none;
}
@media(max-width:520px){ .mcard .mc-row{grid-template-columns:1fr;gap:3px} }
