@font-face {
  font-family: Nunito;
  src: url("/assets/nunito-wght-d8e80c62.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* || Variables de tema. */
:root, :host {
  --width-xs: 480px;
  --width-sm: 640px;
  --width-smd: 800px;
  --width-md: 960px;
  --width-lg: 1200px;
  --width-xl: 1600px;
  --font-default: "Nunito", "sans-seriff";
  --size-base: 18px;
  --spacing: 0.25rem;
  --leading-base: 1.125;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-gray: #ECEEF0;
  --color-gray2: #999999;
  --color-strong: #621238;
  --color-medium: #79114B;
  --color-light: #8C526E;
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --radius-md: 8px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-rounded: calc(infinity * 1px);
  --transition-default-color: color 0.3s linear;
  --transition-default-background-color: background-color 0.3s linear;
  --transition-default-border-color: border-color 0.3s linear;
  --transition-default-outline-color: outline-color 0.3s linear;
  --transition-default-decoration-color: text-decoration-color 0.3s linear;
  --transition-default-opacity: opacity 0.3s linear;
  --transition-default: var(--transition-default-color), var(--transition-default-background-color), var(--transition-default-border-color), var(--transition-default-decoration-color), var(--transition-default-opacity);
}

/* || Estilos base. */

::selection {
  background-color: var(--color-strong);
  color: var(--color-white);
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
  border-color: var(--color-border, transparent);
  border-width: 0;
  border-style: solid;
  transition: var(--transition-default);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
::after,
::before,
::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  color: inherit;
}

:host, html {
  line-height: var(--leading-base);
  font-size: var(--size-base);
  font-family: var(--font-default);
  tab-size: 4;
  color: var(--color-negro);
}

html {
  scroll-behavior: smooth;
}

*:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 4px;
}

a {
  text-decoration-color: transparent;

  &:focus-visible {
    outline-color: var(--outline-color, var(--color-strong));
  }
}

summary {
  display: flex;
  cursor: pointer;
}

img {
  height: auto;
}

button, input[type="submit"] {
  cursor: pointer;
  font: inherit;
  background-color: transparent;

  &:disabled {
    cursor: not-allowed;
  }
}

code {
  border-radius: calc(var(--spacing) * 1.5);
  padding-inline: var(--spacing);
  padding-block: calc(var(--spacing) * 0.5);

  &:where(.dark, .dark *) {
    background-color: var(--color-dark-colmex4);
    color: var(--color-black);
  }
}

blockquote {
  position: relative;
  padding-left: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);

  &::before {
    content: "";
    top: 0;
    left:0;
    bottom: 0;
    position: absolute;
    height: 100%;
    width: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
  }
}

hr {
  height: 1px;
  border-radius: calc(var(--spacing) * 1.5);
  background-color: var(--color-gris1);
  margin-block: calc(var(--spacing) * 4);
}

figure {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 4);

  & > img {
    max-width: 100%;
  }
}

input, textarea {
  background-color: inherit;
  font: inherit;
}

ul {
  list-style-type: var(--list-style, disc);
}

ol {
  list-style-type: var(--list-style, decimal);
}

ul[role="menubar"] {
  list-style-type: none;
  /*display: flex;

  &[aria-orientation="vertical"] {
    flex-direction: column;
  }*/
}

ul[role="menu"] {
  list-style-type: none;
  /*display: flex;*/
}

a[role="menuitem"] {
  /*display: block;*/
}

:where(p, ul, ol):not(:last-child) {
  margin-block-end: var(--margin-bottom, calc(var(--spacing) * 4));
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after,
  ::backdrop {
    transition: none !important;
    animation: none !important;
  }
}

/* || Estilos de componentes. */
.icon-svg {
  width: 1em;
  color: inherit;
  display: inline;
}

.body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
  anchor-name: --body;

  @media (max-width: 1200px) {
    &:has(.menu-movil--contenedor[open]) {
      overflow: hidden;
    }
  }
}

/* || Encabezado. */

.header {
  padding-inline: calc(var(--spacing) * 6);
  padding-block-start: calc(var(--spacing) * 8);
  background-color: var(--color-gray);
}

