/**
 * Home. Fuera de toda capa y acotado a su data-page.
 *
 * Las fotos todavía no existen: cada hueco es un bloque redondeado teñido con
 * Tender Light Blue y el marcador [PENDIENTE] a la vista.
 */

[data-page="inicio"] .inicio {
  padding: var(--margen-lateral) var(--margen-lateral) var(--espacio-12);
}

[data-page="inicio"] .inicio > * + * {
  margin-top: var(--espacio-12);
}

/* Vocabulario del home ------------------------------------------------ */

[data-page="inicio"] .inicio__titulo {
  margin-top: var(--espacio-4);
  font-size: var(--titulo-seccion);
}

[data-page="inicio"] .inicio__resalte {
  color: var(--color-guinda-claro);
}

[data-page="inicio"] .inicio__texto {
  max-width: var(--ancho-texto);
  margin-top: var(--espacio-4);
  color: var(--color-texto-suave);
}

[data-page="inicio"] .inicio__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
}

/* Sirve para <a> y para <button>: sin background-color, el botón tomaría el
   fondo claro que pone el navegador y el texto se perdería. */
[data-page="inicio"] .inicio__boton-secundario {
  display: inline-flex;
  min-height: var(--area-toque);
  align-items: center;
  justify-content: center;
  padding: 0 var(--espacio-6);
  border: var(--borde) solid var(--color-linea-fuerte);
  border-radius: var(--radio-pildora);
  background-color: transparent;
  color: var(--color-texto);
  cursor: pointer;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: var(--peso-titulo);
  text-decoration: none;
  transition: background-color var(--transicion);
}

[data-page="inicio"] .inicio__boton-secundario:hover,
[data-page="inicio"] .inicio__boton-secundario:focus-visible {
  background-color: var(--color-fondo-hover);
  color: var(--color-texto);
}

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

/* Tres márgenes en juego: el de arriba de la cápsula, el que la separa del
   contenido y el que deja libre abajo. Con eso la primera pantalla cierra
   exacta: margen + header + margen + hero + margen = alto de la ventana.
   svh, no vh ni dvh: no cambia cuando aparece o se va la barra del navegador.
   Es min-height, así que en pantallas bajas la tarjeta crece en vez de
   recortar el contenido. */
[data-page="inicio"] .inicio__hero {
  position: relative;
  display: flex;
  min-height: calc(100vh - var(--altura-header) - var(--margen-lateral) * 3);
  min-height: calc(100svh - var(--altura-header) - var(--margen-lateral) * 3);
  flex-wrap: wrap;
  /* Texto a la izquierda y cifras a la derecha, las dos cosas apoyadas
     abajo. Si no caben lado a lado, las cifras bajan debajo del texto y el
     conjunto se queda abajo de la tarjeta. */
  align-content: flex-end;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-8) var(--espacio-12);
  overflow: hidden;
  padding: var(--espacio-8) var(--relleno-hero);
  border-radius: var(--radio-lg);
}

[data-page="inicio"] .inicio__hero-foto {
  position: absolute;
  inset: 0;
}

/* En celular la tarjeta es vertical y solo se recorta a lo ancho: el encuadre
   se corre a la izquierda para no cortar al montador ni su casco. */
[data-page="inicio"] .inicio__hero-imagen,
[data-page="inicio"] .inicio__hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}

/* El video va encima de la imagen y debajo del degradado. Si no puede
   reproducirse, el JavaScript lo oculta y queda la imagen a la vista. */
[data-page="inicio"] .inicio__hero-video {
  position: absolute;
  inset: 0;
}

/* Con movimiento reducido no hay video: solo la imagen de respaldo. */
@media (prefers-reduced-motion: reduce) {
  [data-page="inicio"] .inicio__hero-video {
    display: none;
  }
}

/* Degradado sobre el video: oscurece solo donde está el texto y deja limpio
   el resto. Es decorativo (pseudoelemento sin texto): los lectores de
   pantalla no lo anuncian. Intensidad medida contra 30 cuadros del video: el
   párrafo cumple AA en 390, 768, 1024 y 1440 px.
   Mientras las cifras van debajo del texto (antes de 64rem), el texto queda
   en la parte de arriba: se oscurece esa franja y las cifras quedan limpias. */
[data-page="inicio"] .inicio__hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-fondo) 86%, transparent) 0%,
    color-mix(in srgb, var(--color-fondo) 86%, transparent) 45%,
    transparent 62%
  );
}

/* Base flexible de 36rem: por debajo de eso junto a las cifras, las cifras
   pasan abajo. */
[data-page="inicio"] .inicio__hero-contenido {
  position: relative;
  flex: 1 1 36rem;
}

