/* ===================================================
   GENERAL
   =================================================== */
body {
    font-family: Arial, sans-serif; /* Fuente general de todo el sitio */
    margin: 0; /* Sin margen predeterminado */
    padding: 0; /* Sin padding predeterminado */
}

/* ===================================================
   HEADER
   =================================================== */
.header {
    background-color: #4CAF50; /* Color de fondo del encabezado */
    color: white; /* Color del texto */
    padding: 15px 20px; /* Espaciado interno del header */
    display: flex; /* Flexbox para alinear elementos */
    justify-content: space-between; /* Separar logo y menú */
    align-items: center; /* Centrar verticalmente */
}

.logo {
    font-size: 24px; /* Tamaño de fuente del logo */
    font-weight: bold; /* Negrita */
}

.nav-menu {
    display: flex; /* Menú en línea */
    gap: 20px; /* Espacio entre enlaces */
}

.nav-menu a {
    color: white; /* Color de texto de los enlaces */
    text-decoration: none; /* Sin subrayado */
    font-size: 16px; /* Tamaño de fuente */
}

.nav-menu a:hover {
    text-decoration: underline; /* Subrayado al pasar el cursor */
}

/* ===================================================
   BARRA DE BÚSQUEDA
   =================================================== */
.search-bar {
    display: flex; /* Contenedor flexible */
    justify-content: center; /* Centrar barra de búsqueda */
    margin: 20px 0; /* Espaciado superior e inferior */
}

.search-bar input[type="text"] {
    padding: 10px; /* Espaciado interno del input */
    width: 250px; /* Ancho de la barra */
    font-size: 16px; /* Tamaño de texto */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px; /* Bordes redondeados */
}

.search-bar button {
    padding: 8px 12px; /* Espaciado interno del botón */
    background-color: #333; /* Color de fondo oscuro */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
}

.search-bar button:hover {
    background-color: #555; /* Cambio de color al pasar el mouse */
}

/* ===================================================
   BOTONES PRINCIPALES (CTA)
   =================================================== */
.cta-buttons button {
    background-color: #007BFF; /* Azul principal */
    color: white; /* Texto blanco */
    padding: 10px 15px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
    margin-left: 20px; /* Separación entre botones */
}

.cta-buttons button:hover {
    background-color: #0056b3; /* Azul más oscuro al pasar el mouse */
}

/* ===================================================
   CONTENIDO PRINCIPAL
   =================================================== */
.content {
    display: flex; /* Flexbox */
    flex-wrap: wrap; /* Permite que las tarjetas se ajusten */
    justify-content: center; /* Centrar horizontalmente */
    margin: 20px; /* Espaciado alrededor */
}

/* ===================================================
   TARJETAS DE IMAGEN
   =================================================== */
.image-card {
    background-color: white; /* Fondo blanco */
    width: 300px; /* Ancho fijo */
    margin: 15px; /* Separación entre tarjetas */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Ocultar contenido que sobresalga */
    border: 1px solid #d1e7dd; /* Borde suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves */
    text-align: center; /* Texto centrado */
}

.image-card:hover {
    transform: translateY(-10px); /* Levanta la tarjeta al pasar el mouse */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra al pasar el mouse */
}

.image-card img {
    width: 100%; /* Ancho completo */
    height: 200px; /* Altura fija */
    object-fit: cover; /* Ajusta imagen sin distorsión */
    transition: transform 0.3s ease; /* Animación al hacer hover */
}

.image-card:hover img {
    transform: scale(1.05); /* Zoom suave de la imagen */
}

.title {
    font-size: 18px; /* Tamaño de título */
    margin: 10px 0; /* Separación superior e inferior */
}

.description {
    font-size: 14px; /* Tamaño del texto descriptivo */
    color: #555; /* Color gris */
    margin-bottom: 20px; /* Espaciado inferior */
    padding: 0 10px; /* Espaciado lateral */
}

/* ===================================================
   SECCIÓN DE "ME GUSTA"
   =================================================== */
.like-container {
    display: flex; /* Flexbox */
    justify-content: center; /* Centrar contenido */
    align-items: center; /* Alinear verticalmente */
    gap: 10px; /* Separación entre elementos */
    margin-bottom: 20px; /* Espacio inferior */
}

.like-count {
    font-weight: bold; /* Negrita */
    font-size: 16px; /* Tamaño de texto */
}

/* Botones "Me gusta" */
.like-button {
    background-color: #006400; /* Verde principal */
    color: white; /* Texto blanco */
    padding: 8px 16px; /* Espaciado interno */
    font-size: 14px; /* Tamaño de texto */
    border: none; /* Sin borde */
    border-radius: 50px; /* Bordes completamente redondeados */
    cursor: pointer; /* Cursor de mano */
    transition: background-color 0.3s ease, transform 0.2s; /* Animación suave */
    margin-top: 10px; /* Separación superior */
    display: inline-block; /* Para alineación en línea */
}

.like-button:hover {
    background-color: #218838; /* Verde más oscuro al pasar mouse */
    transform: scale(1.05); /* Zoom al pasar mouse */
}

.like-button:active {
    transform: scale(1); /* Volver al tamaño normal al hacer clic */
}