.header--contenedor {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  max-width: var(--width-xl);
  width: 100%;
}

.menu--contenedor-boton {
  display: flex;
  column-gap: calc(var(--spacing) * 6);
  align-items: safe center;
  justify-content: safe center;
  position: relative;
  
  @media (max-width: 580px) {
    justify-content: space-between;
    row-gap: calc(var(--spacing) * 6);
    width: 100%;
  }

  @media (min-width: 1200px) {
    justify-content: safe center;
    margin-block-end: calc(var(--spacing) * 8);
  }
}

.menu-movil--contenedor {
  position: absolute;
  left: 0;
  top: calc(50% - 1.25rem);
  display: block;
  z-index: 10;

  @media (max-width: 580px) {
    position: static;
  }

  @media (min-width: 1200px) {
    display: none;
  }

  &[open] {
    position: fixed;
    top: 0;
    background-color: var(--color-medium);
    border-bottom-left-radius: var(--radius-2xl);
    border-bottom-right-radius: var(--radius-2xl);
  }
  
  &[open]::before {
    position: fixed;
    content: "";
    width: 100dvw;
    height: 100dvh;
    background-color: rgb(from var(--color-black) r g b / 0.4);
    top: 0px;
    left: 0px;
  }
}

.menu-movil {
  background-color: var(--color-strong);
  padding-block: calc(var(--spacing) * 6);
  color: var(--color-white);
  /*padding-inline-start: calc(var(--spacing) * 4);
  padding-inline-end: calc(var(--spacing) * 8);*/
  list-style-type: none;
  /*max-width: min(calc(100dvw - 6rem), 690px);*/
  max-width: 100dvw;
  width: 100dvw;
  /*position: absolute;*/
  position: relative;
  /*top: calc(100% + 1.5rem);*/
  /*left: -1.5rem;*/
  /*border-top-right-radius: var(--radius-2xl);*/
  border-bottom-right-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
  box-shadow: 3px 3px 3px -3px rgb(from var(--color-black) r g b / 0.75); /* 3 3 9 ... */
  max-height: calc(100dvh - 7rem);
  min-height: 250px;
  overflow-y: auto;

  &:where([open] *)::before {
    position: fixed;
    content: "";
    width: 100dvw;
    height: 4rem;
    background-color: var(--color-strong);
    top: 0px;
    left: 0px;
  }  
}

.menu-movil--opcion {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2.5);
  color: var(--color-white);
  position: relative;
  height: 100%;
  display: flex;
  align-items: safe center;
  justify-content: safe start; /* space-between */
  column-gap: calc(var(--spacing) * 1.25);

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-medium);
    }
  }

  &:focus-visible {
    outline-color: var(--color-white);
    outline-offset: -7px;
    outline-style: dashed;
  }
  
  &:where(.menu-movil--seccion[open] *) {
    background-color: var(--color-medium);
  }
}

.menu-movil--opcion-leyenda {
  line-height: 1.125;
  font-size: 1.375rem;
  font-weight: 600;
  /*flex-grow: 1;*/
  flex-shrink: 1;
}

.menu-movil--opcion-icono {
  font-size: 1.375rem;
  flex-shrink: 0;
}

.menu-movil--desbordable {
  list-style-type: none;
  font-size: 1.1875rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
}

.menu-movil--opcion-desbordable {
  padding-inline-start: calc(var(--spacing) * 10);
  padding-block: calc(var(--spacing) * 2);
  width: 100%;
  display: block;
  
  @media (hover: hover) {
    &:hover {
      background-color: var(--color-light);
    }
  }
  
  &:focus-visible {
    outline-color: var(--color-white);
    outline-offset: -4px;
  }
}

.header--logo {
  /*width: auto;*/
  /*max-width: calc(100% - 12rem);*/
  /*height: auto;
  max-height: 8rem;*/
  width: 12rem;
  max-width: 100%;
  /*max-width: 90%;*/

  @media (max-width: 580px) {
    width: 8rem;
  }
}

