/* =============================================================
   Lic. Kevin A. Zhong — Nutrición Clínica
   Sistema visual «Informe Clínico»
   Programa de identidad farmacéutica × reporte de composición corporal
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --paper:        #F4F6F7;
  --paper-band:   #E7EDEF;
  --paper-edge:   #D6DFE2;
  --navy:         #083756;
  --navy-deep:    #052539;
  --navy-soft:    #16506F;
  --slate:        #414B4C;
  --ink:          #14262F;
  --rule:         #C2CED3;
  --on-navy:      #EAF1F4;
  --on-navy-mute: #9FB6C2;
  --cinnabar:     #B7332A;
  --cinnabar-lit: #E0503F;
  --cinnabar-soft: #F09484;  /* señal cálida para texto pequeño sobre navy */

  /* Tipografia - se conmuta con data-type en <html> para comparar */
  --display: "Figtree", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Segoe UI", system-ui, sans-serif;
  --text: "Figtree", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Segoe UI", system-ui, sans-serif;
  --display-weight: 750;
  --display-track: -0.028em;
  --display-line: 1.08;

  /* Radios - nada queda en escuadra */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevacion blanda */
  --shadow-sm: 0 1px 2px rgba(20,38,47,.05), 0 4px 12px -6px rgba(20,38,47,.10);
  --shadow-md: 0 2px 4px rgba(20,38,47,.05), 0 14px 32px -14px rgba(20,38,47,.16);
  --shadow-lg: 0 30px 60px -24px rgba(5,37,57,.30);

  --gut: clamp(20px, 4vw, 56px);
  --rail: 0px;
  --max: 1280px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 1100px) { :root { --rail: 60px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 18px; } }
@media (min-width: 1280px) { body { font-size: 18.5px; } }

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--cinnabar); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 3px;
}
:is(.field-navy, .field-deep, .hero, .mega, .mnav) :focus-visible {
  outline-color: var(--cinnabar-lit);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.page { padding-left: var(--rail); }

.field {
  padding-block: clamp(64px, 9vw, 128px);
  position: relative;
}
.field-navy { background: var(--navy); color: var(--on-navy); overflow: hidden; }
.field-deep { background: var(--navy-deep); color: var(--on-navy); overflow: hidden; }
.field-band { background: var(--paper-band); }
.field-band + .field-band { padding-top: 0; }

/* ---------- Tipografía ---------- */
.display {
  font-family: var(--display);
  font-weight: var(--display-weight);
  line-height: var(--display-line);
  letter-spacing: var(--display-track);
  margin: 0;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2.display { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.14; }
h3.display { font-size: clamp(1.28rem, 1.8vw, 1.6rem); line-height: 1.26; letter-spacing: -0.018em; }
.display em { font-style: normal; font-weight: 400; opacity: .8; }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--slate);
  max-width: 46ch;
  margin: 0;
}
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .lede { color: var(--on-navy-mute); }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }

/* Rótulo de escala. Sólo sobre un eje, tick o dato. */
.tick-label {
  font-family: var(--text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .tick-label { color: var(--on-navy-mute); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Regla de calibración (borde izquierdo) ---------- */
.calib {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--rail);
  z-index: 60;
  display: none;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  pointer-events: none;
}
@media (min-width: 1100px) { .calib { display: block; } }

.calib__ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule) 0 1px,
    transparent 1px 24px
  );
  background-position: right;
  background-size: 10px 100%;
  background-repeat: repeat-y;
  opacity: .55;
}
.calib__ticks::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule) 0 1px,
    transparent 1px 120px
  );
  background-position: right;
  background-size: 22px 100%;
  background-repeat: repeat-y;
}
.calib__cursor {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--cinnabar);
  top: 0;
  transform: translateY(0);
  will-change: transform;
}
.calib__read {
  position: absolute;
  left: 6px;
  top: 0;
  transform: translateY(6px);
  font-family: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cinnabar);
  font-variant-numeric: tabular-nums;
  will-change: transform;
}
.calib__mark {
  position: absolute;
  left: 0;
  width: 100%;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .7;
  padding-left: 4px;
}

/* ---------- Header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,246,247,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.hdr__bar {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 76px;
}
.hdr__logo { flex: none; display: block; padding-block: 6px; }
.hdr__logo img { height: 46px; width: auto; }
@media (max-width: 640px) { .hdr__logo img { height: 34px; } .hdr__bar { height: 64px; } }

.nav { display: none; margin-left: auto; }
@media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: 2px; } }

.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 180ms var(--ease);
}
.nav__link:hover, .nav__item[data-open="true"] .nav__link { color: var(--cinnabar); }
.nav__link[data-section="true"] { color: var(--navy); }
/* Subrayado de la sección en curso, sin desplazar el texto */
.nav__link[data-section="true"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px;
  height: 2px; border-radius: var(--r-pill); background: var(--cinnabar);
}
.nav__link { position: relative; }

/* El galón es un botón aparte: el rótulo navega, el galón despliega */
.nav__item--mega { display: flex; align-items: center; }
.nav__item--mega .nav__link { padding-right: 4px; }
.nav__item--mega .nav__link[data-section="true"]::after { right: 4px; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; min-height: 44px; margin-right: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--slate); border-radius: var(--r-sm);
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.nav__toggle:hover { color: var(--cinnabar); background: var(--paper-band); }
.nav__toggle svg { transition: transform 200ms var(--ease); }
.nav__item[data-open="true"] .nav__toggle { color: var(--cinnabar); }
.nav__item[data-open="true"] .nav__toggle svg { transform: rotate(180deg); }

