/* =========================================================
   DEPEDRO — MONTAJES DEPEDRO
   Paleta estricta: negro / blanco / gris hormigón.
   ========================================================= */

/* ---------- Fuentes: Grift (woff2 + ttf fallback) ---------- */
@font-face {
  font-family: "Grift";
  src: url("../assets/fonts/grift-regular.woff2") format("woff2"),
       url("../assets/fonts/grift-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../assets/fonts/grift-semibold.woff2") format("woff2"),
       url("../assets/fonts/grift-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../assets/fonts/grift-bold.woff2") format("woff2"),
       url("../assets/fonts/grift-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../assets/fonts/grift-black.woff2") format("woff2"),
       url("../assets/fonts/grift-black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base / variables ---------- */
:root {
  --black: #000000;
  --white: #ffffff;
  --concrete: #bfc0c1;
  --ink-soft: rgba(0, 0, 0, 0.6);   /* negro con transparencia, para texto secundario sobre blanco */
  --paper-soft: rgba(255, 255, 255, 0.7); /* blanco con transparencia, para texto secundario sobre negro */
  --line-soft: rgba(0, 0, 0, 0.12); /* negro con transparencia, para separadores sobre blanco */

  --gap: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 9vw, 8rem);
  --radius: 0; /* border-radius mínimo, tal y como pide la marca */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* , *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 79px;
}

/* Mientras dura un salto por enlace interno, se desactivan todos los
   position:sticky: así no puede quedar ninguno "pegado" a medias por el
   salto, y al llegar se restauran y se recalculan de cero (ver main.js) */
body.is-jumping .hero,
body.is-jumping .servicios,
body.is-jumping .cta-final {
  position: static !important;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--black);
  font-family: "Grift", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

.eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

/* Foco de teclado visible en toda la web */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--dark {
  background: var(--black);
  color: var(--white);
}
.btn--dark:hover { filter: brightness(1.4); }
.btn--light {
  background: var(--white);
  color: var(--black);
}
.btn--light:hover { background: var(--concrete); }
.btn--outline {
  background: transparent;
  border-color: var(--black);
  color: var(--black);
}
.btn--outline:hover { background: var(--black); color: var(--white); }
/* Variante para usar sobre fondos oscuros (p.ej. el banner de cookies) */
.btn--outline-light {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn--outline-light:hover { background: var(--white); color: var(--black); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #0a0a0a;
  border-bottom: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
/* Al pasar el Hero recupera el fondo blanco de siempre (ver
   updateNavVisibility en main.js) */
.nav.nav--solid {
  background: var(--white);
  border-bottom-color: var(--line-soft);
}
.nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.9rem var(--gap);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
/* Siempre visible, como los enlaces, el CTA y la hamburguesa: arriba a la
   izquierda tanto en escritorio como en móvil (orden natural en los dos;
   ver @media max-width:860px, más abajo, donde la hamburguesa es la que
   se manda al margen derecho) */
.nav__logo {
  flex-shrink: 0;
  line-height: 0;
}
.nav__logo img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter .2s var(--ease);
}
.nav.nav--solid .nav__logo img { filter: none; }

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  margin-left: auto;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav__links a {
  padding: 0.25rem 0;
  position: relative;
  color: var(--white);
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--white);
  transition: right .25s var(--ease), background-color .2s var(--ease);
}
.nav__links a:hover::after { right: 0; }
.nav.nav--solid .nav__links a { color: var(--black); }
.nav.nav--solid .nav__links a::after { background: var(--black); }

/* ---------- "Servicios": enlace normal (va a la sección de la home) +
   botón-flecha aparte para el desplegable ---------- */
/* .nav__links no fija align-items (stretch por defecto), así que este
   wrapper —igual que cada <a> hermano— ya se estira solo a la altura de
   la fila; con align-items:center aquí dentro, el texto y la flecha
   quedan centrados igual que los demás enlaces, sin tocar nada de fuera */
.nav__item--dropdown { position: relative; display: flex; align-items: center; gap: 0.3rem; }
.nav__dropdown-trigger {
  padding: 0.25rem 0;
  position: relative;
  color: var(--white);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.nav__dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--white);
  transition: right .25s var(--ease), background-color .2s var(--ease);
}
.nav__dropdown-trigger:hover::after,
.nav__item--dropdown.is-open .nav__dropdown-trigger::after { right: 0; }
.nav.nav--solid .nav__dropdown-trigger { color: var(--black); }
.nav.nav--solid .nav__dropdown-trigger::after { background: var(--black); }

/* Botón-flecha: hit-area propia (el margin negativo compensa el padding
   para que no empuje el resto del nav__inner), solo abre/cierra el panel,
   nunca navega */
.nav__dropdown-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  margin: -0.35rem 0 -0.35rem -0.35rem;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
}
.nav.nav--solid .nav__dropdown-arrow-btn { color: var(--black); }
.nav__dropdown-arrow { flex-shrink: 0; display: block; transition: transform .2s var(--ease); }
.nav__item--dropdown.is-open .nav__dropdown-arrow { transform: rotate(180deg); }

/* Panel: fondo blanco, sin sombra, borde inferior de 1px (ver spec). El
   pequeño margin-top dejar aire entre el enlace y el panel no es lo que
   evita que se cierre al cruzarlo: eso lo da el retraso al cerrar en
   JS (ver nav-servicios en main.js), que es la "tolerancia" real */
.nav__dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  min-width: 260px;
  background: var(--white);
  border-bottom: 1px solid var(--concrete);
  box-shadow: none;
  padding: 6px 0;
  z-index: 150;
}
.nav__dropdown-panel[hidden] { display: none; }
.nav__dropdown-panel a {
  display: block;
  position: relative;
  padding: 10px 20px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  transition: color .15s var(--ease);
}
.nav__dropdown-panel a:last-child { border-bottom: none; }
/* Mismo subrayado deslizante que "Inicio", "Servicios", etc. (ver
   .nav__links a::after), con el mismo left/right que el padding lateral
   del enlace para que la línea quede justo bajo el texto */
.nav__dropdown-panel a::after {
  content: "";
  position: absolute;
  left: 20px; right: 100%;
  bottom: 6px;
  height: 2px;
  background: var(--black);
  transition: right .25s var(--ease);
}
.nav__dropdown-panel a:hover,
.nav__dropdown-panel a:focus-visible { color: var(--black); }
.nav__dropdown-panel a:hover::after,
.nav__dropdown-panel a:focus-visible::after { right: 20px; }
/* Página de servicio en la que estamos ahora mismo, marcada por JS
   (ver "is-current" en main.js): en negro fijo, no solo al pasar el
   ratón por encima */
.nav__dropdown-panel a.is-current { color: var(--black); }

.nav__cta { flex-shrink: 0; }
.nav__links-cta { display: none; }
/* Botón "Pedir presupuesto": invertido (blanco) mientras el nav es negro,
   para que no se pierda sobre ese fondo */
.nav:not(.nav--solid) .nav__cta.btn--dark {
  background: var(--white);
  color: var(--black);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.5rem;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  width: 100%;
  transition: transform .25s var(--ease), opacity .25s var(--ease), background-color .2s var(--ease);
}
.nav.nav--solid .nav__toggle span { background: var(--black); }

/* Al pinchar, las líneas se juntan un instante (sin girar) y vuelven solas
   a su posición original; no se quedan juntas mientras el menú está abierto */
@keyframes navToggleSqueeze1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
@keyframes navToggleSqueeze3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.nav__toggle.is-tapped span:nth-child(1) { animation: navToggleSqueeze1 .5s var(--ease); }
.nav__toggle.is-tapped span:nth-child(3) { animation: navToggleSqueeze3 .5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .nav__toggle.is-tapped span { animation: none; }
}