.menu--boton {
  flex-shrink: 0;
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  @media (hover: hover) {
    &:hover {
      color: var(--color-medium);
    }
  }

  &:focus-visible {
    outline-color: var(--color-strong);
  }

  &:where(.menu-movil--contenedor[open] *) {
    /*color: var(--color-medium);
    background-color: var(--color-gray);*/
    color: var(--color-white);
    background-color: var(--color-strong);
    width: max-content;
    margin-inline-start: auto;
    margin-inline-end: calc(var(--spacing) * 2);
    margin-block-start: calc(var(--spacing) * 2);
    z-index: 1;
  }
}

.menu--boton--display {
  display: block;

  &:where(.menu-movil--contenedor[open] *) {
    display: none;
  }
}

.menu--boton--cerrar {
  display: none;

  &:where(.menu-movil--contenedor[open] *) {
    display: block;
  }
}

.menu-principal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
  z-index: 10;
  column-gap: calc(var(--spacing) * 0.5);
  background-color: var(--color-white);
  border-radius: var(--radius-rounded);

  @media (max-width: 1200px) {
    display: none;
  }
}

.menu--opcion-contenedor {
  position: relative;

  &:has([aria-haspopup="menu"])::before {
    content: " ";
    opacity: 0;
    background-color: var(--color-light);
  }

  @media (hover: hover) {
    &:hover::before {
      width: 100%;
      height: 50%;
      background-color: var(--color-light);
      display: block;
      position: absolute;
      top: 50%;
      left: 0px;
      opacity: 1;
    }
  }
}

.menu--opcion {
  background-color: var(--color-strong);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2.5);
  color: var(--color-white);
  position: relative;
  height: 100%;
  display: flex;
  align-items: safe center;
  justify-content: space-between;

  &:is(:where(.menu-principal > li):first-of-type *) {
    border-top-left-radius: var(--radius-rounded);
    border-bottom-left-radius: var(--radius-rounded);
  }

  &:is(:where(.menu-principal > li):last-of-type *) {
    border-top-right-radius: var(--radius-rounded);
    border-bottom-right-radius: var(--radius-rounded);
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-medium);
      z-index: 10;
    }
  }

  &:focus-visible {
    outline-color: var(--color-white);
    outline-offset: -7px;
    outline-style: dashed;
  }
}

.menu--opcion-leyenda {
  text-align: center;
  line-height: 1.125;
  font-size: 1.125rem;
  font-weight: 700;
  flex-grow: 1;
  flex-shrink: 1;
}

.menu--opcion-icono {
  flex-shrink: 0;
}

.menu--desbordable {
  position: absolute;
  top: 100%;
  left: 0px;
  height: 1px;
  width: 1px;
  clip-path: inset(50%);
  opacity: 0;
  margin: 0px;
  overflow: hidden;
  background-color: var(--color-light);
  color: var(--color-white);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 3);
  font-weight: 500;
  font-size: 1.125rem;

  @media (hover: hover) {
    &:where(.menu--opcion-contenedor:hover *) {
      opacity: 1;
      width: 100%;
      height: auto;
      clip-path: unset;
      overflow: initial;
    }
  }
}

.menu--desbordable--opcion {
  display: flex;
  column-gap: calc(var(--spacing) * 2);
  align-items: safe center;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-medium);
    }
  }
}

.menu--desbordable--opcion {
  display:
}

.main {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: var(--color-gray);
  padding-inline: calc(var(--spacing) * 6);
}

/* || Pie de página. */

.footer--cinta {
  background-color: var(--color-gray);
  position: relative;
  border-bottom-width: 2px;
  border-color: var(--color-medium);
  border-style: solid;

  @media (max-width: 640px) {
    border-bottom-width: 1px;
  }

  /*&::before {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background-color: var(--color-strong);
  }*/
}

.footer--cinta--imagen {
  width: 100%;
  max-width: var(--width-lg);
  display: block;
  margin-inline: auto;
  position: relative;
}

.footer {
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 12);
  flex-shrink: 0;
  flex-grow: 0;
}

.footer--contenedor {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 4);
  align-items: safe center;
  justify-content: center;
  max-width: var(--width-lg);
  width: 100%;
}

.footer--logo {
  width: 450px;
  max-width: calc(100% - 6rem);
}

.footer--parrafo {
  /*text-transform: uppercase;*/
  letter-spacing: 1px;
  text-align: center;
}

