/* ═══════════════════════════════════════════════════════════
   rdelavega.lat
   Generado por gen.py, no editar a mano.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink:        #0d0d0d;
  --ink-soft:   #131312;
  --ink-lift:   #181715;
  --paper:      #f0ece4;
  --paper-dim:  #b8b2a6;
  --muted:      #8a8378;
  --rule:       #262622;
  --rule-soft:  #1c1b19;
  --accent:     #e85d20;
  --accent-dim: rgba(232, 93, 32, 0.14);
  --green:      #2d9e5f;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(1.5rem, 5vw, 5rem);
  --stack:  clamp(4rem, 9vw, 8rem);
  --maxw:   1280px;
  --nav-h:  68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* subrayado solo donde de verdad es un enlace dentro de un párrafo */
.article-body p > a,
.article-body li > a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body p > a:hover, .article-body li > a:hover { color: var(--accent); }
button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--accent); color: #fff; padding: .9rem 1.4rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── tipografía compartida ────────────────────────────────── */

.eyebrow {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 1.1rem; display: block;
}

.display {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0; color: var(--paper);
}
.display em { font-style: italic; color: var(--accent); }

h2.headline {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 1.2rem; color: var(--paper);
}

h3.sub {
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  line-height: 1.3; letter-spacing: -0.01em;
  margin: 0 0 .7rem; color: var(--paper);
}

.lede { font-size: 1.05rem; line-height: 1.7; color: var(--paper-dim);
  max-width: 62ch; margin: 0 0 2rem; }

.meta { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); }

/* ── layout ───────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

section.band { padding-block: var(--stack); border-top: 1px solid var(--rule); }
section.band:first-of-type { border-top: none; }
section.band.tint { background: var(--ink-soft); }

.band-head { max-width: 68ch; margin-bottom: 3.2rem; }

/* ── nav ──────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 200; height: var(--nav-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding-inline: var(--gutter);
  background: rgba(13, 13, 13, 0.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .25s, border-color .25s;
}
/* sombra sutil en cuanto la página se despega del tope */
.nav.is-stuck { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); border-bottom-color: #2f2e2a; }

/* el ancla de 'saltar al contenido' no debe quedar bajo el nav fijo */
:target { scroll-margin-top: calc(var(--nav-h) + 1rem); }

.nav-brand {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--paper); text-decoration: none;
  white-space: nowrap; margin-right: auto;
}
.nav-brand:hover { color: var(--accent); }

.nav-menu { display: flex; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding-block: .35rem; border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s; white-space: nowrap;
}
.nav-menu a:hover { color: var(--paper); }
.nav-menu a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--accent); }

/* la marca debe leerse como enlace al inicio */
.nav-brand { position: relative; }
.nav-brand::after {
  content: '\2302'; margin-left: .5rem; opacity: 0;
  transition: opacity .18s; font-size: .9em;
}
.nav-brand:hover::after { opacity: .7; }

.nav-side { display: flex; align-items: center; gap: .7rem; }

.lang-switch { display: flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.lang-switch a {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  padding: .38rem .6rem; color: var(--muted);
  transition: background .18s, color .18s;
}
.lang-switch a:hover { color: var(--paper); }
.lang-switch a[aria-current="true"] { background: var(--accent); color: #fff; }

.nav-cta {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  padding: .5rem 1rem; background: var(--accent); color: #fff;
  border: none; cursor: pointer; white-space: nowrap; transition: background .18s;
}
.nav-cta:hover { background: #c94a15; }

.burger {
  display: none; width: 38px; height: 34px;
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span { display: block; width: 16px; height: 1.5px; background: var(--paper-dim);
  transition: transform .22s, opacity .22s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 199;
  background: var(--ink); padding: 2rem var(--gutter); overflow-y: auto;
}
.drawer.open { display: block; }
.drawer a {
  display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 300;
  color: var(--paper); text-decoration: none;
  padding: .9rem 0; border-bottom: 1px solid var(--rule-soft);
}
.drawer a:hover, .drawer a[aria-current="page"] { color: var(--accent); }
.drawer .drawer-cta, .drawer .drawer-wa {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; text-align: center; border-bottom: none;
  padding: 1rem; margin-top: 1rem;
}
.drawer .drawer-cta { background: var(--accent); color: #fff; }
.drawer .drawer-wa  { background: #25d366; color: #08130c; margin-top: .7rem; }
.drawer .drawer-cta:hover, .drawer .drawer-wa:hover { color: inherit; opacity: .9; }

/* Siete ítems + selector de idioma + CTA necesitan sitio.
   Debajo de 1100px se cede el CTA; debajo de 1000px, el menú entero. */
@media (max-width: 1100px) {
  .nav-cta { display: none; }
  .nav-menu { gap: 1.25rem; }
}
@media (max-width: 1000px) {
  .nav-menu { display: none; }
  .burger { display: flex; }
}

/* ── hero ─────────────────────────────────────────────────── */

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) var(--stack); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .45fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

.status {
  display: inline-flex; align-items: center; gap: .7rem;
  border: 1px solid var(--accent-dim); background: rgba(232, 93, 32, .05);
  padding: .6rem 1rem; margin-bottom: 2rem;
}
.status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 158, 95, .18); flex-shrink: 0;
}
.status span { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper); }

.hero .role {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.35;
  letter-spacing: -0.01em; color: var(--paper); margin: 1.6rem 0 1rem; max-width: 30ch;
}
.hero .pitch { font-size: 1.02rem; line-height: 1.75; color: var(--paper-dim);
  max-width: 54ch; margin: 0 0 1.2rem; }
.hero .pitch strong { color: var(--paper); font-weight: 700; }
.hero .now {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  border-left: 2px solid var(--accent); padding-left: .9rem;
  margin: 0 0 2.2rem; line-height: 1.5;
}

/* retrato: círculo contenido, acompaña sin competir con el titular */
.portrait {
  width: clamp(150px, 20vw, 240px);
  aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; margin-inline: auto;
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 6px rgba(232, 93, 32, .06);
}
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .portrait { order: -1; margin-inline: 0; width: clamp(120px, 32vw, 170px); }
}

/* ── botones ──────────────────────────────────────────────── */

.btns { display: flex; flex-wrap: wrap; gap: .8rem; }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .85rem 1.7rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: #c94a15; }
.btn-line { border-color: var(--rule); color: var(--paper-dim); background: none; }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }
.btn-wa { background: #25d366; color: #08130c; }
.btn-wa:hover { background: #1eb857; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── estadísticas ─────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); }
.stat { padding: 1.9rem 1.5rem; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: none; }
.stat b {
  display: block; font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1;
  color: var(--accent); margin-bottom: .6rem;
}
.stat span { font-size: .82rem; line-height: 1.5; color: var(--paper-dim); display: block; }

@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--rule); }
}