@media (max-width: 860px) {
  /* Logo justificado a la izquierda (orden natural del DOM) y
     hamburguesa justificada a la derecha */
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed;
    inset: 65px 0 auto 0;
    background: var(--white);
    border-bottom: 1px solid var(--concrete);
    flex-direction: column;
    gap: 0;
    margin-right: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
    /* Con el desplegable de Servicios abierto, la lista puede pasar de
       sobra del alto de la pantalla (8 servicios más que antes): sin
       esto se saldría por debajo sin forma de llegar a "Contenedores"
       ni a "Contacto" */
    max-height: calc(100svh - 65px);
    overflow-y: auto;
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s 0s;
  }
  /* El desplegable siempre tiene fondo blanco (ver .nav__links de arriba),
     pero el texto de los enlaces por defecto es blanco (pensado para el
     nav transparente de escritorio, ver .nav__links a). Sin este color
     fijo, en cualquier página con el nav "no sólido" (todas las de
     servicio, contenedores, o la home antes de hacer scroll) los
     nombres quedan en blanco sobre blanco, invisibles */
  .nav__links a { padding: 1rem var(--gap); border-bottom: 1px solid var(--concrete); color: var(--black); }
  .nav__links a::after { display: none; }
  .nav__links a:last-child { border-bottom: none; }
  .nav__links-cta {
    display: block;
    width: calc(100% - var(--gap) * 2);
    margin: 1rem var(--gap);
  }

  /* "Servicios" en móvil: tanto el nombre como la flecha despliegan la
     lista en vertical justo debajo (el nombre ya NO navega en móvil, ver
     main.js), dentro del propio desplegable de la hamburguesa.
     flex-wrap:wrap hace que el panel (flex-basis:100%) caiga a su propia
     línea bajo la fila nombre+flecha.
     La línea bajo "Servicios" la ponen el nombre Y la flecha juntos (cada
     uno con su propio border-bottom, uno a continuación del otro): así
     llega de punta a punta como en el resto de filas, en vez de cortarse
     donde empieza el botón de la flecha. El wrapper no lleva borde propio
     para no duplicarla. */
  .nav__item--dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .nav__dropdown-trigger {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 1rem var(--gap);
    color: var(--black);
  }
  .nav__dropdown-trigger::after { display: none; }
  .nav__dropdown-arrow-btn {
    flex: 0 0 auto;
    padding: 1rem var(--gap);
    margin: 0;
    border-bottom: 1px solid var(--concrete);
    color: var(--black);
  }
  .nav__dropdown-panel {
    flex: 0 0 100%;
    position: static;
    margin-top: 0;
    min-width: 0;
    padding: 0;
    border-bottom: none;
    /* Mismo blanco que el resto del menú: la distinción con "Servicios"
       la da solo el texto más claro de cada enlace, no el fondo */
    background: var(--white);
  }
  .nav__dropdown-panel a {
    padding: 0.85rem var(--gap) 0.85rem calc(var(--gap) + 14px);
    color: rgba(0, 0, 0, 0.45); /* más claro que var(--ink-soft), para que
      se note la distinción con el resto de enlaces del menú */
    font-size: 0.95rem;
    white-space: normal;
    border-bottom: 1px solid var(--concrete);
  }
  .nav__dropdown-panel a::after { display: none; } /* el subrayado es un efecto de hover: no aplica al tacto */
  /* El último SÍ lleva línea (a diferencia del desplegable de escritorio):
     en móvil hace de cierre del bloque "Servicios" frente a "Contenedores",
     ahora que el wrapper ya no pone la suya (ver más arriba) */
  .nav__dropdown-panel a:last-child { border-bottom: 1px solid var(--concrete); }
  /* Igual que en escritorio: la página de servicio actual, en negro
     fijo (aquí el resto de enlaces son más claros que en escritorio,
     rgba(0,0,0,.45), así que el contraste se nota todavía más) */
  .nav__dropdown-panel a.is-current { color: var(--black); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  /* sticky puro, sin altura forzada por fuera de min-height: igual que
     .section_home-hero en la referencia (solido.build) */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
}

.content-curtain {
  /* al tener z-index propio, todo lo que hay dentro sube por encima del
     Hero (sticky) de forma natural mientras se hace scroll */
  position: relative;
  z-index: 1;
}

/* Foto a sangre de fondo */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

/* Mensaje superpuesto arriba a la izquierda, sobre la foto */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 950px;
  padding: 168px var(--gap) 0;
}
.hero__claim {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--white);
}
.hero__desc {
  margin: 1.5rem 0 0;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.5;
}
.hero__cta {
  display: inline-block;
  margin-top: 2.25rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--white);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.hero__cta:hover { background: var(--white); color: var(--black); }

@media (max-width: 759px) {
  .hero__content { padding: 160px var(--gap) 0; max-width: none; }
  .hero__claim { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .hero__desc { margin-top: 1.25rem; max-width: none; }
  .hero__cta { margin-top: 1.75rem; }
}



/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */
.somos {
  border-top: 1px solid var(--concrete);
  padding: var(--section-pad) var(--gap);
  background: var(--white);
  color: var(--black);
}

.somos__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.somos__text h2 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  margin-bottom: 1.25rem;
}
.somos__text p { color: var(--ink-soft); font-size: 1.05rem; max-width: 46ch; }

.somos__collage {
  display: grid;
  aspect-ratio: 6 / 7;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "a a a b b b"
    "a a a b b b"
    "c c c b b b"
    "c c c e e e"
    "c c c e e e";
  gap: 0.6rem;
}
.collage__item { width: 100%; height: 100%; object-fit: cover; }
.collage__item--a { grid-area: a; }
.collage__item--b { grid-area: b; }
.collage__item--c { grid-area: c; }
.collage__item--e { grid-area: e; }

@media (min-width: 860px) {
  .somos__inner { grid-template-columns: 0.85fr 1.15fr; }
}

/* =========================================================
   PROYECTOS DESTACADOS
   ========================================================= */
.proyectos {
  /* menos aire arriba que otras secciones: así el enlace del menú a
     "Proyectos" deja ver también las flechas del carrusel sin recortarlas */
  padding: calc(var(--section-pad) * 0.6) 0 calc(var(--section-pad) * 0.35);
  background: var(--black);
  color: var(--white);
}
.proyectos__head {
  padding: 0 var(--gap);
  max-width: 1400px;
  margin: 0 auto 1.5rem;
}
.proyectos__head h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
.proyectos__head .eyebrow { color: var(--concrete); }

.slider { position: relative; padding-bottom: 3.5rem; }
.slider__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gap) 1.5rem;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 clamp(260px, 75vw, 380px);
  scroll-snap-align: start;
  background: var(--black);
  color: var(--white);
  transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-6px); }
.card__trigger {
  display: block;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card__info { padding: 1rem 0.25rem; }
.card__info h3 { font-size: 1.1rem; font-weight: 700; }
.card__info p { color: var(--paper-soft); font-size: 0.9rem; margin-top: 0.25rem; }

.slider__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0.75rem;
  padding: 0 var(--gap);
  max-width: 1400px;
  margin: 0 auto;
}
.slider__btn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--white);
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.slider__btn:hover { background: var(--white); color: var(--black); }

/* =========================================================
   CONTENEDORES Y MÓDULOS (BANDA EN LA HOME)
   ========================================================= */
/* Sección a pantalla completa (100svh), fondo oscuro: imagen recortada
   del contenedor (fondo transparente) centrada en su mitad izquierda,
   sin llegar a los bordes, y panel de texto centrado en la derecha.
   Sin línea divisoria entre las dos mitades.
   Sticky puro (mismo patrón que .hero): se queda fija ocupando la
   pantalla mientras el CTA final (position: relative, z-index
   superior) sube por encima y la tapa. */
.contenedores-banda {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  background: #0a0a0a;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .contenedores-banda { position: relative; }
}

