

*, *::before, *::after { box-sizing: border-box; }

html {
  --cb: cubic-bezier(.22, 1, .36, 1);
  --dark: #000;
  --mid: #616161;
  --lightMid: #f7f7f7;
  --light: #fff;
  --fondo: var(--light);
  --texto: var(--dark);
  --sp-1: .133rem;
  --sp-2: .333rem;
  --sp-3: .8rem;
  --sp-base: 1rem;
  --sp-4: 1.25rem;
  --sp-5: 1.677rem;
  --sp-6: 2rem;
  --sp-7: 2.667rem;
  --sp-8: 4.667rem;
  --campo: 35px;
  --altoCab: 83px;
  --snap-margen: 0px;
  font-family: "Onest", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .15px;
  line-height: 130%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 640px) { html { font-size: 13px; } }
@media (min-width: 1024px) { html { font-size: 14px; letter-spacing: .12px; line-height: 140%; --campo: 45px; } }
@media (min-width: 1400px) { html { font-size: 15px; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--fondo);
  color: var(--texto);
  opacity: 0;
}
body.fuentes { animation: aparece 1s ease-in-out forwards; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

a, button { color: var(--texto); cursor: pointer; }
a { background: transparent; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: left; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }
img, video, svg { display: block; }
img, video { max-width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: fixed; left: var(--sp-4); top: -4rem; z-index: 100; background: var(--light); padding: var(--sp-2) var(--sp-3); }
.saltar:focus { top: var(--sp-3); }

.max { margin: 0 auto; max-width: none; padding: 0 var(--sp-5); width: 100%; }
@media (min-width: 1024px) { .max { padding: 0 var(--sp-6); } }


.cab { padding: var(--sp-5) 0; position: relative; }
@media (min-width: 1024px) { .cab { padding: var(--sp-4) 0; } }
.cab-int { align-items: center; display: flex; justify-content: space-between; min-height: var(--campo); position: relative; z-index: 5; }
.cab-izq { align-items: center; display: flex; gap: var(--sp-3); }
.cab-der { align-items: center; display: flex; gap: var(--sp-3); margin-left: auto; }

.cab-boton { align-items: center; display: flex; height: 20px; justify-content: center; overflow: visible; width: 20px; }
.cab-menu-boton svg { height: 20px; width: 20px; fill: var(--dark); }
.cab-menu-boton .ico-cerrar { display: none; }
body.menu-abierto .cab-menu-boton .ico-abrir { display: none; }
body.menu-abierto .cab-menu-boton .ico-cerrar { display: block; }
.cab-busca-boton { display: flex; }
body.menu-abierto .cab-busca-boton { display: none; }

.cab-menu { display: none; }
.cab-lista { display: flex; flex-direction: column; gap: var(--sp-6); }
.cab-lista li { margin: 0; }
.cab-enlace { display: inline-block; }
.cab-enlace.activo { color: var(--mid); font-weight: 500; }
body.menu-abierto .cab-menu { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }

@media (min-width: 1024px) {
  .cab-lista { flex-direction: row; margin-left: var(--sp-3); }
}
@media (max-width: 1023px) {
  .cab-menu {
    background: var(--fondo); height: calc(100vh - var(--sp-5) * 2 - var(--sp-2) * 2 - 1.5rem);
    left: 0; padding: var(--sp-5); position: fixed; right: 0;
    top: calc(var(--sp-5) * 2 + var(--sp-2) * 2 + 1.5rem); z-index: 4;
  }
}


.busca { opacity: 0; pointer-events: none; position: relative; transition: opacity .25s ease; width: min(22rem, 70vw); }
.busca.abierta { opacity: 1; pointer-events: auto; }
.busca-campo { position: relative; border-bottom: 1px solid transparent; }
.busca-campo:focus-within { border-bottom-color: var(--dark); }
.busca-campo input {
  background: transparent; border: 0; border-radius: 0; color: var(--texto); font: inherit; font-size: 1rem; letter-spacing: .15px;
  height: var(--campo); outline: none; padding: 0 calc(var(--sp-6) + var(--sp-2)) 0 0; width: 100%; -webkit-appearance: none; appearance: none;
}
.busca-campo input::placeholder { color: var(--mid); opacity: 1; }
.busca-campo input::-webkit-search-cancel-button, .busca-campo input::-webkit-search-decoration { display: none; }
.busca-cerrar { align-items: center; display: flex; height: 20px; justify-content: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; }
.busca-lista {
  background: var(--fondo); left: 0; max-height: 50vh; overflow: auto; position: absolute; right: 0;
  top: calc(100% + var(--sp-2)); z-index: 12; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2);
}
.busca-lista[hidden] { display: none; }
.busca-opcion { background: transparent; border-radius: .375rem; display: block; padding: var(--sp-2); text-align: left; transition: background .2s ease; width: 100%; }
.busca-opcion:hover, .busca-opcion:focus-visible { background: var(--lightMid); }
.busca-opcion small { color: var(--mid); font-size: inherit; }
.busca-estado { color: var(--mid); padding: var(--sp-3); }
.busca-velo { background: hsla(0, 0%, 100%, .7); border: 0; cursor: default; display: none; inset: 0; margin: 0; padding: 0; position: fixed; z-index: 4; }
body.busca-abierta .busca-velo { display: block; }