/* ── rejillas de tarjetas ─────────────────────────────────── */

.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card { background: var(--ink); padding: 2.2rem 1.9rem; transition: background .2s; }
.card:hover { background: var(--ink-lift); }

/* tarjeta que además es enlace: flecha en vez de subrayado */
a.card { display: block; position: relative; }
a.card::after {
  content: '\2192'; position: absolute; right: 1.6rem; bottom: 1.6rem;
  color: var(--accent); opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
}
a.card:hover::after { opacity: 1; transform: translateX(0); }
a.card:hover h3.sub { color: var(--accent); }
.card .num { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  color: var(--accent); display: block; margin-bottom: 1.1rem; }
.card p { font-size: .92rem; line-height: 1.65; color: var(--paper-dim); margin: 0 0 1rem; }
.card .tag {
  display: inline-block; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: .3rem; line-height: 1.5;
}

@media (max-width: 940px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ── entregables (línea de tiempo) ────────────────────────── */

.timeline { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tl-item { background: var(--ink); padding: 1.6rem 1.9rem;
  display: grid; grid-template-columns: 150px 1fr; gap: 1.8rem; align-items: baseline; }
.tl-item .when { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); }
.tl-item p { margin: .4rem 0 0; font-size: .9rem; line-height: 1.65; color: var(--paper-dim); }
@media (max-width: 700px) { .tl-item { grid-template-columns: 1fr; gap: .5rem; } }

/* ── modelo operativo ─────────────────────────────────────────
   Un Gantt real de una recuperacion. Las barras se colocan por
   su ventana verdadera en semanas y por eso se traslapan: esa
   forma escalonada es la informacion, no la decoracion.
   ─────────────────────────────────────────────────────────── */

/* el nav fijo no debe tapar el destino cuando el scroll salta */
.opmodel, .op-panels { scroll-margin-top: calc(var(--nav-h) + 1.2rem); }

.opmodel { border: 1px solid var(--rule); background: var(--ink); }

/* regla de tiempo */
.op-scale {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule); padding: .8rem 1.4rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.op-scale span { position: relative; padding-left: .7rem; }
.op-scale span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 9px; background: var(--rule);
}

/* la pista: 12 columnas, una por semana */
.op-track {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: .5rem 0; padding: 1.4rem;
  background-image: repeating-linear-gradient(
    to right, var(--rule-soft) 0 1px, transparent 1px calc(100% / 12));
}

