/* CATÁLOGO · cursos.html — prefijo ct-. La escribe `_catalogo5.py` (2-oct-2026).
   Hereda «LA DIRECCIÓN NUEVA» de la home (`_home5.py`): grafito con luz amplia; gris mineral donde la
   /cursos/ tenía papel; petróleo sólo en el bloque de industria (los cursos); el rojo, sólo para acciones
   y señales. Filetes de 1 px, esquinas rectas y el chaflán del formulario de la casa. El grano fino es el
   de la casa (textura.css, sobre toda la página): aquí no se suma otro. Nada alcanza la cabecera, `body`
   ni `:root`: las fichas de color viven en `.ct-casa`.
   Segunda vuelta (Héctor, 2-oct-2026): bloques más prietos, el H1 en dos tiempos de tamaño parecido, las
   cifras pegadas a su frase, el carrusel que rueda solo, la gráfica de barras del diagnóstico y las
   preguntas y el cierre al centro. */

.ct-casa{
  --fi-grafito:#0F1113; --fi-grafito-2:#181B1E; --fi-clientes:#23272A;
  --fi-mineral:#BBC1C2; --fi-mineral-blog:#C3C8C9; --fi-mineral-claro:#D3D6D6;
  --fi-petroleo:#0D191C; --fi-petroleo-luz:#1C3439;
  --fi-tinta-m:#121416; --fi-tinta-m2:#33383C; --fi-filete-m:rgba(18,20,22,.2);
  --fi-filete-o:rgba(237,235,231,.13);
  /* Lo que cambia de un bloque a otro: cada .ct-sup pone las suyas. */
  --ct-fondo:var(--fi-grafito); --ct-tinta:var(--tinta-clara); --ct-tinta-2:var(--tinta-clara-2);
  --ct-filete:var(--fi-filete-o); --ct-foco:#EE8177; --ct-senal:var(--rojo-azul);
  background-color:var(--fi-grafito);color:var(--tinta-clara)}

.ct-sup{position:relative;isolation:isolate;overflow:hidden;overflow:clip;scroll-margin-top:88px;
  padding-block:clamp(64px,7.4vw,112px);background-color:var(--ct-fondo);color:var(--ct-tinta)}
