/* Colores fríos de la estética editorial aplicados a la landing (index.html), /empresas y el
   panel de la vacante (PEO-45). Se pisan solo variables de color y unos pocos componentes: las
   fuentes son las del manual de marca (Baloo 2 + Inter), las mismas que ya tenían estas páginas.
   Todo va bajo html.ed-landing (clase en <html>) para ganarle en especificidad a los <style>
   que esas páginas tienen adentro, sin depender del orden de carga. */

html.ed-landing {
  --bg: #F5F7FA; --surface: #FFFFFF; --surface-2: #EEF1F5; --border: rgba(16, 21, 28, .12);
  --text-main: #10151C; --text-muted: #556070;
  /* El acento sigue siendo el azul de marca: lo usan los demos de la app, los íconos y los
     resaltados. Con el acento en negro (primera versión) todo eso quedaba gris y sin contraste;
     solo los botones van en negro, definidos abajo con --boton. */
  /* Un punto más oscuro que el #0B84E0 original para que el texto azul chico llegue a 4.5:1
     sobre el fondo claro (medido el 25/10/2026; con #0B84E0 daba 3.5). El blanco sobre este azul da 5:1. */
  --accent: #0A66B8; --accent-press: #08569C; --accent-flag: #0A84FF;
  --accent-lt: #E8F0F9;
  --success: #157A3B;
  --boton: #10151C; --boton-texto: #F5F7FA;
  --panel: var(--surface); --panel-2: var(--surface-2);
  --ink: var(--text-main); --ink-soft: var(--text-muted); --ink-faint: #626C7A;
  --hair: rgb(16 21 28 / .12); --hair-2: rgb(16 21 28 / .07);
  --card-sh: 0 1px 2px rgb(16 21 28 / .04), 0 18px 44px rgb(16 21 28 / .07);
  --nav-bg: rgb(255 255 255 / .82);
  --surface-rgb: 255 255 255; --ink-rgb: 16 21 28;
  --glass-line: rgb(16 21 28 / .08);
  --glass-lift: 0 8px 30px rgb(16 21 28 / .06), inset 0 1px 1px rgb(255 255 255 / .7);
  --glass-lift-lg: 0 16px 44px rgb(16 21 28 / .08), inset 0 1px 1px rgb(255 255 255 / .7);
  /* El ícono de la app sigue azul: es la marca. */
  --app-icon-ground: #0A84FF;
}
html.ed-landing[data-theme="dark"] {
  --bg: #0B0D10; --surface: #13161A; --surface-2: #1D2127; --border: rgba(236, 238, 242, .12);
  --text-main: #ECEEF2; --text-muted: #AEB4BE;
  /* Azul de relleno con texto blanco a 4.8:1; verde y gris tenue legibles sobre el fondo negro. */
  --accent: #2473C4; --accent-press: #2B82D8; --accent-lt: #16283A;
  --success: #4CC77A;
  --boton: #ECEEF2; --boton-texto: #0B0D10;
  --ink-faint: #8E95A1;
  --hair: rgb(236 238 242 / .12); --hair-2: rgb(236 238 242 / .06);
  --nav-bg: rgb(11 13 16 / .82);
  --surface-rgb: 19 22 26; --ink-rgb: 236 238 242;
  --glass-line: rgb(255 255 255 / .07);
}

html.ed-landing body { background: var(--bg); letter-spacing: -.005em; }

/* La palabra resaltada vuelve al azul de marca: en gris se perdía contra el fondo claro. */
html.ed-landing .hl { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }


/* Botones: negros (blancos en oscuro), esquinas chicas. */
html.ed-landing .btn:not(.ghost),
html.ed-landing .nav-cta {
  background: var(--boton); color: var(--boton-texto); border-radius: 10px; box-shadow: none;
  letter-spacing: 0;
}
html.ed-landing .btn.ghost { border-radius: 10px; border: 1px solid var(--hair); box-shadow: none; }
html.ed-landing .btn:not(.ghost) svg { color: currentColor; }
html.ed-landing .free-pill { border-radius: 8px; box-shadow: none; }
html.ed-landing .free-pill .tag { background: var(--boton); color: var(--boton-texto); border-radius: 5px; }

/* Etiquetas chicas ("eyebrow"): chip gris en vez de texto azul en mayúsculas. */
html.ed-landing .eyebrow {
  display: inline-block; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px;
  color: var(--ink-soft); background: var(--surface-2); border-radius: 6px; padding: 4px 10px;
}


