/* ==========================================================================
   Coders Comerciales — Landing editorial
   Sistema de marca homologado a newsletter.coderscomerciales.com
   Fondo claro · acento naranja único · Spectral (títulos) + IBM Plex Mono (labels)
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root{
  /* color */
  --bg:        #FFFFFF;   /* fondo base */
  --bg-alt:    #F7F6F3;   /* bandas de sección alternas */
  --ink:       #1A1A18;   /* títulos y cuerpo */
  --muted:     #6E6A64;   /* texto secundario, meta */
  --line:      #E7E4DE;   /* hairlines y bordes */
  --accent:    #FF6A2C;   /* naranja de marca */
  --accent-ink:#12100C;   /* texto sobre naranja */
  --dark:      #0E0E10;   /* banda oscura opcional (CTA final) */
  --dark-text: #F2F2F0;
  /* type */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;     /* SOLO títulos */
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* cuerpo/lectura */
  --mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;   /* wordmark + etiquetas */
  /* radius / spacing */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-btn: 6px;
  --maxw: 1120px;
  --pad-x: clamp(20px, 5vw, 40px);
  --sec-y: clamp(72px, 10vw, 136px);
  --nav-h: 64px;
}

/* ---- Reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);   /* sans que lee; serif solo titula */
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure,blockquote{margin:0}

/* ---- Layout ------------------------------------------------------------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--sec-y)}
.section--alt{background:var(--bg-alt)}
.section--tight{padding-block:clamp(40px,6vw,72px)}

/* ---- Type scale --------------------------------------------------------- */
.h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,4.8vw,50px);line-height:1.05;letter-spacing:-.015em;
}
.h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(23px,3.1vw,33px);line-height:1.1;letter-spacing:-.01em;
}
.h3{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(18px,2.2vw,22px);line-height:1.2;
}
.lead{font-family:var(--sans);font-size:clamp(17px,1.9vw,19px);line-height:1.6;color:var(--ink)}
.body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink)}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