/* La luz de cada bloque va en su capa; fuera el diente de textura.css si alguien lo hereda. */
.ct-sup::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:none;mask-image:none}
.ct-sup ::selection{background:#A91716;color:#fff}
.ct-sup :focus-visible{outline:2px solid var(--ct-foco);outline-offset:4px}
.ct-casa h1,.ct-casa h2,.ct-casa h3{margin:0;color:inherit}
.ct-casa p{text-wrap:pretty}
.ct-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Titulares y entradillas ───────────────────────────────────────────── */
.ct-h2{font-size:clamp(32px,3.9vw,58px);line-height:.96;letter-spacing:-.032em;max-width:20ch;text-wrap:balance}
.ct-h2--largo{font-size:clamp(28px,3.05vw,46px);line-height:1;max-width:27ch}
.ct-lead{margin:22px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.58;color:var(--ct-tinta-2);max-width:62ch}
.ct-lead strong{color:var(--ct-tinta);font-weight:650}

/* ── Acciones: el botón rojo lleva el chaflán de la casa; el de línea, el filete ─────── */
.ct-acc{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.ct-boton{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:12px 28px 12px 24px;border:0;background:var(--rojo);color:#fff;
  font:600 15px/1.15 var(--palo);letter-spacing:.005em;text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.ct-boton::before{content:"";flex:none;width:6px;height:6px;background:rgba(255,255,255,.82)}
.ct-boton::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;pointer-events:none;
  background:linear-gradient(135deg,transparent 50%,var(--ct-fondo) 50%)}
.ct-boton:hover{background-color:#BF1E1C}
/* 7-oct-2026 · Héctor: «botones rotos» («Ver menos sectores», «Contar qué vendemos»). Es el mismo fallo
   que vao.css arregló el 2-oct en .boton--fantasma: un filete de `box-shadow:inset 0 0 0 1px` lo pierde
   Safari por uno o dos lados con zoom o en pantalla 1x. Todos los filetes de 1 px de esta hoja son ya
   `border` (con box-sizing:border-box nada cambia de tamaño), y empaquetar-cursos-web.py PARA si vuelve
   a aparecer uno. */
.ct-boton--linea{background:transparent;color:var(--ct-tinta);border:1px solid currentColor}
.ct-boton--linea::before,.ct-boton--linea::after{display:none}
.ct-boton--linea:hover{background:var(--ct-tinta);color:var(--ct-fondo);border-color:var(--ct-tinta)}
.ct-enlace{display:inline-flex;align-items:center;gap:10px;color:var(--ct-tinta);font:600 15.5px/1.2 var(--palo);
  text-decoration:none}
.ct-enlace:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.ct-flecha{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:square;transition:transform .4s var(--c-out)}
.ct-enlace:hover .ct-flecha{transform:translateX(4px)}
.ct-ico{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* El chaflán de los paneles: el pico se RECORTA (clip-path) y, si el panel lleva filete, el corte también
   lo lleva. 7-oct-2026: antes el pico se pintaba con --ct-fondo, un gris plano, y sobre el degradado del
   bloque se veía como una esquina clara rota. El recorte sólo quita 18 px de esquina y todo panel tiene
   más relleno que eso: el foco del teclado de lo de dentro no se corta. */
.ct-chaflan{position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.ct-chaflan::after{content:"";position:absolute;right:-1px;bottom:-1px;width:18px;height:18px;pointer-events:none;
  background:linear-gradient(135deg,transparent calc(50% - .7px),var(--ct-ch,transparent) calc(50% - .7px),
    var(--ct-ch,transparent) calc(50% + .7px),transparent calc(50% + .7px))}

.ct-formatos{list-style:none;margin:30px 0 0;padding:16px 0 0;border-top:1px solid var(--ct-filete);
  display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13.5px;line-height:1.4;color:var(--ct-tinta-2)}
.ct-formatos li{position:relative;padding-left:14px}
.ct-formatos li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;background:currentColor;opacity:.75}

/* ══ 1 · PORTADA · grafito ══════════════════════════════════════════════ */
.ct-port{padding-top:calc(var(--cab-alto) + clamp(32px,4.4vw,72px));padding-bottom:clamp(26px,3vw,40px)}
.ct-port::before{background:
  radial-gradient(48% 360px at 97% 0,rgba(169,23,22,.15),transparent 78%),
  radial-gradient(70% 60% at 72% 8%,rgba(237,235,231,.05),transparent 72%),
  linear-gradient(180deg,rgba(0,0,0,.2),transparent 30%,transparent 78%,rgba(0,0,0,.18))}
.ct-port__g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center}
.ct-port h1{max-width:13ch;font-weight:800;font-stretch:104%;font-size:clamp(38px,4.6vw,76px);line-height:.93;
  letter-spacing:-.025em}
.ct-pt{font-style:normal;color:var(--rojo-azul)}
/* Vuelta 5 (Héctor, 6-oct-2026): «Cursos de venta consultiva para toda la industria.» Un solo titular, con
   la letra del de la home (800, 104 %, el punto en rojo), un punto por debajo de su cuerpo porque aquí
   lo acompañan dos párrafos. Debajo, la entrada en dos escalones: la frase de dolor algo mayor y el
   párrafo de la casa al cuerpo de la entradilla de la home. */
.ct-port__p{margin:18px 0 0;font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;color:var(--tinta-clara-2);max-width:56ch}
.ct-port__p:first-of-type{margin-top:clamp(22px,2.3vw,32px);font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--tinta-clara);max-width:44ch}
.ct-port__p strong{color:var(--tinta-clara);font-weight:650}
.ct-port .ct-acc{margin-top:clamp(26px,2.6vw,36px)}

/* El muro (05-oct-2026): la pared 3D con las fotos de todos los cursos publicados (heroes-3d/25-muro-cursos,
   copia del boceto 24). En dos columnas va de fondo hasta las cifras, detrás del texto, con velo a la
   izquierda: el texto siempre sobre penumbra. En una columna va en su banda, entre los botones y las cifras.
   El grano es el de la casa (textura.css): aquí no se suma otro. */
.ct-muro{position:absolute;z-index:-1;left:0;right:0;top:0;height:min(100%,100svh);overflow:hidden;
  background:var(--fi-grafito);pointer-events:none}
.ct-muro__foto img,.ct-muro__3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.ct-muro__foto img{object-fit:cover;object-position:right center}
.ct-muro__3d{opacity:0;transition:opacity .6s ease}
.ct-muro--vivo .ct-muro__3d{opacity:1}
.ct-muro--sin3d .ct-muro__3d{display:none}
.ct-muro__velo{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(15,17,19,.92),rgba(15,17,19,.58) 48%,transparent) 0 0/100% clamp(110px,17vh,170px) no-repeat,
  linear-gradient(180deg,transparent 70%,rgba(15,17,19,.82) 92%,var(--fi-grafito)),
  linear-gradient(90deg,rgba(15,17,19,.97),rgba(15,17,19,.93) 46%,rgba(15,17,19,.76) 54%,rgba(15,17,19,.32) 61%,transparent 69%),
  radial-gradient(130% 100% at 72% 50%,transparent 55%,rgba(0,0,0,.5))}
.ct-muro--captura .ct-muro__3d{transition:none}

.ct-franja{display:flex;align-items:flex-end;justify-content:flex-start;flex-wrap:wrap;gap:22px clamp(36px,4.4vw,72px);
  margin-top:clamp(30px,3.4vw,52px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--ct-filete)}
.ct-franja__k{margin:0;font-size:15px;line-height:1.45;color:var(--tinta-clara-2);max-width:34ch}
.ct-cifras{display:flex;margin:0;padding:0;list-style:none}
.ct-cifras li{display:flex;flex-direction:column;gap:8px;padding:0 clamp(18px,2.4vw,40px);border-left:1px solid var(--ct-filete)}
.ct-cifras li:first-child{padding-left:0;border-left:0}
.ct-cifras b{font:800 clamp(22px,2vw,31px)/1 var(--palo);font-stretch:104%;letter-spacing:-.02em;color:var(--tinta-clara);
  white-space:nowrap}
.ct-cifras span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;
  color:var(--tinta-clara-2);max-width:26ch}

/* La cinta de marcas: la de la home, regla por regla (Héctor, 2-oct-2026: «igual que en el hero»). */
.ct-marcas{display:flex;align-items:center;flex-wrap:wrap;gap:6px clamp(16px,2.2vw,34px);
  margin-top:clamp(18px,2.4vw,28px);padding-top:clamp(12px,1.6vw,18px);border-top:1px solid var(--ct-filete)}
