/* =============================================
   CiiSA + Adobe · landing de soluciones
   Mimetiza el lenguaje visual de Adobe (tema claro, titulares en peso 900, botones en píldora, tarjetas de 16 px)
   con el sello de CiiSA (degradado verde → menta → cian como acento). Ver docs/DESIGN.md.
   Los ajustes nuevos se agregan AL FINAL, en bloques con un comentario que explica el cambio.
   ============================================= */


:root {
  /* Lenguaje Adobe */
  --adobe-red: #eb1000;
  --ink: #000000;
  --paper: #ffffff;
  --gray-50: #f8f8f8;
  --gray-100: #f1f1f1;
  --gray-300: #d5d5d5;
  --gray-600: #4b4b4b;
  --gray-700: #2c2c2c;
  --night: #0b0b0d;
  /* Identidad CiiSA (mismos valores que Beyond): acento, nunca texto sobre blanco */
  --ciisa-green: #bcf200;
  --psw-mint: #01fbce;
  --electric-pyx: #00ccff;
  --navy-deep: #001c71;
  --gradient: linear-gradient(115deg, var(--ciisa-green), var(--psw-mint), var(--electric-pyx), var(--ciisa-green));
  --focus: #0265dc;
  --danger: #d31510;
  --ok: #268e6c;
  --font-body: 'Source Sans 3', 'Adobe Clean', 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Source Sans 3', 'Adobe Clean Display', 'Trebuchet MS', system-ui, sans-serif;
  --radius: 8px;
  --radius-lg: 16px;
  --wrap: 1200px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.5; font-size: 18px; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 999px; font-weight: 700; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

/* Titulares al estilo Adobe: peso 900, interlineado cerrado */
h1, h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; }
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; }
h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; }
h3 { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }

/* Acentos de CiiSA: degradado en palabras del hero (sobre fondo oscuro) y subrayado degradado en secciones claras */
.grad { background: var(--gradient); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: flow 18s ease-in-out infinite; }
.underline { background-image: var(--gradient); background-repeat: no-repeat; background-size: 100% 0.22em; background-position: 0 92%; padding-bottom: 0.04em; }
@keyframes flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 14px; }
.kicker--dark { color: rgba(255, 255, 255, 0.82); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--adobe-red); }
.lead { font-size: clamp(18px, 1.8vw, 22px); color: var(--gray-600); max-width: 60ch; margin-top: 16px; }
.hero .lead, .sec--form .lead { color: rgba(255, 255, 255, 0.8); }

/* Botones: píldora de 40 px de alto como en Adobe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; border-radius: 999px; font: 700 17px/1 var(--font-body); cursor: pointer; text-decoration: none; border: 2px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; white-space: nowrap; }
.btn--sm { min-height: 40px; padding: 0 22px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover:not(:disabled) { background: var(--gray-700); }
.btn--white { background: var(--paper); color: var(--ink); }
.btn--white:hover { background: var(--gray-100); }
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--paper); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Navegación clara y limpia */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-300); }
.nav__in { width: min(var(--wrap), 100% - 48px); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.lockup__ciisa { height: 26px; width: auto; }
.lockup__x { width: 1px; height: 24px; background: var(--gray-300); }
.lockup__adobe { height: 24px; width: auto; }
.nav__links { display: flex; gap: 26px; }
.nav__links a { text-decoration: none; font-size: 16px; font-weight: 600; color: var(--gray-700); padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.nav__links a:hover { border-color: var(--ink); }

/* Secciones */
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec--gray { background: var(--gray-50); }
.sec__head { max-width: 800px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.sec__head--left { margin-inline: 0; text-align: left; }
.sec__head .lead { margin-inline: auto; }
.sec__head--left .lead { margin-inline: 0; }
.sec__head h2 { margin-bottom: 4px; }

/* Hero oscuro con el resplandor de CiiSA */
.hero { background: var(--night); color: var(--paper); padding: calc(var(--nav-h) + clamp(48px, 7vw, 104px)) 0 clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
.hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 82% 28%, rgba(1, 251, 206, 0.20), transparent 70%), radial-gradient(ellipse 40% 45% at 4% 100%, rgba(188, 242, 0, 0.14), transparent 70%), radial-gradient(ellipse 40% 40% at 100% 0%, rgba(0, 204, 255, 0.18), transparent 70%); }
.hero__in { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero__txt h1 { margin-bottom: 4px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.chips li { font-size: 15px; font-weight: 600; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.9); }
.stack { position: relative; width: min(420px, 100%); aspect-ratio: 1; margin-inline: auto; }
.tile { position: absolute; width: 56%; aspect-ratio: 1; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(2px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.tile--a { left: 0; top: 4%; background: linear-gradient(145deg, rgba(188, 242, 0, 0.55), rgba(1, 251, 206, 0.12)); }
.tile--b { right: 0; top: 0; background: linear-gradient(145deg, rgba(0, 204, 255, 0.5), rgba(255, 255, 255, 0.06)); transform: rotate(6deg); }
.tile--c { left: 12%; bottom: 0; background: linear-gradient(145deg, rgba(1, 251, 206, 0.45), rgba(255, 255, 255, 0.05)); transform: rotate(-5deg); }
.tile--d { right: 4%; bottom: 8%; background: linear-gradient(145deg, rgba(235, 16, 0, 0.55), rgba(255, 255, 255, 0.05)); }
.stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 6vw, 80px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.stats li { display: flex; flex-direction: column; gap: 2px; }
.stats b { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 52px); line-height: 1; font-weight: 900; }
.stats span { font-size: 16px; color: rgba(255, 255, 255, 0.72); }

/* Soluciones: tarjetas redondeadas de 16 px, como los mosaicos de Adobe */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.soln { padding: 28px 24px 26px; border-radius: var(--radius-lg); background: var(--gray-50); border: 1px solid var(--gray-100); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.soln::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--gradient); }
.soln:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }
.soln__tag { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adobe-red); }
.soln p { color: var(--gray-600); font-size: 17px; }
.mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.mini li { font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--gray-300); color: var(--gray-700); }
.nota { margin-top: 28px; font-size: 15px; color: var(--gray-600); text-align: center; }