/* ---------- Megamenú: panel de instrumento ---------- */
.mega {
  /* El backdrop-filter de .hdr convierte la cabecera en el bloque contenedor
     de este panel fijo: left/right se miden desde la cabecera, que ya está
     desplazada por el riel. Con left: var(--rail) el riel se sumaba dos veces. */
  position: fixed;
  left: 0;
  right: 0;
  top: 76px;
  background: var(--navy-deep);
  color: var(--on-navy);
  border-top: 1px solid rgba(159,182,194,.22);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms var(--ease), transform 240ms var(--ease-out), visibility 0s 240ms;
  z-index: 49;
}
.nav__item[data-open="true"] .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms var(--ease), transform 260ms var(--ease-out), visibility 0s;
}
.mega__grid {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr .95fr .9fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.mega__col {
  /* Cada columna respira a ambos lados de su divisoria; antes las del medio
     tenían margen izquierdo 0 y el texto quedaba pegado a la línea. */
  padding: var(--s6) var(--s6);
  border-right: 1px solid rgba(159,182,194,.22);
}
.mega__col:first-child { padding-left: 0; }
.mega__col:last-child { border-right: 0; padding-right: 0; }
/* Subgrid: los encabezados comparten fila, así que si uno ocupa dos líneas
   las rayas de debajo siguen alineadas entre columnas. */
@supports (grid-template-rows: subgrid) {
  .mega__col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .mega__col:last-child > * { grid-row: 1 / -1; align-self: start; }
  .mega__head { align-self: end; }
}
.mega__head {
  display: block;
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(159,182,194,.28);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li + li { margin-top: 2px; }
.mega__a {
  display: block;
  padding: 9px 10px 9px 0;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--on-navy);
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease), transform 200ms var(--ease-out);
}
.mega__a small {
  display: block;
  font-size: 0.75rem;
  color: var(--on-navy-mute);
  margin-top: 2px;
}
.mega__a:hover { color: var(--cinnabar-lit); transform: translateX(8px); }
.mega__a:hover small { color: rgba(224,80,63,.75); }

.mega__cta {
  background: rgba(234,241,244,.06);
  border: 0;
  border-radius: var(--r-md);
  padding: var(--s5) var(--s5) var(--s6);
}
.mega__cta-t { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 1.22rem; line-height: 1.1; margin: 0 0 10px; }
.mega__cta p { font-size: .875rem; color: var(--on-navy-mute); margin: 0 0 var(--s4); line-height: 1.5; }
.mega__cta .btn { width: 100%; white-space: nowrap; padding-inline: 14px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cinnabar); color: #fff; box-shadow: 0 8px 20px -10px rgba(183,51,42,.6); }
.btn--primary:hover { background: #9B2A22; }
.btn--ghost { background: transparent; color: var(--on-navy); border-color: rgba(159,182,194,.45); }
.btn--ghost:hover { border-color: var(--on-navy); background: rgba(234,241,244,.07); }
.btn--line { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--paper); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: .875rem; }
.btn svg { flex: none; }

/* ---------- Selector de idioma ---------- */
.lang {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  overflow: hidden;
  flex: none;
}
.lang a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--slate);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.lang a + a { border-left: 1px solid var(--rule); }
.lang a:hover { background: var(--paper-band); color: var(--ink); }
:is(.mnav, .field-navy, .field-deep) .lang { border-color: rgba(159,182,194,.4); }
:is(.mnav, .field-navy, .field-deep) .lang a { color: var(--on-navy-mute); border-color: rgba(159,182,194,.4); }
:is(.mnav, .field-navy, .field-deep) .lang a:hover { background: rgba(234,241,244,.08); color: var(--on-navy); }
:is(.mnav, .field-navy, .field-deep) .lang a[aria-current="true"] { background: var(--cinnabar); color: #fff; }
.lang a[aria-current="true"] { background: var(--cinnabar); color: #fff; }

/* ---------- Disparador móvil ---------- */
.burger {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none; border: 1px solid var(--rule); border-radius: var(--r-md);
  cursor: pointer;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; transition: background-color 150ms; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform 240ms var(--ease-out), top 200ms var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------- Menú móvil ---------- */
.mnav {
  position: fixed;
  inset: 64px 0 0;
  background: var(--navy);
  color: var(--on-navy);
  z-index: 48;
  overflow-y: auto;
  padding: var(--s5) 0 var(--s9);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease), transform 260ms var(--ease-out), visibility 0s 260ms;
}
.mnav[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease), transform 260ms var(--ease-out), visibility 0s; }
@media (min-width: 1024px) { .mnav { display: none; } }

.acc { border-top: 1px solid rgba(159,182,194,.2); }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 1.22rem; font-weight: var(--display-weight); letter-spacing: var(--display-track); color: var(--on-navy);
  text-align: left;
}
.acc__btn svg { transition: transform 220ms var(--ease-out); flex: none; }
.acc[data-open="true"] .acc__btn svg { transform: rotate(45deg); }
.acc__body { display: none; padding-bottom: var(--s5); }
.acc[data-open="true"] .acc__body { display: block; }
.acc__body a {
  display: block; padding: 10px 0; min-height: 44px;
  text-decoration: none; color: var(--on-navy-mute); font-size: .9375rem;
}
.acc__body a:hover { color: var(--cinnabar-lit); }
.acc__all { color: var(--cinnabar-soft); font-weight: 600; }
.mnav__link {
  display: flex; align-items: center; min-height: 58px;
  border-top: 1px solid rgba(159,182,194,.2);
  text-decoration: none; font-family: var(--display); font-size: 1.22rem; font-weight: var(--display-weight); letter-spacing: var(--display-track);
}