.ct-marcas__k{flex:none;margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-clara-2)}
.ct-marcas__v{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ct-marcas__p{display:flex;width:max-content;animation:ct-cinta 80s linear infinite}
.ct-marcas__m{display:flex;align-items:center}
.ct-marcas__v:hover .ct-marcas__p{animation-play-state:paused}
.ct-marca{flex:none;display:flex;align-items:center;justify-content:center;height:44px;padding-inline:clamp(20px,2vw,32px)}
.ct-marca img{width:auto;max-width:none;filter:brightness(0) invert(1);opacity:.66;transition:opacity .35s ease}
.ct-marca--blanca img{filter:none}
.ct-marcas__v:hover .ct-marca img{opacity:.28}
.ct-marcas__v:hover .ct-marca:hover img{opacity:1}
.ct-marcas__pie{flex:1 1 100%;max-width:none;margin:2px 0 0;font-size:12px;line-height:1.4;color:rgba(174,178,183,.78)}
@keyframes ct-cinta{to{transform:translate3d(-50%,0,0)}}

/* ══ 2 · SECTORES · mineral: el índice ═══════════════════════════════════ */
.ct-sec{--ct-fondo:#CACFD0;--ct-tinta:var(--fi-tinta-m);--ct-tinta-2:var(--fi-tinta-m2);--ct-filete:var(--fi-filete-m);
  --ct-foco:var(--rojo-papel);--ct-senal:var(--rojo-papel)}
.ct-sec::before{background:
  radial-gradient(80% 95% at 6% -12%,rgba(255,255,255,.26),transparent 58%),
  radial-gradient(60% 80% at 100% 110%,rgba(40,46,50,.12),transparent 70%),
  linear-gradient(176deg,rgba(255,255,255,.06),rgba(0,0,0,.05))}
.ct-sec .ct-h2{max-width:24ch}
.ct-sec__l{list-style:none;margin:clamp(36px,4vw,60px) 0 0;padding:0;border-top:1px solid rgba(18,20,22,.55)}
.ct-sf{position:relative;display:grid;grid-template-columns:24px minmax(0,5fr) minmax(0,5fr) minmax(140px,2fr);
  gap:0 clamp(16px,2vw,34px);align-items:start;margin-inline:-14px;padding:clamp(22px,2.2vw,30px) 14px;
  min-height:var(--ct-sf-h,0);border-bottom:1px solid var(--ct-filete);transition:background-color .3s ease}
.ct-sf__ico{color:var(--ct-tinta-2)}
.ct-sf__ico .ct-ico{width:22px;height:22px;margin-top:5px}
/* Todas las filas miden lo mismo (el guion pone --ct-sf-h, la de la más alta). Un sector sin icono
   dibujado (ICONOS_SECTOR en _catalogo5.py) sale con un cuadro, y la construcción avisa. */
.ct-sf__marca{display:block;width:7px;height:7px;margin:12px 0 0 7px;background:currentColor;opacity:.6}
.ct-sf__t{font-size:clamp(22px,2vw,30px);line-height:1.04;letter-spacing:-.02em}
.ct-sf__t a{color:inherit;text-decoration:none}
.ct-sf__t a::after{content:"";position:absolute;inset:0}
.ct-sf__t a:focus-visible{outline:0}
.ct-sf:focus-within{box-shadow:inset 0 0 0 2px var(--ct-foco)}
.ct-sf__g{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--ct-tinta-2);max-width:46ch}
.ct-sf__in{list-style:none;margin:3px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ct-sf__in li{padding:4px 8px 5px;font-size:13px;line-height:1.25;color:var(--ct-tinta);border:1px solid rgba(18,20,22,.24)}
/* «+N cursos más»: la etiqueta que dice que hay más, en el registro de los datos (mono) y rellena. */
.ct-sf__in .ct-sf__resto{font:600 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#F2F1EE;
  background:var(--fi-tinta-m,#25292C);border-color:var(--fi-tinta-m,#25292C)}
.ct-sf__pie{display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right}
.ct-sf__n{margin:0;display:flex;align-items:baseline;gap:8px}
.ct-sf__n b{font:830 clamp(34px,3vw,46px)/.9 var(--palo);font-stretch:104%;letter-spacing:-.035em}
.ct-sf__n span{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ct-tinta-2)}
.ct-sf__ver{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.ct-sf:hover{background-color:rgba(255,255,255,.22)}
.ct-sf:hover .ct-sf__t a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.ct-sf:hover .ct-flecha{transform:translateX(4px);color:var(--rojo-papel)}

/* Los sectores nuevos, plegados detrás de un botón de línea (<details>: sin guion, y Ctrl+F los abre). */
.ct-sec__mas{margin-top:clamp(20px,2.2vw,30px)}
.ct-sec__mas>summary{list-style:none}
.ct-sec__mas>summary::-webkit-details-marker{display:none}
.ct-sec__mas>summary .ct-mas{width:18px;height:18px}
.ct-sec__mas[open]>summary .ct-mas{transform:rotate(45deg)}
.ct-sec__b,.ct-sec__mas[open] .ct-sec__a{display:none}
.ct-sec__mas[open] .ct-sec__b{display:inline}
.ct-sec__l--mas{margin-top:clamp(20px,2.2vw,30px)}

.ct-falta{--ct-ch:rgba(18,20,22,.2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 48px;
  margin-top:clamp(32px,3.4vw,48px);padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px);
  background:rgba(18,20,22,.06);border:1px solid rgba(18,20,22,.2)}
.ct-falta p{margin:0;font-size:16px;line-height:1.56;color:var(--ct-tinta-2);max-width:74ch}
.ct-falta strong{color:var(--ct-tinta);font-weight:700}

/* ══ 3 · LOS CURSOS · petróleo: el bloque de industria ═══════════════════ */
.ct-des{--ct-fondo:var(--fi-petroleo);--ct-tinta:var(--tinta-clara);--ct-tinta-2:#AFC0C2;
  --ct-filete:rgba(175,210,214,.16);--ct-foco:#8FD0D6}
.ct-des::before{background:
  radial-gradient(62% 72% at 22% 62%,rgba(52,98,106,.22),transparent 70%),
  radial-gradient(50% 60% at 96% 0%,rgba(52,98,106,.12),transparent 70%),
  linear-gradient(180deg,rgba(0,0,0,.3),transparent 20%,transparent 80%,rgba(0,0,0,.28))}
.ct-des__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 56px}
.ct-des__nav{display:flex;gap:8px;flex:none}
.ct-flechas{display:grid;place-items:center;width:48px;height:48px;padding:0;background:transparent;
  color:var(--ct-tinta);border:1px solid rgba(217,226,227,.42);cursor:pointer;
  transition:background-color .25s ease,color .25s ease,opacity .25s ease}
.ct-flechas .ct-ico{width:20px;height:20px}
.ct-flechas:hover:not(:disabled){background:var(--ct-tinta);color:var(--fi-petroleo)}
.ct-flechas:disabled{opacity:.32;cursor:default}
.ct-pista{--ct-borde:max(var(--margen),calc((100vw - var(--env)) / 2 + var(--margen)));
  display:grid;justify-content:start;margin:clamp(32px,3.6vw,52px) 0 0;padding:0 var(--ct-borde) 6px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ct-borde);
  overscroll-behavior-x:contain;scrollbar-width:none}
.ct-pista::-webkit-scrollbar{display:none}
.ct-pista:focus-visible{outline-offset:-2px}
.ct-pista__l{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(236px,20.5vw,296px);gap:clamp(16px,1.6vw,26px);width:max-content}
/* Mientras rueda solo, la lista se desliza (transform) y la pista no se imanta; al tocarla se para y lo
   rodado pasa a ser scroll de verdad (catalogo5.js). */
.ct-pista.ct-rueda{scroll-snap-type:none}
.ct-rueda .ct-pista__l{will-change:transform}
.ct-tj{min-width:0;scroll-snap-align:start}
.ct-tj__a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.ct-tj__img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#0A1416}
.ct-tj__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04);
  transition:transform .8s var(--c-out),filter .5s ease}
