/* ============================================================================
   AltaHome Reformas — altahome.es
   ----------------------------------------------------------------------------
   Dirección «Obra»: azul tinta y el ámbar del chaleco y la cinta métrica como
   único acento, sobre neutros fríos.

   Aquí no se escribe ningún color a mano: todo sale de las variables de :root.
   Si hace falta uno nuevo, se añade arriba con su comentario.
   ========================================================================== */

:root {
  /* Marca */
  --tinta: #0e1f3d;
  --tinta-2: #1b3161;
  --ambar: #e8a317;
  --ambar-claro: #f2b23a; /* solo para el hover del botón principal */
  /* Ámbar para TEXTO sobre fondo claro. Está tan oscuro por una razón:
     medido, #a96f00 se queda en 4,23 sobre blanco y 3,74 sobre --fondo, y
     el antetítulo es de 13 px, que no cuenta como texto grande. Este llega
     a 5,57 y 4,92. No lo aclares sin volver a medirlo. */
  --ambar-osc: #8f5e00;

  /* Neutros */
  --papel: #ffffff;
  --fondo: #eef1f6;
  --linea: #d8dee8;
  --texto: #12203a;
  --texto-2: #5b6779;
  --sobre-tinta: #dbe3ef;    /* texto normal sobre fondo tinta */
  --sobre-tinta-2: #b9c4d6;  /* texto secundario sobre fondo tinta */

  --radio: 8px;
  --radio-l: 14px;

  --ancho: 1180px;
  --aire: clamp(3.5rem, 8vw, 7rem);   /* separación entre secciones */

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Para que las anclas no queden debajo de la cabecera fija. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Hueco para la barra fija del móvil, que si no tapa el pie. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Piezas comunes ────────────────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ambar);
  color: var(--tinta);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.saltar:focus {
  left: 0;
}

.antetitulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-osc);
}
.antetitulo::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--ambar);
}

.seccion {
  padding-block: var(--aire);
}

.seccion--oscura {
  background: var(--tinta);
  color: var(--papel);
}
.seccion--oscura .antetitulo {
  color: var(--ambar);
}

.seccion--fondo {
  background: var(--fondo);
}

.titulo-seccion {
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
  font-weight: 800;
}

.entradilla {
  max-width: 62ch;
  margin-top: 1.15rem;
  font-size: clamp(1.0625rem, 1.9vw, 1.1875rem);
  color: var(--texto-2);
}
.seccion--oscura .entradilla {
  color: var(--sobre-tinta-2);
}

/* ── Botones ───────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}
.boton:active {
  transform: translateY(1px);
}

.boton--principal {
  background: var(--ambar);
  color: var(--tinta);
}
.boton--principal:hover {
  background: var(--ambar-claro);
}

.boton--fantasma {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}
.boton--fantasma:hover {
  background: rgb(255 255 255 / 0.12);
}

.boton--linea {
  border-color: var(--tinta);
  color: var(--tinta);
  background: transparent;
}
.boton--linea:hover {
  background: var(--tinta);
  color: var(--papel);
}

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tinta);
  color: var(--papel);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

/* ── Logotipo ──────────────────────────────────────────────────────────────
   Las tres barras van como SVG dentro del propio HTML, no como imagen. Así
   no hay una descarga más, se ven nítidas en cualquier pantalla y toman el
   color de los tokens de aquí arriba.

   El texto es texto de verdad, no un dibujo: el logotipo de marca está hecho
   con Helvetica Neue, que no existe ni en Windows ni en Android, así que un
   logo con la letra incrustada se deformaría en el equipo de medio mundo.
   En minúsculas y con «alta» gordo y «home» fino, como la marca. */

/* Sin `gap`: aquí «alta» y «home» son dos cajas distintas para el flex, y un
   gap las separaría. En la marca van pegadas, así que la separación se le da
   solo a las barras, con su margen. */
