/* La página factual de dotoo reutiliza el chasis de la landing y solo añade composición. */
.web-que-es{ padding-bottom: 112px; }
.web-que-es-hero{ display:flex; flex-direction:column; gap:20px; padding-top:96px; padding-bottom:72px; }
.web-que-es-hero h1{ max-width:780px; font-size:56px; }
.web .web-que-es-entradilla{ max-width:760px; font-size:19px; }
.web-que-es-indice{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.web-que-es-indice a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border:var(--contorno) solid var(--tinta); border-radius:999px; background:var(--fondo);
  box-shadow:0 1.5px 0 var(--som); font-size:13px; font-weight:800;
}
/* `scroll-margin-top` = alto de `.web-nav` (base.css): el indice de arriba salta por ancla y la nav
   ahora es sticky, asi que sin este margen el encabezado de la seccion queda tapado debajo. Va
   tambien en `.web-que-es-banda`: el ancla de "como funciona" cae en la section exterior, no en
   este div. */
.web-que-es-seccion{
  display:flex; flex-direction:column; gap:28px; padding-top:80px; padding-bottom:80px;
  scroll-margin-top: 96px;
}
.web-que-es-prosa{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; max-width:960px; }
.web-que-es-banda{ background:var(--crema2); border-block:var(--contorno) solid var(--tinta); scroll-margin-top: 96px; }
.web-que-es-pasos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.web-que-es-pasos li,.web-que-es-estados article{ padding:26px; }
.web-que-es-pasos h3,.web-que-es-estados h3{ margin:0 0 10px; font-size:18px; line-height:1.2; }
.web-que-es-pasos p,.web-que-es-estados p{ font-size:15px; }
.web-que-es-numero{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  margin-bottom:18px; border:var(--contorno) solid var(--tinta); border-radius:999px;
  background:var(--lavanda-cl); box-shadow:0 1.5px 0 var(--lavanda-s); font-weight:800;
}
.web .web-que-es-encaje>p{ max-width:760px; }
.web-que-es-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.web-que-es-estados{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.web-que-es-estados a{ display:inline-block; margin-top:16px; font-size:14px; font-weight:800; text-decoration:underline; }

@media (max-width:900px){
  .web-que-es{ padding-bottom:72px; }
  .web-que-es-hero{ gap:16px; padding-top:56px; padding-bottom:44px; }
  .web-que-es-hero h1{ font-size:34px; }
  .web .web-que-es-entradilla{ font-size:16px; }
  .web-que-es-seccion{ gap:22px; padding-top:56px; padding-bottom:56px; }
  .web-que-es-prosa,.web-que-es-pasos,.web-que-es-estados{ grid-template-columns:1fr; }
  .web-que-es-pasos li,.web-que-es-estados article{ padding:22px; }
}