.ct-tj__img::after{content:"";position:absolute;inset:0;border:1px solid rgba(175,210,214,.1);pointer-events:none}
.ct-tj__s{margin-top:16px;font:500 10.5px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9DB2B4}
.ct-tj__n{margin-top:8px;font:720 17px/1.25 var(--palo);letter-spacing:-.008em;color:#E4ECED}
.ct-tj__v{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;
  color:var(--ct-tinta-2)}
.ct-tj__a:hover .ct-tj__img img,.ct-tj__a:focus-visible .ct-tj__img img{transform:scale(1.04);filter:none}
.ct-tj__a:hover .ct-tj__n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ct-tj__a:hover .ct-tj__v{color:#fff}
.ct-tj__a:hover .ct-flecha{transform:translateX(4px)}
.ct-des__barra{position:relative;height:1px;margin-top:clamp(24px,2.6vw,36px);background:var(--ct-filete)}
.ct-des__barra i{position:absolute;left:0;top:-1px;width:20%;height:3px;background:var(--rojo-azul)}
.ct-des__pie{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 48px;margin-top:clamp(24px,2.6vw,36px)}
.ct-des__pie p{margin:0;font-size:16px;line-height:1.5;color:var(--ct-tinta-2);max-width:58ch}

/* ══ 4 · DÓNDE SE ATASCA · grafito: el instrumento ═══════════════════════ */
.ct-dia{--ct-fondo:var(--fi-grafito-2)}
.ct-dia::before{background:
  radial-gradient(44% 280px at 97% 0,rgba(169,23,22,.11),transparent 78%),
  radial-gradient(70% 58% at 26% 0,rgba(237,235,231,.045),transparent 72%),
  linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%)}
.ct-dia__cab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(32px,5vw,96px);align-items:end}
.ct-dia__cab .ct-lead{margin:0}
.ct-consola{--ct-ch:var(--ct-filete);margin-top:clamp(36px,4vw,60px);padding:clamp(22px,2.8vw,44px);
  border:1px solid var(--ct-filete);background:rgba(10,11,12,.34)}
/* La gráfica: seis barras sobre tres niveles. Cada respuesta levanta la suya; al final la más baja se
   queda en rojo y las demás se apagan. */
.ct-ins{--ct-ins-h:176px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(14px,1.6vw,24px);
  padding-top:26px}
