/* ==========================================================================
   VARIABLES DE RAÍZ
   ========================================================================== */

:root {
  /* Colores (tema oscuro) */
  --color-azul: rgb(0, 229, 9);
  --color-verde: rgb(0, 229, 9);
  --color-negro: rgb(255 255 255);
  --color-backdrop: rgb(35 35 35);
  --color-fondo: rgb(10 10 10);

  /* Layout */
  --margen-contenido: 15px;
}

/* ==========================================================================
   FUENTES
   ========================================================================== */

@font-face {
  /* Fuente principal del sitio */
  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
   ========================================================================== */

/* Evitar padding extra en casos concretos */
.datos div,
.datos ul,
.page-template-page-archive .proyecto:last-child .items {
  padding-bottom: 0;
}

/* Elementos ocultos por defecto (UI condicional / estados) */
.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;
}

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

/* Enlaces / títulos sin subrayado */
.titulo,
a {
  text-decoration: none;
}

/* Box model consistente + desactivar drag de imágenes */
*,
img {
  box-sizing: border-box;
  -webkit-user-drag: none;
}

/* Evitar selección de UI / imágenes */
.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; /* evita saltos de layout por aparición/desaparición de scrollbar */
}

/* Mayúsculas en UI / secciones */
.experience:before,
.features:before,
.contact:before,
header,
.info-proyecto *,
.items_archive,
.titulo,
.modal-title {
  text-transform: uppercase;
}

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

/* Listas: minúsculas salvo primer elemento */
.rol li,
.categoria li {
  text-transform: lowercase;
}

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

/* Evitar “desbordes” en contenedores clave */
.contenedor,
.page-template-page-overview .gallery-item,
.modal-content {
  overflow: hidden;
}

/* Listas sin bullets */
.datos ul {
  list-style: none;
}

/* Media “a sangre” en listados: recorta para cubrir */
.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;
}

/* Media en modal: “contain” para no recortar */
.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%;
}

/* Placeholder sin altura */
.page-template-page-overview .header-placeholder {
  height: 0;
}

/* Caso concreto: contenedor “abierto” */
.page-id-177 .contenedor {
  max-height: 100%;
}

/* Contenedor colapsado por defecto (acordeón / expand) */
.contenedor {
  max-height: 0;
}

/* Imagen destacada: no forzar ancho */
.proyecto .imagen-destacada {
  width: auto;
}

/* Altura automática para estos bloques */
.proyecto .imagen-destacada,
.items {
  height: auto;
}

/* ==========================================================================
   TAMAÑOS Y PROPORCIONES
   ========================================================================== */

.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 {
  /* Nota: está duplicado; manda el segundo */
  line-height: 1.4;
  line-height: 1.5;
}

.datos ul {
  line-height: 1.4;
  /* margin-left: 3em; */
  padding-top: 7px;
}

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

/* ==========================================================================
   ESPACIADO DE PALABRAS Y LETRAS
   ========================================================================== */

body {
  word-spacing: -2px;
}

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

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

/* ==========================================================================
   COLORES (TEMA OSCURO)
   ========================================================================== */

/* Color de texto global (ojo: aquí lo fuerzas en * y además en modal/page-info) */
.page-template-page-info *,
.modal *,
* {
  color: var(--color-negro);
}

/* Enlaces en descripciones */
.descripcion a {
  color: var(--color-azul);
}

/* Fondos base: todo tira al fondo oscuro */
body,
.info,
.modal,
.overlay,
.content,
.info-proyecto,
.items_archive {
  background: var(--color-fondo);
}

/* Overlay alternativo (comentado) */
/*
.overlay {
  background: var(--color-backdrop);
}
*/

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

/* Estado activo del menú */
.current_page_item a {
  color: var(--color-azul);
}

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

/* Selección (ojo: aquí texto y fondo son iguales -> selección invisible) */
::selection {
  background: var(--color-negro);
  color: var(--color-negro);
}

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

/* Selección en page-info (también invisible: blanco sobre blanco) */
.page-template-page-info ::selection,
.page-template-page-info ::-webkit-selection {
  background: #fff;
  color: #fff;
}

/* ==========================================================================
   DISPLAY Y POSICIONAMIENTO (TIPO DE LAYOUT)
   ========================================================================== */

.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;
}

/* Capas fijas */
.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;
}

/* Contexto para hijos absolute */
.proyecto,
.page-template-page-overview .gallery-item,
.page-template-page-overview header,
.page-template-page-info .info,
.image,
.modal-content {
  position: relative;
}

/* Media/controles “encima” */
.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;
}

/* Centrado por defecto */
.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 Y MÁRGENES
   ========================================================================== */

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: 29px 0 50px 0;
}

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

/* Evitar padding superior inicial */
.wrap_info p:first-child,
.datos ul:first-child,
.page-template-page-info .wrap_info {
  padding-top: 0;
}

/* Indent editorial */
.wrap_info p {
  /* padding-top: 10px; */
  text-indent: 3em;
}

.descripcion p,
.datos ul {
  /* padding-top: 15px; */
  /* text-indent: 5em; */
}

.descripcion p {
  /* text-indent: 3em; */
  padding-top: 8px;
}

/* .datos { } reservado para ajustes */

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

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

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

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

/* Evitar ligaduras */
.creditos span.cargo {
  font-variant-ligatures: none;
}

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

/* Offset columnas */
.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;
}

/* Icono +/- sin margen */
.open-close .plus:before,
.open-close.minus .plus:before {
  margin-right: 0;
}

/* Flex directions */
.proyecto {
  flex-flow: column;
}

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

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

/* Items wrap */
.items {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ==========================================================================
   POSICIONAMIENTO (COORDENADAS / 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,
.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: 15px;
}

.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: 11px;
}

.modal-counter {
  bottom: 15px;
}

.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;
}

/* Nota: hay selectores repetidos aquí */
.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;
}

/* Nota: antes era solo page-info; aquí lo aplicas a toda .overlay */
.overlay {
  transition: opacity 0.3s ease !important;
}

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

.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;
}

/* Separador inferior */
.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)
   ========================================================================== */

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;
  /* margin-left: -1px; */
}

.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: "";
}

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

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

/* ==========================================================================
   LISTAS
   ========================================================================== */

.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;
}

/* ==========================================================================
   EVENTOS DE CURSOR (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;
}

.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,
/* OJO: este selector parece un bug (tienes espacio y apuntas a un hijo .expanded)
   Si lo que querías era .overlay.expanded, debería ser así: .overlay.expanded { opacity:1; } */
 /* .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,
.available {
  grid-column: 8 / 14;
}

.photo_profile img {
  width: 100%;
}

/* Panel info: alinear arriba-izquierda */
.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;
  }
}

/* Nota: media query duplicada a 1500px (como en tu otro CSS) */
@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);
  }
}

@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 {
    text-indent: 3em;
  }

  .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);
  }

  /* Masonry simple */
  .items {
    column-gap: 5px;
    column-count: 2;
    display: inherit; /* ojo: puede volverse frágil si cambia el parent */
  }

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

  /* Thumbs fluidas */
  .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 móvil */
  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: black;
  }

  .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
   ========================================================================== */

/* Quitar highlight táctil */
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 (en este tema usa --color-backdrop) */
.backdrop {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-backdrop);
  transition: opacity 0.3s ease;
  z-index: 1;
}

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

/* Indicador de disponibilidad */
.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: 1.9em;
  /* display: none; */
}

html {
  scroll-behavior: smooth;
}

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