/* Cifras del hero: tarjetas pequeñas en una columna, translúcidas con
   desenfoque como la píldora del header. Estilos propios, no el patrón
   ud-cifras (lo usan Nosotros y Proyectos). La columna toma el ancho de la
   etiqueta más larga. */
[data-page="inicio"] .inicio__hero-cifras {
  position: relative;
  display: grid;
  flex: none;
  gap: var(--espacio-2);
}

[data-page="inicio"] .inicio__hero-cifra {
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde) solid var(--tarjeta-borde, var(--color-linea-fuerte));
  border-radius: var(--radio-md);
  background-color: var(--color-fondo);
}

/* Respaldo opaco: lo translúcido solo se activa donde hay backdrop-filter. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-page="inicio"] .inicio__hero-cifra {
    background-color: var(--color-header);
    backdrop-filter: var(--desenfoque-header);
    -webkit-backdrop-filter: var(--desenfoque-header);
  }
}

/* La cifra manda: escala de títulos de sección. Cabe en la tarjeta en
   cualquier ancho, porque la columna la ensancha la etiqueta más larga. */
/* Realce que recorre las cifras, una tarjeta a la vez y en bucle: borde en
   guinda claro (más una línea interior, para que se note sin engrosar la
   caja). Cada tarjeta corre la misma animación con un cuarto de vuelta de
   desfase. Solo cambia color y sombra: no mueve ni redimensiona nada, y no
   toca lo que leen los lectores de pantalla. Con movimiento reducido no hay
   realce. */
@media (prefers-reduced-motion: no-preference) {
  [data-page="inicio"] .inicio__hero-cifra {
    animation: inicio-cifra-realce var(--duracion-cifras) ease-in-out infinite;
  }

  [data-page="inicio"] .inicio__hero-cifra:nth-child(2) {
    animation-delay: calc(var(--duracion-cifras) / 4);
  }

  [data-page="inicio"] .inicio__hero-cifra:nth-child(3) {
    animation-delay: calc(var(--duracion-cifras) / 4 * 2);
  }

  [data-page="inicio"] .inicio__hero-cifra:nth-child(4) {
    animation-delay: calc(var(--duracion-cifras) / 4 * 3);
  }
}

/* Encendido en 0.4 s, 1.7 s firme y apagado en 0.4 s, dentro de su cuarto de
   vuelta; el resto del tiempo, el borde de siempre. */
@keyframes inicio-cifra-realce {
  0%,
  25%,
  100% {
    border-color: var(--tarjeta-borde, var(--color-linea-fuerte));
    box-shadow: inset 0 0 0 var(--borde) transparent;
  }

  4%,
  21% {
    border-color: var(--color-guinda-claro);
    box-shadow: inset 0 0 0 var(--borde) var(--color-guinda-claro);
  }
}

[data-page="inicio"] .inicio__hero-cifra-numero {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-seccion);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--espaciado-letra-titulo);
  line-height: var(--interlinea-apretada);
}

