/* ═══════════════════════════════════════════════════════════════
   Kat Onar · sistema visual del sitio
   Claro, sobrio, industrial. Una sola hoja para todas las páginas.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta de marca v3.2 · marca/kit/Sistema/paleta.css ── */
  --oliva:#606438;        /* Oliva · principal: acciones, llamadas y reconocimiento.
                             6.2:1 sobre blanco, 5.6:1 sobre marfil */
  --marfil:#F6F3EC;       /* Marfil · base: fondos y espacio visual */
  --azul:#142F3D;         /* Azul profundo · estructura: títulos, texto y bandas oscuras */
  --oro:#A07038;          /* Oro tierra · acento puntual: cifras grandes e íconos.
                             Nunca texto chico (4.3:1 sobre blanco) */
  --arena:#D8CBB5;        /* Arena · superficies y apoyos cálidos */
  --salvia:#8F9B89;       /* Salvia · matiz secundario */
  --grafito:#5E635E;      /* Grafito · texto complementario, 5.5:1 sobre marfil */

  /* ── Derivados. Solo lo que la paleta no cubre; ninguno inventa un tono
        nuevo: son aclarados u oscurecidos de los siete de arriba. ── */
  --blanco:#FFFFFF;       /* el piso del sitio */
  --gris:#F6F3EC;         /* la banda alterna es el Marfil de marca */
  --gris-2:#EDE8DC;
  --linea:#E7DFD0;        /* filos cálidos: Arena a mitad de camino del Marfil */
  --linea-fuerte:#D8CBB5; /* Arena */
  --tinta:#142F3D;
  --texto:#46555E;        /* Azul aclarado, para leer párrafos sin que pesen (7.7:1) */
  --tenue:#5E635E;
  --oliva-osc:#4F522E;    /* el hover de las acciones */
  --oliva-tenue:#ECEBE0;  /* fondo de íconos y etiquetas: el Oliva encima da 5.2:1 */
  --oliva-filo:#D6D5C3;
  --oro-tenue:#F2EBE3;
  --carbon:#142F3D;
  --carbon-2:#1D3D4C;
  --carbon-texto:#B7C6CE;

  --sombra:0 1px 2px rgba(20,47,61,.05), 0 12px 28px -20px rgba(20,47,61,.30);
  --sombra-alta:0 2px 4px rgba(20,47,61,.06), 0 22px 44px -24px rgba(20,47,61,.35);

  /* ── Tipografía. Inter conduce todo: titulares, texto e interfaz. Gentium
        queda para una cita breve o el griego, y el sitio no la necesita. ── */
  --display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cuerpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Gentium, solo para una cita breve: es el rol que le deja el dossier. La cargan
     únicamente las páginas que citan. */
  --cita:'Gentium Plus','Gentium','Gentium Book Plus',Georgia,'Times New Roman',serif;
  --ancho:1180px;
  --radio:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{font-family:var(--cuerpo);background:var(--blanco);color:var(--texto);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--oliva);color:#fff}

