/* ============================================================ TIPOGRAFÍA Counterpress (CJ Type) es la tipografía de titulares de la campaña SECOM y se activa desde Adobe Fonts. NO se declara con @font-face ni se alojan archivos: Adobe entrega una hoja de estilos propia que se enlaza desde el del index.html. Cómo activarla, una sola vez: 1. fonts.adobe.com con la cuenta Creative Cloud del Ministerio 2. buscar "Counterpress" y pulsar "Añadir a proyecto web" 3. crear el proyecto, elegir el peso Bold (700) 4. agregar el dominio semanadelapyme.cl al proyecto 5. copiar el que entrega Adobe y pegarlo en el Museo Sans también está en Adobe Fonts: conviene sumarla al mismo proyecto web para el texto corrido. Mientras el proyecto no exista, el navegador cae en GobCL, la institucional de kitdigital.gob.cl, y el sitio funciona igual. ============================================================ */ /* Institucional GobCL (kitdigital.gob.cl), respaldo */ @font-face{font-family:"GobCL";src:url("../fonts/gobCL_Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"GobCL";src:url("../fonts/gobCL_Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"GobCL";src:url("../fonts/gobCL_Bold.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"GobCL";src:url("../fonts/gobCL_Heavy.woff2") format("woff2");font-weight:900;font-display:swap} :root{ /* --------------------------------------------------------------- PALETA CAMPAÑA "CON LAS PYMES CHILE SE MUEVE" (SECOM 2026) Valores tomados del logo oficial y de las gráficas del kit. --------------------------------------------------------------- */ /* tinta y fondos */ --tinta:#17255C; /* azul profundo del pie: el segundo tramo del degradado de portada */ --tinta-2:#101B45; /* el arranque del degradado */ --azul-p:#17255C; /* azul de interfaz: menú, negritas, etiquetas */ --azul-tit:#1E3579; /* azul de titulares: un paso más claro que el de interfaz, para que destaquen sin pesar */ --fondo:#EEF0F6; /* fondo de página: gris azulado institucional */ --papel:#F8F9FC; --blanco:#FFFFFF; /* colores de campaña */ /* Azules de interfaz, en la misma familia apagada del degradado de portada. El #005FFF del logo se conserva solo en el propio lockup: extendido a enlaces y botones resultaba eléctrico. */ --azul:#27499E; /* enlaces, llamados a la acción, rótulos */ --azul-logo:#005FFF; /* el del bloque "SEMANA", solo para la marca */ --cielo:#3160B8; --cielo-2:#7C9BD8; --nube:#DCE3F2; --rojo:#FF1D3D; /* rojo del bloque "DE LA PYME" */ --rojo-osc:#D40F2C; --rojo-cla:#FF4A63; /* Colores oficiales de campaña, según la lámina del kit SECOM. Los cinco plenos son para superficie, no para texto: sobre fondo claro rinden entre 1.45 y 2.65, muy bajo el mínimo. Para texto existen las versiones oscurecidas de más abajo. */ --amarillo:#FFBF00; --naranja:#FF8C00; /* El turquesa es oficial de campaña pero el sitio no lo usa: aparecía en un solo lugar y un color que no se repite se lee como error, no como sistema. Queda declarado por si más adelante hay una familia de elementos donde aplicarlo de forma consistente. */ --turquesa:#00A3BA; --turquesa-osc:#006B7A; --g-rojo:linear-gradient(112deg,#D40F2C 0%,#FF1D3D 62%,#FF4A63 100%); /* degradado cálido de las estrellas del logo */ --g-calido:linear-gradient(90deg,#FF8C00 0%,#FFA800 46%,#FFBF00 100%); /* texto */ --texto-2:#4A5570; /* párrafos sobre claro */ --texto-3:#767F98; /* apoyos */ --claro:#C3D2F0; /* texto sobre oscuro */ /* líneas */ --linea:rgba(255,255,255,.16); /* sobre oscuro */ --linea-cl:rgba(23,37,92,.13); /* sobre claro */ /* "counterpress" es el nombre que entrega la hoja de Adobe Fonts, en minúscula. Si el proyecto web no está activo, cae a GobCL. */ --display:"counterpress","GobCL","Nunito Sans",system-ui,sans-serif; /* El texto corrido NO usa Counterpress: es tipografía de titulares, muy condensada, y en párrafos largos cansa la vista. */ --texto:"museo-sans","GobCL","Nunito Sans",system-ui,sans-serif; --max:1440px; --gutter:clamp(16px,3.4vw,44px); /* Escala de radios: presente pero medida. El exceso anterior (40px) leía comercial; el defecto (14px) quedaba seco. */ --r:18px; --r-card:26px; --r-btn:100px; /* Estrella de cuatro puntas del lockup, en SVG. Se usa como viñeta de acento; hereda tamaño por background-size, no por font-size. */ --estrella:url("data:image/svg+xml;utf8,"); --estrella-cl:url("data:image/svg+xml;utf8,"); /* El logo tiene dos versiones: a color para fondos claros y blanca para fondos oscuros (portada y pie). */ --logo:url('../img/logo-semana-pyme.png'); --logo-blanco:url('../img/logo-semana-pyme-blanco.png'); /* --------------------------------------------------------------- TAMAÑO DE LA LETRA DE TODO EL SITIO 1 = tamaño actual 1.06 = 6% más grande 1.12 = 12% más grande Todos los textos están en rem, así que cambiar este número escala titulares, párrafos, botones y etiquetas a la vez, manteniendo las proporciones entre ellos. --------------------------------------------------------------- */ --escala:1.0; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; font-size:calc(16px * var(--escala))} /* En pantallas chicas el aumento se aplica a la mitad: lo que en un monitor se ve cómodo, en un teléfono desborda la barra y el contador. Así la variable sigue siendo una sola y no hay que ajustar nada más. */ @media (max-width:640px){ html{font-size:calc(16px * (1 + (var(--escala) - 1) * 0.5))} } body{margin:0;background:var(--fondo);color:var(--azul-p); font-family:var(--texto);font-size:1.0625rem;line-height:1.62;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3{font-family:var(--display);margin:0;line-height:1.06;letter-spacing:-.028em;font-weight:900} p{margin:0 0 1em} a{color:inherit} img,video,svg{display:block;max-width:100%} button{font:inherit;color:inherit;cursor:pointer} .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:3} :focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:10px} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-999px;background:var(--tinta);color:#fff;padding:12px 18px;z-index:999} .skip:focus{left:10px;top:10px} .progreso{position:fixed;top:0;left:0;height:3px;width:0;background:var(--rojo);z-index:210;transition:width .12s linear} /* La proporción viene del archivo recortado (1400x576). Si cambias el PNG por otro, actualiza aspect-ratio o el logo se verá deformado. */ .logo{background:var(--logo) center/contain no-repeat;aspect-ratio:1400/576;display:block;flex:none} /* variante blanca para la portada y el pie, que van sobre azul profundo */ .logo--blanco{background-image:var(--logo-blanco)} /* ---------- botones ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:0; padding:15px 28px;border-radius:var(--r-btn);font-weight:700;font-size:0.9375rem; background:var(--azul);color:#fff; transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s; box-shadow:0 8px 20px -12px rgba(8,25,74,.75)} .btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(8,25,74,.7)} .btn--rojo{background:var(--g-rojo);box-shadow:0 8px 20px -12px rgba(8,25,74,.7)} .btn--blanco{background:#fff;color:var(--tinta);box-shadow:0 10px 24px -14px rgba(4,12,40,.7)} .btn--blanco:hover{background:var(--nube)} .btn--f{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)} .btn--f:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)} .btn .flecha{transition:transform .24s} .btn:hover .flecha{transform:translateY(2px)} /* ---------- secciones ---------- */ .sec{padding:clamp(56px,7.5vw,104px) 0;position:relative} .sec--gris{background:var(--papel)} .rotulo{font-size:0.7188rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--azul); display:flex;align-items:center;gap:11px;margin-bottom:16px} /* El rótulo repite el remate del logo: estrella de cuatro puntas seguida del filo cálido naranja-amarillo. */ .rotulo::before{content:"";width:11px;height:11px;flex:none; background:var(--estrella) center/contain no-repeat} .rotulo::after{content:"";width:26px;height:3px;border-radius:2px; background:var(--g-calido);order:-1;margin-right:-3px} /* Titulares: más grandes, más apretados, con la palabra clave subrayada en rojo. El subrayado se dibuja detrás del texto para que las letras con descendente (g, y, p) no queden cortadas. */ .sec h2{font-size:clamp(2rem,5vw,3.625rem);max-width:16ch;text-wrap:balance;color:var(--azul-tit); letter-spacing:-.035em;line-height:1.02} /* solo evita la cursiva: el texto se ve igual que el resto del título */ /* El marca la palabra clave del titular. En la campaña esa parte va en amarillo sobre oscuro; sobre claro se usa el rojo, porque el amarillo no tiene contraste suficiente para leerse. */ .sec h2 em{font-style:normal;color:var(--rojo-osc)} .hero-txt h1 em{font-style:normal;color:var(--rojo-osc)} /* La bajada gana cuerpo y aire: es lo que de verdad se lee. */ .bajada{max-width:52ch;color:var(--texto-2);font-size:clamp(1.0625rem,1.5vw,1.1875rem); margin-top:16px;font-weight:400;line-height:1.62} .bajada b{font-weight:700;color:var(--azul-p)} /* La bajada se alinea con el titular por arriba, no por abajo: con titulares de dos o tres líneas quedaba colgando al pie de un bloque alto, y entre ambos se abría una franja vacía. */ .cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap} .cabeza .bajada{margin-top:6px} /* ---------- revelado ---------- */ .rv{opacity:0;transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .rv.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} }