[data-page="inicio"] .inicio__hero-cifra-etiqueta {
  margin-top: var(--espacio-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* La medida corta el título en dos líneas parejas en escritorio:
   "Construimos y mantenemos" / "techos para naves industriales". */
[data-page="inicio"] .inicio__hero-titulo {
  max-width: 16em;
  margin-top: var(--espacio-4);
}

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

/* Cápsula del hero: fondo sólido para que se lea sobre cualquier cuadro del
   video (blanco sobre guinda vivo, 7.5:1). Solo aquí; el patrón ud-capsula
   no cambia. */
[data-page="inicio"] .inicio__hero .ud-capsula {
  border-color: transparent;
  background-color: var(--color-guinda-vivo);
  color: var(--color-blanco);
}

/* Ramas y tarjetas ---------------------------------------------------- */

/* Las dos ramas del negocio, entre los clientes y Servicios: dos tarjetas
   con foto de fondo del mismo alto (apiladas en celular), con el margen
   amplio de las secciones de abajo (descuenta el del <main>, como SST). La
   tarjeta no es enlace: el enlace es el botón. El contenido va abajo a la
   izquierda; en escritorio, el de la segunda tarjeta va abajo a la derecha. */
[data-page="inicio"] .inicio__ramas {
  display: grid;
  gap: var(--espacio-8);
  margin-inline: calc(var(--margen-seccion-amplio) - var(--margen-lateral));
}

/* Montaje: la barra de clientes queda a caballo sobre el borde superior de
   las ramas. La sección sube --espacio-24 (96 px, cerca de la mitad del alto
   de la barra) y la barra pasa por encima. Las tarjetas suman ese mismo
   valor a su relleno de arriba, así nada legible (ni el contenido ni el
   marcador de foto) queda bajo la barra en ningún ancho. Se conserva en
   celular. z-index 1: el header y sus submenús (100) y el botón de WhatsApp
   (90) siguen por encima. */
[data-page="inicio"] .inicio__clientes {
  position: relative;
  z-index: 1;
}

[data-page="inicio"] .inicio__ramas {
  margin-top: calc(var(--espacio-24) * -1);
}

[data-page="inicio"] .inicio__rama {
  position: relative;
  display: flex;
  aspect-ratio: 3 / 4;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  padding: var(--espacio-8) var(--relleno-hero);
  padding-top: calc(var(--espacio-24) + var(--espacio-8));
  border: var(--borde) solid var(--tarjeta-borde, var(--color-linea));
  border-radius: var(--radio-lg);
  text-align: left;
}

/* Sin foto, el marcador va arriba, como en el hero interior. */
[data-page="inicio"] .inicio__rama-foto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: var(--espacio-4);
  padding-top: calc(var(--espacio-24) + var(--espacio-4));
  background-color: color-mix(in srgb, var(--color-apoyo) 22%, var(--color-fondo));
}

[data-page="inicio"] .inicio__rama-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradado decorativo (pseudoelemento sin texto) donde está el texto: en
   tarjetas angostas, el texto ocupa casi todo el ancho y se oscurece la
   franja de abajo; desde 80rem, solo la esquina del texto (ver Escritorio).
   Medido sobre la foto de Construcción: el párrafo cumple AA en 390, 1024,
   1280, 1440 y 1920 px. */
[data-page="inicio"] .inicio__rama::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-fondo) 84%, transparent) 0%,
    color-mix(in srgb, var(--color-fondo) 84%, transparent) 70%,
    transparent 100%
  );
}

[data-page="inicio"] .inicio__rama-contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

[data-page="inicio"] .inicio__rama-titulo {
  font-size: var(--titulo-subseccion);
}

[data-page="inicio"] .inicio__rama-texto {
  max-width: var(--ancho-texto);
  margin-top: var(--espacio-4);
  color: var(--color-texto-suave);
}

[data-page="inicio"] .inicio__rama-contenido .ud-boton {
  margin-top: var(--espacio-6);
}

/* Clientes ------------------------------------------------------------ */

/* La tarjeta se alinea con el margen amplio de Nosotros: sus bordes quedan a
   plomo con las tarjetas de cifras. Descuenta el margen del <main>, que ya
   la separa del borde. La pista corre de borde a borde de la tarjeta y se
   desvanece en los dos extremos. */
[data-page="inicio"] .inicio__clientes {
  /* Contenedor de consulta: los marcadores se miden contra el ancho de la
     tarjeta (cqi), no contra la ventana. */
  container-type: inline-size;
  overflow: hidden;
  /* Más angosta que las cifras y centrada respecto a ellas: parte del margen
     amplio (sin el del <main>, que ya la separa) y entra un poco más. */
  margin-inline: calc(var(--margen-seccion-amplio) - var(--margen-lateral) + var(--espacio-6));
  padding-block: var(--espacio-12);
  border-radius: var(--radio-lg);
  background-color: var(--color-blanco);
}

/* H2 por semántica, pero con el texto de una etiqueta cápsula y sin la
   cápsula: deshace el peso, el ancho y el espaciado de los títulos. */
[data-page="inicio"] .inicio__clientes-titulo {
  margin-bottom: var(--espacio-6);
  padding-inline: var(--espacio-6);
  color: var(--color-primario-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-titulo);
  font-stretch: normal;
  letter-spacing: var(--espaciado-letra-amplio);
  line-height: var(--interlinea-normal);
  text-align: center;
  text-transform: uppercase;
}

/* El desvanecido va en un contenedor quieto, no en la pista que se mueve:
   si fuera en la pista, se desplazaría con ella. Es una máscara: los
   extremos se vuelven transparentes y dejan ver el fondo de la tarjeta, así
   que se funden con el color que tenga la tarjeta. */
[data-page="inicio"] .inicio__clientes-marco {
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--color-negro) var(--espacio-16),
    var(--color-negro) calc(100% - var(--espacio-16)),
    transparent
  );
}

[data-page="inicio"] .inicio__clientes-pista {
  display: flex;
  width: max-content;
}

/* Las dos listas son idénticas y cada una deja al final el mismo hueco que
   hay entre pastillas: al recorrer la mitad, la segunda ocupa el lugar exacto
   de la primera y el ciclo no se nota. */
[data-page="inicio"] .inicio__clientes-lista {
  display: flex;
  flex: none;
  gap: var(--espacio-6);
  padding-right: var(--espacio-6);
}