.ct-ins__ejes{position:relative;list-style:none;margin:0;padding:0;min-width:58px;height:var(--ct-ins-h)}
.ct-ins__eje{position:absolute;right:0;transform:translateY(-50%);font:500 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-clara-2)}
.ct-ins__eje[data-n="2"]{top:0}
.ct-ins__eje[data-n="1"]{top:33.333%}
.ct-ins__eje[data-n="0"]{top:66.667%}
.ct-ins__l{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0 clamp(8px,1.4vw,22px)}
.ct-ins__l::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--ct-ins-h);pointer-events:none;
  background:
    linear-gradient(var(--ct-filete),var(--ct-filete)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--ct-filete),var(--ct-filete)) 0 33.333%/100% 1px no-repeat,
    linear-gradient(var(--ct-filete),var(--ct-filete)) 0 66.667%/100% 1px no-repeat,
    linear-gradient(rgba(237,235,231,.42),rgba(237,235,231,.42)) 0 100%/100% 1px no-repeat}
.ct-ins__e{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.ct-ins__c{position:relative;display:block;height:var(--ct-ins-h)}
.ct-ins__c::before{content:"";position:absolute;left:16%;right:16%;top:0;bottom:0;background:rgba(237,235,231,.028);
  transition:box-shadow .3s ease,background-color .3s ease}
.ct-ins__b{position:absolute;left:16%;right:16%;bottom:0;height:100%;transform-origin:50% 100%;transform:scaleY(0);
  background:var(--tinta-clara);transition:transform .6s var(--c-out),background-color .35s ease}
.ct-ins__e[data-n="2"] .ct-ins__b{transform:scaleY(1);background:var(--tinta-clara)}
.ct-ins__e[data-n="1"] .ct-ins__b{transform:scaleY(.6667);background:#8F959B}
.ct-ins__e[data-n="0"] .ct-ins__b{transform:scaleY(.3333);background:var(--rojo-azul)}
.ct-ins__v{position:absolute;left:0;right:0;bottom:calc(var(--ct-ins-h) * var(--f,0) + 8px);text-align:center;
  font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-clara);
  opacity:0;transition:opacity .3s ease .25s,bottom .6s var(--c-out)}
.ct-ins__v span{display:none}
.ct-ins__e[data-n="2"] .ct-ins__v{--f:1;opacity:1}
.ct-ins__e[data-n="1"] .ct-ins__v{--f:.6667;opacity:1}
.ct-ins__e[data-n="0"] .ct-ins__v{--f:.3333;opacity:1}
.ct-ins__e[data-n="2"] [data-v="2"],.ct-ins__e[data-n="1"] [data-v="1"],.ct-ins__e[data-n="0"] [data-v="0"]{display:inline}
.ct-ins__t{display:flex;gap:8px;align-items:baseline;justify-content:center;overflow:hidden;
  font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:rgba(174,178,183,.72);transition:color .3s ease}
.ct-ins__t em{font-style:normal;color:rgba(174,178,183,.5)}
.ct-ins__t span{overflow:hidden;text-overflow:ellipsis}
.ct-ins__e.ct-aqui .ct-ins__t{color:var(--tinta-clara)}
.ct-ins__e.ct-aqui .ct-ins__c::before{background:rgba(237,235,231,.06);border:1px solid rgba(237,235,231,.42)}
.ct-ins--fin .ct-ins__e:not(.ct-flojo) .ct-ins__b{background:#4A5055}
.ct-ins--fin .ct-ins__e:not(.ct-flojo) .ct-ins__v{color:var(--tinta-clara-2)}
.ct-ins__e.ct-flojo .ct-ins__b{background:var(--rojo-azul)}
.ct-ins__e.ct-flojo .ct-ins__t,.ct-ins__e.ct-flojo .ct-ins__t em,.ct-ins__e.ct-flojo .ct-ins__v{color:var(--rojo-azul)}
.ct-ins__e.ct-flojo .ct-ins__c::before{border:1px solid var(--rojo-azul)}
.ct-dia__micro{min-height:1.4em;margin:18px 0 0;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-clara-2);opacity:0;transition:opacity .3s ease}
.ct-dia__micro.ct-on{opacity:1}
.ct-escena{position:relative;min-height:340px;margin-top:clamp(18px,2vw,26px);padding-top:clamp(22px,2.4vw,32px);
  border-top:1px solid var(--ct-filete)}
.ct-paso[hidden],.ct-ver[hidden]{display:none}
.ct-js .ct-paso,.ct-js .ct-ver{animation:ct-entra .42s var(--c-out) both}
@keyframes ct-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ct-paso__meta{display:flex;align-items:center;gap:14px;margin:0 0 18px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-clara-2)}
.ct-paso__barra{position:relative;width:120px;height:1px;background:var(--ct-filete)}
.ct-paso__barra i{position:absolute;left:0;top:-1px;width:100%;height:3px;background:var(--rojo-azul);
  transform-origin:left;transform:scaleX(var(--p))}
.ct-paso__e{color:var(--rojo-azul)}
.ct-paso h3,.ct-ver h3{font-size:clamp(24px,2.4vw,36px);line-height:1.08;letter-spacing:-.022em;max-width:30ch}
.ct-ops{display:grid;gap:10px;max-width:880px;margin-top:24px}
.ct-op{display:grid;grid-template-columns:14px minmax(0,1fr) 28px;align-items:center;gap:16px;width:100%;min-height:58px;
  padding:12px 14px 12px 18px;border:1px solid var(--ct-filete);background:rgba(237,235,231,.025);
  color:var(--tinta-clara);font:500 16px/1.42 var(--palo);text-align:left;cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease}
