/* ==========================================================================
   SISTEMA VISUAL OKV para las paginas publicas hechas con Tailwind
   (bolsa de empleo, inscripcion, blog). Es el mismo lenguaje que la home:
   Archivo en mayusculas, IBM Plex Mono para etiquetas, esquinas rectas,
   lineas finas, franja de peligro y tinta casi negra.
   Se carga DESPUES del CSS de cada pagina y pisa lo justo. Las mismas reglas
   viven en odoo/addons/okv_erp/static/src/css/okv.css para los portales.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #0C0F14;
  --cyan: #00AEEF;
  --cyan-d: #0081B2;
  --safety: #FFB627;
  --line: rgba(12,15,20,.13);
  --line2: rgba(12,15,20,.24);
  --hazard: repeating-linear-gradient(135deg, #FFB627 0 12px, #0C0F14 12px 24px);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  background-color: #fff !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; display: block; height: 6px; background: var(--hazard); position: sticky; top: 0; z-index: 200; }
::selection { background-color: var(--safety); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Titulares */
h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif !important;
  text-transform: uppercase; font-weight: 900 !important;
  letter-spacing: -.035em !important; text-wrap: balance;
}
h1 { line-height: .95 !important; }
h2, h3 { line-height: 1.02 !important; }

/* Esquinas rectas y sin sombras */
button, a, input, select, textarea, [class*="rounded"],
.premium-card, .swiper-button-prev, .swiper-button-next, .swiper-pagination-bullet { border-radius: 0 !important; }
[class*="shadow"], .premium-card { box-shadow: none !important; }

/* Color de marca */
.text-brand, .hover\:text-brand:hover, .text-brand\/70 { color: var(--cyan-d) !important; }
.bg-brand {
  background-color: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink) !important;
  font-family: 'Archivo', sans-serif !important; text-transform: uppercase; letter-spacing: .07em; font-weight: 800 !important;
  transition: background .2s, border-color .2s, transform .2s cubic-bezier(.16,1,.3,1);
}
.bg-brand:hover, .hover\:bg-brand-dark:hover { background-color: var(--cyan-d) !important; border-color: var(--cyan-d) !important; transform: translateY(-2px); }
.hover\:border-brand:hover { border-color: var(--cyan) !important; }

/* Neutros */
.border, .border-slate-200, .border-slate-100 { border-color: var(--line) !important; }
.text-slate-900, .text-slate-800, .text-slate-700 { color: var(--ink) !important; }
.text-slate-600, .text-slate-500, .text-slate-400 { color: rgba(12,15,20,.6) !important; }
.bg-slate-50, .bg-slate-100 { background-color: #FAFAFA !important; }

/* Tarjetas de oferta y controles del carrusel */
.premium-card { border: 1px solid var(--line) !important; background-color: #fff !important; transition: border-color .2s, transform .2s cubic-bezier(.16,1,.3,1); }
.premium-card:hover { border-color: var(--cyan) !important; transform: translateY(-3px); }
.swiper-button-prev, .swiper-button-next { background-color: var(--ink) !important; color: #fff !important; }
.swiper-pagination-bullet { background-color: var(--line2) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background-color: var(--cyan) !important; }

/* Etiquetas y textos pequenos en mono */
label, .tracking-wider, .uppercase {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  letter-spacing: .13em !important; text-transform: uppercase; font-size: 11.5px !important; font-weight: 600 !important;
}

/* Formularios: campos rectos y sin el rojo de "invalido" desde el primer momento */
input, select, textarea {
  border: 1px solid var(--line2) !important; background-color: #fff !important; box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 500;
}
input:invalid, select:invalid, textarea:invalid { border-color: var(--line2) !important; background-color: #fff !important; box-shadow: none !important; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px rgba(0,174,239,.12) !important; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: #a32222 !important; }
input[type="file"]::file-selector-button {
  margin-right: .8rem; padding: .5rem .9rem; border: 1px solid var(--ink); border-radius: 0;
  background-color: var(--ink); color: #fff; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .bg-brand, .premium-card { transition: none; }
  .bg-brand:hover, .premium-card:hover { transform: none; }
}

/* Boton destacado de acceso a los portales */
.btn-portal {
  background-color: var(--cyan) !important; color: #fff !important; border: 0 !important;
  font-family: 'Archivo', sans-serif !important; letter-spacing: .07em; text-transform: uppercase; font-weight: 800 !important;
  box-shadow: inset 0 -4px 0 var(--safety) !important; white-space: nowrap;
  transition: background .2s, transform .2s cubic-bezier(.16,1,.3,1);
}
.btn-portal:hover { background-color: var(--ink) !important; transform: translateY(-2px); }

/* Cabecera en movil: solo Contactar y Portales */
.solo-movil { display: none !important; }
@media (max-width: 767px) {
  .solo-movil { display: inline-flex !important; }
  .solo-escritorio { display: none !important; }
}
.btn-contactar-tw {
  align-items: center; padding: .6rem 1rem; border: 1px solid var(--line2);
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}