/* Unas dos y media marcas visibles en celular y seis en escritorio: el ancho
   mínimo es la fracción de la tarjeta menos el hueco. Una marca de nombre
   largo crece sobre ese mínimo, así que a veces caben menos, nunca más. */
[data-page="inicio"] .inicio__cliente {
  flex: none;
  min-width: calc(100cqi / 2.5 - var(--espacio-6));
  padding: var(--espacio-3) var(--espacio-6);
  border: var(--borde) solid var(--tarjeta-borde, var(--color-linea-clara));
  border-radius: var(--radio-pildora);
  color: var(--color-primario);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: var(--peso-titulo);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 64rem) {
  [data-page="inicio"] .inicio__clientes-lista {
    gap: var(--espacio-8);
    padding-right: var(--espacio-8);
  }

  [data-page="inicio"] .inicio__cliente {
    min-width: calc(100cqi / 6 - var(--espacio-8));
  }
}

/* Solo se mueve si el usuario no pidió menos movimiento; si lo pidió, queda
   quieta. Se detiene al pasar el cursor. */
@media (prefers-reduced-motion: no-preference) {
  [data-page="inicio"] .inicio__clientes-pista {
    animation: inicio-clientes var(--duracion-clientes) linear infinite;
  }

  [data-page="inicio"] .inicio__clientes:hover .inicio__clientes-pista {
    animation-play-state: paused;
  }
}

@keyframes inicio-clientes {
  to {
    transform: translateX(-50%);
  }
}

/* Servicios: carrusel de tarjetas con ícono -------------------------------- */

/* Títulos de Servicios y Proyectos: 16em los parte en dos líneas parejas
   (con text-wrap: balance). */
[data-page="inicio"] .inicio__servicios-encabezado .inicio__titulo,
[data-page="inicio"] .inicio__seccion--proyectos .inicio__titulo {
  max-width: 16em;
}

/* Párrafo de encabezado sobre fondo claro: el ancho de lectura y el espacio
   del de Blog, en azul de marca. Servicios y Proyectos. */
[data-page="inicio"] .inicio__servicios-entrada,
[data-page="inicio"] .inicio__proyectos-entrada {
  max-width: var(--ancho-texto);
  margin-top: var(--espacio-4);
  color: var(--color-primario);
}

/* Sobre fondo claro, cápsula y flechas en azul de marca, como en Proyectos. */
[data-page="inicio"] .inicio__seccion--servicios .ud-capsula {
  border-color: color-mix(in srgb, var(--color-primario) 30%, transparent);
  color: var(--color-primario);
}

[data-page="inicio"] .inicio__seccion--servicios .ud-carrusel__boton {
  border-color: color-mix(in srgb, var(--color-primario) 30%, transparent);
  color: var(--color-primario);
}

[data-page="inicio"] .inicio__seccion--servicios .ud-carrusel__boton:hover:not([disabled]),
[data-page="inicio"] .inicio__seccion--servicios .ud-carrusel__boton:focus-visible {
  background-color: color-mix(in srgb, var(--color-blanco) 45%, var(--color-apoyo));
}

/* La pista sale hasta los bordes de la franja (margen negativo igual a su
   relleno) y lo recupera por dentro: en reposo la primera tarjeta queda a
   plomo con el título y al final la última deja el mismo espacio a la
   derecha. En una sola fila, todas las tarjetas miden lo mismo.
   Celular: una tarjeta y un asomo. */
/* Respiro arriba y abajo para que la tarjeta elevada y su sombra no se
   corten contra la pista; el margen negativo de abajo y el superior más
   corto lo compensan, así la sección mide lo mismo. */
[data-page="inicio"] .inicio__servicios {
  grid-auto-columns: calc((100% - var(--espacio-4)) / 1.25);
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
  margin-bottom: calc(var(--espacio-8) * -1);
  padding-block: var(--espacio-4) 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-page="inicio"] .inicio__servicio {
  display: flex;
  flex-direction: column;
  border: var(--borde) solid var(--tarjeta-borde, var(--color-linea-clara));
  border-radius: var(--radio-lg);
  background-color: var(--color-blanco);
}

[data-page="inicio"] .inicio__servicio-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--espacio-6);
}

