/* ====== TRABAJA CON NOSOTROS — calcado del Figma ====== */
.tn-wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem, 4vw, 3rem); }
.footer { margin-top:0; }

/* Placeholder gris reutilizable */
.tn-ph {
  background: repeating-linear-gradient(45deg, #E4E8EC, #E4E8EC 10px, #D8DDE3 10px, #D8DDE3 20px);
  color:#6B7280; display:grid; place-items:center; text-align:center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.5;
}

/* Botones */
.tn-btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; padding:12px 44px;
  font-family:'Poppins',sans-serif; font-weight:500; font-size:1rem; white-space:nowrap;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.tn-btn--blue { background:var(--accent); color:var(--on-accent); }
.tn-btn--blue:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.tn-btn--white { background:#FFFFFF; color:#0E487A; }
.tn-btn--white:hover { transform:translateY(-2px); background:#E7EDF2; }

/* ---------- SECCIÓN 1 · HERO ---------- */
.tn-hero { position:relative; min-height:667px; display:flex; align-items:center; overflow:hidden; }
.tn-hero__bg {
  position:absolute; inset:0; z-index:0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 24px), #0a2236;
  /* Oscurecer un poco la imagen de fondo (pedido UX: tenía mucho brillo) */
  filter: brightness(0.72);
}
.tn-hero__bg-label {
  position:absolute; top:14px; left:18px; z-index:2;
  font-family:ui-monospace, Menlo, monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.tn-hero__overlay { position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.45); }
.tn-hero__inner { position:relative; z-index:2; }
.tn-hero h1 {
  font-family:'Bitter',serif; font-weight:700; color:#FFFFFF; letter-spacing:-0.01em;
  font-size:clamp(2.2rem, 1.5rem + 3vw, 3.4rem); line-height:1.1; max-width:1025px; text-wrap:balance;
}
.tn-hero p {
  font-family:'Poppins',sans-serif; font-weight:400; font-size:1.125rem; color:rgba(255,255,255,0.85);
  /* mismo ancho visual que el título (no debe sobrepasar "tecnología") */
  line-height:1.6; max-width:680px; margin-top:1.5rem;
}

/* ---------- SECCIÓN 2 · CANALES OFICIALES ---------- */
.tn-channels { background:var(--bg); padding:120px 0; text-align:center; }
.tn-channels__title { font-family:'Bitter',serif; font-weight:700; color:var(--text); font-size:clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height:1.1; }
.tn-channels__sub { font-family:'Poppins',sans-serif; font-size:1.125rem; color:var(--text); max-width:720px; margin:1rem auto 0; line-height:1.6; }
.tn-channels__row {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(2.5rem, 8vw, 7rem); margin-top:64px;
}
.tn-channel { display:flex; flex-direction:column; align-items:center; gap:28px; }
.tn-channel__logo { height:64px; width:auto; max-width:240px; object-fit:contain; display:block; }

/* ---------- SECCIÓN 3 · TE OFRECEMOS ---------- */
.tn-offer { background:var(--bg); padding:120px 0; }
.tn-offer__head { max-width:768px; margin:0 auto 64px; text-align:center; }
.tn-offer__title { font-family:'Bitter',serif; font-weight:700; color:var(--text); font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.44rem); line-height:1.1; }
.tn-offer__sub { font-family:'Poppins',sans-serif; font-size:1rem; color:var(--text-muted); margin-top:1rem; line-height:1.6; }
.tn-offer__grid { display:grid; grid-template-columns:repeat(4, 1fr); }
.tn-col { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:0 clamp(1rem, 2.5vw, 2rem); border-left:1px solid var(--border); }
.tn-col:first-child { border-left:0; }
.tn-col__icon { color:var(--ic, var(--accent)); display:inline-grid; place-items:center; padding:14px; border-radius:999px; transition:background-color .3s ease, box-shadow .3s ease; }
.tn-col:hover .tn-col__icon { background:var(--ic-soft, rgba(255,255,255,.08)); box-shadow:0 0 28px 6px var(--ic-soft, transparent); }
.tn-col__icon svg { width:48px; height:48px; }
.tn-col__title { font-family:'Bitter',serif; font-weight:700; color:var(--text); font-size:1.125rem; line-height:1.2; }
.tn-col__text { font-family:'Poppins',sans-serif; font-size:1rem; color:var(--text-muted); line-height:1.55; }

/* ---------- SECCIÓN 4 · CTA FINAL ---------- */
.tn-cta { position:relative; padding:120px 0; overflow:hidden; }
.tn-cta__bg {
  position:absolute; inset:0; z-index:0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 24px), #0a2236;
}
.tn-cta__bg-label {
  position:absolute; top:14px; left:18px; z-index:2;
  font-family:ui-monospace, Menlo, monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.tn-cta__overlay { position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.40); }
.tn-cta__inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:48px; }
.tn-cta__title { font-family:'Bitter',serif; font-weight:700; color:#FFFFFF; font-size:clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height:1.1; }
.tn-cta__sub { font-family:'Poppins',sans-serif; font-size:1.125rem; color:rgba(255,255,255,0.85); margin-top:.75rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .tn-hero { min-height:520px; }
  .tn-channels, .tn-offer, .tn-cta { padding:80px 0; }
  .tn-offer__grid { grid-template-columns:repeat(2, 1fr); gap:48px 0; }
  .tn-col { border-left:0; }
  .tn-cta__inner { flex-direction:column; align-items:center; text-align:center; gap:28px; }
  .tn-cta__sub { margin-inline:auto; }
}
@media (max-width:540px) {
  .tn-offer__grid { grid-template-columns:1fr; }
  .tn-channel__logo { height:54px; }
}