.footer--contenedor-redes {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(var(--spacing) * 2);
  color: var(--color-gray2);
  list-style-type: none;
  font-size: 1.25rem;
}

.footer--red {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;

  @media (hover: hover) {
    &:hover{
      color: var(--color-medium);
    }
  }

  &:focus-visible {
    color: var(--color-medium);
    outline-color: var(--color-medium);
  }
}

/* || Clases en página inicial. */

.contenedor {
  container-type: inline-size;
  width: 100%;
  max-width: var(--width-lg);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 12);
}

/* || Sección de anuncios (index). */
.parrafo-bienvenida {
  font-size: 1.125rem;
  font-weight: 500;
}

.index--anuncios {
  display: grid;
  container-type: inline-size;
  width: 100%;
  column-gap: calc(var(--spacing) * 6);
  row-gap: calc(var(--spacing) * 4);
  grid-auto-rows: auto;
  grid-template-columns: 1fr;

  @container (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.index--anuncio {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 7);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: safe start;
  row-gap: calc(var(--spacing) * 5);
}

.index--anuncio-titulo {
  display: flex;
  justify-content: safe start;
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
}

.index--anuncio-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--aspect-square);
  color: var(--color-gray2);
  font-size: 2.5rem;
}

.index--anuncio-titulo-leyenda {
  background-color: var(--color-medium);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-rounded);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 500;
}

.index--anuncio-contenido {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.index--anuncio-fecha {
  color: var(--color-gray2);
  display: flex;
  column-gap: calc(var(--spacing) * 3);
  align-items: center;
  font-weight: 600;
}

.index--anuncio-fecha--icono {
  font-size: 1.25rem;
}

/* Sección de enlaces rápidos (index). */

.index--enlaces {
  display: flex;
  column-gap: calc(var(--spacing) * 6);
  row-gap: calc(var(--spacing) * 4);
  align-items: safe start;
  justify-content: start;
  flex-wrap: wrap;
  list-style-type: none;
}

.index--enlace {
  background-color: var(--color-white);
  border-radius: var(--radius-rounded);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  justify-content: start;
  column-gap: calc(var(--spacing) * 4);.
  max-width: 100%;

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-medium);
      color: var(--color-white);
    }
  }

  &:focus-visible {
    outline-color: var(--color-strong);
    outline-width: 4px;
  }
}

.index--enlace-icono {
  aspect-ratio: var(--aspect-square);
  background-color: var(--color-strong);
  border-radius: var(--radius-rounded);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.125rem;
  padding-inline: calc(var(--spacing) * 2);

  &:where(.index--enlace:hover *) {
    background-color: var(--color-white);
    color: var(--color-strong);
  }
}

.index--enlace-leyenda {
  padding-inline-end: calc(var(--spacing) * 6);
  font-weight: 500;
}

/* || Sección de servicios (index). */

.index--servicios {
  display: grid;
  grid-template-columns: repeat(var(--cols-servicios, 1), 1fr);
  column-gap: calc(var(--spacing) * 6);
  row-gap: calc(var(--spacing) * 4);
  grid-auto-rows: auto;

  @container (min-width: 640px) {
    --cols-servicios: 2;
  }

  @container (min-width: 960px) {
    --cols-servicios: 3;
  }
}

.index--servicio {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 7);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: safe start;
  column-gap: calc(var(--spacing) * 5);
}

.index--servicio-icono {
  aspect-ratio: var(--aspect-square);
  background-color: var(--color-servicio, var(--color-strong));
  border-radius: var(--radius-rounded);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 2.25rem;
  padding-inline: calc(var(--spacing) * 3);

  &:where(.index--servicio:nth-child(3n + 1) *) {
    --color-servicio: var(--color-strong);
  }

  &:where(.index--servicio:nth-child(3n + 2) *) {
    --color-servicio: var(--color-medium);
  }

  &:where(.index--servicio:nth-child(3n) *) {
    --color-servicio: var(--color-light);
  }
}

.index--servicio-contenido {
  display: flex;
  flex-direction: column;
  align-items: safe start;
  flex-grow: 1;
}

.index--servicio-titulo {
  font-weight: 500;
  font-size: 1.125rem;
  margin-block-end: calc(var(--spacing) * 2);
}