.ct-op:hover{background:rgba(237,235,231,.055);border-color:rgba(237,235,231,.45)}
.ct-op__d{width:12px;height:12px;border:1px solid rgba(237,235,231,.55);transition:background-color .15s ease}
.ct-op[aria-pressed="true"] .ct-op__d{background:var(--rojo-azul);border-color:var(--rojo-azul)}
.ct-op__k{display:grid;place-items:center;width:26px;height:26px;font:500 11px/1 var(--mono);color:var(--tinta-clara-2);
  border:1px solid var(--ct-filete)}
.ct-atras{margin-top:18px;padding:8px 0;border:0;background:none;color:var(--tinta-clara-2);font:500 14px/1.3 var(--palo);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.ct-atras:hover{color:var(--tinta-clara)}
.ct-ver__k{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--rojo-azul)}
.ct-senal{flex:none;width:7px;height:7px;background:var(--rojo-azul)}
.ct-ver h3 em{font-style:normal;color:#fff;text-decoration:underline;text-decoration-color:var(--rojo);
  text-decoration-thickness:2px;text-underline-offset:7px}
.ct-ver__t{margin:20px 0 0;font-size:17px;line-height:1.62;color:var(--tinta-clara-2);max-width:68ch}
.ct-ver__t b{color:var(--tinta-clara);font-weight:650}
.ct-ver .ct-acc{margin-top:30px}
.ct-ver__pie{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:var(--tinta-clara-2)}

/* ══ 5 · LOS DIEZ MÓDULOS · mineral: la tabla que se reescribe ════════════ */
.ct-met{--ct-fondo:var(--fi-mineral-blog);--ct-tinta:var(--fi-tinta-m);--ct-tinta-2:var(--fi-tinta-m2);
  --ct-filete:var(--fi-filete-m);--ct-foco:var(--rojo-papel);--ct-senal:var(--rojo-papel)}
.ct-met::before{background:
  radial-gradient(70% 90% at 100% -10%,rgba(255,255,255,.24),transparent 60%),
  radial-gradient(60% 80% at 0 110%,rgba(40,46,50,.1),transparent 70%)}
.ct-met__ins{margin-top:clamp(36px,4vw,60px)}
.ct-met__cap{margin:0;padding-top:18px;border-top:1px solid rgba(18,20,22,.55);
  font:650 clamp(18px,1.5vw,22px)/1.32 var(--palo);letter-spacing:-.01em;color:var(--ct-tinta);max-width:46ch}
.ct-met__movil{display:none;margin:20px 0 0;font-size:15px;line-height:1.45;color:var(--ct-tinta-2)}
.ct-met__movil b{color:var(--ct-tinta)}
.ct-tabla{margin-top:clamp(24px,2.8vw,40px);border-top:1px solid rgba(18,20,22,.55)}
.ct-tabla:focus-visible{outline-offset:6px}
.ct-mod{display:grid;grid-template-columns:44px minmax(0,4fr) minmax(0,7fr);gap:0 clamp(16px,2vw,34px);align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--ct-filete)}
.ct-mod--cab{padding:13px 0;font:500 10.5px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ct-tinta-2)}
.ct-mod--cab .ct-mod__t,.ct-mod--cab .ct-mod__c{font:inherit;letter-spacing:inherit;max-width:none}
.ct-mod--cab b{font-weight:500;color:var(--ct-tinta)}
.ct-mod__n{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ct-tinta-2)}
.ct-mod__t{font-size:clamp(16.5px,1.3vw,19px);line-height:1.24;font-weight:720;font-stretch:100%;
  font-variation-settings:'wdth' 100;letter-spacing:-.01em}
.ct-mod__c{margin:0;font-size:15.5px;line-height:1.56;color:var(--ct-tinta-2);max-width:68ch;
  transition:opacity .5s ease,filter .5s ease,transform .5s var(--c-out);transition-delay:calc(var(--i) * 32ms)}
.ct-tabla.ct-reescribe .ct-mod__c{opacity:0;filter:blur(3px);transform:translateY(5px);transition:none}
.ct-met__pie{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 40px;margin-top:clamp(22px,2.4vw,32px)}
.ct-met__pie p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ct-tinta-2);max-width:60ch}
.ct-met__pie b{color:var(--ct-tinta)}

.ct-prog{--ct-fuera:var(--fi-mineral-blog);--ct-fondo:var(--fi-grafito-2);--ct-tinta:var(--tinta-clara);
  --ct-tinta-2:var(--tinta-clara-2);--ct-filete:var(--fi-filete-o);--ct-foco:#EE8177;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,5vw,88px);
  margin-top:clamp(56px,6.4vw,104px);padding:clamp(28px,3.6vw,56px);background:var(--fi-grafito-2);color:var(--tinta-clara)}
.ct-prog::after{width:24px;height:24px;background:linear-gradient(135deg,transparent 50%,var(--fi-mineral-blog) 50%)}
.ct-prog h3{font-size:clamp(26px,2.7vw,42px);line-height:1;letter-spacing:-.028em;max-width:15ch}
.ct-prog__t p{margin:0 0 16px;font-size:16px;line-height:1.62;color:var(--tinta-clara-2);max-width:62ch}
.ct-prog__t strong{color:var(--tinta-clara);font-weight:650}
.ct-prog .ct-boton{margin-top:10px}

