/* ============================================================
   AR Arquitectura & Diseño — Páginas secundarias
   gracias.html · politica-de-datos.html · 404.html
   ============================================================ */

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.pagina main { flex: 1; }

.pagina__cabecera {
  padding: 28px 0;
  border-bottom: 1px solid var(--beige);
}
.pagina__cabecera .contenedor { display: flex; align-items: center; gap: 12px; }
.pagina__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.pagina__cabecera img { height: 24px; width: auto; }
.pagina__cabecera span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.pagina__cuerpo {
  padding-block: clamp(64px, 12vh, 130px);
  max-width: 760px;
}
.pagina__cuerpo h1 {
  font-weight: 300;
  font-size: var(--txt-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.pagina__cuerpo h2 {
  margin-top: 48px;
  font-size: 21px;
  font-weight: 500;
}
.pagina__cuerpo h3 {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 500;
}
.pagina__cuerpo p,
.pagina__cuerpo li {
  margin-top: 14px;
  font-size: 16.5px;
  color: var(--gris);
  max-width: var(--ancho-texto);
}
.pagina__cuerpo ul, .pagina__cuerpo ol { padding-left: 22px; }
/* Solo los enlaces DENTRO del texto van en verde. Antes esta regla
   también pisaba a los botones por especificidad, y el 'Volver al
   inicio' quedaba con texto verde sobre fondo negro: 3,52:1, por
   debajo del 4,5:1 que exige AA. */
.pagina__cuerpo a:not(.btn):not(.volver) { color: var(--verde-texto); }
.pagina__cuerpo strong { color: var(--negro); }
.pagina__cuerpo code {
  font-family: var(--fuente-mono);
  font-size: 0.92em;
  background: var(--crema-claro);
  border: 1px solid var(--beige);
  border-radius: 5px;
  padding: 1px 5px;
}

.pagina__acciones {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pagina__centrada { text-align: center; }
.pagina__centrada p { margin-inline: auto; }
.pagina__centrada .pagina__acciones { justify-content: center; }

.pagina__icono {
  width: 64px; height: 64px;
  border-radius: var(--radio-pill);
  background: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}

.aviso {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--beige-oscuro);
  background: var(--crema-claro);
}
.aviso p { margin-top: 0; }
.aviso p + p { margin-top: 10px; }

/* Pie reducido de las páginas secundarias. */
.pie__legal--simple { margin-top: 0; border-top: none; padding-top: 0; }

/* ---- Volver al inicio ----
   Arriba, antes del título. Heurística 3 de Nielsen: control y
   libertad del usuario. Quien entra solo a comprobar que la página
   existe tiene que poder salir sin recorrerla entera ni depender del
   botón del navegador. */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-bottom: 20px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--beige-oscuro);
  border-radius: var(--radio-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--negro);
  text-decoration: none;
  transition: background var(--dur-rapida) ease-out,
              border-color var(--dur-rapida) ease-out;
}
.volver:hover {
  background: var(--crema-claro);
  border-color: var(--negro);
  color: var(--negro);
}
.volver svg { flex: none; transition: transform var(--dur-rapida) var(--ease); }
.volver:hover svg { transform: translateX(-3px); }

/* Cuando la página lleva la navegación flotante, el contenido
   necesita despejar los ~90 px que ocupa. */
.pagina__cuerpo--nav { padding-top: clamp(120px, 16vh, 180px); }

/* Logo del proyecto en su ficha. Solo lo llevan Habitat 100 y
   HabitAR 55, que son los dos proyectos propios del estudio: la
   marca propia es justo lo que los distingue de los encargos. */
.tarjeta-proyecto__logo {
  /* El cuerpo de la ficha es un flex en columna: sin align-self la
     imagen se estira a todo el ancho y, con la altura fija, sale
     deformada. Esto era lo que aplastaba los dos logos. */
  align-self: flex-start;
  display: block;
  margin: 12px 0 2px;
  /* Se limita por ALTO y por ANCHO a la vez. Con solo alto, el de
     HabitAR 55 —que es 3,2:1— salía tres veces más grande que el de
     Habitat 100, que es casi cuadrado. Así pesan parecido. */
  width: auto;
  height: auto;
  max-height: 46px;
  max-width: 124px;
  opacity: 0.9;
}

/* La intervención va ARRIBA del nombre, no en la línea de datos.
   "Reforzamiento estructural · restauración" demuestra oficio;
   "3 pisos" solo describe. Es lo primero que debe leer quien está
   midiendo si sabemos lo que hacemos. */
.tarjeta-proyecto__intervencion {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--negro);
  line-height: 1.35;
  text-wrap: pretty;
}

/* ---- servicios.html ----
   Una sección por servicio, separadas por el mismo filo de 1 px que
   usa la portada: se lee como índice, no como muro de texto. */
.servicios-pagina .etiqueta { margin-top: 32px; }
.servicios-pagina h1 { margin-top: 14px; }
.servicios-pagina__grupo.servicios-pagina__grupo {
  margin-top: clamp(56px, 8vh, 88px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--beige-oscuro);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-texto);
}
.servicios-pagina section {
  padding-block: 26px;
  border-bottom: 1px solid var(--beige);
  scroll-margin-top: 96px;
}
.servicios-pagina section h3 {
  margin-top: 0;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--negro);
}
.servicios-pagina section p { margin-top: 10px; }
.servicios-pagina__resto { font-style: italic; }
.servicios-pagina .proyectos__mas { max-width: none; }

/* Conversión en servicios.html: quien llega aquí desde Google por un
   servicio concreto tiene que poder pedirlo sin volver a la portada. */
.pagina__cuerpo .servicios-pagina__hechos {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.pagina__cuerpo .servicios-pagina__hechos li { margin: 0; font-size: 15px; color: var(--gris); }
.servicios-pagina__hechos strong { color: var(--negro); font-weight: 500; }
.servicios-pagina__acciones {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.servicio__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-block: 6px;          /* objetivo táctil >= 24 px (WCAG 2.5.8) */
  font-size: 15px;
  font-weight: 500;
  color: var(--verde-texto);
  text-decoration: none;
}
.servicio__cta svg { transition: transform var(--dur-rapida) var(--ease); }
.servicio__cta:hover { color: var(--negro); }
.servicio__cta:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .servicio__cta svg { transition: none; } }