@media (max-width: 639px) {
  .cab-int { align-items: flex-start; flex-wrap: nowrap; }
  .cab-izq { flex: 1 1 100%; flex-wrap: wrap; gap: var(--sp-5); }
  .cab-der { position: absolute; right: 0; top: .25rem; }
  .busca { display: none; margin-top: var(--sp-2); opacity: 1; pointer-events: auto; width: 100%; }
  body.busca-abierta .busca { display: block; }
}

.sede-boton { align-items: center; display: flex; gap: var(--sp-3); }
.sede-boton svg { color: var(--mid); }
.cab-logo-movil { display: none; width: 5rem; }
.cab-logo-movil svg { width: 100%; height: auto; fill: var(--dark); }
@media (max-width: 639px) {
  body.menu-abierto .cab-logo-movil { display: block; }
  body.menu-abierto [data-sitio] { visibility: hidden; }
}


.panel {
  background: var(--fondo); height: calc(100vh - var(--altoCab)); left: 0; opacity: 0; overflow-y: auto; padding: var(--sp-5);
  pointer-events: none; position: fixed; top: var(--altoCab); visibility: hidden; width: 100%; z-index: 10;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
body.lineas-abierto .panel-lineas, body.info-abierto .panel-info { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.panel-volver { align-items: center; display: flex; font-weight: 500; gap: var(--sp-3); margin-bottom: var(--sp-6); margin-top: .5rem; }
@media (min-width: 640px) { .panel-volver { margin-top: -.5rem; } }
@media (min-width: 1024px) { .panel-volver:not(.panel-volver-info) { display: none; } }
.panel-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 1024px) { .panel-lista { margin-left: 3.25rem; } }
.panel-enlace { display: block; line-height: 1.75; }
.panel-enlace:hover { color: var(--mid); }
.panel-titulo { font-size: 1rem; font-weight: 500; letter-spacing: .12px; line-height: 140%; margin-bottom: var(--sp-3); }
.panel-texto { max-width: 36rem; }
@media (min-width: 1024px) { .panel-titulo, .panel-texto { margin-left: 3.25rem; } .panel-volver-info { margin: 0 0 var(--sp-6) 3.25rem; } }


.sedes {
  align-items: center; background: var(--fondo); display: flex; height: 100vh; justify-content: center; left: 0; opacity: 0;
  pointer-events: none; position: fixed; top: 0; transform: translate3d(0, -100vh, 0); visibility: hidden; width: 100%; z-index: 40;
  transition: transform .45s var(--cb), opacity .3s ease, visibility 0s linear .45s;
}
body.sedes-abierto .sedes { opacity: 1; pointer-events: auto; transform: translateZ(0); visibility: visible; transition: transform .45s var(--cb), opacity .3s ease, visibility 0s; }
.sedes-cerrar { position: absolute; right: var(--sp-5); top: var(--sp-5); }
.sedes-cerrar svg { height: 1.5rem; width: 1.5rem; fill: var(--dark); }
.sedes-lista { align-items: center; display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; }
.sede-opcion {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 4.667rem; font-weight: 500; letter-spacing: 0; line-height: 100%;
  text-align: center; text-transform: uppercase;
}
@media (min-width: 1024px) { .sede-opcion { font-size: 5.333rem; } }
.sede-opcion:hover { color: var(--mid); }


.logo-fijo { opacity: 0; pointer-events: none; position: fixed; right: var(--sp-6); top: calc(var(--sp-6) - .28rem); transition: opacity .3s ease, visibility 0s linear .3s; visibility: hidden; z-index: 30; }
.logo-fijo.visible { opacity: 1; pointer-events: auto; transition: opacity .3s ease; visibility: visible; }
.logo-f { fill: var(--dark); height: auto; max-width: 5rem; width: 5rem; }
@media (min-width: 1024px) { .logo-f { max-width: 5.75rem; width: 5.75rem; } }
body.sedes-abierto .logo-fijo, body.busca-abierta .logo-fijo { opacity: 0; pointer-events: none; }

.intro { height: 2.1rem; margin-bottom: 0; margin-top: 2.75rem; padding-left: 4rem; }
@media (min-width: 1024px) { .intro { height: 4.51rem; margin-top: var(--sp-8); padding-left: 18rem; } }
.logo-grande { font-size: inherit; font-weight: 400; line-height: 0; }
.logo-g { fill: var(--dark); height: auto; max-width: 10rem; position: relative; top: -.6rem; width: 10rem; }
@media (min-width: 1024px) { .logo-g { max-width: 17rem; top: -.8rem; width: 17rem; } }

.medios { padding-bottom: var(--sp-6); padding-top: var(--sp-6); }
.medios-seccion { align-items: center; box-sizing: border-box; display: flex; height: 100vh; min-height: 100vh; padding: var(--sp-8) 0; }
.marco {
  align-items: center; cursor: grab; display: flex; height: 100%; overflow: hidden; position: relative; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; width: 100%;
}
.marco.arrastrando { cursor: grabbing; }
.pista { align-items: stretch; display: flex; flex: 0 0 auto; flex-wrap: nowrap; height: min(100%, 80vh); width: 100%; will-change: transform; }
.slide { align-items: flex-start; display: flex; flex: 0 0 80%; height: 100%; padding: 0 var(--sp-base); }
@media (min-width: 640px) { .slide { flex-basis: 55%; } }
@media (min-width: 1024px) { .slide { flex-basis: 25%; } }
.slide.medio { align-items: center; }
.slide.ancho { flex-basis: 100%; }
@media (min-width: 1024px) { .slide.ancho { flex-basis: 50%; } }

.medio { position: relative; width: 100%; }
.medio-enlace { display: block; }
.medio img, .medio video {
  display: block; height: auto; width: 100%;
  
  filter: saturate(.92) contrast(1.03);
  -webkit-user-drag: none;
}
.medio img.bn { filter: grayscale(1) contrast(1.08); }
.medio video { background: var(--lightMid); object-fit: cover; }
.medio img { background: var(--lightMid); }

.etiqueta { position: relative; }
.etiqueta-velo { display: none; }
.etiqueta-texto { display: block; max-width: 100%; overflow-wrap: anywhere; padding: var(--sp-3); padding-top: var(--sp-3); pointer-events: none; text-align: center; word-break: break-word; }
@media (min-width: 1024px) {
  .etiqueta-velo { background: rgba(0, 0, 0, .3); display: block; inset: 0; pointer-events: none; z-index: 1; }
  .etiqueta-velo, .etiqueta-texto { opacity: 0; position: absolute; transition: opacity .2s ease-out; }
  .etiqueta-texto { bottom: 0; color: var(--light); right: 0; text-align: right; z-index: 2; }
  .etiqueta:hover .etiqueta-velo, .etiqueta:hover .etiqueta-texto, .etiqueta:focus-within .etiqueta-velo, .etiqueta:focus-within .etiqueta-texto { opacity: 1; }
}

.siguiente { bottom: var(--sp-6); cursor: pointer; left: 50%; opacity: 1; position: fixed; transform: translateX(-50%); transition: opacity .18s ease, transform .18s ease; z-index: 8; }
.siguiente svg { height: 1rem; width: 1rem; color: var(--dark); }
.siguiente.oculto { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); }