/* ---------- Izquierda: imagen recortada, contenida (no a sangre) ---------- */
/* 60/40 en vez de 50/50: la foto del contenedor es bastante apaisada
   (730x552) y con un padding generoso una columna al 50% se queda
   corta en ancho para alcanzar el 65-70% de alto pedido sin recortar
   ni deformar nada — con 60% sí llega, manteniendo la proporción real
   de la imagen (object-fit: contain no la deforma en ningún caso). */
.contenedores-banda__media {
  flex: 0 0 60%;
  max-width: 60%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.contenedores-banda__media img {
  width: auto;
  height: 68svh; /* ~65-70% de la altura de la sección, sin tocar bordes */
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Ajuste de color ligero y uniforme para toda la serie de fotos de
   contenedores/módulos, tomadas en días distintos con luz distinta.
   Clase compartida: también la usa /contenedores-y-modulos */
.foto-serie { filter: saturate(0.92) contrast(1.05); }

/* ---------- Derecha: texto, centrado verticalmente ---------- */
.contenedores-banda__panel {
  flex: 0 0 40%;
  max-width: 40%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  /* Padding amplio: junto al de .media, deja bastante aire entre la
     imagen y el texto en vez de que se toquen en el centro */
  padding: clamp(2rem, 5vw, 3.5rem);
}
.contenedores-banda__panel .eyebrow { color: var(--concrete); }
.contenedores-banda__panel h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 0.75rem 0 1rem;
  color: var(--white);
}
.contenedores-banda__panel p {
  max-width: 460px;
  color: var(--paper-soft);
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

@media (max-width: 759px) {
  .contenedores-banda {
    height: auto;
    min-height: 0;
    flex-direction: column;
    padding: clamp(2rem, 8vw, 3rem) 0;
  }
  .contenedores-banda__media,
  .contenedores-banda__panel { flex: 1 1 auto; max-width: none; }
  /* En móvil la imagen va primero, antes del texto "Nuevo servicio"
     (pedido explícito) — en escritorio no cambia nada, el HTML sigue
     con el texto primero y la imagen segunda */
  .contenedores-banda__media { order: -1; padding: 0 var(--gap) 1.5rem; }
  .contenedores-banda__media img { height: 38vh; }
  .contenedores-banda__panel { padding: 0 24px; }
}

/* =========================================================
   PÁGINA: CONTENEDORES Y MÓDULOS
   ========================================================= */
.contenedores-page {
  /* Sistema de dos anchos, sin términos intermedios: .contenido (texto,
     1200px centrado) y sangre (bloques con imagen o vídeo, 100% de la
     ventana). .contenedores-page en sí no lleva max-width ni padding
     propios: así cualquier hijo directo ya ocupa el 100% de la ventana
     sin necesidad de ningún truco de "bleed" */
  --ancho-contenido: 1200px;
  --margen-lateral: 24px;
  --seccion-gap: 88px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;
}
@media (max-width: 759px) {
  .contenedores-page { --seccion-gap: 48px; }
}

/* Envuelve cualquier bloque de texto al ancho de contenido estándar */
.contenido {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
  box-sizing: border-box;
}

/* Reveal más corto y rápido que el de la home (300ms, poco desplazamiento).
   El estado .is-visible tiene que repetirse aquí: como esta regla y la
   global ".reveal.is-visible" tienen la misma especificidad, sin esto
   ganaba siempre la de más abajo en la hoja (esta) y el elemento se
   quedaba desplazado 14px para siempre, incluso ya "revelado" */
.contenedores-page .reveal {
  transition-duration: .3s;
  transform: translateY(14px);
}
.contenedores-page .reveal.is-visible {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .contenedores-page .reveal {
    transform: none;
    transition: none;
  }
}

/* ---------- Hero: dos mitades a sangre, texto + vídeo ---------- */
.contenedores-intro {
  display: flex;
  height: 100svh;
}
.contenedores-intro__text {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 88px 64px 64px;
  /* Mismo gris sutil que #casetas-de-obra: diferencia la introducción
     ("Venta de contenedores y módulos") del resto de secciones, que
     siguen en blanco (pedido explícito) */
  background: #f7f7f5;
}
.contenedores-intro__text-inner { max-width: 520px; }
.contenedores-intro__eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contenedores-intro__text-inner h1 {
  font-size: clamp(2rem, 3.6vw, 3.5rem); /* 32px–56px */
  font-weight: 600; /* peso medio */
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 1.5rem;
}
.contenedores-intro__text-inner p {
  color: var(--ink-soft);
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem); /* 15px–18px */
  line-height: 1.55;
  margin: 0 0 1rem;
}
.contenedores-intro__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
.contenedores-intro__phone {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contenedores-intro__cta {
  font-weight: 600;
  color: var(--black);
  transition: opacity .2s var(--ease);
}
.contenedores-intro__cta:hover { opacity: 0.6; }

.contenedores-intro__media { flex: 0 0 50%; max-width: 50%; height: 100svh; }
.contenedores-intro__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Más abajo que el centro: el vídeo es vertical y tiene mucho cielo
     arriba, así se recorta más cielo y se ve mejor la parte de abajo
     (el equipo maniobrando el contenedor) */
  object-position: center 80%;
}

@media (max-width: 899px) {
  .contenedores-intro {
    flex-direction: column;
    height: auto;
    /* El nav sigue fixed y con fondo opaco en esta página (navStaysDark,
       ver main.js): sin este hueco tapaba parte del vídeo. El valor se
       queda 3px por debajo del alto real del nav (79px medidos, ver los
       dos tramos de abajo) a propósito: un pelín de solape en vez de
       encaje milimétrico, para que ninguna diferencia de redondeo entre
       navegadores deje ver una raya blanca entre el nav y el vídeo */
    padding-top: 76px;
  }
  .contenedores-intro__media {
    order: -1; /* el vídeo va primero en móvil, aunque en el HTML el texto esté antes */
    /* Con la entradilla completa (dos párrafos) más el teléfono, un
       vídeo a 50svh no deja sitio para que el teléfono se vea sin
       hacer scroll (prioridad explícita del encargo); se sube a 38svh,
       que da más presencia al vídeo sin comerse el teléfono */
    flex: 0 0 38svh;
    max-width: none;
    height: 38svh;
  }
  .contenedores-intro__video {
    /* Con el vídeo más alto en móvil se ve de más más parte de abajo
       de lo que conviene (mucho asfalto); se recorta un poco subiendo
       el punto de anclaje respecto al 80% de escritorio */
    object-position: center 68%;
  }
  .contenedores-intro__text {
    flex: 0 0 auto;
    max-width: none;
    padding: 32px 24px;
  }
  .contenedores-intro__eyebrow { margin-bottom: 0.6rem; }
  .contenedores-intro__text-inner h1 { margin-bottom: 0.75rem; }
  .contenedores-intro__text-inner p { margin-bottom: 0.6rem; }
  .contenedores-intro__actions { margin-top: 1rem; }
}
@media (max-width: 860px) {
  /* Por debajo de 860px el nav pasa a su versión "hamburguesa" y baja
     de alto (69.8px medidos, frente a 78.5px entre 861-899px): el
     padding-top de arriba se ajusta aquí para seguir el mismo criterio
     (3px por debajo del alto real, solape a propósito) */
  .contenedores-intro { padding-top: 67px; }
}

/* ---------- Pastillas de filtro bajo el hero: anclan a cada familia ---------- */
.hero-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 32px;
  padding-bottom: 32px;
}
.hero-filtro {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--black);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.hero-filtro.is-active,
.hero-filtro:hover {
  background: var(--black);
  color: var(--white);
}
/* Sin esto, la sección de "Contenedores marítimos" que sigue justo a
   las pastillas sumaba su propio margin-top (var(--seccion-gap), el
   hueco estándar entre secciones) al padding-bottom de las propias
   pastillas: quedaban 120px por debajo frente a los 32px de arriba.
   Aquí se anula ese margen para que abajo quede el mismo aire que
   arriba (pedido explícito); el resto de secciones de la página
   siguen con el hueco estándar entre ellas, sin tocar */