[data-page="inicio"] .inicio__servicio-icono {
  width: var(--icono-grande);
  height: var(--icono-grande);
  flex: none;
  fill: none;
  stroke: var(--color-guinda);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

[data-page="inicio"] .inicio__servicio-nombre {
  margin-top: var(--espacio-6);
  color: var(--color-primario);
  font-size: var(--titulo-tarjeta);
}

[data-page="inicio"] .inicio__servicio-linea {
  margin-top: var(--espacio-2);
  color: var(--color-primario-suave);
  font-size: var(--texto-sm);
}

/* "Ver más" al fondo de la tarjeta en todas, aunque el título ocupe dos
   líneas: con tarjetas del mismo alto, quedan alineados. */
[data-page="inicio"] .inicio__servicio .ud-enlace-flecha {
  margin-top: auto;
  padding-top: var(--espacio-4);
  color: var(--color-guinda);
}

[data-page="inicio"] .inicio__servicio .ud-enlace-flecha:hover,
[data-page="inicio"] .inicio__servicio .ud-enlace-flecha:focus-visible {
  color: var(--color-primario);
}

[data-page="inicio"] .inicio__servicio .ud-boton__flecha {
  background-color: var(--color-guinda);
  color: var(--color-blanco);
}

/* Tarjeta 12: llamada a la acción, sin ícono y en guinda vivo. */
[data-page="inicio"] .inicio__servicio--cta {
  border-color: transparent;
  background-color: var(--color-guinda-vivo);
}

/* La franja pinta el texto de azul; la tarjeta guinda lo mantiene claro. */
[data-page="inicio"] .inicio__servicio--cta .inicio__servicio-nombre {
  margin-top: 0;
  color: var(--color-texto);
}

[data-page="inicio"] .inicio__servicio--cta .inicio__servicio-linea {
  color: color-mix(in srgb, var(--color-texto) 88%, var(--color-guinda-vivo));
}

/* Sobre guinda, texto y círculo claros, también al pasar el cursor: el
   patrón los pinta de guinda y aquí desaparecerían. */
[data-page="inicio"] .inicio__servicio--cta .ud-enlace-flecha,
[data-page="inicio"] .inicio__servicio--cta .ud-enlace-flecha:hover,
[data-page="inicio"] .inicio__servicio--cta .ud-enlace-flecha:focus-visible {
  color: var(--color-texto);
}

[data-page="inicio"] .inicio__servicio--cta .ud-boton__flecha {
  background-color: var(--color-texto);
  color: var(--color-guinda-vivo);
}

/* Nosotros ------------------------------------------------------------ */

[data-page="inicio"] .inicio__dos-columnas {
  display: grid;
  gap: var(--espacio-8);
}

/* Excepción a la regla de ancho completo: esta sección respira más que el
   resto. Sale del margen del <main> y aplica el suyo, que crece con el ancho
   de la pantalla. */
[data-page="inicio"] .inicio__seccion--con-margen {
  margin-inline: calc(var(--margen-lateral) * -1);
  padding-inline: var(--margen-seccion-amplio);
}

/* Servicios es una franja clara de borde a borde: --con-margen ya la saca
   del margen del <main> y le da el margen amplio por dentro; aquí solo el
   fondo Medium Seashell, el texto en azul de marca y el relleno vertical. */
[data-page="inicio"] .inicio__seccion--servicios {
  padding-block: var(--espacio-16);
  background-color: var(--color-fondo-claro);
  color: var(--color-primario);
}

[data-page="inicio"] .inicio__nosotros {
  display: grid;
  gap: var(--espacio-12);
}

/* Tres insignias: una sola fila en todos los anchos; con dos columnas, en
   celular la tercera quedaba sola. */
[data-page="inicio"] .inicio__nosotros .ud-insignias {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Mismo ancho que el párrafo de abajo (--ancho-texto). El patrón saca la
     fila --espacio-4 por cada lado para esconder el primer divisor y lo
     recupera con el relleno de cada insignia; por eso se suman aquí: así la
     fila empieza y termina donde el párrafo. */
  max-width: calc(var(--ancho-texto) + var(--espacio-4) * 2);
}

/* Nosotros respira más que el resto del home: más separación del hero y
   entre sus propios bloques. */
[data-page="inicio"] .inicio__seccion--nosotros {
  margin-top: var(--espacio-16);
}

[data-page="inicio"] .inicio__nosotros .inicio__texto {
  margin-top: var(--espacio-8);
}

[data-page="inicio"] .inicio__nosotros .inicio__acciones {
  margin-top: var(--espacio-8);
}

/* La medida parte el título en dos líneas parejas:
   "Cubriendo la industria" / "mexicana desde 1990". Sin ella, en monitores
   anchos la primera línea se lleva también "mexicana". */
[data-page="inicio"] .inicio__nosotros .inicio__titulo {
  max-width: 12em;
}

/* Botón de video: pastilla con miniatura redondeada. */
[data-page="inicio"] .inicio__video {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-8);
  padding: var(--espacio-2) var(--espacio-6) var(--espacio-2) var(--espacio-2);
  border: var(--borde) solid var(--color-linea-fuerte);
  border-radius: var(--radio-pildora);
  background-color: var(--color-superficie-1);
  color: var(--color-texto);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transicion);
}