.volver { align-items: center; display: flex; justify-content: center; padding-top: var(--sp-8); text-align: center; }
.volver .max { display: flex; justify-content: center; }
.volver-boton { text-align: center; }
.volver-boton:hover { color: var(--mid); }


.pie { background: var(--lightMid); margin-top: var(--sp-8); padding: var(--sp-6) 0; }
.pie-int { display: grid; grid-gap: calc(var(--sp-7) * 1.2); grid-template-areas: "form" "links" "logo"; }
@media (min-width: 1024px) {
  .pie-int { align-items: center; grid-gap: var(--sp-6); grid-template-areas: "logo form links"; grid-template-columns: 5.5rem 1fr 1fr; }
}
.pie-logo { grid-area: logo; max-width: 6.334rem; }
@media (min-width: 1024px) { .pie-logo { max-width: 5.5rem; } }
.pie-logo svg { fill: var(--dark); height: auto; width: 100%; }
.pie-formulario { grid-area: form; }
.boletin { align-items: center; background: var(--light); display: flex; height: var(--campo); position: relative; }
@media (min-width: 640px) { .boletin { max-width: 30rem; } }
@media (min-width: 1024px) { .boletin { max-width: 25.5rem; } }
.boletin input {
  background: var(--light); border: 0; border-radius: 0; color: var(--texto); font: inherit; font-size: 1rem; height: var(--campo);
  letter-spacing: .15px; outline: none; padding: var(--sp-3); width: calc(100% - 6rem); -webkit-appearance: none; appearance: none;
}
.boletin input::placeholder { color: var(--dark); opacity: 1; }
.boletin:focus-within { box-shadow: 0 0 0 2px var(--dark); }
.boletin-enviar { align-items: center; background: var(--light); display: flex; height: var(--campo); justify-content: center; padding: var(--sp-3); position: absolute; right: 0; top: 0; width: 6rem; }
.boletin-enviar:hover { color: var(--mid); }
.boletin.listo input, .boletin.listo .boletin-enviar { visibility: hidden; }
.boletin-mensaje { font-size: .9rem; left: 0; position: absolute; right: 0; }
.boletin-mensaje:empty { display: none; }
.boletin.listo .boletin-mensaje { align-items: center; background: var(--light); display: flex; height: var(--campo); justify-content: center; padding: 0 var(--sp-3); text-align: center; top: 0; }
.boletin.error { box-shadow: 0 0 0 1px var(--dark); }
.boletin.error .boletin-mensaje { top: calc(100% + var(--sp-2)); }
.pie-enlaces { align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--sp-5); grid-area: links; }
.pie-enlaces li { margin: 0; }
@media (min-width: 1024px) { .pie-enlaces { flex-direction: row; gap: var(--sp-3) var(--sp-6); justify-content: flex-end; } }
@media (max-width: 1023px) { .pie-enlaces { align-items: flex-start; } }
.pie-enlace { text-align: left; }
.pie-enlace:hover, .pie-muestra a:hover { color: var(--mid); }
.pie-muestra a { text-decoration: none; }


