/* ==========================================================================
   ADINCO · paginas.css
   Páginas internas: administración de condominios, aviso de privacidad y 404.
   Se carga después de estilos.css y solo usa sus tokens.
   ========================================================================== */

/* Menú: página actual */
.menu__lista a[aria-current="page"] { font-weight: 640; }
@media (min-width: 1024px) {
  .menu__lista a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Migas */
.migas { margin-bottom: var(--s-6); font-size: .9rem; }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); }
.migas li { display: inline-flex; align-items: center; color: var(--tinta-2); }
.migas li + li::before { content: "/"; margin-right: var(--s-2); color: var(--pizarra); }
.migas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brasa-texto);
  text-underline-offset: 4px;
  font-weight: 560;
}
.migas a:hover { text-decoration-thickness: 2.5px; }
.migas [aria-current="page"] { min-height: 44px; }

/* A1. Hero de condominios: texto y foto en dos columnas, sin la firma */
.cond-hero { padding-top: clamp(1rem, 2vw, 1.5rem); }
.cond-hero__rejilla { display: grid; gap: var(--s-7); }
.cond-hero__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-bloque);
}
@media (min-width: 1024px) {
  .cond-hero__rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;
  }
  .cond-hero__texto { grid-column: 1 / span 6; }
  .cond-hero__foto { grid-column: 7 / span 6; }
}

/* A2. Lista en dos columnas con divisores */
.cond-lista { display: grid; gap: var(--s-6) 24px; }
.cond-lista__item { padding-top: var(--s-5); border-top: 1px solid var(--tinta); }
.cond-lista__item p { margin-top: var(--s-3); color: var(--tinta-2); max-width: 52ch; }
@media (min-width: 760px) {
  .cond-lista { grid-template-columns: 1fr 1fr; gap: var(--s-7) 48px; }
}

/* A3. Banda oscura con foto */
.cond-dif__rejilla { display: grid; gap: var(--s-7); align-items: center; }
.cond-dif__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--r-bloque);
}
.cond-dif__texto p { margin-top: var(--s-5); color: var(--sobre-oscuro-2); }
.cond-puntos { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.cond-puntos li { display: flex; align-items: flex-start; gap: 12px; color: var(--sobre-oscuro); font-weight: 520; }
.cond-puntos .ico { margin-top: .15em; color: var(--brasa); }
@media (min-width: 760px) {
  .cond-dif__foto { max-width: 480px; }
}
@media (min-width: 1024px) {
  .cond-dif__rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .cond-dif__foto { grid-column: 1 / span 4; max-width: none; }
  .cond-dif__foto img { aspect-ratio: 4 / 5; object-position: center; }
  .cond-dif__texto { grid-column: 6 / span 7; }
}

/* A4. Riel de 4 pasos */
@media (min-width: 1024px) {
  .riel--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
}

/* A5. Foto de apoyo */
.cond-apoyo { background: var(--papel); padding-bottom: var(--seccion); }
.cond-apoyo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 460px;
  object-fit: cover;
  object-position: center 55%;
  border-radius: var(--r-bloque);
}
.cond-apoyo figcaption { margin-top: var(--s-3); font-size: .9rem; color: var(--tinta-2); }

/* A6. Título del FAQ más largo que el de la landing */
.faq__titulo h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }

/* Aviso de privacidad */
.prosa__fecha { margin-bottom: var(--s-6); color: var(--tinta-2); font-size: .95rem; }
.prosa h1 { font-size: clamp(2rem, 4vw, 3rem); }
.prosa h2 { margin-top: var(--s-7); }
.prosa mark {
  padding: 0 .08em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sol) 45%, var(--blanco));
  color: var(--tinta);
}
.prosa li::marker { color: var(--pizarra); }

/* 404 */
.error404 { display: flex; align-items: center; min-height: 60vh; padding-block: var(--s-8); }
.error404__in .lead { margin-top: var(--s-5); max-width: 46ch; color: var(--tinta-2); }
.error404__in .hero__botones { margin-top: var(--s-6); }
@media (min-width: 560px) {
  .error404__in .hero__botones { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .error404 { min-height: 64vh; }
}