[data-page="inicio"] .inicio__video:hover,
[data-page="inicio"] .inicio__video:focus-visible {
  background-color: var(--color-superficie-2);
}

[data-page="inicio"] .inicio__video-miniatura {
  position: relative;
  display: block;
  width: 4.5rem;
  height: 3rem;
  flex: none;
  border-radius: var(--radio-sm);
  background-color: color-mix(in srgb, var(--color-apoyo) 26%, var(--color-fondo));
}

/* Triángulo de play, dibujado con bordes. */
[data-page="inicio"] .inicio__video-miniatura::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  border-left: 0.65rem solid var(--color-texto);
  transform: translate(-40%, -50%);
}

[data-page="inicio"] .inicio__video-texto {
  display: flex;
  flex-direction: column;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: var(--peso-titulo);
}

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

/* Flecha larga horizontal, al estilo de la referencia. */
[data-page="inicio"] .inicio__flecha-larga {
  position: relative;
  display: block;
  width: 2.75rem;
  flex: none;
  border-top: var(--borde) solid currentColor;
}

[data-page="inicio"] .inicio__flecha-larga::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-top: var(--borde) solid currentColor;
  border-right: var(--borde) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* Sección clara: el patrón está en patrones.css; aquí solo el relleno que
   usa el home y el color del enlace con flecha. --------------------------- */

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

/* La tarjeta de SST se alinea con el margen amplio, igual que Nosotros:
   descuenta el margen del <main>, que ya la separa del borde. */
/* Más aire arriba y abajo que el resto de las secciones: queda entre dos
   franjas claras de borde a borde (Servicios y Proyectos). El margen de abajo
   se colapsa con el margen superior de Proyectos, así que no se suman. */
[data-page="inicio"] .inicio__seccion--sst {
  margin-block: var(--espacio-16);
  margin-inline: calc(var(--margen-seccion-amplio) - var(--margen-lateral));
}

/* Destino de /#proyectos (menú y footer). Al llegar desde otra página el
   salto es nativo: este margen deja la sección bajo el header, igual que el
   desplazamiento con Lenis de assets/js/scroll.js. */
[data-page="inicio"] #proyectos {
  scroll-margin-top: calc(var(--margen-lateral) + var(--altura-header) + var(--espacio-2));
}

/* Proyectos deja de ser tarjeta: franja de borde a borde (sale del margen del
   <main>), sin redondeo y con el margen amplio por dentro. Lleva las dos
   clases para ganarle al relleno de .ud-seccion-clara del home, también al
   de escritorio. */
[data-page="inicio"] .ud-seccion-clara.inicio__seccion--proyectos {
  margin-inline: calc(var(--margen-lateral) * -1);
  padding: var(--espacio-16) var(--margen-seccion-amplio);
  border-radius: 0;
}

/* Sobre fondo claro el párrafo va en azul de marca; el gris suave del home
   no se lee sobre Tender Light Blue. */
[data-page="inicio"] .ud-seccion-clara .inicio__texto {
  color: color-mix(in srgb, var(--color-primario) 78%, var(--color-apoyo));
}

[data-page="inicio"] .ud-seccion-clara .ud-enlace-flecha {
  margin-top: var(--espacio-8);
}

/* Los huecos de foto del home llevan borde y más relleno que el patrón. */
[data-page="inicio"] .ud-foto--clara {
  padding: var(--espacio-6);
  border: var(--borde) solid color-mix(in srgb, var(--color-primario) 22%, transparent);
}

[data-page="inicio"] .inicio__dos-columnas > .ud-foto {
  min-height: 14rem;
}

[data-page="inicio"] .inicio__maquinaria {
  margin-top: var(--espacio-8);
  padding: var(--espacio-6);
  border-radius: var(--radio-md);
  background-color: color-mix(in srgb, var(--color-blanco) 45%, var(--color-apoyo));
}

[data-page="inicio"] .inicio__maquinaria-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xs);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--espaciado-letra-amplio);
  text-transform: uppercase;
}

[data-page="inicio"] .inicio__maquinaria .inicio__lista {
  margin-top: var(--espacio-3);
  color: var(--color-primario);
}

/* Proyectos ----------------------------------------------------------- */

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

[data-page="inicio"] .ud-carrusel__flechas {
  margin-left: auto;
}

/* Carrusel: desplazamiento nativo con parada en cada tarjeta.
   La pista sale a los dos bordes de la franja (margen negativo igual al
   margen amplio) y recupera por dentro el mismo relleno, así las tarjetas se
   salen por los bordes en vez de cortarse contra el margen del contenido. El
   scroll-padding hace que cada parada caiga en el inicio del contenido, a
   plomo con el título, y el relleno derecho deja a la última tarjeta el mismo
   aire que tiene la primera. */
