/* ═══════════════════════════════════════════════════════════════
   Zunvo — hoja de estilos
   Todas las tipografías se sirven desde este mismo servidor
   (descargadas una vez de Google Fonts, subconjunto "latin",
   suficiente para español: cubre U+0000-00FF, incluye á é í ó ú ñ ü).
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('tipos/spectral-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('tipos/spectral-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('tipos/spectral-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('tipos/spectral-600.woff2') format('woff2');
}
@font-face {
  /* Fuente variable: un solo archivo cubre 400/500/600 mediante el rango de peso */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('tipos/ibm-plex-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('tipos/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('tipos/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  --papel:      #FBF8F3;
  --papel-hondo:#F1EADE;
  --superficie: #FFFFFF;
  --tinta:      #0A1A29;
  --tinta-2:    #35495C;
  --tinta-3:    #71838F;
  --filete:     #E3DACA;
  --filete-2:   #D3C8B4;
  --laton:      #A2732C;
  --laton-claro:#CBA55F;
  --laton-vel:  #F3E8D2;

  --display: "Spectral", "Iowan Old Style", Georgia, serif;
  --texto:   "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --medida: 34em;
  --bloque: 1080px;
  --estrecho: 720px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
}

.env { width: 100%; max-width: var(--bloque); margin-inline: auto; padding-inline: 26px; }
.env.angosto { max-width: var(--estrecho); }

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.021em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.6vw, 4.5rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.7rem); line-height: 1.1; }
h3 { font-size: 1.14rem; line-height: 1.32; letter-spacing: -0.008em; }
h4 { font-size: 1.02rem; line-height: 1.35; }
p  { margin: 0; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--tinta-3); margin: 0 0 16px;
}

.seccion { padding-block: clamp(60px, 7.5vw, 100px); }
.seccion-cab { max-width: var(--medida); margin-bottom: clamp(34px, 4.5vw, 52px); }
.seccion-cab .bajada { color: var(--tinta-2); margin-top: 15px; font-size: 1.02rem; }

/* ══════════ cabecera ══════════ */
.cabecera { border-bottom: 1px solid var(--filete); background: var(--papel); }
.cabecera .env { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 64px; }
.marca {
  font-family: var(--display); font-size: 21px; font-weight: 600;
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  color: var(--tinta);
  display: inline-flex; align-items: center; gap: 11px;
}
.marca .rombo {
  width: 9px; height: 9px; flex: none;
  background: var(--laton); transform: rotate(45deg);
}
.menu { display: flex; align-items: center; gap: 26px; }
.menu a {
  font-size: 14.5px; color: var(--tinta-2); text-decoration: none;
  padding-block: 3px; border-bottom: 1px solid transparent;
}
.menu a:hover { color: var(--tinta); border-bottom-color: var(--filete-2); }
.menu .escribir {
  color: var(--superficie); background: var(--laton); border: 1px solid var(--laton);
  font-weight: 500; padding: 8px 16px; border-radius: 2px;
}
.menu .escribir:hover { background: #8E6425; border-color: #8E6425; color: var(--superficie); }
@media (max-width: 760px) { .menu .oculta-movil { display: none; } }

/* ══════════ portada ══════════ */
.portada { padding-block: clamp(58px, 8.5vw, 104px) clamp(44px, 6vw, 68px); }
.portada .env { max-width: 940px; }
.portada h1 { max-width: 17ch; margin-bottom: 26px; }
.entradilla { font-size: 1.16rem; color: var(--tinta-2); max-width: 48ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; align-items: center; }
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--laton); color: var(--superficie);
  text-decoration: none; font-weight: 500; font-size: 15.5px;
  padding: 13px 26px; border-radius: 2px; border: 1px solid var(--laton);
}
.boton:hover { background: #8E6425; border-color: #8E6425; }
.enlace-sec { font-size: 15px; color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid var(--filete-2); padding-bottom: 2px; }
.enlace-sec:hover { color: var(--tinta); }

/* ══════════ banda dominante: la conversación ══════════ */
.banda { background: var(--papel-hondo); border-block: 1px solid var(--filete); padding-block: clamp(52px, 7vw, 88px); }
.banda .cab { max-width: var(--medida); margin-bottom: 34px; }
.banda .cab h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.banda .cab .bajada { color: var(--tinta-2); margin-top: 13px; font-size: 1rem; }

.charla { background: var(--superficie); border: 1px solid var(--filete-2); border-radius: 3px; max-width: 760px; overflow: hidden; }
.charla-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--filete);
}
.charla-cab .rot { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.charla-cab .dia { font-family: var(--mono); font-size: 10.5px; color: var(--tinta-3); }
.hilo { display: flex; flex-direction: column; gap: 12px; padding: 20px; }

.fase {
  display: flex; align-items: center; gap: 12px;
  margin-block: 10px 2px;
}
.fase:first-child { margin-top: 0; }
.fase .txt {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--laton);
  white-space: nowrap;
}
.fase .raya { flex: 1; height: 1px; background: var(--filete); }
.fase.remate .txt { color: var(--tinta); }

