/**
 * Página de rama de Construcción (/construccion/). /mantenimiento/ tiene
 * estructura propia (rama-mantenimiento.css).
 * Fuera de toda capa y acotada a data-plantilla="rama".
 * Lo compartido con el resto del sitio vive en patrones.css.
 */

[data-plantilla="rama"] .rama {
  padding-bottom: var(--espacio-12);
}

[data-plantilla="rama"] .rama__seccion {
  margin-top: var(--espacio-12);
  padding-inline: var(--margen-seccion-amplio);
}

[data-plantilla="rama"] .rama__h2 {
  margin-top: var(--espacio-4);
  font-size: var(--titulo-subseccion);
}

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

/* Hero: tarjeta, foto, degradado y centrado son el patrón ud-hero
   (patrones.css). Aquí solo lo propio: el ancho del título y la entrada. */

[data-plantilla="rama"] .rama__titulo {
  max-width: 16em;
  margin-top: var(--espacio-4);
}

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

/* Introducción ----------------------------------------------------------- */

[data-plantilla="rama"] .rama__texto {
  max-width: 68ch;
}

[data-plantilla="rama"] .rama__texto p {
  margin-top: var(--espacio-4);
  color: var(--color-texto-suave);
}

/* Servicios de la rama ---------------------------------------------------- */

[data-plantilla="rama"] .rama__servicios {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--espacio-6);
  margin-top: var(--espacio-8);
}

[data-plantilla="rama"] .rama__servicio-enlace {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: var(--borde) solid var(--tarjeta-borde, var(--color-linea));
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-1);
  color: var(--color-texto);
  text-decoration: none;
}

[data-plantilla="rama"] .rama__servicio-enlace:focus-visible {
  outline: 2px solid var(--color-guinda-claro);
  outline-offset: 4px;
}

[data-plantilla="rama"] .rama__servicio-foto {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

/* Con foto, el marco pierde el relleno del marcador y la imagen lo llena. */
[data-plantilla="rama"] .rama__servicio-foto:has(.rama__servicio-imagen) {
  padding: 0;
}

[data-plantilla="rama"] .rama__servicio-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-plantilla="rama"] .rama__servicio-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--espacio-8) var(--espacio-6);
}

[data-plantilla="rama"] .rama__servicio-nombre {
  font-size: var(--titulo-tarjeta);
}

[data-plantilla="rama"] .rama__servicio-texto {
  display: block;
  margin-top: var(--espacio-3);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* "Ver más" siempre al fondo de la tarjeta. */
[data-plantilla="rama"] .rama__servicio-mas {
  display: inline-flex;
  min-height: var(--area-toque);
  align-items: center;
  gap: var(--espacio-3);
  margin-top: auto;
  padding-top: var(--espacio-6);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: var(--peso-titulo);
}

/* Proyectos y confianza ---------------------------------------------------- */

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

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

[data-plantilla="rama"] .rama__encabezado-carrusel .ud-carrusel__flechas {
  margin-left: auto;
}

[data-plantilla="rama"] .rama__proyectos {
  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);
}

[data-plantilla="rama"] .rama__insignias {
  margin-top: var(--espacio-8);
}

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

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

[data-plantilla="rama"] .rama__cierre {
  margin-top: var(--espacio-12);
  margin-inline: var(--margen-seccion-amplio);
}

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

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

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

@media (min-width: 64rem) {
  [data-plantilla="rama"] .ud-insignias {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  [data-plantilla="rama"] .rama__proyectos {
    grid-auto-columns: calc((100% - var(--espacio-6) * 3) / 3.35);
  }
}