/* ===========================================================
   TERCERA LETRA — Sistema editorial "PRENSA" v3
   Aesthetic: publicación impresa / broadsheet literario.
   Paper + ink + tinta roja. Fraunces display, Inter texto,
   JetBrains Mono para folios y metadata.
   =========================================================== */

:root{
  --ink:#0E0E0C;
  --ink-soft:#2A2722;
  --paper:#F4F1EA;
  --paper-2:#EAE4D6;
  --paper-3:#E2DAC9;
  --sand:#C9A88A;
  --muted:#6B675E;
  --muted-2:#8A857A;
  --accent:#D64A1E;
  --accent-ink:#B23C16;
  --accent-2:#003152;       /* navy tinta — color secundario (evidencia/datos) */
  --accent-2-soft:#3A6BAE;
  --tint-blue:#ADDFF1;      /* azul suave — tinte de sección */
  --success:#4A6741;        /* verde oliva — estado OK de formulario */
  --error:#9B2C1A;          /* rojo oscuro — estado error (distinto del rojo de marca) */
  --line:rgba(14,14,12,.18);
  --line-soft:rgba(14,14,12,.10);
  --line-strong:rgba(14,14,12,.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.no-js .reveal{opacity:1!important;transform:none!important}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}
/* grano de papel sutil */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
a{text-decoration:none;color:inherit}
::selection{background:rgba(214,74,30,.2)}

/* ---------- Tipografía ---------- */
.display{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-variation-settings:'opsz' 144,'SOFT' 30,'WONK' 1;
  letter-spacing:-0.035em;line-height:.93;
}
.display-md{
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-variation-settings:'opsz' 120,'SOFT' 24,'WONK' 0;
  letter-spacing:-0.02em;line-height:1.0;
}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:400;font-variation-settings:'opsz' 72,'SOFT' 16;}
.serif-it{font-family:'Fraunces',Georgia,serif;font-style:italic;font-variation-settings:'opsz' 72,'SOFT' 40;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}

.folio{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.folio-accent{color:var(--accent);}
.kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
}
.hl{color:var(--accent);}

/* número de sección grande en el margen */
.secmark{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;
  color:var(--accent);display:flex;align-items:center;gap:.6rem;
}
.secmark::before{content:"§";font-size:1rem;opacity:.8;}

/* ---------- Reglas y motivo de 3 líneas ---------- */
.rule{height:1px;background:var(--line);width:100%}
.rule-ink{height:1.5px;background:var(--ink);width:100%}
.rule3{display:flex;flex-direction:column;gap:5px;width:100%}
.rule3 i{display:block;height:2px;background:var(--accent)}
.rule3 i:nth-child(1){opacity:1}
.rule3 i:nth-child(2){opacity:.55}
.rule3 i:nth-child(3){opacity:.25}
.mark3{display:inline-flex;flex-direction:column;gap:4px;width:40px}
.mark3 i{height:3px;background:var(--accent);display:block}
.mark3 i:nth-child(1){opacity:1}.mark3 i:nth-child(2){opacity:.55}.mark3 i:nth-child(3){opacity:.25}

/* ---------- Acciones (NO pills) ---------- */
.act{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);padding-bottom:.35rem;
  border-bottom:1.5px solid var(--ink);transition:gap .22s,color .22s,border-color .22s;
}
.act:hover{gap:1rem;color:var(--accent);border-color:var(--accent)}
.act-accent{color:var(--accent);border-color:var(--accent)}
.act-paper{color:var(--paper);border-color:var(--paper)}
.act-paper:hover{color:var(--accent);border-color:var(--accent)}
/* bloque sólido, usar con mesura */
.act-block{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper);
  font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.6rem;transition:background .22s,transform .22s;
}
.act-block:hover{background:var(--accent);transform:translateY(-1px)}

/* ---------- Nav / Masthead ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(244,241,234,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--ink)}
.nav-link{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;position:relative;
}
.nav-link:hover,.nav-link.active{color:var(--ink)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--accent)}

/* ---------- Índice editorial (productos) ---------- */
.idx-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:baseline;
  padding:1.9rem 0;border-top:1px solid var(--line);transition:padding-left .3s,background .3s;
  position:relative;
}
.idx-row:last-child{border-bottom:1px solid var(--line)}
.idx-row::before{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--accent);transition:width .35s ease}
.idx-row:hover::before{width:100%}
.idx-row:hover{padding-left:1.2rem}
.idx-num{font-family:'Fraunces',serif;font-weight:300;font-size:2.4rem;line-height:.8;color:var(--accent);font-variation-settings:'opsz' 144}

