@font-face{font-family:'Blinker';font-weight:300;src:url('assets/fonts/blinker-300.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Blinker';font-weight:400;src:url('assets/fonts/blinker-400.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Blinker';font-weight:700;src:url('assets/fonts/blinker-700.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Blinker';font-weight:800;src:url('assets/fonts/blinker-800.woff2') format('woff2');font-display:swap;}
/* Mainter — Webfonts
   Blinker: fuente única de marca (TTFs provistos, assets/fonts/blinker/). */
/* Mainter — Color tokens
   Fuente: Manual de marca Mainter + íconos de categoría 2026 + sitio web */
:root {
  /* — Primarios de marca — */
  --mainter-blue: #004691;      /* Azul Mainter · Pantone P 104-16 C */
  --mainter-blue-light: #005DB5; /* Azul claro — marcas de agua sobre azul */
  --mainter-yellow: #FFCF21;    /* Amarillo Mainter · Pantone P 10-7 C */
  --mainter-white: #FFFFFF;

  /* — Colores de categoría de producto (2026, línea de avisos) — */
  --cat-herbicida: #73B72B;
  --cat-fungicida: #008DCF;
  --cat-insecticida: #E6007C;
  --cat-biologicos: #2CB1A3;
  --cat-nutricion: #F59A00;     /* Nutrición vegetal / animal */
  --cat-tecnologia: #A56400;    /* Tecnología de aplicación */
  --cat-semillas: #5F5F5D;      /* Tratamiento de semillas */

  /* — Paleta web (sitio en vivo) — */
  --web-blue: #26478d;
  --web-gold: #F0D23F;
  --web-coral: #ec483b;

  /* — Neutrales — */
  --neutral-900: #1a1a1a;
  --neutral-700: #333333;
  --neutral-500: #666666;
  --neutral-300: #b3b3b3;
  --neutral-200: #dddddd;
  --neutral-100: #e5e5e5;
  --neutral-50: #f5f6f8;

  /* — Semánticos — */
  --text-heading: var(--mainter-blue);
  --text-body: var(--neutral-700);
  --text-caption: var(--neutral-500);
  --text-inverse: #ffffff;
  --surface-page: #ffffff;
  --surface-subtle: var(--neutral-50);
  --surface-brand: var(--mainter-blue);
  --surface-card: #ffffff;
  --border-card: var(--neutral-100);
  --border-divider: var(--neutral-200);
  --accent: var(--mainter-yellow);
  --link: var(--mainter-blue);
  --focus-ring: rgba(0, 70, 145, 0.35);

  /* Estados */
  --success: var(--cat-herbicida);
  --warning: var(--cat-nutricion);
  --danger: var(--web-coral);
  --info: var(--cat-fungicida);
}
/* Mainter — Typography tokens
   Blinker (Thin 100 → Black 900) es la fuente única de marca:
   titulares, cuerpo, web e impresión. */
:root {
  --font-display: 'Blinker', sans-serif;
  --font-web: 'Blinker', sans-serif;

  /* Escala (px) */
  --text-display: 64px;   /* claim / portadas — Blinker Black */
  --text-h1: 44px;        /* Blinker ExtraBold */
  --text-h2: 30px;        /* Blinker Bold */
  --text-h3: 22px;        /* Blinker Bold */
  --text-body-size: 19px; /* Blinker Regular */
  --text-ui: 16px;
  --text-caption-size: 15px; /* Light */
  --text-small: 13px;

  --weight-black: 900;
  --weight-extrabold: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-regular: 400;
  --weight-light: 300;

  --leading-display: 1.0;
  --leading-heading: 1.1;
  --leading-body: 1.6;

  --tracking-kicker: 0.2em; /* kickers / etiquetas en mayúsculas */
}
/* Mainter — Spacing, radii, shadows, motion */
:root {
  /* Espaciado (base 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 8px;    /* botones */
  --radius-lg: 10px;   /* chips de color */
  --radius-xl: 12px;   /* cards */
  --radius-hero: 16px; /* bloques hero */
  --radius-pill: 999px;

  /* Sombras — usar con moderación; el manual prohíbe sombras sobre el logo */
  --shadow-card: 0 1px 3px rgba(0, 35, 73, 0.08), 0 4px 14px rgba(0, 35, 73, 0.06);
  --shadow-pop: 0 8px 30px rgba(0, 35, 73, 0.18);

  /* Movimiento */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */

  /* Logo: área de protección = 1/4 de la altura del logo */
  --logo-clearspace-ratio: 0.25; /* @kind other */
}
/* Mainter — Webfonts
   Blinker: fuente única de marca (TTFs provistos, assets/fonts/blinker/). */









/* Mainter — Color tokens
   Fuente: Manual de marca Mainter + íconos de categoría 2026 + sitio web */
:root {
  /* — Primarios de marca — */
  --mainter-blue: #004691;      /* Azul Mainter · Pantone P 104-16 C */
  --mainter-blue-light: #005DB5; /* Azul claro — marcas de agua sobre azul */
  --mainter-yellow: #FFCF21;    /* Amarillo Mainter · Pantone P 10-7 C */
  --mainter-white: #FFFFFF;

  /* — Colores de categoría de producto (2026, línea de avisos) — */
  --cat-herbicida: #73B72B;
  --cat-fungicida: #008DCF;
  --cat-insecticida: #E6007C;
  --cat-biologicos: #2CB1A3;
  --cat-nutricion: #F59A00;     /* Nutrición vegetal / animal */
  --cat-tecnologia: #A56400;    /* Tecnología de aplicación */
  --cat-semillas: #5F5F5D;      /* Tratamiento de semillas */

  /* — Paleta web (sitio en vivo) — */
  --web-blue: #26478d;
  --web-gold: #F0D23F;
  --web-coral: #ec483b;

  /* — Neutrales — */
  --neutral-900: #1a1a1a;
  --neutral-700: #333333;
  --neutral-500: #666666;
  --neutral-300: #b3b3b3;
  --neutral-200: #dddddd;
  --neutral-100: #e5e5e5;
  --neutral-50: #f5f6f8;

  /* — Semánticos — */
  --text-heading: var(--mainter-blue);
  --text-body: var(--neutral-700);
  --text-caption: var(--neutral-500);
  --text-inverse: #ffffff;
  --surface-page: #ffffff;
  --surface-subtle: var(--neutral-50);
  --surface-brand: var(--mainter-blue);
  --surface-card: #ffffff;
  --border-card: var(--neutral-100);
  --border-divider: var(--neutral-200);
  --accent: var(--mainter-yellow);
  --link: var(--mainter-blue);
  --focus-ring: rgba(0, 70, 145, 0.35);

  /* Estados */
  --success: var(--cat-herbicida);
  --warning: var(--cat-nutricion);
  --danger: var(--web-coral);
  --info: var(--cat-fungicida);
}

/* Mainter — Typography tokens
   Blinker (Thin 100 → Black 900) es la fuente única de marca:
   titulares, cuerpo, web e impresión. */
:root {
  --font-display: 'Blinker', sans-serif;
  --font-web: 'Blinker', sans-serif;

  /* Escala (px) */
  --text-display: 64px;   /* claim / portadas — Blinker Black */
  --text-h1: 44px;        /* Blinker ExtraBold */
  --text-h2: 30px;        /* Blinker Bold */
  --text-h3: 22px;        /* Blinker Bold */
  --text-body-size: 19px; /* Blinker Regular */
  --text-ui: 16px;
  --text-caption-size: 15px; /* Light */
  --text-small: 13px;

  --weight-black: 900;
  --weight-extrabold: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-regular: 400;
  --weight-light: 300;

  --leading-display: 1.0;
  --leading-heading: 1.1;
  --leading-body: 1.6;

  --tracking-kicker: 0.2em; /* kickers / etiquetas en mayúsculas */
}

/* Mainter — Spacing, radii, shadows, motion */
:root {
  /* Espaciado (base 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 8px;    /* botones */
  --radius-lg: 10px;   /* chips de color */
  --radius-xl: 12px;   /* cards */
  --radius-hero: 16px; /* bloques hero */
  --radius-pill: 999px;

  /* Sombras — usar con moderación; el manual prohíbe sombras sobre el logo */
  --shadow-card: 0 1px 3px rgba(0, 35, 73, 0.08), 0 4px 14px rgba(0, 35, 73, 0.06);
  --shadow-pop: 0 8px 30px rgba(0, 35, 73, 0.18);

  /* Movimiento */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */

  /* Logo: área de protección = 1/4 de la altura del logo */
  --logo-clearspace-ratio: 0.25; /* @kind other */
}

/* Agrobusiness to Grow — tokens de la submarca
   Programa de primer empleo de Mainter. Hereda el azul y el amarillo de Mainter;
   el verde y el lima vienen del logotipo oficial ATG (medidos del PDF de marca). */
:root {
  /* — Primarios ATG — */
  --atg-blue: #004691;        /* Azul institucional (decisión: se unifica con Mainter) */
  --atg-blue-deep: #003876;   /* Hover / pie */
  --atg-blue-veil: rgba(0, 70, 145, .72); /* Velo sobre fotografía */
  --atg-green: #008D36;       /* Verde Agrobusiness — hojas del logo */
  --atg-green-deep: #00702B;
  --atg-lime: #93C01F;        /* Lima Agrobusiness — semilla del logo */
  --atg-lime-text: #A9D62B;   /* Lima aclarado: texto chico sobre azul (5.2:1) */
  --atg-green-text: #00762E;  /* Verde oscurecido: texto chico sobre fondos claros (5.5:1) */
  --atg-yellow: #FFCF21;      /* Amarillo Mainter — SOLO botones */
  --atg-yellow-deep: #EDBC08;

  /* — Superficies — */
  --atg-surface: #ffffff;
  --atg-surface-alt: #f5f6f8;

  /* — Semánticos de la submarca — */
  --atg-text-heading: var(--atg-blue);
  --atg-text-body: #333333;
  --atg-text-caption: #666666;
  --atg-error: #C1121F;        /* Error de formulario. Es el rojo Mainter --danger (#ec483b) oscurecido:
                                  a 14 px sobre blanco ese daba 3.78:1 y la regla del sistema es 4.5:1. Este da 6.4:1. */
  --atg-accent: var(--atg-green);
  --atg-cta: var(--atg-yellow);

  /* — Referencia: azul real del archivo de logotipo — */
  --atg-logo-blue-original: #164B9A;
}
*{box-sizing:border-box}body{margin:0;background:#fff}img{max-width:100%}input,select,button,textarea{font-family:inherit}a{color:#004691}a:hover{color:#00762E}
.x1:hover{background:#EDBC08}
.x2:hover{background:#EDBC08}
.x3:hover{text-decoration:underline}
.x4:focus-visible{border-color:#004691;outline:none}
.x5:focus-visible{border-color:#004691;outline:none}
.x6:focus-visible{border-color:#004691;outline:none}
.x7:focus-visible{border-color:#004691;outline:none}
.x8:focus-visible{border-color:#004691;outline:none}
.x9:hover{background:#EDBC08}

/* --- producción --- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
:focus-visible{outline:3px solid #FFCF21;outline-offset:2px}
[hidden]{display:none!important}
.error{display:block;font-size:14px;line-height:1.4;font-weight:700;color:#C0392B;min-height:1px}
.error:empty{display:none}
.archivo-ok{display:block;margin-top:6px;font-size:13px;line-height:1.4;font-weight:700;color:#008D36}
label:has(input[type=file]){position:relative}
input[type=file]:hover{border-color:#004691}
.aviso{margin:16px 0 0;font-size:15px;line-height:1.5;border-radius:8px;padding:12px 14px}
.aviso.err{background:#FDECEA;color:#A93226}
.aviso.info{background:#EAF3FB;color:#1B4F72}
button[disabled]{opacity:.6;cursor:progress}
input[type=file]{cursor:pointer}
img{max-width:100%}

/* ---------- microinteracciones ---------- */

/* Aire al saltar por ancla, para que el titular no quede pegado al borde. */
[id]{scroll-margin-top:clamp(16px,4vw,40px)}

/* El hover de los botones cambiaba de color de golpe. */
.x1,.x2,.x3,.x9,button[type=submit]{transition:background 160ms ease,color 160ms ease,transform 110ms ease}
.x1:active,.x2:active,.x9:active,button[type=submit]:active{transform:translateY(1px)}

/* Foco del formulario: al borde le faltaba transicion y un halo que lo haga
   evidente sin depender solo del color. */
#form-postulacion input,#form-postulacion select{transition:border-color 140ms ease,box-shadow 140ms ease}
#form-postulacion input:focus,#form-postulacion select:focus{box-shadow:0 0 0 3px rgba(0,70,145,.14)}
#form-postulacion input[type=file]{transition:border-color 140ms ease,background 140ms ease}
#form-postulacion input[type=file]:hover{background:#eef1f5}

/* Barra de progreso del envio. Determinada mientras se leen los archivos
   (dato real) e indeterminada mientras viajan (no hay progreso de subida:
   mostrar un porcentaje inventado seria mentirle al postulante). */
.barra{height:4px;border-radius:999px;background:rgba(0,70,145,.15);overflow:hidden;margin-top:12px}
.barra>i{display:block;height:100%;width:0;background:#008D36;border-radius:999px;transition:width .25s ease}
.barra.indeterminada>i{width:38%;animation:desliza 1.15s cubic-bezier(.4,0,.2,1) infinite}
@keyframes desliza{0%{margin-left:-38%}100%{margin-left:100%}}

@media (prefers-reduced-motion:no-preference){
  /* Todo lo que se anima queda detras de .js-anim: sin JS la pagina se ve
     completa, nunca en blanco. */
  .js-anim .reveal{opacity:0;transform:translateY(20px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.2,0,0,1)}
  .js-anim .reveal.visible{opacity:1;transform:none}
  .js-anim img[loading=lazy]{opacity:0;transition:opacity .4s ease}
  .js-anim img[loading=lazy].cargada{opacity:1}
  /* El punto late despacio: indica convocatoria abierta sin llamar la atencion. */
  .punto-vivo{animation:latido 2.6s ease-in-out infinite}
  @keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
  .error:not(:empty),.archivo-ok{animation:aparece .22s ease}
  @keyframes aparece{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
/* En pantallas chicas la marca de agua se cruza con el texto del destacado. */
@media (max-width:640px){.destacado-02 .marca-agua{display:none}}
/* El formulario mide ~1000px; la columna de texto, la mitad. Sticky evita
   el hueco y deja el titular y la fecha de cierre a la vista mientras se completa. */
@media (min-width:900px){.col-cierre{position:sticky;top:clamp(32px,4vw,56px)}}
/* Al confirmar la postulacion, el texto de invitacion ya no aplica: la
   seccion queda solo con el agradecimiento, centrado. */
#zona-postular.enviado{grid-template-columns:1fr;justify-items:center}
#zona-postular.enviado>#gracias{width:100%;max-width:640px}

/* Bloque 04 — bento de 6 celdas: titular + 5 tarjetas, sin celda vacia
   ni jerarquia falsa entre las tarjetas. */
.bento-04{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:1fr}
@media (min-width:640px){.bento-04{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.bento-04{grid-template-columns:repeat(3,1fr)}}
.bento-04>div{border-radius:14px;padding:clamp(26px,3vw,34px)}
.bento-04 .celda-titulo{background:#004691;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(180px,20vw,240px);padding:clamp(28px,3.2vw,38px)}
.bento-04 .celda-titulo h2{position:relative;margin:0;font-size:clamp(28px,3.1vw,40px);
  line-height:1.06;font-weight:800;color:#fff;max-width:15ch;text-wrap:balance}
.bento-04 .celda-titulo img{position:absolute;right:-34px;top:-28px;
  width:clamp(120px,14vw,170px);height:auto;opacity:.2;pointer-events:none}
.bento-04 .tarjeta{background:#f5f6f8;display:flex;flex-direction:column}
.bento-04 .tarjeta .num{display:block;font-size:clamp(38px,4vw,50px);line-height:.85;
  font-weight:800;color:#93C01F}
.bento-04 .tarjeta h3{margin:14px 0 10px;font-size:clamp(20px,2.1vw,24px);line-height:1.18;
  font-weight:800;color:#004691}
.bento-04 .tarjeta p{margin:0;font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:#333}