.eyebrow{
  font-family:var(--mono);font-weight:500;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);  /* label de sección: gris ~45%, sin naranja */
  display:block;margin:0 0 16px;
}
.eyebrow--muted{color:var(--muted)}
.meta{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---- Wordmark ----------------------------------------------------------- */
.wordmark{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.wordmark .o{color:var(--accent)}   /* '>', 'comerciales', '_' en naranja */
.wordmark .k{color:var(--ink)}      /* 'coders' en tinta */

/* ---- Image treatment ---------------------------------------------------- */
.img-bw{filter:grayscale(1) contrast(1.04)}

/* ---- Prueba social (collage editorial asimétrico) ---------------------- */
.section__eco{margin-top:10px;font-family:var(--sans);font-size:clamp(15px,1.7vw,17px);color:var(--muted)}

.collage{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(8,1fr);
  aspect-ratio:16/10;
  position:relative;
}
.collage__fig{position:relative;margin:0}
.collage__fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  border:1px solid var(--ink);border-radius:2px;
  box-shadow:12px 12px 0 var(--ink);     /* sombra sólida desfasada, cero desenfoque */
}
/* Composición: ancla grande a la izquierda; dos satélites a la derecha, solape ligero */
.collage__fig--anchor{grid-column:1/8;grid-row:1/9;z-index:1}
.collage__fig--b{grid-column:7/13;grid-row:1/5;z-index:2}
.collage__fig--c{grid-column:7/13;grid-row:4/9;z-index:3}

/* Etiquetas serif flotantes, con su propia sombra sólida en naranja */
.collage__label{
  position:absolute;z-index:6;white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(15px,1.5vw,19px);color:var(--ink);
  background:var(--bg);padding:7px 14px;box-shadow:5px 5px 0 var(--accent);
}
.collage__label--anchor{left:-6px;bottom:26px}
.collage__label--b{right:-6px;top:-14px}
.collage__label--c{right:-6px;bottom:-16px}

@media (max-width:760px){
  .collage{display:flex;flex-direction:column;gap:clamp(28px,7vw,44px);aspect-ratio:auto}
  .collage__fig{grid-column:auto;grid-row:auto}
  .collage__fig img{height:auto;aspect-ratio:4/3;box-shadow:8px 8px 0 var(--ink)}
  .collage__fig--anchor img{aspect-ratio:3/2}
  .collage__label{position:static;display:inline-block;margin-top:12px;box-shadow:4px 4px 0 var(--accent)}
}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:15px;line-height:1;letter-spacing:.01em;
  padding:13px 22px;border-radius:var(--radius-btn);border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn-primary{
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  box-shadow:0 1px 2px rgba(18,16,12,.14);
}
.btn-primary:hover{transform:translateY(-1px);background:#ec5f24;box-shadow:0 6px 18px rgba(255,106,44,.28)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{transform:translateY(-1px);border-color:var(--ink);background:rgba(26,26,24,.04)}
.btn-lg{font-size:16px;padding:15px 28px}
.btn-on-dark.btn-secondary{color:var(--dark-text);border-color:var(--dark-text)}
.btn-on-dark.btn-secondary:hover{background:rgba(242,242,240,.1)}

/* ---- Nav ---------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.nav__right{display:flex;align-items:center;gap:32px}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;
  color:var(--muted);transition:color .15s ease;
}
.nav__links a:hover{color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:16px}
.nav__cta .btn{padding:10px 18px;font-size:15px}
.nav__toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px}
.nav__mobile{display:none}
main{padding-top:var(--nav-h)}

/* ---- Hero --------------------------------------------------------------- */
#inicio{padding-top:clamp(28px,4vw,52px)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero__subhead{margin:20px 0 28px;max-width:34em}
.hero__hook{margin:0 0 16px;max-width:34em;font-family:var(--sans);font-weight:400;
  font-size:15px;line-height:1.5;color:var(--muted)}
.hero__hook .accent{font-weight:500}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hero__subline{margin-top:14px;flex-basis:100%;font-family:var(--sans);font-size:14px;color:var(--muted)}
.hero__figure{margin:0}
.hero__figure img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.hero__figcaption{margin-top:14px;font-family:var(--sans);font-size:13px;color:var(--muted)}
/* Captura de correo en línea (hero) — único destino de conversión */
.hero__form{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;max-width:560px;margin-top:8px}
.hero__form .btn{flex:0 0 auto;white-space:nowrap}
.hero__form input[type=email]{
  flex:1 1 220px;min-width:0;font-family:var(--sans);font-size:16px;
  padding:13px 16px;border:1.5px solid #cfc9c0;border-radius:var(--radius-btn);
  background:#fff;color:var(--ink);box-shadow:inset 0 1px 2px rgba(18,16,12,.05);
}
.hero__form input[type=email]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,44,.15)}
.hero__form input[type=email]::placeholder{color:var(--muted)}
.hero__formnote{margin-top:12px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.hero__proof{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.hero__proof::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* Anclas: caen limpias bajo el nav fijo, no tapadas */
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---- Split (bio) -------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.split__media figure{margin:0}
.split__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 15%;
  border-radius:var(--radius);border:1px solid var(--line);
}
.bio__role{
  margin:10px 0 22px;font-family:var(--sans);font-weight:600;
  font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
}
.bio__copy{margin-bottom:24px;max-width:40em}
.bio__list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.bio__list li{padding-left:22px;position:relative}
.bio__list li::before{content:"—";position:absolute;left:0;color:var(--accent);font-family:var(--mono)}
.bio__list strong{font-weight:600}

/* thesis pull-quote */
.pullquote{
  border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:clamp(32px,4vw,44px) 0 0;
  font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);line-height:1.4;font-style:italic;
}
.pullquote span{font-style:normal}   /* sin naranja; la barra lateral queda como único acento */

/* ---- Method (P.R.O.) ---------------------------------------------------- */
.section__head{margin-bottom:clamp(40px,6vw,72px);max-width:44em}
.section__head--center{max-width:none;text-align:center;margin-inline:auto}
.section__sub{margin:16px auto 0;max-width:38em;font-family:var(--sans);
  font-size:clamp(16px,1.8vw,18px);line-height:1.6;color:var(--muted)}
