/* ============================================================
   SEBAS MATA · Profesional
   Dirección propia, distinta tanto del "cine oscuro + oro" del resto
   del sitio como de la típica plantilla editorial (crema + serif +
   terracota). Concepto: LA SEÑAL — la línea de una onda / un ticker
   financiero / una frecuencia de radio: el hilo que conecta mercados,
   telecomunicaciones y música. Aparece como divisor entre secciones
   y como vocabulario (tags tipo ticker, fechas en mono).

   Paleta: gris-niebla frío (no crema) + tinta casi negra con matiz
   verdoso + un único acento: verde-señal profundo.
   Tipografía: Fraunces (display, con carácter) + IBM Plex Sans (texto,
   nace en el mundo tech/corporate) + IBM Plex Mono (datos, fechas,
   tags — el guiño "ticker/terminal").

   Se carga DESPUÉS de style.css: conserva el nav/footer del sitio,
   pero reescribe el fondo y todos los bloques de contenido.
   ============================================================ */

body.profesional{
  --paper:#eef1f0;
  --paper-2:#e2e8e6;
  --paper-line:rgba(15,23,24,.12);
  --paper-line-strong:rgba(15,23,24,.24);
  --paper-ink:#10181a;
  --paper-ink-dim:#48534f;
  --paper-muted:#7e8b87;
  --signal:#0f6e73;
  --signal-bright:#17aab0;

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  background:var(--paper);
  color:var(--paper-ink);
  font-family:var(--font-body);
}
body.profesional .grain{display:none}
body.profesional .progress{background:var(--signal);box-shadow:none}

/* ---------- Divisor "señal" ---------- */
body.profesional .prof-signal{
  height:26px;margin:0 auto;max-width:var(--maxw);
  background-repeat:repeat-x;background-position:center;background-size:64px 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26' viewBox='0 0 64 26'%3E%3Cpath d='M0 13C10 1 16 1 26 13S42 25 52 13S64 1 64 13' fill='none' stroke='%230f6e73' stroke-width='1.6'/%3E%3C/svg%3E");
  opacity:.5;
}

/* ---------- Hero ---------- */
body.profesional .prof-hero{
  display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;
  min-height:min(78vh,720px);padding-top:clamp(88px,13vh,128px);
}
body.profesional .prof-hero__col{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,0px) clamp(24px,5vw,64px) clamp(48px,6vw,72px) var(--pad);
}
body.profesional .prof-hero__name{
  font-family:var(--font-display);font-weight:600;font-style:normal;
  font-size:clamp(3rem,7vw,5.6rem);line-height:.98;letter-spacing:-.015em;
  color:var(--paper-ink);text-wrap:balance;
}
body.profesional .prof-hero__alias{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;
  color:var(--paper-muted);margin-top:.9rem;
}
body.profesional .prof-hero__role{
  font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;color:var(--paper-ink-dim);
  margin-top:1.5rem;max-width:44ch;
}
body.profesional .prof-hero__role strong{color:var(--paper-ink);font-weight:600}
body.profesional .prof-tags{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.7rem}
body.profesional .prof-tags span{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--signal);border:1px solid var(--paper-line-strong);border-radius:4px;
  padding:.42em .8em;
}
body.profesional .prof-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:2rem}

body.profesional .btn{--btn-fg:var(--paper-ink);font-family:var(--font-body)}
body.profesional .btn--primary{--btn-bg:var(--signal);--btn-fg:#eef7f6;box-shadow:0 20px 40px -22px rgba(15,110,115,.55)}
body.profesional .btn--primary::after{background:linear-gradient(135deg,var(--signal-bright),var(--signal))}
body.profesional .btn--primary:hover{box-shadow:0 26px 50px -22px rgba(15,110,115,.6)}
body.profesional .btn--ghost{--btn-bd:var(--paper-line-strong);--btn-fg:var(--paper-ink)}
body.profesional .btn--ghost:hover{--btn-bd:var(--signal);--btn-fg:var(--signal)}

body.profesional .prof-hero__media{position:relative;overflow:hidden}
body.profesional .prof-hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.08);
}
body.profesional .prof-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,24,26,0) 55%,rgba(16,24,26,.82) 100%),
             linear-gradient(90deg,rgba(16,24,26,.16),transparent 30%);
  mix-blend-mode:multiply;
}
body.profesional .prof-hero__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-wrap:wrap;gap:.3em 1em;padding:16px 22px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:#eef7f6;
}
body.profesional .prof-hero__caption b{color:var(--signal-bright);font-weight:500}