.hero-filtros + .familia { margin-top: 0; }

/* =========================================================
   PLANTILLA ÚNICA para las tres familias de producto (01/02/03):
   .familia__head (ancho-contenido) + .familia__body (sangre, 2 mitades)
   ========================================================= */
.familia { margin-top: var(--seccion-gap); }
/* Distinción entre las tres familias de producto (contenedores/casetas/
   baños): la de en medio lleva un fondo gris muy sutil a sangre completa,
   con aire propio arriba y abajo. Así quedan marcados los dos límites
   (blanco→gris y gris→blanco) sin añadir números, iconos ni color fuerte */
#casetas-de-obra {
  background: #f7f7f5;
  padding: 64px 0;
}
@media (max-width: 759px) {
  #casetas-de-obra { padding: 40px 0; }
}

/* ---------- Transición entre familias de producto ----------
   En escritorio, scroll normal (sin sticky ni efecto "sube y tapa": se
   quitó a petición del cliente). En móvil sigue con scroll-snap: sin
   ocultar nada, pero cada sección "encaja" limpiamente en pantalla al
   pasar de una a la siguiente. */
@media (max-width: 899px) {
  #contenedores-maritimos,
  #casetas-de-obra,
  #modulos-de-bano,
  #transporte-y-colocacion {
    scroll-snap-align: start;
  }
  /* scroll-snap-type va en el elemento que realmente hace scroll (la
     página entera, no .contenedores-page, que no tiene overflow propio) */
  body.contenedores-body {
    scroll-snap-type: y proximity;
  }
}

/* ---------- Cabecera de familia: H2 + intro + botón ---------- */
.familia__cabecera { max-width: var(--ancho-contenido); }
.familia__cabecera h2 {
  font-size: clamp(2rem, 3.4vw, 3rem); /* 32px–48px */
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
.familia__intro {
  max-width: 620px;
  margin: 0 0 1.75rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.125rem); /* 16px–18px */
  line-height: 1.6;
}

/* ---------- Retícula de fichas: se repite igual en las tres familias ---------- */
.fichas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px; /* aire generoso entre fichas: nada de mosaico pegado */
  max-width: var(--ancho-contenido);
  margin: 48px auto 0;
  padding: 0 var(--margen-lateral); /* que no roce el borde de la ventana */
  box-sizing: border-box;
}
/* Antes toda la retícula aparecía de golpe como un único bloque .reveal.
   Ahora el disparador (IntersectionObserver) se queda en la retícula,
   pero cada ficha entra por su cuenta con un pequeño retraso en cascada:
   distingue cada familia de producto como un conjunto que "llega" junto,
   sin añadir color ni iconos */
.fichas-grid.reveal { opacity: 1; transform: none; transition: none; }
.fichas-grid .ficha {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.fichas-grid.is-visible .ficha { opacity: 1; transform: translateY(0); }
.fichas-grid .ficha:nth-child(1) { transition-delay: 0ms; }
.fichas-grid .ficha:nth-child(2) { transition-delay: 70ms; }
.fichas-grid .ficha:nth-child(3) { transition-delay: 140ms; }
.fichas-grid .ficha:nth-child(4) { transition-delay: 210ms; }
.fichas-grid .ficha:nth-child(5) { transition-delay: 280ms; }
.fichas-grid .ficha:nth-child(6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .fichas-grid .ficha { opacity: 1; transform: none; transition: none; }
}
.familia__nota {
  max-width: var(--ancho-contenido);
  margin: 1.5rem auto 0;
  color: var(--ink-soft);
  font-size: 14px;
}
.familia__nota a { color: var(--black); text-decoration: underline; }
.ficha { display: flex; flex-direction: column; }
.ficha__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ficha__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s var(--ease);
}
.ficha:hover .ficha__media img { transform: translateY(-4px); }
/* La etiqueta va debajo de la imagen, encima del título: sin recuadro
   ni fondo, solo texto monoespaciado en gris */
.ficha__tag {
  display: block;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ficha__body {
  flex: 1;
  min-height: 118px; /* el grid solo iguala alturas dentro de la misma fila:
    esto asegura que TODAS las fichas midan igual, también cuando una
    fila se queda con menos elementos que las de arriba */
  margin-top: 16px; /* aire entre la imagen y el texto, sin línea divisoria */
  padding: 0; /* el texto se alinea a la izquierda con el borde de su imagen */
  box-sizing: border-box;
}
.ficha__body h3 {
  margin: 0 0 6px;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); /* 18px–22px */
  font-weight: 600; /* peso medio */
}
.ficha__body p {
  margin: 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ---------- Qué incluye el servicio: dos columnas 40/60 ---------- */
.incluye-split { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: flex-start; }
.incluye-split__left { flex: 0 0 40%; max-width: 40%; }
.incluye-split__left p { margin-top: 0.75rem; color: var(--ink-soft); line-height: 1.6; }
.incluye-split__right { flex: 0 0 60%; max-width: 60%; }
.incluye-item { padding: 28px 0; border-bottom: 1px solid var(--black); }
.incluye-item:last-child { border-bottom: none; }
.incluye-item__num {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.incluye-item h3 { margin: 0 0 0.4rem; font-size: 18px; font-weight: 600; }
.incluye-item p { margin: 0; max-width: none; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* ---------- Transporte y colocación: mismo patrón de dos mitades ---------- */
.transporte-split { display: flex; align-items: stretch; height: 80svh; }
.transporte-split__media { flex: 0 0 50%; max-width: 50%; }
.transporte-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.transporte-split__text {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 64px;
  /* Mismo gris sutil que #casetas-de-obra: marca esta sección como
     distinta de las secciones blancas de alrededor */
  background: #f7f7f5;
}
.transporte-split__text-inner { max-width: 480px; }
.transporte-split__eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.transporte-split__text-inner h2 { margin: 0 0 1rem; }
.transporte-split__text-inner p { max-width: none; margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.6; }
.transporte-split__final { margin-top: 1.25rem; }
.transporte-split__final a { color: var(--black); text-decoration: underline; }

/* Lista de comprobaciones sin viñetas: líneas de 1px */
.lineas-simple {
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}
.lineas-simple li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- Visítanos: mapa de la nave, a sangre completa ---------- */
/* Imagen estática (captura propia de teselas Esri, sin API key) en vez de
   mapa interactivo: ver comentario en el HTML de /contenedores-y-modulos
   sobre por qué se dejó de usar Leaflet + CARTO */
/* Mismo gris sutil que #casetas-de-obra: distingue esta sección de las
   secciones blancas de alrededor */
#visitanos {
  background: #f7f7f5;
  padding: 64px 0;
}
@media (max-width: 759px) {
  #visitanos { padding: 40px 0; }
}
.mapa-visita { margin-top: 48px; height: 480px; position: relative; }
.mapa-visita__link { display: block; width: 100%; height: 100%; }
.mapa-visita__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f2f2f0;
  transition: opacity .2s var(--ease);
}
.mapa-visita__link:hover .mapa-visita__img { opacity: 0.85; }
.mapa-visita__credito {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.7);
  padding: 1px 6px;
  pointer-events: none;
}
@media (max-width: 759px) {
  .mapa-visita { height: 320px; }
}

