/* ================================================================
   Clavero · sitio
   ================================================================
   La página es el recorrido de un trabajo, de principio a fin. Por
   eso la columna de pasos está numerada y colgada de una línea
   vertical: es una secuencia de verdad, no una lista de funciones
   disfrazada de secuencia.

   El latón aparece en tres lugares y en ninguno más: los puntos de
   la línea, el subrayado del título y el borde del bloque de
   contacto. Un clavero es quien guarda las llaves ajenas, y las
   llaves son de latón.
   ================================================================ */

:root {
  --papel:   #edf1f2;
  --blanco:  #ffffff;
  --tinta:   #0f2e38;
  --tinta-2: #15404e;
  --suave:   #51707a;
  --laton:   #b8842f;
  --laton-s: #f0e4cf;
  --linea:   #d3dce0;
  --verde:   #2f7a4f;

  --display: "Archivo", system-ui, sans-serif;
  --texto: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --borde: 14px;
  --medida: 34rem;      /* ~64 caracteres */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

.marco {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ---- Tipografía ------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  font-variation-settings: "wdth" 112;
  /* Reparte las líneas en vez de dejar una palabra suelta abajo */
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  max-width: 16ch;
}
h1 span { display: block; }
h1 span + span { color: var(--suave); }

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  max-width: 24ch;
}
h3 {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  font-variation-settings: "wdth" 104;
}

p { margin: 0; max-width: var(--medida); }
.suave { color: var(--suave); }

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

/* ---- Encabezado ------------------------------------------------ */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .marco {
  display: flex; align-items: center; gap: 18px;
  padding-block: 15px;
}
.marca {
  font-family: var(--display); font-weight: 700; font-size: 1.32rem;
  letter-spacing: -0.035em; font-variation-settings: "wdth" 116;
  text-decoration: none; margin-right: auto;
}
.cabecera a.sec {
  font-size: 0.93rem; color: var(--suave); text-decoration: none;
}
.cabecera a.sec:hover { color: var(--tinta); }
.boton {
  display: inline-block; text-decoration: none;
  font-size: 0.95rem; font-weight: 600;
  padding: 10px 18px; border-radius: 9px;
  background: var(--tinta); color: var(--papel);
}
.boton:hover { background: var(--tinta-2); }
.boton.hueco {
  background: none; color: var(--tinta);
  border: 1px solid var(--tinta);
}
.boton.hueco:hover { background: var(--tinta); color: var(--papel); }

figure { margin: 0; }

/* ---- Apertura -------------------------------------------------- */
.apertura { padding-block: clamp(48px, 9vw, 104px) 0; }
.apertura .bajada {
  font-size: clamp(1.06rem, 2vw, 1.22rem);
  color: var(--suave);
  margin-top: 22px;
  max-width: 38rem;
}
.apertura .acciones { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }

/* Las dos pantallas: lo que ve el dueño y lo que ve ella. */
.pantallas {
  margin-top: clamp(40px, 7vw, 76px);
  display: grid; gap: clamp(26px, 4vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) {
  .pantallas { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); }
}
.pantalla img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--linea);
  background: var(--blanco);
}
.pantalla.telefono img {
  border-radius: 22px;
  box-shadow: 0 18px 44px -24px rgba(15, 46, 56, 0.45);
}
.pantalla .rotulo {
  margin-top: 14px; font-size: 0.93rem; font-weight: 600;
}
.pantalla .aclara { font-size: 0.86rem; color: var(--suave); margin-top: 3px; }

/* ---- El recorrido ---------------------------------------------- */
.seccion { padding-block: clamp(56px, 9vw, 110px); }
.seccion > h2 { margin-bottom: 10px; }
.seccion > h2 + p { color: var(--suave); }

.recorrido { margin-top: 42px; position: relative; }
.recorrido::before {
  content: ""; position: absolute; inset: 10px auto 10px 0;
  width: 1px; background: var(--linea);
}
@media (min-width: 720px) { .recorrido::before { left: 17px; } }

.paso {
  position: relative;
  padding-left: 46px;
  padding-block: 0 34px;
}
@media (min-width: 720px) { .paso { padding-left: 64px; } }
.paso:last-child { padding-bottom: 0; }
.paso::before {
  content: ""; position: absolute; left: -4px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--laton);
  box-shadow: 0 0 0 4px var(--papel);
}
@media (min-width: 720px) { .paso::before { left: 13px; } }
.paso .n {
  position: absolute; left: 0; top: 1px;
  font-family: var(--display); font-weight: 700; font-size: 0.82rem;
  color: var(--laton); font-variation-settings: "wdth" 104;
}
@media (max-width: 719px) { .paso .n { left: 18px; } }
.paso h3 { margin-bottom: 5px; }
.paso p { color: var(--suave); }

/* ---- Los dos números ------------------------------------------- */
.numeros {
  margin-top: 34px;
  display: grid; gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--borde);
  overflow: hidden;
}
@media (min-width: 720px) { .numeros { grid-template-columns: 1fr 1fr; } }
.numeros > div { background: var(--blanco); padding: 26px 24px; }
.numeros h3 { margin-bottom: 6px; }
.numeros p { color: var(--suave); font-size: 0.97rem; }

.remate {
  margin-top: 26px; padding-left: 20px;
  border-left: 3px solid var(--laton);
  font-size: 1.05rem;
}

/* ---- Lo que no hace (único bloque oscuro) ---------------------- */
.oscuro {
  background: var(--tinta); color: var(--papel);
}
.oscuro h2 { color: var(--blanco); }
.oscuro p { color: #a9c3cc; margin-top: 18px; font-size: 1.05rem; }
.oscuro p:first-of-type { color: #dce9ed; font-size: 1.14rem; }

/* ---- El resto del sistema -------------------------------------- */
.resto {
  margin-top: 36px;
  display: grid; gap: 28px 36px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.resto h3 { margin-bottom: 4px; }
.resto p { color: var(--suave); font-size: 0.97rem; }

/* ---- Para quién ------------------------------------------------ */
.paraquien p { font-size: 1.14rem; }
.paraquien p + p { margin-top: 16px; color: var(--suave); font-size: 1.02rem; }

/* ---- Contacto -------------------------------------------------- */
.contacto {
  border: 1px solid var(--linea); border-left: 3px solid var(--laton);
  border-radius: var(--borde);
  background: var(--blanco);
  padding: clamp(28px, 4vw, 44px);
  margin-block: clamp(56px, 9vw, 96px);
  display: grid; gap: 26px;
}
@media (min-width: 820px) {
  .contacto { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.contacto h2 { margin-bottom: 10px; }
.contacto p { color: var(--suave); }

/* ---- Pie ------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: 34px 44px;
  font-size: 0.91rem; color: var(--suave);
}
.pie .marco { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .pie .marco { grid-template-columns: 1fr auto; align-items: end; }
}
.pie address { font-style: normal; line-height: 1.75; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .legal { color: var(--tinta); font-weight: 600; }