.index--servicio-listado {
  color: var(--color-gray2);
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: safe start;
}

.contenedor-comentarios {
  container-type: inline-size;
  width: 100%;
  max-width: var(--width-lg);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 2);
  padding-block-end: calc(var(--spacing) * 12);
}

.contenedor-ccc {
  width: 100%;
  position: relative;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  width: calc(100% + calc(var(--spacing) * 12));
  overflow: hidden;
  margin-inline: calc(var(--spacing) * -6);
  container-type: inline-size;
}

.banner-ccc {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  top: 0;
  left: 0;
}

.caja-ccc {
  margin-inline: auto;
  max-width: var(--width-lg);
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 6);
  position: relative;
  z-index: 1;

  @container (min-width: 640px) {
    flex-direction: row;
    column-gap: calc(var(--spacing) * 6);
    align-items: safe start;
  }
}

.logo-ccc {
  width: 450px;
  max-width: 100%;
}

.info-ccc {
  color: var(--color-white);
  line-height: 1.25;
}

/* || Actividades deportivas. */

.deportivas--actividades-contenedor {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  column-gap: calc(var(--spacing) * 6);
  row-gap: calc(var(--spacing) * 4);
  grid-auto-rows: auto;

  @container (min-width: 640px) {
    --cols: 2;
  }

  @container (min-width: 960px) {
    --cols: 3;
  }
}

.deportiva--actividad {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 7);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: safe start;
  row-gap: calc(var(--spacing) * 5);
}

.deportiva--actividad-titulo {
  display: flex;
  justify-content: safe start;
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
}

.deportiva--actividad-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--aspect-square);
  color: var(--color-gray2);
  font-size: 2.5rem;
}

.deportiva--actividad-titulo-leyenda {
  background-color: var(--color-medium);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-rounded);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 500;
}

.deportiva--actividad-contenido {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.deportiva--actividad-lista {
  color: var(--color-gray2);
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 2);
  align-items: safe start;
  font-weight: 600;
  list-style-type: none;

  > li {
    display: flex;
    column-gap: calc(var(--spacing) * 2);
    align-items: safe center;
  }
}

.deportiva--actividad-lista--icono {
  font-size: 1.5rem;
}

/* || Contacto con los centros. */

.centro--responsable-fila {
  display: flex;
  align-items: safe start;
  justify-content: space-between;
  column-gap: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8);
  container-type: inline-size;
  line-height: 1.125;

  &:first-child {
    padding-block-start: calc(var(--spacing) * 2);
  }

  &:last-child {
    padding-block-end: calc(var(--spacing) * 2);
  }

  &:not(:last-child) {
    border-bottom-color: var(--color-gray2);
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  @container (max-width: 960px) {
    flex-direction: column;
    row-gap: calc(var(--spacing) * 12);
  }
}
.centro--responsable {
  display: flex;
  width: 100%;
  align-items: safe start;
  column-gap: calc(var(--spacing) * 6);

  @container (max-width: 460px) {
    flex-direction: column;
    row-gap: calc(var(--spacing) * 3);
  }
}

.centro--responsable--foto {
  display: block;
  aspect-ratio: var(--aspect-square);
  flex-shrink: 0;
  width: 7rem;
  border-radius: var(--radius-rounded);
}

/* || Áreas de apoyo. */

.apoyo--contenedor {
  /*display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  grid-auto-rows: auto;*/
  column-gap: calc(var(--spacing) * 6);
  row-gap: calc(var(--spacing) * 4);
  container-type: inline-size;
  width: 100%;
  columns: var(--cols, 1);

  @container (min-width: 640px) {
    --cols: 2;
  }
  
  @container (min-width: 960px) {
    --cols: 3;
  }
}

.apoyo--tarjeta {
  display: flex;
  flex-direction: column;
  break-inside: avoid;

  /*&:not(:last-child) {*/
    margin-block-end: calc(var(--spacing) * 6);
  /*}*/
}