.logotipo {
  display: inline-flex;
  align-items: center;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.logotipo span {
  color: var(--ambar);
  font-weight: 200;
}

.logotipo__marca {
  flex: none;
  height: 1.3rem;
  width: auto;
  margin-right: 0.5rem;
  fill: var(--ambar);
}

.menu {
  display: none;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 600;
}
.menu a {
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
}
.menu a:hover {
  border-bottom-color: var(--ambar);
}

@media (min-width: 62rem) {
  .menu {
    display: flex;
  }
}

/* ── «Qué hacemos», desplegado ─────────────────────────────────────────────
   Es un <details> nativo, el mismo mecanismo que las preguntas de más abajo:
   se abre con el clic y con el teclado sin una sola línea de JavaScript.

   Se abre al pulsar, no al pasar el ratón por encima, y es a propósito: con
   el hover, al bajar en diagonal hacia «Reforma de baño» te sales un píxel
   del menú y se te cierra en la cara. Pulsar no tiene ese problema.

   El menú entero está oculto por debajo de 62rem, así que esto solo se ve en
   pantalla grande. En el móvil las cuatro páginas se alcanzan por la sección
   «Qué hacemos» de la portada. */

.menu__grupo {
  position: relative;
}

.menu__grupo > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  list-style: none; /* quita el triangulito que pone el navegador */
}
.menu__grupo > summary::-webkit-details-marker {
  display: none;
}
.menu__grupo > summary:hover,
.menu__grupo[open] > summary {
  border-bottom-color: var(--ambar);
}

/* La flechita, igual que la de las preguntas. */
.menu__grupo > summary::after {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.menu__grupo[open] > summary::after {
  margin-top: 0.15rem;
  transform: rotate(-135deg);
}

.menu__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: 15.5rem;
  padding: 0.4rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-l);
}

/* Los enlaces de dentro no llevan el subrayado ámbar del menú de arriba:
   aquí el que está debajo del ratón se marca con el fondo. */
.menu__panel a {
  padding: 0.6rem 0.8rem;
  border-bottom: 0;
  border-radius: var(--radio);
  color: var(--texto);
  font-weight: 600;
  white-space: nowrap;
}
.menu__panel a:hover {
  background: var(--fondo);
  border-bottom-color: transparent;
}

/* La página en la que ya estás. */
.menu__panel a[aria-current="page"] {
  color: var(--ambar-osc);
}

/* «Verlo todo» va separado: lleva a la sección de la portada, no a una
   página de oficio. */
.menu__panel a.menu__panel-todo {
  margin-top: 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  color: var(--texto-2);
}
.menu__panel a.menu__panel-todo:hover {
  color: var(--texto);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78svh, 40rem);
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* El velo: sin él el titular no se lee sobre la pared clara del fondo. */
.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(14 31 61 / 0.92) 0%,
    rgb(14 31 61 / 0.72) 38%,
    rgb(14 31 61 / 0.35) 70%,
    rgb(14 31 61 / 0.25) 100%
  );
}

.hero__contenido {
  position: relative;
  padding-block: clamp(3rem, 9vw, 5.5rem);
  max-width: 46rem;
}

.hero h1 {
  font-size: clamp(2.25rem, 6.4vw, 4rem);
  font-weight: 800;
}

.hero__texto {
  margin-top: 1.25rem;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 2.1vw, 1.25rem);
  color: var(--sobre-tinta);
}

.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.hero__nota {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--sobre-tinta-2);
}

/* ── Por qué nosotros: los cuatro círculos ──────────────────────────────
   Misma receta que el hero —foto de fondo, velo encima, contenido en
   relative— porque el problema es el mismo: sin velo, el texto claro se
   pierde sobre las zonas claras de la foto. */

.razones {
  position: relative;
  overflow: hidden;
}

.razones__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Más opaco que el del hero, y a posta: aquí no hay una foto que enseñar,
   hay cuatro frases que leer. La foto es textura, no protagonista. Pero no
   tanto como para que no se vea: por debajo de 0.8 la letra gris de los pies
   empieza a pelearse con las zonas claras de la foto, y por encima de 0.88
   la foto desaparece y queda un rectángulo azul liso. */
.razones__velo {
  position: absolute;
  inset: 0;
  background: rgb(14 31 61 / 0.84);
}

.razones__contenido {
  position: relative;
}

.razones__lista {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
  /* Dos columnas en el móvil, cuatro a partir de 48rem. Los cuatro en fila
     en un teléfono darían círculos de 80px, que no admiten ni una palabra. */
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
  .razones__lista {
    grid-template-columns: repeat(4, 1fr);
  }
}