/* ══ 6 · CASOS · el grafito de la sala de clientes ═══════════════════════ */
.ct-cas{--ct-fondo:var(--fi-clientes)}
.ct-cas::before{background:
  radial-gradient(60% 55% at 8% 0,rgba(237,235,231,.055),transparent 70%),
  linear-gradient(180deg,rgba(0,0,0,.16),transparent 30%)}
.ct-casos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,4vw,60px);
  border-top:1px solid var(--ct-filete);border-left:1px solid var(--ct-filete)}
.ct-caso{padding:clamp(24px,2.6vw,40px);border-right:1px solid var(--ct-filete);border-bottom:1px solid var(--ct-filete)}
.ct-caso__m{margin:0 0 16px;font:500 10.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-clara-2);
  max-width:60ch}
.ct-caso h3{font-size:clamp(22px,1.9vw,29px);line-height:1.04;letter-spacing:-.02em}
.ct-caso__t{margin:14px 0 0;font-size:15.5px;line-height:1.62;color:var(--tinta-clara-2);max-width:62ch}
.ct-res{margin-top:clamp(44px,4.8vw,72px)}
.ct-res h3{font-size:clamp(20px,1.6vw,24px);line-height:1.15;letter-spacing:-.015em}
.ct-res__l{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ct-filete)}
.ct-res__l li{display:flex;flex-direction:column;gap:12px;padding:26px clamp(18px,2.2vw,34px) 0;border-left:1px solid var(--ct-filete)}
.ct-res__l li:first-child{padding-left:0;border-left:0}
.ct-num{display:flex;align-items:baseline;font:830 clamp(48px,5.2vw,82px)/.9 var(--palo);font-stretch:104%;
  letter-spacing:-.04em;color:var(--tinta-clara);font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-num__pre{margin-right:.04em;color:var(--tinta-clara-2)}
.ct-num__l{font:500 10.5px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-clara-2);max-width:28ch}
.ct-res__f{margin:26px 0 0;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:rgba(174,178,183,.82)}

/* ══ 7 · QUIÉN CAPACITA · grafito ════════════════════════════════════════ */
.ct-enr{--ct-fondo:var(--fi-grafito)}
.ct-enr::before{background:
  radial-gradient(46% 70% at 18% 46%,rgba(237,235,231,.06),transparent 70%),
  radial-gradient(40% 320px at 100% 100%,rgba(169,23,22,.1),transparent 75%)}