.op-bar {
  grid-column: var(--from) / var(--to);
  display: flex; flex-direction: column; gap: .25rem;
  text-align: left; cursor: pointer;
  padding: .85rem 1rem;
  background: var(--ink-lift);
  border: 1px solid var(--rule); border-left: 2px solid var(--muted);
  transition: border-color .18s, background .18s, transform .18s;
  min-width: 0;
}
.op-bar:hover { background: #1f1d1a; border-left-color: var(--accent); transform: translateX(2px); }
.op-bar.on {
  background: var(--accent-dim); border-color: rgba(232,93,32,.35);
  border-left-color: var(--accent);
}
.op-num {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; color: var(--accent);
}
.op-name {
  font-family: var(--sans); font-weight: 700; font-size: .84rem;
  line-height: 1.25; color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-bar.on .op-name { color: var(--paper); }
.op-when {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

/* el detalle */
.op-panels { border-top: 1px solid var(--rule); padding: 1.8rem; min-height: 150px; }
/* acordeón cerrado en móvil: sin panel no debe quedar un hueco */
.op-panels.empty { min-height: 0; padding: 0; border-top: none; }
.op-panel { display: none; max-width: 68ch; }
.op-panel.on { display: block; }
.op-panel .eyebrow { margin-bottom: .7rem; }
.op-panel p { margin: 0; font-size: .95rem; line-height: 1.75; color: var(--paper-dim); }

.op-foot {
  margin: 0; padding: 1.2rem 1.8rem; border-top: 1px solid var(--rule);
  background: var(--ink-soft);
  font-size: .86rem; line-height: 1.6; color: var(--muted);
  border-left: 2px solid var(--green);
}

/* En pantallas chicas un Gantt de 12 columnas es ilegible.
   Se convierte en lista: cada frente ocupa el ancho completo y
   la ventana de tiempo pasa a ser texto, que es lo que importa. */
@media (max-width: 780px) {
  .op-scale { display: none; }
  .op-track {
    grid-template-columns: 1fr; gap: .5rem; padding: 1rem;
    background-image: none;
  }
  .op-bar { grid-column: 1 / -1 !important; }
  .op-name { white-space: normal; }
  .op-panels { padding: 1.4rem 1rem; }
  .op-foot { padding: 1rem; }

  /* el panel se muda aquí dentro, pegado a su barra */
  .op-track > .op-panel {
    grid-column: 1 / -1;
    margin: -.25rem 0 .35rem;
    padding: 1.1rem 1rem 1.2rem;
    background: var(--ink-soft);
    border: 1px solid var(--rule); border-top: none;
    border-left: 2px solid var(--accent);
  }
  .op-track > .op-panel .eyebrow { margin-bottom: .5rem; }
  .op-track > .op-panel p { font-size: .9rem; }
  /* la barra abierta y su texto se leen como una sola pieza */
  .op-bar.on { margin-bottom: 0; }
}

/* Sin JavaScript los paneles no se pueden alternar, asi que se
   muestran todos: el contenido nunca queda inalcanzable. */
.no-js .op-panel { display: block; border-top: 1px solid var(--rule-soft); padding-top: 1.2rem; }
.no-js .op-panel:first-child { border-top: none; padding-top: 0; }
.no-js .op-track { pointer-events: none; }

/* ── casos ────────────────────────────────────────────────── */

.case { border: 1px solid var(--rule); margin-bottom: 1.4rem; background: var(--ink); }
.case > summary {
  list-style: none; cursor: pointer; padding: 1.8rem 1.9rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center;
}
.case > summary::-webkit-details-marker { display: none; }
.case .case-metric { font-family: var(--sans); font-weight: 800; font-size: 1.9rem;
  color: var(--accent); line-height: 1; min-width: 4.2rem; }
.case .case-client { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .35rem; }
.case .case-title { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--paper); }
.case .chev { color: var(--muted); transition: transform .22s; }
.case[open] .chev { transform: rotate(180deg); }
.case[open] > summary { border-bottom: 1px solid var(--rule); }
.case-body { padding: 1.9rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.case-body h4 { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; }
.case-body p, .case-body li { font-size: .89rem; line-height: 1.7; color: var(--paper-dim); }
.case-body ul { margin: 0; padding-left: 1.1rem; }
.case-body li { margin-bottom: .5rem; }
.case-body strong { color: var(--paper); }
.case-context { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 1.4rem;
  font-size: .84rem; line-height: 1.7; color: var(--muted); }
@media (max-width: 860px) {
  .case > summary { grid-template-columns: auto 1fr; }
  .case .chev { display: none; }
  .case-body { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ── clientes ─────────────────────────────────────────────── */

.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding-block: 1.6rem; }
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: slide 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.logo-chip { white-space: nowrap; }
.logo-chip b { display: block; font-family: var(--sans); font-weight: 700;
  font-size: .95rem; color: var(--paper-dim); }
.logo-chip span { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ── listas de señales ────────────────────────────────────── */

.signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.signals li { background: var(--ink); padding: 1.05rem 1.4rem;
  font-size: .92rem; color: var(--paper-dim); display: flex; gap: .9rem; align-items: baseline; }
.signals li::before { content: '\2022'; color: var(--accent); flex-shrink: 0; }

/* ── trayectoria ──────────────────────────────────────────── */

.roles { border-top: 1px solid var(--rule); }
.role-row { display: grid; grid-template-columns: 140px 1fr; gap: 2rem;
  padding-block: 2rem; border-bottom: 1px solid var(--rule); }
.role-row .years { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  color: var(--accent); padding-top: .25rem; }
.role-row .org { font-family: var(--sans); font-weight: 800; font-size: 1.15rem; color: var(--paper); }
.role-row .title { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: .35rem 0 .8rem; }
.role-row p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--paper-dim); max-width: 68ch; }
@media (max-width: 700px) { .role-row { grid-template-columns: 1fr; gap: .5rem; } }

.creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.creds > div { background: var(--ink); padding: 1.6rem 1.4rem; }
.creds h4 { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.creds ul { list-style: none; margin: 0; padding: 0; }
.creds li { font-size: .84rem; color: var(--paper-dim); padding-block: .3rem; }
@media (max-width: 940px) { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .creds { grid-template-columns: 1fr; } }

/* ── testimonios ──────────────────────────────────────────── */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.quote { background: var(--ink); padding: 2.1rem 1.9rem; }
.quote blockquote { margin: 0 0 1.4rem; font-family: var(--serif); font-size: 1.12rem;
  font-weight: 300; line-height: 1.55; color: var(--paper); }
.quote blockquote::before { content: '\201C'; color: var(--accent); }
.quote blockquote::after  { content: '\201D'; color: var(--accent); }
.quote .who { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
@media (max-width: 940px) { .quotes { grid-template-columns: 1fr; } }

/* ── herramientas: diagnóstico ────────────────────────────── */

.tool { border: 1px solid var(--rule); background: var(--ink-soft); padding: clamp(1.6rem, 4vw, 2.8rem); }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; }
.chip { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  padding: .6rem 1rem; background: none; cursor: pointer;
  border: 1px solid var(--rule); color: var(--paper-dim);
  transition: border-color .18s, color .18s, background .18s; text-align: left; }
.chip:hover { border-color: var(--accent); color: var(--paper); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }

.field { width: 100%; background: var(--ink); border: 1px solid var(--rule);
  color: var(--paper); padding: .9rem 1rem; font-size: .93rem;
  font-family: var(--sans); resize: vertical; }
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--accent); }

.field-label { display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }

.tool-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.3rem; }

/* aviso de validación: tiene que verse, no esconderse en un placeholder */
.tool-note { display: none; margin: .9rem 0 0; padding: .7rem .9rem;
  border-left: 2px solid var(--accent); background: var(--accent-dim);
  font-size: .88rem; line-height: 1.6; color: var(--paper); }
.tool-note.on { display: block; }

.thinking { display: none; align-items: center; gap: .9rem; margin-top: 1.6rem; }
.thinking.on { display: flex; }
.thinking .ring { width: 15px; height: 15px; border: 2px solid var(--rule);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.result { display: none; margin-top: 1.8rem; border-left: 2px solid var(--accent); padding-left: 1.5rem; }
.result.on { display: block; }
.result .out { font-size: .97rem; line-height: 1.8; color: var(--paper);
  white-space: pre-wrap; margin-bottom: 1.6rem; }

/* ── herramientas: calculadora ────────────────────────────── */

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

.calc-field { margin-bottom: 1.5rem; }
.calc-field .val { font-family: var(--sans); font-weight: 800; font-size: 1.25rem;
  color: var(--accent); margin-bottom: .5rem; display: block; }
input[type="range"] { width: 100%; height: 2px; background: var(--rule);
  appearance: none; -webkit-appearance: none; cursor: pointer; margin: .5rem 0; }
input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none;
  border-radius: 50%; background: var(--accent); cursor: pointer; }
/* Desplegables.
   La flecha que dibuja el navegador es del color del sistema y sobre
   este fondo casi no se ve, asi que un campo con opciones parecia un
   campo de texto. Se sustituye por una en naranja, del mismo lenguaje
   que el resto del sitio. */
select.field {
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e85d20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
}
select.field:hover { border-color: #3a3934; }
select.field::-ms-expand { display: none; }

.readout { border: 1px solid var(--rule); }
.readout > div { padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--rule); }
.readout > div:last-child { border-bottom: none; }
.readout .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .5rem; }
.readout .v { font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--accent); line-height: 1; }
.readout .hint { font-size: .78rem; color: var(--muted); margin-top: .5rem; display: block; }
.readout .proj { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.readout .proj div { flex: 1; min-width: 90px; }
.readout .proj b { display: block; font-family: var(--sans); font-weight: 800;
  font-size: 1.15rem; color: var(--paper); }

/* ── playbook ─────────────────────────────────────────────── */

.playbook { border: 1px solid var(--accent-dim); background: rgba(232,93,32,.04);
  padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between; }
.playbook p { margin: .5rem 0 0; font-size: 1rem; color: var(--paper); max-width: 46ch; }

/* ── pie de herramienta ───────────────────────────────────────
   La línea que cierra cada una de las tres herramientas. A veces
   es un enlace a un artículo, a veces un desplegable con la
   mecánica: se ven idénticas para que el bloque se lea parejo.
   ─────────────────────────────────────────────────────────── */

.tool-more { margin: 2rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.tool-more > summary, .tool-more > a {
  display: inline-block; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .18s;
}
.tool-more > summary::-webkit-details-marker { display: none; }
.tool-more > summary:hover, .tool-more > a:hover { color: var(--paper); }
.tool-more[open] > summary { margin-bottom: 1.5rem; }

.more-body { max-width: 78ch; }
.more-body p { font-size: .9rem; line-height: 1.75; color: var(--paper-dim); margin: 0 0 1.1rem; }
.more-body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.more-body li { font-size: .89rem; line-height: 1.75; color: var(--paper-dim);
  margin-bottom: .85rem; padding-left: .2rem; }
.more-body li::marker { color: var(--accent); font-family: var(--mono); font-size: .78rem; }
.more-body b { color: var(--paper); font-family: var(--sans); font-weight: 700; }
.more-caveat { border-left: 2px solid var(--rule); padding-left: 1rem;
  font-size: .84rem !important; color: var(--muted) !important; margin-bottom: 0 !important; }

/* ── entregables de muestra ───────────────────────────────────
   Se dibujan como el documento que son, no como una captura.
   Asi se ve el formato de verdad y ademas se puede leer en un
   telefono, cosa que una imagen de un PDF nunca logra.
   ─────────────────────────────────────────────────────────── */

.art-warn {
  margin: -1.6rem 0 2.2rem; padding: .8rem 1.1rem;
  border-left: 2px solid var(--accent); background: var(--accent-dim);
  font-size: .85rem; line-height: 1.6; color: var(--paper); max-width: 76ch;
}

.art-tabs { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-bottom: none; }
.art-tab {
  flex: 1 1 180px; display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.2rem; cursor: pointer; text-align: left;
  background: var(--ink); border: none;
  font-family: var(--sans); font-weight: 700; font-size: .88rem; color: var(--muted);
  border-top: 2px solid transparent; transition: color .18s, background .18s, border-color .18s;
}
.art-tab:hover { color: var(--paper); background: var(--ink-lift); }
.art-tab.on { color: var(--paper); background: var(--ink-soft); border-top-color: var(--accent); }

.art-panels { border: 1px solid var(--rule); background: var(--ink-soft); padding: 1.8rem; }
.art-panels.empty { padding: 0; border: none; }
.art-panel { display: none; }
.art-panel.on { display: block; }
.no-js .art-panel { display: block; margin-bottom: 2.5rem; }

.art-meta { margin-bottom: 1.4rem; }
.art-meta p { margin: .5rem 0 0; font-size: .9rem; line-height: 1.7;
  color: var(--paper-dim); max-width: 72ch; }

/* la hoja */
.sheet { border: 1px solid var(--rule); background: var(--ink); }
.sheet-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border-bottom: 1px solid var(--rule);
}
.sheet-bar > div { background: var(--ink-lift); padding: .9rem 1.1rem; }
.sheet-bar .k {
  display: block; font-family: var(--mono); font-size: .55rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.sheet-bar b { font-family: var(--sans); font-weight: 700; font-size: .9rem; color: var(--paper); }

.sheet-body { padding: 1.4rem; display: grid; gap: 1.6rem; }
.sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.sheet-block h4 {
  margin: 0 0 .8rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.sheet-block h4.ask { color: var(--green); }

.sheet-table { width: 100%; border-collapse: collapse; }
.sheet-table th {
  text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; white-space: nowrap;
}
.sheet-table td {
  padding: .7rem .8rem; border-bottom: 1px solid var(--rule-soft);
  font-size: .85rem; line-height: 1.5; color: var(--paper-dim); vertical-align: top;
}
.sheet-table tr:last-child td { border-bottom: none; }
.sheet-table td:first-child { color: var(--paper); }
.num-cell, .th-cell { font-family: var(--mono); font-size: .74rem; white-space: nowrap; }
.th-cell { color: var(--paper) !important; }
.sheet-table.wide { min-width: 660px; }
.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pill {
  display: inline-block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .28rem .6rem;
  border: 1px solid currentColor; white-space: nowrap;
}
.pill.ok   { color: var(--green); }
.pill.warn { color: var(--accent); }
.pill.bad  { color: #d9534f; }
.pill.idle { color: var(--muted); }

.sheet-list { margin: 0; padding-left: 1.1rem; }
.sheet-list li { font-size: .85rem; line-height: 1.65; color: var(--paper-dim); margin-bottom: .6rem; }
.sheet-list li::marker { color: var(--accent); }
.sheet-list.ask li::marker { color: var(--green); }

.sheet-steps { margin: 0; padding-left: 1.2rem; }
.sheet-steps li { font-family: var(--mono); font-size: .78rem; line-height: 1.6;
  color: var(--paper-dim); margin-bottom: .6rem; }
.sheet-steps li::marker { color: var(--accent); font-size: .7rem; }

.sheet-back { margin: 0; font-size: .85rem; line-height: 1.7; color: var(--paper-dim);
  border-left: 2px solid var(--green); padding-left: 1rem; }
.sheet-note {
  margin: 0; padding: .9rem 1.1rem; border-top: 1px solid var(--rule);
  background: var(--ink-soft); font-size: .82rem; color: var(--muted);
}

@media (max-width: 820px) {
  .sheet-bar { grid-template-columns: repeat(2, 1fr); }
  .sheet-cols { grid-template-columns: 1fr; }
}
/* el panel se muda dentro de la fila de pestanas, pegado a la suya */
@media (max-width: 780px) {
  .art-tabs { flex-direction: column; gap: 1px; border-bottom: 1px solid var(--rule); }
  .art-tab { flex: 1 1 100%; border-top: none; border-left: 2px solid transparent; }
  .art-tab.on { border-left-color: var(--accent); }
  .art-tabs > .art-panel {
    background: var(--ink-soft); padding: 1.2rem;
    border-left: 2px solid var(--accent);
  }
  .art-panels:empty, .art-panels.empty { display: none; }
}

@media (max-width: 620px) {
  .art-warn { margin-top: -1rem; }
  .art-panels { padding: 1.1rem; }
  .art-tabs > .art-panel { padding: 1rem; }
  .sheet-body { padding: 1.1rem; gap: 1.3rem; }

  /* La barra de encabezado apilada en cuatro filas es mucho alto
     para nada. En dos columnas se lee de un vistazo. */
  .sheet-bar { grid-template-columns: 1fr 1fr; }
  .sheet-bar > div { padding: .8rem .9rem; }

  /* Una tabla de seis columnas dentro de un telefono no es una
     tabla, es un scroll horizontal escondido en una tarjeta. Aqui
     cada fila se vuelve una ficha y cada celda dice de que columna
     venia, que es la informacion que daba el encabezado. */
  .sheet-scroll { overflow-x: visible; }
  .sheet-table.wide { min-width: 0; }
  .sheet-table, .sheet-table tbody, .sheet-table tr, .sheet-table td { display: block; }
  .sheet-table thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sheet-table tr {
    border: 1px solid var(--rule); background: var(--ink-lift);
    margin-bottom: .6rem; padding: .3rem 0;
  }
  .sheet-table tr:last-child { margin-bottom: 0; }
  .sheet-table td {
    border: none; padding: .45rem .9rem;
    display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; align-items: baseline;
  }
  .sheet-table td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: .54rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--muted); line-height: 1.5;
  }
  .sheet-table td:first-child { color: var(--paper); font-weight: 700; }
  .num-cell, .th-cell { white-space: normal; }
  .pill { white-space: normal; }
}

/* telefonos angostos: la etiqueta se va arriba del dato */
@media (max-width: 400px) {
  .sheet-bar { grid-template-columns: 1fr; }
  .sheet-table td { grid-template-columns: 1fr; gap: .2rem; }
}

/* ── disponibilidad ───────────────────────────────────────── */

.avail { border: 1px solid var(--rule); margin-bottom: 2.5rem; }
.avail-row {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: 1.5rem 1.6rem; border-bottom: 1px solid var(--rule);
}
.avail-row h3 { margin: 0 0 .4rem; font-size: 1rem; }
.avail-row p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--paper-dim); max-width: 70ch; }
.avail-open { background: rgba(45, 158, 95, .05); }

