/* =========================================================
IESTP RAMIRO PRIALÉ PRIALÉ
PORTAL DE OFERTAS LABORALES
HOJA DE ESTILOS PRINCIPAL
========================================================= */

/* =========================================================
VARIABLES
========================================================= */

:root {


--verde-principal: #08783f;
--verde-oscuro: #045b2f;
--verde-claro: #16a05d;
--verde-suave: #eaf7f0;

--amarillo: #f5c400;

--blanco: #ffffff;
--negro: #1d1d1d;
--gris-oscuro: #444444;
--gris: #777777;
--gris-claro: #eeeeee;
--fondo: #f7f9f8;

--sombra: 0 8px 25px rgba(0, 0, 0, 0.08);
--sombra-hover: 0 15px 35px rgba(0, 0, 0, 0.14);

--radio: 12px;

--transicion: all 0.3s ease;


}

/* =========================================================
RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
background: var(--fondo);
color: var(--negro);
line-height: 1.6;
}

img {
max-width: 100%;
display: block;
}

a {
text-decoration: none;
color: inherit;
}

button,
input,
select {
font-family: inherit;
}

/* =========================================================
CONTENEDOR
========================================================= */

.container {
width: min(1180px, 92%);
margin: 0 auto;
}

/* =========================================================
BARRA SUPERIOR
========================================================= */

.top-bar {
background: var(--verde-oscuro);
color: var(--blanco);
font-size: 13px;
}

.top-bar-content {
min-height: 38px;


display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;


}

.top-info {
display: flex;
align-items: center;
gap: 25px;
}

.top-info span {
display: flex;
align-items: center;
gap: 7px;
}

.top-info i {
color: var(--amarillo);
}

.top-social {
display: flex;
gap: 10px;
}

.top-social a {
width: 28px;
height: 28px;


display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

transition: var(--transicion);


}

.top-social a:hover {
background: var(--verde-claro);
transform: translateY(-2px);
}

/* =========================================================
HEADER
========================================================= */

.main-header {
background: var(--blanco);


position: sticky;
top: 0;

z-index: 1000;

box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);


}

.header-content {
min-height: 92px;


display: flex;
align-items: center;
justify-content: space-between;

gap: 30px;


}

/* =========================================================
LOGO
========================================================= */

.logo-area {
display: flex;
align-items: center;
gap: 14px;


flex-shrink: 0;


}

.logo {
width: 68px;
height: 68px;


object-fit: contain;


}

.institution-name {
display: flex;
flex-direction: column;
}

.institution-title {
color: var(--verde-principal);


font-size: 12px;
font-weight: 700;

letter-spacing: 1.5px;


}

.institution-name h1 {
color: var(--verde-oscuro);


font-size: 19px;
line-height: 1.1;

font-weight: 800;

letter-spacing: .3px;


}

.institution-subtitle {
color: var(--gris);


font-size: 10px;
margin-top: 3px;


}

/* =========================================================
MENÚ
========================================================= */

.main-nav {
display: flex;
align-items: center;
gap: 4px;
}

.main-nav a {
position: relative;


padding: 10px 13px;

color: #333;

font-size: 14px;
font-weight: 600;

border-radius: 7px;

transition: var(--transicion);


}

.main-nav a:hover {
color: var(--verde-principal);
background: var(--verde-suave);
}

.main-nav a.active {
color: var(--blanco);
background: var(--verde-principal);
}

.main-nav a i {
margin-right: 5px;
}

/* =========================================================
MENÚ MÓVIL
========================================================= */

.menu-toggle {
display: none;


width: 43px;
height: 43px;

border: none;
border-radius: 8px;

background: var(--verde-principal);
color: var(--blanco);

font-size: 20px;

cursor: pointer;


}

/* =========================================================
HERO
========================================================= */

.jobs-hero {
position: relative;


min-height: 390px;

display: flex;
align-items: center;

background:
    linear-gradient(
        90deg,
        rgba(4, 91, 47, .96),
        rgba(8, 120, 63, .80),
        rgba(8, 120, 63, .45)
    ),
    url("../img/hero-ofertas.jpg")
    center / cover no-repeat;

overflow: hidden;


}

.hero-overlay {
position: absolute;
inset: 0;


background:
    radial-gradient(
        circle at 80% 50%,
        rgba(255,255,255,.13),
        transparent 35%
    );


}

.hero-content {
position: relative;
z-index: 2;
}

