/* =====================================================================
   MOTOR DE SESIÓN · Escuela Psique Académica
   sesion.css — runtime visual. Vanilla CSS, cero CDN, cero build step.
   Paleta/fonts = identidad casa (INDEX-BLUEPRINTS §4), heredada de
   psique-juegos (DiagnosticoRelampagoGame): navy/hueso/gold/coral/verde.
   ===================================================================== */

:root{
  /* -- paleta identidad Psique -- */
  --navy:      #1E2A4A;
  --hueso:     #FAF7F2;
  --gold:      #C9A227;
  --coral:     #FF6B4A;
  --verde:     #3FA66B;
  --rojo:      #D8483C;
  --azul-info: #3B7DD8;

  /* -- fonts: fallback system-safe (cero CDN). Swap por woff2 propios
     de Fraunces/Manrope/IBM Plex Mono cuando la fábrica los self-hostee
     (deuda anotada en FORMATO-SESION.md) -- */
  --f-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --f-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Consolas', 'SFMono-Regular', Menlo, monospace;

  /* -- métricas -- */
  --radius: 18px;
  --radius-sm: 12px;
  --toolbar-size: 34px;
  --shadow: 0 6px 24px rgba(30,42,74,.10);

  /* -- zoom DUA (nunca font-size) -- */
  --zoom: 1;

  color-scheme: light;
}

/* ===================== RESET MÍNIMO ===================== */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
img, video{ max-width:100%; height:auto; display:block; }
button{ font: inherit; cursor:pointer; }
a{ color: inherit; }

html{
  zoom: var(--zoom);
  background: var(--hueso);
}

body{
  font-family: var(--f-ui);
  color: var(--navy);
  background: var(--hueso);
  font-size: 16px; /* piso móvil DUA: nunca <16px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.es-app{
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 96px;
  position: relative;
}

/* ===================== HEADER ===================== */
.es-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250,247,242,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(30,42,74,.08);
  padding: 10px 16px 12px;
  margin: 0 -16px;
}
.es-header__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  max-width: 880px; margin: 0 auto;
}
.es-header__meta{ min-width:0; flex:1; }
.es-header__materia{
  font-family: var(--f-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--navy) 55%, transparent);
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}
.es-header__tema{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}