/* Sector público */
.gov { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gov__col { padding: 26px 24px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--gray-300); }
.gov__col h3 { margin-bottom: 14px; }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; font-size: 17px; color: var(--gray-700); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--gradient); }
.ticks li::after { content: ''; position: absolute; left: 6px; top: 8px; width: 5px; height: 9px; border: solid var(--navy-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.benef { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.benef li { padding: 18px 20px; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 600; line-height: 1.35; }

/* Por qué CiiSA */
.why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.why .btn { margin-top: 28px; }
.checks { display: grid; gap: 12px; }
.checks li { position: relative; padding: 18px 20px 18px 62px; border-radius: var(--radius-lg); background: var(--gray-50); border: 1px solid var(--gray-100); color: var(--gray-600); }
.checks li b { color: var(--ink); font-weight: 700; }
.checks li::before { content: ''; position: absolute; left: 20px; top: 20px; width: 26px; height: 26px; border-radius: 50%; background: var(--gradient); }
.checks li::after { content: ''; position: absolute; left: 29px; top: 26px; width: 7px; height: 13px; border: solid var(--navy-deep); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Proceso */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps li { padding: 30px 26px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--gray-300); }
.steps i { display: block; font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 1; margin-bottom: 14px; color: var(--ink); }
.steps i::after { content: ''; display: block; width: 44px; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--gradient); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--gray-600); font-size: 17px; }

/* Formulario (sección oscura de cierre, campos claros como en los formularios de Adobe) */
.sec--form { background: var(--night); color: var(--paper); position: relative; overflow: hidden; }
.sec--form::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 55% at 92% 100%, rgba(1, 251, 206, 0.18), transparent 70%), radial-gradient(ellipse 45% 45% at 0% 0%, rgba(188, 242, 0, 0.10), transparent 70%); }
.form-wrap { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.formbox { padding: clamp(22px, 3vw, 38px); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 700; color: var(--gray-700); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 2px solid var(--gray-300); border-radius: var(--radius); transition: border-color .2s; appearance: none; -webkit-appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.field textarea { resize: vertical; min-height: 100px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-600); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(2, 101, 220, 0.25); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); }
.field.is-valid input, .field.is-valid select { border-color: var(--ok); }
.err { min-height: 1.2em; font-size: 15px; line-height: 1.3; color: var(--danger); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chk { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--gray-700); cursor: pointer; }
.chk input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); }
.chk a { color: var(--ink); font-weight: 700; }
.status { margin-top: 12px; min-height: 1.3em; font-size: 16px; color: var(--gray-700); }
.status.is-error { color: var(--danger); font-weight: 600; }
.gracias { text-align: center; padding: 28px 8px; }
.gracias svg { width: 72px; height: 72px; margin: 0 auto 18px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gracias h3 { font-size: 30px; margin-bottom: 10px; }
.gracias p { color: var(--gray-600); }

/* Pie */
.foot { background: #000; color: var(--paper); padding: 48px 0 40px; }
.foot__in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px 40px; }
.foot__brand p { margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-content: flex-start; justify-content: flex-end; }
.foot__links a { font-size: 16px; text-decoration: none; color: rgba(255, 255, 255, 0.8); }
.foot__links a:hover { color: var(--paper); text-decoration: underline; }
.foot__legal { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 20px; }

/* Aparición al hacer scroll (site.js; sin JS todo se ve) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Responsive: móvil ≤ 640, tablet 641-1024, escritorio ≥ 1025 */
@media (max-width: 1024px) {
  .hero__in, .why, .form-wrap { grid-template-columns: 1fr; }
  .hero__art { display: none; }
  .grid4, .gov, .benef { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .nav__links { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap, .nav__in { width: min(var(--wrap), 100% - 32px); }
  .grid4, .gov, .benef, .form, .foot__in { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .foot__links { justify-content: flex-start; }
  .lockup__ciisa { height: 22px; }
  .lockup__adobe { height: 20px; }
  .nav__in { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grad { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .soln, .btn { transition: none; }
}

/* Animación del hero: los cuatro mosaicos (los cuatro frentes de Adobe) se ensamblan al entrar, luego flotan
   con fases distintas y el resplandor respira. Solo translate/rotate/scale/opacity (propiedades individuales,
   para no pisar el transform base de cada mosaico). Sin JS no hay animación y todo se ve. */
@keyframes tile-in {
  from { opacity: 0; scale: 0.9; translate: calc(var(--from-x) * var(--k, 1)) calc(var(--from-y) * var(--k, 1)); rotate: var(--from-r); }
  to { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes tile-float {
  0%, 100% { translate: 0 0; }
  50% { translate: calc(var(--fl-x, 0px) * var(--k, 1)) calc(var(--fl-y, -10px) * var(--k, 1)); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.tile--a { --from-x: -36px; --from-y: -28px; --from-r: -8deg; --fl-y: -11px; --dur: 7s; --lag: 0ms; }
.tile--b { --from-x: 36px; --from-y: -28px; --from-r: 8deg; --fl-y: 9px; --dur: 8.5s; --lag: 110ms; }
.tile--c { --from-x: -36px; --from-y: 32px; --from-r: 8deg; --fl-y: 10px; --dur: 9s; --lag: 220ms; }
.tile--d { --from-x: 36px; --from-y: 32px; --from-r: -8deg; --fl-y: -9px; --dur: 7.5s; --lag: 330ms; }
.js .hero__art.is-in .tile {
  animation: tile-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--lag) both,
             tile-float var(--dur) ease-in-out calc(var(--lag) + 1s) infinite;
}
.js .hero__glow { animation: glow-breathe 9s ease-in-out infinite; }
/* Se detiene cuando el hero sale de pantalla (site.js agrega .is-off) */
.js .hero.is-off .hero__art .tile, .js .hero.is-off .hero__glow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* Sin desplazamiento: los mosaicos solo aparecen con un fundido */
  .js .hero__art.is-in .tile { animation: tile-fade 0.6s ease both; }
  .js .hero__glow { animation: none; }
}
@keyframes tile-fade { from { opacity: 0; } to { opacity: 1; } }

/* Beneficios: se cambia el borde izquierdo grueso en menta por un filete fino y un punto de acento (evita el patrón "side-tab") */
.benef li { border: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: flex-start; gap: 12px; }
.benef li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; background: var(--psw-mint); }

/* Hero en tablet y móvil: los mosaicos dejan de ocultarse y van arriba del texto y del botón, en tamaño compacto
   para desplazar lo menos posible el botón principal. Sin desenfoque de fondo en pantallas chicas (las animaciones cuestan menos). */
@media (max-width: 1024px) {
  .hero__art { display: block; order: -1; }
  .stack { width: min(240px, 60vw); --k: 0.6; }
  .tile { backdrop-filter: none; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
}
@media (max-width: 640px) {
  .stack { width: min(180px, 52vw); --k: 0.45; }
  .tile { border-radius: 14px; }
}

/* Paleta de acento solo verde CiiSA + rojo Adobe: se quitan el menta de PSW y el azul de todos los degradados y
   ornamentos. El token --gradient alimenta el texto .grad, los subrayados, las barras y los puntos. La mezcla va en oklch
   para evitar el gris turbio entre verde y rojo; sin soporte queda el degradado normal. */
:root { --gradient: linear-gradient(115deg, var(--ciisa-green), var(--adobe-red), var(--ciisa-green)); }
@supports (background-image: linear-gradient(in oklch, red, blue)) {
  :root { --gradient: linear-gradient(115deg in oklch, var(--ciisa-green), var(--adobe-red), var(--ciisa-green)); }
}
.hero__glow { background: radial-gradient(ellipse 50% 60% at 82% 28%, rgba(235, 16, 0, 0.18), transparent 70%), radial-gradient(ellipse 40% 45% at 4% 100%, rgba(188, 242, 0, 0.14), transparent 70%), radial-gradient(ellipse 40% 40% at 100% 0%, rgba(188, 242, 0, 0.10), transparent 70%); }
.sec--form::before { background: radial-gradient(ellipse 55% 55% at 92% 100%, rgba(235, 16, 0, 0.16), transparent 70%), radial-gradient(ellipse 45% 45% at 0% 0%, rgba(188, 242, 0, 0.10), transparent 70%); }
.tile--a { background: linear-gradient(145deg, rgba(188, 242, 0, 0.55), rgba(188, 242, 0, 0.08)); }
.tile--b { background: linear-gradient(145deg, rgba(235, 16, 0, 0.55), rgba(235, 16, 0, 0.08)); }
.tile--c { background: linear-gradient(145deg, rgba(188, 242, 0, 0.40), rgba(255, 255, 255, 0.05)); }
.tile--d { background: linear-gradient(145deg, rgba(235, 16, 0, 0.45), rgba(255, 255, 255, 0.05)); }
.benef li::before { background: var(--ciisa-green); }


/* Parallax al hacer scroll (site.js escribe --py en px). El resplandor del hero y el del formulario van más lentos que
   el scroll y los mosaicos un poco más lentos que el texto; se agranda el fondo para que no se vean los bordes. */
.hero__glow { inset: -20% 0; translate: 0 calc(var(--py, 0) * 1px); will-change: translate; }
.stack { translate: 0 calc(var(--py, 0) * 1px); will-change: translate; }
.sec--form::before { inset: -20% 0; translate: 0 calc(var(--py, 0) * 1px); }
@media (prefers-reduced-motion: reduce) {
  .hero__glow, .stack, .sec--form::before { translate: none; will-change: auto; }
}

/* Aparición por sección más pausada: entra cuando ya hay más sección a la vista (site.js: umbral 20 % y margen inferior
   del 12 %), con 200 ms de espera y 140 ms entre elementos hermanos, y una transición más larga para que se alcance a ver. */
.js .reveal { transition: opacity 1s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }

/* Tipografía oficial de CiiSA: Poppins (SIL OFL), la misma que usa CiiSA Beyond y con los mismos archivos locales.
   Sustituye a Source Sans 3; no se usa Adobe Clean. Poppins es más ancha: se ajustan interlineado y espaciado. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/types/Poppins-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/types/Poppins-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/types/Poppins-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/types/Poppins-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/types/Poppins-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/types/Poppins-Black.woff2') format('woff2'); }
:root {
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Ajuste de escala para Poppins (más ancha que Source Sans): titulares algo menores y en peso 800, interlineado más abierto */
body { font-size: 17px; }
h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
h3 { font-weight: 700; line-height: 1.25; }
.lead { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; }
.stats b { font-size: clamp(30px, 3.8vw, 44px); font-weight: 800; }
.steps i { font-weight: 800; font-size: 44px; }

/* Mapa tonal de CiiSA: el único "negro" del sitio es el navy del logo (#001c71) y el único tope claro es el blanco.
   El verde de CiiSA y el rojo de Adobe tienen su propia rampa: del blanco hacia el color y del color hacia el navy
   (nunca hacia negro ni gris). Las rampas se calcularon en oklab, que es lo que da degradados parejos y sin tonos turbios.
   Verde: ancla 300 (#bcf200). Rojo: ancla 500 (#eb1000). Navy: 900 (#001c71). Los grises neutros pasan a tintes de navy. */
:root {
  --navy-50: #f3f6fa;  --navy-100: #e8ecf4; --navy-200: #ccd5e7; --navy-300: #a5b5d4; --navy-400: #758dba;
  --navy-500: #4d6aa4; --navy-600: #2b4b8f; --navy-700: #143580; --navy-800: #062777; --navy-900: #001c71;
  --green-50: #f7feeb; --green-100: #eefdd4; --green-200: #d9fa9d; --green-300: #bcf200; --green-400: #96cf51;
  --green-500: #72ad67; --green-600: #4f8b72; --green-700: #2d6976; --green-800: #0b4675; --green-900: #001c71;
  --red-50: #fff0ed;   --red-100: #ffe1db;  --red-200: #ffc6bb;  --red-300: #ff9f8f;  --red-400: #f86956;
  --red-500: #eb1000;  --red-600: #b13441;  --red-700: #793958;  --red-800: #423267;  --red-900: #001c71;
  --ink: var(--navy-900);
  --night: var(--navy-900);
  --gray-50: var(--navy-50);
  --gray-100: var(--navy-100);
  --gray-300: var(--navy-200);
  --gray-600: var(--navy-600);
  --gray-700: var(--navy-800);
  --focus: var(--navy-700);
}
/* Sombras: del navy, no de negro */
.tile { box-shadow: 0 24px 60px rgba(0, 28, 113, 0.5); }
.soln:hover { box-shadow: 0 14px 34px rgba(0, 28, 113, 0.12); }
.formbox { box-shadow: 0 30px 80px rgba(0, 28, 113, 0.45); }
@media (max-width: 1024px) { .tile { box-shadow: 0 16px 36px rgba(0, 28, 113, 0.45); } }
.foot { background: var(--navy-900); }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--navy-900) 50%), linear-gradient(135deg, var(--navy-900) 50%, transparent 50%); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(20, 53, 128, 0.25); }
/* Sobre navy el anillo de foco va en verde (el navy 700 no se vería) */
.hero :focus-visible, .sec--form :focus-visible, .foot :focus-visible { outline-color: var(--green-300); }
/* Mosaicos del hero: cada uno baja por la rampa de su color hacia el navy y se desvanece en el fondo */
.tile--a { background: linear-gradient(145deg, var(--green-300), var(--green-600) 55%, rgba(0, 28, 113, 0.15)); }
.tile--b { background: linear-gradient(145deg, var(--red-500), var(--red-700) 55%, rgba(0, 28, 113, 0.15)); }
.tile--c { background: linear-gradient(145deg, var(--green-400), var(--green-700) 55%, rgba(0, 28, 113, 0.15)); }
.tile--d { background: linear-gradient(145deg, var(--red-400), var(--red-800) 55%, rgba(0, 28, 113, 0.15)); }

/* Fondo animado del hero y del formulario (mapa tonal): degradado entre el navy más profundo (el navy es el único color
   que baja hacia el negro) y el navy del logo, con una aurora tenue en verde CiiSA y rojo Adobe, y un cielo de estrellas,
   constelaciones y destellos que dibuja site.js en un canvas. Se pausa fuera de pantalla; con prefers-reduced-motion queda quieto. */
:root { --navy-950: #000b3c; --navy-1000: #00051f; }
.hero, .sec--form {
  background: linear-gradient(135deg, var(--navy-1000) 0%, var(--navy-900) 46%, var(--navy-950) 78%, var(--navy-1000) 100%);
  background-size: 240% 240%;
  animation: sky-shift 30s ease-in-out infinite alternate;
}
@keyframes sky-shift { from { background-position: 0% 20%; } to { background-position: 100% 80%; } }
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky__aurora {
  position: absolute; inset: -30%;
  background:
    radial-gradient(38% 34% at 24% 30%, rgba(188, 242, 0, 0.10), transparent 70%),
    radial-gradient(36% 32% at 80% 64%, rgba(235, 16, 0, 0.15), transparent 70%),
    radial-gradient(30% 28% at 56% 12%, rgba(165, 181, 212, 0.10), transparent 70%);
  animation: sky-aurora 38s ease-in-out infinite alternate;
}
@keyframes sky-aurora {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.08); }
}
.sky__stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sec--form > .wrap { position: relative; z-index: 1; }
.hero.is-off, .sec--form.is-off, .hero.is-off .sky__aurora, .sec--form.is-off .sky__aurora { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero, .sec--form, .sky__aurora { animation: none; }
}

/* Pie: color intermedio entre el negro y el navy (a medio camino entre --navy-1000 y --navy-900, paso 950 del navy) */
.foot { background: var(--navy-950); }

/* Ilustraciones de las tarjetas de soluciones: SVG propios con el mapa tonal (navy, verde CiiSA, rojo Adobe), a sangre en la
   parte alta de la tarjeta; la barra de degradado de 5 px (.soln::before) queda encima. Decorativas (alt vacío). */
.soln__art { display: block; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 2 / 1; margin: -28px -24px 6px; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.soln:hover .soln__art { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .soln:hover .soln__art { transform: none; } }

/* Fondo más profundo del hero y del formulario: ahora domina el negro (solo el navy puede bajar a negro; --navy-1100 es
   su paso más oscuro, con un toque de azul) y el navy del logo queda como "islas" de luz que derivan dentro de la aurora,
   más una viñeta que oscurece los bordes. Sustituye al degradado de 240 % anterior. */
:root { --navy-1100: #00030f; }
.hero, .sec--form {
  background: linear-gradient(160deg, var(--navy-1100) 0%, var(--navy-1000) 38%, var(--navy-950) 70%, var(--navy-1100) 100%);
  background-size: 200% 200%;
  animation: sky-shift 34s ease-in-out infinite alternate;
}
.sky__aurora {
  inset: -35%;
  background:
    radial-gradient(34% 30% at 70% 38%, rgba(0, 28, 113, 0.95), transparent 72%),
    radial-gradient(30% 26% at 18% 80%, rgba(6, 39, 119, 0.7), transparent 72%),
    radial-gradient(26% 24% at 26% 28%, rgba(188, 242, 0, 0.07), transparent 70%),
    radial-gradient(30% 26% at 84% 70%, rgba(235, 16, 0, 0.13), transparent 70%);
}
.sky::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 38%, rgba(0, 3, 15, 0.78) 100%); }

/* Pulido tipográfico (Poppins): ritmo de interlineado, espaciado por tamaño, equilibrio de líneas y cifras alineadas */
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-synthesis: none; }
body { line-height: 1.65; }
h1 { font-weight: 800; font-size: clamp(34px, 5vw, 62px); line-height: 1.08; letter-spacing: -0.032em; text-wrap: balance; }
h2 { font-weight: 800; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.14; letter-spacing: -0.028em; text-wrap: balance; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.014em; text-wrap: balance; }
p, li { text-wrap: pretty; }
.lead { max-width: 58ch; line-height: 1.65; margin-top: 18px; }
.hero .lead, .sec--form .lead { color: rgba(255, 255, 255, 0.86); }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; margin-bottom: 18px; }
.soln__tag { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; }
.soln p, .steps p { font-size: 16px; line-height: 1.62; }
.ticks li { font-size: 16px; line-height: 1.55; }
.mini li { font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; }
.chips li { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.nota { font-size: 14.5px; line-height: 1.55; }
.nav__links a { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; }
.btn { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.btn--sm { font-size: 15px; }
.stats b { font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stats span { font-size: 15px; line-height: 1.4; }
.steps i { font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.checks li, .benef li { line-height: 1.55; }
.field label { font-size: 14.5px; font-weight: 600; }
.grad { padding-bottom: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.foot { line-height: 1.6; }
.foot__legal, .foot__in p { font-size: 13.5px; line-height: 1.6; }

/* EXPERIMENTO "exp" (clase en <html>; quitarla revierte todo): sobre fondo blanco, titulares en el negro de Adobe y el resto del
   texto en el navy de CiiSA; tarjetas, pie y botones de acción en degradado de navy a negro. Aquí sí se usa negro puro
   (#000) como extremo del degradado, por decisión explícita del equipo para esta prueba. */
.exp { --adobe-black: #000000; --card-grad: linear-gradient(var(--a, 160deg), var(--navy-900) 0%, var(--navy-1000) 55%, #000 100%); }
.exp :is(#soluciones, #soluciones-ciisa, #sectores, #por-que-ciisa, #proceso) h2 { color: var(--adobe-black); }
.exp :is(#soluciones, #soluciones-ciisa, #sectores, #por-que-ciisa, #proceso) .kicker { color: var(--navy-900); }
.exp :is(#soluciones, #soluciones-ciisa, #sectores, #por-que-ciisa, #proceso) .lead { color: var(--navy-800); }
.exp :is(#soluciones, #soluciones-ciisa, #sectores, #por-que-ciisa, #proceso) .nota { color: var(--navy-700); }
.exp :is(#soluciones, #soluciones-ciisa, #sectores, #por-que-ciisa, #proceso) > .wrap > p:not([class]) { color: var(--navy-800); }

/* Tarjetas navy (las 4 de beneficios del sector público): degradado navy → negro, con ángulo distinto por tarjeta; al pasar
   el cursor el degradado se desplaza. Las demás tarjetas (soluciones, sector público, por qué CiiSA y pasos) siguen en claro,
   con titulares en negro y texto en navy. */
.exp .benef li {
  background: var(--card-grad); background-size: 170% 170%; background-position: 0% 0%;
  border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9);
  transition: background-position .6s ease;
}
.exp .benef li:nth-child(odd) { --a: 155deg; }
.exp .benef li:nth-child(even) { --a: 205deg; }
.exp .benef li:nth-child(3n) { --a: 180deg; }
.exp .benef li:hover { background-position: 100% 100%; }
.exp :is(.soln, .gov__col, .steps li) h3 { color: var(--adobe-black); }
.exp :is(.soln, .steps li) p, .exp .checks li, .exp .gov__col .ticks li { color: var(--navy-800); }
.exp .checks li b { color: var(--adobe-black); }
.exp .soln__tag { color: var(--navy-900); }
.exp .steps i { color: var(--adobe-black); }

/* Pie y botones de acción en el mismo degradado */
.exp .foot { background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-1000) 55%, #000 100%); }
.exp .btn--dark, .exp .btn--dark:hover:not(:disabled) { background: linear-gradient(135deg, var(--navy-900) 0%, #000 100%); background-size: 200% 200%; background-position: 0% 0%; color: #fff; transition: background-position .5s ease, transform .2s ease; }
.exp .btn--dark:hover:not(:disabled) { background-position: 100% 100%; }

/* Hover de las tarjetas de soluciones: la barra de degradado desaparecía de golpe porque la ilustración, al escalar, crea su
   propia capa y se pintaba encima de la barra. La barra ahora va siempre por encima (z-index) y, en lugar de cortarse, se
   desplaza y engrosa con una transición suave; la ilustración y la tarjeta usan la misma curva y duración. */
.soln { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease; }
.soln::before { z-index: 2; background-size: 220% 100%; background-position: 0% 0; transition: background-position .8s cubic-bezier(.22, 1, .36, 1), height .35s ease; }
.soln:hover::before, .soln:focus-within::before { background-position: 100% 0; height: 7px; }
.soln__art { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .soln::before { transition: none; } }

/* CTA principal del hero (botón blanco): al pasar el cursor o enfocarlo solo cambia el texto, que entra con un degradado
   animado; el fondo sigue blanco. Como el texto va sobre blanco, el degradado usa tonos oscuros de las rampas (verde 700,
   rojo 600 y navy 900) para cumplir el contraste AA; los demás botones no llevan este efecto. Dos capas de fondo: la del
   texto (background-clip: text) y el relleno blanco del botón. */
:root { --gradient-btn-light: linear-gradient(90deg, var(--green-700), var(--red-600), var(--navy-900), var(--green-700)); }
@supports (background-image: linear-gradient(in oklch, red, blue)) {
  :root { --gradient-btn-light: linear-gradient(90deg in oklch, var(--green-700), var(--red-600), var(--navy-900), var(--green-700)); }
}
@keyframes btn-flow { 0%, 100% { background-position: 0% 50%, 0 0; } 50% { background-position: 100% 50%, 0 0; } }
.hero .btn.btn--white:is(:hover, :focus-visible) {
  background-color: var(--paper);
  background-image: var(--gradient-btn-light), linear-gradient(var(--paper), var(--paper));
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 0% 50%, 0 0;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: btn-flow 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hero .btn.btn--white:is(:hover, :focus-visible) { animation: none; } }

/* CTAs oscuros (.btn--dark, fondo degradado navy → negro): al pasar el cursor o enfocarlos mantienen su fondo y el texto entra
   con el degradado animado verde 300 → rojo 400 (el rojo es más claro que el de Adobe para que el texto pequeño cumpla
   contraste sobre navy). Dos capas de fondo: texto (background-clip: text) y fondo del botón. Reutiliza @keyframes btn-flow. */
:root { --gradient-btn: linear-gradient(90deg, var(--green-300), var(--red-400), var(--green-300)); }
@supports (background-image: linear-gradient(in oklch, red, blue)) {
  :root { --gradient-btn: linear-gradient(90deg in oklch, var(--green-300), var(--red-400), var(--green-300)); }
}
html .btn.btn.btn--dark:is(:hover, :focus-visible):not(:disabled) {
  background-color: var(--navy-900);
  background-image: var(--gradient-btn), linear-gradient(135deg, var(--navy-900) 0%, #000 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 0% 50%, 0 0;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: btn-flow 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { html .btn.btn.btn--dark:is(:hover, :focus-visible):not(:disabled) { animation: none; } }

/* Enlace de la nota de "Soluciones de CiiSA": subrayado discreto en el color del texto */
.nota a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* Sección de sectores (empresas, gobierno, educación): tres tarjetas, con una frase de promesa y una nota de cómo se compra */
.gov--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .gov--3 { grid-template-columns: 1fr; } }
.gov--3 .gov__col { display: flex; flex-direction: column; }
.gov--3 .gov__col h3 { margin-bottom: 6px; }
.sector__promise { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--navy-700); margin-bottom: 16px; }
.gov--3 .mini { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.sector__nota { margin-top: auto; padding-top: 18px; font-size: 14px; line-height: 1.5; color: var(--navy-600); }

/* Ilustraciones de edificio en el encabezado de cada tarjeta de sector (empresa, gobierno, educación), a sangre */
.gov--3 .gov__col { position: relative; overflow: hidden; }
.sector__art { display: block; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 2 / 1; margin: -26px -24px 18px; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.gov--3 .gov__col:hover .sector__art { transform: scale(1.04); }

/* "+" entre las tarjetas de Adobe (sectores) y las de CiiSA (beneficios): dos filetes y un sello navy → negro con el signo */
.plus { display: flex; align-items: center; gap: 18px; margin: 38px 0 12px; }
.plus::before, .plus::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--navy-300)); }
.plus::after { background: linear-gradient(270deg, transparent, var(--navy-300)); }
.plus__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-900), #000); color: #fff; font-size: 34px; font-weight: 500; line-height: 1; box-shadow: 0 10px 26px rgba(0, 28, 113, 0.28); padding-bottom: 3px; }
.plus__label { text-align: center; font-weight: 600; color: var(--navy-800); margin-bottom: 22px; }

/* Tarjetas navy de CiiSA: dejan de ser viñetas y llevan una ilustración arriba */
.benef li { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.benef li::before { display: none; }
.benef__art { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.benef li:hover .benef__art { transform: scale(1.04); }
.benef li span { padding: 16px 18px 20px; font-weight: 600; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .gov--3 .gov__col:hover .sector__art, .benef li:hover .benef__art { transform: none; } }

/* Título de sectores: "Te ayudamos a elegir bien" va siempre en su propia línea, sin partirse. La frase se encoge con el ancho
   disponible (min entre 1em y ancho útil / 13.2; la frase mide 12.5em en Poppins 800) y se centra con su subrayado. */
.sector__title .underline { display: table; margin: 0.1em auto 0; white-space: nowrap; font-size: min(1em, calc((min(100vw - 48px, 800px)) / 13.2)); }

/* "+" de sectores: dos trazos verde CiiSA centrados con exactitud en el círculo (antes era un carácter de texto, que queda descentrado) */
.plus__mark { position: relative; font-size: 0; padding: 0; }
.plus__mark::before, .plus__mark::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--green-300); border-radius: 2px; transform: translate(-50%, -50%); }
.plus__mark::before { width: 22px; height: 3px; }
.plus__mark::after { width: 3px; height: 22px; }

/* Ilustraciones animadas (site.js las incrusta como SVG): un ciclo de 2.8 s que empieza y termina en el estado de reposo, para
   que no haya saltos. Se reproduce al verse por primera vez y en cada hover o foco de la tarjeta. Solo se declara el punto
   intermedio de cada animación; el inicio y el final son el valor normal del elemento. Sin animación con prefers-reduced-motion. */
.ill .ill__layer, .ill .tw, .ill .ill__glow { transform-box: fill-box; transform-origin: center; }
.ill.is-playing .ill__layer { animation: ill-float 2.8s ease-in-out 1; }
.ill.is-playing .ill__glow { animation: ill-glow 2.8s ease-in-out 1; }
.ill.is-playing .tw { animation: ill-pulse 1.9s ease-in-out 1; animation-delay: var(--ad, 0s); }
.ill.is-playing .dr, .ill.is-playing .sg { stroke-dasharray: 190; animation: ill-draw 2.8s ease-in-out 1; }
@keyframes ill-float { 50% { transform: translateY(-4px); } }
@keyframes ill-glow { 50% { opacity: 0.45; } }
@keyframes ill-pulse { 45% { opacity: 1; transform: scale(1.55); } }
@keyframes ill-draw { 35% { stroke-dashoffset: 190; } 85% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ill.is-playing .ill__layer, .ill.is-playing .ill__glow, .ill.is-playing .tw, .ill.is-playing .dr, .ill.is-playing .sg { animation: none; } }

/* Animaciones propias de cada ilustración (clases k-* y .draw puestas en los SVG): cada una resalta lo que ejemplifica, y todas
   son seamless: solo se declara el punto intermedio (o un giro completo / un desplazamiento de un periodo), así que el estado
   inicial y el final son el de reposo. Retardos escalonados con --ad (lo asigna site.js). Dentro de un ciclo de 2.8 s. */
.ill [class*="k-"], .ill .draw { transform-box: fill-box; transform-origin: center; }
.ill .k-flutter { transform-origin: 0% 50%; }
.ill .k-bar { transform-origin: 50% 100%; }
.ill .k-orbit { transform-box: view-box; transform-origin: 160px 84px; }
.ill.is-playing :is(.k-slide-r, .k-slide-l, .k-fan-l, .k-fan-r, .k-lift2, .k-lift, .k-drift, .k-walk, .k-sheet, .k-sq, .k-bub, .k-door, .k-shackle) { animation-duration: 2.6s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-delay: var(--ad, 0s); }
.ill.is-playing .k-slide-r { animation-name: k-slide-r; }
.ill.is-playing .k-slide-l { animation-name: k-slide-l; }
.ill.is-playing .k-fan-l { animation-name: k-fan-l; }
.ill.is-playing .k-fan-r { animation-name: k-fan-r; }
.ill.is-playing .k-lift2 { animation-name: k-lift2; }
.ill.is-playing .k-lift { animation-name: k-lift; }
.ill.is-playing .k-drift { animation-name: k-drift; }
.ill.is-playing .k-walk { animation-name: k-walk; }
.ill.is-playing .k-sheet { animation-name: k-sheet; }
.ill.is-playing .k-sq { animation-name: k-sq; }
.ill.is-playing .k-bub { animation-name: k-bub; }
.ill.is-playing .k-door { animation-name: k-door; }
.ill.is-playing .k-shackle { animation-name: k-shackle; }
.ill.is-playing .k-pop { animation: k-pop 1.8s ease-in-out 1; animation-delay: var(--ad, 0s); }
.ill.is-playing .k-flutter { animation: k-flutter 2.4s ease-in-out 1; }
.ill.is-playing .k-spin90 { animation: k-spin90 2.4s ease-in-out 1; }
.ill.is-playing .k-orbit { animation: k-orbit 2.6s ease-in-out 1; }
.ill.is-playing .k-dot { animation: k-dot 2.6s ease-in-out 1; }
.ill.is-playing .k-bar { animation: k-bar 2.2s ease-in-out 1; animation-delay: var(--ad, 0s); }
.ill.is-playing .k-knob { animation: k-knob 2.2s ease-in-out 1; animation-delay: var(--ad, 0s); }
.ill.is-playing .k-trk { animation: k-trk 2.2s ease-in-out 1; animation-delay: var(--ad, 0s); }
.ill.is-playing .k-flow { animation: k-flow 2.6s linear 1; }
.ill.is-playing .k-sweep { animation: k-sweep 2.4s ease-in-out 1; }
.ill.is-playing .draw { stroke-dasharray: 100; animation: ill-draw100 2.4s ease-in-out 1; animation-delay: var(--ad, 0s); }
@keyframes k-slide-r { 50% { transform: translateX(10px); } }
@keyframes k-slide-l { 50% { transform: translateX(-10px); } }
@keyframes k-fan-l { 50% { transform: translateX(-12px) rotate(-5deg); } }
@keyframes k-fan-r { 50% { transform: translateX(12px) rotate(5deg); } }
@keyframes k-lift2 { 50% { transform: translateY(-8px); } }
@keyframes k-lift { 50% { transform: translateY(-24px); } }
@keyframes k-drift { 50% { transform: translateX(6px); } }
@keyframes k-walk { 50% { transform: translateX(14px); } }
@keyframes k-sheet { 50% { transform: translateX(12px); } }
@keyframes k-sq { 55% { transform: scale(1.22); } }
@keyframes k-bub { 45% { transform: scale(1.07); } }
@keyframes k-door { 50% { opacity: 0.3; } }
@keyframes k-shackle { 35%, 65% { transform: translateY(-5px); } }
@keyframes k-pop { 45% { transform: scale(1.3); } }
@keyframes k-flutter { 25% { transform: scaleX(0.72) skewY(7deg); } 55% { transform: scaleX(0.9) skewY(-5deg); } 80% { transform: scaleX(0.8) skewY(3deg); } }
@keyframes k-spin90 { to { transform: rotate(90deg); } }
@keyframes k-orbit { to { transform: rotate(360deg); } }
@keyframes k-dot { 45% { transform: translateX(46px); } }
@keyframes k-bar { 22% { transform: scaleY(0.3); } 75% { transform: scaleY(1); } }
@keyframes k-knob { 35%, 70% { transform: translateX(14px); } }
@keyframes k-trk { 35%, 70% { fill: #bcf200; fill-opacity: 0.4; stroke: #bcf200; stroke-opacity: 0.9; } }
@keyframes k-flow { to { stroke-dashoffset: calc(var(--per, 6px) * -2); } }
@keyframes k-sweep { 0% { opacity: 0; transform: translateX(0); } 20%, 80% { opacity: 0.5; } 100% { opacity: 0; transform: translateX(120px); } }
@keyframes ill-draw100 { 35% { stroke-dashoffset: 100; } 85% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ill * { animation: none !important; } }

/* Logotipos de producto (íconos de app, archivos oficiales de socio, sin modificar): solos y a 32 px junto al nombre del producto
   en el título de las cuatro tarjetas de Adobe, y a 20 px en las apps de Creative Cloud. Sin recolorear, sin sombra ni filtros,
   sin animación ni zoom al hover (el zoom del hover solo afecta a la ilustración). Espacio libre de media anchura del logo. */
.prod { display: flex; align-items: center; gap: 16px; }
.prod__logo { flex: none; width: 32px; height: 32px; margin: 0; }
.mini--app li { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; }
.mini__logo { flex: none; width: 20px; height: 20px; }

/* Creative Cloud: top 4 de apps en dos filas y un botón que despliega todas las apps. El panel (.apps) vive en el DOM justo
   después de la tarjeta de Creative Cloud: en escritorio (4 columnas) se manda debajo de las cuatro columnas con order, y en
   tablet y móvil se queda debajo de la tarjeta (grid-auto-flow: dense rellena el hueco de la fila). */
.mini--app { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini--app li { justify-content: flex-start; white-space: nowrap; }
.apps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 40px; margin-top: 2px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--navy-900); background: transparent; color: var(--navy-900); font: 600 14.5px/1 var(--font-body); letter-spacing: 0.01em; cursor: pointer; transition: background .25s ease, color .25s ease; }
.apps-btn:hover { background: var(--navy-900); color: #fff; }
.apps-btn svg { flex: none; transition: transform .3s ease; }
.apps-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.apps { grid-column: 1 / -1; order: 1; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--gray-300); animation: apps-in .45s cubic-bezier(.22, 1, .36, 1); }
.apps__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 22px; }
.apps__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--adobe-black, var(--ink)); }
.apps__note { font-size: 14px; color: var(--navy-600); }
.apps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px; }
.app { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.app__logo { flex: none; width: 32px; height: 32px; }
.app b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--adobe-black, var(--ink)); }
.app span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--navy-700); }
@keyframes apps-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) {
  .grid4 { grid-auto-flow: dense; }
  .apps { order: 0; }
  .apps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .apps__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .apps { animation: none; } .apps-btn svg { transition: none; } }

/* Pastillas de producto: un poco más de aire vertical y a la izquierda del ícono (aviso de padding justo del detector) */
.mini li { padding: 6px 14px; }
.mini--app li { padding: 6px 14px 6px 10px; }

/* Compendio del hero: cada tarjeta flotante lleva una ilustración (2 de CiiSA en las verdes y 2 de Adobe en las rojas), sin el
   cuadro de borde blanco de antes. Se generan con privada/ilustraciones/hero.mjs, que lee el color de cada tarjeta. */
.tile__art { position: absolute; inset: 11%; width: 78%; height: 78%; display: block; pointer-events: none; }

/* Cargador del sitio (solo con JS): aparece si la carga tarda más de 0.3 s y se retira solo (site.js). Marca animada: el punto
   del isotipo de CiiSA viaja hasta el cuadrado. */
.loader { display: none; }
.js .loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: linear-gradient(160deg, var(--navy-1100), var(--navy-900) 60%, var(--navy-1100)); opacity: 0; animation: loader-in .35s ease .3s forwards; }
.loader svg { width: 112px; height: auto; overflow: visible; }
.loader__dot { transform-box: fill-box; animation: loader-dot 1.8s ease-in-out infinite; }
.loader__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes loader-in { to { opacity: 1; } }
@keyframes loader-dot { 0%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(46px); } }
@media (prefers-reduced-motion: reduce) { .loader__dot { animation: none; } }

/* Esqueletos de las tarjetas: brillo navy mientras llega la ilustración (lazy) y aparición suave cuando carga */
.js img.soln__art:not(.is-loaded), .js img.sector__art:not(.is-loaded), .js img.benef__art:not(.is-loaded) {
  background: linear-gradient(100deg, var(--navy-900) 35%, var(--navy-800) 50%, var(--navy-900) 65%) 0 0 / 220% 100%;
  animation: skeleton 1.4s linear infinite;
}
.js img.soln__art.is-loaded, .js img.sector__art.is-loaded, .js img.benef__art.is-loaded { animation: art-in .5s ease; }
@keyframes skeleton { to { background-position: -220% 0; } }
@keyframes art-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js img.soln__art, .js img.sector__art, .js img.benef__art { animation: none !important; } }

/* WhatsApp: botón fijo (traído de CiiSA Beyond y adaptado: navy → negro en reposo, degradado verde → rojo animado al hover) y CTA del formulario.
   La etiqueta de cada campo tiene un interlineado propio para que las preguntas de una misma fila queden a la misma altura. */
.field label { line-height: 1.35; }
.wa-cta { gap: 10px; margin-top: 28px; }
.wa-cta svg { flex: none; color: var(--green-300); }
.wa-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  color: #fff; text-decoration: none; isolation: isolate; overflow: hidden;
  background-color: var(--navy-900); background-image: var(--gradient); background-size: 300% 300%; background-position: 0% 50%;
  border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 8px 24px rgba(0, 3, 15, 0.45);
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.wa-fab::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, var(--navy-900), var(--navy-1100)); transition: opacity .35s ease; }
.wa-fab svg { position: relative; }
.wa-fab:hover, .wa-fab:focus-visible, .wa-fab:active { color: var(--navy-900); border-color: transparent; transform: translateY(-3px); animation: flow 6s ease-in-out infinite; }
.wa-fab:hover::before, .wa-fab:focus-visible::before, .wa-fab:active::before { opacity: 0; }
.wa-fab:focus-visible { outline: 3px solid var(--green-300); outline-offset: 4px; }
@media (max-width: 640px) { .wa-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; } .wa-fab svg { width: 25px; height: 25px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab:hover, .wa-fab:focus-visible, .wa-fab:active { animation: none; transform: none; } }