.avail-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: .45rem;
  background: var(--green); box-shadow: 0 0 0 4px rgba(45, 158, 95, .16);
}
.avail-dot.avail-later { background: var(--muted); box-shadow: 0 0 0 4px rgba(138, 131, 120, .14); }

.avail-note {
  margin: 0; padding: 1.2rem 1.6rem; background: var(--ink-soft);
  font-size: .86rem; line-height: 1.65; color: var(--muted); max-width: 78ch;
}

@media (max-width: 620px) {
  .avail-row { padding: 1.2rem; gap: .9rem; }
  .avail-note { padding: 1.1rem 1.2rem; }
}

/* ── FAQ ──────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative; font-family: var(--sans); font-weight: 700;
  font-size: .98rem; color: var(--paper); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .4rem; top: 50%;
  transform: translateY(-50%); color: var(--accent); font-size: 1.3rem; font-weight: 300; }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin: 0 0 1.5rem; padding-right: 2.5rem;
  font-size: .93rem; line-height: 1.75; color: var(--paper-dim); max-width: 76ch; }

/* ── formulario ───────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 660px) { .form-grid { grid-template-columns: 1fr; } }
.form-ok { display: none; border: 1px solid var(--green); padding: 1.6rem;
  background: rgba(45,158,95,.06); }
.form-ok.on { display: block; }
.form-ok b { display: block; font-size: 1.05rem; margin-bottom: .4rem; color: var(--paper); }
.form-ok span { color: var(--paper-dim); font-size: .9rem; }

.contact-lines { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.contact-lines a, .contact-lines div {
  background: var(--ink); padding: 1.2rem 1.4rem; text-decoration: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  color: var(--paper-dim); font-size: .9rem; transition: background .18s;
}
.contact-lines a:hover { background: var(--ink-lift); color: var(--paper); }
.contact-lines .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }

/* ── blog ─────────────────────────────────────────────────── */

