/* ============================================================
   NotiTrabajos · CSS del rediseño (portado del prototipo)
   Rejillas, animaciones, responsive e interacciones.
   Los colores/espaciados finos van inline en el markup (fidelidad).
   ============================================================ */

/* Contenedor de plantillas: anular el layout de Astra en las vistas del rediseño */
.nt-app { font-family: "IBM Plex Sans", system-ui, sans-serif; color: #0B1220; }
.nt-app a { color: #3F66DA; text-decoration: none; }
.nt-app a:hover { color: #2F4FB0; }

/* La página del rediseño ocupa todo el ancho: neutralizamos el contenedor de Astra */
.nt-fullbleed .site-content .ast-container,
.nt-fullbleed #primary,
.nt-fullbleed .entry-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.nt-fullbleed .ast-container { max-width: none !important; padding: 0 !important; }
.nt-fullbleed #content { padding: 0 !important; }
.nt-fullbleed .entry-header { display: none !important; }

/* ---------- Rejillas del prototipo ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.cat-grid { display: grid; grid-template-columns: 1fr 300px; gap: 34px; }
.news-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }

/* ---------- Animaciones ---------- */
@keyframes nt-livepulse { 0%{box-shadow:0 0 0 0 rgba(223,247,0,0.7);} 70%{box-shadow:0 0 0 9px rgba(223,247,0,0);} 100%{box-shadow:0 0 0 0 rgba(223,247,0,0);} }
@keyframes nt-notifIn { 0%{opacity:0; transform:translateY(5px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes nt-nudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(4px);} }
@keyframes nt-toastIn { 0%{opacity:0; transform:translate(-50%,12px);} 100%{opacity:1; transform:translate(-50%,0);} }
@keyframes nt-heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nt-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes nt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nt-revealView { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .34s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.hero-anim { opacity: 0; animation: nt-heroIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-anim:nth-child(1){ animation-delay:.05s; } .hero-anim:nth-child(2){ animation-delay:.16s; }
.hero-anim:nth-child(3){ animation-delay:.27s; } .hero-anim:nth-child(4){ animation-delay:.38s; } .hero-anim:nth-child(5){ animation-delay:.49s; }
.floaty { animation: nt-floaty 5.5s ease-in-out infinite; }
.livedot { animation: nt-livepulse 1.6s ease-out infinite; }
.nudge { animation: nt-nudge 1.1s ease-in-out infinite; }

.cta { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.4); }
.nt-app article { transition: transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s ease; }

/* Marquesina (franja de confianza) */
.marquee { display: flex; width: max-content; animation: nt-marquee 28s linear infinite; }
.marquee:hover { animation-play-state: paused; }

/* Notificación superior (fade-in al rotar) */
.notif-item { animation: nt-notifIn .45s ease; }

/* Submenú "Empleos" (hover en desktop) */
.has-sub { position: relative; }
.has-sub .submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 214px;
  background:#fff; border:1px solid #E3E7EE; border-radius:12px; box-shadow:0 18px 40px -16px rgba(11,18,32,0.4);
  padding:8px; z-index:50; }
.has-sub:hover .submenu { display: block; animation: nt-heroIn .18s ease; }

/* Botón de menú móvil (oculto en desktop) */
.menu-btn { display: none; }

/* Toast inferior */
.nt-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background:#0C0E13; color:#fff; font-weight:600; font-size:14.5px; padding:13px 20px; border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,0.5); z-index:9999; display:inline-flex; align-items:center; gap:10px;
  animation: nt-toastIn .3s ease; max-width: calc(100vw - 32px); }
.nt-toast .dot { width:9px; height:9px; border-radius:50%; background:#DFF700; flex:none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-anim, .floaty, .livedot, .nudge, .marquee, .notif-item {
    animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   RESPONSIVE (tablet ≤ 900px, móvil ≤ 560px) — del prototipo
   ============================================================ */
@media (max-width: 921px) {
  .nav-desktop, .search-desktop, .topbar-right { display: none !important; }
  .menu-btn { display: inline-flex !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 34px !important; padding-top: 40px !important; padding-bottom: 44px !important; }
  .hero-h1 { font-size: 38px !important; }
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .cat-grid { grid-template-columns: 1fr !important; }
  .news-grid { grid-template-columns: 1fr !important; padding: 32px !important; }
  .news-form { min-width: 0 !important; width: 100% !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .cat-card { flex-direction: column !important; }
  .cat-card-img { width: 100% !important; height: 130px !important; }
  .sec-pad { padding-top: 40px !important; padding-bottom: 40px !important; }
  .trust-strip { gap: 8px 20px !important; font-size: 12.5px !important; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4, .footer-grid { grid-template-columns: 1fr !important; }
  .hero-h1 { font-size: 31px !important; }
  .cat-head-h1 { font-size: 30px !important; }
}