[data-page="inicio"] .inicio__proyectos {
  grid-auto-columns: calc((100% - var(--espacio-6)) / 1.25);
  gap: var(--espacio-6);
  margin-top: var(--espacio-8);
  margin-bottom: var(--espacio-8);
  margin-inline: calc(var(--margen-seccion-amplio) * -1);
  padding-inline: var(--margen-seccion-amplio);
  scroll-padding-left: var(--margen-seccion-amplio);
}

/* Blog en el home ------------------------------------------------------ */

/* Sale del margen del <main> para que la pista llegue a los dos bordes de la
   ventana; el encabezado y el botón recuperan el margen amplio por dentro.
   Relleno vertical propio para que la sección respire más que las demás. */
[data-page="inicio"] .inicio__blog {
  margin-inline: calc(var(--margen-lateral) * -1);
  padding-block: var(--espacio-16);
}

[data-page="inicio"] .inicio__blog-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding-inline: var(--margen-seccion-amplio);
}

/* Mismo respiro que la pista de Servicios, por la elevación de las notas. */
[data-page="inicio"] .inicio__notas {
  grid-auto-columns: calc((100% - var(--espacio-6)) / 1.25);
  gap: var(--espacio-6);
  margin-top: var(--espacio-4);
  margin-bottom: calc(var(--espacio-8) * -1);
  padding-block: var(--espacio-4) var(--espacio-8);
  padding-inline: var(--margen-seccion-amplio);
  scroll-padding-left: var(--margen-seccion-amplio);
}

[data-page="inicio"] .inicio__blog-entrada {
  max-width: var(--ancho-texto);
  margin-top: var(--espacio-4);
  color: var(--color-texto-suave);
}

/* Enlace y flechas en la misma fila; en celular bajan debajo del párrafo. */
[data-page="inicio"] .inicio__blog-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-6);
}

/* Enlace, no botón: la flecha se asoma un poco al pasar el cursor. */
@media (prefers-reduced-motion: no-preference) {
  [data-page="inicio"] .inicio__blog-todas .inicio__flecha-larga {
    transition: transform var(--transicion);
  }

  [data-page="inicio"] .inicio__blog-todas:hover .inicio__flecha-larga,
  [data-page="inicio"] .inicio__blog-todas:focus-visible .inicio__flecha-larga {
    transform: translateX(var(--espacio-1));
  }
}

/* Cierre -------------------------------------------------------------- */

/* Tarjeta alineada con el margen amplio, igual que SST: descuenta el margen
   del <main>. Más alta que el resto de las tarjetas del home. */
[data-page="inicio"] .inicio__cierre {
  position: relative;
  overflow: hidden;
  margin-inline: calc(var(--margen-seccion-amplio) - var(--margen-lateral));
  padding: calc(var(--espacio-16) + var(--espacio-8)) var(--espacio-6);
  border: var(--borde) solid var(--color-linea-fuerte);
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-2);
  text-align: center;
}

/* El recorte del contenedor hace que la foto respete el redondeo. */
[data-page="inicio"] .inicio__cierre-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 85%;
}

/* Velo parejo: aquí el texto va en el centro, no en una esquina, así que un
   degradado dejaría zonas flojas. */
[data-page="inicio"] .inicio__cierre::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-fondo) 86%, transparent);
}

/* Por encima del velo: el ::after pinta después de los hijos. */
[data-page="inicio"] .inicio__cierre > :not(.inicio__cierre-imagen) {
  position: relative;
  z-index: 1;
}

/* Título y texto con su propia medida, centrados; en celular manda el ancho
   de la tarjeta. */
/* La medida parte el título en dos líneas parejas en escritorio:
   "Hablemos de nuestro" / "próximo proyecto." */
[data-page="inicio"] .inicio__cierre .inicio__titulo {
  max-width: 12em;
  margin-inline: auto;
}

[data-page="inicio"] .inicio__cierre .inicio__texto {
  margin-inline: auto;
}

/* Botón y teléfono como un grupo centrado; en celular se apilan. */
[data-page="inicio"] .inicio__cierre .inicio__acciones {
  justify-content: center;
}

[data-page="inicio"] .inicio__telefono {
  display: inline-flex;
  min-height: var(--area-toque);
  align-items: center;
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  text-decoration: none;
}

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

/* Ramas: en celular, 3:4; desde 30rem (480 px), apaisadas en 4:3. Si no, entre
   ~600 y 1023 px, apiladas a todo el ancho, cada tarjeta medía ~1000 px de
   alto. */