.posts { border-top: 1px solid var(--rule); }
.post-row { display: grid; grid-template-columns: 60px 1fr; gap: 2rem;
  padding-block: 2.2rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; transition: background .18s; }
.post-row:hover { background: var(--ink-soft); }
.post-row .idx { font-family: var(--mono); font-size: .68rem; color: var(--accent); padding-top: .3rem; }
.post-row .kicker { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; display: block; }
.post-row h3 { font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.2;
  color: var(--paper); margin: 0 0 .7rem; }
.post-row:hover h3 { color: var(--accent); }
.post-row p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--paper-dim); max-width: 70ch; }
@media (max-width: 620px) { .post-row { grid-template-columns: 1fr; gap: .6rem; } }

.article { max-width: 72ch; margin-inline: auto; }
.article-head { padding-block: clamp(2.5rem, 6vw, 5rem) 2.5rem; border-bottom: 1px solid var(--rule); }
.article-body { padding-block: 3rem; }
.article-body p { font-size: 1.05rem; line-height: 1.85; color: var(--paper-dim); margin: 0 0 1.6rem; }
.article-body h2 { font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25;
  color: var(--paper); margin: 3rem 0 1.2rem; }
.article-body strong { color: var(--paper); }
.article-body .pullquote { border-left: 2px solid var(--accent); padding-left: 1.6rem; margin: 2.5rem 0; }
.article-body .pullquote p { font-family: var(--serif); font-size: 1.35rem; font-weight: 300;
  line-height: 1.5; color: var(--paper); margin: 0; }