/* ---------- Drop cap ---------- */
.dropcap::first-letter{
  font-family:'Fraunces',serif;font-weight:300;float:left;font-size:4.6rem;line-height:.72;
  padding:.4rem .6rem .1rem 0;color:var(--accent);font-variation-settings:'opsz' 144,'SOFT' 60;
}

/* ---------- chips / roster ---------- */
.chip{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;
  border:1px solid var(--line);color:var(--muted);background:transparent;
}

/* ---------- Secciones ---------- */
.sec-paper{background:var(--paper)}
.sec-paper2{background:var(--paper-2)}
.sec-ink{background:var(--ink);color:var(--paper)}
.sec-ink .folio,.sec-ink .mono{color:var(--muted-2)}

/* ---------- Reveal robusto (class-based) ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.on{opacity:1;transform:none}
.rd1{transition-delay:.06s}.rd2{transition-delay:.16s}.rd3{transition-delay:.28s}.rd4{transition-delay:.42s}
@media (prefers-reduced-motion: reduce){.reveal{transition:none!important;opacity:1!important;transform:none!important}}

/* ---------- Mobile menu ---------- */
.mmenu{transform:translateX(100%);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.mmenu.open{transform:translateX(0)}

/* ---------- Escalas ---------- */
.h1-hero{font-size:clamp(3rem,7vw,6.5rem)}
@media(max-width:640px){.h1-hero{font-size:clamp(2.5rem,12vw,3.6rem)}}
.h2-sec{font-size:clamp(2rem,4.4vw,3.4rem)}

/* contenedor con líneas de columna visibles (broadsheet) */
.broadsheet{position:relative}
.col-rule{border-left:1px solid var(--line)}

/* ---------- Helpers tipográficos Fraunces ----------
   Reemplazan la clase Tailwind `font-display` (que caía en serif genérica
   sin variation-settings). Aplican Fraunces real con el opsz correcto;
   el peso y el tamaño se siguen controlando con utilidades (font-light, etc.). */
.fr-num{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144}  /* cifras / ledger grandes */
.fr-disp{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 90}  /* nombres / títulos display medianos */

/* ---------- Override idx-row sobre tinta (consolidado) ----------
   Antes inline en index/casos/editorial/radar. */
.sec-ink .idx-row{border-color:rgba(244,241,234,.16)!important}
.sec-ink .idx-row::before{background:var(--accent)}

/* ---------- Ledger de cifras (consolidado: casos/editorial/equipo) ---------- */
.ledger{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.ledger-cell{padding:2rem 0}
.ledger-num{font-family:'Fraunces',serif;font-weight:300;line-height:.85;font-variation-settings:'opsz' 144;font-size:clamp(2.6rem,5vw,4rem)}

/* ---------- Número de servicio grande (consolidado: servicios + equipo) ---------- */
.svc-num{font-family:'Fraunces',serif;font-weight:300;line-height:.8;font-size:clamp(3.5rem,7vw,6rem);font-variation-settings:'opsz' 144}

/* ---------- Lista con barra roja como bullet (consolidado desde servicios) ---------- */
.list-item{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;font-size:.92rem;line-height:1.55;color:var(--ink)}
.list-item::before{content:"";width:14px;height:2px;background:var(--accent);margin-top:.7rem;flex-shrink:0}

/* ---------- Portada de publicación con imagen real (editorial) ----------
   Reemplaza los .plate tipográficos placeholder por portadas reales. */
.plate-img{display:block;position:relative;overflow:hidden;border:1.5px solid var(--ink);transition:transform .3s ease}
.plate-img:hover{transform:translateY(-4px)}
.plate-img img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.plate-img-auto img{aspect-ratio:auto}  /* portada apaisada/cuadrada: mostrar completa sin recorte */
.plate-caption{position:absolute;bottom:0;left:0;right:0;padding:1.2rem 1.4rem;
  background:linear-gradient(to top,rgba(14,14,12,.85) 0%,rgba(14,14,12,.4) 60%,transparent 100%)}
.plate-caption .ptag{color:var(--accent)!important;display:block;margin-bottom:.4rem}
.plate-caption .ptitle{color:var(--paper)!important;display:block;font-size:1.1rem}

/* ---------- Accesibilidad ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.75rem 1.1rem}
.skip-link:focus{left:.5rem;top:.5rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
.fi:focus-visible{outline-offset:0}