/* =============================================================
   HERO — campo navy con panel de instrumento
   ============================================================= */
.hero {
  background: var(--navy);
  color: var(--on-navy);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(48px, 6vw, 72px);
  padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 112px);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(48px, 5vw, 88px); }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s5);
}
.hero__eyebrow::before {
  content: "";
  width: 40px; height: 1px;
  background: var(--cinnabar-lit);
  flex: none;
}
.hero h1 { color: var(--on-navy); }
.hero h1 em { color: #fff; }
.hero__lede { margin-top: var(--s5); max-width: 44ch; }
.hero__actions { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3); }

.hero__note {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid rgba(159,182,194,.25);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
}

/* ---- Panel de instrumento ---- */
.panel {
  border: 1px solid rgba(159,182,194,.2);
  background: rgba(5,37,57,.55);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: 14px var(--s5);
  border-bottom: 1px solid rgba(159,182,194,.25);
}
.panel__body {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s5);
  align-items: center;
}
@media (min-width: 420px) { .panel__body { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s6); } }

.seg { list-style: none; margin: 0; padding: 0; }
.seg li + li { margin-top: 13px; }
.seg__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: 5px;
}
.seg__name { font-size: .75rem; color: var(--on-navy-mute); letter-spacing: .02em; }
.seg__val { font-size: .875rem; font-weight: 600; color: var(--on-navy); font-variant-numeric: tabular-nums; }
.seg__track { height: 6px; border-radius: var(--r-pill); background: rgba(159,182,194,.2); position: relative; overflow: hidden; }
.seg__fill {
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: var(--cinnabar-lit);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}
.seg__fill[data-ref="low"] { background: var(--on-navy-mute); }

.panel__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(159,182,194,.25);
}
.panel__cell { padding: var(--s4) var(--s5); }
.panel__cell + .panel__cell { border-left: 1px solid rgba(159,182,194,.25); }
.panel__figure { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: -.025em; font-size: 2rem; line-height: 1; margin: 6px 0 0; color: #fff; font-variant-numeric: tabular-nums; }
.panel__figure small { font-family: var(--text); font-size: .75rem; font-weight: 500; color: var(--on-navy-mute); margin-left: 4px; }

.panel__caption {
  padding: 11px var(--s5);
  border-top: 1px solid rgba(159,182,194,.25);
  background: rgba(224,80,63,.07);
}

/* Figura segmentada */
.figure-seg .part { fill: rgba(159,182,194,.14); stroke: rgba(159,182,194,.5); stroke-width: 1; transition: fill 700ms var(--ease-out); }
.figure-seg .part.is-lit { fill: rgba(224,80,63,.5); stroke: var(--cinnabar-lit); }

/* ---------- Sello (marca de agua del monograma) ---------- */
.seal {
  position: absolute;
  pointer-events: none;
  opacity: .07;
  color: var(--cinnabar);
}

/* =============================================================
   Bloques de contenido
   ============================================================= */
.head-block { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 64px); }
.head-block .lede { margin-top: var(--s4); }

.rule-top { border-top: 1px solid var(--rule); padding-top: var(--s4); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .rule-top { border-color: rgba(159,182,194,.28); }

/* Método — tres fases sobre una regla */
.phases {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 860px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase {
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
@media (min-width: 860px) {
  .phase { padding: var(--s7) var(--s6) var(--s7) 0; border-bottom: 0; border-right: 1px solid var(--rule); }
  .phase:last-child { border-right: 0; }
  .phase + .phase { padding-left: var(--s6); }
}
.phase::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 34px; height: 3px;
  background: var(--cinnabar);
}
@media (min-width: 860px) { .phase + .phase::before { left: var(--s6); } }
.phase h3 { margin: var(--s4) 0 var(--s3); }
.phase p { margin: 0; color: var(--slate); font-size: .9375rem; line-height: 1.6; }
.phase ul { margin: var(--s4) 0 0; padding: 0; list-style: none; }
.phase ul li {
  font-size: .875rem; color: var(--slate); padding: 7px 0 7px 18px; position: relative;
  border-top: 1px solid var(--paper-edge);
}
.phase ul li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 7px; height: 1px; background: var(--cinnabar);
}

/* Servicios — filas editoriales */
.svc {
  display: grid;
  gap: var(--s5);
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 900px) { .svc { grid-template-columns: 88px minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s7); } }
.svc__idx { font-variant-numeric: tabular-nums; }
.svc__idx svg { margin-top: var(--s3); color: var(--navy); }
.svc h3 { margin-bottom: var(--s4); }
.svc__intro { font-size: 1.0625rem; line-height: 1.6; color: var(--slate); margin: 0; max-width: 60ch; }
.svc__for {
  margin: var(--s5) 0 0; padding: 0; list-style: none;
  display: grid; gap: 0;
}
.svc__for li {
  padding: 10px 0 10px 22px; border-top: 1px solid var(--paper-edge);
  font-size: .9375rem; line-height: 1.6; color: var(--slate); position: relative;
}
.svc__for li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 11px; height: 1px; background: var(--cinnabar);
}
.svc__for li strong { color: var(--ink); font-weight: 600; }
.svc__inc {
  background: var(--paper-band);
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.field-band .svc__inc { background: var(--paper); box-shadow: var(--shadow-sm); }
.svc__inc h4 { margin: 0 0 var(--s4); }
.svc__inc ul { margin: 0; padding: 0; list-style: none; }
.svc__inc li { font-size: .875rem; line-height: 1.5; padding: 9px 0; border-top: 1px solid var(--paper-edge); color: var(--slate); }
.svc__inc li:first-child { border-top: 0; padding-top: 0; }
.svc__inc li strong { color: var(--ink); font-weight: 600; }
.svc__cta { margin-top: var(--s5); }

/* Condiciones — índice navegable */
.cond-groups { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .cond-groups { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s8); } }
.cond-group h3, .cond-group h2 {
  font-family: var(--text); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cinnabar-soft); margin: 0 0 var(--s3);
  padding-bottom: var(--s3); border-bottom: 1px solid rgba(159,182,194,.3);
}
.cond-group ul { list-style: none; margin: 0; padding: 0; }
.cond-group li { border-bottom: 1px solid rgba(159,182,194,.15); }
.cond-group a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 46px; padding: 6px 0;
  text-decoration: none; font-size: .9375rem; color: var(--on-navy);
  transition: color 160ms var(--ease), transform 220ms var(--ease-out);
}
.cond-group a:hover { color: var(--cinnabar-lit); transform: translateX(8px); }
.cond-group a span { color: var(--on-navy-mute); font-size: .75rem; flex: none; opacity: 0; transition: opacity 160ms; }
.cond-group a:hover span { opacity: 1; }