.article-body ul, .article-body ol { padding-left: 1.3rem; margin: 0 0 1.6rem; }
.article-body li { font-size: 1.02rem; line-height: 1.8; color: var(--paper-dim); margin-bottom: .7rem; }

.byline { display: flex; align-items: center; gap: 1rem; padding-block: 2rem;
  border-top: 1px solid var(--rule); }
.byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.byline b { display: block; font-size: .92rem; color: var(--paper); }
.byline span { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); }

.comments { border-top: 1px solid var(--rule); padding-block: 2.5rem; }
.comment { border-left: 2px solid var(--rule); padding: .3rem 0 .3rem 1.2rem; margin-bottom: 1.4rem; }
.comment p { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--paper-dim); }
.comment time { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.form-note { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: .6rem 0 0; }

/* ── pie ──────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--rule); padding-block: 2.5rem; background: var(--ink); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot a { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot .copy { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }

/* ── flotantes ────────────────────────────────────────────
   Derecha: WhatsApp y volver arriba.
   Izquierda: el asistente, para no competir con el CTA.
   Ambos respetan el área segura del iPhone.
   ───────────────────────────────────────────────────────── */

.dock, .chat-dock {
  position: fixed; z-index: 300;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column-reverse; align-items: center; gap: .7rem;
}
.dock      { right: calc(1.4rem + env(safe-area-inset-right, 0px)); }
.chat-dock { left:  calc(1.4rem + env(safe-area-inset-left, 0px)); align-items: flex-start; }

.dock-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: none; padding: 0; text-decoration: none;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: transform .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.dock-btn:hover { transform: scale(1.07); }
.dock-btn svg { width: 25px; height: 25px; }

.dock-wa   { background: #25d366; }
.dock-wa svg { fill: #fff; }
.dock-chat { background: var(--accent); color: #fff; }
.dock-chat svg { fill: none; stroke: #fff; stroke-width: 1.9; }
.dock-top {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-lift); border: 1px solid var(--rule); color: var(--paper-dim);
  opacity: 0; pointer-events: none; transition: opacity .22s, color .18s;
}
.dock-top.on { opacity: 1; pointer-events: auto; }
.dock-top:hover { color: var(--accent); border-color: var(--accent); }

/* etiqueta que invita a usar el chat */
.dock-hint {
  position: absolute; left: 62px; bottom: 8px; white-space: nowrap;
  background: var(--ink-lift); border: 1px solid var(--rule);
  padding: .55rem .9rem; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--paper);
  box-shadow: 0 6px 22px rgba(0,0,0,.45); pointer-events: none;
}
.dock-hint::after {
  content: ''; position: absolute; left: -5px; bottom: 14px;
  width: 8px; height: 8px; background: var(--ink-lift);
  border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
}
.chat-dock.chat-open .dock-hint { display: none; }

/* panel del asistente, anclado a la izquierda */
.chat-panel {
  display: none; position: fixed; z-index: 310;
  left: calc(1.4rem + env(safe-area-inset-left, 0px));
  bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 2.8rem));
  max-height: min(560px, 70vh); max-height: min(560px, 70dvh);
  background: var(--ink); border: 1px solid var(--rule);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  flex-direction: column; overflow: hidden;
}
.chat-panel.on { display: flex; }
.chat-head {
  display: flex; align-items: center; gap: .8rem; flex-shrink: 0;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule);
}
.chat-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.chat-head b { display: block; font-size: .88rem; color: var(--paper); }
.chat-head span { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.chat-head button { margin-left: auto; background: none; border: none;
  color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px; }
.chat-head button:hover { color: var(--accent); }
.chat-strip { height: 2px; background: var(--accent); flex-shrink: 0; }
.chat-log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; }
.chat-msg { font-size: .89rem; line-height: 1.65; padding: .7rem .9rem; max-width: 88%;
  overflow-wrap: anywhere; }
