.logo {
    margin-right: 20px;
    height: auto;
    width:  10px; 
    float:  left;    
   
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.navbar a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 10px 15px;
    font-size: 18px;
    align-items: center;
}
.navbar ul {
    list-style: none;
    display: flex;
    margin: 30px
    padding: 0;
}
.container-header {
    position: relative;
    width: 100%;        /* Fluida en ancho */
    height: 300px;    /* Fija en alto */
    object-fit: cover;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    align-items: center;
}
.principal {
    width: 100%;        /* Fluida en ancho */
    height: 400px;      /* Fija en alto */
    object-fit: cover;
    border-radius: 5px;
    display: block;
    align-items: center;
}
.principal {
  display: flex;
  flex-direction: column;
  gap: 40px; /* Espacio exacto de 40px entre cada sección hija */
}

.texto {
    position: absolute;       /* Desprende el texto del flujo normal para flotar */
    top: 0;                   /* Lo pega al borde superior */
    left: 0;                  /* Lo pega al borde izquierdo */
    width: 100%;              /* Cubre todo el ancho */
    height: 100%;             /* Cubre todo el alto */
    
    /* Centrado perfecto del texto usando Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centra de arriba a abajo */
    align-items: center;      /* Centra de izquierda a derecha */
    
    /* Estilos visuales del texto */
    color: #ffffff;           /* Letras blancas para que contrasten */
    text-align: center;
    padding: 50px;
    
    /* FILTRO OSCURO (Opcional): Agrega un fondo semitransparente para leer mejor */
    background-color: rgba(0, 0, 0, 0.4); /* Negro con 40% de opacidad */
}
.container-podo {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre cajas */
  gap: 20px;                     /* Separación fija entre ellas */
  max-width: 1200px;
  margin: 0 auto;                /* Centra todo el bloque en la pantalla */
  padding: 150px;
}
.podo {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
}

/* Control total de las imágenes dentro de las cajas */
.podo img {
  width: 100%;                   /* Se adapta al ancho de la caja */
  height: 200px;                 /* Altura fija para que todas se vean iguales */
  object-fit: cover;             /* Recorta la imagen sin deformarla */
}

/* Estilo del texto */
.podo p {
  padding: 15px;                 /* Margen interno para que no toque los bordes */
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 0;
}
h2 {
    color: #ec0f0f;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
}

.portada {
    max-width: 100%;         /* Evita que la imagen se salga de la caja */
    max-height: 100%;        /* Evita que la imagen se desborde si es muy alta */
    height: auto;            /* Mantiene la proporción original */
}
.podologia {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    width: 100px;
    align-items: right;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.podologia  {  
    flex: 1;
    margin-top: 0;
    color: #333;
}
.podologia p {
    line-height: 1.5;
    margin-top: 0;
    color: #000000;
}
/* .btn {  
  background-color: var(--accent);
  color: rgb(253, 36, 36);
  border: 1px solid rgb(141, 8, 8);
  padding: 12px 24px;
  border-radius: 5px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}
.btn:hover {
  background-color: var(--accent-hover);
}

.btn:active {
  transform: scale(0.98);
} */

.btn {
  background-color: #3498db; /* Color azul moderno */
  color: #ffffff;             /* Letras blancas */
  padding: 12px 24px;         /* Espacio interno (arriba/abajo izquierda/derecha) */
  font-size: 16px;            /* Tamaño del texto */
  font-weight: 600;           /* Grosor de la letra */
  border: none;               /* Elimina el borde gris por defecto */
  border-radius: 8px;         /* Esquinas suavemente redondeadas */
  cursor: pointer;            /* Transforma el cursor en una mano indicando clic */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil inferior */
  transition: all 0.3s ease;  /* Suaviza las animaciones de cambio */
}

/* Efecto al pasar el mouse por encima (Hover) */
.btn:hover {
  background-color: #2980b9; /* Tono de azul más oscuro */
  transform: translateY(-2px); /* Eleva el botón ligeramente */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

/* Efecto al hacer clic (Active) */
.btn:active {
  transform: translateY(0);   /* Vuelve a su posición original */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reduce la sombra */
}

.contenedor-principal {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre cajas */
  gap: 20px;                     /* Separación fija entre ellas */
  max-width: 1200px;
  margin: 0 auto;                /* Centra todo el bloque en la pantalla */
  padding: 20px;
}

/* Estilo individual para cada una de las 3 cajas */
.caja-tarjeta {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
}

/* Control total de las imágenes dentro de las cajas */
.caja-tarjeta img {
  width: 100%;                   /* Se adapta al ancho de la caja */
  height: 200px;                 /* Altura fija para que todas se vean iguales */
  object-fit: cover;             /* Recorta la imagen sin deformarla */
}

/* Estilo del texto */
.caja-tarjeta p {
  padding: 15px;                 /* Margen interno para que no toque los bordes */
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 0;
}


/* Estilo individual para cada una de las 3 cajas */
.ejercicio {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #fffdfd;
}

/* Control total de las imágenes dentro de las cajas */
.ejercicio img {
    width: 100%;                   /* Se adapta al ancho de la caja */
    height: 243px;                 /* Altura fija para que todas se vean iguales */
    object-fit: cover;    
     border-radius: 8px;         /* Recorta la imagen sin deformarla */
  }

/* Estilo del texto */
.ejercicio-texto {
  background-color: #ffffff; /* Fondo limpio para el texto */
  color: #f1eeee;             /* Color gris oscuro profesional para la lectura */
  flex: 1;
  padding: 20px;
  font-family: Arial, sans-serif;
  text-align: left; width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar el texto */
}
.container1 {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 60px;
}
.container_footer {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #000000;
   font-family: Arial, sans-serif;
   text-align: center;
  color: #ffffff;
  margin: 0;
  padding: 2px;
}