/* Sobre mí */
.about { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); } }
.about__media { position: relative; }
.about__media img { width: 100%; height: auto; border-radius: var(--r-lg); }
.cv { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.cv li { padding: var(--s4) 0; border-bottom: 1px solid var(--paper-edge); display: grid; gap: 2px; }
.cv b { font-weight: 600; font-size: .9375rem; }
.cv span { font-size: .875rem; color: var(--slate); }

/* Protocolo */
.proto { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .proto { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .proto { grid-template-columns: repeat(3, 1fr); } }
.proto__item {
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-bottom: 1px solid var(--paper-edge);
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start;
}
@media (min-width: 760px) { .proto__item:nth-child(odd) { border-right: 1px solid var(--paper-edge); padding-right: var(--s6); } .proto__item:nth-child(even) { padding-left: var(--s6); } }
@media (min-width: 1100px) {
  .proto__item { border-right: 1px solid var(--paper-edge); padding-inline: var(--s6) var(--s6); }
  .proto__item:nth-child(3n) { border-right: 0; padding-right: 0; }
  .proto__item:nth-child(3n+1) { padding-left: 0; }
}
.proto__item svg { color: var(--navy); margin-top: 2px; }
.proto__item h4 { margin: 0 0 4px; font-size: .9375rem; font-weight: 600; }
.proto__item p { margin: 0; font-size: .875rem; color: var(--slate); line-height: 1.55; }

.alert {
  margin-top: var(--s7);
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s7);
  background: rgba(183,51,42,.06);
}
.alert h4 { margin: 0 0 var(--s3); font-size: 1rem; color: var(--cinnabar); }
.alert p { margin: 0; font-size: .9375rem; color: var(--ink); line-height: 1.6; }
.alert p + p { margin-top: .7em; }

/* Blog */
.posts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.post {
  display: grid; gap: var(--s4);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--paper-edge);
  text-decoration: none;
  align-items: start;
}
@media (min-width: 560px) { .post { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: center; } }
@media (min-width: 800px) { .post { grid-template-columns: 232px minmax(0, 1fr) 132px; gap: var(--s6); padding-block: var(--s5); } }
.post h2, .post h3 { font-family: var(--display); font-size: clamp(1.08rem, 1.4vw, 1.26rem); font-weight: var(--display-weight); line-height: 1.34; margin: 8px 0 0; letter-spacing: var(--display-track); color: var(--ink); }
.post:hover h2, .post:hover h3 { color: var(--cinnabar); }
.post p { margin: 6px 0 0; font-size: .875rem; color: var(--slate); line-height: 1.55; }
.post__go { display: none; }
@media (min-width: 800px) { .post__go { display: block; } }
/* La portada ocupa toda la tarjeta en móvil y una columna a partir de 560 px */
.post__img { overflow: hidden; border-radius: var(--r-md); background: var(--paper-band); }
.post__img:empty { display: none; }
.post .cover { transition: transform 620ms var(--ease-out); }
.post:hover .cover { transform: scale(1.045); }

/* Portadas de artículo */
.cover {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  filter: saturate(.86);
}
.article__cover {
  margin: var(--s6) 0 0; max-width: 68ch;
  border-radius: var(--r-lg); overflow: hidden; background: var(--paper-band);
}
.article__cover .cover { border-radius: inherit; }

/* Cierre / contacto */
.close-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .close-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(159,182,194,.28); }
.hours li {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid rgba(159,182,194,.16);
  font-size: .9375rem;
}
.hours b { font-weight: 500; color: var(--on-navy); }
.hours span { color: var(--on-navy-mute); font-variant-numeric: tabular-nums; }