.ct-enr__g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5.4vw,104px);align-items:center}
.ct-enr__foto{position:relative;margin:0;background:#0B0C0D}
.ct-enr__foto img{width:100%;height:auto}
.ct-enr__foto::after{content:"";position:absolute;inset:0;border:1px solid var(--ct-filete);pointer-events:none}
.ct-enr__txt>p{margin:22px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.64;color:var(--tinta-clara-2);max-width:60ch}
.ct-enr__txt strong{color:var(--tinta-clara);font-weight:650}
.ct-banda{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(24px,3vw,52px);align-items:end;
  margin-top:clamp(34px,3.8vw,56px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--ct-filete)}
.ct-banda__k{margin:0;font:720 clamp(18px,1.4vw,21px)/1.2 var(--palo);letter-spacing:-.01em;color:var(--tinta-clara)}
.ct-banda__t{margin:10px 0 0;font-size:14.5px;line-height:1.56;color:var(--tinta-clara-2);max-width:42ch}
.ct-libros{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.ct-libro{display:flex;flex-direction:column;gap:10px;width:clamp(84px,7.4vw,112px);color:inherit;text-decoration:none}
.ct-libro img{width:100%;height:auto;box-shadow:0 16px 30px -14px rgba(0,0,0,.75);transition:transform .5s var(--c-out)}
.ct-libro span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.2;color:var(--tinta-clara-2)}
.ct-libro .ct-flecha{width:13px;height:13px}
.ct-libro:hover img{transform:translateY(-4px)}
.ct-libro:hover span{color:var(--tinta-clara)}

/* ══ 8 · PREGUNTAS · mineral claro ═══════════════════════════════════════ */
.ct-faq{--ct-fondo:var(--fi-mineral-claro);--ct-tinta:var(--fi-tinta-m);--ct-tinta-2:var(--fi-tinta-m2);
  --ct-filete:var(--fi-filete-m);--ct-foco:var(--rojo-papel)}
.ct-faq::before{background:radial-gradient(70% 80% at 0 0,rgba(255,255,255,.3),transparent 60%),
  linear-gradient(176deg,rgba(255,255,255,.05),rgba(0,0,0,.04))}
/* Al centro (Héctor: «ajustar el texto para que quede más o menos en el medio»). */
.ct-faq__g{max-width:900px;margin-inline:auto}
.ct-faq .ct-h2{margin-inline:auto;text-align:center;font-size:clamp(30px,3.3vw,50px);max-width:20ch}
.ct-faq__l{margin-top:clamp(30px,3.4vw,48px);border-top:1px solid rgba(18,20,22,.55)}
.ct-p{border-bottom:1px solid var(--ct-filete)}
.ct-p summary{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:20px;align-items:center;padding:22px 0;
  font:680 clamp(16.5px,1.3vw,19px)/1.36 var(--palo);letter-spacing:-.005em;cursor:pointer;list-style:none}
.ct-p summary::-webkit-details-marker{display:none}
.ct-p summary:hover{color:#000}
.ct-mas{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--c-out)}
.ct-p[open] .ct-mas{transform:rotate(45deg)}
.ct-p p{margin:0 0 24px;font-size:16px;line-height:1.64;color:var(--ct-tinta-2);max-width:66ch}

/* ══ 9 · CIERRE · entra en el #agendar de la casa, sobre su mismo negro ══════ */
.ct-cie{--ct-fondo:#0A0B0C;padding-bottom:0}
.ct-cie__g{padding-bottom:clamp(40px,4.4vw,68px);border-bottom:1px solid var(--ct-filete)}
.ct-cie__c{max-width:860px;margin-inline:auto;text-align:center}
.ct-cie .ct-h2{margin-inline:auto;font-size:clamp(30px,3.4vw,52px);max-width:21ch}
.ct-cie__c p{margin:22px auto 0;font-size:16.5px;line-height:1.62;color:var(--tinta-clara-2);max-width:60ch}
.ct-cie__c strong{color:var(--tinta-clara);font-weight:650}
.ct-cie .ct-formatos{justify-content:center;margin:22px 0 0;padding:0;border:0}

/* ══ Pantallas medianas ═══════════════════════════════════════════════════ */
@media (max-width:1100px){
  .ct-sf{grid-template-columns:24px minmax(0,1fr) minmax(120px,auto);grid-template-areas:"i c p" ". l l"}
  .ct-sf__ico{grid-area:i}.ct-sf__cab{grid-area:c}.ct-sf__pie{grid-area:p}
  .ct-sf__in{grid-area:l;margin-top:16px}
}
@media (max-width:1000px){
  .ct-port__g,.ct-dia__cab,.ct-prog,.ct-enr__g{grid-template-columns:minmax(0,1fr)}
  .ct-muro{position:relative;z-index:0;height:clamp(380px,104vw,560px);margin:clamp(40px,7vw,64px) calc(var(--margen) * -1) 0}
  .ct-muro__foto img{object-position:center}
  .ct-muro__velo{background:
    linear-gradient(180deg,var(--fi-grafito),rgba(15,17,19,.55) 14%,transparent 30%,transparent 74%,rgba(15,17,19,.7) 90%,var(--fi-grafito)),
    radial-gradient(140% 90% at 50% 50%,transparent 52%,rgba(0,0,0,.5))}
  .ct-dia__cab .ct-lead{margin-top:6px}
  .ct-des__cab{flex-direction:column;align-items:flex-start}
  .ct-casos{grid-template-columns:minmax(0,1fr)}
  .ct-res__l{grid-template-columns:minmax(0,1fr)}
  .ct-res__l li{padding:22px 0;border-left:0;border-bottom:1px solid var(--ct-filete)}
  .ct-enr__foto{max-width:380px}
  .ct-mod{grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .ct-mod__c{grid-column:2}
  .ct-mod--cab{display:none}
  .ct-met__movil{display:block}
}

/* ══ Móvil ════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .ct-marcas__k{display:none}
  .ct-marca{height:36px;padding-inline:16px}
  .ct-marca img{transform:scale(.82)}
}
@media (max-width:640px){
  .ct-port h1{font-size:clamp(36px,10.4vw,46px)}
  .ct-port .ct-acc{flex-direction:column;align-items:stretch}
  .ct-port .ct-boton{justify-content:flex-start}
  .ct-franja{flex-direction:column;align-items:flex-start}
  .ct-cifras{width:100%}
  .ct-cifras li{flex:1;padding:0 0 0 14px}
  .ct-cifras li:first-child{padding-left:0}
  .ct-cifras b{font-size:21px}
  .ct-cifras span{font-size:9.5px;letter-spacing:.07em}
  .ct-sf{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"i c" ". l" ". p";grid-template-rows:auto auto 1fr}
  .ct-sf__pie{flex-direction:row;align-items:center;justify-content:space-between;margin-top:16px;text-align:left;align-self:end}
  .ct-sf__n b{font-size:32px}
  .ct-pista__l{grid-auto-columns:76vw}
  .ct-des__nav{display:none}
  .ct-consola{padding:18px 16px 22px}
  .ct-ins{--ct-ins-h:124px;padding-top:22px}
  .ct-ins__t span{display:none}
  .ct-ins__ejes{min-width:44px}
  .ct-ins__eje{font-size:9px;letter-spacing:.08em}
  .ct-ins__v{display:none}
  .ct-escena{min-height:0}
  .ct-op{grid-template-columns:12px minmax(0,1fr);padding:12px 14px;font-size:15.5px}
  .ct-op__k{display:none}
  .ct-mod{grid-template-columns:34px minmax(0,1fr)}
  .ct-banda{grid-template-columns:minmax(0,1fr)}
  .ct-libro{width:calc((100vw - 2 * var(--margen) - 32px) / 3)}
}

@media (prefers-reduced-motion:reduce){
  .ct-marcas__p{animation:none}
  .ct-muro__3d{transition:none}
  .ct-js .ct-paso,.ct-js .ct-ver{animation:none}
  .ct-mod__c,.ct-ins__b,.ct-ins__v,.ct-tj__img img,.ct-flecha,.ct-libro img{transition:none}
}