/* Se importa la fuente desde Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  margin: 0; /* Elimina el margen del cuerpo del documento */
  padding: 0; /* Elimina el relleno del cuerpo del documento */
}

table {
  width: 100%; /* Hace que las tablas ocupen todo el ancho*/
  border-collapse: collapse; /* Elimina el espacio entre los bordes de las celdas */
}

#tabla2 {
  width: 95%; /*El ancho de la tabla con ID 'tabla2' al 95% del contenedor */
}

/*padre*/
#encabezado {
  background-image: url("FOTOS/PORTADA.jpg"); /* imagen de fondo en el encabezado */
  height: 150px; /* Altura del encabezado */
  position: relative; /* Permite posicionar elementos hijos de forma absoluta dentro del encabezado */
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; /* Añade una sombra al encabezado */
}

/*hijo*/
#foto-circular {
  width: 200px; /* Ancho*/
  height: 200px; /* Altura*/
  border-radius: 50%; /* Imagen con borde curvo al 50% para hacerla completamente circular */
  position: absolute; /* Posiciona la imagen respecto a su contenedor padre */
  bottom: -100px; /* La coloca saliendo 100px por debajo del contenedor */
  left: 30px; /* La mueve 30px desde la izquierda */
  object-fit: cover; /* Ajusta la imagen para cubrir el área sin distorsionarla */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Añade sombra a la imagen */
  transition: transform 0.3s ease; /* Se animan los cambios de transformación suavemente */
}

#contenedor {
  position: relative; /* Permite posicionar hijos absolutamente dentro de este contenedor */
}

#foto-circular:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
}

.contenido {
  text-align: justify; /* Justifica el texto */
  vertical-align: top; /* Alinea verticalmente el contenido  hasta arriba */
}

.boton {
  width: 80%; /* Ancho del botón*/
  height: 60px; /* Altura del botón */
  border-radius: 40px; /* Bordes redondeados del botón */
  background-color: #ffb400; /* Color de fondo*/
  border: none; /* Sin bordes */
  padding: 10px 20px; /* Espacio interior en el botón */
  cursor: pointer; /* Cambia el cursor a la manita */
  font-family: 'MADE sunflower'; /* Fuente */
  font-size: 20px; /* Tamaño del texto*/
  transition: transform 0.3s ease; /* Anima la transformación suavemente */
}

.boton:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
  background-color: #ff7e01; /* Cambia el color de fondo*/
}

/*SECCIÓN DE METRICAS*/
.bloques-verticales {
  display: flex; /* Usa flexbox para el diseño:  transforma un elemento en un "contenedor flexible" que permite organizar sus elementos hijos de forma más sencilla y flexible*/
  flex-direction: column; /* Organiza los elementos en columna */
  gap: 10px; /* Espacio entre los elementos */
}

/*los divs para las métricas fueron agrupados por fila ycada fila debe tener este diseño*/
.fila {
  display: grid; /* Usa diseño grid */
  grid-template-columns: 40% 30%; /* Define que las columnas sean 40% y 30% del contenedor, es decir donnde dice por ejemplo Seguidores va a ser más grande y en la cantidad más pequeño */
  gap: 15px; /* Espacio entre columnas */
  justify-content: center; /* centra el contenido horizontalmente */
  align-items: center; /* centra el contenido verticalmente*/
}

/*Textos de los divs de métricas*/
.fila h3 {
  font-size: 16px; /* Tamaño del texto, lo cuadros se verían grandes*/
  margin: 0; /* Elimina los márgenes por defecto */
  text-align: right; /* Alinea el texto a la derecha */
}

.fila p {
  margin: 0; /* Elimina los márgenes por defecto */
  text-align: left; /* Alinea el texto a la izquierda */
}

/*Diseño para los cuadros de métricas*/
.Sub {
  background-color: #ff4375; /*Color*/
  padding: 10px; /* Espaciado interno */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /*Sombra*/
}
/*Diseño para los cuadros de métricas: cantidades*/
.txt {
  background-color: #ff9aba; /* Color*/
  padding: 10px; /* Espaciado interno */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /*Sombra*/
}

hr {
  border-top: 1px solid #ff4375; /* Estilo de la línea horizontal que sirve como separador */
}

h1 {
  text-align: center; /* Centrado*/
  font-family: 'MADE sunflower';
  font-weight: bold; /* negritas */
}

h3 {
  text-align: center; /* centrado */
  font-family: 'MADE sunflower';
}

p {
  font-family: "Montserrat", sans-serif; /*Fuente importada de Google */
}


/*estilo para las imagenes de trabajo*/
.imagen-con-borde {
  width: auto; /* Ancho automático según el contenido  (ya que el tamaño de las fotos no es el mismo)*/
  max-height: 400px; /* Altura máxima de 400px (la foto con mayor altura es de 400) */
  border: 5px solid #ff4375; /* Borde para la imagen*/
  border-radius: 20px; /* Bordes redondos*/
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra en la imagen */
  transition: transform 0.3s ease; /* Transición suave al transformar */
}

.imagen-con-borde:hover {
  transform: scale(1.07); /* Aumenta tamaño de la imagen al pasar el mouse */
  border: 5px solid#ff9aba; /* Cambia el color del borde */
}