/* ---------- Listas simples reutilizadas (comprobaciones, etc.) ---------- */
.lista-simple {
  max-width: 560px;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.lista-simple li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.lista-simple li::before {
  content: "—";
  position: absolute;
  left: 0;
}

/* ---------- Secciones simples (Pide presupuesto, FAQ): solo .contenido ---------- */
.contenedores-section { margin-top: var(--seccion-gap); }
.contenedores-section h3 {
  max-width: 560px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 0 0 1rem;
}
.contenedores-section > p {
  max-width: 560px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

@media (max-width: 1099px) {
  .fichas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  .fichas-grid { grid-template-columns: 1fr; }

  .incluye-split { flex-direction: column; }
  .incluye-split__left,
  .incluye-split__right { flex: 1 1 auto; max-width: none; }
  .incluye-split__right { margin-top: 1rem; }

  .transporte-split { flex-direction: column; height: auto; }
  .transporte-split__media,
  .transporte-split__text { flex: 1 1 auto; max-width: none; }
  .transporte-split__media { height: 45svh; }
  .transporte-split__text { padding: 40px var(--margen-lateral); }
}

@media (max-width: 759px) {
  .hero-filtros { padding-top: 32px; padding-bottom: 32px; }
  .fichas-grid { gap: 24px; }
}

/* Formulario inline (misma pinta que el modal, sin overlay ni posición
   fija: ver .quote__field, .quote__consent, .quote__legal, .quote__success
   ya definidos para el modal, reutilizados aquí tal cual). Sin caja: solo
   una regla superior, como el resto de bloques de la página */
.quote-inline {
  max-width: 760px;
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--black);
}
/* Dos columnas en escritorio (nombre+correo / teléfono+proyecto): solo
   agrupa visualmente los mismos campos, en el mismo orden del HTML, así
   que el orden de envío del formulario no cambia */
.quote-inline__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}
@media (max-width: 759px) {
  .quote-inline__cols { grid-template-columns: 1fr; }
}
.quote-inline__phone {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.quote-inline__phone a { text-decoration: underline; color: var(--black); }
.quote-inline .quote__success h3 { margin-bottom: 0.5rem; }

/* FAQ en acordeón, con <details>/<summary> nativos (accesible, sin JS):
   solo líneas de 1px, sin cajas ni fondo */
.faq { max-width: 700px; }
.faq__item {
  border-bottom: 1px solid var(--black);
  padding: 24px 0;
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 1.05rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 400;
  transition: transform .2s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  max-width: none;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 0.9rem;
}

/* =========================================================
   SERVICIOS — dos mitades exactas, vídeo integrado a la izquierda
   ========================================================= */
/* A sangre completa (100% del ancho de la ventana): tanto .servicios
   como .content-curtain, su contenedor, no llevan max-width ni padding
   horizontal propios, así que no hace falta ningún truco de "bleed" */
.servicios {
  position: relative;
  display: flex; /* align-items por defecto: stretch, así la columna del
                     vídeo mide siempre lo mismo que la de servicios */
  /* Tope duro a una pantalla: la sección nunca puede medir más que
     100svh, pase lo que pase con el contenido. overflow:hidden es el
     cinturón de seguridad — con los 8 servicios cabiendo de sobra en
     ese alto (ver .servicios__content) no llega a recortar nada */
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  background: var(--white);
  color: var(--black);
}

/* ---------- Mitad izquierda: vídeo ---------- */
.servicios__video-col {
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
}
.servicios__video-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--black);
}
.servicios__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.servicios__video-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.servicios__video-caption {
  position: absolute;
  left: 32px;
  bottom: 32px;
  margin: 0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- Mitad derecha: titular + lista ---------- */
/* display:flex + justify-content:center: el vídeo de la izquierda mide
   100svh (sticky) y esta columna se estira para igualarlo. Centrando el
   contenido dentro de esa altura, si el bloque (título + 8 filas) cabe
   en una pantalla, la sección entera mide exactamente 100svh y las 8
   filas se ven sin hacer scroll — que es el objetivo: ver todos los
   servicios de un vistazo */
.servicios__content {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 48px;
  box-sizing: border-box;
}

.servicios__head { margin: 0 0 16px; }
.servicios__eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.servicios__head h2 {
  font-size: clamp(2rem, 4vw, 3.25rem); /* 32px–52px */
  font-weight: 600; /* peso medio */
  letter-spacing: -0.01em;
  margin: 0;
}

.servicios__list { list-style: none; margin: 0; padding: 0; }
.servicios__list li { border: none; }

.servicios__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}

.servicios__row-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.servicios__row h3 {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); /* 18px–22px */
  font-weight: 600; /* peso medio */
  letter-spacing: -0.01em;
  position: relative;
}
/* Línea que se desliza por debajo del nombre al pasar el ratón, en vez
   del cambio de tamaño anterior */
.servicios__row h3::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--black);
  transition: right .25s var(--ease);
}
.servicios__row:hover h3::after { right: 0; }

.servicios__arrow {
  flex: 0 0 auto;
  font-family: var(--mono, ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  color: inherit;
}

.servicios__desc {
  margin: 0;
  padding-left: 0;
  color: var(--ink-soft);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem); /* 13px–15px */
  line-height: 1.4;
}

@media (max-width: 899px) {
  /* En móvil vídeo y lista van apilados (uno debajo del otro), así que
     el tope de "una sola pantalla" del escritorio no aplica aquí: hace
     falta scroll normal para ver las 8 filas, como en el resto del
     sitio en móvil */
  .servicios { height: auto; max-height: none; overflow: visible; flex-direction: column; }
  .servicios__video-col {
    flex: 1 1 auto;
    max-width: none;
  }
  .servicios__video-sticky { position: static; height: 60svh; }
  .servicios__content {
    max-width: none;
    padding: 48px 24px;
  }
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final {
  /* En flujo normal (no sticky): sube por delante de la franja de
     Contenedores (sticky, z-index inferior) según el usuario hace
     scroll, hasta cubrirla del todo. Fondo opaco propio (foto + capa),
     nunca transparente, para que realmente tape lo que hay debajo. */
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cta-final__media,
.cta-final__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.cta-final__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,.55);
}
.cta-final__content {
  text-align: center;
  color: var(--white);
  padding: 0 var(--gap);
  max-width: 800px;
}
.cta-final__symbol {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}
.cta-final__content h2 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-bottom: 0.75rem;
}
.cta-final__content p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--concrete);
  margin-bottom: 2rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;
  z-index: 3; /* por encima del CTA final para poder taparlo a su vez al llegar */
  background: var(--white);
  border-top: 1px solid var(--concrete);
}
/* Solo en /contenedores-y-modulos/: la página termina justo con la
   última pregunta de "Preguntas frecuentes", cuya propia línea
   (.faq__item, corta, max-width:700px de .faq) quedaba pegada sin
   espacio a la línea larga del footer (ancho completo), justo debajo.
   Se mantienen las dos, con aire entre medias */
#preguntas-frecuentes { margin-bottom: 48px; }
.footer__top {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--section-pad) var(--gap) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  min-height: 46vh;
}
.footer__contact p { margin-bottom: 0.5rem; color: var(--ink-soft); font-size: 1.05rem; }
.footer__contact a:hover { text-decoration: underline; }

.footer__social { display: flex; gap: 0.75rem; margin: 1.75rem 0; }
.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.footer__social a:hover { background: var(--black); color: var(--white); }

.footer__wordmark {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-top: auto;
}