.apoyo--tarjeta--encabezado {
  background-color: var(--bg-color, var(--color-strong));
  display: flex;
  justify-content: safe center;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.25rem;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  text-align: center;

  &:where(.apoyo--tarjeta:nth-child(3n + 1) *) {
    --bg-color: var(--color-medium);
  }

  &:where(.apoyo--tarjeta:nth-child(3n + 2) *) {
    --bg-color: var(--color-light);
  }

  &:where(.apoyo--tarjeta:nth-child(3n) *) {
    --bg-color: var(--color-strong);
  }
}

.apoyo--tarjeta--cuerpo {
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  border-bottom-left-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
}

.apoyo--tarjeta--lista {
  list-style-type: none;
  break-inside: avoid;

  &:has(+ .apoyo--tarjeta--lista) {
    padding-bottom: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
    border-bottom-width: 1px;
    border-style: solid;
    border-color: var(--color-gray2);
  }
}

.apoyo--tarjeta--lista-item {
  display: flex;
  align-items: safe center;
  justify-content: safe start;
  /*display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;*/
  column-gap: calc(var(--spacing) * 2);

  &:not(:last-child) {
    margin-block-end: calc(var(--spacing) * 1.25);
  }
}

.apoyo--tarjeta--lista-icono {
  font-size: 1.5rem;
  color: var(--color-gray2);
  flex-shrink: 0;
}

.servicio--bdcv--bibliografos {
  margin-inline: auto;
  display: block;
  max-width: 650px;
  width: 100%;
}

/* || Autenticación estudiantes. */
.login--formulario {
  margin-inline: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding-block: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 6);
  margin-block: calc(var(--spacing) * 6);
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 4);
  width: 95%;
  max-width: var(--width-sm);
}

.login--campo--contenedor {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 1.25);
  width: 100%;
}

.login--etiqueta {
  font-weight: 500;
  font-size: 1.125;
}

.login--formulario--campo {
  border-width: 1px;
  border-color: var(--color-medium);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);

  &:focus {
    border-color: var(--color-strong);
    outline-color: var(--color-strong);
    outline-style: dashed;
  }
}

.login--submit {
  align-self: safe end;
  width: max-content;
}

/* || Componentes generales. */

.titulo {
  font-weight: 600;
  font-size: 1.375rem;
  margin-block-end: var(--margin-bottom, calc(var(--spacing) * 4));
  line-height: var(--leading, var(--leading-base));
}

.subtitulo {
  font-weight: 500;
  font-size: 1.25rem;
  margin-block-end: calc(var(--spacing) * 3);
}

.boton {
  text-align: center;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-white);
  background-color: var(--color-strong);
  font-weight: 700;
  border-radius: var(--radius-rounded);
  display: inline-block;

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-medium);
    }
  }

  &:focus-visible {
    outline-color: var(--color-strong);
    outline-offset: 4px;
  }
}

.boton-ccc {
  background-color: transparent;
  border-radius: 0;
  border-color: var(--color-white);
  border-width: 1px;

  @media (hover: hover) {
    &:hover {
      color: var(--color-black);
      background-color: var(--color-white);
    }
  }
}

.boton--arriba--contenedor {
  position: absolute;
  container-type: size;
  height: max(0px, calc(100% - 150dvh));
  right: 2rem;
  top: 0px;
  bottom: 0px;
  width: 8rem;
  margin-block-start: 150dvh;
}

.boton--arriba {
  position: sticky;
  top: calc(100% - 3rem);
  pointer-events: auto;
  text-align: center;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-white);
  background-color: var(--color-strong);
  font-weight: 700;
  border-radius: var(--radius-rounded);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(var(--spacing) * 1.125);
  opacity: 0.6;

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-medium);
      opacity: 1;
    }
  }

  &:focus-visible {
    outline-color: var(--color-strong);
    outline-offset: 4px;
    opacity: 1;
  }
  
  @container (max-height: 5rem) {
    display: none;
  }
}

.contenedor--centrar-horizontal {
  display: flex;
  justify-content: safe center;
  column-gap: var(--col-gap, calc(var(--spacing) * 4));
}