/* ---------- Áreas de foco: paradas de la señal ---------- */
body.profesional .prof-focus-wrap{padding:clamp(56px,7vw,84px) var(--pad);max-width:var(--maxw);margin:0 auto}
body.profesional .prof-kicker{
  display:flex;align-items:center;gap:.8em;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);margin-bottom:clamp(28px,4vw,44px);
}
body.profesional .prof-kicker::after{content:"";flex:1;height:1px;background:var(--paper-line-strong)}
body.profesional .prof-focus{
  display:flex;gap:0;position:relative;
}
body.profesional .prof-focus::before{
  content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--paper-line-strong);
}
body.profesional .prof-focus__item{flex:1;padding-right:clamp(16px,2vw,28px);position:relative}
body.profesional .prof-focus__item + .prof-focus__item{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--paper-line)}
body.profesional .prof-focus__dot{
  width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--signal);
  position:relative;z-index:2;margin-bottom:1.1rem;
}
body.profesional .prof-focus__tag{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--signal);
  display:block;margin-bottom:.5rem;
}
body.profesional .prof-focus__title{
  font-family:var(--font-display);font-weight:600;font-size:1.28rem;color:var(--paper-ink);line-height:1.15;
}
body.profesional .prof-focus__desc{font-size:.9rem;color:var(--paper-ink-dim);margin-top:.6rem;line-height:1.55;max-width:26ch}

/* ---------- Secciones de prosa ---------- */
body.profesional .prof-section{padding:clamp(56px,7vw,84px) var(--pad);max-width:var(--maxw);margin:0 auto}
body.profesional .prof-section--narrow{max-width:900px}
body.profesional .prof-prose{max-width:62ch;font-size:1.05rem;line-height:1.78}
body.profesional .prof-prose p{color:var(--paper-ink-dim);margin-top:1.15rem}
body.profesional .prof-prose p:first-child{margin-top:0}
body.profesional .prof-prose strong{color:var(--paper-ink);font-weight:600}
body.profesional .prof-prose .draft-tag{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;color:var(--signal);
  border:1px solid var(--paper-line-strong);border-radius:4px;padding:.3em .6em;margin-right:.6em;
  white-space:nowrap;display:inline-block;
}
body.profesional .prof-pull{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.4;color:var(--paper-ink);
  max-width:34ch;margin-top:clamp(28px,4vw,40px);padding-left:1.2rem;border-left:2px solid var(--signal);
}

/* ---------- Trayectoria ---------- */
body.profesional .timeline{display:flex;flex-direction:column}
body.profesional .timeline__item{
  display:grid;grid-template-columns:118px 1fr;gap:clamp(16px,3vw,32px);
  padding:22px 0;border-top:1px solid var(--paper-line);
}
body.profesional .timeline__item:first-child{border-top:0}
body.profesional .timeline__period{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.02em;color:var(--paper-muted);
  padding-top:.3rem;font-variant-numeric:tabular-nums;
}
body.profesional .timeline__role{font-family:var(--font-display);font-weight:600;font-size:1.22rem;color:var(--paper-ink)}
body.profesional .timeline__org{font-family:var(--font-mono);font-size:.78rem;color:var(--signal);margin-top:.3rem;letter-spacing:.01em}
body.profesional .timeline__desc{color:var(--paper-ink-dim);margin-top:.55rem;max-width:56ch;font-size:.95rem;line-height:1.6}

/* ---------- Cierre / contacto ---------- */
body.profesional .prof-close{
  background:var(--paper-ink);color:#eef7f6;
  padding:clamp(56px,8vw,96px) var(--pad);
}
body.profesional .prof-close__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
body.profesional .prof-close__title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;
  max-width:14ch;text-wrap:balance;
}
body.profesional .prof-close__desc{color:#b9c7c4;margin-top:1rem;max-width:44ch;line-height:1.6;font-size:.98rem}
body.profesional .prof-close__list{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
body.profesional .prof-close__list a{
  display:flex;align-items:center;gap:.7em;color:#eef7f6;font-weight:500;font-size:1.02rem;
  padding-bottom:.5rem;border-bottom:1px solid rgba(238,247,246,.22);transition:color .3s,border-color .3s;
}
body.profesional .prof-close__list a svg{width:1.15em;height:1.15em;color:var(--signal-bright);flex:none}
body.profesional .prof-close__list a:hover{color:var(--signal-bright);border-color:var(--signal-bright)}
body.profesional .prof-close__note{font-family:var(--font-mono);font-size:.72rem;color:#7e8f8c;margin-top:.3rem}

body.profesional .footer{background:var(--paper-ink);border-top:1px solid rgba(238,247,246,.1)}
body.profesional .footer__legal{border-top-color:rgba(238,247,246,.1)}

@media(max-width:960px){
  body.profesional .prof-hero{grid-template-columns:1fr;min-height:0}
  body.profesional .prof-hero__media{height:340px;order:-1}
  body.profesional .prof-hero__col{padding-top:clamp(32px,6vw,48px)}
  body.profesional .prof-focus{flex-direction:column;gap:26px}
  body.profesional .prof-focus::before{display:none}
  body.profesional .prof-focus__item{padding-right:0}
  body.profesional .prof-focus__item + .prof-focus__item{padding-left:0;border-left:0;padding-top:22px;border-top:1px solid var(--paper-line)}
}
@media(max-width:560px){
  body.profesional .timeline__item{grid-template-columns:1fr}
  body.profesional .prof-close__inner{align-items:flex-start}
}