.visor { align-items: center; background: var(--light); display: flex; inset: 0; justify-content: center; padding: 4rem var(--sp-5) 3rem; position: fixed; z-index: 60; }
.visor[hidden] { display: none; }
.visor-cerrar { position: absolute; right: var(--sp-5); top: var(--sp-5); }
.visor-cerrar svg { height: 1.5rem; width: 1.5rem; fill: var(--dark); }
.visor-figura { align-items: center; display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; max-height: 100%; max-width: 100%; }
.visor-medio img, .visor-medio video { display: block; filter: saturate(.92) contrast(1.03); height: auto; max-height: calc(100vh - 9rem); max-width: 100%; width: auto; }
.visor-medio img.bn { filter: grayscale(1) contrast(1.08); }
.visor-pie { text-align: center; }


.envoltura.con-snap { -webkit-overflow-scrolling: touch; box-sizing: border-box; height: 100vh; height: 100dvh; overflow-y: auto; scroll-padding-top: 0; scroll-snap-type: y mandatory; }
.envoltura.con-snap .cab, .envoltura.con-snap .pie, .envoltura.con-snap .medios-seccion:nth-child(n+2) { scroll-snap-align: start; scroll-snap-stop: always; }
.envoltura.con-snap .medios-seccion:nth-child(n+2) { scroll-margin-top: var(--snap-margen, 0); }


@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