@media (min-width: 30rem) {
  [data-page="inicio"] .inicio__rama {
    aspect-ratio: 4 / 3;
  }
}

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

@media (min-width: 48rem) {
  /* Desde tableta entra un margen amplio completo más por cada lado. */
  [data-page="inicio"] .inicio__clientes {
    margin-inline: calc(var(--margen-seccion-amplio) * 2 - var(--margen-lateral));
  }

  [data-page="inicio"] .inicio__hero-imagen,
  [data-page="inicio"] .inicio__hero-video {
    object-position: 50% 35%;
  }

}

@media (min-width: 64rem) {
  /* Escritorio: tres tarjetas completas y un asomo de la cuarta. */
  [data-page="inicio"] .inicio__servicios {
    grid-auto-columns: calc((100% - var(--espacio-4) * 3) / 3.35);
  }

  /* La fila del hero ocupa todo el alto de la tarjeta (dentro del relleno):
     el texto sigue apoyado abajo y la columna de cifras se estira de arriba
     abajo, repartida en cuatro filas iguales. En celular las cifras siguen
     debajo del texto, a su alto natural. */
  [data-page="inicio"] .inicio__seccion--sst {
    margin-block: var(--espacio-24);
  }

  /* Ramas en dos columnas, tarjetas apaisadas. La segunda (Mantenimiento)
     lleva su contenido abajo a la derecha. */
  [data-page="inicio"] .inicio__ramas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-page="inicio"] .inicio__rama:nth-child(2) {
    justify-content: flex-end;
    text-align: right;
  }

  [data-page="inicio"] .inicio__rama:nth-child(2) .inicio__rama-contenido {
    align-items: flex-end;
  }

  [data-page="inicio"] .inicio__hero {
    align-content: stretch;
    padding: var(--relleno-hero);
  }

  /* Con las cifras a la derecha, el texto vive en la esquina inferior
     izquierda: el oscurecimiento se concentra ahí y la zona de las cifras
     queda casi limpia. */
  [data-page="inicio"] .inicio__hero-foto::after {
    background-image: radial-gradient(
      110% 125% at 0% 100%,
      color-mix(in srgb, var(--color-fondo) 86%, transparent) 0%,
      color-mix(in srgb, var(--color-fondo) 86%, transparent) 50%,
      transparent 100%
    );
  }

  [data-page="inicio"] .inicio__hero-cifras {
    align-self: stretch;
    grid-auto-rows: 1fr;
  }

  /* Cada tarjeta crece, no su contenido: cifra y etiqueta van juntas al
     centro. */
  [data-page="inicio"] .inicio__hero-cifra {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  [data-page="inicio"] .inicio__nosotros {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-12);
  }

  [data-page="inicio"] .inicio__nosotros .ud-insignia {
    flex-direction: column;
    align-items: flex-start;
  }

  [data-page="inicio"] .inicio__dos-columnas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-12);
  }

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

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

  [data-page="inicio"] .inicio__cierre {
    padding-block: calc(var(--espacio-16) * 2);
  }

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

/* Ramas desde 80rem: la tarjeta ya es lo bastante ancha para oscurecer solo
   la esquina del texto y dejar limpio el resto de la foto. */
@media (min-width: 80rem) {
  [data-page="inicio"] .inicio__rama::after {
    background-image: radial-gradient(
      140% 110% at 0% 100%,
      color-mix(in srgb, var(--color-fondo) 84%, transparent) 0%,
      color-mix(in srgb, var(--color-fondo) 84%, transparent) 75%,
      transparent 100%
    );
  }

  [data-page="inicio"] .inicio__rama:nth-child(2)::after {
    background-image: radial-gradient(
      140% 110% at 100% 100%,
      color-mix(in srgb, var(--color-fondo) 84%, transparent) 0%,
      color-mix(in srgb, var(--color-fondo) 84%, transparent) 75%,
      transparent 100%
    );
  }
}

/* Pantalla amplia --------------------------------------------------------- */

/* Carruseles del blog y de servicios: cuatro tarjetas completas y el asomo
   de la quinta. Entra a partir de 84rem porque ahí la tarjeta ya no baja de
   ~221 px (blog) y ~230 px (servicios); más angosta, los títulos largos se
   parten en cinco o seis líneas o, en servicios, "policarbonato" no cabe y se
   parte a media palabra. */
@media (min-width: 84rem) {
  [data-page="inicio"] .inicio__notas {
    grid-auto-columns: calc((100% - var(--espacio-6) * 4) / 4.35);
  }

  [data-page="inicio"] .inicio__servicios {
    grid-auto-columns: calc((100% - var(--espacio-4) * 4) / 4.35);
  }
}