/* Identidad visual basada en https://piipmisiones.com.ar/.
   Recursos locales: logo, favicon, fotografía de portada y tipografía Exo 2. */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('exo2-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('exo2-bold.ttf') format('truetype');
}
:root {
    --blue: #70c3ec;
    --blue-dark: #00496c;
    --ink: #f3f7fa;
    --muted: #b4c5d1;
    --line: #244052;
    --paper: #000b1b;
    --font: 'Exo 2', 'Segoe UI', sans-serif;
}
body { position: relative; }
body::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 105px;
    left: 0;
    width: 100%;
    height: 380px;
    background: linear-gradient(180deg, #000b1b70, #000b1bad 60%, #000b1b), url('piip-banner.webp') center 60% / cover no-repeat;
}
:focus-visible { outline-color: #005d89; }
.site-header {
    min-height: 105px;
    max-width: 1200px;
    padding: 19px 30px;
    border-color: #ffffff16;
}
.brand { gap: 15px; font-size: 11px; letter-spacing: 1.4px; }
.piip-logo { width: 35px; height: 64px; object-fit: contain; }
.brand-subtitle { display: block; font-size: 10px; letter-spacing: 1.1px; }
.brand-location { font-size: 16px; letter-spacing: 4px; }
.header-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.header-nav a { color: #d2dde6; }
.header-nav a:hover, .footer-brand:hover { color: #79c8ef; }
.current-section { font-size: 11px; font-weight: 700; letter-spacing: 1px; border-left: 1px solid var(--line); padding-left: 30px; color: #79c8ef; }
.intro { padding: 56px 0 53px; }
.intro .eyebrow { color: #a4dbf5; font-size: 11px; }
h1 { font-size: clamp(48px, 5.5vw, 72px); font-weight: 700; letter-spacing: -1.5px; margin-bottom: 10px; }
h1 em { color: #70c3ec; }
.intro-subtitle { margin: 0 0 13px; font-size: 23px; font-weight: 400; }
.intro-copy { color: #d0dce6; font-size: 14px; }
.application-layout { gap: 66px; padding-top: 14px; }
.guide { padding-top: 30px; }
.section-tag { color: #91d2f1; background: #005d8912; border-color: #005d8950; }
.guide h2 { font-size: 29px; font-weight: 700; }
.guide > p { font-size: 15px; }
.step-number { color: #91d2f1; background: #001b2e; border-color: #285672; }
.steps li:not(:last-child)::after { background: #294252; }
.steps h3 { font-size: 15px; }
.steps p { font-size: 13px; }
.privacy-note strong { color: #e2ecf2; }
.privacy-note p { font-size: 12px; }
.form-card, dialog {
    --blue: #005d89;
    --ink: #102735;
    --muted: #526674;
    --line: #dce5e8;
    color: var(--ink);
    background: #fff;
    border-color: #dce5e8;
    border-radius: 12px;
    box-shadow: 0 20px 60px #00000028;
}
.form-card { border-top: 3px solid #005d89; }
.card-icon { color: #005d89; background: #eaf4fb; border-radius: 6px; }
.card-topline { font-size: 10px; }
.form-card h2 { font-size: 29px; }
.card-description { font-size: 14px; }
.field label, legend { font-size: 14px; }
.field label > span, legend > span { color: #005d89; }
select { border-color: #cad7dd; border-radius: 5px; font-size: 14px; }
.field-hint { font-size: 11px; }
.upload-zone { background: #f6f9fc; border-color: #b6cddd; border-radius: 6px; }
.upload-zone:hover, .upload-zone.dragging { background: #edf6fc; border-color: #005d89; }
.upload-zone:focus-within { outline-color: #005d89; }
.upload-icon { background: #eaf3fa; color: #005d89; border-color: #d5e5f0; }
.upload-zone strong { font-size: 13px; }
.upload-zone > span:not(.upload-icon) { font-size: 11px; }
fieldset:disabled .upload-zone { opacity: .8; background: #f7f9fb; }
.file-preview, .consent-option { background: #eef5fb; border-color: #d3e3ef; }
.pdf-badge { color: #005d89; }
.button { border-radius: 5px; font-size: 14px; }
.button.primary { background: #005d89; color: #ffffff; font-weight: 700; }
.button.primary:hover:enabled { background: #00496c; }
.button.primary:disabled { background: #e6ebf0; color: #687b8a; }
.button.secondary { color: #334b59; border-color: #cfdadd; }
.button.secondary:hover:enabled { background: #f1f5fa; }
.form-footnote { font-size: 11px; }
.bottom-note { padding: 37px 0; font-size: 12px; }
footer { max-width: 1140px; align-items: center; padding: 23px 0 30px; font-size: 12px; }
.footer-brand { display: flex; align-items: center; gap: 13px; color: #d2dde6; font-size: 12px; }
.footer-brand img { object-fit: contain; }
dialog::backdrop { background: #000b1bba; }
.dialog-content > .eyebrow, .success-panel > .eyebrow { color: #005d89; }
.dialog-content > p:not(.eyebrow), .consent-option { font-size: 14px; }
.dialog-content .dialog-note { font-size: 12px !important; }
.upload-status { color: #005d89 !important; }
.reference code { color: #405863; }
@media (max-width: 800px) {
    .application-layout { gap: 30px; }
    .guide h2 { font-size: 25px; }
    .steps p { font-size: 12px; }
    .header-nav { gap: 18px; }
    .current-section { padding-left: 18px; }
    footer { margin: 0 24px; }
}
@media (max-width: 640px) {
    body::before { top: 100px; height: 350px; background-position: 57% center; }
    .site-header { min-height: 100px; padding: 18px 20px; }
    .brand { gap: 10px; font-size: 9px; letter-spacing: .6px; }
    .piip-logo { width: 29px; height: 54px; }
    .brand-subtitle { font-size: 8px; letter-spacing: .6px; }
    .brand-location { font-size: 13px; letter-spacing: 2.7px; }
    .header-nav { font-size: 11px; }
    .current-section { display: none; }
    .intro { padding: 42px 0 30px; }
    .intro .eyebrow { font-size: 9px; letter-spacing: 1px; }
    h1 { font-size: 47px; letter-spacing: -1.5px; }
    .intro-subtitle { font-size: 18px; line-height: 1.4; }
    .intro-copy { font-size: 13px; }
    .application-layout { padding-top: 0; gap: 25px; }
    .guide { padding: 0; }
    .steps h3 { font-size: 12px; }
    .form-card { padding: 25px 20px; }
    .field-hint { line-height: 1.6; }
    select { font-size: 16px; }
    .bottom-note { font-size: 10px; padding: 27px 0; }
    footer { align-items: flex-start; gap: 15px; font-size: 11px; margin: 0 20px; }
    .footer-brand { font-size: 11px; max-width: 290px; }
}
@media (max-width: 360px) {
    .header-nav a { max-width: 62px; text-align: right; }
    h1 { font-size: 42px; }
    .intro .eyebrow { font-size: 8px; }
}

/* Confirmación en la misma paleta azul institucional. */
.success-icon { color: #005d89; background: #eaf4fb; }