/* SEO y accesibilidad: enlace "Saltar al contenido", visible solo al enfocarlo con teclado */
.skip { position: fixed; left: 12px; top: -64px; z-index: 1000; padding: 12px 20px; border-radius: 999px; background: var(--navy-900); color: #fff; font-weight: 600; transition: top .2s; }
.skip:focus-visible { top: 12px; outline: 3px solid var(--green-300); outline-offset: 2px; }

/* Formulario fluido: al enviar, la caja conserva el alto del formulario (lo fija adobe-form.js) y el agradecimiento queda centrado
   dentro, con una entrada suave; así la sección no se encoge ni la página salta. */
.formbox.is-done { display: grid; align-content: center; box-sizing: border-box; }
.formbox.is-done .gracias { animation: gracias-in .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes gracias-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .formbox.is-done .gracias { animation: none; } }
/* Causa raíz del salto al enviar: `.form { display: grid }` anulaba el atributo `hidden`, así que el formulario seguía visible y el
   agradecimiento se apilaba debajo (la sección crecía ~220 px). `hidden` debe ganar siempre en estos dos bloques. */
.form[hidden], .gracias[hidden] { display: none; }

/* Página de confirmación de correo (validar.html): mismo cielo navy del hero, tarjeta centrada y pie sencillo. Sin animaciones: el
   estado cambia al instante para que lectores de pantalla lo anuncien (aria-live en la tarjeta). */
.val-body { background: linear-gradient(135deg, var(--navy-1000) 0%, var(--navy-900) 46%, var(--navy-950) 78%, var(--navy-1000) 100%); min-height: 100vh; display: flex; flex-direction: column; color: var(--paper); }
.val { flex: 1; display: grid; place-items: center; padding: calc(var(--nav-h) + 40px) 24px 40px; }
.val__card { width: min(560px, 100%); background: var(--paper); color: var(--navy-900); border-radius: 24px; padding: clamp(28px, 5vw, 48px); box-shadow: 0 24px 60px rgba(0, 5, 31, 0.55); }
.val__eyebrow { margin: 0 0 14px; font: 700 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-600); display: flex; align-items: center; gap: 10px; }
.val__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-500); }
.val__card h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 34px); line-height: 1.15; color: var(--navy-900); }
.val__card p { margin: 0 0 28px; color: var(--navy-700); }
.val__card [hidden] { display: none; }
.val__foot { padding: 20px 24px 28px; text-align: center; font-size: 14px; color: var(--navy-300); background: var(--navy-950); }
.val__foot p { margin: 0; }
.val__foot a { color: var(--navy-200); }