.hero-text {
max-width: 680px;
color: var(--blanco);
}

.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;


padding: 7px 14px;

background: rgba(255,255,255,.13);

border: 1px solid rgba(255,255,255,.22);

border-radius: 30px;

font-size: 13px;
font-weight: 600;

margin-bottom: 18px;


}

.hero-text h2 {
font-size: clamp(38px, 5vw, 62px);


line-height: 1.05;

margin-bottom: 18px;

font-weight: 800;


}

.hero-text p {
max-width: 620px;


font-size: 17px;

color: rgba(255,255,255,.92);

margin-bottom: 28px;


}

/* =========================================================
BOTONES
========================================================= */

.btn-primary,
.btn-secondary {


display: inline-flex;

align-items: center;
justify-content: center;

gap: 10px;

padding: 12px 21px;

border-radius: 7px;

font-size: 14px;
font-weight: 700;

transition: var(--transicion);


}

.btn-primary {
background: var(--amarillo);
color: #222;
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.btn-secondary {
background: var(--blanco);
color: var(--verde-principal);
}

.btn-secondary:hover {
background: var(--amarillo);
color: #222;


transform: translateY(-3px);


}

/* =========================================================
SECCIÓN OFERTAS
========================================================= */

.jobs-section {
padding: 75px 0 80px;
background: var(--fondo);
}

/* =========================================================
ENCABEZADO DE SECCIÓN
========================================================= */

.section-heading {
max-width: 720px;


margin: 0 auto 35px;

text-align: center;


}

.section-label {
display: inline-block;


color: var(--verde-principal);

font-size: 12px;

font-weight: 800;

letter-spacing: 1.8px;

margin-bottom: 8px;


}

.section-heading h2,
.institution-section h2 {


color: var(--verde-oscuro);

font-size: clamp(28px, 4vw, 40px);

line-height: 1.15;

margin-bottom: 12px;


}

.section-heading p {
color: var(--gris);
font-size: 15px;
}

/* =========================================================
HERRAMIENTAS
========================================================= */

.jobs-tools {


display: flex;

align-items: center;

justify-content: space-between;

gap: 15px;

margin-bottom: 20px;


}

.search-box {


position: relative;

flex: 1;

max-width: 600px;


}

.search-box i {


position: absolute;

left: 17px;
top: 50%;

transform: translateY(-50%);

color: var(--verde-principal);


}

.search-box input {


width: 100%;

height: 50px;

padding: 0 18px 0 48px;

border: 1px solid #ddd;

border-radius: 8px;

background: var(--blanco);

outline: none;

font-size: 14px;

transition: var(--transicion);


}

.search-box input:focus {


border-color: var(--verde-principal);

box-shadow:
    0 0 0 3px rgba(8,120,63,.10);


}

/* =========================================================
FILTRO
========================================================= */

.filter-box select {

min-width: 220px;

height: 50px;

padding: 0 40px 0 15px;

border: 1px solid #ddd;

border-radius: 8px;

background: var(--blanco);

color: #444;

outline: none;

cursor: pointer;

font-size: 14px;

transition: var(--transicion);

}

.filter-box select:focus {

border-color: var(--verde-principal);

}

/* =========================================================
ESTADO / CONTADOR
========================================================= */

.jobs-status {


margin-bottom: 20px;

color: var(--gris);

font-size: 13px;


}

.jobs-status i {


color: var(--verde-principal);

margin-right: 5px;

}

.jobs-status strong {

color: var(--verde-principal);

}

/* =========================================================
GRID
========================================================= */

.jobs-grid {

display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 25px;

}

/* =========================================================
TARJETA
========================================================= */

.job-card {

background: var(--blanco);

border-radius: var(--radio);

overflow: hidden;

box-shadow: var(--sombra);

border: 1px solid #eeeeee;

transition: var(--transicion);

}

.job-card:hover {

transform: translateY(-7px);

box-shadow: var(--sombra-hover);

}

/* =========================================================
IMAGEN DE OFERTA
========================================================= */

.job-image {

position: relative;

width: 100%;

aspect-ratio: 16 / 10;

background: #eeeeee;

overflow: hidden;

}

.job-image img {

width: 100%;
height: 100%;

object-fit: cover;

transition: transform .5s ease;

}

.job-card:hover .job-image img {

transform: scale(1.05);

}

/* =========================================================
BADGE
========================================================= */

.job-badge {

position: absolute;

top: 13px;
left: 13px;

padding: 5px 11px;

background: var(--amarillo);

color: #222;

border-radius: 20px;

font-size: 11px;

font-weight: 800;

text-transform: uppercase;

}

/* =========================================================
CONTENIDO TARJETA
========================================================= */

.job-content {

padding: 20px;

}

.job-category {

display: inline-flex;

align-items: center;

gap: 6px;

color: var(--verde-principal);

font-size: 11px;

font-weight: 800;

text-transform: uppercase;

letter-spacing: .5px;

margin-bottom: 8px;

}

.job-category i {

font-size: 12px;

}

.job-content h3 {

color: #222;

font-size: 19px;

line-height: 1.25;

margin-bottom: 8px;

}

.job-content > p {

color: var(--gris);

font-size: 13px;

min-height: 42px;

margin-bottom: 18px;


}

/* =========================================================
FOOTER TARJETA
========================================================= */

.job-footer {

padding-top: 15px;

border-top: 1px solid #eeeeee;

display: flex;

align-items: center;

justify-content: space-between;

gap: 10px;

}

.job-footer > span {

color: #888;

font-size: 10px;

line-height: 1.3;

}

.job-footer > span i {

margin-right: 4px;

}

.btn-view {

border: none;

background: transparent;

color: var(--verde-principal);

font-size: 12px;

font-weight: 800;

cursor: pointer;

white-space: nowrap;

transition: var(--transicion);

}

.btn-view:hover {

color: var(--verde-oscuro);

transform: translateX(3px);

}

.btn-view i {

margin-left: 4px;

}

/* =========================================================
SIN RESULTADOS
========================================================= */

.no-results {

display: none;

text-align: center;

padding: 60px 20px;

color: var(--gris);

}

.no-results i {

font-size: 45px;

color: #ccc;

margin-bottom: 15px;

}

.no-results h3 {

color: #444;

margin-bottom: 5px;

}

/* =========================================================
SECCIÓN EMPRESAS
========================================================= */

.companies-section {

padding: 65px 0;

background: var(--verde-principal);

}

.companies-box {

display: flex;

align-items: center;

gap: 25px;

padding: 35px 40px;

background:
    linear-gradient(
        110deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );

border: 1px solid rgba(255,255,255,.16);

border-radius: 15px;

color: var(--blanco);

}

.companies-icon {

width: 75px;
height: 75px;

flex-shrink: 0;

display: flex;

align-items: center;
justify-content: center;

background: rgba(255,255,255,.13);

border-radius: 50%;

font-size: 30px;

color: var(--amarillo);

}

.companies-content {

flex: 1;

}

.companies-content > span {

font-size: 11px;

font-weight: 800;

letter-spacing: 1.5px;

color: var(--amarillo);

}

.companies-content h2 {

font-size: 26px;

margin: 4px 0 7px;

}

.companies-content p {

max-width: 720px;

font-size: 14px;

color: rgba(255,255,255,.85);

}

/* =========================================================
SECCIÓN INSTITUCIONAL
========================================================= */

.institution-section {

padding: 80px 0;

background: var(--blanco);

}

.institution-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 70px;

align-items: center;

}

