/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
  --color-azul: rgb(0, 0, 255);
  --color-verde: rgb(0, 229, 9);
  --color-negro: rgb(0, 0, 0);

  --color-fondo: rgb(255, 255, 255);
  --margen-contenido: 15px;
}

/* ==========================================================================
   FUENTES
   ========================================================================== */
@font-face {
  font-family: "Arketa-Regular";
  src:
    url("../files/fonts/OOArketa-Regular.woff2") format("woff2"),
    url("../files/fonts/OOArketa-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   RESET / NORMALIZACIÓN
   ========================================================================== */
.datos div,
.datos ul,
.page-template-page-archive .proyecto:last-child .items {
  padding-bottom: 0;
}

.header-placeholder,
.logo-mv,
.available,
.page-template-page-info .back_to_top,
.page-template-page-info .update,
.modal,
.proyecto .imagen-destacada,
.info,
.page-template-page-info .main-menu,
.menu-item-65,
.menu-item-63,
.page-template-page-archive .open-close,
.page-template-page-listado .gallery-item .image img[src=""],
.page-template-page-listado .gallery-item .image img:not([src]) {
  display: none;
}

a[data-pin-log],
.pinit,
.pin-it-button,
.pinterest--button,
.pin-it-btn,
.pin-it-button,
.none,
::-webkit-scrollbar {
  display: none !important;
}

.titulo,
a {
  text-decoration: none;
}

*,
img {
  box-sizing: border-box;
  -webkit-user-drag: none;
}

.modal,
.logo-mv,
.logo,
.info-proyecto,
img {
  -webkit-user-select: none;
  user-select: none;
}

/* ==========================================================================
   ESTILOS GLOBALES
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

/* ==========================================================================
   TRANSFORMACIONES DE TEXTO (UPPERCASE / LOWERCASE)
   ========================================================================== */
.experience:before,
.features:before,
.contact:before,
header,
.info-proyecto *,
.items_archive,
.titulo,
.modal-title {
  text-transform: uppercase;
}

.available,
.email {
  text-transform: none;
}

.rol li,
.categoria li {
  text-transform: lowercase;
}

.rol li:first-child,
.categoria li:first-child {
  text-transform: inherit;
}

/* ==========================================================================
   OVERFLOW Y CONTENCIÓN
   ========================================================================== */
.contenedor,
.page-template-page-overview .gallery-item,
.modal-content {
  overflow: hidden;
}

/* ==========================================================================
   LISTAS
   ========================================================================== */
.datos ul {
  list-style: none;
}

/* ==========================================================================
   MEDIA (OBJECT-FIT / COBERTURA Y CONTENCIÓN)
   ========================================================================== */
.page-template-page-overview .gallery-item video,
.page-template-page-overview .gallery-item img,
.page-template-page-listado .gallery-item .image,
.page-template-page-listado .gallery-item .image img,
.page-template-page-listado .gallery-item .image video,
.page-template-page-archive .gallery-item .image,
.page-template-page-archive .gallery-item .image img,
.page-template-page-archive .gallery-item .image video {
  object-fit: cover;
}

.modal-content img,
.modal-content video {
  object-fit: contain;
}

/* ==========================================================================
   DIMENSIONES GLOBALES (WIDTH / HEIGHT 100%)
   ========================================================================== */
.contenedor,
.page-template-page-info footer,
.page-id-59 footer,
.page-template-page-listado footer,
.page-template-page-listado .gallery-item .image,
.page-template-page-listado .gallery-item .image img,
.page-template-page-listado .gallery-item .image video,
.page-template-page-archive .gallery-item .image,
.page-template-page-archive .gallery-item .image img,
.page-template-page-archive .gallery-item .image video,
.page-template-page-overview .gallery-item video,
.page-template-page-overview .gallery-item img,
.modal-content,
.aspect-ratio-1-1,
.aspect-ratio-14-10,
.aspect-ratio-4-3,
.aspect-ratio-16-9,
.aspect-ratio-16-10,
.aspect-ratio-3-2,
.aspect-ratio-21-9,
.aspect-ratio-5-4,
.aspect-ratio-2-1,
.aspect-ratio-4-4,
.aspect-ratio-5-3,
.page-template-page-overview header,
.overlay,
.show-item,
.modal-content img,
.modal-content video {
  width: 100%;
}

body,
.page-template-page-listado .gallery-item .image,
.page-template-page-listado .gallery-item .image img,
.page-template-page-listado .gallery-item .image video,
.page-template-page-info .overlay.collapsed,
.page-template-page-archive .gallery-item .image,
.page-template-page-archive .gallery-item .image img,
.page-template-page-archive .gallery-item .image video,
.page-template-page-overview .gallery-item video,
.page-template-page-overview .gallery-item img,
.modal-content,
.aspect-ratio-4-5,
.aspect-ratio-2-3,
.aspect-ratio-3-4,
.aspect-ratio-1-2,
.aspect-ratio-3-5,
.aspect-ratio-5-7,
.aspect-ratio-2-4,
.aspect-ratio-9-16,
.aspect-ratio-2-5,
.aspect-ratio-7-9,
.overlay,
.overlay.expanded,
.imagen-destacada video,
.imagen-destacada img,
.page-template-page-info .overlay,
.modal-content img,
.modal-content video {
  height: 100%;
}

/* ==========================================================================
   CONTENEDORES COLAPSADOS / ESTADOS
   ========================================================================== */
.overlay.collapsed,
.page-template-page-overview .header-placeholder {
  height: 0;
}

.page-id-177 .contenedor {
  max-height: 100%;
}

.contenedor {
  max-height: 0;
}

.proyecto .imagen-destacada {
  width: auto;
}

.proyecto .imagen-destacada,
.items {
  height: auto;
}

/* ==========================================================================
   TAMAÑOS Y PROPORCIONES (GRID 24 COLUMNAS)
   ========================================================================== */
.wrap_info,
.datos {
  width: calc((100% / 24) * 6);
}

.items {
  width: calc((100% / 24) * 22);
}

.open-close,
.logo-mv,
.logo,
.wrap_info li {
  width: fit-content;
}

.horizontal,
.vertical,
.square {
  height: 85%;
}

.page-template-page-listado .gallery-item > .image,
.page-template-page-archive .gallery-item > .image {
  height: 130px;
}

.proyecto .imagen-destacada {
  height: 300px;
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */
body {
  font-family: "Arketa-Regular";
  font-feature-settings: "ss03", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}

.courier-prime-regular-italic {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-style: italic;
}

body,
.available {
  font-size: 12px;
}

.open-close .plus:before,
.open-close.minus .plus:before {
  font-family: "Font Awesome 5 Free";
  font-size: 8px;
}

/* ==========================================================================
   INTERLINEADO
   ========================================================================== */
body {
  line-height: 1.45;
}

.datos ul {
  line-height: 1.4;
  padding-top: 6px;
}

.page-template-page-info p,
.wrap_info ul {
  line-height: 1.5;
}

/* ==========================================================================
   ESPACIADO DE LETRAS Y PALABRAS
   ========================================================================== */
body {
  word-spacing: -2px;
}

.hyphen {
  letter-spacing: -3px;
}

.items_archive,
.info-proyecto {
  letter-spacing: 0.15px;
  word-spacing: -2px;
}

/* ==========================================================================
   COLORES
   ========================================================================== */
* {
  color: var(--color-negro);
}

.descripcion a {
  color: var(--color-azul);
}

body,
.content,
.info-proyecto,
.items_archive {
  background: var(--color-fondo);
}

.overlay,
.page-template-page-info {
  background: var(--color-negro);
}

.info,
.modal {
  background: var(--color-negro) !important;
}

.page-template-page-overview header {
  background: var(--color-fondo) !important;
}

.current_page_item a {
  color: var(--color-azul);
}

.modal * {
  color: var(--color-fondo) !important;
}

.color-bg * {
  color: var(--color-negro);
}

.page-template-page-info * {
  color: var(--color-fondo) !important;
}

/* ==========================================================================
   SELECCIÓN DE TEXTO
   ========================================================================== */
::selection {
  background: var(--color-negro);
  color: var(--color-negro);
}

::-webkit-selection {
  background: var(--color-negro);
  color: var(--color-negro);
}

.page-template-page-info ::selection,
.page-template-page-info ::-webkit-selection {
  background: #fff;
  color: #fff;
}

/* ==========================================================================
   DISPLAY (FLEX / GRID / BLOCK)
   ========================================================================== */
.page-template-page-overview .gallery-item::before,
.page-template-page-overview header.fixed + .header-placeholder,
.page-template-page-info .overlay {
  display: block;
}

.open-close,
.modal-content,
.modal.show,
.page-template-page-overview .gallery-item,
.page-template-page-listado .gallery-item,
.page-template-page-archive .gallery-item,
.items,
.categoria,
.rol,
.proyecto,
#menu-menu-principal {
  display: flex;
}

header,
.info-proyecto,
.items_archive,
footer,
.gallery,
.show-item {
  display: grid;
}

.open-close .plus:before,
.open-close.minus .plus:before,
.creditos span.cargo,
.available .icon-dot {
  display: inline-block;
}

/* ==========================================================================
   POSITION (FIXED / RELATIVE / ABSOLUTE)
   ========================================================================== */
.modal,
.modal .close,
.modal-counter,
.modal-title,
.page-template-page-overview header.hidden,
.page-template-page-overview header.fixed,
.overlay,
.show-item,
.info,
.page-template-page-info footer,
.page-id-59 footer,
.page-template-page-listado footer,
.loading-message {
  position: fixed;
}

.proyecto,
.page-template-page-overview .gallery-item,
.page-template-page-overview header,
.page-template-page-info .info,
.image,
.modal-content {
  position: relative;
}

.page-template-page-overview .gallery-item > .image,
.page-template-page-overview .gallery-item video,
.page-template-page-overview .gallery-item img,
.open-close,
.proyecto .imagen-destacada,
.modal-content img,
.modal-content video,
.backdrop {
  position: absolute;
}

/* ==========================================================================
   ALIGNMENT (CENTRADO GENERAL)
   ========================================================================== */
.modal,
.modal-content,
.open-close,
.info,
.page-template-page-overview .gallery-item,
header,
.gallery,
.info-proyecto,
.items_archive,
footer {
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   ESPACIADOS (PADDING / MARGINS)
   ========================================================================== */
header {
  padding: 10px var(--margen-contenido) 6px var(--margen-contenido);
}

footer {
  padding: 0 var(--margen-contenido) 10px var(--margen-contenido);
}

.items_archive,
.info-proyecto {
  padding: 7px var(--margen-contenido) 5px var(--margen-contenido);
}

.page-template-page-info .info,
.page-template-page-overview .content {
  padding: 40px var(--margen-contenido) 100px var(--margen-contenido);
}

.page-template-page-listado .content,
.page-template-page-archive .content {
  padding: 40px 0 0;
  margin-bottom: 200px;
}

.contenedor {
  padding: 0 var(--margen-contenido);
  margin: auto;
}

.modal-content img,
.modal-content video {
  padding: 0 var(--margen-contenido) !important;
}

.open-close {
  padding: 5px 0 6px 0;
}

.items {
  padding: 25px 0 45px 0;
}

.wrap_info {
  grid-column: 8 / 14;
  align-items: center;
}

.wrap_info p:first-child,
.datos ul:first-child,
.page-template-page-info .wrap_info {
  padding-top: 0;
}

.wrap_info p {
  padding-top: 10px;
}

.descripcion p:first-child {
  padding-top: 2px !important;
}

.descripcion p {
  padding-top: 8px;
}

.test,
.wrap_info ul {
  padding-top: 20px;
}

.page-template-page-overview .gallery-item::before {
  padding-top: 100%;
}

.page-template-page-listado .gallery-item,
.page-template-page-archive .gallery-item {
  margin: 0 4px 4px 0;
}

.navbar-container {
  margin: 0 10px;
}

.creditos span.cargo {
  font-variant-ligatures: none;
}

.creditos span.nombre {
  margin-left: 5px;
}

.datos,
.items {
  margin-left: calc((100% / 24) * 1);
}

.wrap_info ul li:nth-child(1) {
  margin-top: 1px;
}

.info-proyecto .rol li,
.info-proyecto .categoria li {
  margin-right: 0.25em;
}

.main-menu li {
  margin-right: 15px;
}

.open-close .plus:before,
.open-close.minus .plus:before {
  margin-right: 0;
}

/* ==========================================================================
   FLEX FLOW / WRAPPING
   ========================================================================== */
.proyecto {
  flex-flow: column;
}

.categoria,
.rol {
  flex-flow: wrap;
}

.items {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ==========================================================================
   GRID (GALLERY)
   ========================================================================== */
.gallery {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  column-gap: 40px;
  row-gap: 80px;
}

/* ==========================================================================
   POSICIONAMIENTO (TOP / RIGHT / BOTTOM / LEFT + TRANSFORMS)
   ========================================================================== */
.show-item {
  top: -34px;
}

.modal,
.page-template-page-overview header.fixed,
.page-template-page-overview header.hidden,
.info {
  right: 0;
}

.modal,
.info,
.page-template-page-overview .gallery-item video,
.page-template-page-overview .gallery-item img,
.open-close,
.page-template-page-overview header.fixed,
.page-template-page-overview header.hidden,
.overlay.collapsed,
.prueba {
  top: 0;
}

.modal,
.info,
.overlay,
.page-template-page-info footer,
.page-id-59 footer,
.page-template-page-listado footer {
  bottom: 0;
}

.modal,
.info,
.overlay,
.page-template-page-overview header.fixed,
.page-template-page-overview header.hidden,
.page-template-page-overview .gallery-item video,
.page-template-page-overview .gallery-item img {
  left: 0;
}

.modal .close {
  right: 7px;
}

.modal-content img,
.modal-content video,
.modal-counter,
.modal-title {
  left: 50%;
}

.modal-content img,
.modal-content video {
  top: 50%;
  transform: translate(-50%, -50%);
}

.modal-counter,
.modal-title {
  transform: translateX(-50%);
}

.page-template-page-overview header.fixed {
  transform: translateY(0);
}

.page-template-page-overview header.hidden,
.page-template-page-overview .holder {
  transform: translateY(-100%);
}

.modal .close,
.modal-title {
  top: 7px;
}

.modal-counter {
  bottom: 14px;
}

.open-close {
  right: var(--margen-contenido);
}

/* ==========================================================================
   Z-INDEX
   ========================================================================== */
.page-id-59 footer,
.page-template-page-listado footer {
  z-index: -1;
}

.modal-content {
  z-index: 0;
}

.page-template-page-overview,
header.fixed,
.page-template-page-overview,
header,
.modal,
.close,
.modal-counter,
.modal-title,
.info-proyecto {
  z-index: 1;
}

.proyecto .imagen-destacada,
.items_archive,
.proyecto::before {
  z-index: 2;
}

.page-template-page-info footer,
.modal,
.info {
  z-index: 999;
}

.overlay {
  z-index: 1001;
}

/* ==========================================================================
   TRANSICIONES
   ========================================================================== */
.contenedor {
  transition: max-height 0.5s cubic-bezier(1, 0, 0, 1);
}

.info,
.page-template-page-archive .gallery-item .image video,
.page-template-page-archive .gallery-item .image img {
  transition: opacity 0.3s ease;
}

.modal {
  transition: opacity 0.2s ease-in-out;
}

.page-template-page-info .overlay {
  transition: opacity 0.3s ease !important;
}

.page-template-page-overview header {
  transition: transform 0.3s ease;
}

.overlay.expanded {
  transition: height 1s cubic-bezier(1, 0, 0, 1);
}

.overlay.collapsed {
  transition: height 0.7s cubic-bezier(1, 0, 0, 1);
}

.show-item {
  transition: top 0.3s ease;
}

/* ==========================================================================
   BORDES
   ========================================================================== */
.proyecto {
  border-top: 0.5px dashed #666;
}

.page-template-page-listado .proyecto:last-child {
  border-bottom: 0.5px dashed #666;
}

.items_archive {
  border: none;
}

.items_archive::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 0.5px dashed #666;
}

.no_border {
  border: none !important;
}

/* ==========================================================================
   GRID (24 COLUMNAS) / COLOCACIÓN
   ========================================================================== */
header,
.info-proyecto,
.items_archive,
footer {
  grid-template-columns: repeat(24, 1fr);
  gap: var(--gap);
  row-gap: 0;
}

.order,
.num_item {
  grid-column: 1;
}

.logo,
.logo-mv,
.copyright {
  grid-column: 1;
}

.available {
  grid-column: 20 / 25;
}

.titulo,
.titulo_item {
  grid-column: 2 / 8;
}

.categoria,
.categoria_item {
  grid-column: 8 / 14;
}

.main-menu,
.email {
  grid-column: 2 / 8;
}

.back_to_top,
.rol,
.rol_item {
  grid-column: 14 / 20;
}

.ano,
.ano_item {
  grid-column: 20 / 24;
}

.wrap_info p:first-child {
  text-indent: 0;
}

/* ==========================================================================
   PSEUDO-ELEMENTOS / CONTENT
   ========================================================================== */
.experience:before {
  content: "Experiencia";
}

.features:before {
  content: "Destacados";
}

.contact:before {
  content: "Contacto";
}

.page-template-page-overview .gallery-item::before {
  content: "";
}

.open-close .plus:before {
  content: "\f067";
  font-weight: bold;
}

.open-close.minus .plus:before {
  content: "\f068";
}

/* ==========================================================================
   LISTAS (AJUSTES)
   ========================================================================== */
.creditos li:last-child,
.rol li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.logo,
.page-template-page-listado .info-proyecto,
.open-close,
.modal .close {
  cursor: pointer !important;
}

/* ==========================================================================
   POINTER EVENTS
   ========================================================================== */
.current_page_item a,
.logo,
.page-template-page-archive .info-proyecto,
.disabled,
.proyecto .imagen-destacada,
.page-template-page-info .overlay.collapsed,
.backdrop.oculto {
  pointer-events: none;
}

.page-template-page-info .overlay.expanded {
  pointer-events: auto;
}

.page-template-page-info .logo {
  pointer-events: all;
}

/* ==========================================================================
   ASPECT RATIO (UTILIDADES)
   ========================================================================== */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.aspect-ratio-16-10 {
  aspect-ratio: 16 / 10;
}
.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}
.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
}
.aspect-ratio-14-10 {
  aspect-ratio: 14 / 10;
}
.aspect-ratio-3-2 {
  aspect-ratio: 3 / 2;
}
.aspect-ratio-21-9 {
  aspect-ratio: 21 / 9;
}
.aspect-ratio-4-5 {
  aspect-ratio: 4 / 5;
}
.aspect-ratio-9-16 {
  aspect-ratio: 9 / 16;
}
.aspect-ratio-5-4 {
  aspect-ratio: 5 / 4;
}
.aspect-ratio-2-3 {
  aspect-ratio: 2 / 3;
}
.aspect-ratio-3-4 {
  aspect-ratio: 3 / 4;
}
.aspect-ratio-1-2 {
  aspect-ratio: 1 / 2;
}
.aspect-ratio-2-1 {
  aspect-ratio: 2 / 1;
}
.aspect-ratio-3-5 {
  aspect-ratio: 3 / 5;
}
.aspect-ratio-5-7 {
  aspect-ratio: 5 / 7;
}
.aspect-ratio-2-4 {
  aspect-ratio: 2 / 4;
}
.aspect-ratio-2-5 {
  aspect-ratio: 2 / 5;
}
.aspect-ratio-4-4 {
  aspect-ratio: 4 / 4;
}
.aspect-ratio-5-3 {
  aspect-ratio: 5 / 3;
}
.aspect-ratio-7-9 {
  aspect-ratio: 7 / 9;
}

.open-close {
  text-align: right;
  transform-origin: center;
}

/* ==========================================================================
   OPACIDAD (ESTADOS)
   ========================================================================== */
.info,
.modal,
.page-template-page-info .overlay.collapsed,
.backdrop.oculto {
  opacity: 0;
}

.modal.show,
.info.show,
.page-template-page-info .info,
.page-template-page-info .overlay.expanded {
  opacity: 1;
}

/* ==========================================================================
   FOTO / DISPONIBILIDAD
   ========================================================================== */
.photo_profile {
  width: calc((100% / 24) * 5);
  margin-right: calc((100% / 24) * 1);
  margin-left: calc((100% / 24) * 1);
}

.update {
  grid-column: 8 / 14;
}

.available {
  grid-column: 8 / 14;
}

.photo_profile img {
  width: 100%;
}

.info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media (max-width: 2150px) {
  .ano,
  .ano_item {
    grid-column: 21 / 24;
  }

  .back_to_top,
  .rol,
  .rol_item {
    grid-column: 15 / 21;
  }

  .update,
  .categoria,
  .categoria_item {
    grid-column: 8 / 15;
  }

  .wrap_info,
  .datos {
    width: calc((100% / 24) * 7);
  }
}

@media (max-width: 2000px) {
  .ano,
  .ano_item {
    grid-column: 22 / 24;
  }

  .categoria,
  .categoria_item {
    grid-column: 8 / 15;
  }
}

@media (max-width: 1800px) {
  .open-close .plus:before,
  .open-close.minus .plus:before {
    font-size: 8px;
  }

  .items_archive,
  .info-proyecto {
    word-spacing: -1px;
  }

  .wrap_info,
  .datos {
    width: calc((100% / 24) * 9);
  }
}

@media (max-width: 1600px) {
  .rol,
  .rol_item {
    grid-column: 15 / 22;
  }
}

@media (max-width: 1500px) {
  .ano,
  .ano_item {
    display: none;
  }

  .titulo,
  .titulo_item {
    grid-column: 2 / 8;
  }

  .categoria,
  .categoria_item {
    grid-column: 8 / 15;
  }

  .rol,
  .rol_item {
    grid-column: 16 / 25;
  }

  .wrap_info,
  .datos {
    width: calc((100% / 24) * 11);
  }

  .page-template-page-listado .gallery-item,
  .page-template-page-archive .gallery-item {
    /* margin: 0px 4px 4px 0px; */
  }
}

@media (max-width: 1500px) {
  .email {
    display: none;
  }

  .wrap_info {
    width: calc((100% / 24) * 12);
  }

  .photo_profile {
    width: calc((100% / 24) * 12);
  }

  .update {
    grid-column: 8 / 14;
  }

  .page-template-page-info .update,
  .available {
    grid-column: 14 / 25;
  }
}

@media (max-width: 1400px) {
  .photo_profile {
    margin-left: calc((100% / 24) * 0);
  }

  .wrap_info {
    width: calc((100% / 24) * 11);
  }

  .rol,
  .rol_item {
    grid-column: 15 / 25;
  }
}

@media (max-width: 1300px) {
  .back_to_top,
  .rol,
  .rol_item {
    grid-column: 16 / 25;
  }

  .update,
  .categoria,
  .categoria_item {
    grid-column: 9 / 16;
  }
}

@media (max-width: 1200px) {
  .open-close .plus:before,
  .open-close.minus .plus:before {
    font-size: 8px;
  }

  .titulo,
  .titulo_item {
    grid-column: 2 / 8;
  }

  .update,
  .categoria,
  .categoria_item {
    grid-column: 8 / 16;
  }

  .datos {
    width: calc((100% / 24) * 12);
  }

  .page-template-page-listado .gallery-item > .image,
  .page-template-page-archive .gallery-item > .image {
    height: 115px;
  }
}

@media (max-width: 1100px) {
  .back_to_top,
  .proyecto .imagen-destacada,
  .logo {
    display: none !important;
  }

  .logo-mv {
    display: block;
  }

  .logo-mv,
  .copyright {
    grid-column: 1 / 8;
  }

  .available {
    display: none !important;
  }

  .main-menu,
  .email {
    grid-column: 8 / 24;
  }

  .photo_profile {
    margin-left: calc((100% / 24) * 0);
    width: calc((100% / 24) * 6);
  }

  .page-template-page-info .update {
    grid-column: 8 / 25;
  }
}

@media (max-width: 1000px) {
  .rol,
  .rol_item {
    display: none;
  }

  .titulo,
  .titulo_item {
    grid-column: 3 / 12;
  }

  .update,
  .page-template-page-info .update,
  .main-menu,
  .email,
  .categoria,
  .categoria_item {
    grid-column: 13 / 25;
  }

  .datos {
    width: calc((100% / 24) * 14);
  }

  .datos,
  .items {
    margin-left: calc((100% / 24) * 2);
  }

  .items {
    width: calc((100% / 24) * 21);
  }

  .page-template-page-listado .gallery-item > .image,
  .page-template-page-archive .gallery-item > .image {
    height: 100px;
  }

  .photo_profile {
    margin-right: calc((100% / 24) * 1);
    margin-left: calc((100% / 24) * 0);
    width: calc((100% / 24) * 12);
  }

  .wrap_info {
    margin-right: calc((100% / 24) * 0);
    width: calc((100% / 24) * 13);
  }
}

@media (max-width: 700px) {
  :root {
    --margen-contenido: 10px;
  }

  .photo_profile,
  .items_archive,
  .categoria,
  .categoria_item {
    display: none;
  }

  .descripcion p:first-child {
    padding-top: 5px !important;
  }

  .descripcion p {
    padding-top: 10px !important;
  }

  .datos ul {
    padding-top: 10px;
  }

  .icon-dot {
    margin-right: 2em !important;
  }

  .header-placeholder {
    display: block;
  }

  .page-template-page-info footer {
    position: relative;
  }

  header,
  footer {
    display: flex;
    justify-content: space-between;
  }

  .main-menu li {
    margin-right: 0;
    margin-left: 10px;
  }

  .order,
  .num_item {
    grid-column: 1 / 2;
  }

  .titulo,
  .titulo_item {
    grid-column: 2 / 24;
    margin-left: 12px;
  }

  .datos,
  .items {
    margin-left: calc((100% / 24) * 0);
  }

  .wrap_info,
  .items,
  .datos {
    width: calc((100% / 24) * 24);
  }

  .items {
    column-gap: 5px;
    column-count: 2;
    display: inherit;
  }

  .modal-title {
    transform: translateX(0%);
    left: 10px;
  }

  .page-template-page-listado .gallery-item > .image,
  .page-template-page-archive .gallery-item > .image {
    height: fit-content;
    line-height: 0;
    font-size: 0;
  }

  .page-template-page-listado .gallery-item,
  .page-template-page-archive .gallery-item {
    margin: 0;
    break-inside: avoid;
    width: 100%;
  }

  .page-template-page-listado .gallery-item .image,
  .page-template-page-archive .gallery-item .image {
    margin-bottom: 5px;
  }

  .page-template-page-listado .gallery-item .image video,
  .page-template-page-listado .gallery-item .image img {
    width: 100%;
    height: 100% !important;
  }

  .creditos span.cargo {
    width: fit-content;
  }

  header {
    position: relative;
    transition: top 0.3s ease-in-out;
    top: 0;
    z-index: 100;
    background: var(--color-fondo);
    width: 100%;
    padding: 7px var(--margen-contenido);
  }

  .page-template-page-info header {
    background: var(--color-negro);
  }

  .page-template-page-info header.holder {
    z-index: 1000;
    position: fixed;
    animation: slideDown 0.3s forwards;
    border-bottom: 0.5px dashed #666;
  }

  .page-template-page-listado header.holder,
  .page-template-page-archive header.holder {
    position: fixed;
    animation: slideDown 0.3s forwards;
    border-bottom: 0.5px dashed #666;
  }

  .page-template-page-info .content {
    margin: 40px 10px 100px 10px;
  }

  .info {
    padding: 0 !important;
  }

  @keyframes slideDown {
    from {
      top: -34px;
    }
    to {
      top: 0;
    }
  }
}

/* ==========================================================================
   MISC
   ========================================================================== */
a,
button,
input,
textarea,
select,
label,
.info-proyecto {
  -webkit-tap-highlight-color: transparent;
}

.modal-content {
  height: 90%;
}

.descripcion p:first-child {
  text-indent: 0;
  padding-top: 0;
}

.backdrop {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-negro);
  transition: opacity 0.3s ease;
  z-index: 1;
}

.loading-message {
  animation: blink 0.4s infinite;
}

.available .icon-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: -2px;
  background-color: var(--color-verde);
  animation: blink 0.4s infinite;
}

span.icon-dot {
  margin-right: 2em;
}

html {
  scroll-behavior: smooth;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}