.chat-msg.bot  { background: var(--ink-soft); border-left: 2px solid var(--accent); color: var(--paper-dim); }
.chat-msg.me   { background: var(--accent-dim); align-self: flex-end; color: var(--paper); }
.chat-foot { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--rule); flex-shrink: 0; }
.chat-foot input { flex: 1; min-width: 0; background: var(--ink-soft); border: 1px solid var(--rule);
  color: var(--paper); padding: .65rem .8rem; font-size: 16px; }
.chat-foot input:focus { outline: none; border-color: var(--accent); }
.chat-foot button { background: var(--accent); border: none; color: #fff;
  padding: 0 1rem; cursor: pointer; font-family: var(--mono); font-size: .65rem;
  letter-spacing: .14em; text-transform: uppercase; }
.chat-foot button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 620px) {
  .dock      { right: calc(.9rem + env(safe-area-inset-right, 0px)); gap: .55rem; }
  .chat-dock { left:  calc(.9rem + env(safe-area-inset-left, 0px)); }
  .dock, .chat-dock { bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
  .dock-btn { width: 50px; height: 50px; }
  .dock-hint { display: none; }
  /* el panel ocupa el ancho disponible pero deja ver los botones */
  .chat-panel {
    left: calc(.9rem + env(safe-area-inset-left, 0px));
    right: calc(.9rem + env(safe-area-inset-right, 0px));
    bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: min(460px, 62dvh);
  }
}

/* ── modal de agenda ──────────────────────────────────────── */

.cal-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.78); padding: 3vh 3vw;
  align-items: center; justify-content: center;
}
.cal-overlay.on { display: flex; }
.cal-modal {
  width: min(960px, 100%); height: min(720px, 94vh);
  background: var(--ink); border: 1px solid var(--rule);
  display: flex; flex-direction: column; overflow: hidden;
}
.cal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.cal-bar button {
  background: none; border: none; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.cal-bar button:hover { color: var(--accent); }
.cal-modal iframe { flex: 1; width: 100%; border: none; }


/* ═══════════════════════════════════════════════════════════
   PASADA DE MÓVIL
   Reglas transversales para que nada se desborde ni quede
   por debajo del área táctil mínima en un teléfono.
   ═══════════════════════════════════════════════════════════ */

/* Nada puede provocar scroll horizontal.
   Se usa 'clip' y no 'hidden': hidden convierte al elemento en contenedor
   de scroll y eso rompe position:sticky, dejando el nav sin fijarse. */
html, body { max-width: 100%; }
html { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
.wrap, section, .grid, .stats, .creds, .quotes, .timeline, .readout,
.case, .posts, .roles, .contact-lines, .faq { min-width: 0; }

/* palabras largas, URLs y correos parten línea en vez de desbordar */
p, li, h1, h2, h3, h4, blockquote, summary, td, .lede, .card, .chat-msg,
.contact-lines a, .article-body { overflow-wrap: anywhere; word-break: normal; }

/* iOS hace zoom si un campo mide menos de 16px */
@media (max-width: 820px) {
  .field, input, textarea, select { font-size: 16px; }
}

/* área táctil mínima de 44px en todo lo que se toca */
@media (pointer: coarse) {
  .btn { padding-block: 1rem; min-height: 46px; }
  .nav-menu a, .foot a, .lang-switch a { padding-block: .7rem; }
  .lang-switch a { padding-inline: .9rem; }
  .faq summary, .case > summary { min-height: 52px; }
  .contact-lines a { min-height: 56px; }
  .burger { width: 46px; height: 44px; }
  /* deslizadores de la calculadora: pulgar más grande */
  input[type="range"] { height: 26px; background: transparent; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
  input[type="range"]::-moz-range-track { height: 2px; background: var(--rule); }
  /* sin hover en táctil: el marquee no se pausa solo */
  .marquee:hover .marquee-track { animation-play-state: running; }
}

@media (max-width: 620px) {
  :root { --nav-h: 60px; }

  /* la barra superior no debe apretujarse */
  .nav { gap: .8rem; }
  .nav-brand { font-size: .62rem; letter-spacing: .14em; }

  /* jerarquía tipográfica más compacta */
  .hero { padding-block: 2.5rem 3.5rem; }
  .hero .role { font-size: 1rem; margin-top: 1.2rem; }
  .hero .pitch { font-size: .97rem; }
  .lede { font-size: .97rem; }

  /* los botones ocupan el ancho: más fáciles de acertar */
  .btns { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; width: 100%; }
  .playbook { flex-direction: column; align-items: stretch; text-align: left; }
  .playbook .btn { width: 100%; }

  /* tarjetas y celdas con menos aire lateral */
  .card { padding: 1.7rem 1.4rem; }
  .tl-item, .quote { padding: 1.4rem; }
  .case > summary { padding: 1.3rem 1.3rem; gap: 1rem; }
  .case-body { padding: 1.3rem; }
  .case .case-metric { font-size: 1.5rem; min-width: 3.4rem; }
  .case .case-title { font-size: .93rem; }
  .stat { padding: 1.4rem 1.1rem; }
  .readout > div { padding: 1.1rem 1.2rem; }
  .tool { padding: 1.3rem; }

  /* los chips del diagnóstico se apilan legibles */
  .chips { gap: .5rem; }
  .chip { width: 100%; }

  /* proyecciones de la calculadora en fila de tres */
  .readout .proj { gap: .8rem; }
  .readout .proj div { min-width: 0; }
  .readout .proj b { font-size: 1rem; }

  /* contacto directo: etiqueta arriba, dato abajo */
  .contact-lines a, .contact-lines div { flex-direction: column; align-items: flex-start; gap: .3rem; }

  /* pie centrado */
  .foot-grid { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .foot nav { gap: 1rem; }

  /* artículos */
  .article-body p, .article-body li { font-size: 1rem; }
  .article-body .pullquote p { font-size: 1.15rem; }
  .byline { flex-wrap: wrap; }
}

/* teléfonos angostos (360px y menos) */
@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-top: 1px solid var(--rule); }
  .stat:first-child { border-top: none; }
  .case > summary { grid-template-columns: 1fr; }
  .case .case-metric { min-width: 0; }
}

/* pantalla apaisada y baja: el panel del chat no debe tapar todo */
@media (max-height: 520px) {
  .chat-panel { max-height: 78dvh; }
  .drawer a { font-size: 1.3rem; padding: .6rem 0; }
}

/* ── suscripción por RSS ──────────────────────────────────── */

.rss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.rss a {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 3px; white-space: nowrap;
}
.rss a:hover { color: var(--paper); }
.rss .meta { text-transform: none; letter-spacing: 0; font-family: var(--sans);
  font-size: .85rem; color: var(--muted); }

/* ── página 404 ───────────────────────────────────────────── */

.err {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 60ch; margin-inline: auto; padding: 3rem var(--gutter);
}
.err .display { margin-bottom: 1.6rem; }
.err .lede { margin-bottom: 2.5rem; }
.err-links { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); }
.err-links a {
  flex: 1 1 140px; background: var(--ink); padding: 1rem 1.2rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); transition: background .18s, color .18s;
}
.err-links a:hover { background: var(--ink-lift); color: var(--accent); }
.err-note { margin: 2rem 0 0; font-size: .88rem; color: var(--muted); }
.err-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── impresión ────────────────────────────────────────────── */

@media print {
  .nav, .drawer, .dock, .chat-panel, .foot, .tool, .marquee, .cal-overlay { display: none !important; }
  body { background: #fff; color: #111; }
  .display, h2.headline, h3.sub, .card p, .lede { color: #111; }
}