.institution-grid > div:first-child {

max-width: 570px;

}

.institution-grid p {

color: var(--gris);

font-size: 15px;

margin-bottom: 15px;

}

/* =========================================================
CARACTERÍSTICAS
========================================================= */

.institution-features {

display: flex;

flex-direction: column;

gap: 20px;

}

.feature-item {

display: flex;

align-items: flex-start;

gap: 17px;

padding: 20px;

background: var(--fondo);

border-radius: 10px;

border: 1px solid #eeeeee;

transition: var(--transicion);

}

.feature-item:hover {

transform: translateX(5px);

border-color: rgba(8,120,63,.25);

box-shadow: var(--sombra);

}

.feature-icon {


width: 50px;
height: 50px;

flex-shrink: 0;

display: flex;

align-items: center;
justify-content: center;

border-radius: 10px;

background: var(--verde-suave);

color: var(--verde-principal);

font-size: 20px;


}

.feature-item h3 {


color: var(--verde-oscuro);

font-size: 16px;

margin-bottom: 4px;


}

.feature-item p {


font-size: 13px;

margin: 0;


}

/* =========================================================
FOOTER
========================================================= */

.main-footer {


background: #073c25;

color: rgba(255,255,255,.8);


}

.footer-grid {


display: grid;

grid-template-columns:
    1.4fr
    1fr
    1fr;

gap: 60px;

padding: 60px 0;


}