.es-racha{
  display:flex; align-items:center; gap:4px;
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight:700;
  color: var(--coral);
  background: color-mix(in srgb, var(--coral) 10%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  flex-shrink: 0;
}

/* progreso por módulos */
.es-progreso{
  display:flex; gap:4px; margin-top:10px; max-width:880px; margin-left:auto; margin-right:auto;
}
.es-progreso__seg{
  flex:1; height:6px; border-radius:99px;
  background: color-mix(in srgb, var(--navy) 10%, transparent);
  overflow:hidden;
  position:relative;
}
.es-progreso__seg i{
  display:block; height:100%; width:0%;
  background: var(--gold);
  border-radius:99px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.es-progreso__seg[data-estado="hecho"] i{ width:100%; background: var(--verde); }
.es-progreso__seg[data-estado="actual"] i{ width:55%; }

/* ===================== TOOLBAR DUA (top-right, compacta 34px) ===================== */
.es-dua{
  position:fixed;
  top:10px; right:10px;
  z-index:80;
  display:flex; gap:6px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(30,42,74,.12);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow);
}
.es-dua button{
  width: var(--toolbar-size); height: var(--toolbar-size);
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono);
  font-size: .82rem;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.es-dua button:hover{ background: color-mix(in srgb, var(--navy) 8%, transparent); }
.es-dua button[aria-pressed="true"]{ background: var(--navy); color: var(--hueso); }
.es-dua button:focus-visible{ outline: 2px solid var(--azul-info); outline-offset: 2px; }

@media (max-width: 480px){
  .es-dua{ top:6px; right:6px; padding:3px; gap:4px; }
  .es-dua button{ width:30px; height:30px; font-size:.72rem; }
}

/* ===================== MÓDULOS: tarjeta base ===================== */
.es-modulo{
  margin-top: 22px;
  animation: es-fadein .35s ease-out;
}
.es-modulo__eyebrow{
  font-family: var(--f-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--navy) 55%, transparent);
  margin-bottom: 6px;
  display:flex; align-items:center; gap:8px;
}
.es-modulo__titulo{
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  line-height:1.25;
}
.es-card{
  background:#fff;
  border: 1px solid rgba(30,42,74,.08);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

@keyframes es-fadein{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }

/* ===================== PRETEST / NÚCLEO — preguntas ===================== */
.es-pregunta__enunciado{
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 16px;
}
.es-pregunta__badge-sin-nota{
  display:inline-block;
  font-family: var(--f-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing:.05em;
  background: color-mix(in srgb, var(--azul-info) 12%, transparent);
  color: var(--azul-info);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.es-opciones{ display:flex; flex-direction:column; gap:10px; }
.es-opcion{
  display:flex; align-items:flex-start; gap:12px;
  text-align:left;
  border: 1.5px solid rgba(30,42,74,.14);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background:#fff;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  width:100%;
}
.es-opcion:hover:not([disabled]){ transform: translateY(-1px); border-color: var(--coral); box-shadow: 0 4px 14px rgba(30,42,74,.10); }
.es-opcion:active:not([disabled]){ transform: scale(.98); }
.es-opcion__letra{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:999px;
  background: color-mix(in srgb, var(--navy) 8%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono); font-weight:700; font-size:.8rem;
}
.es-opcion__texto{ flex:1; padding-top:2px; }
.es-opcion[disabled]{ cursor:default; }
.es-opcion.es-correcta{ border-color: var(--verde); background: color-mix(in srgb, var(--verde) 8%, transparent); }
.es-opcion.es-incorrecta-elegida{ border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 8%, transparent); }
.es-opcion.es-atenuada{ opacity:.55; }

.es-feedback-lista{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.es-feedback-item{
  display:flex; gap:10px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size:.94rem;
  border: 1px solid transparent;
}
.es-feedback-item.ok{ background: color-mix(in srgb, var(--verde) 10%, transparent); border-color: color-mix(in srgb, var(--verde) 35%, transparent); }
.es-feedback-item.no{ background: color-mix(in srgb, var(--rojo) 8%, transparent); border-color: color-mix(in srgb, var(--rojo) 30%, transparent); }
.es-feedback-item__icono{ flex-shrink:0; font-weight:800; }
.es-feedback-item.ok .es-feedback-item__icono{ color: var(--verde); }
.es-feedback-item.no .es-feedback-item__icono{ color: var(--rojo); }

.es-near-miss{
  margin-top: 10px;
  font-size: .88rem;
  font-style: italic;
  color: color-mix(in srgb, var(--coral) 85%, var(--navy) 15%);
}

.es-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--navy);
  color: var(--hueso);
  border:none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: .95rem;
  transition: transform .15s;
}
.es-btn:hover{ transform: scale(1.03); }
.es-btn:active{ transform: scale(.96); }
.es-btn[disabled]{ opacity:.4; pointer-events:none; }
.es-btn--ghost{
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(30,42,74,.2);
}
.es-btn--sm{ padding:8px 16px; font-size:.85rem; }

.es-acciones{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* ===================== LECCIÓN (segmentada Mayer) ===================== */
.es-leccion__seccion{
  padding: 18px 0;
  border-bottom: 1px dashed rgba(30,42,74,.14);
}
.es-leccion__seccion:last-of-type{ border-bottom:none; }
.es-leccion__seccion-titulo{
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight:700;
  margin: 0 0 10px;
}
.es-leccion__cuerpo{ font-size: 1rem; }
.es-leccion__cuerpo p{ margin: 0 0 12px; }
.es-leccion__cuerpo :is(strong,b){ color: var(--navy); }

.es-retrieval{
  margin-top: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed color-mix(in srgb, var(--gold) 60%, transparent);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  padding: 14px 16px;
}
.es-retrieval__eyebrow{
  font-family: var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color: color-mix(in srgb, var(--gold) 70%, var(--navy) 30%);
  margin-bottom:6px;
}
.es-retrieval__pregunta{ font-weight:600; margin: 0 0 10px; }
.es-retrieval__respuesta{
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .35s ease, opacity .3s ease;
  font-size:.94rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  padding-top:0;
}
.es-retrieval__respuesta.es-abierta{ max-height:600px; opacity:1; padding-top:10px; }
.es-retrieval__honestidad{ margin-top:10px; display:flex; gap:8px; align-items:center; font-size:.85rem; }

/* ===================== AUDIO / VIDEO ===================== */
.es-media{ margin-bottom: 16px; }
.es-media audio, .es-media video{ width:100%; border-radius: var(--radius-sm); }
.es-media__controles{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.es-actos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.es-acto-chip{
  font-family: var(--f-mono); font-size:.74rem;
  border: 1px solid rgba(30,42,74,.18);
  border-radius: 999px;
  padding: 4px 10px;
  background:#fff;
}
.es-acto-chip:hover{ border-color: var(--coral); }
.es-toggle-transcripcion{ margin-top:10px; }
.es-transcripcion{
  margin-top:12px; padding:14px 16px;
  background: color-mix(in srgb, var(--navy) 4%, transparent);
  border-radius: var(--radius-sm);
  font-size:.94rem;
  max-height: 340px; overflow-y:auto;
}
.es-transcripcion mark{ background: color-mix(in srgb, var(--gold) 35%, transparent); border-radius:3px; padding:0 2px; }
.es-transcripcion[hidden]{ display:none; }

/* ===================== APUNTE ===================== */
.es-apunte{
  display:flex; align-items:center; gap:14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30,42,74,.12);
  padding: 16px;
}
.es-apunte__icono{ font-size:2rem; }
.es-apunte__link{
  font-weight:700; text-decoration:underline; color: var(--navy);
}

/* ===================== GAMIFICADO (slot enchufable) ===================== */
.es-slot{
  border: 2px dashed color-mix(in srgb, var(--coral) 45%, transparent);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align:center;
  color: color-mix(in srgb, var(--navy) 65%, transparent);
}
.es-slot__icono{ font-size:2.2rem; margin-bottom:8px; }
.es-slot code{
  font-family: var(--f-mono); font-size:.78rem;
  background: color-mix(in srgb, var(--navy) 6%, transparent);
  padding:2px 6px; border-radius:6px;
}

/* ===================== NÚCLEO-BANCO: racha ===================== */
.es-racha-nucleo{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 14px;
  font-family: var(--f-mono); font-size:.85rem;
}
.es-racha-nucleo__contador{ font-weight:800; color: var(--coral); }
.es-racha-nucleo__pos{ color: color-mix(in srgb, var(--navy) 55%, transparent); }

/* ===================== CIERRE / MASTERY ===================== */
.es-cierre__bloque{ margin-bottom:20px; }
.es-cierre__parcial{
  border-left: 4px solid var(--gold);
  padding: 12px 16px;
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.es-cliffhanger{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy);
  text-align:center;
  padding: 18px 10px;
}

.es-mastery{
  text-align:center;
  padding: 30px 16px;
}
.es-mastery__insignia{
  width:110px; height:110px;
  margin: 0 auto 16px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-size: 3rem;
  background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--gold) 35%, transparent));
  border: 3px solid var(--gold);
  box-shadow: 0 10px 30px rgba(201,162,39,.35);
}
.es-mastery__insignia.es-pop{ animation: es-badge-pop .6s cubic-bezier(.22,1.4,.4,1); }
@keyframes es-badge-pop{
  0%{ transform: scale(0); opacity:0; }
  60%{ transform: scale(1.15); opacity:1; }
  100%{ transform: scale(1); }
}
.es-mastery__nivel{
  font-family: var(--f-display); font-weight:800; font-size:1.6rem;
  color: var(--navy); margin: 0 0 6px;
}
.es-mastery__nivel.destacado{ color: var(--gold); }
.es-mastery__score{
  font-family: var(--f-mono); font-size:1rem;
  color: color-mix(in srgb, var(--navy) 65%, transparent);
  margin-bottom: 18px;
}
.es-mastery__coins{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--f-mono); font-weight:700;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-radius:999px; padding:6px 14px;
  margin-bottom: 18px;
}
.es-desbloqueo{
  font-weight:700; color: var(--verde);
  margin-top: 6px;
}