.turno { display: flex; flex-direction: column; gap: 4px; max-width: 82%; }
.turno.suyo { align-self: flex-start; }
.turno.nuestro { align-self: flex-end; align-items: flex-end; }
.globo { font-size: 14.4px; line-height: 1.48; padding: 10px 14px; border-radius: 3px; }
.turno.suyo .globo { background: var(--papel-hondo); border: 1px solid var(--filete); }
.turno.nuestro .globo { background: var(--tinta); color: #E9E3D8; }
.sello { font-family: var(--mono); font-size: 10px; color: var(--tinta-3); }

.resulta { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 760px; margin-top: 22px; }
@media (min-width: 720px) { .resulta { grid-template-columns: 1fr 1fr; gap: 20px; } }
.tarjeta-res { background: var(--superficie); border: 1px solid var(--filete-2); border-radius: 3px; padding: 18px 20px; }
.tarjeta-res .rot { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); display: block; margin-bottom: 12px; }
.tarjeta-res dl { margin: 0; }
.tarjeta-res .f { display: flex; justify-content: space-between; gap: 14px; padding-block: 7px; border-top: 1px solid var(--filete); }
.tarjeta-res .f:first-of-type { border-top: 0; padding-top: 0; }
.tarjeta-res dt { font-size: 13px; color: var(--tinta-3); flex: none; margin: 0; }
.tarjeta-res dd { margin: 0; font-size: 13.6px; text-align: right; }
.tarjeta-res dd.n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.tarjeta-res p { font-size: 14.2px; color: var(--tinta-2); }

/* ══════════ capacidades (voz baja) ══════════ */
.capacidades { display: grid; grid-template-columns: 1fr; column-gap: 54px; }
@media (min-width: 800px) { .capacidades { grid-template-columns: 1fr 1fr; } }
.capacidad { padding-block: 22px; border-top: 1px solid var(--filete); }
.capacidad h3 { margin-bottom: 7px; }
.capacidad p { color: var(--tinta-2); font-size: .96rem; max-width: 42ch; }

/* ══════════ pasos ══════════ */
.pasos { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 840px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 38px; } }
.paso { padding-top: 18px; border-top: 1px solid var(--tinta); }
.paso .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--tinta-3); display: block; margin-bottom: 12px; }
.paso h3 { margin-bottom: 7px; }
.paso p { color: var(--tinta-2); font-size: .95rem; }