.h2--xl{font-size:clamp(30px,4.6vw,48px);letter-spacing:-.02em}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cards-3--process{gap:48px}
.card{
  position:relative;
  background:#fff;border:0;border-radius:var(--radius);
  padding:32px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 2px rgba(18,16,12,.04), 0 10px 28px rgba(18,16,12,.07);
}
/* Conector visual: las tarjetas se leen como un proceso P → R → O */
.cards-3--process .card:not(:last-child)::after{
  content:"→";position:absolute;top:50%;right:-38px;transform:translateY(-50%);
  font-family:var(--sans);font-size:24px;color:var(--accent);opacity:.5;
  line-height:1;pointer-events:none;
}
.card__badge{
  font-family:var(--mono);font-weight:700;font-size:20px;color:var(--accent);
  width:48px;height:48px;border-radius:50%;background:rgba(255,106,44,.12);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.card p{font-size:16px}
.card p strong{font-weight:600}
.card .prob{color:#9A958D;font-style:italic}
.card .prob strong{font-style:normal}
.card .sol{color:var(--ink)}

/* ---- Essays (feed editorial premium) ------------------------------------ */
.essays{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,40px);margin-bottom:0}
.essays__status{grid-column:1/-1;padding:8px 0}
/* Toda la tarjeta es un enlace */
.essay{
  display:flex;flex-direction:column;gap:12px;min-height:100%;
  color:inherit;text-decoration:none;
}
.essay__thumb{display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-alt)}
.essay__thumb img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--radius-sm);
  transition:filter .3s ease;
}
/* Hover premium: oscurecimiento ligerísimo de la imagen, sin zoom exagerado */
.essay:hover .essay__thumb img{filter:brightness(.94)}
/* Fecha: sans, gris medio, mayúsculas y con tracking */
.essay__date{
  margin:2px 0 0;font-family:var(--sans);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
}
/* Título: serif, oscuro, generoso y con interlineado que respira */
.essay__title{
  margin:0;font-family:var(--serif);font-weight:600;
  font-size:21px;line-height:1.35;color:var(--ink);   /* fijo: títulos idénticos en las 3 cards */
  transition:color .2s ease;
}
.essay:hover .essay__title{color:var(--accent)}
/* Extracto: dos líneas en gris suave, truncado con elipsis */
.essay__excerpt{
  margin:0;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}

.essays-foot{text-align:center;margin-top:clamp(18px,2vw,26px)}
.link-arrow{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.link-arrow:hover{color:var(--accent)}

/* ---- Live event (opcional) --------------------------------------------- */
.live{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;background:var(--bg);
}
.live__body{display:flex;flex-direction:column;gap:6px}

/* ---- Dark CTA ----------------------------------------------------------- */
.cta-final{background:var(--dark);color:var(--dark-text);text-align:center}
.cta-final .h2{color:var(--dark-text);max-width:16em;margin-inline:auto}
.cta-final__line{color:var(--dark-text);opacity:.85;max-width:34em;margin:18px auto 28px}
/* Captura de correo en la banda oscura — mismo formato que el hero */
.cta-final__form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:520px;margin:0 auto}
.cta-final__form input[type=email]{
  flex:1 1 240px;min-width:0;font-family:var(--sans);font-size:16px;
  padding:14px 16px;border:1.5px solid transparent;border-radius:var(--radius-btn);
  background:#fff;color:var(--ink);
}
.cta-final__form input[type=email]:focus{box-shadow:0 0 0 3px rgba(255,106,44,.4)}
.cta-final__form input[type=email]::placeholder{color:var(--muted)}
.cta-final__form .btn{flex:0 0 auto;white-space:nowrap}
.cta-final__note{margin-top:14px;font-family:var(--sans);font-size:13px;color:var(--dark-text);opacity:.6}
.cta-final .eyebrow{color:rgba(242,242,240,.55)}   /* label sobre banda oscura: gris claro, sin naranja */

/* ---- Footer ------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding-block:clamp(40px,6vw,64px)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px}
.footer h4{font-family:var(--mono);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px}
.footer a{color:var(--muted);transition:color .15s ease}
.footer a:hover{color:var(--ink)}
.footer__tag{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:12px}
.footer__links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer__links a{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.footer__ico{flex-shrink:0;opacity:.7}
.footer__links a:hover .footer__ico{opacity:1}
.footer__bottom{border-top:1px solid var(--line);padding-top:24px}
.footer__bottom p{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* ---- Accessibility: focus + reduced motion ------------------------------ */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px}
  .hero__figure{order:2}
  .split{grid-template-columns:1fr;gap:32px}
  .split__media{order:1}          /* en móvil, la foto se apila bajo el texto */
  .cards-3{grid-template-columns:1fr}
  .cards-3--process .card:not(:last-child)::after{
    content:"↓";top:auto;right:auto;left:50%;bottom:-36px;transform:translateX(-50%)}
  .essays{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* Nav colapsa a menú antes de que se apriete (tablet) */
@media (max-width:860px){
  .nav__right{display:none}
  .nav__toggle{display:inline-flex}
  .nav__mobile{
    display:none;position:fixed;top:var(--nav-h);left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:12px var(--pad-x) 20px;
  }
  .nav__mobile.open{display:block}
  .nav__mobile a{display:block;padding:12px 0;font-family:var(--mono);font-size:15px;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav__mobile .btn{display:flex;margin-top:16px;width:100%;font-family:var(--sans)}
  .nav__mobile .btn:last-child{border-bottom:0}
}
@media (max-width:640px){
  .footer__grid{grid-template-columns:1fr}
  .hero__form input[type=email]{flex-basis:100%}
  .hero__form .btn{width:100%}
}