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

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

.seccion__cabecera {
  margin-bottom: var(--s-6);
}

.seccion__cabecera p {
  margin-top: var(--s-2);
  color: var(--texto-suave);
  font-size: 1.125rem;
}

/* Cabecera del sitio: fija y de alto constante; al compactarse solo cambian transformaciones */
.sitio-cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--alto-cabecera);
}

.sitio-cabecera + main {
  padding-top: var(--alto-cabecera);
}

.sitio-cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  border-bottom: 1px solid var(--linea);
  opacity: 0;
  transform-origin: top;
  transition: opacity var(--dur-corta), transform 300ms var(--ease-salida);
}

.sitio-cabecera.is-compacta::before {
  opacity: 1;
  transform: scaleY(0.8235); /* 56px de 68px */
}

.sitio-cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 100%;
  transition: transform 300ms var(--ease-salida);
}

.sitio-cabecera.is-compacta .sitio-cabecera__fila {
  transform: translateY(-6px);
}

/* Logo: isotipo + wordmark */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.logo img {
  filter: none;
}

.logo__iso {
  width: 70px;
  height: auto;
}

.logo__marca {
  width: 128px;
  height: auto;
}

/* Al compactarse, isotipo y wordmark se achican juntos desde la izquierda */
.sitio-cabecera .logo {
  transform-origin: left center;
  transition: transform 300ms var(--ease-salida);
}

.sitio-cabecera.is-compacta .logo {
  transform: scale(0.86);
}

.nav__toggle {
  display: none;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--texto);
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--texto);
  font: 600 var(--fs-sm) / 1 var(--font-texto);
  cursor: pointer;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  list-style: none;
}

.nav__lista a:not(.boton) {
  position: relative;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

/* Línea tostado bajo la sección visible */
.nav__lista a:not(.boton)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-salida);
}

.nav__lista a:not(.boton):hover::after,
.nav__lista a.is-activa::after {
  transform: scaleX(1);
}

@media (max-width: 1023px) {
  .js .nav__toggle {
    display: inline-block;
  }

  .js .nav__lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3) var(--gutter) var(--s-4);
    background: var(--bg);
    border-bottom: 1px solid var(--linea);
  }

  .js .nav__lista.is-open {
    display: flex;
  }

  /* Sin JS: el menú se muestra en una fila */
  html:not(.js) .nav__lista {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-1) var(--s-2);
  }

  html:not(.js) .nav__lista .boton,
  html:not(.js) .logo__marca {
    display: none;
  }
}

/* Separador: tres rosetas del pelaje entre dos líneas cortas */
.separador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding-block: var(--s-2);
  color: var(--acento);
}

.separador::before,
.separador::after {
  content: "";
  width: 4.5rem;
  height: 1px;
  background: var(--linea);
}

.rosetas {
  width: 64px;
  height: 20px;
}

/* Contenedor invisible de los símbolos SVG reutilizables */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Fondo de manchas tenues en secciones oscuras (parallax con --py) */
.con-manchas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.con-manchas::before {
  content: "";
  position: absolute;
  inset: -120px 0;
  z-index: -1;
  background: var(--manchas) 0 0 / 260px 260px repeat;
  opacity: 0.06;
  transform: translate3d(0, var(--py, 0px), 0);
  pointer-events: none;
}

/* Pie de página */
.sitio-pie {
  background: var(--bg-inverso);
  color: var(--texto-inverso);
  padding-block: var(--s-8) var(--s-4);
}

.sitio-pie__grilla {
  display: grid;
  gap: var(--s-4);
}

.sitio-pie .logo__marca {
  width: 200px;
}

.sitio-pie__linea {
  margin-top: var(--s-2);
  color: var(--texto-inverso-suave);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

.sitio-pie__firma {
  margin-top: var(--s-1);
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--acento);
}

.sitio-pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  list-style: none;
}

.sitio-pie__enlaces a {
  text-decoration: none;
}

.sitio-pie__enlaces a:hover {
  text-decoration: underline;
  text-decoration-color: var(--acento);
}

/* Wordmark gigante: contorno que se llena de color al llegar al final */
.pie-gigante {
  position: relative;
  max-width: none;
  margin: var(--s-8) 0 0;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 15.4vw;
  font-variation-settings: "opsz" 144;
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--acento);
  user-select: none;
}

.pie-gigante::after {
  content: attr(data-texto);
  position: absolute;
  inset: 0;
  color: var(--acento);
  -webkit-text-stroke: 0;
  clip-path: inset(0 0 0 0);
}

.anim .pie-gigante:not(.is-llena)::after {
  clip-path: inset(0 100% 0 0);
}

.pie-gigante::after {
  transition: clip-path var(--dur-larga) var(--ease-salida);
}

.sitio-pie__legal {
  max-width: none;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in srgb, var(--color-crema) 18%, transparent);
  color: var(--texto-inverso-suave);
  font-size: var(--fs-sm);
}

@media (min-width: 900px) {
  .seccion {
    padding-block: var(--s-12);
  }

  .sitio-pie__grilla {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* Secciones de apoyo, con menos aire arriba y abajo */
.seccion--corta {
  padding-block: var(--s-6);
}

@media (min-width: 900px) {
  .seccion--corta {
    padding-block: var(--s-8);
  }
}

/* Páginas interiores: migas arriba y la primera sección más pegada a ellas */
.pagina__migas {
  padding-top: var(--s-4);
}

.pagina__migas + .seccion {
  padding-top: var(--s-4);
}

/* Página actual en el menú */
.nav__lista a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Migas de pan de las páginas interiores */
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

.migas li + li::before {
  content: "/";
  margin-right: 0.4rem;
}