@import url('fuentes.css');

/* ═══════════════════════════════════════════════════════════════════════════
   Lazos — Landing v2

   El diseño llegó como una maqueta de escritorio (min-width:1100px) con los
   estilos en línea. Aquí se traduce a clases por una razón concreta: sin
   clases no hay media queries, y sin media queries la página no funciona en
   el teléfono — que es justo donde se instala la app.

   Las páginas legales siguen usando estilo.css. Esta hoja es solo del inicio.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --brand:      #26226F;
  --brand-hover:#1D1A57;
  --iris:       #8E89D9;
  --iris-claro: #C9C5F1;
  --iris-texto: #4F49AE;
  --coral:      #FF7B74;
  --coral-hondo:#C2453E;
  --sage:       #87A67A;
  --sage-claro: #A9C69C;

  --fondo:      #F8F6F2;
  --tarjeta:    #FFFDFC;
  --elevado:    #F1EFE9;
  --linea:      #E9E7F0;
  --texto:      #3D3D49;
  --tenue:      #B8B6C3;
  --sobre-indigo:#E8E6F5;

  --tinte-fecha:#ECEAF7;
  --tinte-coral:#FFEFED;
  --tinte-sage: #EEF3EB;

  --ancho: 1200px;
  --serif: Newsreader, Georgia, serif;
  --ui: Manrope, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }

/* `height: auto` no es opcional. Las imágenes llevan atributos width/height
   para que el navegador reserve su hueco y la página no dé saltos al cargar;
   pero en cuanto max-width recorta el ancho, sin esto el alto se queda en el
   número del atributo y la imagen sale estirada. Pasó: los dos mockups del
   iPhone se publicaron al doble de alto. */
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--iris); }
::selection { background: var(--tinte-fecha); color: var(--brand); }

/* La página es clara por diseño. Se declara para que quien navegue con el
   sistema en oscuro no reciba los colores invertidos del navegador. */
:root { color-scheme: light; }

@keyframes flotar { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* ── Piezas compartidas ─────────────────────────────────────────────────── */

/* content-box a propósito. La maqueta no lleva reset de box-sizing, así que
   sus contenedores miden 1200 px de contenido MÁS 72 de padding. Con
   border-box el contenido se queda en 1128 y todo el sitio va 72 px más
   estrecho: el texto envuelve antes y cada sección crece de alto. Se notaba
   como una diferencia de casi 90 px en «Compartir». */
.envoltura {
  box-sizing: content-box;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 36px;
}
.angosto { max-width: 1080px; }

.seccion { border-bottom: 1px solid var(--linea); }
.seccion > .envoltura { padding-top: 100px; padding-bottom: 100px; }
/* No todas las secciones respiran igual en la maqueta: «Compartir» va a 80 e
   «Instalar» a 90. Se respetan en vez de uniformarlas. */
.seccion.aire80 > .envoltura { padding-top: 80px; padding-bottom: 80px; }
.seccion.aire90 > .envoltura { padding-top: 90px; padding-bottom: 90px; }
.seccion.elevada { background: var(--elevado); }
.seccion.indigo { background: var(--brand); color: var(--tarjeta); border-bottom: 0; }

.etiqueta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--iris);
  text-transform: uppercase;
}

.titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin: 18px 0 20px;
  text-wrap: balance;
}
.indigo .titulo { color: var(--tarjeta); }
.titulo.grande { font-size: clamp(34px, 5.6vw, 52px); }
/* El de «Preguntas» es más pequeño en la maqueta y no lleva aire debajo: la
   rejilla ya trae el suyo. */
.titulo.chico { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.2; margin: 0; }

/* 17 px, que es lo que usa la maqueta en todas las secciones salvo
   Privacidad. Ponerlo a 18 parecía inocuo y engordaba cada sección: el texto
   envuelve una línea antes y el bloque entero crece. */