/* validar.html: enlace secundario bajo el botón de las pantallas de gracias (el WhatsApp es el mismo número del sitio) */
.val__sec { margin: 20px 0 0; font-size: 15px; }
.val__sec a { color: var(--navy-700); font-weight: 600; }

/* validar.html: sin saltos. (1) La tarjeta nace en "espera" y JS decide el estado antes de mostrar nada, así nunca se ve un estado
   equivocado; (2) alto mínimo para que el cambio de estado no encoja ni estire la tarjeta; (3) la marca animada del cargador del
   sitio, en un cuadro navy porque su letra es blanca; (4) transición suave entre páginas del mismo sitio (navegadores con View
   Transitions entre documentos; en los demás se ignora). La barra superior conserva su lugar entre páginas. */
.val__card { min-height: 380px; }
.val__card > div:not([hidden]) { animation: val-in .28s ease both; }
@keyframes val-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) {
  .val__card > div:not([hidden]) { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* validar.html: el título recibe el foco por script para que los lectores de pantalla anuncien el estado nuevo; el recuadro de foco
   sobre un texto que no es interactivo solo estorba a la vista, así que se quita (el botón y los enlaces conservan el suyo). */
.val__card h1:focus { outline: none; }

/* validar.html: fondo del hero (degradado oscuro + cielo de site.js) fijo detrás de todo, y un "tono" que cambia con el estado: verde
   CiiSA si todo salió bien, naranja (mezcla del degradado verde → rojo) para avisos y rojo Adobe para errores. El tono vive en
   data-tono del body (lo pone validar.js). La barra de progreso reemplaza al logo animado. */
.val-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, var(--navy-1100) 0%, var(--navy-1000) 38%, var(--navy-950) 70%, var(--navy-1100) 100%); background-size: 200% 200%; animation: sky-shift 34s ease-in-out infinite alternate; }
.val-tono { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; background: radial-gradient(70% 58% at 50% 50%, var(--tono-1), transparent 76%), radial-gradient(46% 42% at 6% 94%, var(--tono-2), transparent 70%), radial-gradient(42% 38% at 96% 8%, var(--tono-2), transparent 70%); }
.val-body { --aviso: color-mix(in srgb, var(--ciisa-green) 38%, var(--adobe-red)); --acento: var(--ciisa-green); --acento-2: var(--adobe-red); --tono-1: transparent; --tono-2: transparent; --halo: transparent; }
.val-body[data-tono="exito"] { --tono-1: rgba(188, 242, 0, 0.30); --tono-2: rgba(188, 242, 0, 0.22); --halo: rgba(188, 242, 0, 0.5); --acento: var(--ciisa-green); --acento-2: var(--green-400); }
.val-body[data-tono="aviso"] { --tono-1: color-mix(in srgb, var(--aviso) 38%, transparent); --tono-2: color-mix(in srgb, var(--aviso) 26%, transparent); --halo: color-mix(in srgb, var(--aviso) 55%, transparent); --acento: var(--aviso); --acento-2: color-mix(in srgb, var(--ciisa-green) 62%, var(--adobe-red)); }
.val-body[data-tono="error"] { --tono-1: rgba(235, 16, 0, 0.34); --tono-2: rgba(235, 16, 0, 0.24); --halo: rgba(235, 16, 0, 0.5); --acento: var(--adobe-red); --acento-2: var(--red-400); }
.val-body:not([data-tono="neutro"]) .val-tono { opacity: 1; }
.val, .val__foot { position: relative; z-index: 1; }
.val__card { position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 5, 31, 0.55), 0 0 90px -10px var(--halo); transition: box-shadow .7s ease; }
.val__card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--acento), var(--acento-2)); }
.val__dot { background: var(--acento-2); }
.val__bar { height: 12px; border-radius: 999px; background: var(--navy-100); overflow: hidden; margin: 8px 0 28px; }
.val__bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ciisa-green), var(--adobe-red), var(--ciisa-green)); background-size: 200% 100%; animation: val-shine 1.4s linear infinite; transition: width 3s cubic-bezier(.1, .7, .2, 1); }
@keyframes val-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .val-fondo { animation: none; }
  .val__bar-fill { animation: none; transition: none; }
}