.footer-logo {


width: 75px;

margin-bottom: 15px;


}

.footer-column p {


max-width: 340px;

font-size: 13px;

line-height: 1.7;


}

.footer-column h3 {


color: var(--blanco);

font-size: 16px;

margin-bottom: 18px;


}

.footer-column ul {


list-style: none;


}

.footer-column li {


margin-bottom: 9px;

font-size: 13px;


}

.footer-column li a {


transition: var(--transicion);


}

.footer-column li a:hover {


color: var(--amarillo);

padding-left: 4px;


}

/* =========================================================
REDES FOOTER
========================================================= */

.footer-social {


display: flex;

gap: 10px;

margin-top: 20px;


}

.footer-social a {


width: 35px;
height: 35px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: rgba(255,255,255,.1);

transition: var(--transicion);


}

.footer-social a:hover {


background: var(--amarillo);

color: #222;

transform: translateY(-3px);


}

/* =========================================================
CONTACTO FOOTER
========================================================= */

.contact-list li {


display: flex;

align-items: flex-start;

gap: 10px;


}

.contact-list i {


width: 17px;

color: var(--amarillo);

margin-top: 3px;


}

/* =========================================================
FOOTER BOTTOM
========================================================= */

.footer-bottom {


border-top: 1px solid rgba(255,255,255,.1);

padding: 18px 0;

text-align: center;


}

.footer-bottom p {


font-size: 11px;

color: rgba(255,255,255,.55);


}

/* =========================================================
MODAL
========================================================= */

.job-modal {


position: fixed;

inset: 0;

z-index: 5000;

display: none;

align-items: center;
justify-content: center;

padding: 20px;


}

.job-modal.active {


display: flex;


}

.modal-overlay {


position: absolute;

inset: 0;

background: rgba(0,0,0,.78);

backdrop-filter: blur(4px);


}

.modal-content {


position: relative;

z-index: 2;

width: min(850px, 95vw);

max-height: 92vh;

overflow: auto;

background: var(--blanco);

border-radius: 12px;

box-shadow: 0 25px 70px rgba(0,0,0,.35);

animation: modalEntrada .3s ease;


}

@keyframes modalEntrada {


from {
    opacity: 0;
    transform: scale(.94) translateY(20px);
}

to {
    opacity: 1;
    transform: scale(1) translateY(0);
}


}

.modal-close {


position: absolute;

top: 12px;
right: 12px;

width: 38px;
height: 38px;

z-index: 5;

border: none;

border-radius: 50%;

background: rgba(0,0,0,.65);

color: var(--blanco);

font-size: 18px;

cursor: pointer;

transition: var(--transicion);


}

.modal-close:hover {


background: var(--verde-principal);

transform: rotate(90deg);


}

.modal-header {


padding: 20px 55px 18px 25px;

border-bottom: 1px solid #eeeeee;


}

.modal-header h2 {


color: var(--verde-oscuro);

font-size: 21px;


}

.modal-body {


padding: 20px;

background: #f4f4f4;


}

.modal-body img {


width: 100%;

height: auto;

margin: auto;

border-radius: 6px;


}

/* =========================================================
BOTÓN VOLVER ARRIBA
========================================================= */

.back-to-top {


position: fixed;

right: 25px;
bottom: 25px;

width: 45px;
height: 45px;

border: none;

border-radius: 50%;

background: var(--verde-principal);

color: var(--blanco);

font-size: 16px;

cursor: pointer;

opacity: 0;
visibility: hidden;

transform: translateY(15px);

transition: var(--transicion);

z-index: 900;


}

.back-to-top.show {


opacity: 1;

visibility: visible;

transform: translateY(0);


}

.back-to-top:hover {


background: var(--verde-oscuro);

transform: translateY(-3px);


}

/* =========================================================
ANIMACIÓN DE TARJETAS
========================================================= */

.job-card {


animation: aparecer .5s ease both;


}

@keyframes aparecer {


from {

    opacity: 0;

    transform: translateY(20px);
}

to {

    opacity: 1;

    transform: translateY(0);
}


}

/* =========================================================
RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1000px) {


.main-nav {
    gap: 0;
}

.main-nav a {
    padding: 9px 8px;
    font-size: 12px;
}

.institution-name h1 {
    font-size: 16px;
}

.institution-subtitle {
    font-size: 9px;
}

.jobs-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.institution-grid {
    gap: 40px;
}


}

/* =========================================================
RESPONSIVE - MÓVIL
========================================================= */

@media (max-width: 768px) {


/* TOP BAR */

.top-bar {
    display: none;
}


/* HEADER */

.header-content {

    min-height: 75px;

    position: relative;
}

.logo {
    width: 53px;
    height: 53px;
}

.institution-name h1 {
    font-size: 14px;
}

.institution-title {
    font-size: 9px;
}

.institution-subtitle {
    display: none;
}


/* BOTÓN */

.menu-toggle {
    display: flex;

    align-items: center;
    justify-content: center;
}


/* MENÚ */

.main-nav {

    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    display: none;

    flex-direction: column;

    align-items: stretch;

    padding: 10px;

    background: var(--blanco);

    box-shadow: 0 12px 20px rgba(0,0,0,.1);

    border-top: 1px solid #eee;
}

.main-nav.active {
    display: flex;
}

.main-nav a {

    width: 100%;

    padding: 13px 15px;

    border-radius: 6px;
}


/* HERO */

.jobs-hero {

    min-height: 340px;

    background-position: center;
}

.hero-text {

    text-align: center;

    margin: auto;
}

.hero-tag {

    font-size: 11px;
}

.hero-text h2 {

    font-size: 42px;
}

.hero-text p {

    font-size: 14px;
}


/* OFERTAS */

.jobs-section {

    padding: 55px 0;
}

.jobs-tools {

    flex-direction: column;

    align-items: stretch;
}

.search-box {

    max-width: none;
}

.filter-box select {

    width: 100%;
}

.jobs-grid {

    grid-template-columns: 1fr;

    gap: 20px;
}


/* EMPRESAS */

.companies-box {

    flex-direction: column;

    align-items: flex-start;

    padding: 30px 25px;

    text-align: left;
}

.companies-icon {

    width: 60px;
    height: 60px;

    font-size: 24px;
}

.companies-content h2 {

    font-size: 23px;
}


/* INSTITUCIONAL */

.institution-section {

    padding: 60px 0;
}

.institution-grid {

    grid-template-columns: 1fr;

    gap: 35px;
}


/* FOOTER */

.footer-grid {

    grid-template-columns: 1fr;

    gap: 35px;

    padding: 45px 0;
}


}

/* =========================================================
RESPONSIVE - MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 480px) {


.container {

    width: 90%;
}

.logo-area {

    gap: 8px;
}

.logo {

    width: 48px;
    height: 48px;
}

.institution-name h1 {

    font-size: 12px;
}

.hero-text h2 {

    font-size: 35px;
}

.hero-text p {

    font-size: 13px;
}

.btn-primary {

    width: 100%;
}

.section-heading h2 {

    font-size: 29px;
}

.job-content {

    padding: 17px;
}

.job-footer {

    align-items: flex-end;
}

.companies-content h2 {

    font-size: 21px;
}

.btn-secondary {

    width: 100%;
}


}

/* =========================================================
ACCESIBILIDAD
========================================================= */

:focus-visible {


outline: 3px solid rgba(245,196,0,.7);

outline-offset: 3px;


}

/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar {


width: 9px;


}

::-webkit-scrollbar-track {


background: #eeeeee;


}

::-webkit-scrollbar-thumb {


background: var(--verde-principal);

border-radius: 10px;


}

::-webkit-scrollbar-thumb:hover {


background: var(--verde-oscuro);

}

/* =========================================
   MODAL OFERTA LABORAL
========================================= */

.job-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.job-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.85);
}

.modal-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 950px;
    max-height: 95vh;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

    animation: modalEntrada 0.3s ease;
}

@keyframes modalEntrada {

    from {
        opacity: 0;
        transform: scale(0.90);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

.modal-header {
    background: #08783f;

    color: white;

    padding: 18px 60px 18px 20px;

    text-align: center;
}

.modal-header h2 {
    margin: 0;

    font-size: 22px;
}

.modal-body {
    padding: 15px;

    max-height: calc(95vh - 80px);

    overflow: auto;

    text-align: center;

    background: #f5f5f5;
}

.modal-body img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 80vh;

    margin: 0 auto;

    object-fit: contain;
}

.modal-close {
    position: absolute;

    top: 10px;
    right: 15px;

    z-index: 5;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.2);

    color: white;

    font-size: 22px;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    transition: 0.3s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.35);

    transform: rotate(90deg);
}

body.modal-open {
    overflow: hidden;
}