/* ==========================================================================
   LAYOUT — contenedores, secciones, retículas y los dos motivos
   estructurales del sistema: la línea de cota y el chaflán a 45°.
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.contenedor-angosto {
  width: 100%;
  max-width: calc(var(--ancho-texto) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion {
  padding-block: var(--seccion-y);
  background-color: var(--lienzo);
  color: var(--texto);
}

.seccion-ancha { padding-block: var(--seccion-y-ancha); }
.seccion-ajustada { padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem); }

/* Más aire encima de un encabezado que debajo. */
.cabecera-seccion { margin-bottom: var(--e-8); }
.cabecera-seccion > .display-2 + .guia,
.cabecera-seccion > .display-1 + .guia { margin-top: var(--e-4); }

/* ------------------------------------------------------- LÍNEA DE COTA
   Anotación de plano: trazo con marcas en los extremos y una medida real
   en el centro. Hace de límite entre secciones; nunca de antetítulo. */

.cota-linea {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.8vw, 1.5rem);
  width: 100%;
}

/* Cada tramo de trazo es un elemento propio, así una misma cota puede
   llevar una, dos o tres medidas sin cambiar de componente. */
.cota-linea__trazo {
  flex: 1 1 0;
  min-width: 14px;
  height: 7px;
  color: var(--borde-fuerte);
  background: linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat;
}

/* Marcas verticales sólo en los extremos, como en un plano acotado */
.cota-linea__trazo[data-marca='izq'] {
  background:
    linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 1px 7px no-repeat;
}
.cota-linea__trazo[data-marca='der'] {
  background:
    linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) right center / 1px 7px no-repeat;
}

.cota-linea > .cota {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}

.cota-linea em {
  font-style: normal;
  color: var(--acento-texto);
}

/* Bajo 560 px la cota pierde los tramos interiores y se apila */
@media (max-width: 639px) {
  .cota-linea > .cota { font-size: 0.625rem; letter-spacing: 0.12em; }
  .cota-linea__trazo { min-width: 10px; }
  /* La tercera medida se retira antes de que la línea se parta. */
  .cota-linea > .cota:nth-of-type(3),
  .cota-linea > .cota:nth-of-type(3) + .cota-linea__trazo:not([data-marca]) { display: none; }
}
@media (max-width: 380px) {
  .cota-linea > .cota:nth-of-type(2) { display: none; }
  /* Con una sola medida sobran todos los tramos interiores. */
  .cota-linea__trazo:not([data-marca]) { display: none; }
}

/* Variante corta, alineada a la izquierda, para abrir un bloque */
.cota-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  line-height: 1;
}
.cota-marca::before {
  content: '';
  width: clamp(28px, 5vw, 56px);
  height: 7px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 1px 7px no-repeat;
  color: var(--acento);
}

/* ------------------------------------------------------ FRANJA DE RIESGO
   Rayado diagonal de señalética. Una sola vez por página, como remate
   de un borde real, nunca como relleno. */

.franja-riesgo {
  height: 8px;
  width: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--naranja-600) 0 10px,
    var(--gris-900) 10px 20px
  );
}

/* --------------------------------------------------------------- CHAFLÁN
   El corte a 45° del anillo del logotipo, llevado a las esquinas de
   imágenes y bloques. */

.chaflan {
  clip-path: polygon(
    0 0,
    calc(100% - var(--chaflan)) 0,
    100% var(--chaflan),
    100% 100%,
    var(--chaflan) 100%,
    0 calc(100% - var(--chaflan))
  );
}

.chaflan-sup-der {
  clip-path: polygon(
    0 0,
    calc(100% - var(--chaflan)) 0,
    100% var(--chaflan),
    100% 100%,
    0 100%
  );
}

.chaflan-inf-izq {
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    var(--chaflan) 100%,
    0 calc(100% - var(--chaflan))
  );
}

/* ----------------------------------------------------------- RETÍCULAS */

.rejilla { display: grid; gap: var(--e-6); }

/* Partición asimétrica: la columna de contenido pesa más que la de apoyo. */
.particion {
  display: grid;
  gap: clamp(var(--e-6), 4vw, var(--e-9));
  align-items: start;
}

@media (min-width: 900px) {
  .particion            { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .particion-invertida  { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .particion-indice     { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.pegajoso {
  position: sticky;
  top: calc(var(--barra-h) + var(--e-6));
}

@media (max-width: 899px) {
  .pegajoso { position: static; }
}

/* Separador de hilo */
.hilo {
  height: 1px;
  border: 0;
  background: var(--borde);
  margin: 0;
}

/* Pila vertical con ritmo */
.pila > * + * { margin-top: var(--e-4); }
.pila-amplia > * + * { margin-top: var(--e-6); }