/* validar.html, pantallas de éxito: el WhatsApp pasa a ser el llamado principal (botón navy con el glifo del botón flotante del sitio y,
   al pasar el cursor, el degradado de marca como el .wa-fab), "Conoce cómo trabajamos" queda como secundario y debajo un enlace a ciisa.com. */
.val__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; }
.val__sec--up { margin: 0 0 12px; font-weight: 600; color: var(--navy-700); }
.btn--wa svg { flex: none; }
.btn--wa:hover:not(:disabled), .btn--wa:focus-visible { background: var(--gradient); background-size: 200% 100%; color: var(--navy-900); animation: flow 6s ease-in-out infinite; }
.btn--out { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn--out:hover { background: var(--navy-100); }
@media (max-width: 520px) { .val__ctas .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn--wa:hover:not(:disabled), .btn--wa:focus-visible { animation: none; } }

/* validar.html en pantallas angostas (320–380 px): los botones llevaban el texto en una sola línea y se cortaban ("Escríbenos por
   WhatsAp…"). Ahora el texto puede pasar a dos líneas, la tarjeta gana ancho útil con menos relleno y la etiqueta baja el espaciado. */
@media (max-width: 520px) {
  .val__ctas .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 12px 20px; }
}
@media (max-width: 380px) {
  .val { padding-left: 16px; padding-right: 16px; }
  .val__card { padding: 24px 20px; }
  .val__eyebrow { letter-spacing: 0.1em; }
}