.footer__nav-wrap { position: relative; }
.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding-top: 0.2rem;
}
.footer__nav a,
.footer__nav-cta {
  font-size: 1.05rem;
  color: var(--black);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.footer__nav a:hover,
.footer__nav-cta:hover { text-decoration: underline; }

.footer__bottom {
  border-top: 1px solid var(--concrete);
  margin-top: 3rem;
  padding: 1.5rem var(--gap);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal a:hover { text-decoration: underline; }
.footer__bottom p { color: var(--ink-soft); font-size: 0.85rem; }
/* Reseñas de Google: centrado en vertical con los enlaces del pie, a la
   derecha del todo en móvil (una sola columna); en escritorio se sale del
   bloque de navegación por la derecha, a la altura del wordmark "Depedro" */
.footer__reviews {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: clamp(1rem, 4vw, 2rem);
  z-index: 2;
}

@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1.6fr 1fr; }
  .footer__nav {
    border-left: 1px solid var(--concrete);
    padding-left: 3rem;
    padding-top: 0.4rem;
  }
  /* Deja de ser el ancla de posición: así el sticker cuelga de .footer (que
     ocupa todo el ancho) en vez de .footer__nav-wrap (limitado al bloque de
     navegación), y no se sale nunca de la pantalla por la derecha */
  .footer__nav-wrap { position: static; }
  .footer__reviews {
    top: auto;
    bottom: 7.5rem;
    right: clamp(1rem, 4vw, 3rem);
    transform: none;
  }
}

/* =========================================================
   CTA FLOTANTE (SOLO MÓVIL)
   ========================================================= */
/* Oculto por defecto (desktop y por atributo hidden mientras el banner
   de cookies está en pantalla, ver main.js) */
.floating-cta { display: none; }
@media (max-width: 759px) {
  .floating-cta:not([hidden]) {
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    z-index: 150;
    padding: 0.7rem 1.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  /* Sin CTA flotante en /contenedores-y-modulos ni en las páginas de
     servicio: ya tienen su propio CTA de cierre a mano en el móvil.
     Combinador de hermanos (~), no descendiente: <main class="…-page">
     y este botón son hermanos directos de <body>, el botón no vive
     dentro de <main>, así que ".servicio-page .floating-cta" nunca
     coincidía y el botón se colaba en todas las páginas de servicio
     (bug ya existente, no introducido ahora: lo detecté al comprobar
     que no tapara al nuevo botón de WhatsApp) */
  .contenedores-page ~ .floating-cta,
  .servicio-page ~ .floating-cta {
    display: none;
  }
}

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================= */
/* Mismo nivel que el CTA flotante (z-index:150): ninguno de los dos
   compite con el banner de cookies (z-index:200) ni con los modales
   (300), y este si convive con el CTA flotante porque están en
   esquinas distintas (CTA centrado, WhatsApp a la izquierda) */
.whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: var(--white);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.whatsapp-float svg { display: block; }
.whatsapp-float[hidden] { display: none; }

@media (max-width: 759px) {
  .whatsapp-float {
    left: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* =========================================================
   COOKIES BANNER
   ========================================================= */
.cookies {
  position: fixed;
  left: var(--gap);
  right: var(--gap);
  bottom: var(--gap);
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 640px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.cookies p { font-size: 0.9rem; color: var(--concrete); }
.cookies__actions { display: flex; gap: 0.75rem; }
.cookies__actions .btn { flex: 1; }
.cookies[hidden] { display: none; }

@media (min-width: 560px) {
  .cookies { flex-direction: row; align-items: center; }
  .cookies__actions { flex-shrink: 0; }
}

/* =========================================================
   LIGHTBOX DE PROYECTOS
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 2rem);
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(0, 0, 0, .92);
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 82vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--black);
}
.lightbox__caption {
  color: var(--concrete);
  font-size: 0.9rem;
  text-align: center;
}
@media (max-width: 700px) {
  /* Fijo abajo, fuera del flujo: así no se mueve al cambiar entre fotos
     verticales y horizontales (antes "saltaba" según el alto de cada foto) */
  .lightbox__caption {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    text-align: center;
  }
}

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--white);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* Posición fija a los lados de la pantalla en cualquier tamaño: no se
   mueven aunque la foto cambie de tamaño (vertical/horizontal) o de
   orientación, así el dedo/cursor siempre las encuentra en el mismo sitio */
.lightbox__arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--white);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__arrow:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.lightbox__arrow--prev { left: clamp(0.5rem, 4vw, 5rem); }
.lightbox__arrow--next { right: clamp(0.5rem, 4vw, 5rem); }

/* =========================================================
   FORMULARIO DE PRESUPUESTO
   ========================================================= */
.quote {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  background: rgba(0, 0, 0, .6);
}
.quote[hidden] { display: none; }

.quote__box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  color: var(--black);
  padding: clamp(1.75rem, 5vw, 2.5rem);
}
.quote__box h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-bottom: 0.5rem; }
.quote__intro { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.5rem; }

.quote__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--black);
  color: var(--black);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.quote__close:hover { background: var(--black); color: var(--white); }

.quote__field {
  display: block;
  margin-bottom: 1.25rem;
}
.quote__field span {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.quote__field input,
.quote__field textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--concrete);
  background: var(--white);
  color: var(--black);
  font: inherit;
  resize: vertical;
}
.quote__field input:focus-visible,
.quote__field textarea:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 1px;
}
.quote__field input[type="file"] {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.quote__hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.quote__hp { display: none; }

/* ---------- Fotos adjuntas: aviso + miniaturas con botón de quitar ---------- */
.quote__file-msg {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--black);
}
.quote__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0 1.25rem;
  padding: 0;
  list-style: none;
}
.quote__preview {
  position: relative;
  width: 72px;
  height: 72px;
  border: 1px solid var(--concrete);
}
.quote__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote__preview-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: var(--black);
  color: var(--white);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.quote__preview-remove:hover { background: var(--ink-soft); }
.quote__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.quote__consent input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.quote__consent a { color: var(--black); text-decoration: underline; }
.quote__submit { width: 100%; }
.quote__submit:disabled { opacity: 0.4; cursor: not-allowed; }
.quote__error {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--black);
}
.quote__error a { text-decoration: underline; }
.quote__legal {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.quote__legal a { text-decoration: underline; }
.quote__success p {
  font-size: 1.05rem;
  color: var(--black);
}

/* =========================================================
   PÁGINAS LEGALES (aviso legal, privacidad, cookies)
   ========================================================= */
.legal {
  max-width: 70ch;
  margin: 0 auto;
  padding: 152px var(--gap) var(--section-pad);
}
.legal h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.01em;
  margin-bottom: 2.5rem;
}
.legal h2 {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p {
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
}
.legal ul,
.legal ol {
  margin: 0 0 1.25rem 1.25rem;
  color: var(--ink-soft);
}
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 0.5rem; }
.legal li p { margin-bottom: 0; }
.legal a { text-decoration: underline; color: var(--black); }
.legal strong { color: var(--black); font-weight: 700; }

@media (max-width: 759px) {
  .legal { padding-top: 120px; }
}

/* =========================================================
   PLANTILLA: PÁGINAS DE SERVICIO
   (porches-de-madera y las seis que la reutilizan)
   Componentes genéricos con prefijo .servicio-*: cada página nueva solo
   cambia el contenido HTML, no necesita CSS propio. Reutiliza además
   clases ya globales de otras páginas: .contenido, .reveal, .btn,
   .faq/.faq__item, .quote-inline, .familia__intro (ninguna de ellas está
   escrita dentro de .contenedores-page, así que son seguras de reusar
   aquí sin arrastrar nada de esa página).
   ========================================================= */
.servicio-page {
  --ancho-contenido: 1200px;
  --margen-lateral: 24px;
  /* 96px/56px: separación editorial estándar entre bloques de
     contenido (ni pegados ni exageradamente sueltos), la misma familia
     de valores que ya usa el resto del sitio (p. ej. 88px en
     /contenedores-y-modulos) */
  --bloque-gap: 96px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;
  /* Esta plantilla no hace seguimiento de scroll para el nav (a
     diferencia de home o /contenedores-y-modulos): el Hero tiene fondo
     claro, así que el nav se queda "sólido" desde el principio (mismo
     comportamiento que las páginas legales) y el padding de aquí abajo
     solo necesita despejar su altura */
  padding-top: 84px;
}
@media (max-width: 759px) {
  .servicio-page { --bloque-gap: 56px; padding-top: 72px; }
}

