/* Ocultar scrollbar pero permitir scroll */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge antiguo */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

body {
  margin: 0;            
  padding: 0;           
  min-height: 100vh;     
  display: flex;         
  flex-direction: column; 
  font-family: "timesdot", serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased; /* para Chrome y Safari */
  -moz-osx-font-smoothing: grayscale;  /* para Firefox en macOS */
  text-rendering: optimizeLegibility;
}

/* HEADER */
.headermiguel {
  display: grid;
  grid-template-columns: repeat(11,1fr);
  grid-template-rows: repeat(2,1fr);
  text-align: center;
  position: sticky;
  padding-top: 10px;
  top: 0;
  align-items: center;
  z-index: 1000;
  margin-bottom: 5px;
  background-color: white;
}
::selection {
  background: rgba(80, 131, 84, 0); /* color de fondo de la selección */
  color: #60ccfc;        /* color del texto seleccionado */
}

.headermiguel.info-mode .nombremiguel {
  background: repeating-linear-gradient(
    180deg,
    #5fd7fc 0px,
    #ffffff 2px,
    #88d3ff 4px,
    #ffffff 4px,
    #95d9fa 6px,
    #ffffff 6px,
    #7fd4fe 8px,
    #7dd6fe 8px,
    #60ccfc 9px
  );
}

.nombremiguel {
  grid-column: 5/8;
  grid-row: 1/2;
  gap: 6px;
}

/* BOTONES */
.infor, .homer {
  grid-column: 8/9;
  grid-row: 2/3;
  font-size: 15px;
  text-align: left;
  padding-left: 10px;
  cursor: pointer;
  text-decoration: underline;
}

.indexview {
  text-align: right;
  grid-column: 4/5;
  grid-row: 2/3;
  font-size: 15px;
  cursor: pointer;
  padding-right: 10px;
  text-decoration: underline;
  color: black;
    
}

/* INFO */
.info {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  text-align: center;
  transition: opacity 0.3s ease;
  z-index: 1001; /* encima del header */
}

.content {
  display: grid;
   grid-template-columns: repeat(11,1fr);
}

.center {
  grid-column: 5/8;
  text-align: center;
}

.proyectomiguel img {
  width: 100%;
}

.proyectos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clients-list{
  padding: 0;
  padding-top: 5px;
  list-style: none;
  margin: 0;
}
@font-face {
  font-family: "timesdot";
  src: url("/fonts/timesdotrom-webfont_3.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Media query para móviles (ancho máximo 768px) */
@media (max-width: 768px) {
  /* Ajustar grid del header para que los elementos se vean bien */
  .headermiguel {
    grid-template-columns: repeat(12, 1fr); /* menos columnas para móviles */
    grid-template-rows: repeat(2, auto);
    
  }

  .nombremiguel {
    grid-column: 4 / 10; /* ocupar toda la fila */
    font-size: 13px; /* tamaño más legible */
    text-align: center;
  }

  .indexview {
    grid-column: 1/3;
    grid-row: 2;
    font-size: 13px;
    text-align: right;
    padding-right: 5px;
  }

  .infor, .homer{
    grid-column: 11/13;
    grid-row: 2;
    font-size: 13px;
    text-align: left;
    padding-left: 5px;
  }

  /* Ajustar contenido central */
  .content {
    grid-template-columns: repeat(12, 1fr); /* más fácil para centrar */
  }

  .center {
    grid-column: 3 / 11; /* columnas 3 a 10 */
    text-align: center;
  }

  /* Ajustar imágenes */
  .proyectomiguel img {
    width: 100%;
    height: auto;
  }

  /* Info */
  .info {
    width: 90%; /* ocupar casi todo el ancho en móvil */
    font-size: 13px;
    margin: 0 auto;
    padding: 10px 0;
  }

  .clients-list li {
    font-size: 13px;
  }
}