/* Agradecimiento: nota de verificación del correo bajo el mensaje principal. Más tenue y estrecha para que no compita con el mensaje */
.gracias__nota { max-width: 40ch; margin: 14px auto 0; font-size: 15px; line-height: 1.55; color: var(--gray-600); }

/* Aviso de cookies (cookies.js): tarjeta acotada abajo a la izquierda, ocultable, sin bloquear la página. Aceptar y rechazar pesan lo mismo.
   En pantallas angostas ocupa el ancho con margen de 12 px y, si el detalle no cabe, hace scroll dentro de la tarjeta. Va por encima del
   WhatsApp flotante (z-index 100) mientras está abierta. [hidden] explícito porque display:grid/flex anula el atributo. */
.ck[hidden], .ck-tab[hidden], .ck__vista[hidden] { display: none; }
.ck { position: fixed; left: 24px; bottom: 24px; z-index: 120; width: min(420px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 20px; border-radius: var(--radius-lg); background: var(--paper); color: var(--navy-900); border: 1px solid var(--navy-200); box-shadow: 0 24px 60px rgba(0, 5, 31, 0.35), 0 2px 8px rgba(0, 5, 31, 0.12); animation: ck-in .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes ck-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ck__x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy-600); cursor: pointer; transition: background .2s, color .2s; }
.ck__x svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ck__x:hover { background: var(--navy-100); color: var(--navy-900); }
.ck :is(.ck__x, .ck__link, .ck__sw, .btn):focus-visible, .ck-tab:focus-visible, .foot__cookies:focus-visible { outline: 3px solid var(--navy-600); outline-offset: 2px; }
.ck__t { margin: 0 34px 8px 0; font: 700 18px/1.3 var(--font-body); color: var(--navy-900); }
.ck__t:focus { outline: none; }
.ck__p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--navy-700); }
.ck__p a { color: var(--navy-900); font-weight: 600; text-underline-offset: 2px; }
.ck__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck .btn { min-height: 44px; padding: 0 12px; font-size: 15px; }
.ck__link { display: block; margin: 12px auto 0; padding: 8px 12px; border: 0; background: none; font: 600 15px/1.2 var(--font-body); color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck__link:hover { color: var(--navy-600); }
.ck__list { display: grid; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; }
.ck__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--navy-100); cursor: pointer; }
.ck__list li:first-child .ck__row { border-top: 0; padding-top: 4px; }
.ck__rt { display: grid; gap: 3px; font-size: 14px; line-height: 1.45; color: var(--navy-700); }
.ck__rt strong { font-size: 16px; color: var(--navy-900); }
.ck__sw { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 46px; height: 26px; margin: 2px 0 0; border: 0; border-radius: 999px; background: var(--navy-100); box-shadow: inset 0 0 0 2px var(--navy-500); cursor: pointer; transition: background .2s, box-shadow .2s; }
.ck__sw::after { content: ''; position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy-500); transition: transform .2s, background .2s, width .2s, height .2s, top .2s, left .2s; }
.ck__sw:checked { background: var(--navy-900); box-shadow: none; }
.ck__sw:checked::after { top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; transform: translateX(20px); }
.ck__sw:disabled { opacity: .55; cursor: not-allowed; }
.ck__ok .ck__t { margin-bottom: 6px; }
.ck__ok .ck__p { margin-bottom: 0; }
.ck-tab { position: fixed; left: 24px; bottom: 24px; z-index: 110; min-height: 40px; padding: 0 18px; border: 1px solid var(--navy-200); border-radius: 999px; background: var(--paper); color: var(--navy-900); font: 600 15px/1 var(--font-body); box-shadow: 0 8px 24px rgba(0, 5, 31, 0.25); cursor: pointer; transition: background .2s; }
.ck-tab:hover { background: var(--navy-100); }
.foot__cookies { padding: 0; border: 0; background: none; font: inherit; font-size: 16px; color: rgba(255, 255, 255, 0.8); cursor: pointer; }
.foot__cookies:hover { color: var(--paper); text-decoration: underline; }
@media (max-width: 640px) {
  .ck { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100dvh - 24px); padding: 20px 18px 18px; }
  .ck-tab { left: 12px; bottom: 12px; }
}
@media (max-width: 360px) { .ck__acts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ck { animation: none; } .ck__sw, .ck__sw::after { transition: none; } }