/* ---------- Migas de pan ---------- */
.servicio-migas {
  /* El Hero que viene justo después sube con un margen negativo para
     llegar a sangre bajo el nav (ver .servicio-hero); sin esto, al
     superponerse en ese hueco, el Hero (que sí tiene fondo propio)
     taparía las migas */
  position: relative;
  z-index: 1;
  /* Solo arriba/abajo: el padding lateral (izquierda/derecha) ya lo da
     .contenido (misma clase en el HTML) y no hay que pisarlo, o las
     migas quedan pegadas al borde en vez de alineadas con el resto del
     texto de la página */
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.servicio-migas a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.servicio-migas a:hover { color: var(--black); }
.servicio-migas__current { color: var(--black); }
.servicio-migas__sep { margin: 0 0.4em; }

/* ---------- Hero: dos mitades a sangre, ocupa toda la pantalla ---------- */
/* El Hero llena toda la ventana (100svh) y la imagen va a sangre por
   arriba (detrás del nav fijo), por abajo y por la derecha: así el
   siguiente apartado ("Qué hacemos") queda completamente fuera de la
   vista inicial y solo aparece al hacer scroll, no asomando dentro del
   Hero. Técnica: toda la fila sube 142px con un margen negativo (142px
   = 84px de padding-top de .servicio-page + el alto de las migas de
   pan, el hueco entre el techo real de la ventana y donde empezaría
   esta fila en flujo normal); con eso el borde superior queda en
   y=0 exacto. El borde inferior, al no compensarse esa subida con más
   alto, cae en 100svh en vez de en 100svh+142px: exactamente el borde
   inferior real de la ventana */
.servicio-hero { display: flex; min-height: 100svh; margin-top: -142px; }
.servicio-hero__text {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* padding-left NO puede ser un valor fijo: .servicio-hero ocupa todo
     el ancho de la ventana (no pasa por .contenido), así que su propio
     borde izquierdo es siempre x=0. Para que el texto arranque en la
     misma x que las migas y el resto del contenido (que sí vive dentro
     de .contenido, con columna centrada a max 1200px) hay que replicar
     aquí ese mismo cálculo: por debajo de 1200px de ventana da 24px
     (igual que --margen-lateral); por encima, crece igual que crece el
     margen del auto-centrado de .contenido. A exactamente 1280px de
     ventana da 64px, que es el valor fijo que había antes — coincidía
     solo en esa anchura concreta y se desalineaba en el resto */
  padding: 64px 64px 64px max(var(--margen-lateral), calc((100vw - var(--ancho-contenido)) / 2 + var(--margen-lateral)));
  background: var(--white);
}
.servicio-hero__text-inner { max-width: 560px; }
.servicio-hero__eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.servicio-hero__text-inner h1 {
  font-size: clamp(2.125rem, 4vw, 3.75rem); /* 34px–60px */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.servicio-hero__text-inner p {
  max-width: 520px;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.1875rem); /* 16px–19px */
  line-height: 1.6;
  margin: 0 0 1rem;
}
.servicio-hero__text-inner .btn { margin-top: 1.5rem; }

/* Ajuste puntual de la posición vertical del texto en páginas de
   servicio concretas (el bloque está anclado abajo con justify-content:
   flex-end, así que tocar el padding-bottom sube o baja el conjunto
   dentro del hero). Solo en escritorio: en móvil .servicio-hero__text
   ya tiene su propio padding fijo (40px 24px), sin flex-end de por
   medio. */
@media (min-width: 900px) {
  .servicio-hero--mas-aire .servicio-hero__text { padding-bottom: 24px; }
  .servicio-hero--menos-aire .servicio-hero__text { padding-bottom: 108px; }
}
.servicio-hero__media {
  flex: 0 0 50%;
  max-width: 50%;
  /* Sin esto, una foto real (con su propio ratio de aspecto) usa su
     tamaño intrínseco como mínimo del hueco flex y agranda todo el
     hero por encima de 100svh, empujando también el texto. Con
     min-height:0 el hueco se queda exactamente en el alto que le da
     el stretch del flex, y object-fit:cover recorta la foto para
     rellenarlo sin alterar nada del layout. */
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 899px) {
  /* En móvil la imagen vuelve al flujo normal, debajo del texto: la
     sangre bajo el nav solo tiene sentido en el hero de dos mitades.
     Se deshace también la subida de 142px del bloque completo */
  .servicio-hero { flex-direction: column; min-height: 0; margin-top: 0; }
  .servicio-hero__text {
    flex: 0 0 auto;
    max-width: none;
    padding: 40px 24px;
  }
  .servicio-hero__media {
    flex: 0 0 auto;
    max-width: none;
    height: 45svh;
  }
}

/* ---------- Huecos de imagen: mismo hueco vale para placeholder o <img> ---------- */
/* Placeholder: <div class="servicio-media-hueco" id="...">Imagen pendiente</div>
   Sustitución futura, sin reestructurar nada: cambiar el div por
   <img class="servicio-media-hueco" id="..." src="..." alt="..."> */
.servicio-media-hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.5rem;
  background: #f2f2f0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
}
img.servicio-media-hueco {
  display: block;
  padding: 0;
  background: none;
  object-fit: cover;
}
/* Sube la imagen dentro de su recuadro (que se recorte menos techo y se
   vea más de la zona de mesas/electrodomésticos): mismo recuadro, solo
   cambia qué parte de la foto se ve */
#img-panel-2 { object-position: center 80%; }

/* Hueco vertical 4:5, dentro del ancho de contenido (IMAGEN 2 tal como
   se usa en porches; mismo componente para el resto de páginas) */
.servicio-media-vertical {
  max-width: 480px;
  aspect-ratio: 4 / 5;
  margin: var(--bloque-gap) auto 0;
}
/* Hueco apaisado, a sangre completa (IMAGEN 3 en porches). Banda fina
   tipo "cinemascope", más baja que un 16:9 normal */
.servicio-media-horizontal {
  width: 100%;
  aspect-ratio: 3 / 1;
  margin-top: var(--bloque-gap);
}
/* ---------- Bloque a dos columnas 50/50: texto a la izquierda, imagen
   a la derecha (p. ej. "Cómo se compone una cubierta de madera" en
   /cubiertas-de-madera). Opcional: se usa solo cuando un .servicio-bloque
   concreto lo necesita, envolviendo su contenido en .servicio-split ---------- */
/* Grid, no flex: así la fila mide exactamente lo que necesita el texto
   (su altura natural) y la columna de la imagen se estira a esa misma
   altura con align-items:stretch. La foto va position:absolute dentro
   de su columna (a propósito: fuera del flujo normal) porque una foto
   real trae su propio ratio de aspecto "intrínseco" (a veces con la
   orientación EXIF invertida respecto al ancho/alto de archivo, como
   pasa aquí) y ese ratio, aunque se fuerce width/height:100%, sigue
   contando en el cálculo de alto automático de la fila y la infla por
   encima del texto. Sacándola del flujo con absolute dejar de contar
   del todo: la columna mide 0 de contenido propio, el grid la estira
   exactamente a la altura del texto, y el absolute + inset:0 la vuelve
   a rellenar entera (mismo problema que min-height:0 en
   .servicio-hero__media, más arriba, resuelto aquí con una técnica más
   fuerte porque ahí sí hace falta que la fila la marque la imagen) */