.liga {
  color: var(--color-liga, currentColor);
  text-decoration-style: underline;
  text-decoration-color: var(--color-medium);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  overflow-wrap: break-word;
  word-break: break-all;

  @media (hover: hover) {
    &:hover {
      color: var(--color-liga-hover, var(--color-strong));
      text-decoration-color: var(--color-liga-hover, var(--color-strong));
    }
  }

  &:focus-visible {
    outline-color: var(--color-liga-hover, var(--color-strong));
  }
}

.lista {
  list-style-position: outside;
  padding-inline-start: calc(var(--spacing) * 4);

  & > li:not(:last-child) {
    margin-block-end: calc(var(--spacing) * 1.5);
  }

  &:is(:where(ul, ol) *:first-of-type) {
    margin-block-start: calc(var(--spacing) * 3);
  }
  
  &.list-space-lg > :is(li) { margin-block-end: calc(var(--spacing) * 8); }
}

.acordeon-contenedor {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 4);
}

.acordeon--encabezado {
  /*background-color: var(--bg-color, var(--color-medium));
  border-radius: var(--radius-rounded);*/
  border-bottom-width: 2px;
  border-color: var(--color-medium);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color, var(--color-medium)); /*--color-white*/
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  column-gap: calc(var(--spacing) * 4);
  position: relative;
  z-index: 1;

  @media (hover: hover) {
    &:hover {
      /*background-color: var(--bg-color-active, var(--color-light));*/
      border-color: var(--color-strong);
      color: var(--color-strong);
    }
  }

  &:focus-visible {
    outline-color: var(--color-medium);
  }

  &:where(.acordeon--seccion[open] *) {
    /*background-color: var(--bg-color-active, var(--color-light));*/
    border-color: var(--color-strong);
    color: var(--color-strong);
  }
}

.acordeon--encabezado-leyenda {
  font-size: var(--size, 1.25rem);
  font-weight: 700;
}

.acordeon--mas {
  font-size: 2rem;
  display: flex;
  align-items: safe center;

  &:where(.acordeon--seccion[open] *) {
    display: none;
  }
}

.acordeon--menos {
  font-size: 2rem;
  display: flex;
  align-items: safe center;

  &:where(.acordeon--seccion:not([open]) *) {
    display: none;
  }
}

.acordeon--contenido {
  background-color: var(--bg-color, var(--color-white));
  padding-block: calc(var(--spacing) * 6);
  padding-inline: calc(var(--spacing) * 8);
  border-bottom-left-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
  position: relative;

  /*&:where(.acordeon--seccion[open] *) {
    &::before {
      background-color: var(--bg-color, var(--color-white));
      content: "";
      height: 2rem;
      bottom: 100%;
      left: 0px;
      display: block;
      position: absolute;
      width: 100%;
    }
  }*/
}

.video-embed {
  display: block;
  aspect-ratio: var(--aspect-video);
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.contenedor-centro {
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  font-size: 2.5rem;
  border-bottom-width: 2px;
  border-color: var(--color-medium);
  border-style: solid;
}

/* || Utilidades. */

.oculto-visual {
  position: absolute;
  height: 1px;
  width: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  margin: -1px;
}

.aspect-video {
  aspect-ratio: var(--aspect-video);
}

.color-strong {
  color: var(--color-strong);
}

.color-medium {
  color: var(--color-medium);
}

.color-black {
  color: var(--color-black);
}

.color-gray2 {
  color: var(--color-gray2);
}

.leading-justo {
  --leading: 1.0625;
}

.list-none {
  list-style-type: none;
}

.list-alfa {
  --list-style: lower-alpha;
}

.list-decimal {
  --list-style: decimal;
}

.list-disc {
  --list-style: disc;
}

.list-square {
  --list-style: square;
}

.list-circle {
  --list-style: circle;
}

.mb-0 {
  --margin-bottom: 0;
}

.mt-2 {
  margin-block-start: calc(var(--spacing) * 2);
}

.mt-6 {
  margin-block-start: calc(var(--spacing) * 6);
}

.mx-auto {
  margin-inline: auto;
}

.size-chico {
  font-size: 0.875rem;
}

.weight-600 {
  font-weight: 600;
}

.width-full {
  width: 100%;
}

/* || JS deshabilitado. */

.no-js--hidden:where(.no-js *) {
  display: none;
}

.no-js--block:where(.no-js *) {
  display: block;
}