.es-reintento{
  text-align:left;
  background: color-mix(in srgb, var(--rojo) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 16px;
}
.es-reintento__titulo{ font-weight:700; margin:0 0 8px; color: var(--rojo); }
.es-reintento__lista{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.es-reintento__chip{
  font-family: var(--f-mono); font-size:.78rem;
  border: 1px solid rgba(30,42,74,.2);
  border-radius: 999px; padding:5px 12px;
  background:#fff;
}
.es-reintento__chip:hover{ border-color: var(--coral); }

/* ===================== JUICE: partículas + confetti ===================== */
.es-particulas-canvas{
  position: fixed; inset:0; pointer-events:none; z-index:60;
}
.es-confetti-canvas{
  position: fixed; inset:0; pointer-events:none; z-index:70;
}

/* ===================== MICRO-WIN cierre de módulo ===================== */
.es-microwin{
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  opacity:0;
  background: var(--navy);
  color: var(--hueso);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight:700;
  display:flex; align-items:center; gap:8px;
  box-shadow: 0 10px 30px rgba(30,42,74,.35);
  z-index: 90;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.es-microwin.es-visible{ transform: translateX(-50%) translateY(0); opacity:1; }
.es-microwin__check{ color: var(--verde); font-weight:900; }

/* ===================== FOOTER / mute flotante secundario ===================== */
.es-footer-nav{
  position: sticky; bottom:0; z-index:40;
  background: rgba(250,247,242,.95);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(30,42,74,.08);
  padding: 12px 16px;
  margin: 32px -16px 0;
  display:flex; justify-content:flex-end;
  gap: 10px;
}

/* ===================== HIGHLIGHT deep-link (reintento dirigido) ===================== */
.es-highlight-pulso{
  animation: es-pulso 1.6s ease-out;
  border-radius: var(--radius-sm);
}
@keyframes es-pulso{
  0%   { box-shadow: 0 0 0 0 rgba(201,162,39,.55); background: color-mix(in srgb, var(--gold) 14%, transparent); }
  100% { box-shadow: 0 0 0 22px rgba(201,162,39,0); background: transparent; }
}
html.hc .es-highlight-pulso{ outline: 3px solid #FFD84D; }

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .es-particulas-canvas, .es-confetti-canvas{ display:none !important; }
}
.es-no-motion .es-particulas-canvas, .es-no-motion .es-confetti-canvas{ display:none !important; }

/* ===================== MÓVIL ===================== */
@media (max-width: 480px){
  .es-app{ padding: 0 12px 90px; }
  .es-modulo__titulo{ font-size:1.28rem; }
  .es-card{ padding:16px; }
  .es-mastery__insignia{ width:92px; height:92px; font-size:2.4rem; }
}

/* =====================================================================
   ALTO CONTRASTE DRAMÁTICO — html.hc
   Canon: negro puro + bordes blancos 2px en TODO contenedor + texto
   blanco full-opacity + feedback ok/no/gold VIVOS con !important
   (receta v8, cicatriz T1.3: "dark-sobre-dark" = HC roto/imperceptible).
   ===================================================================== */
html.hc, html.hc body{ background:#000 !important; }
html.hc .es-app{ color:#fff !important; }

html.hc .es-header{ background:#000 !important; border-bottom:2px solid #fff !important; }
html.hc .es-header__materia{ color:#fff !important; opacity:.75; }
html.hc .es-header__tema{ color:#fff !important; }
html.hc .es-racha{ background:#000 !important; color:#FFB199 !important; border:2px solid #FFB199 !important; }

html.hc .es-progreso__seg{ background:#000 !important; border:2px solid #fff !important; }
html.hc .es-progreso__seg i{ background:#FFD84D !important; }
html.hc .es-progreso__seg[data-estado="hecho"] i{ background:#5CE28A !important; }

html.hc .es-dua{ background:#000 !important; border:2px solid #fff !important; }
html.hc .es-dua button{ color:#fff !important; }
html.hc .es-dua button[aria-pressed="true"]{ background:#fff !important; color:#000 !important; }

html.hc .es-card,
html.hc .es-slot,
html.hc .es-apunte,
html.hc .es-transcripcion,
html.hc .es-reintento,
html.hc .es-cierre__parcial{
  background:#000 !important;
  color:#fff !important;
  border: 2px solid #fff !important;
  box-shadow:none !important;
}

html.hc .es-modulo__titulo,
html.hc .es-leccion__seccion-titulo,
html.hc .es-pregunta__enunciado,
html.hc .es-cliffhanger,
html.hc .es-mastery__nivel{ color:#fff !important; }

html.hc .es-opcion{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .es-opcion__letra{ background:#fff !important; color:#000 !important; }
html.hc .es-opcion.es-correcta{ border-color:#5CE28A !important; background:#000 !important; color:#5CE28A !important; }
html.hc .es-opcion.es-incorrecta-elegida{ border-color:#FF6B6B !important; background:#000 !important; color:#FF6B6B !important; }
html.hc .es-opcion.es-atenuada{ opacity:.6 !important; }

html.hc .es-feedback-item.ok{ background:#000 !important; border:2px solid #5CE28A !important; color:#5CE28A !important; }
html.hc .es-feedback-item.no{ background:#000 !important; border:2px solid #FF6B6B !important; color:#FF6B6B !important; }
html.hc .es-feedback-item.ok .es-feedback-item__icono{ color:#5CE28A !important; }
html.hc .es-feedback-item.no .es-feedback-item__icono{ color:#FF6B6B !important; }
html.hc .es-near-miss{ color:#FFD84D !important; }

html.hc .es-retrieval{ background:#000 !important; border:2px dashed #FFD84D !important; }
html.hc .es-retrieval__respuesta{ border-color:#FFD84D !important; color:#fff !important; }

html.hc .es-acto-chip{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .es-transcripcion mark{ background:#FFD84D !important; color:#000 !important; }

html.hc .es-btn{ background:#fff !important; color:#000 !important; border:2px solid #fff !important; }
html.hc .es-btn--ghost{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }

html.hc .es-racha-nucleo__contador{ color:#FF9A6B !important; }

html.hc .es-mastery__insignia{ background:#000 !important; border:3px solid #FFD84D !important; box-shadow:none !important; }
html.hc .es-mastery__nivel.destacado{ color:#FFD84D !important; }
html.hc .es-mastery__coins{ background:#000 !important; color:#FFD84D !important; border:2px solid #FFD84D !important; }
html.hc .es-desbloqueo{ color:#5CE28A !important; }

html.hc .es-reintento{ border-color:#FF6B6B !important; }
html.hc .es-reintento__titulo{ color:#FF6B6B !important; }
html.hc .es-reintento__chip{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }

html.hc .es-microwin{ background:#fff !important; color:#000 !important; box-shadow:none !important; border:2px solid #000; }
html.hc .es-microwin__check{ color:#0B8A3E !important; }

html.hc .es-footer-nav{ background:#000 !important; border-top:2px solid #fff !important; }
html.hc .es-apunte__link{ color:#FFD84D !important; }

/* F7-QA: mata el overflow residual de 4px (sticky-safe) */
html, body{ overflow-x: clip; }

/* F7-QA v2: causa raiz del +4px — el margin negativo de header/footer sangraba fuera del wrap.
   El wrap ya tiene su padding; anclamos header/footer al ancho del wrap sin sangrado negativo. */
.es-header, .es-footer-nav{ margin-left:0; margin-right:0; }