.razon {
  text-align: center;
}

/* El radio que manda. Se esconde de la vista pero NO del teclado: con
   `display:none` o `visibility:hidden` dejaría de ser enfocable y los cuatro
   círculos se volverían inalcanzables sin ratón. Con esto se recorren con
   las flechas, como cualquier grupo de radios. */
.razon__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El círculo. `aspect-ratio` lo mantiene redondo sin fijar altura, así que
   el texto puede crecer a dos o tres líneas sin romperlo. Blanco con texto
   tinta y no al revés: sobre el velo oscuro es donde más contrasta.

   Lleva un borde del mismo color que el fondo desde el principio, aunque no
   se vea. Si el borde apareciera solo al pulsarlo, el círculo crecería 2px
   en ese momento y los cuatro darían un salto. */
.razon__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 12.5rem;
  margin-inline: auto;
  aspect-ratio: 1;
  padding: 1.25rem;
  border: 2px solid rgb(255 255 255 / 0.94);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.94);
  color: var(--texto);
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
    color 0.18s ease;
}

/* Quien no esté pulsado se aclara un poco al pasar por encima, para que se
   note que los cuatro se pueden pulsar. */
.razon__radio:not(:checked) + .razon__circulo:hover {
  background: #fff;
  border-color: #fff;
}

/* El elegido: fondo transparente y el borde ámbar a la vista. No hace
   falta `:has()` para esto — el radio y su círculo son hermanos pegados.

   El ámbar es el color con el que esta web dice «esto es lo que importa
   ahora»: el botón de WhatsApp, los antetítulos, la marca del logotipo. Aquí
   hace lo mismo, y de paso el círculo elegido no se confunde ni un momento
   con los otros tres. */
.razon__radio:checked + .razon__circulo {
  background: transparent;
  border-color: var(--ambar);
  color: var(--papel);
}

/* El foco del teclado tiene que verse, y con el radio escondido hay que
   pintarlo sobre el círculo. `:focus-visible` y no `:focus` para que no
   salga el aro al pulsar con el ratón. */
.razon__radio:focus-visible + .razon__circulo {
  outline: 3px solid var(--ambar);
  outline-offset: 4px;
}

/* ── El texto de debajo ─────────────────────────────────────────────────
   `min-height` para que la sección no pegue un salto al cambiar de círculo:
   sin él, pasar de un texto de dos líneas a uno de tres empuja hacia abajo
   todo lo que viene después. */
.razones__textos {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  min-height: 5.5em;
  text-align: center;
}

.razon__texto {
  margin: 0 auto;
  max-width: 54ch;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--sobre-tinta);
}

/* Sin `:has()` se ven los cuatro textos, uno debajo de otro. Se pierde el
   efecto, no el contenido: la sección sigue diciendo lo mismo. Por eso el
   `display:none` vive DENTRO del @supports y no fuera — al revés, un
   navegador sin `:has()` se quedaría con los cuatro textos ocultos y un
   hueco en blanco. */
