/**
 * /mantenimiento/: la rama completa (techos industriales y canalones y
 * bajantes) y la página pilar del blog. Fuera de toda capa y acotada a su
 * data-page. Lo compartido con el resto del sitio vive en patrones.css.
 */

[data-page="mantenimiento"] .mant {
  padding-bottom: var(--espacio-12);
}

[data-page="mantenimiento"] .mant__seccion {
  margin-top: var(--espacio-12);
  padding-inline: var(--margen-seccion-amplio);
}

[data-page="mantenimiento"] .mant__h2 {
  margin-top: var(--espacio-4);
  font-size: var(--titulo-subseccion);
}

/* Párrafos de introducción y de entrada de cada servicio. */
[data-page="mantenimiento"] .mant__texto {
  max-width: 68ch;
}

[data-page="mantenimiento"] .mant__texto p {
  margin-top: var(--espacio-4);
  color: var(--color-texto-suave);
}

/* Hero ------------------------------------------------------------------ */

/* Tarjeta, foto, degradado y centrado son el patrón ud-hero (patrones.css).
   Aquí solo lo propio: el ancho del título, la entrada y el teléfono, que va
   debajo del botón. */

[data-page="mantenimiento"] .mant__titulo {
  max-width: 16em;
  margin-top: var(--espacio-4);
}

[data-page="mantenimiento"] .mant__entrada {
  max-width: var(--ancho-texto);
  margin-top: var(--espacio-4);
  color: var(--color-texto-suave);
  font-size: var(--texto-lg);
}

[data-page="mantenimiento"] .mant__telefono {
  display: inline-flex;
  min-height: var(--area-toque);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: var(--espacio-4);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  text-decoration: none;
}

[data-page="mantenimiento"] .mant__telefono:hover,
[data-page="mantenimiento"] .mant__telefono:focus-visible {
  color: var(--color-guinda-claro);
}

[data-page="mantenimiento"] .mant__telefono-nota {
  color: var(--color-texto-suave);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
}

/* Señales ---------------------------------------------------------------- */

[data-page="mantenimiento"] .mant__senales {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--espacio-4);
  margin-top: var(--espacio-8);
}

[data-page="mantenimiento"] .mant__senal {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
  padding: var(--espacio-6);
  border: var(--borde) solid var(--tarjeta-borde, var(--color-linea));
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-1);
}

[data-page="mantenimiento"] .mant__senal-icono {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  fill: none;
  stroke: var(--color-guinda-claro);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

[data-page="mantenimiento"] .mant__senal-texto {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
}

/* Techos industriales y canalones: tarjetas de cada servicio ---------------- */

[data-page="mantenimiento"] .mant__bloques {
  display: grid;
  gap: var(--espacio-6);
  margin-top: var(--espacio-8);
}

[data-page="mantenimiento"] .mant__bloque {
  padding: var(--espacio-8) var(--espacio-6);
  border: var(--borde) solid var(--tarjeta-borde, var(--color-linea-fuerte));
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-2);
}

[data-page="mantenimiento"] .mant__bloque-titulo {
  font-size: var(--titulo-tarjeta);
}

[data-page="mantenimiento"] .mant__bloque-texto {
  margin-top: var(--espacio-3);
  color: var(--color-texto-suave);
}

[data-page="mantenimiento"] .mant__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-top: var(--espacio-6);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* Sin detener su operación ------------------------------------------------ */

[data-page="mantenimiento"] .ud-seccion-clara {
  padding-block: var(--espacio-12);
}

[data-page="mantenimiento"] .mant__texto-claro {
  max-width: 68ch;
  margin-top: var(--espacio-4);
  color: color-mix(in srgb, var(--color-primario) 78%, var(--color-apoyo));
}

/* Proceso y confianza ----------------------------------------------------- */

[data-page="mantenimiento"] .ud-pasos {
  margin-top: var(--espacio-8);
}

[data-page="mantenimiento"] .mant__insignias {
  margin-top: var(--espacio-8);
}

[data-page="mantenimiento"] .mant__marcas {
  margin-top: var(--espacio-8);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* Carruseles -------------------------------------------------------------- */

[data-page="mantenimiento"] .mant__encabezado-carrusel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-4);
}

[data-page="mantenimiento"] .mant__acciones-carrusel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-6);
  margin-left: auto;
}

[data-page="mantenimiento"] .mant__proyectos,
[data-page="mantenimiento"] .mant__notas {
  grid-auto-columns: calc((100% - var(--espacio-6)) / 1.25);
  gap: var(--espacio-6);
  margin-top: var(--espacio-8);
  margin-inline: calc(var(--margen-seccion-amplio) * -1);
  padding-inline: var(--margen-seccion-amplio);
  scroll-padding-left: var(--margen-seccion-amplio);
}

/* Las notas son enlaces que se elevan: respiro arriba y abajo para que la
   tarjeta y su sombra no se corten contra la pista, compensado con los
   márgenes para que la sección mida lo mismo. */
[data-page="mantenimiento"] .mant__notas {
  margin-top: var(--espacio-4);
  margin-bottom: calc(var(--espacio-8) * -1);
  padding-block: var(--espacio-4) var(--espacio-8);
}

/* Preguntas y cierre ------------------------------------------------------- */

[data-page="mantenimiento"] .mant__preguntas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin-top: var(--espacio-8);
}

[data-page="mantenimiento"] .mant__cierre {
  margin-top: var(--espacio-12);
  margin-inline: var(--margen-seccion-amplio);
}

/* Tablet -------------------------------------------------------------------- */

@media (min-width: 48rem) {
  [data-page="mantenimiento"] .mant__senales {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-page="mantenimiento"] .mant__bloques {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Escritorio ----------------------------------------------------------------- */

@media (min-width: 64rem) {
  [data-page="mantenimiento"] .mant__senales {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-page="mantenimiento"] .ud-insignias {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  [data-page="mantenimiento"] .mant__proyectos,
  [data-page="mantenimiento"] .mant__notas {
    grid-auto-columns: calc((100% - var(--espacio-6) * 3) / 3.35);
  }
}