/* ==========================================================================
   LAYOUT — CONTENEDOR Y ESTRUCTURA BASE
   Los componentes de sección (.section, .section-header, grid) viven en
   components.css junto al resto del lenguaje visual de la dirección
   "Documental Ribereño" para mantenerlos en un único sitio.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* Texto vertical lateral (guiño editorial, solo escritorio grande) */
.side-text-left,
.side-text-right {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-family-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-light);
  writing-mode: vertical-rl;
  z-index: 10;
  pointer-events: none;
}

@media (min-width: 1440px) {
  .side-text-left {
    display: block;
    left: 1.25rem;
    transform: translateY(-50%) rotate(180deg);
  }

  .side-text-right {
    display: block;
    right: 1.25rem;
  }
}