/* ── tipografía ───────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;color:var(--tinta);line-height:1.16;
  letter-spacing:-.018em}
h1{font-size:clamp(32px,4.4vw,52px);letter-spacing:-.026em}
h2{font-size:clamp(25px,2.9vw,36px)}
h3{font-size:20px;font-weight:600;letter-spacing:-.008em}
h4{font-size:16px;font-weight:600;letter-spacing:0}
p{max-width:66ch}
strong{color:var(--tinta);font-weight:600}
.entrada{font-size:clamp(16.5px,1.5vw,18.5px);color:var(--texto);max-width:60ch}
.chico{font-size:14px}
.tenue{color:var(--tenue)}

/* ── estructura ───────────────────────────────────────────── */
.marco{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(20px,4.5vw,40px)}
.banda{padding-block:clamp(52px,7vw,92px)}
.banda--gris{background:var(--gris);border-block:1px solid var(--linea)}
.banda--fina{padding-block:clamp(26px,3vw,34px)}
.banda--oscura{background:var(--carbon);color:var(--carbon-texto)}
.banda--oscura h1,.banda--oscura h2,.banda--oscura h3,.banda--oscura h4{color:#F2F6F9}
.banda--oscura strong{color:#F2F6F9}
.banda--oscura .entrada{color:var(--carbon-texto)}

/* rótulo de sección: lo que hace que las secciones se vean */
.rotulo{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.rotulo b{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--tinta);
  letter-spacing:.02em}
.rotulo span{font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--oliva)}
/* Los rótulos que tienen página propia son enlaces: el título hace de puerta
   y ahorra un botón. */
.rotulo a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.rotulo a:hover{border-color:var(--oliva)}
.rotulo::after{content:"";flex:1;height:1px;background:var(--arena)}
.banda--oscura .rotulo b{color:var(--salvia)}
.banda--oscura .rotulo span{color:#7F909D}
.banda--oscura .rotulo::after{background:#25333E}

.cabecera-sec{max-width:60ch;margin-bottom:clamp(30px,4vw,44px)}
.cabecera-sec h2+p{margin-top:14px}

/* ── botones ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ui);font-size:14.5px;font-weight:600;letter-spacing:.005em;
  text-decoration:none;padding:12px 22px;border-radius:6px;border:1.5px solid transparent;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s;cursor:pointer}
.btn svg{width:15px;height:15px;flex:none}
.btn--pleno{background:var(--oliva);color:#fff}
.btn--pleno:hover{background:var(--oliva-osc);box-shadow:var(--sombra)}
.btn--linea{border-color:var(--linea-fuerte);color:var(--tinta);background:var(--blanco)}
.btn--linea:hover{border-color:var(--oliva);color:var(--oliva)}
.btn--claro{background:#fff;color:var(--carbon)}
.btn--claro:hover{background:var(--marfil)}
.btn--fantasma{border-color:#31414D;color:#E6EDF2}
.btn--fantasma:hover{border-color:#5C7080;background:#182833}
.btn--chico{padding:9px 16px;font-size:13.5px}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* enlace con flecha */
.enlace{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);
  font-weight:600;font-size:14.5px;color:var(--oliva);text-decoration:none;
  border-bottom:1.5px solid transparent;transition:border-color .18s,gap .18s}
.enlace:hover{border-color:var(--oliva);gap:12px}
.enlace svg{width:14px;height:14px}
.banda--oscura .enlace{color:var(--arena)}
.banda--oscura .enlace:hover{border-color:var(--arena)}

/* ── encabezado del sitio ─────────────────────────────────── */
.sitio-cab{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.sitio-nav{display:flex;align-items:center;gap:clamp(16px,3vw,38px);height:92px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
/* KAT ONAR solo, como en la página 20 del dossier: 160 px es su mínimo digital */
.logo img{width:172px;height:auto;display:block}
@media(max-width:560px){.logo img{width:160px}}
/* a 160 px el nombre ocupa casi la mitad de un celular: el botón se achica para
   seguir en la misma línea */
@media(max-width:400px){.sitio-nav{gap:8px}.sitio-nav .btn--chico{padding:8px 11px;font-size:12.5px}}
.sitio-nav menu{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;list-style:none}
.sitio-nav menu a{font-family:var(--ui);font-size:14.5px;font-weight:500;color:var(--texto);
  text-decoration:none;padding-block:6px;border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.sitio-nav menu a:hover{color:var(--tinta)}
.sitio-nav menu a[aria-current]{color:var(--oliva);border-color:var(--oliva)}
.sitio-nav .btn{flex:none}
@media(max-width:900px){
  .sitio-nav{height:auto;flex-wrap:wrap;padding-block:12px;gap:10px}
  .sitio-nav menu{order:3;width:100%;margin-left:0;overflow-x:auto;gap:18px;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .sitio-nav menu a{white-space:nowrap;font-size:14px}
  .sitio-nav .btn{margin-left:auto}
}

/* ── portada de página interior ───────────────────────────── */
.portadilla{padding-block:clamp(40px,5.5vw,68px) clamp(34px,4.5vw,54px);
  background:var(--gris);border-bottom:1px solid var(--linea)}
.portadilla h1{max-width:19ch}
.portadilla .entrada{margin-top:16px}

/* ── rejillas ─────────────────────────────────────────────── */
.rejilla{display:grid;gap:clamp(14px,1.6vw,20px)}
.rej-2{grid-template-columns:repeat(2,1fr)}
.rej-3{grid-template-columns:repeat(3,1fr)}
.rej-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.rej-3,.rej-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rej-2,.rej-3,.rej-4{grid-template-columns:1fr}}

/* ── tarjetas ─────────────────────────────────────────────── */
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.tarjeta--enlace{text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.tarjeta--enlace:hover{border-color:var(--linea-fuerte);box-shadow:var(--sombra);transform:translateY(-2px)}
.tarjeta p{font-size:15px}
.icono{width:42px;height:42px;border-radius:8px;background:var(--oliva-tenue);color:var(--oliva);
  display:grid;place-items:center;flex:none;margin-bottom:6px}
.icono svg{width:21px;height:21px}
.icono--oro{background:var(--oro-tenue);color:var(--oro)}

/* ── cifras ───────────────────────────────────────────────── */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px)}
.cifra b{display:block;font-family:var(--display);font-size:clamp(30px,3.6vw,42px);
  font-weight:500;color:var(--oro);line-height:1;letter-spacing:-.02em}
.cifra span{display:block;font-size:13.5px;color:var(--tenue);margin-top:8px;max-width:24ch}
.banda--oscura .cifra b{color:#fff}
.banda--oscura .cifra span{color:#8DA0AD}
@media(max-width:760px){.cifras{grid-template-columns:repeat(2,1fr);gap:24px}}
/* la fuente de una cifra prestada va debajo de la banda, no adentro del número.
   La línea cruza la banda entera —cortada a mitad de camino se lee como un error—
   y el texto se queda en su ancho de lectura. */
.cifras-fuente{margin-top:clamp(18px,2vw,24px);padding-top:14px;
  border-top:1px solid var(--linea-fuerte)}
.cifras-fuente p{max-width:92ch}

/* ── lista de comprobación ────────────────────────────────── */
.chequeo{list-style:none;display:grid;gap:12px}
.chequeo li{position:relative;padding-left:30px;font-size:15.5px}
.chequeo li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;
  border-radius:4px;background:var(--oliva-tenue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606438' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}

/* ── tabla sobria ─────────────────────────────────────────── */
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tenue);text-align:left;padding:0 16px 10px 0;
  border-bottom:1px solid var(--linea-fuerte)}
.tabla td{padding:15px 16px 15px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla .destacado{font-family:var(--ui);font-weight:600;color:var(--tinta);font-size:15.5px}
@media(max-width:760px){
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla thead{display:none}
  .tabla tr{border-bottom:1px solid var(--linea);padding-block:16px}
  .tabla tr:last-child{border-bottom:0}
  .tabla td{border:0;padding:2px 0}
  .tabla td[data-rot]::before{content:attr(data-rot) " · ";color:var(--tenue);font-size:13px}
}

/* ── etiquetas ────────────────────────────────────────────── */
.etiqueta{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 10px;border-radius:4px;background:var(--gris-2);color:var(--texto);align-self:flex-start}
.etiqueta--vivo{background:var(--oliva-tenue);color:var(--oliva)}
.etiqueta--marca{background:var(--oro-tenue);color:var(--tinta)}
.etiqueta--nube{background:#E7F1EA;color:#356B47}

/* ── cierre / llamado ─────────────────────────────────────── */
.cierre{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:820px){.cierre{grid-template-columns:1fr;gap:28px}}

/* ── pie ──────────────────────────────────────────────────── */
.sitio-pie{background:var(--carbon);color:#8DA0AD;font-size:14px;padding-block:44px 30px;
  border-top:1px solid #23313C}
.pie-rejilla{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);
  padding-bottom:34px}
@media(max-width:760px){.pie-rejilla{grid-template-columns:1fr;gap:26px}}
.sitio-pie h4{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--salvia);font-weight:600;margin-bottom:14px}
.sitio-pie a{color:#B9C7D1;text-decoration:none}
.sitio-pie a:hover{color:#fff}
.sitio-pie ul{list-style:none;display:grid;gap:9px}
/* Con el lema al lado, el logo va sin firma institucional: horizontal sin frase
   (420 px de mínimo) y, donde no entra, el nombre solo. */
.pie-marca img{width:420px;max-width:100%;height:auto;display:block}
@media(max-width:600px){.pie-marca img{width:200px}}
.pie-marca p{font-size:14px;color:#8DA0AD;margin-top:10px;max-width:34ch}
.pie-legal{padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12.5px;color:#8DA0AD}

/* ── accesibilidad ────────────────────────────────────────── */
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:16px;top:16px;z-index:100;background:#fff;color:var(--oliva);
  padding:10px 16px;border-radius:6px;box-shadow:var(--sombra-alta)}
:focus-visible{outline:2px solid var(--oliva);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ── portada principal ────────────────────────────────────── */
.hero{padding-block:clamp(46px,6.5vw,84px) clamp(38px,5vw,64px)}
.hero h1{max-width:30ch;text-wrap:balance}
.hero .entrada{margin-top:18px}
/* la figura completa a la derecha, como en la página 20 del dossier; 280 px es su
   mínimo, así que donde no entra al costado se retira y queda el nombre del encabezado */
.hero-cab{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:center}
.hero-figura{width:clamp(280px,29vw,340px);height:auto}
@media(max-width:900px){.hero-cab{grid-template-columns:1fr}.hero-figura{display:none}}

/* esquema: de dónde sale el dato, a dónde llega */
.esquema{margin-top:clamp(34px,5vw,54px);background:var(--gris);border:1px solid var(--linea-fuerte);
  border-radius:12px;padding:clamp(20px,3vw,30px);box-shadow:var(--sombra)}
.esquema-fila{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center}
.esquema-rot{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tenue);width:100%;margin-bottom:10px;text-align:center}
.ficha{border:1px solid var(--linea);background:var(--blanco);border-radius:6px;
  padding:9px 14px;font-family:var(--display);font-size:14px;font-weight:500;color:var(--texto)}
.ficha--sal{background:var(--oliva-tenue);border-color:var(--oliva-filo);color:var(--oliva)}
.esquema-baja{display:flex;align-items:center;gap:12px;margin-block:16px;color:var(--tenue)}
.esquema-baja::before,.esquema-baja::after{content:"";flex:1;height:1px;background:var(--linea-fuerte)}
.esquema-baja svg{width:18px;height:18px}
.esquema-nucleo{background:var(--oliva);color:#fff;border-radius:8px;padding:20px 22px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.esquema-nucleo b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:.01em}
.esquema-nucleo ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center}
.esquema-nucleo li{font-size:15px;color:var(--marfil);display:flex;align-items:center;gap:7px}
.esquema-nucleo li b{font-size:11px;font-weight:600;color:var(--arena);font-family:var(--ui)}

/* ── tarjeta mínima (rejilla de soluciones) ───────────────── */
.mini{background:var(--blanco);border:1px solid var(--linea);border-radius:8px;padding:16px 18px;
  text-decoration:none;display:block;transition:border-color .18s,box-shadow .18s}
.mini:hover{border-color:var(--oliva);box-shadow:var(--sombra)}
.mini b{display:block;font-family:var(--ui);font-size:16px;font-weight:600;color:var(--tinta)}
.mini span{display:block;font-size:13.5px;color:var(--tenue);margin-top:3px}

/* ── bloque de caso (banda oscura) ────────────────────────── */
.caso{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:860px){.caso{grid-template-columns:1fr;gap:30px}}
.caso-datos{display:grid;gap:0;border-top:1px solid #25333E}
.caso-datos div{padding:14px 0;border-bottom:1px solid #25333E;display:flex;gap:16px;
  justify-content:space-between;align-items:baseline}
.caso-datos dt{font-size:13px;color:#8DA0AD;font-family:var(--ui);font-weight:500}
.caso-datos dd{font-family:var(--ui);font-size:15px;font-weight:600;color:#F2F6F9;text-align:right}

/* ── antes / después ──────────────────────────────────────── */
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
@media(max-width:760px){.contraste{grid-template-columns:1fr}}
.contraste article{border:1px solid var(--linea);border-radius:var(--radio);padding:26px 24px;background:var(--blanco)}
.contraste article.antes{background:var(--gris)}
.contraste h3{margin-bottom:12px;display:flex;align-items:center;gap:10px}
.contraste h3 em{font-style:normal;font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);border:1px solid var(--linea-fuerte);
  padding:3px 8px;border-radius:4px}
.contraste article.despues h3 em{color:var(--oliva);border-color:var(--oliva-filo);background:var(--oliva-tenue)}
.contraste ul{list-style:none;display:grid;gap:10px;font-size:15px}
.contraste li{padding-left:18px;position:relative}
.contraste li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1.5px;background:var(--linea-fuerte)}
.contraste article.despues li::before{background:var(--oliva);width:8px}

/* ── pasos numerados ──────────────────────────────────────── */
.pasos{list-style:none;counter-reset:p;display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.pasos li{counter-increment:p;background:var(--blanco);padding:20px 24px;
  display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:start}
.pasos li::before{content:counter(p,decimal-leading-zero);font-family:var(--ui);font-weight:600;
  font-size:14px;color:var(--oliva);background:var(--oliva-tenue);border-radius:6px;
  width:42px;height:42px;display:grid;place-items:center}
.pasos b{display:block;font-family:var(--display);font-size:16.5px;color:var(--tinta);font-weight:600}
.pasos p{font-size:15px;margin-top:4px}

/* ── ficha de solución ────────────────────────────────────── */
.solucion{border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco);
  padding:clamp(22px,2.6vw,30px);display:grid;grid-template-columns:1fr;gap:14px;scroll-margin-top:96px}
.solucion-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.solucion-cab h3{font-size:23px}
.solucion-cab .dominio{font-family:var(--ui);font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.solucion .frase{font-family:var(--display);font-size:17.5px;font-weight:500;color:var(--tinta);
  line-height:1.4;letter-spacing:-.01em;max-width:52ch}
.solucion .enlace{margin-top:2px;justify-self:start}
/* dos fichas por fila entran justas: con tarjetas de solución la rejilla de
   dos columnas se abre antes que la de tarjetas comunes */
@media(max-width:880px){.rejilla.rej-2:has(.solucion){grid-template-columns:1fr}}

/* ── las tecnologías que esa plataforma ya tiene construidas ──
   Van en la ficha, no en una lista aparte: lo que distingue a una solución de
   la de al lado es con qué está hecha. La primera, en oliva, es la que la
   caracteriza. ── */
.tecnos{display:flex;flex-wrap:wrap;gap:7px}
.tecnos .ficha{font-size:12.5px;padding:5px 10px;border-radius:5px;line-height:1.35}

/* ── datos de contacto ─────────────────────────────────────── */

/* ── ajustes de pantalla chica ────────────────────────────── */
.sitio-nav menu{scrollbar-width:none}
.sitio-nav menu::-webkit-scrollbar{display:none}
@media(max-width:700px){
  .hero h1 br{display:none}
}
@media(max-width:560px){
  .rotulo{gap:10px}
  .rotulo span{font-size:10.5px;letter-spacing:.12em}
  .esquema{padding:18px 16px}
  .pasos li{grid-template-columns:34px 1fr;gap:14px;padding:18px}
  .pasos li::before{width:34px;height:34px;font-size:12.5px}
}


/* ── panel de entregables ─────────────────────────────────── */
@media(min-width:821px){.cierre--par{grid-template-columns:1fr 1fr}}
.panel{background:var(--gris);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(22px,2.6vw,28px)}
.panel .chequeo li{font-size:15.5px}
.panel-pie{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea-fuerte);
  font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--tinta)}

/* botón cuadrado, solo ícono: el significado va en aria-label y title */
.btn--cuadro{width:54px;height:54px;padding:0;border-radius:8px}
.btn--cuadro svg{width:22px;height:22px}

/* ── carrusel de pantallas ─────────────────────────────────
   Sin JavaScript queda como una tira que se desplaza de a una con el dedo
   o con el teclado; el script solo agrega flechas, puntos y el ciclo. ── */
.galeria{position:relative;margin-top:clamp(26px,3.5vw,38px)}
.galeria-pista{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.galeria-pista::-webkit-scrollbar{display:none}
.galeria-pista:focus-visible{outline:2px solid var(--oliva);outline-offset:6px;border-radius:4px}
.toma{flex:0 0 100%;scroll-snap-align:center;display:grid;grid-template-columns:1.7fr 1fr;
  gap:clamp(20px,3vw,34px);align-items:center}
/* Las capturas panorámicas se quedan con todo el ancho: a media fila, una
   grilla de 1700 px de origen queda ilegible. El texto pasa abajo. */
.toma--ancha{grid-template-columns:1fr;gap:18px;align-items:start}
.toma--ancha figcaption{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(16px,2.5vw,30px);align-items:baseline}
@media(max-width:760px){.toma--ancha figcaption{grid-template-columns:1fr;gap:6px}}
.toma-marco{aspect-ratio:var(--rel,16/10);max-height:470px;border-radius:10px;overflow:hidden;
  background:#FBFAF7;border:1px solid var(--linea);box-shadow:var(--sombra);display:grid;
  place-items:center;text-align:center;padding:10px}
.toma-marco:has(em){border-style:dashed;border-color:var(--linea-fuerte);box-shadow:none;padding:24px}
.toma-marco img{width:100%;height:100%;object-fit:contain;display:block}
.toma-marco em{font-style:normal;font-family:var(--ui);font-size:13px;font-weight:600;
  color:var(--tenue);letter-spacing:.04em;display:block}
.toma-marco em b{display:block;font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--linea-fuerte);margin-top:8px}
.toma h4{font-family:var(--display);font-size:clamp(19px,2vw,24px);font-weight:500;color:var(--tinta)}
.toma h4 span{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--oliva);margin-bottom:6px}
.toma p{font-size:15px;margin-top:8px;max-width:none}

.galeria-guia{margin-top:16px;font-size:13.5px;color:var(--tenue)}
.galeria-nota{margin-top:18px;font-size:13px;color:var(--tenue);max-width:70ch}
.galeria-mandos{display:flex;align-items:center;gap:16px;margin-top:22px}
.galeria-flecha{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--linea-fuerte);
  background:var(--blanco);color:var(--oliva);cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,background .2s}
.galeria-flecha:hover{border-color:var(--oliva);background:var(--oliva-tenue)}
.galeria-flecha svg{width:17px;height:17px}
.galeria-puntos{display:flex;gap:9px;margin-left:4px}
.galeria-punto{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--linea-fuerte);transition:background .25s,transform .25s}
.galeria-punto:hover{background:var(--tenue)}
.galeria-punto[aria-current="true"]{background:var(--oliva);transform:scale(1.3)}
.galeria-cuenta{margin-left:auto;font-size:13.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .toma{grid-template-columns:1fr;gap:16px}
  .galeria-pista{gap:16px}
}
@media(prefers-reduced-motion:reduce){.galeria-punto{transition:none}}

/* el área que actúa, destacada dentro de la línea del circuito */
.solucion .chequeo li b{font-family:var(--ui);font-weight:600;color:var(--tinta)}
/* el cierre de la ficha: lo que gana quien no ejecuta la tarea */
.solucion .palanca{font-size:15px;color:var(--texto);border-top:1px solid var(--linea);
  padding-top:14px;max-width:70ch}
.solucion .palanca strong{color:var(--tinta);font-weight:600}

/* ── el pie: la marca y tres datos ────────────────────────── */
.pie-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px 28px;align-content:start}
.pie-datos div:last-child{grid-column:1 / -1}
.pie-datos b{display:block;font-family:var(--ui);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--arena);margin-bottom:5px}
.pie-datos a,.pie-datos span{font-size:15.5px;color:#E7EDF1;text-decoration:none}
.pie-datos a:hover{color:#fff;text-decoration:underline}
@media(max-width:760px){.pie-rejilla{grid-template-columns:1fr;gap:34px}}

/* ── una sección por solución ─────────────────────────────── */
.sol h2{font-size:clamp(26px,3vw,38px);margin-bottom:12px}
.sol-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,60px);align-items:start}
.sol .frase{font-family:var(--display);font-size:clamp(18px,1.9vw,22px);font-weight:400;
  color:var(--tinta);line-height:1.4;max-width:34ch;margin-top:18px}
.sol .enlace{margin-top:20px}
.sol .chequeo li{font-size:16px}
.sol .palanca{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea);
  font-size:15.5px;color:var(--texto)}
.sol .palanca strong{color:var(--tinta);font-weight:600}
@media(max-width:820px){.sol-grid{grid-template-columns:1fr;gap:22px}.sol .frase{max-width:none}}

/* ── formulario del diagnóstico ───────────────────────────── */
.form{display:grid;gap:16px;margin-top:26px;max-width:52ch}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font-family:var(--ui);font-size:13px;font-weight:600;
  letter-spacing:.02em;color:var(--tinta)}
.form label i{font-style:normal;font-weight:400;color:var(--tenue)}
.form input,.form textarea{font-family:var(--cuerpo);font-size:15.5px;color:var(--tinta);
  background:var(--blanco);border:1px solid var(--linea-fuerte);border-radius:8px;
  padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
.form input::placeholder,.form textarea::placeholder{color:#9AA7AE}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--oliva);
  box-shadow:0 0 0 3px var(--oliva-tenue)}
.form textarea{resize:vertical;min-height:96px}
.form button{justify-self:start;margin-top:2px}
.form-aviso{font-size:14.5px;margin:0}
.form-aviso--bien{color:var(--oliva)}
.form-aviso--mal{color:#A3402F}
.form-legal{font-size:13px;color:var(--tenue);margin:0}
.form-legal a{color:var(--oliva)}
@media(max-width:620px){.form-fila{grid-template-columns:1fr}}

/* tarjetas dentro de una banda oscura */
.tarjeta--oscura{background:#1B3D4E;border-color:#2C5567}
.tarjeta--oscura h3{color:#F2F6F8}
.tarjeta--oscura .chequeo li{color:#D6E2E9;font-size:15px}
.tarjeta--oscura .chequeo li b{color:#fff}
.tarjeta--oscura .chequeo li::before{background:#2C5567;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8CBB5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.banda--oscura .rotulo::after{background:#2C5567}
/* sobre Azul, ni el oro (3.2:1) ni el oliva (1.9:1) se leen en texto chico: el
   acento cálido que sí se lee es Arena (8.7:1), y Salvia para el número (4.8:1). */
.banda--oscura .rotulo span{color:var(--arena)}
.banda--oscura .rotulo b{color:var(--salvia)}


/* ── epígrafe ───────────────────────────────────────────────
   La única voz ajena del sitio y el único lugar donde aparece Gentium. Va en la
   bisagra entre dos secciones, nunca al lado de un botón ni de un precio:
   explica desde dónde trabajamos, no vende. La figura de la marca queda de
   fondo. ── */
.epigrafe{position:relative;overflow:hidden;background:var(--oliva);color:var(--marfil);
  padding-block:clamp(58px,7.5vw,108px)}
.epigrafe::before{content:"";position:absolute;right:-3%;top:50%;width:min(60vw,740px);
  aspect-ratio:340/174;transform:translateY(-50%);pointer-events:none;opacity:.09;
  background:url(img/kat-onar-isotipo-blanco.svg) center/contain no-repeat}
.epigrafe figure{position:relative;max-width:860px}
.epigrafe blockquote{position:relative;padding-top:clamp(46px,5.4vw,70px)}
.epigrafe blockquote::before{content:"\201C";position:absolute;left:-.05em;top:0;
  font-family:var(--cita);font-size:clamp(112px,13vw,172px);line-height:.74;color:var(--arena)}
.epigrafe blockquote p{font-family:var(--cita);font-style:italic;font-weight:400;max-width:none;
  font-size:clamp(27px,3.7vw,46px);line-height:1.24;color:#fff;text-wrap:balance}
.epigrafe figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin-top:clamp(24px,3vw,34px);padding-top:18px;border-top:1px solid rgba(246,243,236,.3)}
.epigrafe figcaption b{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#fff}
.epigrafe figcaption span{font-size:14.5px;color:var(--marfil)}
.epigrafe .enlace{margin-left:auto;color:var(--marfil)}
.epigrafe .enlace:hover{border-color:var(--marfil)}
@media(max-width:640px){.epigrafe .enlace{margin-left:0;width:100%;margin-top:8px}}

/* la misma cita, chica, al lado de la nota que explica por qué se cita */
.cita{border-left:3px solid var(--oliva);padding:6px 0 6px clamp(18px,2.4vw,28px)}
.cita blockquote p{font-family:var(--cita);font-style:italic;font-size:clamp(22px,2.4vw,28px);
  line-height:1.32;color:var(--tinta);max-width:26ch}
.cita figcaption{margin-top:16px;font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tenue)}

/* ── página de texto corrido (privacidad) ─────────────────── */
.prosa{max-width:70ch}
.prosa h2{font-size:clamp(20px,2.1vw,25px);margin-top:clamp(30px,3.6vw,44px)}
.prosa h2:first-child{margin-top:0}
.prosa p,.prosa ul{margin-top:12px}
.prosa ul{padding-left:20px;display:grid;gap:8px}
.prosa a{color:var(--oliva)}
.prosa .legal{font-size:14.5px;color:var(--tenue);border-left:3px solid var(--linea-fuerte);
  padding-left:16px}