/* Pie */
.ftr { background: var(--navy-deep); color: var(--on-navy); padding-block: var(--s9) var(--s6); }
.ftr__grid { display: grid; gap: var(--s7); }
@media (min-width: 800px) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); } }
.ftr__h { margin: 0 0 var(--s4); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-mute); }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li + li { margin-top: 2px; }
.ftr a { display: inline-block; padding: 6px 0; font-size: .9375rem; color: var(--on-navy); text-decoration: none; }
/* En táctil las filas del pie se separan hasta el objetivo de 44 px */
@media (pointer: coarse) {
  .ftr a { padding: 11px 0; }
  .ftr li + li { margin-top: 4px; }
}
.ftr a:hover { color: var(--cinnabar-lit); }
.ftr__nap {
  margin-top: var(--s5); font-style: normal;
  font-size: .875rem; line-height: 1.7; color: var(--on-navy-mute);
  display: grid; gap: 2px; justify-items: start;
}
.ftr__nap a { display: inline-block; padding: 4px 0; color: var(--on-navy-mute); text-decoration: none; }
.ftr__nap a:hover { color: var(--cinnabar-lit); }
@media (pointer: coarse) { .ftr__nap a { padding: 9px 0; } }

.ftr__logo { height: 48px; width: auto; margin-bottom: var(--s5); }
.ftr__legal {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid rgba(159,182,194,.2);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between;
  font-size: .8125rem; color: var(--on-navy-mute);
}
.ftr__legal p { margin: 0; max-width: 70ch; }
/* Firma de la agencia: siempre al final del pie, en todos los sitios. */
.ftr__credit { flex-basis: 100%; }
.ftr__credit a { color: var(--on-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(159,182,194,.5); }
.ftr__credit a:hover { color: var(--cinnabar-lit); text-decoration-color: currentColor; }

/* WhatsApp flotante */
.wa {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 45;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 16px;
  background: var(--cinnabar); color: #fff;
  border-radius: var(--r-pill); text-decoration: none;
  font-size: .875rem; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(183,51,42,.55);
  transition: background-color 180ms var(--ease), transform 220ms var(--ease-out);
}
.wa:hover { background: #9B2A22; transform: translateY(-2px); }
.wa span { display: none; }
@media (min-width: 520px) { .wa span { display: inline; } }

/* El aviso de imagen generada es informativo, no una alerta: mismo formato
   que el distintivo de dato pendiente pero en el gris del texto secundario. */
.todo--soft { color: var(--slate); border-color: var(--rule); font-weight: 600; }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .todo--soft { color: var(--on-navy-mute); border-color: rgba(159,182,194,.4); }

/* Nota de ámbito profesional. Sobria a propósito: es información honesta,
   no una advertencia de peligro, y no debe competir con el contenido. */
.ambito {
  margin: var(--s6) 0 0; padding-top: var(--s5);
  border-top: 1px solid var(--paper-edge);
  font-size: .875rem; line-height: 1.65; color: var(--slate);
  max-width: 68ch;
}

/* Formulario de contacto */
.form { max-width: 62ch; }
.form__fila { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .form__fila { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.form__campo { margin: 0 0 var(--s5); display: grid; gap: 7px; }
.form__campo label { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.form__req {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cinnabar);
  margin-left: 7px; vertical-align: 1px;
}
.form input, .form textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 13px 16px; width: 100%;
  min-height: 48px;                       /* objetivo táctil cómodo */
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field-band .form input, .field-band .form textarea { background: #fff; }
.form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.form input:hover, .form textarea:hover { border-color: var(--slate); }
.form input:focus-visible, .form textarea:focus-visible {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8,55,86,.16);
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] {
  border-color: var(--cinnabar); box-shadow: 0 0 0 3px rgba(183,51,42,.12);
}
.form__ayuda { font-size: .8125rem; color: var(--slate); line-height: 1.5; }
.form__error { font-size: .8125rem; color: var(--cinnabar); font-weight: 600; }
.form__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin-top: var(--s2); }
.form__aviso { font-size: .8125rem; color: var(--slate); line-height: 1.5; max-width: 42ch; }
.form__aviso a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* La trampa de miel se saca del flujo sin display:none, que algunos robots detectan */
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__estado {
  margin: var(--s5) 0 0; padding: 14px 18px; border-radius: var(--r-md);
  font-size: .9375rem; line-height: 1.55;
}
.form__estado[data-tipo="ok"] { background: rgba(8,55,86,.06); color: var(--navy); border: 1px solid rgba(8,55,86,.18); }
.form__estado[data-tipo="error"] { background: rgba(183,51,42,.07); color: var(--cinnabar); border: 1px solid rgba(183,51,42,.22); }

/* Volver arriba — a la izquierda, fuera del riel de calibración */
.totop {
  position: fixed;
  left: calc(var(--rail) + clamp(14px, 2.5vw, 24px));
  bottom: clamp(16px, 3vw, 28px);
  z-index: 45;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; min-width: 52px; padding: 0 18px;
  background: var(--navy); color: var(--on-navy);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 600;
  box-shadow: 0 10px 30px -12px rgba(5,37,57,.6);
  transition: background-color 180ms var(--ease), transform 220ms var(--ease-out), opacity 220ms var(--ease);
}
.totop:hover { background: var(--navy-soft); transform: translateY(-2px); }
.totop svg { flex: none; }
.totop span { display: none; }
@media (min-width: 720px) { .totop span { display: inline; } }
/* Sin JS no aparece; con JS lo revela el desplazamiento */
.totop[hidden] { display: none; }
.js .totop { opacity: 0; pointer-events: none; }
.js .totop.is-on { opacity: 1; pointer-events: auto; }

/* Marcador de contenido pendiente del cliente */
.todo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinnabar); border: 1px dashed var(--cinnabar);
  padding: 4px 10px; border-radius: var(--r-pill);
}
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .todo { color: var(--cinnabar-soft); border-color: var(--cinnabar-soft); }

/* Aparición al scroll — una sola vez, desde estado visible */
.rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-out); }
  .js .rise.is-in { opacity: 1; transform: none; }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--cinnabar); color: #fff; padding: 12px 20px; z-index: 100;
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* ---------- Dial de ángulo de fase ---------- */
.gauge { display: block; }
.gauge__arc { fill: none; stroke: rgba(159,182,194,.25); stroke-width: 3; stroke-linecap: butt; }
.gauge__band { fill: none; stroke: var(--cinnabar-lit); stroke-width: 3; opacity: .55; }
.gauge__needle {
  transform-origin: 34px 32px;
  transform: rotate(-84deg);
  transition: transform 1100ms cubic-bezier(.16, 1, .3, 1);
}
.gauge__needle line { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.gauge__needle circle { fill: var(--cinnabar-lit); }

/* ---------- Preguntas frecuentes ---------- */
.faq { border-top: 1px solid var(--rule); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .faq { border-color: rgba(159,182,194,.28); }
.faq__row { border-bottom: 1px solid var(--paper-edge); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .faq__row { border-color: rgba(159,182,194,.16); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  min-height: 68px; padding: var(--s4) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.4; letter-spacing: -.015em;
  transition: color 160ms var(--ease);
}
.faq__q:hover { color: var(--cinnabar); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .faq__q:hover { color: var(--cinnabar-lit); }
.faq__q svg { flex: none; transition: transform 260ms var(--ease-out); color: var(--cinnabar); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .faq__q svg { color: var(--cinnabar-lit); }
.faq__row[data-open="true"] .faq__q svg { transform: rotate(45deg); }
.faq__a {
  display: none;
  padding: 0 0 var(--s5);
  max-width: 68ch;
  font-size: .9375rem; line-height: 1.65; color: var(--slate);
}
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .faq__a { color: var(--on-navy-mute); }
.faq__row[data-open="true"] .faq__a { display: block; }
.faq__a p { margin: 0 0 .8em; }
.faq__a p:last-child { margin: 0; }
.faq__a a { color: var(--cinnabar); text-decoration: underline; text-underline-offset: 3px; }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .faq__a a { color: var(--cinnabar-lit); }

/* ---------- Enlaces relacionados (interlinking) ---------- */
.related { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .related { border-color: rgba(159,182,194,.28); }
.related__list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.related__list a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 16px; border: 1px solid var(--rule); border-radius: var(--r-pill);
  font-size: .875rem; text-decoration: none; color: var(--slate);
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background-color 160ms var(--ease);
}
.related__list a:hover { border-color: var(--navy); color: var(--navy); background: var(--paper); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .related__list a { border-color: rgba(159,182,194,.35); color: var(--on-navy); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .related__list a:hover { border-color: var(--cinnabar-lit); color: var(--cinnabar-lit); background: rgba(224,80,63,.08); }

/* Enlace de texto dentro de la prosa */
.prose a, .link {
  color: var(--navy); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 3px;
  transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease);
}
.prose a:hover, .link:hover { color: var(--cinnabar); text-decoration-color: var(--cinnabar); }

/* ---------- Banda de imagen a sangre (pausa en el ritmo) ---------- */
.band-img {
  position: relative;
  height: clamp(260px, 34vw, 440px);
  overflow: hidden;
  background: var(--navy);
  border-radius: var(--r-xl);
  margin-inline: var(--gut);
}
.band-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.band-img__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s4) 0;
  background: linear-gradient(to top, rgba(5,37,57,.82), rgba(5,37,57,0));
}
.band-img__cap .tick-label { color: var(--on-navy); }

/* ---------- Columna de medios apilados ---------- */
.stack { display: grid; gap: var(--s4); }
.stack figure { margin: 0; }
.stack figcaption { margin-top: 10px; }

/* Armonización cromática de la fotografía con la paleta */
.about__media img, .band-img img { filter: saturate(.86); }

/* =============================================================
   REVISIÓN — tipografía legible y geometría blanda
   ============================================================= */

/* ---------- Menos retícula, más superficie ---------- */

/* El método: sin divisores verticales, separado por aire */
.phases { border-top: 0; gap: var(--s6); }
.phase {
  padding: var(--s6);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper-band);
}
.phase::before { display: none; }
@media (min-width: 860px) {
  .phase { padding: var(--s7) var(--s6); border-right: 0; }
  .phase + .phase { padding-left: var(--s6); }
}
.phase .tick-label { color: var(--cinnabar); }
.phase ul li { border-top: 0; padding: 5px 0 5px 20px; }
.phase ul li::before { top: 14px; width: 9px; border-radius: var(--r-pill); height: 2px; }
.phase ul { border-top: 1px solid rgba(20,38,47,.08); padding-top: var(--s4); margin-top: var(--s5); }

/* Servicios: filas separadas por aire, no por regla */
.svc { border-top: 0; padding-block: clamp(32px, 4vw, 52px); }
.svc + .svc { border-top: 1px solid rgba(20,38,47,.07); }
.svc__for li { border-top: 0; padding: 7px 0 7px 22px; }
.svc__for li + li { border-top: 1px solid rgba(20,38,47,.06); padding-top: 12px; }
.svc__for li::before { top: 19px; height: 2px; border-radius: var(--r-pill); }
.svc__inc li { border-top: 1px solid rgba(20,38,47,.07); }
.svc__idx svg { opacity: .75; }

/* Protocolo: tarjetas blandas en vez de rejilla de hairlines */
.proto { border-top: 0; gap: var(--s4); }
@media (min-width: 760px) { .proto { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .proto { grid-template-columns: repeat(3, 1fr); } }
.proto__item {
  padding: var(--s5) !important;
  border: 0 !important;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.proto__item svg { opacity: .8; }

/* Condiciones: filas con realce blando al pasar */
.cond-group li { border-bottom: 1px solid rgba(159,182,194,.12); }
.cond-group a { padding: 8px 12px; border-radius: var(--r-sm); margin-inline: -12px; }
.cond-group a:hover { background: rgba(234,241,244,.07); transform: none; padding-left: 18px; }
.cond-group h3, .cond-group h2 { border-bottom: 0; margin-bottom: var(--s2); }

/* Blog: lista editorial con realce blando */
.posts { border-top: 0; }
.post { border-bottom: 1px solid rgba(20,38,47,.07); border-radius: var(--r-md); padding-inline: var(--s4); margin-inline: calc(var(--s4) * -1); }
.post:hover { background: var(--paper-band); }
.field-band .post:hover { background: var(--paper); }

/* Currículum */
.cv { border-top: 0; }
.cv li { border-bottom: 1px solid rgba(20,38,47,.07); }

/* Preguntas frecuentes */
.faq { border-top: 0; }
.faq__row { border-bottom: 1px solid rgba(20,38,47,.08); border-radius: var(--r-md); }
.faq__row[data-open="true"] { background: var(--paper); box-shadow: var(--shadow-sm); border-bottom-color: transparent; }
.field-band .faq__row[data-open="true"] { background: var(--paper); }
.faq__q { padding: var(--s4) var(--s5); }
.faq__a { padding: 0 var(--s5) var(--s5); }
.faq__q svg { transition: transform 260ms var(--ease-out); }

/* Horarios */
.hours { border-top: 0; }
.hours li { border-bottom: 1px solid rgba(159,182,194,.14); }

/* Cabecera del panel de medición */
.panel__head, .panel__foot, .panel__cell + .panel__cell, .panel__caption { border-color: rgba(159,182,194,.16); }

/* Regla de calibración: presente pero discreta */
.calib { background: transparent; border-right: 1px solid rgba(20,38,47,.06); }
.calib__ticks { opacity: .3; }
.calib__cursor { height: 3px; border-radius: var(--r-pill); }

/* Cabecera */
.hdr { border-bottom: 1px solid rgba(20,38,47,.07); }

/* Enlaces relacionados */
.related { border-top: 1px solid rgba(20,38,47,.08); }
:is(.field-navy, .field-deep, .hero, .mega, .mnav) .related { border-color: rgba(159,182,194,.2); }

/* Acordeón móvil */
.acc, .mnav__link { border-top-color: rgba(159,182,194,.16); }

/* Pie */
.ftr__legal { border-top-color: rgba(159,182,194,.14); }

/* ---------- Segunda voz: mono para rótulo de escala, unidad y cifra ----------
   No es disfraz de "técnico": marca exclusivamente magnitudes medidas,
   unidades, horarios y etiquetas de eje. El texto corrido nunca la usa. */
:root { --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; }

.tick-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
}
.seg__name { font-family: var(--mono); font-size: .6875rem; letter-spacing: .02em; }
.seg__val  { font-family: var(--mono); font-weight: 600; font-size: .8125rem; }
.hours span { font-family: var(--mono); font-size: .8125rem; }
.panel__figure small { font-family: var(--mono); }

/* ---------- Franja izquierda: solo indicador de avance ---------- */
:root { --rail: 0px; }
@media (min-width: 1100px) { :root { --rail: 44px; } }
.calib__ticks { display: none; }
.calib__read { left: 10px; font-size: 9px; opacity: .8; }
.calib__cursor { left: 10px; right: 10px; }

/* ---------- El hero respiraba de más por abajo ---------- */
.hero__grid { padding-block: clamp(48px, 6vw, 92px) clamp(52px, 6.5vw, 96px); }

/* =============================================================
   Páginas interiores
   ============================================================= */

/* Miga de pan */
.crumbs { background: var(--paper); border-bottom: 1px solid rgba(20,38,47,.06); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 14px 0;
  font-size: .8125rem; color: var(--slate);
}
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .45; }
.crumbs a { text-decoration: none; color: var(--slate); }
.crumbs a:hover { color: var(--cinnabar); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
@media (pointer: coarse) {
  /* Datos de contacto: son los enlaces que más se tocan del sitio */
  .cv a { position: relative; display: inline-block; }
  .cv a::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 40px; transform: translateY(-50%);
  }
  .crumbs a { position: relative; }
  .crumbs a::after {
    content: ""; position: absolute; left: -4px; right: -4px;
    top: 50%; height: 40px; transform: translateY(-50%);
  }
}

/* Encabezado de página interior */
.page-head { padding-block: clamp(48px, 6vw, 84px) clamp(48px, 6vw, 84px); }
.page-head h1.display { font-size: clamp(2rem, 4.2vw, 3.2rem); }

/* Enlace sin subrayado dentro de un título */
a.plain { text-decoration: none; color: inherit; transition: color 160ms var(--ease); }
@media (pointer: coarse) {
  a.plain { position: relative; display: inline-block; }
  a.plain::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 40px; transform: translateY(-50%);
  }
}
a.plain:hover { color: var(--cinnabar); }
.field-navy a.plain:hover, .field-deep a.plain:hover { color: var(--cinnabar-lit); }

/* ---------- Artículo ---------- */
.article__head { max-width: 74ch; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid rgba(20,38,47,.08);
}
.article__body { max-width: 68ch; margin-top: var(--s7); font-size: 1.0625rem; }
@media (min-width: 900px) { .article__body { font-size: 1.09rem; } }
.article__body h2 {
  font-family: var(--display); font-weight: var(--display-weight);
  letter-spacing: var(--display-track); line-height: 1.25;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  margin: 2.2em 0 .7em; scroll-margin-top: 96px;
}
.article__body h2:first-child { margin-top: 0; }
.article__body h3 { font-size: 1.15rem; font-weight: 700; margin: 1.8em 0 .5em; }
.article__body p { margin: 0 0 1.15em; }
.article__body ul, .article__body ol { margin: 0 0 1.4em; padding-left: 1.15em; }
.article__body li { margin-bottom: .5em; }
.article__body li::marker { color: var(--cinnabar); }
.article__body strong { font-weight: 700; color: var(--ink); }
.article__body em { font-style: italic; }
.article__body a {
  color: var(--navy); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.article__body a:hover { color: var(--cinnabar); text-decoration-color: var(--cinnabar); }

/* Índice del artículo */
.toc {
  margin-top: var(--s7);
  padding: var(--s5) var(--s6);
  background: var(--paper-band);
  border-radius: var(--r-lg);
  max-width: 68ch;
}
.toc ol { margin: var(--s3) 0 0; padding-left: 1.2em; }
.toc li { margin-bottom: 6px; font-size: .9375rem; }
.toc li::marker { color: var(--cinnabar); font-variant-numeric: tabular-nums; }
.toc a { color: var(--slate); text-decoration: none; }
.toc a:hover { color: var(--cinnabar); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) {
  .toc li { margin-bottom: 4px; }
  .toc a { display: block; padding: 7px 0; }
}

/* Índice del blog */
.posts--index .post h2 {
  font-family: var(--display); font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: var(--display-weight); line-height: 1.32; margin: 8px 0 0;
  letter-spacing: var(--display-track);
}
.posts--index .post:hover h2 { color: var(--cinnabar); }

/* Horarios sobre fondo claro */
.hours--light li { border-bottom-color: rgba(20,38,47,.08); }
.hours--light b { color: var(--ink); }
.hours--light span { color: var(--slate); }

/* La entradilla de servicio también sirve en listados */
.svc__idx .tick-label { display: block; }


/* ═══ Revisión UI/UX 2026-09-17 ═══════════════════════════════════════════ */

/* Panel de medición en móvil estrecho: la figura cede ancho a las barras,
   los valores no se parten («2.9 / kg») y la cabecera puede bajar de línea. */
.seg__val { white-space: nowrap; }
.panel__head { flex-wrap: wrap; row-gap: 4px; }
.panel__head .tick-label:last-child { white-space: nowrap; }
@media (max-width: 419px) {
  .panel__body { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); }
  .panel__body .figure-seg { width: 64px; height: 100px; }
  .panel__head, .panel__caption { padding-inline: var(--s4); }
  .panel__cell { padding: var(--s4); }
}

/* Horarios en móvil: etiqueta arriba y valor debajo, en vez de dos columnas
   estrechas que parten las dos cosas. */
@media (max-width: 520px) {
  .hours li { flex-direction: column; gap: 4px; padding: var(--s3) 0; }
}

/* Artículos en escritorio: el índice pasa a una columna lateral fija y la
   mitad derecha deja de quedar vacía. En tableta y móvil sigue en línea. */
@media (min-width: 1100px) {
  .article > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    column-gap: var(--s8);
  }
  .article > .wrap > * { grid-column: 1; }
  .article > .wrap > .article__head { grid-column: 1 / -1; }
  .article > .wrap > .toc {
    grid-column: 2;
    grid-row: 2 / span 12;
    align-self: start;
    position: sticky;
    top: calc(76px + var(--s5));
    margin-top: 0;
    max-height: calc(100vh - 76px - var(--s7));
    overflow: auto;
  }
  .toc li { font-size: .875rem; }
  .toc a[aria-current="true"] { color: var(--cinnabar); }
}

/* Los botones flotantes (volver arriba y WhatsApp) no deben tapar la última
   línea del pie, que es donde va la firma de la agencia. */
.ftr__legal { padding-bottom: 96px; }

/* Títulos en chino: sin espacios entre palabras el navegador corta en
   cualquier carácter («什 / 么»). auto-phrase corta por frase donde hay
   soporte (Chromium); en el resto se mantiene el comportamiento normal. */
:lang(zh) :is(h1, h2, h3) { word-break: auto-phrase; text-wrap: balance; }

/* Fotos reales del profesional: sin el desaturado que llevan las imágenes
   de ambiente, y con el rostro anclado arriba si el recorte aprieta. */
.about__retrato img { filter: none; object-fit: cover; object-position: 50% 12%; }

/* Contacto: quién responde al otro lado del WhatsApp. */
.persona { display: flex; align-items: center; gap: var(--s5); margin: 0 0 var(--s6); }
.persona img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; flex: none; }
.persona figcaption { display: grid; gap: 4px; }
.persona b { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 1.15rem; }
.persona span { font-size: .875rem; color: var(--slate); line-height: 1.5; max-width: 34ch; }