.entrada { font-size: 17px; line-height: 1.6; }
.entrada.mayor { font-size: 18px; }
.centrado { text-align: center; margin-left: auto; margin-right: auto; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brand);
  color: var(--tarjeta);
  border-radius: 28px;
  padding: 16px 38px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--ui);
  border: 0;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.2, 0, 0, 1);
}
.boton:hover { background: var(--brand-hover); color: var(--tarjeta); }
.boton.sm { padding: 10px 22px; font-size: 13.5px; border-radius: 24px; }
.boton.md { padding: 14px 30px; font-size: 15px; }
.boton.claro { background: var(--tarjeta); color: var(--brand); }
.boton.claro:hover { background: var(--tinte-fecha); color: var(--brand); }
.boton.linea {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
}
.boton.linea:hover { background: var(--tinte-fecha); color: var(--brand); }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 22px;
  padding: 30px;
}

.rejilla { display: grid; gap: 16px; }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }

.paloma { width: 16px; height: 16px; flex: none; margin-top: 3px; stroke: var(--sage); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── Navegación ─────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(248, 246, 242, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.nav .envoltura {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.nav img { height: 28px; width: auto; }
.nav-enlaces {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero-trazo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .envoltura {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 110px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 6.4vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--brand);
  margin: 22px 0 24px;
  text-wrap: balance;
}
.hero p { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.55; max-width: 480px; }
.hero .boton { margin-top: 32px; }
.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
}
.sellos span { display: flex; gap: 8px; align-items: center; }
.sellos svg { width: 15px; height: 15px; flex: none; }

.hero-arte { position: relative; display: flex; justify-content: center; }
.hero-arte::before {
  content: '';
  position: absolute;
  left: 64px; right: -12px; top: 54px; bottom: 28px;
  background: var(--brand);
  border-radius: 44px;
}
.hero-arte img {
  position: relative;
  width: 520px;
  display: block;
  animation: flotar 7s ease-in-out infinite;
}

/* ── Captura en tres pasos ──────────────────────────────────────────────── */

.indigo .entrada { color: var(--iris-claro); }

.pasos {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
}
.paso {
  width: 225px;
  flex: none;
  background: var(--fondo);
  border-radius: 32px;
  padding: 22px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--texto);
}
.paso-barras { display: flex; gap: 5px; }
.paso-barras span { width: 18px; height: 4px; border-radius: 2px; background: var(--linea); }
.paso-barras span.hecho { background: var(--brand); }
.paso-barras span.fin { background: var(--sage); }
.paso-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--iris); margin-top: 20px; }
.paso-pregunta { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--brand); margin-top: 8px; line-height: 1.2; }
.paso-campo { border-bottom: 2px solid var(--brand); padding: 14px 0 8px; font-size: 14px; }
.cursor { display: inline-block; width: 2px; height: 16px; background: var(--iris); vertical-align: -3px; margin-left: 1px; }
.paso-boton { background: var(--brand); color: var(--tarjeta); border-radius: 22px; padding: 11px; font-size: 13px; font-weight: 700; text-align: center; margin-top: 26px; }
.paso-boton.linea { background: transparent; border: 1.5px solid var(--brand); color: var(--brand); margin-top: 18px; }
.fichas { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.ficha { border: 1.5px solid #D5D2EF; color: var(--brand); border-radius: 16px; padding: 4.5px 13px; font-size: 12px; font-weight: 600; }
.ficha.activa { background: var(--brand); color: var(--tarjeta); border-color: var(--brand); font-weight: 700; }
.flecha-paso { width: 22px; height: 22px; flex: none; stroke: var(--iris); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.numeradas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.numeradas div { display: flex; gap: 12px; align-items: flex-start; }
.numeradas b { font-family: var(--mono); font-size: 12px; color: var(--coral); font-weight: 400; margin-top: 3px; }
.numeradas span { font-size: 15px; color: var(--sobre-indigo); }

/* ── Tu círculo ─────────────────────────────────────────────────────────── */

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.dos-columnas.invertida { grid-template-columns: 1fr 1.1fr; gap: 56px; }
/* 440 px es el tamaño de la maqueta. Sin fijarlo, la imagen se estira hasta
   llenar su columna y la sección crece de más. */
.dos-columnas img { display: block; margin: 0 auto; width: 440px; }

.puntos { display: grid; gap: 14px; margin-top: 28px; max-width: 480px; }
.puntos > div { display: flex; gap: 14px; align-items: center; }
.punto-icono {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex: none; background: var(--tinte-fecha);
  overflow: hidden;
}
.punto-icono.dias { background: var(--tinte-coral); font-family: var(--mono); font-size: 11px; color: var(--brand); font-weight: 600; }
.punto-icono.franjas { background: none; }
.punto-icono.franjas i { flex: 1; height: 100%; }
.puntos p { font-size: 14.5px; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.lista-avisos { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 22px; overflow: hidden; margin-top: 40px; }
.aviso {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--linea);
}
.aviso:last-child { border-bottom: 0; }
.aviso-icono { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.aviso-icono svg { width: 20px; height: 20px; stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.aviso b { color: var(--brand); font-size: 16px; }
.aviso-cuando { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-align: right; }

/* ── Privacidad ─────────────────────────────────────────────────────────── */

.cuadro-icono { width: 48px; height: 48px; border-radius: 16px; background: var(--tinte-fecha); display: flex; align-items: center; justify-content: center; }
.cuadro-icono svg { width: 22px; height: 22px; stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta b { color: var(--brand); font-size: 17px; display: block; margin-top: 16px; }
.tarjeta p { font-size: 14px; margin-top: 6px; line-height: 1.55; }

.cita {
  background: var(--brand);
  border-radius: 24px;
  padding: 30px 40px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.cita p { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.6vw, 24px); color: var(--tarjeta); line-height: 1.35; }
.cita .sello { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--iris); text-align: right; flex: none; }

/* ── Planes ─────────────────────────────────────────────────────────────── */

.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; align-items: stretch; }
.plan { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 26px; padding: 38px; display: flex; flex-direction: column; }
.plan.premium { background: var(--brand); border-color: var(--brand); color: var(--tarjeta); }
.plan-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-cabeza b { color: var(--brand); font-size: 21px; }
.plan.premium .plan-cabeza b { color: var(--tarjeta); }
.plan-sello { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--sage); }
.plan-sello.proximo { background: var(--tinte-fecha); color: var(--brand); border-radius: 12px; padding: 3px 14px; }
.plan-lista { display: grid; gap: 10px; margin: 22px 0 30px; font-size: 14.5px; }
.plan-lista > div { display: flex; gap: 10px; }
.plan.premium .plan-lista { color: var(--sobre-indigo); }
.plan.premium .plan-lista span:first-child { color: var(--coral); flex: none; }
.plan .boton { margin-top: auto; width: 100%; }

/* Lista de espera de Premium */
.espera { margin-top: auto; }
.espera-campos { display: grid; gap: 9px; }
.espera input {
  border: 1.5px solid rgba(142, 137, 217, 0.5);
  background: rgba(255, 253, 252, 0.06);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14.5px;
  color: var(--tarjeta);
  font-family: var(--ui);
  outline: none;
  width: 100%;
}
.espera input::placeholder { color: rgba(201, 197, 241, 0.7); }
.espera input:focus { border-color: var(--iris); box-shadow: 0 0 0 2px rgba(142, 137, 217, 0.35); }
.espera .abrir {
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(142, 137, 217, 0.5);
  color: var(--iris-claro);
  border-radius: 26px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--ui);
  cursor: pointer;
}
.espera .abrir:hover { background: rgba(255, 253, 252, 0.08); color: var(--tarjeta); }
.espera .boton[disabled] { opacity: 0.6; cursor: progress; }
.espera-listo {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  border: 1.5px solid rgba(135, 166, 122, 0.6);
  border-radius: 26px; padding: 13px;
  font-size: 14.5px; font-weight: 700; color: var(--sage-claro);
}
.espera-listo svg { width: 16px; height: 16px; stroke: var(--sage-claro); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.espera-error { font-size: 13px; color: var(--iris-claro); margin-top: 8px; text-align: center; }
.oculto { display: none !important; }

/* ── Preguntas ──────────────────────────────────────────────────────────── */

.preguntas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.preguntas > div { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 20px; padding: 26px 30px; }
.preguntas b { color: var(--brand); font-size: 16px; }
.preguntas p { font-size: 14.5px; margin-top: 8px; line-height: 1.6; }

/* ── Compartir ──────────────────────────────────────────────────────────── */

/* El clip de las manos es vertical (2550×3000) y la acción ocurre a media
   altura. Mostrarlo entero deja un recuadro altísimo con las manos perdidas en
   el centro — que es como se veía antes. Se recorta a la proporción del poster
   y se enfoca al 58%, igual que la maqueta. */
.medio-manos {
  width: 520px;
  max-width: 100%;
  display: block;
  border-radius: 22px;
  aspect-ratio: 1120 / 589;
  object-fit: cover;
  object-position: center 58%;
  background: var(--tarjeta);
}

/* ── Instalar ───────────────────────────────────────────────────────────── */

.pasos-instalar { display: grid; gap: 12px; margin-top: 20px; font-size: 14.5px; }
.pasos-instalar > div { display: flex; gap: 12px; }
.pasos-instalar i { font-family: var(--mono); font-size: 12px; color: var(--tenue); font-style: normal; margin-top: 2px; }
.pasos-instalar strong, .instalar-cabeza b { color: var(--brand); }
.instalar-cabeza { display: flex; gap: 12px; align-items: center; }
.instalar-cabeza span { width: 40px; height: 40px; border-radius: 13px; background: var(--tinte-fecha); display: flex; align-items: center; justify-content: center; flex: none; }
.instalar-cabeza svg { width: 19px; height: 19px; stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nota-pie { font-size: 13px; color: var(--tenue); margin-top: 20px; padding-top: 16px; border-top: 1px solid #F1EFF9; }

/* ── Cierre y pie ───────────────────────────────────────────────────────── */

.cierre { background: var(--brand); }
.cierre-caja { box-sizing: content-box; max-width: 1080px; margin: 0 auto; padding: 110px 36px; text-align: center; position: relative; overflow: hidden; }
.cierre-trazo { position: absolute; inset: 0; width: 100%; height: 100%; }
.cierre-dentro { position: relative; }
.cierre img { height: 52px; width: auto; filter: brightness(0) invert(1); }
.cierre h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 5.6vw, 52px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--tarjeta); margin: 26px auto 18px; max-width: 640px; text-wrap: balance;
}
.cierre-lema { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.6vw, 21px); color: var(--iris-claro); max-width: 480px; margin: 0 auto; }
.cierre .boton { margin-top: 34px; }
.cierre-sello { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--iris); margin-top: 22px; }

.pie { border-top: 1px solid rgba(142, 137, 217, 0.3); }
.pie .envoltura { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; padding-bottom: 24px; flex-wrap: wrap; }
.pie img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.pie-enlaces { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--iris-claro); }
.pie-enlaces a { color: var(--iris-claro); }
.pie-enlaces a:hover { color: var(--tarjeta); }
.pie-enlaces .sello { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--iris); }