/* Tarjetas: menos sombra, más línea fina. */
html.ed-landing .who-card,
html.ed-landing .cmp,
html.ed-landing .fcard { box-shadow: none; border: 1px solid var(--hair); background: var(--surface); }
html.ed-landing .who-card .num,
html.ed-landing .fcard .fi { background: var(--accent-lt); color: var(--accent); }

/* Fondo plano: sin el brillo que sigue al cursor. */
html.ed-landing #cursorGlow { display: none !important; }

/* Bloque oscuro "5 minutos. Por cada aviso.": la segunda línea en gris. */
html.ed-landing .claim { background: #0B0D10; }
html.ed-landing .claim .n span { color: #7C7A73; }

/* Inicio con el grabado de Buenos Aires (pedido de Nahuel, 25/10/2026; referencia: el pie de la
   web de Hashi). Todo con animaciones CSS, que el navegador corre aparte y no se frenan aunque
   la página dibuje pocos cuadros: entrada de arriba hacia abajo, zoom muy lento, una bandada de
   pájaros, el agua ondulando y un velero del propio grabado que se mece en Puerto Madero.
   buenos-aires*.webp tiene ese velero borrado (relleno con el agua de al lado) y ba-velero.png
   es el recorte, para que no aparezca dos veces. */
html.ed-landing .hero-word { display: none; }
html.ed-landing .hero { position: relative; padding-bottom: calc(var(--ba-alto) + 8px); }
html.ed-landing .hero > .wrap { position: relative; z-index: 1; }
html.ed-landing { --ba-alto: clamp(300px, 44vw, 640px); }
.ba { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ba-alto); pointer-events: none; overflow: hidden; }
.ba-lienzo {
  position: absolute; inset: 0;
  /* Arriba se funde con el fondo, como el cielo del grabado. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 90%, transparent);
  animation: ba-entra 1.8s cubic-bezier(.23, 1, .32, 1) both;
}
.ba-escena {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: max(100%, calc(var(--ba-alto) * 1672 / 941)); aspect-ratio: 1672 / 941;
}
.ba-zoom { position: absolute; inset: 0; transform-origin: 50% 80%; animation: ba-zoom 28s ease-in-out infinite alternate; }
.ba-zoom > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* El agua que se mueve: una copia del mismo grabado, recortada a las zonas de agua, con un filtro
   de ondas (SVG #ba-ondas) y desplazándose apenas de costado. Queda como el río ondulando. */
.ba-agua {
  position: absolute; background-image: url(/static/editorial/buenos-aires.webp); background-repeat: no-repeat;
  filter: url(#ba-ondas);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent);
          mask-image: radial-gradient(closest-side, #000 60%, transparent);
}
.ba-agua--rio {      /* el Río de la Plata, entre el puerto y las torres */
  left: 33%; top: 32.6%; width: 48%; height: 6.5%;
  background-size: calc(100% / .48) calc(100% / .065);
  background-position: 63.46% 34.87%;
  animation: ba-rio 11s ease-in-out infinite alternate;
}
.ba-agua--madero {   /* el dique de Puerto Madero, abajo a la derecha */
  left: 90%; top: 63.5%; width: 10%; height: 12%;
  background-size: calc(100% / .10) calc(100% / .12);
  background-position: 100% 72.16%;
  animation: ba-madero 9s ease-in-out infinite alternate;
}
/* El velero (recortado del mismo grabado) se mece y avanza muy despacio por el dique. */
.ba-velero {
  position: absolute; left: 95.93%; top: 63.12%; width: 2.87%; height: auto;
  transform-origin: 50% 85%; animation: ba-velero 34s ease-in-out infinite alternate, ba-mecerse 5s ease-in-out infinite alternate;
}
.ba-bandada {
  position: absolute; top: 4%; left: -14%; width: clamp(70px, 9vw, 130px);
  fill: none; stroke: #2d5fa6; stroke-width: 1.6; stroke-linecap: round; overflow: visible;
  animation: ba-vuelo 24s linear infinite;
}
.ba-pajaro { transform-box: fill-box; transform-origin: center; animation: ba-aleteo .9s ease-in-out infinite alternate; }
.ba-bandada > g:nth-child(2n) .ba-pajaro { animation-delay: -.35s; }
.ba-bandada > g:nth-child(3n) .ba-pajaro { animation-delay: -.6s; }
@keyframes ba-entra { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes ba-zoom { from { transform: scale(1.01); } to { transform: scale(1.05); } }
@keyframes ba-rio { from { background-position: 63.46% 34.87%; } to { background-position: calc(63.46% + 6px) 34.87%; } }
@keyframes ba-madero { from { background-position: 100% 72.16%; } to { background-position: calc(100% - 4px) 72.16%; } }
@keyframes ba-velero { from { translate: 0 0; } to { translate: -160% 4%; } }
@keyframes ba-mecerse { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@keyframes ba-vuelo {
  0% { transform: translate(0, 0); }
  50% { transform: translate(62vw, -14px); }
  100% { transform: translate(128vw, 6px); }
}
@keyframes ba-aleteo { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
/* Modo oscuro: el grabado invertido (líneas claras sobre azul noche), mismo tono de azul. */
html.ed-landing[data-theme="dark"] .ba-zoom { filter: invert(1) grayscale(1) sepia(.55) hue-rotate(175deg) saturate(2.4) brightness(.85) contrast(1.1); }
html.ed-landing[data-theme="dark"] .ba-bandada { stroke: #8fc0f2; }
@media (prefers-reduced-motion: reduce) {
  .ba-lienzo, .ba-zoom, .ba-agua, .ba-velero, .ba-bandada, .ba-pajaro { animation: none; }
  .ba-bandada { display: none; }
}

/* Etiquetas de la barra del celular del demo: venían con un gris azulado fijo (2.9:1 sobre el fondo claro). */
html.ed-landing .mobile-bar-item-label,
html.ed-landing .mobile-bar-item-icon { color: var(--ink-soft); }
html.ed-landing .mobile-bar-item--active .mobile-bar-item-label,
html.ed-landing .mobile-bar-item--active .mobile-bar-item-icon { color: var(--accent); }

/* Demos con fondos claros fijos que en oscuro dejaban el texto claro sobre claro. */
html.ed-landing[data-theme="dark"] .mobile-bar { background: rgba(19, 22, 26, .94); }
html.ed-landing[data-theme="dark"] .mobile-bar-item--active .mobile-bar-item-label,
html.ed-landing[data-theme="dark"] .mobile-bar-item--active .mobile-bar-item-icon { color: #5AB0EE; }
html.ed-landing[data-theme="dark"] .galo-tab:not(.galo-tab--active) { background: var(--surface-2); color: var(--text-muted); }
/* /empresas: la tarjeta de ejemplo del aviso copia los colores de la app; acá se ajustan para
   que se lean (el verde de "Encaja muy bien" daba 2:1 sobre blanco). */
html.ed-landing .match-card .match-card-veredicto--alto { color: #157A3B; }
html.ed-landing .match-card :is(.match-card-chip, .match-card-ats) { color: #545B68; }
html.ed-landing[data-theme="dark"] .match-card .match-card-veredicto--alto { color: #4CC77A; }
html.ed-landing[data-theme="dark"] .match-card :is(.match-card-chip, .match-card-ats) { color: #A3AAB6; }
html.ed-landing[data-theme="dark"] .faq a { color: #6BB6F0; }

/* El azul de relleno (--accent) es oscuro para que el blanco se lea encima; cuando el azul es
   texto sobre negro, va un celeste más claro (6:1 o más). */
html.ed-landing[data-theme="dark"] :is(.toggle-chip, .buscador-card-count, .galo-badge, .run-step-more,
  .who-card .num, .fcard .fi, .stats-band b, .hl) { color: #6BB6F0; }

/* La "e" de PeonApp en azul de marca (en el pie, sobre fondo oscuro, quedaba negra). */
html.ed-landing .brand b span,
html.ed-landing .sidemenu .sm-top b span { color: #0A84FF; }

/* Hero: el texto arranca debajo de la barra (antes se centraba en toda la pantalla y, con el
   grabado abajo, la etiqueta "Gratis" quedaba pegada a la barra de PeonApp). */
html.ed-landing .hero { min-height: 0; align-items: flex-start; padding-top: clamp(120px, 16vh, 176px); }

/* "PeonApp es para vos si…": quedó un solo panel (se sacaron "La diferencia se siente" y
   "Tus datos son tuyos"), así que deja de ser un carrusel con scroll fijo. */
html.ed-landing .trio { height: auto; }
html.ed-landing .trio-sticky { position: static; height: auto; display: block; overflow: visible; }
html.ed-landing .trio-panel { position: static; opacity: 1; transform: none; pointer-events: auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 24px); }
html.ed-landing .trio-panel .who-card { opacity: 1; transform: none; }

/* Pie ordenado como el de rayagent.io: marca y lema, y columnas Producto, Contacto, Recursos, Seguinos. */
html.ed-landing .footer-in { display: grid; grid-template-columns: minmax(200px, 1.2fr) 3fr; gap: 32px; align-items: start; }
html.ed-landing .pie-lema { margin: 14px 0 0; font-size: 15px; color: rgba(255, 255, 255, .62); max-width: 240px; }
html.ed-landing .pie-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html.ed-landing .pie-cols h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #fff; }
html.ed-landing .pie-cols a { display: block; margin: 0 0 9px; font-size: 14px; color: rgba(255, 255, 255, .7); text-decoration: none; }
html.ed-landing .pie-cols a:hover { color: #fff; }
@media (max-width: 760px) {
  html.ed-landing .footer-in { grid-template-columns: 1fr; }
  html.ed-landing .pie-cols { grid-template-columns: 1fr 1fr; }
}
/* Firma "Hecho en Argentina por Nahuel Romano" (link a su X), abajo de todo. */
html.ed-landing .creador-linea { margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .6); }
html.ed-landing a.creador { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
html.ed-landing a.creador:hover { border-bottom-color: #fff; }
/* En celular la barra fija de "Iniciar sesión" (.mobcta) tapaba el final del pie y la firma. */
@media (max-width: 680px) {
  html.ed-landing .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* En /empresas el pie va adentro de un .wrap con flex: que ocupe todo el ancho. */
html.ed-landing footer .footer-in { width: 100%; }
html.ed-landing footer .copy { margin-top: 26px; }

/* /empresas tenía demasiado claro seguido: "Por qué publicar en Peon" pasa a negro, así se
   alterna claro / negro como en la landing (hero claro, "5 minutos" negro, "Cómo funciona"
   claro, "Por qué publicar" negro, preguntas claro, cierre negro). */
html.ed-landing .why { background: #0B0D10; color: #ECEEF2; }
html.ed-landing .why h2 { color: #ECEEF2; }
html.ed-landing .why .eyebrow { background: rgba(255, 255, 255, .08); color: rgba(236, 238, 242, .72); }
html.ed-landing .why .fcard { background: #161A1E; border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; backdrop-filter: none; }
html.ed-landing .why .fcard h3 { color: #ECEEF2; }
html.ed-landing .why .fcard p { color: rgba(236, 238, 242, .66); }
html.ed-landing .why .fcard .fi { background: rgba(58, 159, 232, .16); color: #5AB0EE; box-shadow: none; }

/* La landing alterna claro y negro (pedido de Nahuel, 25/10/2026): además de "5 minutos" y el
   cierre, van en negro "Sin Peón / Con Peón" (editorial.css .sc--oscuro), "PeonApp es para vos
   si…" y los testimonios. Se pisan las variables solo dentro de cada sección, así sus tarjetas
   toman los tonos oscuros solas. */
html.ed-landing .trio,
html.ed-landing .testi {
  --bg: #0B0D10; --surface: #161A1E; --surface-2: #1D2127; --panel: #161A1E; --panel-2: #1D2127;
  --text-main: #ECEEF2; --text-muted: #AEB4BE; --ink: #ECEEF2; --ink-soft: #AEB4BE; --ink-faint: #8E95A1;
  --hair: rgb(236 238 242 / .12); --hair-2: rgb(236 238 242 / .06); --accent-lt: #16283A;
  --glass-line: rgb(255 255 255 / .08);
  background: #0B0D10; color: var(--text-main);
}
html.ed-landing .trio h2, html.ed-landing .testi h2,
html.ed-landing .trio h3 { color: var(--text-main); }
html.ed-landing .trio .who-card { background: #161A1E; border-color: rgba(255, 255, 255, .08); }
html.ed-landing .trio .who-card p { color: var(--text-muted); }
html.ed-landing .trio .who-card .num { background: #16283A; color: #6BB6F0; }
html.ed-landing .testi .tcard { border: 1px solid rgba(255, 255, 255, .1); }
/* En la landing el grabado termina pegado a "Sin Peón / Con Peón" (negro): abajo se funde hacia
   el negro en vez de hacia el claro, así no queda una franja clara entre los dos. */
html.ed-landing .hero:has(+ .sc--oscuro) .ba-lienzo {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
html.ed-landing .hero:has(+ .sc--oscuro) .ba::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(to bottom, transparent, #0B0D10); pointer-events: none;
}
html.ed-landing .hero:has(+ .sc--oscuro) { padding-bottom: var(--ba-alto); }