@supports selector(:has(*)) {
  .razon__texto {
    display: none;
  }
  .razones__caja:has(#razon-1:checked) .razon__texto--1,
  .razones__caja:has(#razon-2:checked) .razon__texto--2,
  .razones__caja:has(#razon-3:checked) .razon__texto--3,
  .razones__caja:has(#razon-4:checked) .razon__texto--4 {
    display: block;
  }
}

/* Quien tenga puesto «reducir movimiento» no quiere transiciones. */
@media (prefers-reduced-motion: reduce) {
  .razon__circulo {
    transition: none;
  }
}

/* ── Obras ─────────────────────────────────────────────────────────────── */

.obra__cabeza {
  max-width: 60ch;
}

.credito {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--ambar);
  font-size: 0.9375rem;
  color: var(--texto-2);
}

.galeria {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

.galeria--destacada {
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
  .galeria--destacada {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
  }
  /* La destacada se queda en dos: son las dos fotos que tienen que verse
     grandes. Sin esto, la regla de arriba se la lleva por delante y las cuatro
     salen del mismo tamaño. */
  .galeria--destacada,
  .obra-secundaria .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
}

.foto {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--fondo);
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.foto--ancha img {
  aspect-ratio: 16 / 10;
}

/* Una foto apaisada dentro de la rejilla ocupa la fila entera. Si no, el
   recorte a 3:4 se come medio encuadre y no se entiende qué se está viendo. */
.galeria .foto--ancha {
  grid-column: 1 / -1;
}

.foto figcaption {
  padding: 0.7rem 0.15rem 0;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.banda {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radio);
  overflow: hidden;
}
.banda img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: 50% 60%;
}

.obra-secundaria {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea);
}

.obra-secundaria .galeria {
  max-width: 34rem;
  grid-template-columns: repeat(2, 1fr);
}

/* ── Cómo trabajamos ───────────────────────────────────────────────────── */

.pasos {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

@media (min-width: 40rem) {
  .pasos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 62rem) {
  .pasos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.paso {
  counter-increment: paso;
  padding-top: 1.25rem;
  border-top: 2px solid rgb(255 255 255 / 0.18);
}

.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ambar);
}

.paso h3 {
  font-size: 1.1875rem;
  font-weight: 700;
}

.paso p {
  margin-top: 0.6rem;
  font-size: 1rem;
  color: var(--sobre-tinta-2);
}

/* ── Preguntas ─────────────────────────────────────────────────────────── */

.preguntas {
  max-width: 46rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea);
}

.pregunta {
  border-bottom: 1px solid var(--linea);
}

.pregunta summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  min-height: 3rem;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker {
  display: none;
}

/* El signo se dibuja con CSS: un icono menos que descargar. */
.pregunta summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.45rem;
  border-right: 2px solid var(--ambar-osc);
  border-bottom: 2px solid var(--ambar-osc);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.pregunta[open] summary::after {
  transform: rotate(-135deg);
}

.pregunta p {
  padding: 0 0 1.35rem;
  max-width: 62ch;
  color: var(--texto-2);
}

/* ── Contacto ──────────────────────────────────────────────────────────── */

.contacto {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 56rem) {
  .contacto {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }
}

.vias {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.telefono-directo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--papel);
}
.telefono-directo:hover {
  text-decoration: underline;
  text-decoration-color: var(--ambar);
  text-underline-offset: 4px;
}

.formulario {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3.5vw, 2rem);
  background: var(--papel);
  color: var(--texto);
  border-radius: var(--radio-l);
}

.campo {
  display: grid;
  gap: 0.4rem;
}

.campo label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.campo input,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--texto);
  font: inherit;
}
.campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.campo input:hover,
.campo textarea:hover {
  border-color: var(--texto-2);
}

.opcional {
  font-weight: 400;
  color: var(--texto-2);
}

/* La trampa antibot: una persona no la ve, un robot la rellena. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--texto-2);
}
.consentimiento input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.15rem 0 0;
  accent-color: var(--tinta);
}

.letra-pequena {
  font-size: 0.875rem;
  color: var(--texto-2);
}

/* ── Pie ───────────────────────────────────────────────────────────────── */

.pie {
  background: var(--tinta);
  color: var(--sobre-tinta-2);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
  /* Deja sitio a la barra fija del móvil. */
  padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + 4.75rem);
}

@media (min-width: 48rem) {
  .pie {
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  }
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
}