/* ═══ Responsive ═══════════════════════════════════════════════════════════
   El diseño original era solo de escritorio. Aquí se abre al teléfono, que es
   donde de verdad se instala la app: quien llega desde el móvil viene a
   ponerla en su pantalla de inicio.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .envoltura { padding-left: 24px; padding-right: 24px; }
  .seccion > .envoltura { padding-top: 72px; padding-bottom: 72px; }

  .hero .envoltura { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 64px; }
  .hero p { max-width: none; }
  /* El texto va primero. Con la imagen arriba, el teléfono ocupaba toda la
     primera pantalla y la frase que explica qué es Lazos quedaba abajo del
     pliegue: quien llega desde un enlace veía una foto y nada más. */
  .hero-arte img { width: min(400px, 100%); }

  .dos-columnas, .dos-columnas.invertida { grid-template-columns: 1fr; gap: 36px; }
  /* min() y no max-width a secas: un max-width mayor que el contenedor deja la
     imagen ancha igual y saca la página de cuadro en el teléfono. */
  .dos-columnas img { width: min(380px, 100%); }
  /* El título antes que la ilustración. En una sola columna, abrir con una
     captura de media pantalla obliga a mirar una foto sin saber de qué habla. */
  .dos-columnas > img, .dos-columnas > video { order: 2; }

  .rejilla.tres, .numeradas { grid-template-columns: 1fr; }
  .cita { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 28px; }
  .cita .sello { text-align: left; }

  /* Los tres pasos pasan a columna y las flechas apuntan hacia abajo. */
  .pasos { flex-direction: column; }
  .paso { width: 100%; max-width: 320px; }
  .flecha-paso { transform: rotate(90deg); }
}

@media (max-width: 760px) {
  .nav-enlaces a:not(.boton) { display: none; }
  .nav .envoltura { gap: 16px; }
  .nav img { height: 24px; }

  .planes, .preguntas, .rejilla.dos { grid-template-columns: 1fr; }
  .plan { padding: 28px; }
  /* «COMPLETO · PARA SIEMPRE» junto al nombre del plan llena casi toda la
     línea: en un teléfono estrecho debe poder bajar en vez de desbordarse. */
  .plan-cabeza { flex-wrap: wrap; row-gap: 6px; }

  .aviso { grid-template-columns: auto 1fr; padding: 18px 20px; }
  .aviso-cuando { grid-column: 2; text-align: left; }

  .cierre-caja { padding: 72px 24px; }
  .pie .envoltura { flex-direction: column; align-items: flex-start; }
  .pie-enlaces { gap: 14px; }
}

@media (max-width: 460px) {
  .envoltura { padding-left: 18px; padding-right: 18px; }
  .boton { padding: 14px 26px; font-size: 15px; width: 100%; }
  .nav .boton { width: auto; }
  .hero-arte img { width: min(300px, 100%); }
  .hero-arte::before { left: 40px; right: -8px; }
  .tarjeta { padding: 24px; }
}

/* ── Legibilidad y tacto en el teléfono ──────────────────────────────────────
   Los micro-textos en mono se diseñaron mirando una pantalla grande: a 9 y 10
   píxeles en un móvil dejan de leerse. Y los enlaces del pie medían 20 px de
   alto, la mitad de lo que un dedo acierta con comodidad.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .paso-meta { font-size: 10.5px; }
  .plan-sello { font-size: 12px; }
  .cierre-sello { font-size: 12px; line-height: 1.6; }
  .pie-enlaces .sello { font-size: 11.5px; line-height: 1.6; }
  .etiqueta { font-size: 11.5px; letter-spacing: 0.12em; }
  .aviso-cuando { font-size: 11.5px; }
  .nota-pie, .puntos p { font-size: 14px; }

  .pie-enlaces a { font-size: 13.5px; }
}

/* Los objetivos táctiles van hasta la tableta, no solo hasta el teléfono: a
   768 px los enlaces del nav vuelven a aparecer y medían 22 px de alto. En
   escritorio se apunta con un ratón y el diseño compacto se mantiene.
   44 px es lo que pide Apple para algo que se toca con el dedo.

   El rango arranca en 761 a propósito: por debajo, los enlaces del nav están
   ocultos, y tocar aquí su `display` los resucitaría — con la hoja en cascada,
   esta regla gana por venir después. */
@media (min-width: 761px) and (max-width: 1024px) {
  .nav-enlaces a:not(.boton) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav .envoltura { padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 1024px) {
  .pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; }
}