/* ==========================================================================
   PÁGINA — Inicio
   La portada ocupa el viewport completo; a partir de ahí el documento
   alterna gris oscuro (mirar) y gris claro (leer).
   La tira de clientes hace de zócalo de la portada.
   ========================================================================== */

/* ================================================================= PORTADA */

.portada {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;           /* nunca 100vh: evita el salto en iOS */
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: calc(var(--barra-h) + var(--e-7)) var(--e-6);
  background-color: var(--gris-950);
  color: #EDEDED;
  overflow: hidden;
}

@supports not (min-height: 100dvh) {
  .portada { min-height: 100vh; }
}

.portada__medio {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.portada__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
}

/* Velo: oscurece el pie de la imagen para que el titular y la cota
   mantengan su ratio de contraste sobre cualquier zona de la foto. */
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgb(8 8 8 / 0.95) 0%,
      rgb(8 8 8 / 0.86) 22%,
      rgb(8 8 8 / 0.60) 52%,
      rgb(10 10 10 / 0.42) 78%,
      rgb(10 10 10 / 0.52) 100%
    ),
    linear-gradient(105deg, rgb(8 8 8 / 0.70) 0%, rgb(8 8 8 / 0.12) 62%);
}

.portada__cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e-6);
  padding-bottom: var(--e-7);
}

.portada__titulo {
  max-width: 15ch;
  color: #FFFFFF;
  text-shadow: 0 2px 28px rgb(8 8 8 / 0.55);
}

/* El acento del titular: una sola palabra, en óxido claro para mantener
   7.7:1 sobre el velo. */
.portada__titulo em {
  font-style: normal;
  color: var(--naranja-400);
}

.portada__bajada {
  max-width: 50ch;
  font-size: var(--t-guia);
  line-height: 1.5;
  color: #DCDCDC;
  text-shadow: 0 1px 16px rgb(8 8 8 / 0.6);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-5);
  margin-top: var(--e-2);
}

.portada__cota { color: #FFFFFF; }
.portada__cota .cota { color: #C4C4C4; }
.portada__cota .cota-linea__trazo { color: rgb(255 255 255 / 0.28); }

@media (min-width: 900px) {
  .portada__cuerpo { padding-bottom: var(--e-9); }
}

/* En vertical la foto se encuadra en la zona con más estructura visible,
   y el titular pierde la extensión para que ninguna línea se parta. */
@media (max-width: 700px) {
  .portada__medio img { object-position: 46% 26%; }
  .portada__titulo { font-stretch: 100%; max-width: none; }
  .portada__velo {
    background:
      linear-gradient(to top,
        rgb(8 8 8 / 0.95) 0%, rgb(8 8 8 / 0.90) 30%,
        rgb(8 8 8 / 0.62) 62%, rgb(10 10 10 / 0.55) 100%);
  }
}

/* ========================================================== POSICIONAMIENTO */

.posicion { background: var(--gris-50); }

.posicion__enunciado {
  font-family: var(--fuente-display);
  font-size: clamp(1.1875rem, 1.07rem + 0.56vw, 1.625rem);
  font-weight: 520;
  line-height: 1.34;
  letter-spacing: -0.014em;
  color: var(--gris-900);
  max-width: 24ch;
  text-wrap: balance;
}
.posicion__enunciado em { font-style: normal; color: var(--naranja-700); }

.posicion__texto > p + p { margin-top: var(--e-4); }
.posicion__texto p { color: var(--gris-500); }
.posicion__texto p:first-child { color: var(--gris-900); font-size: var(--t-guia); line-height: 1.55; }

.posicion__datos { margin-top: var(--e-8); }

/* ============================================================== CAPACIDADES */

.capacidades { background: var(--gris-50); padding-top: 0; }

/* Índice de familias: nombre, alcance en una línea y cuántos servicios
   tiene cada una. El detalle completo es la razón de existir de la página
   de Servicios, así que aquí no se repite. */

.familia-indice { border-top: 1px solid var(--borde); }

.familia-indice__enlace {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'icono nombre flecha'
    'icono nota   flecha';
  align-items: center;
  column-gap: clamp(var(--e-4), 2.4vw, var(--e-6));
  row-gap: var(--e-1);
  padding-block: clamp(var(--e-4), 2.2vw, var(--e-6));
  border-bottom: 1px solid var(--borde);
  transition: background-color var(--d-rapido) var(--ease-out);
}

.familia-indice__icono {
  grid-area: icono;
  color: var(--naranja-600);
  /* A 34 px el trazo de 1.3 se adelgaza demasiado dentro de una fila;
     a 28 px con trazo 1.5 el icono recupera presencia. */
  width: 28px; height: 28px; stroke-width: 1.5;
}
.familia-indice__flecha { grid-area: flecha; display: flex; color: var(--naranja-700); }
.familia-indice__flecha svg { transition: transform var(--d-medio) var(--ease-out); }

.familia-indice__nombre {
  grid-area: nombre;
  font-family: var(--fuente-display);
  font-size: var(--t-h4);
  font-weight: 700;
  font-stretch: 102%;
  letter-spacing: var(--track-titulo);
  text-transform: uppercase;
  color: var(--gris-900);
  line-height: 1.2;
  transition: color var(--d-rapido) var(--ease-out);
}

.familia-indice__nota {
  grid-area: nota;
  font-size: var(--t-pie);
  line-height: 1.5;
  color: var(--gris-500);
  max-width: 54ch;
}

/* La cuenta pasa a su propia columna en cuanto hay ancho para ella. */
.familia-indice__cuenta { display: none; }

@media (min-width: 860px) {
  .familia-indice__enlace {
    grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr) auto auto;
    grid-template-areas: 'icono nombre nota cuenta flecha';
    row-gap: 0;
  }
  .familia-indice__cuenta { grid-area: cuenta; display: block; white-space: nowrap; color: var(--naranja-700); }
}

@media (hover: hover) and (pointer: fine) {
  .familia-indice__enlace:hover .familia-indice__nombre { color: var(--naranja-700); }
  .familia-indice__enlace:hover .familia-indice__flecha svg { transform: translate3d(5px, 0, 0); }
}

.familia-indice__enlace:active { transform: scale(0.995); }

.capacidades__pie { margin-top: clamp(var(--e-6), 3vw, var(--e-8)); }

/* ================================================================== TRABAJO */

.trabajo {
  background: var(--gris-900);
  color: #EDEDED;
}

/* Retícula asimétrica: una pieza manda y dos la acompañan. Nunca tres
   tarjetas del mismo tamaño en fila. */
.trabajo__rejilla {
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 820px) {
  .trabajo__rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(var(--e-5), 2.4vw, var(--e-7));
  }
  .trabajo__rejilla > :nth-child(1) { grid-column: 1 / span 7; }
  .trabajo__rejilla > :nth-child(2) { grid-column: 8 / span 5; align-self: end; }
  .trabajo__rejilla > :nth-child(3) { grid-column: 4 / span 6; }
}

.trabajo__rejilla > :nth-child(1) .obra__marco img { aspect-ratio: 16 / 10; }

.trabajo__cierre {
  margin-top: var(--e-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  align-items: center;
  justify-content: space-between;
}

/* =================================================================== CIERRE */

.cierre {
  position: relative;
  isolation: isolate;
  background: var(--gris-950);
  color: #EDEDED;
  overflow: hidden;
}

.cierre__medio { position: absolute; inset: 0; z-index: -2; }
.cierre__medio img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

.cierre__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(8 8 8 / 0.90) 8%, rgb(8 8 8 / 0.56) 52%, rgb(8 8 8 / 0.80) 100%);
}

/* El bloque de llamada ocupa la izquierda y los datos de contacto el
   costado derecho: la mitad vacía se llena con información, no con aire. */
.cierre__parrilla {
  display: grid;
  gap: var(--e-8);
  align-items: end;
}
@media (min-width: 880px) {
  .cierre__parrilla { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--e-9); }
}

.cierre__titulo { color: #FFFFFF; }
@media (min-width: 880px) { .cierre__titulo { max-width: 15ch; } }
.cierre__titulo em { font-style: normal; color: var(--naranja-400); }
.cierre__bajada { color: #CFCFCF; margin-top: var(--e-5); max-width: 46ch; }
.cierre__cuerpo .boton { margin-top: var(--e-7); }

.cierre__contacto {
  display: grid;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

.cierre__tel {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-family: var(--fuente-cota);
  font-size: var(--t-pie);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #EDEDED;
  width: fit-content;
  transition: color var(--d-rapido) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cierre__tel:hover { color: var(--naranja-400); }
}

.cierre__direccion {
  font-size: var(--t-pie);
  line-height: 1.55;
  color: #ADADAD;
  margin-top: var(--e-2);
}