/* ============================================================
   Vestigia Design · páginas de servicio (/pagina-para-un-negocio/,
   /tienda-en-linea/). Capa DELTA sobre obra.css: solo lo que estas
   páginas necesitan y las obras no. Se edita a mano, igual que
   nuestro.css y obra.css; construir.py no la escribe.

   Doctrina passe-partout: el marco es el mismo del estudio. Estas
   páginas no inventan un sistema visual nuevo — heredan el de las
   obras para que el visitante que llega de una búsqueda y luego abre
   un caso sienta un solo sitio, no dos.

   Móvil primero: columna única a 393px, un solo corte a 900px.

   ⚠️ Todo hijo de un grid lleva min-width:0. El desborde horizontal de
   Mirotti (08-20) no lo causaba el titular: era el min-width:auto que
   traen por defecto los items de grid. Se contiene en el culpable,
   NUNCA con overflow-x en html/body (eso rompe position:fixed en iOS).
   ============================================================ */

/* ---------- rótulo de columna ---------- */
.bloque .rot{
  margin:0 0 14px;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:#5a5a5a;font-weight:520;
}

/* ---------- incluye / no incluye ----------
   La objeción real del que llega de una búsqueda no es "¿es bonito?",
   es "¿qué me van a entregar y qué no?". Va explícito y en el mismo
   peso visual: esconder el "no incluye" es lo que obliga a la llamada
   incómoda tres semanas después.

   Sin íconos de tic ni de equis: a 393px un ✓ y una ✗ verdes y rojas
   son el tic de plantilla. La diferencia la hace la línea y el color
   del texto. */
.incluye{display:grid;gap:34px}
.incluye > *{min-width:0}
.incluye ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.incluye li{
  padding-left:16px;position:relative;
  font-size:clamp(1rem,4.1vw,1.08rem);line-height:1.45;max-width:46ch;
}
.incluye li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:currentColor;
}
.incluye .si li{color:var(--tinta)}
/* El "no incluye" baja de peso, no de legibilidad: #5a5a5a da 7:1
   sobre papel; el gris de rótulos (#9a9a9a) daba 2.81:1 y accesslint
   lo marcó serio en las obras. */
.incluye .no li{color:#5a5a5a}

/* ---------- pasos ----------
   Numeración propia en mono con hilo vertical: la numeración por
   defecto del navegador usa la tipografía del sistema y es el delator
   de documento de Word. El role="list" va en el HTML porque Safari le
   quita la semántica de lista a un ol sin viñetas. */
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pasos li{
  display:grid;grid-template-columns:44px 1fr;gap:16px;
  padding-block:20px;position:relative;
}
.pasos li > *{min-width:0}
.pasos li + li{border-top:1px solid var(--linea)}
.pasos .n{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:#6b6b6b;letter-spacing:.04em;padding-top:4px;
}
.pasos b{display:block;font-size:clamp(1.1rem,4.6vw,1.3rem);font-weight:560;letter-spacing:-.02em}
.pasos p{margin:6px 0 0;color:#5a5a5a;max-width:52ch;font-size:1rem;line-height:1.45}

/* ---------- pruebas ----------
   No hay logos de clientes ni testimonios: la prueba es el sitio que
   ya está en línea, y cada tarjeta lleva a la página de obra que lo
   cuenta. Las miniaturas copian los CINCO valores de la carátula de la
   portada (78/91, radio 8, campo #f5f4f2, cover, 50% 0%): una miniatura
   con otros parámetros se lee como de otro sitio. */
.pruebas{display:grid;gap:28px}
.pruebas > *{min-width:0}
.prueba{display:block;text-decoration:none}
.prueba img{
  width:100%;aspect-ratio:78/91;border-radius:8px;background:#f5f4f2;
  object-fit:cover;object-position:50% 0%;
}
.prueba b{display:block;margin-top:12px;font-size:1.05rem;font-weight:560;letter-spacing:-.01em}
.prueba span{display:block;margin-top:4px;color:#5a5a5a;font-size:.95rem;line-height:1.4}
.prueba:hover img{opacity:.85}
.prueba:hover b{text-decoration:underline;text-underline-offset:3px}

/* ---------- preguntas ----------
   Van como texto plano, no dentro de un desplegable: el que llega de
   una búsqueda quiere leer la respuesta, no descubrir dónde está. Y el
   dato estructurado de la página declara exactamente estas preguntas. */
.faq{display:grid;gap:28px}
.faq .qa{max-width:62ch}
.faq h3{
  margin:0 0 8px;
  font-size:clamp(1.08rem,4.5vw,1.25rem);line-height:1.3;
  font-weight:560;letter-spacing:-.02em;
}
.faq p{margin:0;font-size:1rem;line-height:1.5;color:#3a3a3a}
.faq a{text-decoration:underline;text-underline-offset:2px}

/* el enlace dentro de la prosa de "para quién es" se tiene que ver */
.bloque p a{text-decoration:underline;text-underline-offset:2px}

@media (min-width:900px){
  .incluye{grid-template-columns:1fr 1fr;gap:48px}
  .pasos li{grid-template-columns:52px 1fr;gap:20px}
  .pruebas{grid-template-columns:repeat(3,1fr);gap:32px}
  .faq{gap:34px}
}

/* ---------- llamado principal ----------
   El estilo .visitar de las obras es correcto ALLÁ (es secundario: "ver el
   sitio del cliente"). Acá el llamado es la razón de ser de la página, y de
   un enlace fino de 15px no se agarra nadie que llegó de una búsqueda.

   El lenguaje del estudio para un llamado principal ya existe y es
   tipográfico: texto grande con un filete que se traza (.cierre-cta de la
   portada). Esto es esa misma idea, en la escala de una página interior.
   Sin botón relleno, sin ícono de WhatsApp: los dos son de otro sitio. */
.cta{
  /* ⚠️ justify-self + fit-content NO son opcionales: a ≥900px .cabeza es un
     grid y el enlace se estira a la columna entera. Medido por ui-reviewer:
     filete de 680px bajo 282px de texto, y ~400px de área de clic invisible
     que abría WhatsApp. El .visitar de obra.css ya los traía por esto mismo. */
  display:inline-block;justify-self:start;width:fit-content;margin-top:24px;
  font-size:clamp(1.3rem,5.6vw,1.75rem);line-height:1.15;
  font-weight:560;letter-spacing:-.025em;
  text-decoration:none;padding-block:10px;   /* área de toque ≥44px */
  position:relative;
}
.cta i{display:block;height:1px;background:var(--tinta);margin-top:6px;
  transform-origin:left;transition:transform .32s cubic-bezier(.22,.85,.3,1)}
.cta:hover i{transform:scaleX(.72)}

/* El bloque del precio: sin fondo de color ni recuadro. Un recuadro acá lo
   convierte en "caja de oferta" y es justo lo que hace desconfiar. */
.bloque--cta p{max-width:52ch}
.bloque--cta .cta{margin-top:18px}

@media (prefers-reduced-motion:reduce){
  .cta i{transition:none}
  .cta:hover i{transform:none}
}

/* ---------- cierre de una página de servicio ----------
   En una obra el cierre es secundario y 17px está bien. Acá el lector llegó
   ahí tras seis pantallas y media y las cinco preguntas: es el punto de mayor
   intención de la página y tenía el llamado más débil de las tres. Sube al
   mismo peso que los de arriba. Solo en estas páginas: las obras no cambian. */
.cierre .acciones .cta{margin-top:0}
.cierre .acciones{gap:10px}