/* ====================================

   AltuRH - Stylesheet v4.0

   Colores de Marca: #1b4f72 #f39c12 #d35400 #2c3e50 #ecf0f1

   ==================================== */



:root {

    /* Colores de Marca */

    --primary-color: #1b4f72;

    --secondary-color: #f39c12;

    --accent-color: #d35400;

    --dark-color: #2c3e50;

    --light-color: #ecf0f1;

    --white: #ffffff;

    --success: #27ae60;

    --error: #e74c3c;

    --text-dark: #2c3e50;

    --text-light: #7f8c8d;

    

    /* Spacing */

    --spacing-xs: 0.5rem;

    --spacing-sm: 1rem;

    --spacing-md: 2rem;

    --spacing-lg: 3rem;

    --spacing-xl: 5rem;

    

    /* Typography */

    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

    

    /* Transitions */

    --transition-fast: 0.2s ease;

    --transition-normal: 0.3s ease;

    --transition-slow: 0.5s ease;

    

    /* Shadows */

    --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);

    --shadow-md: 0 5px 25px rgba(0,0,0,0.12);

    --shadow-lg: 0 10px 40px rgba(27, 79, 114, 0.15);

    

    /* Border Radius */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 20px;

    --radius-full: 50px;

}



/* ====================================

   Reset & Base Styles

   ==================================== */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



body {

    font-family: var(--font-primary);

    line-height: 1.6;

    color: var(--text-dark);

    overflow-x: hidden;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* ====================================

   Header & Navigation

   ==================================== */



header {

    background: var(--white);

    box-shadow: var(--shadow-sm);

    position: sticky;

    top: 0;

    z-index: 1000;

    transition: all var(--transition-normal);

}



header.scrolled {

    box-shadow: var(--shadow-md);

}



header.scrolled nav {

    padding: 0.3rem 0;

}



nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.6rem 0;

}



.logo {

    font-size: 1.8rem;

    font-weight: 800;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    cursor: pointer;

    letter-spacing: -0.5px;

    user-select: none;

}



/* Logo imagen (cuando se usa custom-logo de WordPress) */

.custom-logo-link,

.site-logo a,

.logo a {

    display: flex;

    align-items: center;

    text-decoration: none;

}



.custom-logo,

.site-logo img,

.logo img,

.custom-logo-link img {

    height: 85px;

    width: auto;

    max-width: 300px;

    object-fit: contain;

    display: block;

    transition: height 0.3s ease;

}



/* Logo compacto cuando el header está en modo sticky/scrolled */

header.scrolled .custom-logo,

header.scrolled .site-logo img,

header.scrolled .logo img,

header.scrolled .custom-logo-link img {

    height: 60px;

}



@media (max-width: 768px) {

    .custom-logo,

    .site-logo img,

    .logo img,

    .custom-logo-link img {

        height: 65px;

        max-width: 220px;

    }



    header.scrolled .custom-logo,

    header.scrolled .site-logo img,

    header.scrolled .logo img,

    header.scrolled .custom-logo-link img {

        height: 48px;

    }

}



.nav-links {

    display: flex;

    gap: 2.5rem;

    list-style: none;

    align-items: center;

}



.nav-links a {

    text-decoration: none;

    color: var(--text-dark);

    font-weight: 500;

    font-size: 0.95rem;

    transition: color var(--transition-normal);

    position: relative;

}



.nav-links a::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--secondary-color);

    transition: width var(--transition-normal);

}



.nav-links a:hover {

    color: var(--primary-color);

}



.nav-links a:hover::after,

.nav-links a.active::after {

    width: 100%;

}



/* Navigation Buttons (Desktop) */

.btn-nav {

    padding: 10px 20px;

    border: 2px solid transparent;

    border-radius: var(--radius-full);

    font-size: 0.9rem;

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-normal);

    background: transparent;

}



.btn-nav-postulante {

    color: var(--primary-color);

    border-color: var(--primary-color);

}



.btn-nav-postulante:hover {

    background: var(--primary-color);

    color: var(--white);

}



.btn-nav-empresa {

    color: var(--white);

    background: var(--secondary-color);

    border-color: var(--secondary-color);

}



.btn-nav-empresa:hover {

    background: var(--accent-color);

    border-color: var(--accent-color);

}



/* Mobile Menu Button */

.mobile-menu-btn {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    padding: 5px;

    z-index: 1001;

}



.mobile-menu-btn span {

    display: block;

    width: 25px;

    height: 3px;

    background: var(--primary-color);

    margin: 5px 0;

    transition: all var(--transition-normal);

    border-radius: 2px;

}



.mobile-menu-btn.active span:nth-child(1) {

    transform: rotate(45deg) translate(8px, 8px);

}



.mobile-menu-btn.active span:nth-child(2) {

    opacity: 0;

}



.mobile-menu-btn.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -7px);

}



/* ====================================

   Hero Section

   ==================================== */



.hero {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    color: var(--white);

    padding: 120px 0 80px;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.hero::before,

.hero::after {

    content: '';

    position: absolute;

    border-radius: 50%;

}



.hero::before {

    top: -50%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: rgba(243, 156, 18, 0.1);

    animation: float 6s ease-in-out infinite;

}



.hero::after {

    bottom: -30%;

    left: -5%;

    width: 400px;

    height: 400px;

    background: rgba(211, 84, 0, 0.08);

    animation: float 8s ease-in-out infinite reverse;

}



.hero-content {

    position: relative;

    z-index: 1;

}



.hero h1 {

    font-size: 3.2rem;

    margin-bottom: 1.2rem;

    font-weight: 800;

    line-height: 1.2;

    animation: fadeInUp 0.8s ease;

}



.hero p {

    font-size: 1.3rem;

    margin-bottom: 2.5rem;

    opacity: 0.95;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

    animation: fadeInUp 0.8s ease 0.2s both;

}



.cta-buttons {

    display: flex;

    gap: 1.2rem;

    justify-content: center;

    flex-wrap: wrap;

    animation: fadeInUp 0.8s ease 0.4s both;

}



/* Buttons */

.btn {

    padding: 16px 40px;

    border: none;

    border-radius: var(--radius-full);

    font-size: 1.05rem;

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-normal);

    text-decoration: none;

    display: inline-block;

    position: relative;

    overflow: hidden;

}



.btn::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

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

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}



.btn:hover::before {

    width: 300px;

    height: 300px;

}



.btn span {

    position: relative;

    z-index: 1;

}



.btn-primary {

    background: var(--secondary-color);

    color: var(--white);

}



.btn-primary:hover {

    background: var(--accent-color);

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(211, 84, 0, 0.3);

}



.btn-secondary {

    background: transparent;

    color: var(--white);

    border: 2px solid var(--white);

}



.btn-secondary:hover {

    background: var(--white);

    color: var(--primary-color);

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(0,0,0,0.2);

}



/* ====================================

   Stats Section

   ==================================== */



.stats {

    background: var(--primary-color);

    color: var(--white);

    padding: 60px 0;

    position: relative;

}



.stats::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(to right, var(--secondary-color), var(--accent-color));

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 3rem;

    text-align: center;

}



.stat-item {

    opacity: 1;

    transform: translateY(0);

    transition: all 0.6s ease;

}



.stat-item h4 {

    font-size: 3.5rem;

    margin-bottom: 0.5rem;

    font-weight: 800;

    color: var(--secondary-color);

}



.stat-item p {

    font-size: 1.1rem;

    opacity: 0.95;

    font-weight: 500;

}



/* ====================================

   Services Section

   ==================================== */



.services {

    padding: 100px 0;

    background: var(--light-color);

}



.section-title {

    text-align: center;

    font-size: 2.8rem;

    margin-bottom: 1rem;

    color: var(--primary-color);

    font-weight: 800;

}



.section-subtitle {

    text-align: center;

    font-size: 1.2rem;

    color: var(--text-light);

    margin-bottom: 4rem;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 2.5rem;

}



.service-card {

    background: var(--white);

    padding: 2.5rem;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition: all 0.4s ease;

    opacity: 0;

    transform: translateY(30px);

    border-left: 4px solid transparent;

}



.service-card.visible {

    opacity: 1;

    transform: translateY(0);

}



.service-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

    border-left-color: var(--secondary-color);

}



.service-icon {

    font-size: 3.5rem;

    margin-bottom: 1.5rem;

    display: block;

    text-align: center;

    transition: transform var(--transition-normal);

}



.service-card:hover .service-icon {

    transform: scale(1.1) rotate(5deg);

}



.service-card h3 {

    color: var(--primary-color);

    margin-bottom: 1rem;

    font-size: 1.5rem;

    font-weight: 700;

}



.service-card p {

    color: var(--text-light);

    line-height: 1.8;

}



/* ====================================

   HERO MOBILE OFERTAS

   ==================================== */



.jobs-hero-mobile {

    display: none;

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    padding: 4rem 0;

    color: var(--white);

    text-align: center;

    position: relative;

    overflow: hidden;

}



.jobs-hero-mobile::before {

    content: '';

    position: absolute;

    top: -20%;

    right: -10%;

    width: 300px;

    height: 300px;

    background: rgba(243, 156, 18, 0.1);

    border-radius: 50%;

    animation: float 6s ease-in-out infinite;

}



.jobs-hero-content {

    max-width: 500px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

}



.jobs-hero-icon {

    font-size: 4rem;

    margin-bottom: 1.5rem;

    animation: float 3s ease-in-out infinite;

}



.jobs-hero-content h2 {

    font-size: 1.8rem;

    margin-bottom: 1rem;

    font-weight: 700;

}



.jobs-hero-content p {

    font-size: 1.1rem;

    margin-bottom: 2rem;

    opacity: 0.95;

}



.hero-cta-btn {

    background: var(--secondary-color);

    color: var(--white);

    border: none;

    text-decoration: none;

    padding: 1rem 2.5rem;

    font-size: 1.1rem;

    font-weight: 600;

    border-radius: var(--radius-full);

    cursor: pointer;

    transition: all var(--transition-normal);

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);

}



.hero-cta-btn:hover {

    background: var(--accent-color);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(211, 84, 0, 0.5);

}



.hero-cta-btn .arrow {

    transition: transform 0.3s ease;

}



.hero-cta-btn:hover .arrow {

    transform: translateX(5px);

}



/* ====================================

   OFERTAS LABORALES SECTION

   ==================================== */



.job-listings {

    padding: 100px 0;

    background: var(--white);

}



/* Grid para ofertas.html */

.jobs-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 2rem;

}



/* Carousel para index.html */

.jobs-carousel-container {

    position: relative;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 60px;

    overflow: visible;

}



.jobs-carousel {

    display: flex;

    gap: 2rem;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding: 20px 0 40px;

    margin: 0 -20px;

    padding-left: 20px;

    padding-right: 20px;

}



.jobs-carousel::-webkit-scrollbar {

    display: none;

}



.jobs-carousel .job-card {

    min-width: 370px;

    max-width: 370px;

    flex-shrink: 0;

}



/* Botones de navegación del carousel de ofertas */

.jobs-carousel-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;

    height: 50px;

    background: var(--white);

    border: 2px solid var(--primary-color);

    border-radius: 50%;

    color: var(--primary-color);

    font-size: 2rem;

    cursor: pointer;

    transition: all var(--transition-normal);

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-md);

}



.jobs-carousel-btn:hover {

    background: var(--primary-color);

    color: var(--white);

    transform: translateY(-50%) scale(1.1);

}



.jobs-carousel-btn:active {

    transform: translateY(-50%) scale(0.95);

}



.jobs-carousel-btn-prev {

    left: 0;

}



.jobs-carousel-btn-next {

    right: 0;

}



/* Indicadores del carousel de ofertas */

.jobs-carousel-indicators {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 2rem;

}



.job-card {

    background: var(--white);

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: all 0.4s ease;

    position: relative;

}



.job-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}



.job-image {

    position: relative;

    height: 200px;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



/* Overlay azul sobre la imagen */

.job-image::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        rgba(27, 79, 114, 0.35) 0%,

        rgba(27, 79, 114, 0.55) 100%

    );

    z-index: 1;

}



.job-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.job-badge-active,

.job-badge-closed {

    z-index: 2;

}



/* Badge ACTIVA (verde, esquina superior derecha) */

.job-badge-active {

    position: absolute;

    top: 12px;

    right: 12px;

    background: var(--success);

    color: white;

    padding: 6px 16px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);

    z-index: 2;

}



/* Badge FINALIZADA (esquina superior izquierda, pill) */

.job-badge-closed {

    position: absolute;

    top: 12px;

    left: 12px;

    background: rgba(44, 62, 80, 0.92);

    color: white;

    padding: 6px 14px;

    border-radius: 20px;

    font-size: 0.82rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

    backdrop-filter: blur(4px);

    border: 1px solid rgba(255,255,255,0.2);

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 5px;

}



/* Overlay oscuro para trabajos cerrados */

.job-card.closed .job-image::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.3);

    z-index: 1;

}



.job-content {

    padding: 1.5rem;

}



.job-title {

    font-size: 1.4rem;

    margin-bottom: 0.5rem;

    color: var(--primary-color);

    font-weight: 700;

}



.job-title a {

    text-decoration: none;

    color: var(--primary-color);

    transition: color var(--transition-fast);

}



.job-title a:hover {

    color: var(--secondary-color);

}



.job-card.closed .job-title {

    color: var(--text-light);

    text-decoration: line-through;

}



.job-company {

    font-size: 1rem;

    color: var(--secondary-color);

    margin-bottom: 0.8rem;

    font-weight: 600;

}



.job-details {

    display: flex;

    gap: 1rem;

    margin-bottom: 1rem;

    flex-wrap: wrap;

}



.job-detail-item {

    font-size: 0.9rem;

    color: var(--text-light);

}



.job-description {

    font-size: 0.95rem;

    color: var(--text-light);

    margin-bottom: 1.5rem;

    line-height: 1.6;

}



.job-card.closed .job-description {

    opacity: 0.6;

}



.job-tags {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

    margin-bottom: 1.5rem;

}



.job-tag {

    background: var(--light-color);

    padding: 5px 12px;

    border-radius: 15px;

    font-size: 0.85rem;

    color: var(--text-dark);

}



.job-card-actions {

    display: flex;

    gap: 0.6rem;

    align-items: center;

    margin-top: 0.5rem;

}



/* Botón principal - Postularme Ahora */

.job-apply-btn {

    flex: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    padding: 11px 14px;

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: white;

    border: none;

    border-radius: var(--radius-md);

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-normal);

    font-size: 0.95rem;

    text-align: center;

    text-decoration: none;

    box-sizing: border-box;

}



.job-apply-btn:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(211, 84, 0, 0.3);

    color: white;

    text-decoration: none;

}



.job-apply-btn:disabled {

    background: #ccc;

    cursor: not-allowed;

    transform: none;

}



/* Botón secundario - Ver Oferta */

.job-view-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    padding: 11px 14px;

    background: transparent;

    color: var(--primary-color);

    border: 2px solid var(--primary-color);

    border-radius: var(--radius-md);

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-normal);

    font-size: 0.85rem;

    text-decoration: none;

    white-space: nowrap;

    box-sizing: border-box;

}



.job-view-btn:hover {

    background: var(--primary-color);

    color: white;

    text-decoration: none;

    transform: translateY(-2px);

}



.job-view-btn svg {

    flex-shrink: 0;

}



/* ====================================

   FILTROS COMPACTOS (ofertas.html)

   ==================================== */



.ofertas-header {

    background: linear-gradient(135deg, #1b4f72 0%, #2c3e50 100%);

    color: white;

    padding: 100px 0 60px;

    text-align: center;

}



.ofertas-header h1 {

    font-size: 2.8rem;

    margin-bottom: 1rem;

}



.ofertas-header p {

    font-size: 1.2rem;

    opacity: 0.95;

}



/* Sección de filtros compacta */

.filters-section-compact {

    background: var(--white);

    padding: 1.5rem 0;

    border-bottom: 2px solid var(--light-color);

}



/* Barra de búsqueda principal */

.search-bar-main {

    margin-bottom: 1rem;

}



.search-bar-main input {

    width: 100%;

    padding: 14px 20px 14px 50px;

    border: 2px solid var(--light-color);

    border-radius: var(--radius-full);

    font-size: 1rem;

    transition: all var(--transition-normal);

    background: var(--white) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%232c3e50" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat 18px center;

}



.search-bar-main input:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



/* Filtros en línea */

.filters-compact {

    display: flex;

    gap: 0.8rem;

    flex-wrap: wrap;

    align-items: center;

    margin-bottom: 1rem;

}



.filter-select {

    padding: 10px 16px;

    border: 2px solid var(--light-color);

    border-radius: var(--radius-md);

    font-size: 0.95rem;

    background: var(--white);

    cursor: pointer;

    transition: all var(--transition-normal);

    min-width: 140px;

}



.filter-select:hover {

    border-color: var(--secondary-color);

}



.filter-select:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



.btn-clear-compact {

    padding: 10px 20px;

    border: 2px solid var(--text-light);

    background: var(--white);

    color: var(--text-light);

    border-radius: var(--radius-md);

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-normal);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.btn-clear-compact:hover {

    background: var(--text-light);

    color: var(--white);

}



/* Contador de resultados */

.results-count {

    color: var(--text-light);

    font-size: 0.95rem;

}



.results-count strong {

    color: var(--primary-color);

    font-size: 1.1rem;

}



.ofertas-content {

    padding: 2rem 0 5rem;

}



/* Botón Cargar Más */

.load-more-container {

    text-align: center;

    margin-top: 3rem;

    padding-bottom: 2rem;

}



.btn-load-more {

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: var(--white);

    border: none;

    padding: 16px 48px;

    font-size: 1.05rem;

    font-weight: 600;

    border-radius: var(--radius-full);

    cursor: pointer;

    transition: all var(--transition-normal);

    display: inline-flex;

    align-items: center;

    gap: 0.8rem;

    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);

}



.btn-load-more:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(211, 84, 0, 0.4);

}



.btn-load-more:active {

    transform: translateY(-1px);

}



.load-more-icon {

    font-size: 1.3rem;

    transition: transform var(--transition-normal);

}



.btn-load-more:hover .load-more-icon {

    transform: translateY(3px);

}



.no-results {

    text-align: center;

    padding: 4rem 2rem;

    color: var(--text-light);

}



.no-results h3 {

    font-size: 1.5rem;

    color: var(--text-dark);

    margin-bottom: 1rem;

}



/* ====================================

   Blog Carousel Section

   ==================================== */



.blog-section {

    padding: 100px 0;

    background: var(--light-color);

}



.blog-carousel-container {

    position: relative;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 60px;

    overflow: visible;

}



.blog-carousel {

    display: flex;

    gap: 2rem;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding: 20px 0 40px;

    margin: 0 -20px;

    padding-left: 20px;

    padding-right: 20px;

}



.blog-carousel::-webkit-scrollbar {

    display: none;

}



.blog-card {

    min-width: 350px;

    max-width: 350px;

    background: var(--white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition: all 0.4s ease;

    overflow: hidden;

    flex-shrink: 0;

}



.blog-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}



.blog-image {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

}



.blog-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



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

    transform: scale(1.1);

}



.blog-category {

    position: absolute;

    top: 15px;

    right: 15px;

    background: var(--secondary-color);

    color: var(--white);

    padding: 6px 15px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

}



.blog-content {

    padding: 2rem;

}



.blog-date {

    color: var(--text-light);

    font-size: 0.9rem;

    display: block;

    margin-bottom: 0.8rem;

}



.blog-card h3 {

    color: var(--primary-color);

    font-size: 1.3rem;

    margin-bottom: 1rem;

    line-height: 1.4;

    font-weight: 700;

}



.blog-card p {

    color: var(--text-light);

    line-height: 1.6;

    margin-bottom: 1.5rem;

}



.blog-link {

    color: var(--secondary-color);

    text-decoration: none;

    font-weight: 600;

    font-size: 1rem;

    transition: all var(--transition-normal);

    display: inline-block;

}



.blog-link:hover {

    color: var(--accent-color);

    transform: translateX(5px);

}



/* Carousel Controls */

.carousel-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;

    height: 50px;

    background: var(--white);

    border: 2px solid var(--primary-color);

    border-radius: 50%;

    color: var(--primary-color);

    font-size: 2rem;

    cursor: pointer;

    transition: all var(--transition-normal);

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-md);

}



.carousel-btn:hover {

    background: var(--primary-color);

    color: var(--white);

    transform: translateY(-50%) scale(1.1);

}



.carousel-btn:active {

    transform: translateY(-50%) scale(0.95);

}



.carousel-btn-prev {

    left: 0;

}



.carousel-btn-next {

    right: 0;

}



/* Carousel Indicators */

.carousel-indicators {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 2rem;

}



.carousel-indicator {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #d0d0d0;

    border: none;

    cursor: pointer;

    transition: all var(--transition-normal);

}



.carousel-indicator.active {

    background: var(--secondary-color);

    width: 30px;

    border-radius: 6px;

}



/* Enlace Ver Todos */

.link-ver-todos {

    display: inline-block;

    color: var(--secondary-color);

    text-decoration: none;

    font-size: 1.1rem;

    font-weight: 600;

    transition: all var(--transition-normal);

    position: relative;

}



.link-ver-todos::after {

    content: '';

    position: absolute;

    bottom: -3px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--secondary-color);

    transition: width var(--transition-normal);

}



.link-ver-todos:hover {

    color: var(--accent-color);

    transform: translateX(5px);

}



.link-ver-todos:hover::after {

    width: 100%;

}



/* ====================================

   Blog Grid (blog.html)

   ==================================== */



.blog-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 2rem;

}



.blog-card-full {

    background: var(--white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition: all 0.4s ease;

    overflow: hidden;

}



.blog-card-full:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}



.blog-card-full .blog-image {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

}



.blog-card-full .blog-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.blog-card-full:hover .blog-image img {

    transform: scale(1.1);

}



.blog-card-full .blog-content {

    padding: 2rem;

}



.blog-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

    font-size: 0.85rem;

    color: var(--text-light);

}



.blog-author {

    font-style: italic;

}



.blog-card-full h3 {

    color: var(--primary-color);

    font-size: 1.4rem;

    margin-bottom: 1rem;

    line-height: 1.4;

    font-weight: 700;

}



.blog-card-full p {

    color: var(--text-light);

    line-height: 1.6;

    margin-bottom: 1.5rem;

}



.blog-tags {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

    margin-bottom: 1.5rem;

}



.blog-tag-item {

    background: var(--light-color);

    padding: 5px 12px;

    border-radius: 15px;

    font-size: 0.85rem;

    color: var(--text-dark);

}



@media (max-width: 768px) {

    .blog-grid {

        grid-template-columns: 1fr;

    }

}



/* ====================================

   Footer con Menús Colapsables

   ==================================== */



footer {

    background: var(--dark-color);

    color: var(--white);

    padding: 60px 0 30px;

    position: relative;

    z-index: 10002;

}



footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(to right, var(--secondary-color), var(--accent-color));

}



.footer-content {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}



.footer-section {

    border-bottom: 1px solid rgba(255,255,255,0.1);

    padding-bottom: 1rem;

}



.footer-toggle {

    width: 100%;

    background: none;

    border: none;

    color: var(--white);

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0;

    transition: all var(--transition-normal);

}



.footer-toggle h4 {

    color: var(--secondary-color);

    font-size: 1.2rem;

    font-weight: 700;

    margin: 0;

    text-align: left;

}



.footer-toggle-icon {

    font-size: 1.5rem;

    font-weight: 300;

    color: var(--secondary-color);

    transition: transform var(--transition-normal);

}



.footer-toggle.active .footer-toggle-icon {

    transform: rotate(45deg);

}



.footer-collapse {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease, opacity 0.3s ease;

    opacity: 0;

}



.footer-collapse.active {

    max-height: 500px;

    opacity: 1;

    margin-top: 1rem;

}



.footer-collapse p {

    color: rgba(255,255,255,0.8);

    line-height: 1.8;

    margin-bottom: 1rem;

}



.footer-collapse a {

    color: rgba(255,255,255,0.8);

    text-decoration: none;

    display: block;

    margin-bottom: 0.8rem;

    transition: all var(--transition-normal);

    padding-left: 0;

}



.footer-collapse a:hover {

    color: var(--secondary-color);

    padding-left: 10px;

}



.social-links {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

}



.social-links a {

    width: 45px;

    height: 45px;

    background: rgba(243, 156, 18, 0.2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all var(--transition-normal);

    padding: 0 !important;

}



.social-links a:hover {

    background: var(--secondary-color);

    transform: translateY(-3px);

}



.social-links a svg {

    fill: var(--white);

}



.footer-bottom {

    text-align: center;

    padding-top: 2rem;

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

    color: rgba(255,255,255,0.6);

}



/* Desktop: Footer siempre expandido */

@media (min-width: 769px) {

    .footer-toggle {

        pointer-events: none;

        cursor: default;

    }

    

    .footer-toggle-icon {

        display: none;

    }

    

    .footer-collapse {

        max-height: none !important;

        opacity: 1 !important;

        margin-top: 1.5rem !important;

    }

    

    .footer-section {

        border-bottom: none;

    }

}



/* ====================================

   Scroll to Top Button

   ==================================== */



.scroll-top {

    position: fixed;

    bottom: 120px;

    right: 30px;

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: var(--white);

    border: none;

    border-radius: 50%;

    cursor: pointer;

    display: none;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    box-shadow: 0 5px 20px rgba(211, 84, 0, 0.4);

    transition: all var(--transition-normal);

    z-index: 10002;

}



.scroll-top.visible {

    display: flex;

}



.scroll-top:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(211, 84, 0, 0.5);

}



.scroll-top:active {

    transform: translateY(-2px);

}



/* ====================================

   Mobile Bottom Actions (Botones Flotantes)

   ==================================== */



.mobile-bottom-actions {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    gap: 8px;

    padding: 8px;

    padding-bottom: calc(8px + env(safe-area-inset-bottom));

    background: var(--white);

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    z-index: 10001;

    animation: slideUpBottom 0.3s ease;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.mobile-action-btn {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 14px 16px;

    border: none;

    border-radius: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: all var(--transition-normal);

    position: relative;

    overflow: hidden;

    min-height: 68px;

    color: var(--white);

}



.mobile-action-btn::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

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

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}



.mobile-action-btn:active::before {

    width: 300px;

    height: 300px;

}



.mobile-action-icon {

    font-size: 2rem;

    margin-bottom: 4px;

    position: relative;

    z-index: 1;

}



.mobile-action-text {

    font-size: 0.85rem;

    position: relative;

    z-index: 1;

}



.mobile-action-postulante {

    background: var(--primary-color);

}



.mobile-action-postulante:active {

    background: #153d5a;

    transform: scale(0.97);

}



.mobile-action-empresa {

    background: var(--secondary-color);

}



.mobile-action-empresa:active {

    background: var(--accent-color);

    transform: scale(0.97);

}



/* ====================================

   Portal Modal

   ==================================== */



.portal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(5px);

    z-index: 20000;

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-normal);

}



.portal-overlay.active {

    opacity: 1;

    visibility: visible;

}



.portal-container {

    position: absolute;

    top: 0;

    right: -100%;

    width: 100%;

    max-width: 600px;

    height: 100%;

    background: var(--white);

    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);

    overflow-y: auto;

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.portal-overlay.active .portal-container {

    right: 0;

}



.portal-close {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 40px;

    height: 40px;

    background: var(--light-color);

    border: none;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--text-dark);

    transition: all var(--transition-normal);

    z-index: 10;

}



.portal-close:hover {

    background: var(--accent-color);

    color: var(--white);

    transform: rotate(90deg);

}



.portal-content {

    padding: 80px 40px 40px;

}



.portal-section {

    display: none;

}



.portal-section.active {

    display: block;

    animation: slideInRight 0.4s ease;

}



.portal-header {

    text-align: center;

    margin-bottom: 3rem;

}



.portal-icon {

    font-size: 4rem;

    margin-bottom: 1rem;

}



.portal-header h2 {

    color: var(--primary-color);

    font-size: 2rem;

    margin-bottom: 0.5rem;

    font-weight: 700;

}



.portal-header p {

    color: var(--text-light);

    font-size: 1.05rem;

}



/* Form Styles */

.portal-form {

    max-width: 500px;

    margin: 0 auto;

}



.form-group {

    margin-bottom: 1.8rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.6rem;

    font-weight: 600;

    color: var(--text-dark);

    font-size: 0.95rem;

}



.form-group input,

.form-group textarea,

.form-group select {

    width: 100%;

    padding: 14px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-md);

    font-size: 1rem;

    transition: all var(--transition-normal);

    font-family: inherit;

    background: var(--white);

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



.form-group textarea {

    resize: vertical;

    min-height: 120px;

}



.file-upload-wrapper {

    position: relative;

}



.file-upload {

    border: 2px dashed var(--secondary-color);

    padding: 2.5rem;

    text-align: center;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all var(--transition-normal);

    background: rgba(243, 156, 18, 0.05);

}



.file-upload:hover {

    background: rgba(243, 156, 18, 0.1);

    border-color: var(--accent-color);

}



.file-upload p {

    color: var(--accent-color);

    font-weight: 600;

    margin: 0;

}



.file-upload input {

    display: none;

}



.file-name {

    margin-top: 0.5rem;

    color: var(--success);

    font-size: 0.9rem;

    font-weight: 500;

}



.btn-submit {

    width: 100%;

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: var(--white);

    padding: 16px;

    font-size: 1.1rem;

    font-weight: 700;

    border: none;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all var(--transition-normal);

    margin-top: 1rem;

}



.btn-submit:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(211, 84, 0, 0.3);

    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));

}



.btn-submit:active {

    transform: translateY(0);

}



.btn-submit:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}



/* Loading Spinner */

.spinner {

    display: inline-block;

    width: 20px;

    height: 20px;

    border: 3px solid rgba(255,255,255,0.3);

    border-top-color: var(--white);

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}



/* ====================================

   Animations

   ==================================== */



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes float {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-20px);

    }

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideUpBottom {

    from {

        transform: translateY(100%);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



@keyframes spin {

    to { 

        transform: rotate(360deg); 

    }

}



/* ====================================

   Responsive Design

   ==================================== */



/* Desktop - Ocultar botones móviles */

@media (min-width: 769px) {

    .mobile-bottom-actions {

        display: none !important;

    }

    

    .jobs-hero-mobile {

        display: none !important;

    }

}



/* Tablet */

@media (max-width: 1024px) {

    .portal-container {

        max-width: 500px;

    }

}



/* Mobile */

@media (max-width: 768px) {

    /* Hero Mobile Ofertas - MOSTRAR */

    .jobs-hero-mobile {

        display: block !important;

    }

    

    /* Ofertas Laborales - OCULTAR por defecto */

    .job-listings {

        display: none;

    }

    

    /* Carousel de ofertas en mobile */

    .jobs-carousel-container {

        padding: 0 20px;

    }

    

    .jobs-carousel-btn {

        display: none;

    }

    

    .jobs-carousel .job-card {

        min-width: 300px;

        max-width: 300px;

    }

    

    /* Blog carousel en mobile */

    .blog-carousel-container {

        padding: 0 20px;

    }

    

    .carousel-btn {

        display: none;

    }

    

    /* Carousel: mantener ancho fijo */

    .blog-carousel .blog-card {

        min-width: 300px;

        max-width: 300px;

    }



    /* Archive/grid: ancho completo */

    .blog-grid .blog-card {

        min-width: 100%;

        max-width: 100%;

    }



    .blog-image {

        height: 200px;

    }

    

    /* Filtros en mobile */

    .ofertas-header h1 {

        font-size: 2rem;

    }



    .filters-compact {

        flex-direction: column;

        width: 100%;

    }



    .filter-select,

    .btn-clear-compact {

        width: 100%;

    }

    

    /* Hero adjustments */

    .hero h1 {

        font-size: 2rem;

    }

    

    .hero p {

        font-size: 1.1rem;

    }

    

    /* Hide desktop-only items */

    .desktop-only {

        display: none;

    }

    

    /* Show mobile bottom actions */

    .mobile-bottom-actions {

        display: flex !important;

    }

    

    /* Add padding to body for fixed buttons */

    body {

        padding-bottom: 90px;

    }

    

    /* Hide hero CTA buttons on mobile */

    .hero .cta-buttons {

        display: none;

    }

    

    /* Adjust scroll-to-top button position */

    .scroll-top {

        bottom: 110px;

        right: 15px;

        z-index: 10002;

    }

    

    /* Mobile menu */

    .mobile-menu-btn {

        display: block;

    }

    

    .nav-links {

        position: fixed;

        top: 70px;

        left: -100%;

        width: 100%;

        height: calc(100vh - 70px);

        background: var(--white);

        flex-direction: column;

        justify-content: flex-start;

        padding: 2rem;

        transition: left var(--transition-normal);

        box-shadow: var(--shadow-md);

        overflow-y: auto;

    }

    

    .nav-links.active {

        left: 0;

    }

    

    .nav-links li {

        width: 100%;

        text-align: center;

        margin: 0.5rem 0;

    }

    

    .nav-links a {

        display: block;

        padding: 1rem;

        font-size: 1.1rem;

    }

    

    /* Portal full width on mobile */

    .portal-container {

        max-width: 100%;

    }

    

    .portal-content {

        padding: 80px 20px 40px;

    }

    

    /* Section adjustments */

    .section-title {

        font-size: 2rem;

    }

    

    .services-grid {

        grid-template-columns: 1fr;

    }

    

    .jobs-grid {

        grid-template-columns: 1fr;

    }

    

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }

    

    /* PWA-style mobile nav */

    body.portal-open {

        overflow: hidden;

        padding-bottom: 0;

    }

    

    /* Hide mobile actions when portal is open */

    body.portal-open .mobile-bottom-actions {

        display: none !important;

    }

    

    .job-badge-closed {

        padding: 10px 60px;

        font-size: 1rem;

    }

}



@media (max-width: 480px) {

    .stats-grid {

        grid-template-columns: 1fr;

    }

    

    .stat-item h4 {

        font-size: 2.5rem;

    }

    

    .mobile-bottom-actions {

        display: flex !important;

    }

    

    .jobs-carousel .job-card {

        min-width: 280px;

        max-width: 280px;

    }

}



/* ====================================

   WORDPRESS - Adaptaciones específicas

   Estas clases se agregan al CSS original

   del mockup sin modificarlo

   ==================================== */



/* WordPress Theme Header (obligatorio) */

/*

Theme Name: AltuRH Theme

Theme URI: https://alturh.com.ar

Author: TuEcommerceYa

Version: 1.0.0

Text Domain: alturh

*/



/* === PORTAL OVERLAY CON CF7 === */



/* El portal usa los mismos estilos del mockup.

   Solo adaptamos los formularios internos para CF7 */



.portal-form .wpcf7-form {

    max-width: 100%;

}



.portal-form .wpcf7-form .form-group {

    margin-bottom: 1.5rem;

}



.portal-form .wpcf7-form label {

    display: block;

    margin-bottom: 0.6rem;

    font-weight: 600;

    color: var(--text-dark);

    font-size: 0.95rem;

}



.portal-form .wpcf7-form input[type="text"],

.portal-form .wpcf7-form input[type="email"],

.portal-form .wpcf7-form input[type="tel"],

.portal-form .wpcf7-form input[type="url"],

.portal-form .wpcf7-form textarea,

.portal-form .wpcf7-form select {

    width: 100%;

    padding: 14px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-md);

    font-size: 1rem;

    transition: all var(--transition-normal);

    font-family: inherit;

    background: var(--white);

}



.portal-form .wpcf7-form input:focus,

.portal-form .wpcf7-form textarea:focus,

.portal-form .wpcf7-form select:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



.portal-form .wpcf7-form textarea {

    resize: vertical;

    min-height: 120px;

}



.portal-form .wpcf7-form input[type="submit"] {

    width: 100%;

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: var(--white);

    padding: 16px;

    font-size: 1.1rem;

    font-weight: 700;

    border: none;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all var(--transition-normal);

    margin-top: 1rem;

}



.portal-form .wpcf7-form input[type="submit"]:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(211, 84, 0, 0.3);

    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));

}



/* Upload de CV en CF7 */

.portal-form .wpcf7-form input[type="file"] {

    border: 2px dashed var(--secondary-color);

    padding: 2rem;

    border-radius: var(--radius-md);

    background: rgba(243, 156, 18, 0.05);

    cursor: pointer;

    width: 100%;

}



/* Mensajes de CF7 */

.portal-form .wpcf7-not-valid-tip {

    color: var(--error);

    font-size: 0.85rem;

    margin-top: 0.25rem;

    display: block;

}



.portal-form .wpcf7-response-output {

    margin-top: 1rem;

    padding: 1rem;

    border-radius: var(--radius-md);

    border: 2px solid transparent;

    font-weight: 500;

}



.portal-form .wpcf7-mail-sent-ok {

    background: rgba(39, 174, 96, 0.1);

    color: var(--success);

    border-color: var(--success);

}



.portal-form .wpcf7-validation-errors,

.portal-form .wpcf7-acceptance-missing {

    background: rgba(231, 76, 60, 0.1);

    color: var(--error);

    border-color: var(--error);

}



/* Acceptance checkbox CF7 */

.portal-form .wpcf7-acceptance {

    display: flex;

    align-items: flex-start;

    gap: 0.5rem;

    font-size: 0.9rem;

    color: var(--text-light);

}



/* === FORMULARIO DE CONTACTO (página de contacto) === */



.contact-form-section {

    padding: 80px 0;

    background: var(--white);

}



.contact-form-section .wpcf7-form input[type="text"],

.contact-form-section .wpcf7-form input[type="email"],

.contact-form-section .wpcf7-form input[type="tel"],

.contact-form-section .wpcf7-form textarea,

.contact-form-section .wpcf7-form select {

    width: 100%;

    padding: 14px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-md);

    font-size: 1rem;

    transition: all var(--transition-normal);

    font-family: inherit;

    margin-bottom: 1rem;

}



.contact-form-section .wpcf7-form input:focus,

.contact-form-section .wpcf7-form textarea:focus,

.contact-form-section .wpcf7-form select:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



.contact-form-section .wpcf7-form input[type="submit"] {

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: white;

    padding: 14px 40px;

    border: none;

    border-radius: var(--radius-full);

    font-size: 1.05rem;

    font-weight: 700;

    cursor: pointer;

    transition: all var(--transition-normal);

}



.contact-form-section .wpcf7-form input[type="submit"]:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(211, 84, 0, 0.3);

}



/* Form rows para el contacto */

.form-row {

    display: flex;

    gap: 1rem;

    margin-bottom: 0;

}



.form-col {

    flex: 1;

}



.form-col-full {

    flex: 1 1 100%;

}



/* === PAGINACIÓN WORDPRESS === */



.page-numbers {

    display: flex;

    justify-content: center;

    gap: 0.5rem;

    margin: 3rem 0;

}



.page-numbers a,

.page-numbers span {

    padding: 10px 16px;

    border: 2px solid var(--light-color);

    border-radius: var(--radius-md);

    color: var(--text-dark);

    text-decoration: none;

    font-weight: 500;

    transition: all var(--transition-fast);

}



.page-numbers a:hover {

    background: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

}



.page-numbers .current {

    background: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

}



/* === SIDEBAR WORDPRESS === */



.widget {

    background: var(--white);

    padding: 1.5rem;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    margin-bottom: 1.5rem;

}



.widget-title {

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 1rem;

    padding-bottom: 0.75rem;

    border-bottom: 2px solid var(--secondary-color);

}



.widget ul {

    list-style: none;

}



.widget li {

    padding: 0.5rem 0;

    border-bottom: 1px solid var(--light-color);

}



.widget li:last-child {

    border-bottom: none;

}



.widget a {

    color: var(--text-dark);

    text-decoration: none;

    transition: color var(--transition-fast);

}



.widget a:hover {

    color: var(--secondary-color);

}



/* === SEARCH FORM WORDPRESS === */



.search-form {

    display: flex;

    gap: 0.5rem;

}



.search-field {

    flex: 1;

    padding: 12px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-full);

    font-family: inherit;

    font-size: 1rem;

}



.search-field:focus {

    outline: none;

    border-color: var(--secondary-color);

}



.search-submit {

    background: var(--secondary-color);

    color: white;

    border: none;

    padding: 12px 20px;

    border-radius: var(--radius-full);

    cursor: pointer;

    font-weight: 600;

    transition: all var(--transition-fast);

}



.search-submit:hover {

    background: var(--accent-color);

}



/* === POST INDIVIDUAL === */



.post-content-area {

    padding: 60px 0;

}



.post-header {

    margin-bottom: 2rem;

}



.post-meta-info {

    display: flex;

    gap: 1rem;

    font-size: 0.9rem;

    color: var(--text-light);

    margin-bottom: 1rem;

    flex-wrap: wrap;

}



.post-thumbnail-main {

    width: 100%;

    border-radius: var(--radius-lg);

    overflow: hidden;

    margin-bottom: 2rem;

}



.post-thumbnail-main img {

    width: 100%;

    height: auto;

}



.post-body {

    font-size: 1.1rem;

    line-height: 1.9;

    color: var(--text-dark);

}



.post-body h2,

.post-body h3 {

    color: var(--primary-color);

    margin: 2rem 0 1rem;

}



.post-body ul,

.post-body ol {

    margin-left: 1.5rem;

    margin-bottom: 1rem;

}



.post-body li {

    margin-bottom: 0.5rem;

}



.post-body blockquote {

    border-left: 4px solid var(--secondary-color);

    padding-left: 1.5rem;

    margin: 2rem 0;

    font-style: italic;

    color: var(--text-light);

}



/* Tags del post */

.post-tags-list {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 2px solid var(--light-color);

}



.post-tag-link {

    background: var(--light-color);

    color: var(--text-dark);

    padding: 6px 14px;

    border-radius: 20px;

    font-size: 0.9rem;

    text-decoration: none;

    transition: all var(--transition-fast);

}



.post-tag-link:hover {

    background: var(--secondary-color);

    color: white;

}



/* Navegación entre posts */

.post-nav {

    display: flex;

    justify-content: space-between;

    margin: 3rem 0;

    gap: 1rem;

}



.post-nav a {

    padding: 1rem 1.5rem;

    background: var(--light-color);

    border-radius: var(--radius-md);

    color: var(--text-dark);

    text-decoration: none;

    font-weight: 500;

    transition: all var(--transition-fast);

    flex: 1;

}



.post-nav a:hover {

    background: var(--primary-color);

    color: white;

}



/* === 404 === */



.error-404-content {

    text-align: center;

    padding: 100px 20px;

}



.error-404-number {

    font-size: 10rem;

    font-weight: 800;

    color: var(--light-color);

    line-height: 1;

    margin-bottom: 1rem;

}



.error-404-title {

    font-size: 2.5rem;

    color: var(--primary-color);

    margin-bottom: 1rem;

}



.error-404-description {

    font-size: 1.2rem;

    color: var(--text-light);

    margin-bottom: 2rem;

}



/* === BACK TO TOP (adaptado del mockup) === */



.scroll-top {

    display: none;

    position: fixed;

    bottom: 30px;

    right: 20px;

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary-color), var(--dark-color));

    color: var(--white);

    border: none;

    border-radius: 50%;

    font-size: 1.5rem;

    cursor: pointer;

    z-index: 10001;

    transition: all var(--transition-normal);

    box-shadow: var(--shadow-md);

    align-items: center;

    justify-content: center;

}



.scroll-top.visible {

    display: flex;

}



.scroll-top:hover {

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    transform: translateY(-3px);

    box-shadow: var(--shadow-lg);

}



/* === NEWSLETTER EN FOOTER === */



.footer-newsletter .wpcf7-form {

    display: flex;

    gap: 0.5rem;

    flex-direction: column;

}



.footer-newsletter input[type="email"] {

    padding: 12px 16px;

    border: none;

    border-radius: var(--radius-md);

    font-size: 0.95rem;

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

    color: white;

    outline: none;

}



.footer-newsletter input[type="email"]::placeholder {

    color: rgba(255,255,255,0.6);

}



.footer-newsletter input[type="submit"] {

    background: var(--secondary-color);

    color: white;

    border: none;

    padding: 12px;

    border-radius: var(--radius-md);

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-fast);

}



.footer-newsletter input[type="submit"]:hover {

    background: var(--accent-color);

}



/* === PÁGINA DE OFERTAS (archive-ofertas.php) === */



.ofertas-page-header {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    color: white;

    padding: 80px 0;

    text-align: center;

}



.ofertas-page-header h1 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 1rem;

}



.ofertas-page-header p {

    font-size: 1.2rem;

    opacity: 0.9;

}



.ofertas-filtros-bar {

    background: var(--white);

    padding: 1.5rem 0;

    box-shadow: var(--shadow-sm);

    position: sticky;

    top: 70px;

    z-index: 100;

}



.filtros-form {

    display: flex;

    gap: 1rem;

    align-items: center;

    flex-wrap: wrap;

}



.filtro-input,

.filtro-select {

    padding: 10px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-full);

    font-family: inherit;

    font-size: 0.95rem;

    transition: border-color var(--transition-fast);

    background: white;

}



.filtro-input:focus,

.filtro-select:focus {

    outline: none;

    border-color: var(--secondary-color);

}



.filtro-input {

    flex: 1;

    min-width: 200px;

}



.btn-filtrar {

    background: var(--primary-color);

    color: white;

    border: none;

    padding: 10px 24px;

    border-radius: var(--radius-full);

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-fast);

}



.btn-filtrar:hover {

    background: var(--dark-color);

}



.btn-limpiar {

    background: transparent;

    color: var(--text-light);

    border: 2px solid var(--light-color);

    padding: 10px 20px;

    border-radius: var(--radius-full);

    font-weight: 500;

    cursor: pointer;

    transition: all var(--transition-fast);

}



.btn-limpiar:hover {

    border-color: var(--error);

    color: var(--error);

}



/* === RESPONSIVO ADICIONAL WORDPRESS === */



@media (max-width: 768px) {

    .form-row {

        flex-direction: column;

    }



    .filtros-form {

        flex-direction: column;

    }



    .filtro-input,

    .filtro-select,

    .btn-filtrar,

    .btn-limpiar {

        width: 100%;

    }



    .post-nav {

        flex-direction: column;

    }

}



/* ====================================

   PÁGINA DE CONTACTO

   ==================================== */



.contact-page-section {

    padding: 80px 0;

    background: var(--white);

}



.contact-page-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 4rem;

    align-items: start;

}



/* Columna formulario */

.contact-form-col h2 {

    font-size: 2rem;

    color: var(--primary-color);

    margin-bottom: 0.5rem;

    font-weight: 700;

}



.contact-intro {

    color: var(--text-light);

    margin-bottom: 2rem;

    font-size: 1.05rem;

}



/* Estilos CF7 en página de contacto */

.contact-form-col .wpcf7-form label {

    display: block;

    font-weight: 600;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

    font-size: 0.95rem;

}



.contact-form-col .wpcf7-form input[type="text"],

.contact-form-col .wpcf7-form input[type="email"],

.contact-form-col .wpcf7-form input[type="tel"],

.contact-form-col .wpcf7-form textarea,

.contact-form-col .wpcf7-form select {

    width: 100%;

    padding: 14px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-md);

    font-size: 1rem;

    font-family: inherit;

    transition: all var(--transition-normal);

    margin-bottom: 1rem;

    background: white;

}



.contact-form-col .wpcf7-form input:focus,

.contact-form-col .wpcf7-form textarea:focus,

.contact-form-col .wpcf7-form select:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



.contact-form-col .wpcf7-form textarea {

    resize: vertical;

    min-height: 130px;

}



.contact-form-col .wpcf7-form input[type="submit"] {

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: white;

    padding: 14px 40px;

    border: none;

    border-radius: var(--radius-full);

    font-size: 1.05rem;

    font-weight: 700;

    cursor: pointer;

    transition: all var(--transition-normal);

}



.contact-form-col .wpcf7-form input[type="submit"]:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(211, 84, 0, 0.3);

}



.contact-form-col .wpcf7-response-output {

    margin-top: 1rem;

    padding: 1rem;

    border-radius: var(--radius-md);

    font-weight: 500;

    border: 2px solid transparent;

}



.contact-form-col .wpcf7-mail-sent-ok {

    background: rgba(39, 174, 96, 0.1);

    color: var(--success);

    border-color: var(--success);

}



.contact-form-col .wpcf7-validation-errors {

    background: rgba(231, 76, 60, 0.1);

    color: var(--error);

    border-color: var(--error);

}



/* Columna info */

.contact-info-card {

    background: var(--light-color);

    padding: 2rem;

    border-radius: var(--radius-lg);

    margin-bottom: 1.5rem;

}



.contact-info-card h3 {

    font-size: 1.3rem;

    color: var(--primary-color);

    font-weight: 700;

    margin-bottom: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 2px solid var(--secondary-color);

}



.contact-info-item {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.2rem;

}



.contact-info-icon {

    font-size: 1.5rem;

    flex-shrink: 0;

    margin-top: 2px;

}



.contact-info-item strong {

    display: block;

    color: var(--text-dark);

    font-weight: 600;

    margin-bottom: 0.2rem;

    font-size: 0.9rem;

}



.contact-info-item a,

.contact-info-item span {

    color: var(--text-light);

    text-decoration: none;

    font-size: 0.95rem;

    transition: color var(--transition-fast);

}



.contact-info-item a:hover {

    color: var(--secondary-color);

}



/* CTA boxes */

.contact-cta-box {

    padding: 1.5rem;

    border-radius: var(--radius-lg);

    margin-bottom: 1rem;

    text-align: center;

}



.contact-cta-empresa {

    background: linear-gradient(135deg, var(--primary-color), var(--dark-color));

    color: white;

}



.contact-cta-postulante {

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: white;

}



.contact-cta-icon {

    font-size: 2.5rem;

    margin-bottom: 0.8rem;

}



.contact-cta-box h4 {

    font-size: 1.2rem;

    font-weight: 700;

    margin-bottom: 0.4rem;

}



.contact-cta-box p {

    font-size: 0.9rem;

    opacity: 0.9;

    margin-bottom: 1rem;

}



.btn-secondary-dark {

    padding: 12px 28px;

    border: 2px solid white;

    border-radius: var(--radius-full);

    color: white;

    background: transparent;

    font-weight: 600;

    font-size: 0.95rem;

    cursor: pointer;

    transition: all var(--transition-normal);

    text-decoration: none;

    display: inline-block;

}



.btn-secondary-dark:hover {

    background: white;

    color: var(--accent-color);

    transform: translateY(-2px);

}



/* Responsive */

@media (max-width: 1024px) {

    .contact-page-grid {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }

}



/* ====================================

   SINGLE OFERTAS

   Pegar al final de style.css

   ==================================== */



/* ── Hero ─────────────────────────── */



.oferta-hero {

    padding: 80px 0 60px;

    color: var(--white);

    position: relative;

    overflow: hidden;

}



.oferta-hero::before {

    content: '';

    position: absolute;

    top: -30%;

    right: -5%;

    width: 400px;

    height: 400px;

    background: rgba(243, 156, 18, 0.08);

    border-radius: 50%;

    animation: float 6s ease-in-out infinite;

}



.oferta-breadcrumb {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.9rem;

    opacity: 0.8;

    margin-bottom: 2rem;

    position: relative;

    z-index: 1;

}



.oferta-breadcrumb a {

    color: var(--white);

    text-decoration: none;

    transition: opacity var(--transition-fast);

}



.oferta-breadcrumb a:hover {

    opacity: 1;

    text-decoration: underline;

}



.oferta-breadcrumb span:not(.oferta-hero-badge) {

    opacity: 0.6;

}



.oferta-hero-content {

    position: relative;

    z-index: 1;

    max-width: 750px;

}



.oferta-hero-badge {

    display: inline-block;

    padding: 6px 18px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 1rem;

}



.oferta-hero-badge-activa {

    background: var(--success);

    color: white;

    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);

}



.oferta-hero-badge-cerrada {

    background: var(--accent-color);

    color: white;

}



.oferta-hero h1 {

    font-size: 2.8rem;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 0.8rem;

}



.oferta-hero-empresa {

    font-size: 1.3rem;

    color: var(--secondary-color);

    font-weight: 600;

    margin-bottom: 1.5rem;

}



.oferta-hero-meta {

    display: flex;

    gap: 0.8rem;

    flex-wrap: wrap;

}



.oferta-meta-pill {

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

    backdrop-filter: blur(4px);

    padding: 8px 16px;

    border-radius: var(--radius-full);

    font-size: 0.9rem;

    font-weight: 500;

    border: 1px solid rgba(255,255,255,0.2);

}



.oferta-meta-pill-salario {

    background: rgba(243, 156, 18, 0.25);

    border-color: rgba(243, 156, 18, 0.4);

    color: #ffd080;

    font-weight: 700;

}



/* ── Layout principal ─────────────── */



.oferta-main {

    padding: 60px 0 80px;

    background: var(--light-color);

}



.oferta-layout {

    display: grid;

    grid-template-columns: 1fr 340px;

    gap: 2.5rem;

    align-items: start;

}



/* ── Cards de sección ─────────────── */



.oferta-section-card {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 2rem;

    margin-bottom: 1.5rem;

    box-shadow: var(--shadow-sm);

}



.oferta-section-title {

    font-size: 1.4rem;

    color: var(--primary-color);

    font-weight: 700;

    margin-bottom: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 2px solid var(--light-color);

    display: flex;

    align-items: center;

    gap: 0.6rem;

}



.oferta-section-icon {

    font-size: 1.3rem;

}



/* ── Contenido del post ───────────── */



.oferta-body {

    font-size: 1.05rem;

    line-height: 1.9;

    color: var(--text-dark);

}



.oferta-body h2,

.oferta-body h3 {

    color: var(--primary-color);

    margin: 1.5rem 0 0.8rem;

    font-weight: 700;

}



.oferta-body h2 { font-size: 1.5rem; }

.oferta-body h3 { font-size: 1.2rem; }



.oferta-body ul,

.oferta-body ol {

    margin-left: 1.5rem;

    margin-bottom: 1rem;

}



.oferta-body li {

    margin-bottom: 0.5rem;

    color: var(--text-dark);

}



.oferta-body strong {

    color: var(--primary-color);

}



.oferta-body p {

    margin-bottom: 1rem;

}



/* ── Tags ─────────────────────────── */



.oferta-tags-list {

    display: flex;

    gap: 0.6rem;

    flex-wrap: wrap;

}



.oferta-tag {

    background: var(--light-color);

    color: var(--text-dark);

    padding: 7px 16px;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 500;

    text-decoration: none;

    transition: all var(--transition-fast);

    border: 2px solid transparent;

}



.oferta-tag:hover {

    background: var(--primary-color);

    color: white;

}



.oferta-tag-nivel {

    background: rgba(243, 156, 18, 0.1);

    color: var(--accent-color);

    border-color: rgba(243, 156, 18, 0.3);

}



/* ── Formulario de postulación ────── */



.oferta-form-card {

    border: 2px solid rgba(243, 156, 18, 0.2);

}



.oferta-form-intro {

    color: var(--text-light);

    margin-bottom: 1.5rem;

}



/* CF7 dentro de la oferta */

.oferta-cf7-wrapper .wpcf7-form label {

    display: block;

    font-weight: 600;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

    font-size: 0.95rem;

}



.oferta-cf7-wrapper .wpcf7-form input[type="text"],

.oferta-cf7-wrapper .wpcf7-form input[type="email"],

.oferta-cf7-wrapper .wpcf7-form input[type="tel"],

.oferta-cf7-wrapper .wpcf7-form input[type="url"],

.oferta-cf7-wrapper .wpcf7-form textarea,

.oferta-cf7-wrapper .wpcf7-form select {

    width: 100%;

    padding: 14px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-md);

    font-size: 1rem;

    font-family: inherit;

    transition: all var(--transition-normal);

    margin-bottom: 1rem;

    background: white;

}



.oferta-cf7-wrapper .wpcf7-form input:focus,

.oferta-cf7-wrapper .wpcf7-form textarea:focus,

.oferta-cf7-wrapper .wpcf7-form select:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



.oferta-cf7-wrapper .wpcf7-form input[type="file"] {

    border: 2px dashed var(--secondary-color);

    padding: 1.5rem;

    border-radius: var(--radius-md);

    background: rgba(243, 156, 18, 0.04);

    cursor: pointer;

    width: 100%;

}



.oferta-cf7-wrapper .wpcf7-form textarea {

    resize: vertical;

    min-height: 100px;

}



.oferta-cf7-wrapper .wpcf7-form input[type="submit"] {

    width: 100%;

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: white;

    padding: 16px;

    border: none;

    border-radius: var(--radius-md);

    font-size: 1.1rem;

    font-weight: 700;

    cursor: pointer;

    transition: all var(--transition-normal);

    margin-top: 0.5rem;

}



.oferta-cf7-wrapper .wpcf7-form input[type="submit"]:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(211, 84, 0, 0.3);

}



.oferta-cf7-wrapper .wpcf7-not-valid-tip {

    color: var(--error);

    font-size: 0.85rem;

    display: block;

    margin-top: -0.8rem;

    margin-bottom: 0.8rem;

}



.oferta-cf7-wrapper .wpcf7-response-output {

    margin-top: 1rem;

    padding: 1rem;

    border-radius: var(--radius-md);

    font-weight: 500;

    border: 2px solid transparent;

}



.oferta-cf7-wrapper .wpcf7-mail-sent-ok {

    background: rgba(39, 174, 96, 0.1);

    color: var(--success);

    border-color: var(--success);

}



.oferta-cf7-wrapper .wpcf7-validation-errors {

    background: rgba(231, 76, 60, 0.1);

    color: var(--error);

    border-color: var(--error);

}



/* Oferta cerrada */

.oferta-cerrada-msg {

    text-align: center;

    padding: 2rem 0;

}



.oferta-cerrada-icon {

    font-size: 4rem;

    margin-bottom: 1rem;

}



.oferta-cerrada-msg h3 {

    font-size: 1.5rem;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

}



.oferta-cerrada-msg p {

    color: var(--text-light);

    margin-bottom: 1.5rem;

}



/* ── Sidebar ──────────────────────── */



.oferta-sidebar-card {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 1.8rem;

    margin-bottom: 1.5rem;

    box-shadow: var(--shadow-sm);

}



.oferta-sidebar-card h3 {

    font-size: 1.1rem;

    color: var(--primary-color);

    font-weight: 700;

    margin-bottom: 1.2rem;

    padding-bottom: 0.8rem;

    border-bottom: 2px solid var(--secondary-color);

}



/* Resumen list */

.oferta-resumen-list {

    list-style: none;

    margin-bottom: 1.5rem;

}



.oferta-resumen-list li {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 0.7rem 0;

    border-bottom: 1px solid var(--light-color);

    gap: 1rem;

}



.oferta-resumen-list li:last-child {

    border-bottom: none;

}



.resumen-label {

    color: var(--text-light);

    font-size: 0.9rem;

    flex-shrink: 0;

}



.resumen-value {

    color: var(--text-dark);

    font-weight: 600;

    font-size: 0.95rem;

    text-align: right;

}



.resumen-salario {

    color: var(--accent-color);

}



.resumen-badge-activa {

    background: rgba(39,174,96,0.1);

    color: var(--success);

    padding: 3px 10px;

    border-radius: 12px;

    font-size: 0.85rem;

    font-weight: 700;

}



.resumen-badge-cerrada {

    background: rgba(231,76,60,0.1);

    color: var(--error);

    padding: 3px 10px;

    border-radius: 12px;

    font-size: 0.85rem;

    font-weight: 700;

}



/* Botón sidebar */

.oferta-sidebar-btn {

    display: block;

    width: 100%;

    text-align: center;

    padding: 13px;

    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    color: white;

    border: none;

    border-radius: var(--radius-md);

    font-weight: 700;

    font-size: 1rem;

    cursor: pointer;

    text-decoration: none;

    transition: all var(--transition-normal);

}



.oferta-sidebar-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(211, 84, 0, 0.3);

    color: white;

}



/* Compartir */

.oferta-share-btns,

.share-buttons {

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

}



.share-btn {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    padding: 10px 16px;

    border-radius: var(--radius-md);

    font-weight: 600;

    font-size: 0.9rem;

    cursor: pointer;

    text-decoration: none;

    transition: all var(--transition-fast);

    border: none;

    font-family: inherit;

    width: 100%;

    justify-content: center;

}



.share-linkedin {

    background: #0077b5;

    color: white;

}



.share-linkedin:hover {

    background: #006097;

    color: white;

    transform: translateY(-2px);

}



.share-whatsapp {

    background: #25d366;

    color: white;

}



.share-whatsapp:hover {

    background: #128c7e;

    color: white;

    transform: translateY(-2px);

}



.share-copy {

    background: var(--light-color);

    color: var(--text-dark);

}



.share-copy:hover {

    background: var(--primary-color);

    color: white;

    transform: translateY(-2px);

}



/* Volver */

.oferta-sidebar-volver {

    padding: 1rem;

    background: transparent;

    box-shadow: none;

    border: 2px solid var(--light-color);

}



.oferta-volver-btn {

    display: block;

    text-align: center;

    color: var(--text-light);

    text-decoration: none;

    font-weight: 500;

    transition: color var(--transition-fast);

}



.oferta-volver-btn:hover {

    color: var(--primary-color);

}



/* ── Relacionadas ─────────────────── */



.oferta-relacionadas {

    padding: 80px 0;

    background: var(--white);

}



.oferta-relacionadas-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



/* ── Responsive ───────────────────── */



@media (max-width: 1024px) {

    .oferta-layout {

        grid-template-columns: 1fr;

    }



    .oferta-sidebar {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

    }



    .oferta-sidebar-volver {

        grid-column: 1 / -1;

    }

}



@media (max-width: 768px) {

    .oferta-hero h1 {

        font-size: 1.9rem;

    }



    .oferta-hero-meta {

        gap: 0.5rem;

    }



    .oferta-meta-pill {

        font-size: 0.82rem;

        padding: 6px 12px;

    }



    .oferta-sidebar {

        grid-template-columns: 1fr;

    }



    .oferta-relacionadas-grid {

        grid-template-columns: 1fr;

    }

}

/* ====================================

   CTA Section

   ==================================== */



.cta-section {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    color: var(--white);

    padding: 100px 0;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.cta-section::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background: rgba(243, 156, 18, 0.08);

    animation: float 8s ease-in-out infinite;

}



.cta-content {

    position: relative;

    z-index: 1;

    max-width: 700px;

    margin: 0 auto;

}



.cta-icon {

    color: var(--secondary-color);

    margin-bottom: 2rem;

    opacity: 0.9;

}



.cta-icon svg {

    color: var(--secondary-color);

}



.cta-title {

    font-size: 2.8rem;

    font-weight: 800;

    margin-bottom: 1.2rem;

    line-height: 1.2;

    color: var(--white);

}



.cta-description {

    font-size: 1.2rem;

    opacity: 0.9;

    margin-bottom: 2.5rem;

    max-width: 550px;

    margin-left: auto;

    margin-right: auto;

}



.cta-section .cta-buttons {

    display: flex;

    gap: 1.2rem;

    justify-content: center;

    flex-wrap: wrap;

    margin-bottom: 3rem;

}



.cta-section .btn-primary {

    background: var(--secondary-color);

    color: var(--white);

}



.cta-section .btn-secondary {

    background: transparent;

    border: 2px solid rgba(255,255,255,0.6);

    color: var(--white);

}



.cta-section .btn-secondary:hover {

    background: var(--white);

    color: var(--primary-color);

    border-color: var(--white);

}



.cta-features {

    display: flex;

    justify-content: center;

    gap: 2.5rem;

    flex-wrap: wrap;

    opacity: 0.9;

}



.cta-feature {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.95rem;

    font-weight: 500;

    color: var(--white);

}



.cta-feature svg {

    color: var(--secondary-color);

    flex-shrink: 0;

}



/* ====================================

   Testimonios Section

   ==================================== */



.testimonios-section {

    padding: 100px 0;

    background: var(--light-color);

}



.testimonios-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.testimonio-card {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 2rem;

    box-shadow: var(--shadow-sm);

    transition: all var(--transition-normal);

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

}



.testimonio-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

}



.testimonio-rating {

    display: flex;

    gap: 0.2rem;

    font-size: 1.1rem;

}



.testimonio-content blockquote {

    font-size: 1rem;

    line-height: 1.7;

    color: var(--text-dark);

    font-style: italic;

    border: none;

    padding: 0;

    margin: 0;

}



.testimonio-content blockquote::before {

    content: '"';

    font-size: 3rem;

    color: var(--secondary-color);

    opacity: 0.3;

    line-height: 0;

    vertical-align: -0.8rem;

    margin-right: 0.2rem;

}



.testimonio-author {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding-top: 1rem;

    border-top: 1px solid var(--light-color);

}



.author-photo {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

    background: var(--light-color);

}



.author-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.author-photo-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

}



.author-name {

    font-size: 1rem;

    font-weight: 700;

    color: var(--text-dark);

    margin: 0 0 0.2rem;

}



.author-name a {

    color: var(--primary-color);

    text-decoration: none;

}



.author-name a:hover { color: var(--secondary-color); }



.author-role {

    font-size: 0.88rem;

    color: var(--text-light);

    margin: 0;

}



/* ====================================

   Blog Archive - Filtros

   ==================================== */



.filters-section-compact {

    background: var(--white);

    padding: 2rem 0;

    border-top: 1px solid rgba(0,0,0,0.06);

    border-bottom: 1px solid rgba(0,0,0,0.06);

    position: sticky;

    top: var(--header-height, 75px);

    z-index: 900;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    isolation: isolate;

}



.search-bar-main {

    margin-bottom: 1.2rem;

}



.search-bar-main input {

    width: 100%;

    padding: 14px 20px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-full);

    font-size: 1rem;

    font-family: inherit;

    transition: all var(--transition-normal);

    outline: none;

    background: var(--light-color);

}



.search-bar-main input:focus {

    border-color: var(--secondary-color);

    background: var(--white);

    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);

}



.filters-compact {

    display: flex;

    gap: 1rem;

    align-items: center;

    flex-wrap: wrap;

}



.filter-select {

    padding: 10px 16px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-full);

    font-size: 0.9rem;

    font-family: inherit;

    color: var(--text-dark);

    background: var(--white);

    cursor: pointer;

    outline: none;

    transition: border-color var(--transition-fast);

    min-width: 200px;

}



.filter-select:focus { border-color: var(--secondary-color); }



.btn-clear-compact {

    padding: 10px 20px;

    border: 2px solid #e0e8f0;

    border-radius: var(--radius-full);

    background: var(--white);

    color: var(--text-light);

    font-size: 0.9rem;

    font-family: inherit;

    cursor: pointer;

    transition: all var(--transition-fast);

    display: flex;

    align-items: center;

    gap: 0.4rem;

}



.btn-clear-compact:hover {

    border-color: var(--error);

    color: var(--error);

}



.results-count {

    margin-top: 1rem;

    font-size: 0.9rem;

    color: var(--text-light);

}



.results-count strong {

    color: var(--primary-color);

    font-weight: 700;

}



/* ====================================

   Blog Archive - Contenido

   ==================================== */



.blog-archive-section,

.ofertas-content {

    padding: 60px 0 80px;

    background: var(--light-color);

}



.blog-grid {

    display: grid;

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

    gap: 2rem;

    margin-bottom: 3rem;

}



.load-more-container { text-align: center; margin-top: 2rem; }



.btn-load-more {

    padding: 14px 40px;

    background: var(--white);

    border: 2px solid var(--primary-color);

    border-radius: var(--radius-full);

    color: var(--primary-color);

    font-size: 1rem;

    font-weight: 600;

    font-family: inherit;

    cursor: pointer;

    transition: all var(--transition-normal);

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.btn-load-more:hover {

    background: var(--primary-color);

    color: var(--white);

}



.no-results {

    text-align: center;

    padding: 4rem 0;

    grid-column: 1 / -1;

}



.no-results h3 {

    font-size: 1.5rem;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

}



/* ====================================

   Blog Hero (página interna)

   ==================================== */



.blog-hero {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    color: var(--white);

    padding: 80px 0 60px;

    text-align: center;

}



.blog-hero-content h1 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 1rem;

}



.blog-hero-content > p {

    font-size: 1.2rem;

    opacity: 0.9;

    margin-bottom: 2rem;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



.blog-categories-nav {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0.8rem;

    margin-top: 1.5rem;

}



.blog-cat-btn {

    padding: 8px 20px;

    border-radius: var(--radius-full);

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

    color: var(--white);

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 500;

    border: 1px solid rgba(255,255,255,0.25);

    transition: all var(--transition-normal);

}



.blog-cat-btn:hover,

.blog-cat-btn.active {

    background: var(--secondary-color);

    border-color: var(--secondary-color);

    color: var(--white);

}



/* ====================================

   Blog - Paginación

   ==================================== */



.blog-pagination {

    margin-top: 4rem;

    display: flex;

    justify-content: center;

}



.blog-pagination .nav-links {

    display: flex;

    gap: 0.5rem;

    align-items: center;

}



.blog-pagination .page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border-radius: var(--radius-sm);

    background: var(--white);

    color: var(--text-dark);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.95rem;

    border: 2px solid transparent;

    transition: all var(--transition-fast);

    box-shadow: var(--shadow-sm);

}



.blog-pagination .page-numbers:hover {

    border-color: var(--secondary-color);

    color: var(--secondary-color);

}



.blog-pagination .page-numbers.current {

    background: var(--primary-color);

    color: var(--white);

    border-color: var(--primary-color);

}



.blog-pagination .prev,

.blog-pagination .next {

    width: auto;

    padding: 0 1.2rem;

}



/* ====================================

   Single Post

   ==================================== */



.single-post-hero {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    color: var(--white);

    padding: 60px 0 40px;

}



.single-post-breadcrumb {

    margin-bottom: 1.5rem;

    font-size: 0.9rem;

}



.single-post-breadcrumb a {

    color: rgba(255,255,255,0.7);

    text-decoration: none;

    transition: color var(--transition-fast);

}



.single-post-breadcrumb a:hover { color: var(--secondary-color); }



.single-post-breadcrumb span {

    color: rgba(255,255,255,0.4);

    margin: 0 0.5rem;

}



.single-post-breadcrumb .current { color: var(--secondary-color); }



.single-post-meta {

    display: flex;

    align-items: center;

    gap: 1.2rem;

    flex-wrap: wrap;

    margin-bottom: 1.5rem;

}



.single-post-cat {

    background: var(--secondary-color);

    color: var(--white);

    padding: 5px 16px;

    border-radius: var(--radius-full);

    font-size: 0.85rem;

    font-weight: 600;

    text-decoration: none;

}



.single-post-date,

.single-post-author,

.single-post-read {

    font-size: 0.9rem;

    opacity: 0.85;

}



.single-post-title {

    font-size: 2.8rem;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 1.2rem;

    max-width: 800px;

}



.single-post-excerpt {

    font-size: 1.15rem;

    opacity: 0.9;

    max-width: 700px;

    line-height: 1.6;

}



.single-post-layout {

    padding: 60px 0 80px;

    background: var(--light-color);

}



.single-post-grid {

    display: grid;

    grid-template-columns: 1fr 320px;

    gap: 3rem;

    align-items: start;

}



.single-post-thumbnail {

    margin-bottom: 2.5rem;

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-md);

}



.single-post-thumbnail img {

    width: 100%;

    height: auto;

    display: block;

}



.single-post-content {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 2.5rem;

    box-shadow: var(--shadow-sm);

    line-height: 1.8;

}



.single-post-content h2 {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--primary-color);

    margin: 2rem 0 1rem;

}



.single-post-content h3 {

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--dark-color);

    margin: 1.5rem 0 0.8rem;

}



.single-post-content p { margin-bottom: 1.2rem; font-size: 1.05rem; }



.single-post-content strong { color: var(--primary-color); font-weight: 700; }



.single-post-content ul,

.single-post-content ol {

    margin: 1rem 0 1.5rem 1.5rem;

}



.single-post-content li { margin-bottom: 0.5rem; font-size: 1.05rem; }



.single-post-content blockquote {

    border-left: 4px solid var(--secondary-color);

    padding: 1rem 1.5rem;

    margin: 1.5rem 0;

    background: rgba(243, 156, 18, 0.05);

    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    font-style: italic;

}



.single-post-tags {

    margin-top: 2rem;

    padding-top: 1.5rem;

    border-top: 1px solid var(--light-color);

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    align-items: center;

}



.single-post-tags-label {

    font-weight: 600;

    color: var(--text-light);

    font-size: 0.9rem;

}



.single-post-tag {

    padding: 5px 14px;

    background: var(--light-color);

    border-radius: var(--radius-full);

    font-size: 0.85rem;

    color: var(--text-dark);

    text-decoration: none;

    transition: all var(--transition-fast);

}



.single-post-tag:hover {

    background: var(--secondary-color);

    color: var(--white);

}



.single-post-sidebar {

    position: sticky;

    top: 100px;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.sidebar-card {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    box-shadow: var(--shadow-sm);

}



.sidebar-card h4 {

    font-size: 1rem;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 1.2rem;

    padding-bottom: 0.8rem;

    border-bottom: 2px solid var(--secondary-color);

}



.sidebar-related-item {

    display: flex;

    gap: 0.8rem;

    padding: 0.8rem 0;

    border-bottom: 1px solid var(--light-color);

    text-decoration: none;

    transition: all var(--transition-fast);

}



.sidebar-related-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.sidebar-related-thumb {

    width: 60px;

    height: 60px;

    border-radius: var(--radius-sm);

    overflow: hidden;

    flex-shrink: 0;

}



.sidebar-related-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.sidebar-related-thumb-placeholder {

    width: 60px;

    height: 60px;

    border-radius: var(--radius-sm);

    background: linear-gradient(135deg, var(--primary-color), var(--dark-color));

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    flex-shrink: 0;

}



.sidebar-related-title {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-dark);

    line-height: 1.3;

    transition: color var(--transition-fast);

}



.sidebar-related-item:hover .sidebar-related-title { color: var(--secondary-color); }



.sidebar-related-date {

    font-size: 0.8rem;

    color: var(--text-light);

    margin-top: 0.3rem;

}



.single-post-nav {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 1.5rem 2rem;

    margin-top: 2rem;

    box-shadow: var(--shadow-sm);

    display: flex;

    justify-content: space-between;

    gap: 2rem;

}



.post-nav-link {

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

    text-decoration: none;

    max-width: 45%;

}



.post-nav-link.next {

    text-align: right;

    margin-left: auto;

}



.post-nav-label {

    font-size: 0.8rem;

    color: var(--text-light);

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.post-nav-title {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--primary-color);

    line-height: 1.3;

    transition: color var(--transition-fast);

}



.post-nav-link:hover .post-nav-title { color: var(--secondary-color); }



/* ====================================

   Responsive General

   ==================================== */



@media (max-width: 1024px) {

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

    .single-post-grid { grid-template-columns: 1fr; }

    .single-post-sidebar { position: static; }

    .cta-title { font-size: 2.2rem; }

}



@media (max-width: 768px) {

    .blog-hero-content h1 { font-size: 2rem; }

    .blog-grid { grid-template-columns: 1fr; }

    .filters-compact { flex-direction: column; align-items: stretch; }

    .filter-select { min-width: unset; width: 100%; }

    .single-post-title { font-size: 1.7rem; }

    .single-post-content { padding: 1.5rem; }

    .single-post-nav { flex-direction: column; }

    .post-nav-link, .post-nav-link.next { max-width: 100%; text-align: left; margin-left: 0; }

    .cta-title { font-size: 1.8rem; }

    .cta-features { gap: 1.2rem; flex-direction: column; align-items: center; }

    .testimonios-section { padding: 60px 0; }

    .testimonios-grid { grid-template-columns: 1fr; }

    .blog-pagination .page-numbers { width: 38px; height: 38px; }

}



/* ====================================

   Blog Cards - Limpiar estilos de link

   ==================================== */



.blog-card .blog-category a {

    text-decoration: none;

    color: var(--white);

}



.blog-card h3 a,

.blog-card-full h3 a {

    text-decoration: none;

    color: var(--primary-color);

}



.blog-card h3 a:hover,

.blog-card-full h3 a:hover {

    color: var(--secondary-color);

}



/* ====================================

   404 - Página no encontrada

   ==================================== */



.error-404-section {

    min-height: calc(100vh - var(--header-height, 80px));

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    display: flex;

    align-items: center;

    padding: 80px 0;

    position: relative;

    overflow: hidden;

    box-sizing: border-box;

}



.error-404-section::before {

    content: '';

    position: absolute;

    top: -30%;

    right: -10%;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: rgba(243, 156, 18, 0.06);

    animation: float 10s ease-in-out infinite;

}



.error-404-section::after {

    content: '';

    position: absolute;

    bottom: -20%;

    left: -5%;

    width: 400px;

    height: 400px;

    border-radius: 50%;

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

    animation: float 14s ease-in-out infinite reverse;

}



.error-404-content {

    text-align: center;

    position: relative;

    z-index: 1;

    max-width: 700px;

    margin: 0 auto;

}



/* Número 404 grande */

.error-404-number {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    margin-bottom: 2rem;

}



.error-4 {

    font-size: 10rem;

    font-weight: 900;

    line-height: 1;

    color: var(--white);

    opacity: 0.95;

    text-shadow: 0 8px 32px rgba(0,0,0,0.3);

    letter-spacing: -4px;

}



.error-0 {

    width: 130px;

    height: 130px;

    color: var(--secondary-color);

    filter: drop-shadow(0 8px 24px rgba(243, 156, 18, 0.4));

}



/* Texto */

.error-404-title {

    font-size: 2.2rem;

    font-weight: 800;

    color: var(--white);

    margin-bottom: 1rem;

    line-height: 1.2;

}



.error-404-description {

    font-size: 1.1rem;

    color: rgba(255,255,255,0.8);

    margin-bottom: 2.5rem;

    line-height: 1.7;

}



/* Buscador */

.error-404-search {

    margin-bottom: 2.5rem;

}



.error-404-search .search-form {

    display: flex;

    gap: 0.5rem;

    max-width: 680px;

    margin: 0 auto;

}



.error-404-search .search-field {

    flex: 1;

    padding: 13px 20px;

    border-radius: var(--radius-full);

    border: 2px solid rgba(255,255,255,0.3);

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

    color: var(--white);

    font-size: 1rem;

    font-family: inherit;

    outline: none;

    transition: all var(--transition-normal);

}



.error-404-search .search-field::placeholder {

    color: rgba(255,255,255,0.5);

}



.error-404-search .search-field:focus {

    border-color: var(--secondary-color);

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

}



.error-404-search .search-submit {

    padding: 13px 24px;

    background: var(--secondary-color);

    color: var(--white);

    border: none;

    border-radius: var(--radius-full);

    font-weight: 600;

    font-size: 0.95rem;

    font-family: inherit;

    cursor: pointer;

    transition: all var(--transition-normal);

    white-space: nowrap;

}



.error-404-search .search-submit:hover {

    background: var(--accent-color);

    transform: translateY(-2px);

}



/* Links rápidos */

.error-404-links {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

    margin-bottom: 2rem;

}



.error-link-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    padding: 1.2rem 1.5rem;

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

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: var(--radius-lg);

    text-decoration: none;

    transition: all var(--transition-normal);

    min-width: 110px;

    backdrop-filter: blur(4px);

}



.error-link-card:hover {

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

    border-color: var(--secondary-color);

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(0,0,0,0.2);

}



.error-link-icon {

    font-size: 1.8rem;

    line-height: 1;

}



.error-link-label {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--white);

    text-align: center;

    line-height: 1.2;

}



/* Responsive */

@media (max-width: 768px) {

    .error-4 {

        font-size: 6rem;

        letter-spacing: -2px;

    }



    .error-0 {

        width: 85px;

        height: 85px;

    }



    .error-404-title {

        font-size: 1.6rem;

    }



    .error-404-search .search-form {

        flex-direction: column;

    }



    .error-404-links {

        gap: 0.7rem;

    }



    .error-link-card {

        min-width: 90px;

        padding: 1rem 1rem;

    }

}



/* ====================================

   Footer Bottom - Crédito desarrollador

   ==================================== */



/* Reset heredado — el footer nunca debe recibir text-align de secciones anteriores */

#colophon,

#colophon * {

    text-align: initial;

}



.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 1rem;

    padding-top: 1.5rem;

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

    margin-top: 2rem;

}



.footer-bottom p {

    margin: 0;

    color: rgba(255,255,255,0.55);

    font-size: 0.88rem;

}



.footer-dev-credit {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    opacity: 0.65;

    transition: opacity var(--transition-normal);

}



.footer-dev-credit:hover {

    opacity: 1;

}



.footer-dev-credit span {

    font-size: 0.82rem;

    color: rgba(255,255,255,0.6);

    white-space: nowrap;

}



.footer-dev-logo {

    height: 12px;

    width: auto;

    display: block;

    filter: brightness(0) invert(1);

    opacity: 0.8;

}



.footer-dev-credit:hover .footer-dev-logo {

    opacity: 1;

}



@media (max-width: 600px) {

    .footer-bottom {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

}



/* Botón estado finalizado */

.job-apply-btn--closed {

    background: #adb5bd !important;

    cursor: not-allowed !important;

    opacity: 0.75;

    transform: none !important;

    box-shadow: none !important;

    font-size: 0.88rem;

}



/* ====================================

   Search - Página de resultados

   ==================================== */



/* Hero */

.search-hero {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);

    padding: 80px 0 70px;

    text-align: center;

    min-height: 320px;

    display: flex;

    align-items: center;

}



.search-hero .container {

    width: 100%;

}



.search-hero-content {

    max-width: 100%;

}



.search-hero-label {

    color: rgba(255,255,255,0.7);

    font-size: 1rem;

    margin-bottom: 0.4rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 500;

}



.search-hero-term {

    color: var(--white);

    font-size: 2.4rem;

    font-weight: 800;

    margin-bottom: 0.8rem;

    line-height: 1.2;

}



.search-hero-count {

    color: rgba(255,255,255,0.75);

    font-size: 1.05rem;

    margin-bottom: 2rem;

}



.search-count-num {

    color: var(--secondary-color);

    font-weight: 700;

    font-size: 1.2rem;

}



.search-hero-form {

    width: 100%;

    margin-top: 1.5rem;

}



/* WordPress genera .search-form dentro — forzar ancho completo */

.search-hero-form form,

.search-hero-form .search-form {

    display: flex;

    gap: 0.5rem;

    width: 100%;

}



.search-hero-form .search-field {

    flex: 1;

    min-width: 0;  /* evita overflow en flex */

}



.search-hero-form .search-form {

    display: flex;

    gap: 0.5rem;

}



.search-hero-form .search-field {

    flex: 1;

    padding: 13px 20px;

    border-radius: var(--radius-full);

    border: 2px solid rgba(255,255,255,0.3);

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

    color: var(--white);

    font-size: 1rem;

    font-family: inherit;

    outline: none;

    transition: all var(--transition-normal);

}



.search-hero-form .search-field::placeholder { color: rgba(255,255,255,0.5); }

.search-hero-form .search-field:focus {

    border-color: var(--secondary-color);

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

}



.search-hero-form .search-submit {

    padding: 13px 24px;

    background: var(--secondary-color);

    color: var(--white);

    border: none;

    border-radius: var(--radius-full);

    font-weight: 600;

    font-size: 0.95rem;

    font-family: inherit;

    cursor: pointer;

    transition: all var(--transition-normal);

    white-space: nowrap;

}



.search-hero-form .search-submit:hover {

    background: var(--accent-color);

    transform: translateY(-2px);

}



/* Sección resultados */

.search-results-section {

    padding: 60px 0 80px;

    background: var(--light-color);

    text-align: left;

}



/* Grid de resultados */

.search-results-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 1.5rem;

    margin-bottom: 3rem;

}



.search-result-card {

    background: var(--white);

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: all var(--transition-normal);

    display: flex;

    flex-direction: column;

}



.search-result-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}



.search-result-image {

    display: block;

    height: 180px;

    overflow: hidden;

}



.search-result-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform var(--transition-normal);

}



.search-result-card:hover .search-result-image img {

    transform: scale(1.04);

}



.search-result-content {

    padding: 1.4rem;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.search-result-meta {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 0.7rem;

}



.search-result-type {

    background: rgba(27, 79, 114, 0.08);

    color: var(--primary-color);

    padding: 3px 10px;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

}



.search-result-date {

    font-size: 0.82rem;

    color: var(--text-light);

}



.search-result-title {

    font-size: 1.15rem;

    font-weight: 700;

    margin-bottom: 0.6rem;

    line-height: 1.3;

}



.search-result-title a {

    text-decoration: none;

    color: var(--primary-color);

    transition: color var(--transition-fast);

}



.search-result-title a:hover { color: var(--secondary-color); }



.search-result-excerpt {

    font-size: 0.92rem;

    color: var(--text-light);

    line-height: 1.6;

    flex: 1;

    margin-bottom: 1rem;

}



.search-result-link {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    color: var(--secondary-color);

    font-weight: 600;

    font-size: 0.9rem;

    text-decoration: none;

    transition: gap var(--transition-fast);

}



.search-result-link:hover { gap: 0.7rem; }



/* Paginación */

.search-pagination {

    display: flex;

    justify-content: center;

    margin-top: 2rem;

}



.search-pagination .nav-links {

    display: flex;

    gap: 0.5rem;

    align-items: center;

}



.search-pagination .page-numbers {

    padding: 8px 14px;

    border-radius: var(--radius-md);

    background: var(--white);

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9rem;

    border: 2px solid transparent;

    transition: all var(--transition-fast);

}



.search-pagination .page-numbers:hover,

.search-pagination .page-numbers.current {

    background: var(--primary-color);

    color: var(--white);

}



/* Sin resultados */

.search-no-results {

    text-align: center;

    padding: 3rem 0;

}



.search-no-results-icon {

    font-size: 3.5rem;

    margin-bottom: 1rem;

    line-height: 1;

}



.search-no-results h2 {

    font-size: 1.6rem;

    color: var(--primary-color);

    margin-bottom: 0.8rem;

}



.search-no-results p {

    color: var(--text-light);

    margin-bottom: 2.5rem;

    font-size: 1.05rem;

}



.search-suggestions {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



.search-suggestion-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    padding: 1.4rem 1.8rem;

    background: var(--white);

    border: 2px solid transparent;

    border-radius: var(--radius-lg);

    text-decoration: none;

    transition: all var(--transition-normal);

    min-width: 130px;

    box-shadow: var(--shadow-sm);

}



.search-suggestion-card:hover {

    border-color: var(--secondary-color);

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}



.suggestion-icon { font-size: 2rem; }



.suggestion-label {

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--primary-color);

    text-align: center;

    line-height: 1.3;

}



/* Responsive */

@media (max-width: 768px) {

    .search-hero-term { font-size: 1.7rem; }

    .search-hero-form .search-form { flex-direction: column; }

    .search-results-grid { grid-template-columns: 1fr; }

}



/* Sin resultados - zona gris */

.search-no-results-cards {

    text-align: center;

    padding: 3rem 0;

}



.search-explore-label {

    font-size: 1.1rem;

    color: var(--text-light);

    margin-bottom: 2rem;

    font-weight: 500;

}



/* Ícono en el hero sin resultados */

.search-hero .search-no-results-icon {

    font-size: 3rem;

    line-height: 1;

    margin-bottom: 1rem;

}



/* Título sin resultados en hero */

.search-hero-noresults {

    color: var(--white);

    font-size: 1.9rem;

    font-weight: 800;

    margin-bottom: 0.6rem;

    line-height: 1.25;

}



.search-hero-noresults span {

    color: var(--secondary-color);

}



/* Eliminar gaps de herencia entre header y contenido principal */

.site-main {

    margin-top: 0;

    padding-top: 0;

}



body {

    margin: 0;

    padding: 0;

}

/* Toggle btn filtros — oculto en desktop, visible en mobile via @media */

.filters-toggle-btn {

    display: none;

}



@media (max-width: 768px) {

    /* Botón filtro: icono compacto pegado al buscador */

    .filters-toggle-btn {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        gap: 6px;

        width: auto;

        padding: 13px 18px;

        background: var(--white);

        border: 2px solid #e0e8f0;

        border-radius: var(--radius-full);

        font-size: 0.85rem;

        font-weight: 600;

        color: var(--primary-color);

        cursor: pointer;

        font-family: inherit;

        transition: all var(--transition-normal);

        box-shadow: 0 1px 4px rgba(0,0,0,0.07);

        margin-bottom: 0;

    }



    .filters-toggle-btn:hover,

    .filters-toggle-btn.open {

        border-color: var(--secondary-color);

        background: rgba(243,156,18,0.06);

        color: var(--secondary-color);

    }



    .filters-toggle-btn .filters-toggle-icon {

        font-size: 0.7rem;

        color: inherit;

        transition: transform var(--transition-normal);

    }



    .filters-toggle-btn.open .filters-toggle-icon {

        transform: rotate(180deg);

    }



    /* Fila búsqueda + botón filtro en la misma línea */

    .search-and-toggle {

        display: flex;

        gap: 0.6rem;

        align-items: center;

        margin-bottom: 1.2rem;

    }



    .search-and-toggle .search-bar-main {

        flex: 1;

        margin-bottom: 0;

    }



    .filters-collapsible {

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.35s ease;

    }



    .filters-collapsible.open {

        max-height: 800px;

    }

}

/* ── Blog grid en mobile: 1 columna, cards full width ── */

@media (max-width: 768px) {

    .blog-grid {

        grid-template-columns: 1fr;

        gap: 1.2rem;

    }



    .blog-grid .blog-card {

        min-width: 100%;

        max-width: 100%;

        width: 100%;

    }



    .blog-grid .blog-content {

        padding: 1.2rem;

    }



    .blog-grid .blog-card h3 {

        font-size: 1.1rem;

    }

}

/* ====================================
   PORTAL: Fix definitivo de línea + Loading mejorado
   Pegar AL FINAL de main.css
   ==================================== */

/* ─── Eliminar línea sobre el formulario ─────────────────────────────────── */

/* Resetear borders en TODOS los elementos del form */
.portal-form .wpcf7-form,
.portal-form .wpcf7-form *,
.portal-form .wpcf7-form > *,
.portal-form .wpcf7-form fieldset,
.portal-form .wpcf7-form .hidden-fields-container,
.portal-form .wpcf7-form p {
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Eliminar pseudo-elementos */
.portal-form .wpcf7::before,
.portal-form .wpcf7::after,
.portal-form .wpcf7-form::before,
.portal-form .wpcf7-form::after,
.portal-form .wpcf7-form *::before,
.portal-form .wpcf7-form *::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Eliminar HR si existe */
.portal-form hr {
    display: none !important;
}

/* ─── Loading placeholder mejorado ───────────────────────────────────────── */

.portal-form .loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, rgba(27, 79, 114, 0.03) 0%, rgba(243, 156, 18, 0.03) 100%);
    border-radius: 12px;
    border: 2px dashed rgba(27, 79, 114, 0.15);
    min-height: 180px;
}

.portal-form .loading-placeholder p {
    color: var(--primary-color) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Spinner animado */
.portal-form .loading-placeholder p::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(27, 79, 114, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Texto adicional opcional */
.portal-form .loading-placeholder p::after {
    content: '⏳';
    font-size: 1.2rem;
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}