.pie a {
  color: var(--papel);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* ── Barra fija del móvil ──────────────────────────────────────────────── */

.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgb(14 31 61 / 0.97);
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.barra-movil .boton {
  min-height: 2.85rem;
  padding-inline: 0.75rem;
  font-size: 0.9375rem;
}

.barra-movil .boton--fantasma {
  color: var(--papel);
}

@media (min-width: 48rem) {
  .barra-movil {
    display: none;
  }
}

/* ── Páginas de texto legal ────────────────────────────────────────────── */

.texto-legal {
  max-width: 46rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.texto-legal h1 {
  font-size: clamp(1.85rem, 4.4vw, 2.5rem);
  font-weight: 800;
}

.texto-legal h2 {
  margin-top: 2.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.texto-legal p,
.texto-legal ul {
  margin-top: 1rem;
  color: var(--texto-2);
}

.texto-legal li {
  margin-top: 0.5rem;
}

.volver {
  display: inline-block;
  margin-top: 3rem;
  font-weight: 700;
  color: var(--ambar-osc);
}

/* ── Piezas menores ────────────────────────────────────────────────────── */

.titulo-menor {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
}

/* La banda de detalle va a sangre, sin margen ni radio. */
.banda--sangre {
  margin: 0;
  border-radius: 0;
}

.sobre-oscuro {
  color: var(--sobre-tinta-2);
}

.bloque-telefono {
  margin-top: 1.25rem;
}

.etiqueta-suelta {
  display: block;
  color: var(--sobre-tinta-2);
}

.boton--enviar {
  width: 100%;
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
.boton--enviar:hover {
  background: var(--tinta-2);
  border-color: var(--tinta-2);
}

.pie__nombre {
  font-weight: 700;
  color: var(--papel);
}

.pie__contacto {
  margin-top: 0.75rem;
}

.pie__credito {
  margin-top: 1.25rem;
}

/* ── Oficios: los trabajos que se hacen sueltos ────────────────────────── */

.oficios {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .oficios {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .oficios {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* El título de cada oficio es el enlace a su página. */
.oficio h3 a {
  text-decoration: none;
}
.oficio h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ambar);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.oficio__mas {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ambar-osc);
}

.oficio {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ambar);
}

.oficio h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.oficio p {
  margin-top: 0.7rem;
  font-size: 1rem;
  color: var(--texto-2);
}

/* Enlace de texto que sí tiene que verse como enlace. */
.enlace {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ambar);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.enlace:hover {
  text-decoration-color: currentColor;
}

/* ── Páginas de oficio ─────────────────────────────────────────────────── */

.portada-oficio {
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.portada-oficio h1 {
  font-size: clamp(1.9rem, 4.8vw, 3rem);
  font-weight: 800;
  max-width: 20ch;
}

.portada-oficio .entradilla {
  color: var(--sobre-tinta);
  max-width: 58ch;
}

.portada-oficio .boton {
  margin-top: 2rem;
}

.migas {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--sobre-tinta-2);
}
.migas a {
  color: var(--sobre-tinta-2);
}

.cuerpo-oficio {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 56rem) {
  .cuerpo-oficio {
    grid-template-columns: 0.85fr 1fr;
    align-items: start;
  }
  /* La foto acompaña mientras se lee la lista, que es larga. */
  .cuerpo-oficio > .foto {
    position: sticky;
    top: 6rem;
  }
}

.lista-trabajo {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.lista-trabajo li {
  position: relative;
  padding: 0 0 0 1.75rem;
  margin-top: 0.9rem;
  color: var(--texto-2);
}

.lista-trabajo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  background: var(--ambar);
}

.lista-trabajo strong {
  color: var(--texto);
}

.nota-lateral {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--fondo);
  border-left: 3px solid var(--ambar);
  border-radius: 0 var(--radio) var(--radio) 0;
  color: var(--texto-2);
}

/* Los párrafos van a margin 0 en toda la web, así que si la nota tiene más
   de uno hay que separarlos aquí. */
.nota-lateral p + p {
  margin-top: 0.8rem;
}

/* El enlace de dentro, en el ámbar ya medido para texto sobre fondo claro:
   sobre --fondo se queda en 4,92, que cumple. */
.nota-lateral a {
  color: var(--ambar-osc);
}

.cierre-oficio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ── Acceso a la zona de clientes ───────────────────────────────────────────
   Va fuera del menú a propósito. El menú entero está oculto por debajo de
   62rem, y este enlace lo usan los clientes con obra en marcha, que entran
   casi siempre desde el móvil. Ahí dentro no lo verían nunca. */

.acceso {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  /* La cabecera es --tinta, no blanca: este es el gris medido para ese fondo.
     Con --texto-2 se quedaba en 2,6 de contraste y no se leía. */
  color: var(--sobre-tinta-2);
}
.acceso:hover {
  color: var(--papel);
  background: rgb(255 255 255 / 0.08);
}
.acceso .icono {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* En el móvil la cabecera va justa: logotipo, este acceso y el botón de
   WhatsApp. Por eso el texto se va cayendo por tramos —primero el «Zona de»
   y luego el «clientes» entero— y abajo del todo queda solo el candado. El
   aria-label del enlace mantiene el nombre completo para quien no lo ve. */
.acceso__largo {
  display: none;
}
.acceso__txt {
  display: none;
}
@media (min-width: 20rem) {
  .acceso__txt {
    display: inline;
  }
}
@media (min-width: 23rem) {
  .acceso__largo {
    display: inline;
  }
}

/* Por debajo de 48rem sale la barra fija de abajo, que YA lleva WhatsApp y
   Llamar. El botón de WhatsApp de la cabecera ahí está repetido, y entre los
   dos no caben: se salían de la pantalla. Se esconde el repetido y el hueco
   se lo queda el acceso de clientes, que es lo único que no está en ningún
   otro sitio. WhatsApp sigue a un toque, abajo y más grande. */
@media (max-width: 47.99rem) {
  /* El :has() acota la regla a las cabeceras que llevan el acceso de
     clientes, que son las que tienen el problema: logotipo, acceso y botón,
     tres cosas en una pantalla estrecha.

     Hoy no cambia nada por sí mismo, y conviene saberlo antes de fiarse de
     él: las páginas con acceso son exactamente index y las cuatro de oficio,
     que son también las únicas con botón de WhatsApp en la cabecera y con
     barra fija abajo. En aviso-legal, privacidad y gracias la cabecera lleva
     SOLO el logotipo, así que ahí no hay ningún botón que esconder y la
     regla no las tocaría ni sin acotar.

     Se queda por lo que protege el día que cambie: si alguna vez entra un
     WhatsApp en una cabecera que no tenga barra fija abajo, sin este :has()
     desaparecería en el móvil y esa página se quedaría sin vía de contacto. */
  .cabecera__fila:has(.acceso) > .boton--principal {
    display: none;
  }
  .cabecera__fila:has(.acceso) {
    gap: 0.75rem;
  }
}

/* El tramo justo: de 62rem —donde reaparece el menú entero— a 68rem. Ahí
   están a la vez el logotipo, los cinco enlaces del menú, el acceso de
   clientes y el botón de WhatsApp, y con las separaciones de escritorio no
   caben: a 992px se salían 40px y a 1024px —el iPad en horizontal, que no es
   un ancho raro— 8px. Se salía el botón de WhatsApp por la derecha y la
   página entera se podía arrastrar de lado.

   Se aprietan las separaciones en vez de esconder nada. Las otras salidas
   eran peores: quitar el WhatsApp deja la cabecera sin su botón principal
   justo en tablet, y retrasar el menú a 68rem deja el iPad sin navegación.
   Por encima de 68rem sobra sitio y todo vuelve a su separación de siempre. */
@media (min-width: 62rem) and (max-width: 67.99rem) {
  .cabecera__fila:has(.acceso) {
    gap: 0.9rem;
  }
  .cabecera__fila:has(.acceso) .menu {
    gap: 1rem;
  }
}

/* ── El claim, sobre el titular del hero ───────────────────────────────── */

.hero__claim {
  margin-bottom: 0.85rem;
  font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
}
/* ── La zona de clientes, contada ───────────────────────────────────────── */

.portal__grande {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
}
.portal__grande img,
.portal__figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.9rem;
  /* Las capturas son de una interfaz oscura sobre una sección oscura: sin un
     borde claro se funden con el fondo y no se ve dónde empieza la pantalla. */
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.35);
}
.portal__grande figcaption,
.portal__figura figcaption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  color: var(--sobre-tinta-2);
}

.portal__rejilla {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 62rem) {
  .portal__rejilla {
    grid-template-columns: 1fr 22rem;
    align-items: start;
  }
}

.portal__puntos {
  display: grid;
  gap: 1.75rem;
}
.portal__punto h3 {
  font-size: 1.125rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}
.portal__punto p {
  max-width: 54ch;
  color: var(--sobre-tinta-2);
}

.portal__pie {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  color: var(--sobre-tinta-2);
}
.portal__pie .enlace {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--ambar);
  font-weight: 700;
}