.like-button:disabled {
    background-color: #95a5a6; /* Gris cuando está deshabilitado */
    cursor: not-allowed; /* Cursor prohibido */
}

/* ===================================================
   SECCIÓN DE BIENVENIDA
   =================================================== */
.welcome-section {
    background-color: #f0f0f0; /* Fondo gris claro */
    text-align: center; /* Texto centrado */
    padding: 40px 20px; /* Espaciado */
}

.welcome-section h2 {
    font-size: 32px; /* Tamaño del título principal */
    color: #333; /* Gris oscuro */
}

.welcome-section p {
    font-size: 18px; /* Tamaño del párrafo */
    color: #555; /* Gris medio */
}

/* ===================================================
   SECCIÓN DE BÚSQUEDA DE EMPLEO
   =================================================== */
.search-section {
    background-color: #ffffff; /* Fondo blanco */
    padding: 40px 20px; /* Espaciado */
    text-align: center; /* Centrado */
}

.search-section h3 {
    font-size: 24px; /* Título de sección */
    margin-bottom: 20px; /* Separación inferior */
}

.search-form input,
.search-form select {
    padding: 10px; /* Espaciado interno */
    margin: 10px 5px; /* Margen entre elementos */
    font-size: 16px; /* Tamaño de fuente */
    border-radius: 4px; /* Bordes redondeados */
    border: 1px solid #ddd; /* Borde gris claro */
}

.search-form button {
    padding: 10px 20px; /* Espaciado interno */
    background-color: #007BFF; /* Azul principal */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
}

.search-form button:hover {
    background-color: #0056b3; /* Azul más oscuro al pasar mouse */
}

/* ===================================================
   TESTIMONIOS
   =================================================== */
.testimonials {
    background-color: #f9f9f9; /* Fondo gris muy claro */
    padding: 40px 20px;
    text-align: center;
}

.testimonial {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    margin: 10px; /* Margen entre testimonios */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.testimonial p {
    font-size: 16px;
    color: #555;
}

.testimonial strong {
    display: block; /* Bloque para nombre o título */
    margin-top: 10px;
    font-size: 18px;
    color: #333;
}

/* ===================================================
   CONSEJOS DE CARRERA
   =================================================== */
.career-tips {
    background-color: #ffffff;
    padding: 40px 20px;
    text-align: center;
}

.career-tips h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.career-tips ul {
    list-style-type: none; /* Sin viñetas */
    padding: 0;
}

.career-tips li {
    font-size: 16px;
    margin: 10px 0;
}

.career-tips a {
    color: #007BFF; /* Enlaces azules */
    text-decoration: none;
}

.career-tips a:hover {
    text-decoration: underline;
}

/* ===================================================
   CONTACTO
   =================================================== */
.contact-us {
    background-color: #f0f0f0;
    padding: 40px 20px;
    text-align: center;
}

.contact-us h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.contact-us form {
    display: inline-block;
    text-align: left;
    max-width: 500px; /* Ancho máximo */
    width: 100%;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.contact-us label {
    font-size: 16px;
    margin: 10px 0 5px; /* Separación entre campos */
}

.contact-us input,
.contact-us textarea {
    width: 100%; /* Ocupa todo el ancho del form */
    padding: 10px;
    margin-bottom: 15px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.contact-us button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact-us button:hover {
    background-color: #0056b3;
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
    background-color: #333; /* Fondo oscuro */
    color: white;
    text-align: center;
    padding: 20px;
}

.footer nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.footer nav a:hover {
    text-decoration: underline;
}

/* ===================================================
   RESULTADOS DE BÚSQUEDA
   =================================================== */
#search-results {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    display: none; /* Oculto inicialmente */
}

#search-results ul {
    list-style-type: none; /* Sin viñetas */
    padding: 0;
}

#search-results li {
    background-color: #e6f7ff; /* Fondo azul claro */
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #cce7ff; /* Borde azul suave */
    border-radius: 5px;
}

/* ===================================================
   TRANSICIONES SUAVES
   =================================================== */
.search-bar button,
.cta-buttons button,
.like-button {
    transition: background-color 0.3s ease;
}

/* ===================================================
   ACCESIBILIDAD
   =================================================== */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #007BFF; /* Resalta campos activos */
}

/* ===================================================
   OPTIMIZACIÓN MÓVIL
   =================================================== */
@media (max-width: 768px) {
    .content {
        flex-direction: column;
        align-items: center;
    }
    .search-bar input[type="text"] {
        width: 100%; /* Barra de búsqueda responsiva */
    }
}

/* ===================================================
   PIE DE PÁGINA FIJO
   =================================================== */
.footer {
    position: fixed; /* Fijo al fondo */
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 10; /* Sobre contenido */
}

body {
    padding-bottom: 50px; /* Evita que el contenido quede cubierto por footer */
}

/* ===================================================
   BOTÓN "VOLVER"
   =================================================== */
.back-button {
    background-color: #006400; /* Verde principal */
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
    margin-top: 20px;
    display: inline-block;
}

.back-button:hover {
    background-color: #218838;
    transform: scale(1.05);
}

.back-button:active {
    transform: scale(1);
}