/* Monitor Inc — concepto del subrayador: leemos todo (texto gris) y marcamos en azul lo que importa.
   Libre Franklin para titulares y texto; Newsreader para los titulares de prensa. */
:root {
  --paper: #FFFFFF;
  --paper-2: #F4F5F2;
  --ink: #0B1622;
  --ink-2: #33414F;
  --grey: #7E8892;
  --rule: #D9DDE1;
  --navy: #071B2F;
  --blue: #1373ED;
  --mark: #BFD9FF;
  --mark-strong: #9CC4FF;
  --neg: #C4362C;
  --neu: #7A8590;
  --hama: #0F3D3E;
  --franklin: 'Libre Franklin', 'Franklin Gothic Medium', Arial, sans-serif;
  --news: 'Newsreader', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--franklin); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.g { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.w { max-width: 1180px; margin: 0 auto; }
mark { background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 88%, transparent 88%); color: inherit; padding: 0 .08em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }

/* Encabezado */
.top .w { display: flex; align-items: center; gap: 32px; padding-block: 22px; border-bottom: 1px solid var(--ink); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo svg { width: 40px; flex: none; }
.logo span { font: 900 21px var(--franklin); letter-spacing: -.03em; }
.logo span i { font-style: normal; font-weight: 400; }
.top nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.top .client { font-weight: 600; font-size: 15px; text-underline-offset: 4px; }
@media (max-width: 820px) { .top nav { display: none; } .top .client { margin-left: auto; } }
.logo span { white-space: nowrap; }
@media (max-width: 520px) { .top .client { display: none; } }

/* Portada */
.lede { padding-block: 56px 40px; }
.lede .w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.lede h1 { font: 900 clamp(2.7rem, 6vw, 5.2rem)/.95 var(--franklin); letter-spacing: -.045em; }
.lede h1 mark { background: linear-gradient(transparent 55%, var(--mark-strong) 55%, var(--mark-strong) 92%, transparent 92%); padding: 0; }
.lede .sub { margin-top: 26px; font-size: 18.5px; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
.lede .go { margin-top: 30px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.solid { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; padding: 14px 22px; }
.solid:hover { background: var(--blue); color: #FFFFFF; }
.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .lede .w { grid-template-columns: 1fr; gap: 36px; } }

.wall { font: 400 17px/1.75 var(--news); color: var(--grey); text-align: justify; hyphens: auto; min-height: 20em; }
.wall .h + .h::before { content: " / "; color: var(--rule); }
.wall mark.hit { color: var(--ink); background: var(--mark); padding: .05em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.margin { margin-top: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); border-left: 2px solid var(--blue); padding-left: 14px; }
.margin b { color: var(--ink); }
.wallcap { margin-top: 12px; font-size: 12.5px; color: var(--grey); }

.facts { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.facts .w { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts div { padding: 20px 20px 20px 0; display: flex; align-items: baseline; gap: 12px; }
.facts div + div { border-left: 1px solid var(--rule); padding-left: 20px; }
.facts b { font: 900 34px var(--franklin); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.facts span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 700px) { .facts .w { grid-template-columns: 1fr; } .facts div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } }

.sec { padding-block: 80px; }
.sec .w { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.sec h2 { font: 800 clamp(1.7rem, 3.2vw, 2.5rem)/1.05 var(--franklin); letter-spacing: -.035em; }
.sec .intro { display: grid; gap: 16px; align-content: start; }
.sec .intro p { color: var(--ink-2); }
.sec + .sec { border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .sec .w { grid-template-columns: 1fr; gap: 28px; } .sec { padding-block: 56px; } }

.email { border: 1px solid var(--rule); background: var(--paper); font-size: 14px; }
.email__hd { padding: 14px 20px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; font-size: 13.5px; color: var(--ink-2); }
.email__hd span:nth-child(odd) { color: var(--grey); }
.email__hd b { color: var(--ink); font-weight: 600; }
.email__bd { padding: 22px 24px; display: grid; gap: 18px; }
.email__bd .hello { font: 400 16px/1.5 var(--news); color: var(--ink-2); }
.email__bd h3 { font: 600 12px var(--franklin); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.email__group { display: grid; gap: 12px; }
.email__it { display: grid; gap: 2px; }
.email__it p { font: 500 17px/1.3 var(--news); }
.email__it span { font-size: 12.5px; color: var(--grey); }

.sms { display: grid; gap: 12px; max-width: 460px; }
.bubble { background: var(--paper-2); padding: 14px 16px; font-size: 15px; line-height: 1.45; border-left: 3px solid var(--neg); }
.bubble small { display: block; color: var(--grey); font-size: 12px; margin-top: 6px; }
.bubble.mid { border-left-color: var(--neu); }

.list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.list li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.list b { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.list span { color: var(--ink-2); }
@media (max-width: 600px) { .list li { grid-template-columns: 1fr; gap: 4px; } }

/* Contacto */
.contact { background: var(--navy); color: #E6EDF4; padding-block: 72px; }
.contact .w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
.contact h2 { font: 900 clamp(2rem, 4vw, 3.2rem)/1 var(--franklin); letter-spacing: -.04em; color: #FFFFFF; }
.contact .w > div > p { color: #A9BACB; margin-top: 16px; max-width: 40ch; }
.contact form { display: grid; gap: 22px; }
.contact .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .contact .row { grid-template-columns: 1fr; } }
.contact label { display: grid; gap: 4px; font-size: 13px; color: #A9BACB; }
.contact input, .contact textarea { background: none; border: 0; border-bottom: 1px solid #3B5672; color: #FFFFFF; font: 400 19px var(--franklin); padding: 6px 0; border-radius: 0; width: 100%; }
.contact textarea { resize: vertical; min-height: 2.2em; }
.contact input:focus, .contact textarea:focus { outline: none; border-bottom-color: #9CC4FF; }
.contact .consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.contact .consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: #9CC4FF; }
.contact .consent a { color: #DCE8F5; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact button { justify-self: start; background: #FFFFFF; color: #071B2F; font-weight: 700; padding: 14px 22px; }
.contact button:hover { background: #9CC4FF; }
.contact button:disabled { opacity: .6; cursor: wait; }
.status { min-height: 1.4em; font-weight: 600; color: #DCE8F5; }
.status.ok { color: #8BE3B0; }
.status.err { color: #FFB0A6; }
@media (max-width: 900px) { .contact .w { grid-template-columns: 1fr; gap: 32px; } }

/* Páginas interiores */
.page { padding-block: 56px 80px; }
.page .w { max-width: 760px; display: grid; gap: 16px; }
.page h1 { font: 900 clamp(2.2rem, 5vw, 3.4rem)/1 var(--franklin); letter-spacing: -.04em; margin-bottom: 8px; }
.page h2 { font: 800 20px var(--franklin); margin-top: 16px; }
.page p, .page li { color: var(--ink-2); }
.page ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }

/* Pie */
.foot { padding-block: 28px; font-size: 13px; color: var(--grey); border-top: 1px solid var(--rule); }
.foot .w { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.foot .by { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--grey); }
.foot .by svg { width: 150px; height: auto; color: var(--hama); }
.foot .by:hover { color: var(--ink); }
.foot nav { display: flex; gap: 18px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }