/* ==================================================== THE CARGO MAGAZINE — Main Stylesheet Brand Colors: Orange #F5A623, Dark #0D0D0D, White ==================================================== */ /* Las fuentes se cargan como en el de cada página (con preconnect), no con @import aquí — @import bloquea el CSSOM y retrasa la carga de fuentes un viaje de red extra. */ /* ======= CSS VARIABLES ======= */ :root { --orange: #F5A623; --orange-dark: #D4891A; --orange-light: #FFC04D; --black: #FFFFFF; /* Main background white */ --dark: #F9FAFB; /* Alternate section bg */ --dark2: #FFFFFF; /* Card bg white */ --dark3: #F3F4F6; /* Alternate dark details light gray */ --gray: #E5E7EB; /* Borders light gray */ --gray2: #D1D5DB; /* Tags light gray */ --gray3: #9CA3AF; --text-muted: #6B7280; /* Subtitles gray */ --text-light: #374151; /* Dark gray text */ --white: #111827; /* Core dark gray text */ --blue-accent: #1A6FA0; --success: #2ECC71; --font-heading: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; --font-ui: 'Inter', sans-serif; --nav-height: 70px; --radius: 8px; --radius-lg: 16px; --shadow: 0 10px 30px rgba(0,0,0,0.05); --shadow-orange: 0 4px 24px rgba(245,166,35,0.15); --transition: 0.3s ease; /* Esquina "cortada": una sola esquina (superior derecha) muy redondeada, el resto casi recta. Se usa en botones, tags y píldoras en vez del redondeo uniforme/pill. */ --corner: 4px 22px 4px 4px; --corner-sm: 3px 14px 3px 3px; } /* ======= RESET ======= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--black); color: var(--white); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ======= SCROLLBAR ======= */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--dark); } ::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; } /* ======= UTILITY CLASSES ======= */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .section-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } .section-title span { color: var(--orange); } .section-subtitle { color: var(--text-muted); font-size: 1rem; margin-top: 8px; } .tag { display: inline-block; background: var(--orange); color: #0D0D0D; /* Fixed dark text */ font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border-radius: var(--corner-sm); } .tag.blue { background: var(--blue-accent); color: #FFFFFF; } /* Fixed white text */ .tag.dark { background: var(--gray2); color: var(--white); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--corner); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; transition: var(--transition); } .btn-primary { background: var(--orange); color: #0D0D0D; /* Fixed dark text */ } .btn-primary:hover { background: var(--orange-light); transform: translateY(-2px); box-shadow: var(--shadow-orange); } .btn-outline { border: 2px solid var(--orange); color: var(--orange); } .btn-outline:hover { background: var(--orange); color: #0D0D0D; /* Fixed dark text */ transform: translateY(-2px); } .btn-ghost { border: 1px solid var(--gray2); color: var(--text-light); } .btn-ghost:hover { border-color: var(--orange); color: var(--orange); } .divider-line { display: flex; align-items: center; gap: 16px; margin: 40px 0; } .divider-line::before, .divider-line::after { content: ''; flex: 1; height: 1px; background: var(--gray); } .orange-bar { width: 4px; height: 100%; background: var(--orange); position: absolute; left: 0; top: 0; } /* ======= TOP BAR ======= */ .top-bar { background: rgba(243,244,246,0.85); /* Light gray, translúcido */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray); padding: 8px 0; font-family: var(--font-ui); font-size: 0.78rem; color: var(--text-muted); } .top-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .top-bar-date { color: var(--orange); font-weight: 600; } .top-bar-links { display: flex; gap: 20px; align-items: center; } .top-bar-links a:hover { color: var(--orange); transition: var(--transition); } .top-bar-social { display: flex; gap: 12px; } .top-bar-social a { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray2); border-radius: 50%; font-size: 0.75rem; transition: var(--transition); } .top-bar-social a:hover { border-color: var(--orange); color: var(--orange); } /* ======= NAVIGATION ======= */ .navbar { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,0.92); /* Translucent white background */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--gray); height: var(--nav-height); transition: var(--transition); } .navbar.scrolled { box-shadow: 0 8px 32px rgba(0,0,0,0.05); border-bottom-color: var(--orange); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; } .nav-logo img { height: 44px; width: auto; object-fit: contain; } .nav-logo-text { display: flex; flex-direction: column; line-height: 1; } .nav-logo-text .the { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--white); font-family: var(--font-heading); text-transform: uppercase; } .nav-logo-text .cargo { font-size: 1.6rem; font-family: var(--font-heading); font-weight: 900; color: var(--orange); line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; } .nav-logo-text .magazine { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--white); font-family: var(--font-heading); text-transform: uppercase; } .nav-menu { display: flex; align-items: center; gap: 4px; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 4px; padding: 8px 12px; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); border-radius: 6px; transition: var(--transition); white-space: nowrap; } .nav-link:hover, .nav-link.active { color: var(--orange); background: rgba(245,166,35,0.1); } .nav-link svg { width: 12px; height: 12px; } .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background: var(--dark2); border: 1px solid var(--gray); border-radius: var(--radius); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: var(--transition); z-index: 100; } .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { display: block; padding: 8px 12px; font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-light); border-radius: 6px; transition: var(--transition); } .dropdown a:hover { color: var(--orange); background: rgba(245,166,35,0.08); padding-left: 16px; } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-search-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray2); border-radius: var(--radius); color: var(--text-light); font-size: 1rem; transition: var(--transition); } .nav-search-btn:hover { border-color: var(--orange); color: var(--orange); } .hamburger { display: none; flex-direction: column; gap: 5px; width: 32px; padding: 4px; } .hamburger span { display: block; height: 2px; background: var(--white); transition: var(--transition); border-radius: 2px; } /* ======= BREAKING NEWS TICKER ======= */ .breaking-ticker { background: #0D0D0F; color: #fff; padding: 10px 0; overflow: hidden; position: relative; } .ticker-inner { display: flex; align-items: center; gap: 14px; } .ticker-live { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ticker-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 rgba(245,166,35,0.5); animation: ticker-pulse 2s ease-out infinite; } @keyframes ticker-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,0.45); } 70% { box-shadow: 0 0 0 7px rgba(245,166,35,0); } 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } } .ticker-track { display: flex; animation: ticker-scroll 35s linear infinite; white-space: nowrap; } .ticker-track:hover { animation-play-state: paused; } .ticker-item { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; padding-right: 20px; margin-right: 20px; border-right: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; } .ticker-item:last-child { border-right: none; } .ticker-item a { color: inherit; transition: opacity var(--transition); } .ticker-item a:hover { opacity: 0.7; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ======= HERO SECTION ======= */ .hero { position: relative; min-height: 90vh; display: flex; align-items: center; /* antes flex-end: el texto quedaba muy abajo al cargar */ overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-image: url('../images/hero-banner.jpg'); background-size: cover; background-position: center; filter: brightness(0.7); transform: scale(1.05); transition: transform 8s ease; } .hero:hover .hero-bg { transform: scale(1); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 40%, rgba(255,255,255,0.2) 100% ); } .hero-content { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; width: 100%; } .hero-edition { display: inline-flex; align-items: center; gap: 10px; background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.4); padding: 6px 16px; border-radius: var(--corner); margin-bottom: 24px; backdrop-filter: blur(10px); } .hero-edition span { font-size: 0.8rem; font-weight: 600; color: var(--orange); text-transform: uppercase; letter-spacing: 0.1em; } .hero-edition .dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; animation: pulse-dot 2s ease infinite; } @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.5);} } .hero-title { font-family: var(--font-heading); font-weight: 900; font-size: clamp(3rem, 8vw, 6.5rem); text-transform: uppercase; line-height: 0.95; margin-bottom: 8px; } .hero-title .accent { color: var(--orange); display: block; font-style: italic; } .hero-subtitle { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--text-light); max-width: 560px; margin-bottom: 36px; line-height: 1.5; } .hero-categories { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .hero-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; animation: bounce 2s ease infinite; } .scroll-arrow { width: 20px; height: 20px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg); } @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(6px);} } /* ======= FEATURED ARTICLES GRID ======= */ .featured-section { padding: 80px 0; } .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; } .featured-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 20px; } .card { background: var(--dark2); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray); transition: var(--transition); position: relative; cursor: pointer; } .card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: var(--shadow-orange); } .card-main { grid-column: span 8; display: flex; flex-direction: column; } .card-secondary { grid-column: span 4; } .card-image { position: relative; overflow: hidden; } .card-main .card-image { height: 420px; } .card-secondary .card-image { height: 200px; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.05); } .card-image-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,13,13,0.9) 0%, transparent 60%); } .card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .card-meta { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-ui); } .card-meta .author { display: flex; align-items: center; gap: 6px; } .card-meta .author-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: var(--black); } .card-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--white); transition: var(--transition); } .card-main .card-title { font-size: 1.8rem; } .card:hover .card-title { color: var(--orange); } .card-excerpt { color: var(--text-muted); font-size: 0.88rem; margin-top: 10px; line-height: 1.5; flex: 1; } .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gray); } .read-more { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--orange); display: flex; align-items: center; gap: 6px; transition: var(--transition); } .read-more:hover { gap: 10px; } /* Convierte toda la tarjeta de noticia en clicable (no solo el enlace "Leer"), estirando el enlace real hasta cubrir la tarjeta completa. No se agrega position al propio enlace: así el ::after toma como referencia a .card (position:relative), que es el ancestro posicionado más cercano, y cubre la tarjeta entera. */ .card .read-more::after { content: ''; position: absolute; inset: 0; z-index: 1; } .read-time { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-ui); } /* ======= NEWS GRID ======= */ .news-section { padding: 80px 0; background: var(--dark2); } .news-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .filter-btn { padding: 8px 20px; border-radius: var(--corner); font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--gray2); color: var(--text-muted); transition: var(--transition); } .filter-btn:hover, .filter-btn.active { background: var(--orange); color: #0D0D0D; border-color: var(--orange); /* Fixed dark text */ } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .news-card { display: flex; flex-direction: column; } .news-card .card-image { height: 180px; } /* ======= MAGAZINE SECTION ======= */ .magazine-section { padding: 100px 0; background: var(--dark); /* Zebra striping soft gray background */ } .magazine-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .magazine-cover-wrap { position: relative; max-width: 380px; margin: 0 auto; } .magazine-cover { border-radius: 12px; box-shadow: -20px 20px 60px rgba(0,0,0,0.15), 20px -10px 40px rgba(245,166,35,0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; width: 100%; } .magazine-cover-wrap:hover .magazine-cover { transform: rotate(-2deg) translateY(-8px); box-shadow: -30px 30px 80px rgba(0,0,0,0.2), 30px -15px 60px rgba(245,166,35,0.15); } .magazine-badge { position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: var(--orange); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; color: #0D0D0D; /* Fixed dark text */ line-height: 1; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; animation: spin-badge 8s linear infinite; box-shadow: 0 4px 20px rgba(245,166,35,0.3); } @keyframes spin-badge { from{transform:rotate(0deg);}to{transform:rotate(360deg);} } .magazine-editions { display: flex; gap: 12px; margin-top: 40px; } .edition-thumb { width: 80px; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: 0.6; transition: var(--transition); border: 2px solid transparent; } .edition-thumb:hover, .edition-thumb.active { opacity: 1; border-color: var(--orange); } .edition-thumb img { width: 100%; } .magazine-text .section-title { margin-bottom: 20px; } .magazine-features { margin: 32px 0; display: flex; flex-direction: column; gap: 20px; } .magazine-feature { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--dark2); border-radius: var(--radius); border-left: 3px solid var(--orange); box-shadow: 0 5px 15px rgba(0,0,0,0.02); } .feature-icon { width: 44px; height: 44px; min-width: 44px; background: rgba(245,166,35,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .feature-title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); } .feature-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; } /* ======= STATS BAR ======= */ .stats-bar { background: var(--orange); padding: 48px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat-item {} .stat-number { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.5rem, 5vw, 4rem); color: #0D0D0D; /* Fixed dark text */ line-height: 1; } .stat-label { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(0,0,0,0.65); margin-top: 6px; } /* ======= DIRECTORY SECTION ======= */ .directory-section { padding: 80px 0; } .directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; } .dir-card { background: var(--dark2); border: 1px solid var(--gray); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; transition: var(--transition); position: relative; overflow: hidden; } .dir-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--orange); transform: scaleX(0); transition: var(--transition); } .dir-card:hover { border-color: var(--orange); transform: translateY(-4px); } .dir-card:hover::before { transform: scaleX(1); } .dir-logo { width: 64px; height: 64px; background: var(--dark3); border-radius: 12px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .dir-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; } .dir-category { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } .dir-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; } /* ======= JOBS SECTION ======= */ .jobs-section { padding: 80px 0; background: var(--dark2); } .jobs-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .job-card { background: var(--dark3); border: 1px solid var(--gray); border-radius: var(--radius); padding: 24px 28px; display: flex; align-items: center; gap: 24px; transition: var(--transition); } .job-card:hover { border-color: var(--orange); background: rgba(245,166,35,0.04); } .job-logo { width: 56px; height: 56px; min-width: 56px; background: var(--dark2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; border: 1px solid var(--gray2); } .job-info { flex: 1; } .job-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.02em; } .job-company { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; } .job-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .job-salary { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--orange); white-space: nowrap; } /* Evento destacado (pages/eventos.html) — 2 columnas en escritorio; en móvil se apila verticalmente y la imagen baja de 400px a una altura compacta para que la tarjeta no se estire tanto. */ .event-featured-card { background: var(--dark2); border: 1px solid var(--orange); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 60px; } .event-featured-img { height: 400px; overflow: hidden; position: relative; } .event-featured-body { padding: 48px; } @media (max-width: 768px) { .event-featured-card { grid-template-columns: 1fr; } .event-featured-img { height: 200px; } .event-featured-body { padding: 28px 24px; } } /* ======= EVENTS SECTION ======= */ .events-section { padding: 80px 0; } .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 40px; } .event-card { background: var(--dark2); border: 1px solid var(--gray); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .event-card:hover { transform: translateY(-4px); border-color: var(--orange); } .event-image { height: 180px; overflow: hidden; position: relative; } .event-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .event-card:hover .event-image img { transform: scale(1.08); } .event-date-badge { position: absolute; top: 16px; left: 16px; background: var(--orange); color: var(--black); border-radius: 8px; padding: 8px 12px; text-align: center; line-height: 1.1; font-family: var(--font-heading); } .event-date-badge .day { font-size: 1.8rem; font-weight: 900; } .event-date-badge .month { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .event-body { padding: 24px; } .event-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; margin-bottom: 8px; transition: var(--transition); } .event-card:hover .event-title { color: var(--orange); } .event-location { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } /* ======= PODCAST / INTERVIEW SECTION ======= */ .podcast-section { padding: 80px 0; background: var(--dark2); } .podcast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; } .podcast-card { background: var(--dark3); border: 1px solid var(--gray); border-radius: var(--radius-lg); padding: 28px; position: relative; transition: var(--transition); overflow: hidden; } .podcast-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--orange-light)); } .podcast-card:hover { border-color: var(--orange); transform: translateY(-3px); } .podcast-number { font-family: var(--font-heading); font-weight: 900; font-size: 3rem; color: var(--gray2); line-height: 1; margin-bottom: 16px; } .podcast-play { width: 52px; height: 52px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #0D0D0D; margin-bottom: 20px; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 16px rgba(245,166,35,0.4); } .podcast-play:hover { transform: scale(1.1); background: var(--orange-light); } .podcast-ep { font-size: 0.75rem; font-weight: 600; color: var(--orange); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .podcast-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; line-height: 1.2; margin-bottom: 8px; } .podcast-guest { font-size: 0.85rem; color: var(--text-muted); } .podcast-duration { font-size: 0.8rem; color: var(--text-muted); margin-top: 16px; display: flex; align-items: center; gap: 6px; } /* ======= ADS/PUBLICIDAD SECTIONS ======= */ .ad-banner-full { background: linear-gradient(135deg, var(--dark2), var(--dark3)); border: 1px solid var(--gray); border-radius: var(--radius-lg); padding: 40px; text-align: center; position: relative; overflow: hidden; margin: 0 0 60px; } .ad-banner-full::before { content: 'PUBLICIDAD'; position: absolute; top: 8px; right: 12px; font-size: 0.65rem; font-weight: 600; color: var(--gray3); letter-spacing: 0.15em; } .ad-banner-full .ad-content { position: relative; z-index: 1; } .ad-banner-full h3 { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; text-transform: uppercase; margin-bottom: 12px; } .ad-banner-full p { color: var(--text-muted); margin-bottom: 24px; } .ad-sidebar { background: var(--dark2); border: 1px solid var(--gray); border-radius: var(--radius); padding: 20px; text-align: center; margin-bottom: 20px; position: relative; } .ad-sidebar::before { content: 'Publicidad'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gray); color: var(--text-muted); font-size: 0.68rem; padding: 2px 10px; border-radius: var(--corner-sm); } .ad-sidebar-img { width: 100%; border-radius: 8px; background: var(--dark3); height: 200px; display: flex; align-items: center; justify-content: center; font-size: 2rem; } .ad-sidebar-img img { max-width: 55%; max-height: 55%; object-fit: contain; opacity: 0.8; } /* ======= ESPACIOS PUBLICITARIOS DINÁMICOS (js/ads.js) ======= */ .ad-slot { margin: 28px 0 40px; } /* Cuando hay más de un anuncio activo en un mismo espacio (encabezado, lateral, pie, etc.), se reparten en partes iguales — lado a lado si hay espacio, apilados si no (ej. la barra lateral). Este selector aplica a CUALQUIER contenedor de anuncio (.ad-slot, .ad-sidebar, .ad-banner-full), ya que js/ads.js agrega la clase "ad-slot-multi" sin importar el tipo de espacio. */ .ad-slot-multi { display: flex; flex-wrap: wrap; gap: 16px; } .ad-slot-multi .ad-slot-link { flex: 1 1 260px; } .ad-slot-link { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray); background: var(--dark2); transition: transform var(--transition), box-shadow var(--transition); } .ad-slot-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .ad-slot-link img { width: 100%; display: block; max-height: 220px; object-fit: cover; } .ad-slot-label { position: absolute; top: 8px; right: 12px; z-index: 1; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.6); padding: 3px 10px; border-radius: var(--corner-sm); } /* Evita la etiqueta "PUBLICIDAD" duplicada cuando un anuncio real reemplaza el banner de respaldo "Anúnciate aquí" */ .ad-banner-full.ad-slot-filled::before { display: none; } /* Slot compacto para barra lateral — independiente del CTA fijo "Anunciarme" (nunca lo reemplaza) y horizontal (no cuadrado) para no ocupar tanto espacio vertical. Sin sticky: al ir en medio de la barra lateral, quedarse fijo tapaba el contenido de abajo al hacer scroll. */ .ad-slot-sidebar { margin: 0 0 20px; } .ad-slot-sidebar .ad-slot-link img { max-height: 110px; } /* Slot compacto para insertar entre tarjetas de un listado — bajo, formato horizontal */ .ad-slot-infeed { margin: 8px 0 32px; } .ad-slot-infeed .ad-slot-link img { max-height: 130px; } /* ======= NEWSLETTER / SUBSCRIBE ======= */ .newsletter-section { padding: 80px 0; background: linear-gradient(135deg, var(--dark2) 0%, var(--dark3) 100%); position: relative; overflow: hidden; } .newsletter-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,166,35,0.1) 0%, transparent 70%); border-radius: 50%; } .newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .newsletter-form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-label { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .form-select, .form-textarea { background: var(--dark3); border: 1px solid var(--gray2); color: var(--white); border-radius: var(--radius); padding: 12px 16px; font-family: var(--font-body); font-size: 0.9rem; transition: var(--transition); outline: none; width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,166,35,0.1); } .form-input::placeholder { color: var(--gray3); } .form-select { appearance: none; cursor: pointer; } .form-textarea { resize: vertical; min-height: 100px; } /* ======= CLASSIFIED SECTION ======= */ .classifieds-section { padding: 80px 0; } .classifieds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 32px; } .classified-card { background: var(--dark2); border: 1px solid var(--gray); border-radius: var(--radius); padding: 20px; transition: var(--transition); } .classified-card:hover { border-color: var(--orange); } .classified-type { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 10px; border-radius: 3px; margin-bottom: 12px; } .classified-type.venta { background: rgba(46,204,113,0.15); color: #2ECC71; } .classified-type.compra { background: rgba(245,166,35,0.15); color: var(--orange); } .classified-type.renta { background: rgba(26,111,160,0.15); color: var(--blue-accent); } .classified-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; margin-bottom: 6px; } .classified-price { color: var(--orange); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; } .classified-location { font-size: 0.8rem; color: var(--text-muted); } /* ======= CONTACT SECTION ======= */ .contact-section { padding: 80px 0; background: var(--dark2); } .contact-inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; } .contact-info { display: flex; flex-direction: column; gap: 28px; } .contact-item { display: flex; gap: 16px; align-items: flex-start; } .contact-icon { width: 48px; height: 48px; min-width: 48px; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--orange); } .contact-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); margin-bottom: 4px; } .contact-value { font-size: 0.88rem; color: var(--text-muted); } /* ======= FOOTER ======= A propósito con fondo oscuro real (no var(--black), que en esta paleta es blanco) — le da al sitio un "bookend" oscuro abajo para que no se sienta todo blanco. */ .footer { background: #0D0D0F; padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand .nav-logo-text { margin-bottom: 20px; } .footer-desc { color: rgba(255,255,255,0.55); font-size: 0.88rem; line-height: 1.7; max-width: 280px; } .footer-social { display: flex; gap: 10px; margin-top: 24px; } .footer-social a { width: 38px; height: 38px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: var(--transition); } .footer-social a:hover { background: var(--orange); border-color: var(--orange); color: #0D0D0D; } /* Fixed dark text on orange hover */ .footer-heading { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--white); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--orange); display: inline-block; } /* Esta misma clase se reutiliza en tarjetas de fondo claro (barras laterales de Noticias, Bolsa de Trabajo, etc.) — el blanco solo aplica dentro del pie de página, que sí es oscuro. */ .footer .footer-heading { color: #fff; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 0.88rem; color: var(--white); transition: var(--transition); display: flex; align-items: center; gap: 8px; } .footer-links a::before { content: '›'; color: var(--orange); font-size: 1rem; } .footer-links a:hover { color: var(--orange); padding-left: 6px; } /* Igual que .footer-heading: esta clase se reutiliza en tarjetas de fondo claro (barra lateral de Categorías en Noticias, Bolsa de Trabajo), así que el color claro solo debe aplicar dentro del pie de página real, que sí es oscuro. */ .footer .footer-links a { color: rgba(255,255,255,0.55); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 0.82rem; color: rgba(255,255,255,0.55); } .footer-copy span { color: var(--orange); } .footer-legal { display: flex; gap: 20px; } .footer-legal a { font-size: 0.82rem; color: rgba(255,255,255,0.55); transition: var(--transition); } .footer-legal a:hover { color: var(--orange); } /* ======= MOBILE MENU ======= Fondo oscuro real (mismo tono que el buscador) — otro "momento negro" del sitio. */ .mobile-menu { position: fixed; inset: 0; background: #0D0D0F; z-index: 2000; display: flex; flex-direction: column; padding: 80px 24px 40px; transform: translateX(100%); transition: transform 0.4s ease; } .mobile-menu.open { transform: translateX(0); } .mobile-menu-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; } .mobile-nav-links { display: flex; flex-direction: column; gap: 4px; flex: 1; } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; transition: var(--transition); } .mobile-nav-link:hover { color: var(--orange); padding-left: 12px; } .mobile-nav-link .arrow { color: var(--orange); } /* ======= SEARCH OVERLAY ======= */ .search-overlay { position: fixed; inset: 0; background: rgba(13,13,13,0.96); backdrop-filter: blur(20px); z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; opacity: 0; visibility: hidden; transition: var(--transition); } .search-overlay.open { opacity: 1; visibility: visible; } .search-box { width: 100%; max-width: 700px; padding: 0 24px; } .search-input-wrap { position: relative; display: flex; align-items: center; } .search-big-input { width: 100%; background: transparent; border: none; border-bottom: 3px solid var(--orange); color: #FFFFFF; font-family: var(--font-heading); /* Fixed white text on dark bg */ font-weight: 700; font-size: 3rem; text-transform: uppercase; outline: none; padding: 16px 0; letter-spacing: 0.02em; } .search-big-input::placeholder { color: #888888; } .search-hint { color: #888888; font-size: 0.85rem; margin-top: 16px; } .search-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #FFFFFF; cursor: pointer; /* Fixed white close icon */ border: 1px solid rgba(255,255,255,0.2); } .search-close:hover { background: var(--orange); color: #0D0D0D; } /* ======= SCROLL TO TOP ======= */ .scroll-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; background: var(--orange); color: #0D0D0D; /* Fixed dark icon color */ border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-orange); opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition); z-index: 900; } .scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { transform: translateY(-4px) scale(1.1); } /* ======= LOADING ANIMATION ======= */ .skeleton { background: linear-gradient(90deg, var(--dark2) 25%, var(--dark3) 50%, var(--dark2) 75%); background-size: 200% 100%; animation: skeleton-load 1.5s infinite; border-radius: var(--radius); } @keyframes skeleton-load { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } /* ======= RESPONSIVE ======= */ @media (max-width: 1024px) { .featured-grid { grid-template-columns: 1fr; } .card-main, .card-secondary { grid-column: span 12; } .magazine-inner { grid-template-columns: 1fr; gap: 40px; } .magazine-cover-wrap { max-width: 280px; } .newsletter-inner { grid-template-columns: 1fr; gap: 40px; } .footer-grid { grid-template-columns: 1fr 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .contact-inner { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-menu, .nav-cta { display: none; } .hamburger { display: flex; } .top-bar-links { display: none; } .hero { min-height: 70vh; } .hero-title { font-size: 3rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .events-grid { grid-template-columns: 1fr; } .podcast-grid { grid-template-columns: 1fr; } .directory-grid { grid-template-columns: repeat(2, 1fr); } .classifieds-grid { grid-template-columns: 1fr; } .job-card { flex-direction: column; align-items: flex-start; } .magazine-inner { text-align: center; } .section-header { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .directory-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { justify-content: center; } .stats-grid { grid-template-columns: 1fr 1fr; } } /* ======= PAGE-LEVEL STYLES ======= */ .page-hero { background: linear-gradient(180deg, #17171A 0%, #0D0D0F 100%); padding: 120px 0 60px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center top, rgba(245,166,35,0.12) 0%, transparent 60%); } .page-hero .container { position: relative; z-index: 1; } .page-hero .breadcrumb { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-bottom: 16px; } .page-hero .breadcrumb a { color: rgba(255,255,255,0.75); } .page-hero .breadcrumb .sep { color: rgba(255,255,255,0.3); } .page-hero .breadcrumb a:hover { color: var(--orange); } /* .section-title normalmente hereda el color de texto oscuro del body; dentro del hero de página (fondo negro) debe ser blanco. El span destacado sigue en var(--orange). */ .page-hero .section-title { color: #fff; } .page-hero .section-subtitle { color: rgba(255,255,255,0.6); } .content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding-top: 60px; padding-bottom: 60px; } @media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; } } /* ======= ANIMACIONES DE ENTRADA ======= */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-in { opacity: 0; transition: opacity 0.6s ease; } .fade-in.visible { opacity: 1; }