.servicio-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.servicio-split__media { position: relative; min-height: 0; }
.servicio-split__media .servicio-media-vertical {
  position: absolute;
  inset: 0;
  margin: 0;
  max-width: none;
  width: auto;
  aspect-ratio: auto;
}
/* Solo en /porches-de-madera, sección de policarbonato: el título sale
   de .servicio-split__text (que ya no lo lleva, ver HTML) para poder
   colocarlo por separado en móvil (ver media query). En escritorio se
   coloca con grid-template-areas para que quede exactamente igual que
   antes: título arriba del texto, en la misma columna, imagen a la
   izquierda ocupando el alto de las dos filas */
#porches-policarbonato-split {
  grid-template-areas: "media title" "media text";
}
@media (min-width: 900px) {
  /* Solo en escritorio (en móvil .servicio-split ya fuerza gap:0 y este
     id, al ser más específico, se lo saltaba si no se limitaba aquí):
     entre el título y el texto solo queda el aire de la fila (row-gap),
     no el que separa las columnas imagen/texto; si no, se sumaban los
     32-64px del gap normal y quedaba mucho hueco bajo el título.
     La imagen (grid-area: media, estira las dos filas con
     align-items:stretch + object-fit:cover) se ajusta sola a la altura
     resultante, recortándose un poco de más o de menos según toque */
  #porches-policarbonato-split { row-gap: 16px; }
}
#porches-policarbonato-split .servicio-split__media { grid-area: media; }
#porches-policarbonato-split .servicio-split__title { grid-area: title; }
#porches-policarbonato-split .servicio-split__text { grid-area: text; }
@media (max-width: 899px) {
  .servicio-split { grid-template-columns: 1fr; gap: 0; }
  .servicio-split__media {
    /* En móvil la columna sí necesita alto propio: ya no hay fila que
       la estire (todo pasa a una sola columna en flujo normal) */
    min-height: 0;
    height: 0;
    padding-top: 125%; /* 4:5, mismo hueco que en el resto de la web */
    margin-top: var(--bloque-gap);
  }
  /* Solo en /reformas-integrales, solo en móvil: la foto va debajo del
     texto (que incluye la lista de "Qué incluye una reforma integral"),
     no encima como en el resto de páginas que usan .servicio-split */
  #reformas-incluye-split .servicio-split__media { order: 2; }
  #reformas-incluye-split .servicio-split__text { order: 1; }

  /* Solo en /porches-de-madera, sección de policarbonato: en móvil el
     título va primero, encima de la foto (pedido explícito). El hueco
     hasta la sección anterior ya lo pone .servicio-bloque (el <section>
     que envuelve todo esto), así que el título no lleva margen propio
     arriba (si no, se suma y queda el doble de aire de la cuenta). El
     título ya trae su propio espacio hasta la imagen (margen y borde de
     .servicio-bloque h2); entre la imagen y el texto se mantiene el
     aire pedido antes. No toca el resto de páginas que comparten
     .servicio-split */
  #porches-policarbonato-split { grid-template-areas: "title" "media" "text"; }
  #porches-policarbonato-split .servicio-split__media { margin-top: 0; }
  #porches-policarbonato-split .servicio-split__text { margin-top: 32px; }
}

/* ---------- Cuerpo: bloques con H2 + línea, separados var(--bloque-gap) ---------- */
/* El primer apartado respeta el mismo ritmo que el resto: ahora que el
   Hero ocupa toda la pantalla (100svh), ya no hace falta pegarlo al
   primer bloque para que "Qué hacemos" no asome sin hacer scroll */
.servicio-cuerpo { padding-top: var(--bloque-gap); }
.servicio-bloque { margin-top: var(--bloque-gap); }
.servicio-bloque:first-child,
.servicio-cuerpo > .servicio-bloque:first-child { margin-top: 0; }
.servicio-bloque h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--black);
}
.servicio-bloque p {
  max-width: 720px;
  font-size: clamp(1rem, 1.4vw, 1.125rem); /* 16px–18px */
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
.servicio-bloque p:last-child { margin-bottom: 0; }
.servicio-bloque strong { color: var(--black); font-weight: 600; }

/* Listas con viñeta -> filas separadas por líneas de 1px, sin bullets */
.servicio-lista {
  max-width: 720px;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--black);
}
/* Cuando la lista va justo debajo del H2, sin párrafo de por medio (p.
   ej. "Qué construimos con madera" en /estructuras-de-madera), la línea
   propia de la lista queda pegada a la línea del H2: se quita esa
   segunda línea y se sube el bloque, acercándolo al título */
.servicio-lista--sin-linea-superior {
  border-top: none;
  /* Las filas de la lista ya tienen 18px de padding propio arriba (ver
     .servicio-lista li); sin la línea, ese padding se suma al margen y
     el hueco antes del texto queda más grande que en el resto de
     bloques (H2 + párrafo = 24px). Un margen negativo compensa
     exactamente esos 18px, para que el texto quede a los mismos 24px
     de la línea del título en todos los bloques */
  margin-top: -18px;
}
.servicio-lista li {
  padding: 18px 0;
  border-bottom: 1px solid var(--black);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Listas numeradas: número en monoespaciada, columna fija de 40px
   (reutilizable en las páginas que tengan pasos numerados, p. ej.
   "Cómo trabajamos" en /estructuras-de-madera) */
.servicio-lista--numerada {
  counter-reset: servicio-paso;
  border-top: none;
}
.servicio-lista--numerada li {
  position: relative;
  padding-left: 56px;
}
.servicio-lista--numerada li::before {
  counter-increment: servicio-paso;
  content: counter(servicio-paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  width: 40px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}
/* Sin líneas entre paso y paso (p. ej. "Cómo se compone una cubierta de
   madera" en /cubiertas-de-madera): el número y el aire entre filas ya
   bastan para separarlos */
.servicio-lista--sin-lineas li { border-bottom: none; }

/* Preguntas frecuentes: reutiliza .faq / .faq__item ya globales (ver
   más arriba en esta hoja), solo hace falta la cabecera H2 + línea, que
   ya da .servicio-bloque h2. El primer .faq__item ya trae 24px de
   padding propio arriba (mismo padding que separa el resto de
   preguntas entre sí); sin este margen negativo, ese padding se suma
   al margen normal del bloque y la primera pregunta queda con el
   doble de aire que las demás. Mismo cálculo que
   .servicio-lista--sin-linea-superior más arriba */
.servicio-bloque .faq { margin-top: -24px; }

/* ---------- Servicios relacionados: misma .servicio-lista, pero cada
   fila es un enlace completo (toda la fila es clickable, con el mismo
   hover-invertido que .servicios__row en la home) ---------- */
.servicio-lista--enlaces li { padding: 0; border-bottom: none; }
.servicio-lista--enlaces a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 18px 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 500;
  text-decoration: none;
  transition: color .08s linear;
}
.servicio-lista--enlaces a:hover { color: var(--black); }
.servicio-lista--enlaces .servicio-lista__arrow {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 15px;
}

/* ---------- Cierre: recuadro negro a sangre completa ---------- */
.servicio-cierre {
  margin-top: var(--bloque-gap);
  background: #0a0a0a;
  padding: 96px var(--margen-lateral);
  text-align: center;
}
.servicio-cierre__inner { max-width: 640px; margin: 0 auto; }
.servicio-cierre h2 {
  color: var(--white);
  font-size: clamp(1.75rem, 3vw, 2.75rem); /* 28px–44px */
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
}
.servicio-cierre__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.servicio-cierre__phone {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Formulario: reutiliza .quote-inline / .familia__intro tal cual ---------- */
.servicio-bloque--form { margin-top: var(--bloque-gap); }
/* .servicio-media-vertical / .servicio-media-horizontal ya usan
   var(--bloque-gap) arriba, así que heredan el valor reducido de móvil
   (56px) automáticamente: no hace falta repetirlo en un media query */

/* Botón "Configurar cookies" dentro del texto de /politica-de-cookies y
   enlace "Más información" del banner */
.legal__cookies-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.cookies p a { color: inherit; text-decoration: underline; }