/* Portada */
.portada { padding: clamp(2.5rem, 6vw, 5rem) 0 0; }
.portada-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: end;
}
.portada-texto { padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.portada h1 { max-width: 12ch; }
.portada .entrada { margin-top: 1.6rem; max-width: 46ch; }
.acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.portada-foto { position: relative; align-self: stretch; min-height: 420px; margin: 0; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; }
.portada-foto figcaption {
  position: absolute; left: 0; bottom: 0; background: var(--fondo); color: var(--texto-suave);
  font-size: .85rem; padding: .55rem .9rem .55rem 0;
}

/* Banda amarilla: la baranda de seguridad que aparece en cada planta */
.banda { background: var(--banda-fondo); color: var(--banda-texto); }
.banda ul {
  list-style: none; margin: 0 auto; padding: 0 var(--margen);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.banda li { padding: 1.6rem 1.5rem 1.7rem 0; border-right: 2px solid rgba(0,0,0,.85); padding-left: 1.5rem; }
.banda li:first-child { padding-left: 0; }
.banda li:last-child { border-right: 0; }
.banda strong { display: block; font-stretch: 70%; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; }
.banda span { display: block; margin-top: .4rem; font-size: .95rem; line-height: 1.35; font-weight: 500; }

/* Secciones */
.seccion { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.seccion-alt { background: var(--fondo-alt); }
.encabezado-seccion { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.encabezado-seccion p { color: var(--texto-suave); }

/* Cómo trabajamos — es una secuencia real, por eso va numerada */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: paso; border-top: 2px solid var(--texto); }
.pasos li { counter-increment: paso; padding: 1.5rem 1.5rem 0 0; }
.pasos li::before {
  content: counter(paso); display: block; font-stretch: 70%; font-weight: 800; font-size: 3.2rem; line-height: 1;
  color: var(--amarillo-oscuro); margin-bottom: 1rem;
}
.pasos h3 { margin-bottom: .6rem; }
.pasos p { color: var(--texto-suave); font-size: 1rem; }

/* Índice de servicios */
.servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; border-top: 1px solid var(--linea); }
.servicio {
  display: grid; grid-template-columns: 132px 1fr; gap: 1.4rem; align-items: start;
  padding: 1.6rem 0; border-bottom: 1px solid var(--linea); text-decoration: none;
}
.servicio .miniatura { width: 132px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fondo); }
.servicio .miniatura.producto { object-fit: contain; background: #fff; }
.servicio .sin-foto { display: grid; place-items: center; }
.servicio .sin-foto img { width: 44px; height: 44px; opacity: .35; }
.servicio h3 { font-size: 1.4rem; }
.servicio p { margin-top: .4rem; color: var(--texto-suave); font-size: .98rem; line-height: 1.5; }
.servicio .ver { display: inline-block; margin-top: .7rem; font-weight: 600; font-size: .95rem; border-bottom: 2px solid var(--amarillo); }
.servicio:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Trabajo destacado */
.destacado { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 1rem; }
.destacado img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.destacado-texto { background: var(--pie-fondo); color: var(--pie-texto); padding: 2.2rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.destacado-texto h3 { color: #fff; }
.destacado-texto ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.destacado-texto li::marker { color: var(--amarillo); }
.destacado-texto a { color: var(--amarillo); font-weight: 600; text-decoration: none; margin-top: auto; }

/* Muestra de galería */
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: .75rem; }
.mosaico figure { margin: 0; position: relative; overflow: hidden; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico .alto { grid-row: span 2; }
.mosaico .ancho { grid-column: span 2; }
.mosaico figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; color: #fff;
  padding: 2.4rem .9rem .8rem;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,0) 100%);
  font-size: .9rem; line-height: 1.3;
}
.mosaico figcaption strong { display: block; font-weight: 600; }
.mosaico figcaption .cliente { display: block; margin-top: .3rem; font-size: .82rem; color: var(--amarillo); font-weight: 600; }
.ver-mas { margin-top: 2rem; }

/* Llamado final */
.llamado { background: var(--amarillo); color: #000; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.llamado .contenedor { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: end; }
.llamado p { margin-top: 1rem; font-size: 1.15rem; }
.llamado .btn { border-color: #000; color: #000; }
.llamado .btn:hover { background: #000; color: var(--amarillo); }
.llamado .btn-negro { background: #000; color: #fff; }
.llamado .btn-negro:hover { background: #222; color: #fff; }
.llamado .acciones { margin-top: 0; justify-content: flex-end; }

@media (max-width: 980px) {
  .portada-grid { grid-template-columns: 1fr; }
  .portada-texto { padding-bottom: 0; }
  .portada-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .banda ul { grid-template-columns: 1fr 1fr; }
  .banda li { padding-left: 0 !important; border-right: 0; border-bottom: 2px solid rgba(0,0,0,.85); }
  .banda li:nth-child(odd) { padding-right: 1rem; }
  .banda li:nth-last-child(-n+2) { border-bottom: 0; }
  .encabezado-seccion { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .servicios { grid-template-columns: 1fr; }
  .destacado { grid-template-columns: 1fr 1fr; }
  .destacado-texto { grid-column: span 2; }
  .destacado img { min-height: 280px; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 230px; }
  .llamado .contenedor { grid-template-columns: 1fr; }
  .llamado .acciones { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .pasos { grid-template-columns: 1fr; }
  .servicio { grid-template-columns: 96px 1fr; gap: 1rem; }
  .servicio .miniatura { width: 96px; }
  .destacado { grid-template-columns: 1fr; }
  .destacado-texto { grid-column: auto; }
  .mosaico { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .mosaico .ancho, .mosaico .alto { grid-column: auto; grid-row: auto; }
}