/* ══════════ límites (panel invertido) ══════════ */
.limites { background: var(--tinta); color: #DCD6CB; }
.limites .eyebrow { color: #8496A6; }
.limites h2 { color: #FBF8F3; }
.limites .seccion-cab .bajada { color: #A3B2BF; }
.lista-no { display: grid; grid-template-columns: 1fr; column-gap: 50px; max-width: 900px; }
@media (min-width: 800px) { .lista-no { grid-template-columns: 1fr 1fr; } }
.no { padding-block: 15px; border-top: 1px solid rgba(203,165,95,.26); font-size: .97rem; color: #BECAD4; }
.no strong { color: #FBF8F3; font-weight: 600; }
.cierre-lim {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(203,165,95,.26);
  font-family: var(--display); font-size: 1.24rem; font-style: italic; color: #FBF8F3; max-width: 50ch;
}

/* ══════════ contacto ══════════ */
.contacto { border-top: 1px solid var(--filete); }
.contacto .bajada { color: var(--tinta-2); margin: 15px 0 30px; max-width: 46ch; }
.correo {
  font-family: var(--display); font-size: clamp(1.35rem, 3.6vw, 2.1rem);
  font-weight: 500; color: var(--laton); text-decoration: none;
  border-bottom: 2px solid var(--filete-2); padding-bottom: 4px;
  display: inline-block; letter-spacing: -0.015em; word-break: break-word;
}
.correo:hover { border-bottom-color: var(--laton); }

/* ══════════ pie ══════════ */
.pie { border-top: 1px solid var(--filete); padding-block: 28px 40px; }
.pie .env { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.pie p { font-size: 13.2px; color: var(--tinta-3); margin: 0; }
.pie nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pie a {
  font-size: 13.2px; color: var(--tinta-3); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pie a:hover { color: var(--laton); border-bottom-color: var(--laton); }

/* ══════════ páginas legales ══════════ */
.legal { padding-block: clamp(44px, 6vw, 72px) clamp(60px, 8vw, 96px); }
.volver {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); text-decoration: none;
  display: inline-flex; gap: 8px; align-items: center; margin-bottom: 30px;
}
.volver:hover { color: var(--laton); }
.legal h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.06; margin-bottom: 10px; }
.legal .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3); }
.legal .fecha { color: var(--tinta-3); font-size: .88rem; margin-top: 6px; }

.indice { margin: 34px 0 8px; padding: 20px 22px; background: var(--papel-hondo); border: 1px solid var(--filete); border-radius: 3px; }
.indice p { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 12px; }
.indice ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
@media (max-width: 620px) { .indice ol { columns: 1; } }
.indice li { font-size: 14px; margin-bottom: 5px; break-inside: avoid; }
.indice a { color: var(--tinta-2); text-decoration: none; }
.indice a:hover { color: var(--laton); }

.art { padding-top: 34px; }
.art h2 { font-size: 1.32rem; line-height: 1.28; margin-bottom: 14px; display: flex; gap: 12px; align-items: baseline; }
.art h2 .num { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--laton); flex: none; letter-spacing: .06em; }
.art p + p { margin-top: 13px; }
.art p, .art li { font-size: 15.6px; color: var(--tinta-2); max-width: var(--medida); }
.art strong { color: var(--tinta); font-weight: 600; }
.art ul { margin: 13px 0 0; padding-left: 20px; }
.art li { margin-bottom: 7px; }
.art .tabla { margin-top: 16px; border-top: 1px solid var(--filete); max-width: var(--medida); }
.art .tabla .f { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: 11px; border-bottom: 1px solid var(--filete); }
@media (min-width: 620px) { .art .tabla .f { grid-template-columns: 190px 1fr; gap: 20px; align-items: baseline; } }
.art .tabla dt { font-size: 13.4px; color: var(--tinta-3); margin: 0; }
.art .tabla dd { margin: 0; font-size: 15.4px; }
.art .tabla dl { margin: 0; }

.apunte {
  margin-top: 16px; padding: 14px 18px; background: var(--papel-hondo);
  border-left: 2px solid var(--laton); font-size: 14.4px; color: var(--tinta-2);
  max-width: var(--medida);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }