/* =========================================================
   DB Project — Páginas de formato (landing / sitio web / tienda)
   Las tres comparten estructura exacta, así que comparten hoja: una sola
   definición para los tres, no tres archivos iguales.
   Todo lo que ya existe se reusa —.section, .container, .apertura, .card,
   .conectable__list, .btn, .costura, .tramo-claro— y acá vive únicamente lo
   que estas páginas agregan.
   ========================================================= */

/* ── Qué incluye ──────────────────────────────────────────────────────────────
   Hereda la grilla de .conectable__list (1 / 2 / 4 columnas). Lo único propio
   es el pie, que no es una tarjeta más. */
.incluye__pie {
  margin-top: var(--space-4);
}

/* ── Para qué negocio sirve ───────────────────────────────────────────────────
   auto-fit y no un número fijo de columnas: los tres formatos traen dos o tres
   rubros, y con auto-fit la misma regla acomoda los dos casos sin una media
   query por cantidad. minmax con 0 abajo para que la celda pueda achicarse por
   debajo de su contenido en pantallas angostas. */
.rubro__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
/* Los rubros DEJAN DE SER TARJETAS. Eran caja con borde, fondo y título, y no
   tenían nada adentro para mirar: ni número, ni miniatura, ni dato — sólo un
   título y un párrafo. La regla de esta ronda es explícita: si no hay nada que
   mostrar, que no sea una tarjeta, que sea texto suelto.
   Queda un filete de acento a la izquierda que los agrupa como serie, y nada
   más. Sin caja, sin fondo, sin borde superior. */
.rubro {
  min-width: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--db-acento-sobre-claro);
}
.rubro h3 {
  margin-block: 0 var(--space-1);
  font-size: var(--db-fs-body);
  font-weight: 600;
  color: var(--db-texto-sobre-claro);
}
.rubro p {
  margin: 0;
  font-size: var(--db-fs-small);
  line-height: 1.6;
  color: var(--db-texto-secundario-sobre-claro);
}

/* ── Los cinco pasos, en versión corta ────────────────────────────────────────
   No es el recorrido pineado de Proceso: acá los cinco pasos son un resumen que
   se lee de corrido y que enlaza a la página que sí los desarrolla. El número
   va en su propia columna para que la lectura entre por él. */
.paso-corto__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: paso;
}
.paso-corto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--db-linea);
}
.paso-corto__num {
  margin: 0;
  /* Ancho en ch y no en px: la fuente mono es tabular, así que dos caracteres
     miden lo mismo siempre y la columna no se mueve entre pasos. */
  min-width: 3ch;
  font-size: var(--db-fs-eti);
  color: var(--db-acento);
  letter-spacing: 0.08em;
}
.paso-corto__cuerpo { min-width: 0; }
.paso-corto__cuerpo h3 { margin-block: 0 var(--space-1); }
.paso-corto__cuerpo p { margin: 0; }

@media (min-width: 900px) {
  /* Dos columnas: los cinco pasos entran en una pantalla en vez de pedir media
     página de scroll para un resumen. */
  .paso-corto__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}

/* ── Cierre ───────────────────────────────────────────────────────────────────
   Centrado y corto: es la última pantalla y tiene una sola pregunta. */
.cierre-formato { text-align: center; }
.cierre-formato h2 { margin-inline: auto; max-width: 20ch; }
.cierre-formato .lead {
  margin-inline: auto;
  max-width: 56ch;
  margin-bottom: var(--space-4);
}
.cierre-formato__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* ── El grupo de formatos dentro del menú de pantalla completa ────────────────
   Los tres formatos no entran en la barra de arriba (ver el comentario del
   HTML). Acá sí, y como subgrupo: mismo peso tipográfico que un título de
   bloque, no el de una página, para que se lea que cuelgan de Servicios. */
.menu__grupo {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--db-font-mono);
  font-size: var(--db-fs-eti);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--db-gris-medio);
}
.menu__link--sub {
  min-height: 48px;
  font-size: var(--db-fs-h3);
  font-weight: 500;
  color: var(--db-gris-claro);
}
.menu__link--sub .menu__num { color: var(--db-acento); }

/* El título de una tarjeta no puede tomar el techo del nivel 3. A 1100px la
   grilla pasa a cuatro columnas de ~230px, y 32px ahí entran en once caracteres
   por renglón: "Posicionamiento en buscadores" salía en cinco líneas y la
   tarjeta se leía como una lista de palabras sueltas. Es el mismo criterio que
   .titulo-largo aplica a los títulos de sección, un nivel más abajo: el tamaño
   responde al ancho de la caja que lo contiene, no sólo al de la pantalla. */
.incluye__list .card h3 { font-size: clamp(1.25rem, 1.4vw, 1.5rem); }


/* ═════════════════════════════════════════════════════════════════════════════
   04 · CUÁL TE CONVIENE  ·  05 · DESPUÉS DE PUBLICAR
   Ronda 2026-09-06. Las dos secciones que amplían landing y sitio-web. Todo el
   texto sale de PRODUCT.md y content/: ni un dato nuevo.
   ═══════════════════════════════════════════════════════════════════════════ */

.compara {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 780px) {
  .compara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
/* La comparación tampoco es un par de tarjetas: es una tabla de dos columnas.
   Tenía caja, borde, radio y fondo, y adentro sólo título y párrafo. Se le saca
   la caja entera; lo que separa las dos columnas ahora es una línea, y lo que
   marca cuál es la de esta página es el color del título. */
.compara__col {
  padding-top: var(--space-3);
  border-top: 1px solid var(--db-linea);
  min-width: 0;
}
.compara__col--activo { border-top-color: var(--db-acento); }
.compara__col h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--db-fs-h3);
  letter-spacing: -0.02em;
}
.compara__col--activo h3 { color: var(--db-acento); }
.compara__col p { margin: 0; font-size: var(--db-fs-small); line-height: 1.6; color: var(--db-gris-claro); }
.compara__ir { margin-top: var(--space-4); }

.despues__grid {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 780px) {
  .despues__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
.despues__list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--db-fs-small);
  line-height: 1.55;
  color: var(--db-gris-claro);
}
/* El filete de acento en vez de una viñeta: el sitio no usa bullets en ningún
   lado y no va a empezar acá. */
.despues__list li { padding-left: var(--space-3); border-left: 2px solid var(--db-acento-apagado); }
.despues__nota {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--db-linea);
  font-size: var(--db-fs-eti);
  line-height: 1.6;
  color: var(--db-gris-medio);
}