/* ══════════════════════════════════════════════════════════════════════
   LA PÁGINA · lo único que no comparte con las otras siete propuestas.
   Se enlaza DESPUÉS de _comun/ en el <head>, así que gana por cascada,
   incluso dentro de las media queries. Ni una línea de _comun/ se toca:
   esos ficheros los comparten las ocho.
   ══════════════════════════════════════════════════════════════════════ */

/* ── §1 · La cabecera ─────────────────────────────────────────────────────
   Se mudó entera a `cabecera4.css` el 13-sep-2026 (constante CSS_CAB de
   _construir4.py). Aquí sólo llegaba a las páginas que enlazan portada.css,
   y `entrenamientos.html` y `recursos.html` no lo enlazan: en esas dos el
   WhatsApp salía sin estilo y `--cab-total` seguía sumando el raíl y la regla
   que ya no existen. */

/* ══════════════════════════════════════════════════════════════════════
   §2 · EL HERO DE ENGRANAJES. Trasplante de hero/3-alto-octanaje-animado/,
   con todo prefijado `eng-`: este documento ya tiene un `.cifra`, una
   `.linea`, un `.rotulo`, un `.marca` y un `.js` que son de la casa.
   ══════════════════════════════════════════════════════════════════════ */

/* `.port` trae `overflow:hidden`, y un ancestro con overflow mata el
   `position:sticky` del lienzo. Aquí se anula: la clase `port` se conserva
   porque `_capturar3.py` mide `.port h1` y sin ella la medida sale null. */
.eng-escena{position:relative;display:block;min-height:0;overflow:visible;
  background:var(--azul-hondo);color:var(--tinta-clara)}
.eng-lienzo{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;
  overflow:hidden}
.eng-lienzo>*{position:absolute;inset:0}

/* Capas de luz ancladas al punto de engrane. */
.eng-brasa,.eng-halo,.eng-foco{inset:auto;left:0;top:0;pointer-events:none;
  will-change:transform,opacity}
.eng-brasa{width:118vmax;height:64vmax;margin-left:-59vmax;margin-top:-32vmax;
  background:url(../_lib/texturas/t-eng-brasa.webp) center/cover no-repeat;
  opacity:.4;mix-blend-mode:screen;filter:blur(9px) saturate(1.25)}
.eng-halo{width:104vmax;height:104vmax;margin-left:-52vmax;margin-top:-52vmax;
  background:radial-gradient(closest-side,
    rgba(255,214,196,.26), rgba(214,74,60,.22) 14%, rgba(169,23,22,.24) 32%,
    rgba(122,16,15,.12) 56%, transparent 76%);
  mix-blend-mode:screen}
.eng-foco{width:60vmax;height:60vmax;margin-left:-30vmax;margin-top:-30vmax;
  background:radial-gradient(closest-side, rgba(255,240,232,.13),
    rgba(255,214,198,.05) 42%, transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .55s ease}
.eng-acero-fondo{
  background:url(../_lib/texturas/t-eng-acero.webp) 74% 62%/140% auto no-repeat;
  opacity:.1;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(54% 58% at 78% 68%,#000,transparent 74%);
          mask-image:radial-gradient(54% 58% at 78% 68%,#000,transparent 74%)}
#eng-mec,.eng-mec-fondo{width:100%;height:100%;display:block;overflow:visible}
#eng-mec .eng-rueda *{vector-effect:non-scaling-stroke}
/* Las placas: el cuerpo de cada rueda pintado una vez en un <canvas> (ver
   «LAS PLACAS» en el JS). Las mueve la tarjeta gráfica, así que no repintan. */
.eng-placas{pointer-events:none}
.eng-placas canvas{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}

/* Destello anamórfico: nace en el punto de engrane, como en una lente. */
.eng-flare,.eng-flare2{inset:auto;left:0;top:0;pointer-events:none;
  mix-blend-mode:screen;opacity:0;will-change:transform,opacity}
.eng-flare{width:104vmax;height:2px;margin-left:-52vmax;margin-top:-1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,190,158,.22) 19%,
    rgba(255,224,204,.86) 46%,rgba(255,247,240,1) 50%,rgba(255,224,204,.86) 54%,
    rgba(255,190,158,.22) 81%,transparent 100%);
  filter:blur(1.1px)}
.eng-flare2{width:84vmax;height:30px;margin-left:-42vmax;margin-top:-15px;
  background:linear-gradient(90deg,transparent 0%,rgba(200,74,60,.20) 24%,
    rgba(255,206,178,.46) 50%,rgba(200,74,60,.20) 76%,transparent 100%);
  filter:blur(15px)}
.eng-velo{background:linear-gradient(101deg,
  color-mix(in srgb, var(--azul-hondo) 97%, transparent) 0%,
  color-mix(in srgb, var(--azul-hondo) 95%, transparent) 25%,
  color-mix(in srgb, var(--azul-hondo) 80%, transparent) 41%,
  color-mix(in srgb, var(--azul-hondo) 38%, transparent) 56%,
  color-mix(in srgb, var(--azul-hondo) 7%, transparent) 69%, transparent 79%);
  will-change:opacity}
.eng-velo-alto{background:linear-gradient(180deg,
  color-mix(in srgb, var(--azul-hondo) 92%, transparent) 0%,
  color-mix(in srgb, var(--azul-hondo) 55%, transparent) 46%, transparent 100%);
  bottom:auto;height:clamp(120px,17vh,190px);pointer-events:none}
.eng-veloplano{background:color-mix(in srgb, var(--azul-hondo) 38%, transparent);
  opacity:0;will-change:opacity}
.eng-vineta{background:radial-gradient(122% 102% at 50% 46%, transparent 40%,
  rgba(3,4,6,.78) 100%);pointer-events:none}
.eng-grano{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='engn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23engn)'/%3E%3C/svg%3E");
  inset:-14%;opacity:.06;pointer-events:none;animation:eng-granear 1.4s steps(3) infinite}
@keyframes eng-granear{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* ── Pantalla 1 ─────────────────────────────────────────────────────── */
.eng-pantalla{position:relative;z-index:2;min-height:100svh;display:flex;
  flex-direction:column;padding-block:calc(var(--cab-total) + 10px) clamp(24px,3vw,44px)}
/* `.env` lleva `margin-inline:auto`, y un ítem de flex con márgenes automáticos
   en el eje transversal NO se estira: se encoge al contenido y se centra. En
   los demás bloques `.env` vive dentro de un <section> normal y no pasa. */
.eng-pantalla>.env{width:100%}
.eng-uno{justify-content:center}
.eng-bloque{max-width:min(52vw,700px)}
/* Sin rótulo encima del titular desde el 14-sep-2026. Héctor: «quita en el
   header "Consultoría de ventas para la industria"». El titular se queda donde
   estaba: su margen de arriba suma el hueco de antes (32 px) y el alto del
   rótulo (11 px). Medido a 1440 × 900: con margen 0 subía 43 px y quedaba a
   10 px de la barra. */
.eng-escena h1{font-weight:800;font-stretch:104%;letter-spacing:-.025em;line-height:.93;
  font-size:clamp(38px,5vw,84px);color:var(--tinta-clara);
  margin:calc(var(--a3) + var(--t-rotulo)) 0 clamp(20px,2.3vw,32px);max-width:none}
.eng-ln{display:block;overflow:hidden}
.eng-ln>span{display:block;transform:translateY(0)}
html.eng-js .eng-ln>span{transform:translateY(108%)}
.eng-escena h1 .eng-pt{font-style:normal;color:var(--rojo-azul)}
.eng-entradilla{font-size:clamp(16px,1.15vw,18px);line-height:1.55;
  color:var(--tinta-clara-2);max-width:44ch;margin-bottom:clamp(24px,2.6vw,38px)}
html.eng-js .eng-entradilla,html.eng-js .eng-fila-cta,html.eng-js .eng-pie-uno{opacity:0}
.eng-fila-cta{display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
.eng-fila-cta .boton{gap:.72rem}
.eng-chispa{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  animation:eng-latir 2.1s ease-in-out infinite}
@keyframes eng-latir{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.55);opacity:1}}
.eng-pie-env{margin-top:auto}
.eng-pie-uno{display:flex;align-items:center;justify-content:space-between;gap:var(--a3);
  padding-top:clamp(20px,3vw,40px)}
.eng-regimen{display:flex;align-items:center;gap:.6rem}
.eng-barra{width:clamp(58px,7vw,96px);height:2px;position:relative;overflow:hidden;
  background:color-mix(in srgb, var(--tinta-clara) 16%, transparent)}
.eng-barra i{position:absolute;inset:0;transform-origin:left;transform:scaleX(.3);
  background:linear-gradient(90deg,var(--rojo),var(--rojo-azul))}
.eng-cif{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;color:var(--tinta-clara-2)}
.eng-tubo{display:block;width:1px;height:46px;position:relative;overflow:hidden;
  background:color-mix(in srgb, var(--tinta-clara) 16%, transparent)}
/* Baja con `transform`, no con `top`: mismo recorrido (de -15 a 46 px), pero
   `top` recalcula la maqueta en cada fotograma y `transform` no (13-sep-2026). */
.eng-tubo::after{content:"";position:absolute;left:0;right:0;top:0;height:15px;
  background:var(--rojo-azul);animation:eng-bajar 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes eng-bajar{0%{transform:translateY(-15px);opacity:0}25%{opacity:1}
  100%{transform:translateY(46px);opacity:0}}

/* ── Pantalla 2 · donde aterrizan las cuatro ruedas ──────────────────── */
.eng-dos{justify-content:flex-start}
.eng-mono{font-family:var(--mono);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:11px;color:var(--tinta-clara-2);margin:0}
.eng-tira-alta{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem 2rem;flex-wrap:wrap;padding-bottom:14px;
  border-bottom:1px solid var(--filete-azul)}
.eng-cifras{display:flex;gap:clamp(16px,2.6vw,42px);flex-wrap:wrap;align-items:baseline}
.eng-cifra{display:flex;align-items:baseline;gap:.5rem;margin:0}
.eng-cifra b{font-weight:800;font-stretch:104%;letter-spacing:-.03em;
  font-size:clamp(17px,1.55vw,23px);color:var(--tinta-clara);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.eng-cifra>span{font-size:11.5px;color:var(--tinta-clara-2);font-family:var(--mono);
  letter-spacing:.05em;max-width:18ch;line-height:1.35}
.eng-estaciones{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:start;margin-top:clamp(58px,11.6vh,124px)}
.eng-estacion{display:flex;flex-direction:column;gap:.7rem;padding-top:14px;
  position:relative;border-top:1px solid var(--filete-azul)}
.eng-estacion::before{content:"";position:absolute;top:-1px;left:0;width:40%;height:1px;
  background:var(--rojo-azul);transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.eng-estacion.eng-viva::before{transform:scaleX(1)}
.eng-hueco{width:clamp(120px,15vw,230px);aspect-ratio:1;margin-bottom:.5rem;display:block}
.eng-num{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  color:var(--rojo-azul);margin-bottom:.3rem}
.eng-estacion h3{font-weight:800;font-stretch:104%;letter-spacing:-.022em;
  font-size:clamp(20px,1.78vw,29px);line-height:1.02;color:var(--tinta-clara);
  margin-bottom:.55rem}
.eng-estacion p{font-size:14.5px;line-height:1.52;color:var(--tinta-clara-2);max-width:30ch}

@media(max-width:1180px){.eng-bloque{max-width:min(62vw,600px)}}
@media(max-width:1080px){
  .eng-estaciones{grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,34px)}
}
@media(max-width:820px){
  .eng-bloque{max-width:100%}
  .eng-escena h1{font-size:clamp(34px,9.2vw,52px);margin-bottom:16px}
  .eng-entradilla{max-width:32ch;margin-bottom:20px}
  /* El velo se afloja: a media pantalla ya no tapa nada y despeja al 68 %. */
  .eng-velo{background:linear-gradient(179deg,
    color-mix(in srgb, var(--azul-hondo) 97%, transparent) 0%,
    color-mix(in srgb, var(--azul-hondo) 93%, transparent) 20%,
    color-mix(in srgb, var(--azul-hondo) 80%, transparent) 32%,
    color-mix(in srgb, var(--azul-hondo) 46%, transparent) 44%,
    color-mix(in srgb, var(--azul-hondo) 12%, transparent) 56%, transparent 68%)}
  .eng-velo-alto{height:86px}
  .eng-flare{width:172vw;margin-left:-86vw}
  .eng-flare2{width:132vw;margin-left:-66vw;height:22px;filter:blur(11px)}
  .eng-uno{justify-content:flex-start}
  .eng-estacion{flex-direction:row;align-items:flex-start;gap:14px}
  .eng-hueco{width:56px;flex:none;margin-bottom:0}
  .eng-txt{flex:1;min-width:0}
  .eng-estacion p{max-width:none}
  .eng-dos{min-height:auto;padding-block:clamp(52px,13vw,86px) 40px}
  .eng-estaciones{grid-template-columns:1fr;gap:16px;margin-top:30px}
  .eng-cifras{gap:12px 20px}
  .eng-cifra>span{max-width:14ch}
}
@media(prefers-reduced-motion:reduce){
  /* Sin movimiento el lienzo no se queda pegado: acompaña a la primera. */
  .eng-lienzo{position:relative}
  html.eng-js .eng-ln>span{transform:none}
  html.eng-js .eng-entradilla,html.eng-js .eng-fila-cta,html.eng-js .eng-pie-uno{opacity:1}
  .eng-grano,.eng-chispa,.eng-tubo::after{animation:none}
  .eng-tubo::after{top:0;opacity:.7}
  .eng-estacion::before{transform:scaleX(1);transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   §3 · LAS RESEÑAS. Sin logo de Google, sin estrellas y sin nota media:
   las citas de hoy no vienen de Google y ponerle el logo encima sería una
   atribución falsa. El carrusel es el de la casa (vao.js): cero JS nuevo.
   ══════════════════════════════════════════════════════════════════════ */
/* Ojo: `.pru__c` es una tarjeta de PAPEL, aunque la franja sea oscura. La
   tinta va oscura, y un <a> subraya solo si no se le dice que no. */
.res__c,.med__c{display:flex;flex-direction:column;gap:16px;height:auto;
  color:var(--tinta);text-decoration:none;
  transition:background var(--medio) var(--c-micro)}
.res__c:hover,.med__c:hover{background:var(--papel-hondo)}
.res__c{min-height:340px}
.res__c blockquote{margin:0;font:600 17px/1.45 var(--palo);
  font-variation-settings:'wdth' 96;letter-spacing:-.008em;max-width:none;
  color:var(--tinta);flex:1}
.res__c blockquote::before{content:"«"}
.res__c blockquote::after{content:"»"}
.res__k{display:flex;align-items:center;gap:8px;color:var(--tinta-2)}
.res__g{flex:none}
.res__f{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;line-height:1.55;
  color:var(--tinta-2);margin:0;padding-top:14px;
  border-top:1px solid var(--filete-papel)}
.res__ir{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rojo-papel);display:flex;align-items:center;gap:9px}
.res__ir::after{content:"";flex:none;width:16px;height:1px;background:currentColor;
  transition:width var(--medio) var(--c-out)}
.res__c:hover .res__ir::after,.med__c:hover .res__ir::after{width:30px}
.res__nota{margin-top:var(--a3);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--tinta-clara-2);max-width:62ch;line-height:1.6}
/* Las estrellas SÓLO salen sobre una reseña de Google. El generador revienta
   si alguien se las pone a una cita que no viene de una plataforma. */
.res__e{display:flex;gap:2px;margin:-4px 0 -2px}
.res__e svg{fill:var(--rojo-papel)}
.res__e svg.off{fill:var(--filete-papel)}
.res__c time{display:block;margin-top:5px;opacity:.75}
/* La ficha: la media y el total, tal y como los publica Google. */
.res__ficha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:var(--a4);padding:18px 22px;text-decoration:none;color:var(--tinta-clara);
  box-shadow:inset 0 0 0 1px var(--filete-azul);
  transition:box-shadow var(--medio) var(--c-micro)}
.res__ficha:hover{box-shadow:inset 0 0 0 1px var(--tinta-clara-2)}
.res__ficha svg{flex:none}
.res__media{font:830 clamp(26px,2.4vw,34px)/1 var(--palo);font-stretch:104%;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.res__ficha .res__e svg{width:15px;height:15px;fill:var(--rojo-azul)}
.res__tot,.res__neg{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--tinta-clara-2)}
.res__neg{margin-left:auto;text-align:right;text-transform:uppercase}
@media(max-width:720px){.res__neg{margin-left:0;text-align:left;width:100%}}

/* ══════════════════════════════════════════════════════════════════════
   §4 · LA DECLARACIÓN. Una frase a sangre que se escribe sola al llegar.
   ══════════════════════════════════════════════════════════════════════ */
.dec{overflow:hidden;padding-block:clamp(76px,8.4vw,124px)}
.dec__fondo{position:absolute;inset:-4%;z-index:0}
.dec__fondo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.5) brightness(.26);
  animation:dec-deriva 34s ease-in-out infinite alternate}
@keyframes dec-deriva{from{transform:scale(1.05) translate3d(-1%,0,0)}
                      to{transform:scale(1.12) translate3d(1.4%,1%,0)}}
.dec .env{position:relative;z-index:2}
.dec__t{font-size:clamp(30px,4.6vw,68px);line-height:1.04;letter-spacing:-.032em;
  font-weight:830;font-stretch:104%;max-width:24ch;margin:0}
.dec__w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em}
.dec__w i{display:inline-block;font-style:normal;transform:translateY(102%);
  transition:transform .78s cubic-bezier(.16,1,.3,1);transition-delay:var(--d)}
.dec.visto .dec__w i,html:not(.js) .dec__w i{transform:none}
.dec__pie{margin-top:var(--a4);font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta-clara-2);
  padding-top:18px;border-top:1px solid var(--filete-azul)}

/* ══════════════════════════════════════════════════════════════════════
   §5 · EQUIPO VAO. El ancla `#enrique` que el mega-menú lleva meses
   apuntando y no existía. Sin foto: `_MARCA.md §2.2`.
   ══════════════════════════════════════════════════════════════════════ */
.enr__g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--a5);margin-top:var(--a5);align-items:start}
.enr__f h3{font-size:clamp(28px,3.4vw,48px);letter-spacing:-.025em;line-height:1.02;
  margin:16px 0 10px}
.enr__r{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rojo-papel);margin-bottom:22px}
.enr__d{color:var(--tinta-2);max-width:46ch;font-size:clamp(15px,1.2vw,17px)}
.enr__l{display:flex;flex-direction:column}
.enr__i{display:flex;flex-direction:column;gap:6px;padding:18px 0;
  border-bottom:1px solid var(--filete-papel)}
.enr__i:first-child{padding-top:0}
.enr__i b{font:830 clamp(22px,2.2vw,32px)/1 var(--palo);font-stretch:104%;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.enr__i span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--tinta-2)}
@media(max-width:900px){.enr__g{grid-template-columns:1fr;gap:var(--a4);margin-top:var(--a4)}}

/* ══════════════════════════════════════════════════════════════════════
   §6 · EL MÉTODO, CON EL EMBUDO. Del prototipo se roba la geometría, no el
   fichero. Modo flujo: sin cámara pegada, sin pin y sin secuestro de rueda.
   Y el JS no escribe ni un hex: el color de la línea se decide aquí.
   ══════════════════════════════════════════════════════════════════════ */
.emb-cab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--a4);margin-bottom:var(--a5)}
.emb-cab h2{max-width:15ch}
/* La escena se estrecha a mano: a 1360 px de ancho los dos primeros tramos
   salen casi horizontales y el embudo deja de leerse como un embudo. */
.emb-escena{position:relative;--emb-canal:clamp(46px,7vw,110px);
  max-width:920px;margin-inline:auto;padding-left:var(--emb-canal)}
.emb-trazo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;
  pointer-events:none}
.emb-trazo .emb-l{fill:none;stroke:var(--rojo-azul);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.emb-trazo .emb-fantasma{fill:none;stroke:var(--filete-azul);stroke-width:1;
  stroke-dasharray:1 6}
.emb-trazo .emb-punta circle{fill:var(--rojo-azul)}
.emb-trazo .emb-punta .emb-halo{fill:none;stroke:var(--rojo-azul);stroke-width:1;
  opacity:.5;animation:emb-latido 2.6s ease-out infinite}
@keyframes emb-latido{0%{r:4;opacity:.55}70%,100%{r:17;opacity:0}}
.emb-tramos,.emb-salida{position:relative;z-index:2}
.emb-ancla{position:absolute;width:1px;height:1px;pointer-events:none}
/* Arriba y a la izquierda del primer tramo: si el ancla de entrada está a
   la misma altura que el borde del tramo, la línea de entrada y el primer
   tramo se superponen y parecen una sola raya horizontal. */
.emb-arranque{left:0;top:-58px}
.emb-tramo{margin:0 auto clamp(46px,6.6vh,80px);width:var(--w);
  padding:26px clamp(10px,3vw,30px) 0;text-align:center;position:relative}
.emb-tramo .emb-ancla{top:0}
.emb-tramo .emb-ancla.a{left:0}
.emb-tramo .emb-ancla.b{right:0}
.emb-i{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  color:var(--rojo-azul);margin:0 0 8px}
.emb-tramo h3{font-size:clamp(19px,1.7vw,25px);font-weight:700;font-stretch:104%;
  margin:0;letter-spacing:-.015em}
.emb-tramo p{font-size:14.5px;line-height:1.5;color:var(--tinta-clara-2);
  margin:10px auto 0;max-width:50ch}
.emb-salida{text-align:center;padding-top:10px}
.emb-final{left:50%;top:0}
.emb-par{display:inline-flex;flex-direction:column;gap:6px;
  margin:0 clamp(14px,3vw,34px);vertical-align:top}
.emb-par b{font-family:var(--mono);font-weight:500;font-size:clamp(28px,3vw,44px);
  color:var(--rojo-azul);line-height:1;letter-spacing:-.03em}
.emb-par>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-clara-2);max-width:24ch;line-height:1.4}
/* Sin JS, sin GSAP o con movimiento reducido, el bloque se lee entero. */
html.js .emb-tramo,html.js .emb-salida{opacity:0;transform:translateY(12px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.9,.3,1)}
html.js .emb-tramo.emb-on,html.js .emb-salida.emb-on{opacity:1;transform:none}
@media(max-width:820px){
  .emb-cab{flex-direction:column;align-items:flex-start;gap:var(--a3)}
  .emb-escena{--emb-canal:26px}
  .emb-tramo{padding-inline:12px}
  .emb-par{margin:0 14px}
}
@media(prefers-reduced-motion:reduce){
  html.js .emb-tramo,html.js .emb-salida{opacity:1;transform:none;transition:none}
  .emb-trazo .emb-punta .emb-halo{animation:none;opacity:0}
}

/* ══════════════════════════════════════════════════════════════════════
   §7 · CURSOS A MEDIDA · LA CINTA INFINITA.
   «Que el scroll sea horizontal automático de 4 imágenes que quepan en la
   pantalla» (Héctor, 8-sep-2026). La cinta se emite dos veces y se anima
   hasta -50 %: cuando la copia llega a donde empezó la original el fotograma
   es idéntico, así que el salto no se ve. Cero JavaScript.
   El ancho de tarjeta es `(100vw - 3 huecos) / 4`, o sea exactamente cuatro
   en pantalla, midan lo que midan las fichas.
   ══════════════════════════════════════════════════════════════════════ */
.cinta{--cinta-h:14px; --cinta-n:70;
  overflow:hidden;margin-top:var(--a5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.cinta__p{display:flex;gap:var(--cinta-h);width:max-content;
  animation:cinta-rodar 200s linear infinite;will-change:transform}
.cinta:hover .cinta__p,.cinta:focus-within .cinta__p{animation-play-state:paused}
@keyframes cinta-rodar{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - var(--cinta-h)/2),0,0)}}
.cinta__c{flex:none;width:calc((100vw - var(--cinta-h)*3 - 2px)/4);max-width:420px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--tinta);
  background:var(--papel);padding:0 0 20px;
  box-shadow:inset 0 0 0 1px var(--filete-papel);
  transition:background var(--medio) var(--c-micro)}
.cinta__c:hover{background:var(--papel-hondo)}
.cinta__f{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--azul-hondo)}
.cinta__f img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) contrast(1.08) brightness(.78);
  transition:transform var(--cinema) var(--c-out),filter var(--medio) var(--c-out)}
.cinta__c:hover .cinta__f img{transform:scale(1.05);filter:grayscale(0) brightness(.92)}
.cinta__s{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo-papel);padding-inline:20px}
.cinta__t{font-size:clamp(15px,1.25vw,18px);line-height:1.24;font-weight:600;
  letter-spacing:-.012em;padding-inline:20px}
@media(max-width:1080px){.cinta__c{width:calc((100vw - var(--cinta-h)*2)/2.4)}}
@media(max-width:620px){.cinta__c{width:76vw}}
@media(prefers-reduced-motion:reduce){
  /* Sin animación la cinta se queda quieta y se arrastra con el dedo. */
  .cinta{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .cinta__p{animation:none}
}

.med__b{margin-top:var(--a5);padding-top:var(--a4);
  border-top:1px solid var(--filete-papel)}
.med__bf{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.med__bf input{flex:1;min-width:min(320px,100%);font-family:var(--palo);font-size:16px;
  color:var(--tinta);background:transparent;padding:14px 16px;
  border:1px solid var(--filete-papel)}
.med__bf input:hover,.med__bf input:focus{border-color:var(--tinta-2)}
.med__n{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--tinta-2)}

/* ── Las portadillas de las páginas del índice ─────────────────────────── */
.portadilla{padding-top:calc(var(--cab-total) + 90px)}

/* ══════════════════════════════════════════════════════════════════════
   §8 · EL VÍDEO. Arranca solo al llegar, silenciado, con un barrido de
   encendido. La llamada a youtube-nocookie es la excepción declarada de la
   web madre; en las landings de curso la CSP la sigue bloqueando.
   ══════════════════════════════════════════════════════════════════════ */
.vid__marco{position:relative;margin-top:var(--a5);aspect-ratio:16/9;overflow:hidden;
  background:var(--azul-hondo);box-shadow:inset 0 0 0 1px var(--filete-azul)}
.vid__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.42) grayscale(1);transform:scale(1);
  transition:filter 1.2s var(--c-out)}
.vid--on .vid__poster{filter:brightness(.72) grayscale(.3);
  animation:vid-aire 20s ease-in-out infinite alternate}
@keyframes vid-aire{from{transform:scale(1)}to{transform:scale(1.05)}}
.vid__barrido{position:absolute;top:0;bottom:0;width:34%;left:-40%;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--rojo-azul) 46%, transparent),transparent);
  mix-blend-mode:screen;opacity:0}
.vid--on .vid__barrido{animation:vid-barrer .7s cubic-bezier(.4,0,.2,1) .05s 1 both}
@keyframes vid-barrer{0%{left:-40%;opacity:0}18%{opacity:1}
  100%{left:106%;opacity:0}}
.vid__caja{position:absolute;inset:0;z-index:3}
.vid__caja iframe{width:100%;height:100%;border:0;display:block}
.vid__notas{position:absolute;left:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;
  gap:0 clamp(18px,3vw,44px);padding:clamp(14px,2vw,26px);pointer-events:none}
.vid__a{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-clara-2);
  opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--c-out),transform .7s var(--c-out)}
.vid__a:nth-child(2){transition-delay:.16s}
.vid--on .vid__a{opacity:1;transform:none}
.vid__a b{font:500 clamp(19px,2.2vw,30px)/1 var(--mono);letter-spacing:-.02em;
  color:var(--rojo-azul)}
.vid--vivo .vid__notas{display:none}
.vid__b{position:absolute;z-index:5;cursor:pointer;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-clara);background:color-mix(in srgb, var(--azul-hondo) 72%, transparent);
  border:1px solid var(--tinta-clara-2);padding:13px 20px;
  backdrop-filter:blur(6px);transition:background var(--micro) var(--c-micro)}
.vid__b:hover{background:var(--rojo)}
.vid__play{left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:999px;width:auto;min-width:150px}
.vid--vivo .vid__play{display:none}
/* Abierta con doble clic no hay iframe, así que el botón se queda: es lo que
   lleva a YouTube. Servida por http, `vid--vivo` lo esconde en cuanto entra. */
html.vid-servida .vid--on .vid__play{display:none}
.vid__son{right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px)}
.vid--on .vid__son{box-shadow:0 0 0 0 color-mix(in srgb, var(--rojo-azul) 60%, transparent);
  animation:vid-latir 2.4s ease-out infinite}
@keyframes vid-latir{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--rojo-azul) 55%, transparent)}
  70%,100%{box-shadow:0 0 0 22px transparent}}
@media(prefers-reduced-motion:reduce){
  .vid--on .vid__poster,.vid--on .vid__barrido,.vid--on .vid__son{animation:none}
  .vid__a{opacity:1;transform:none;transition:none}
  .vid--on .vid__play{display:block}
  .vid--vivo .vid__play{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   §9 · EL BLOG. Los artículos son los reales del volcado de la web viva.
   Ninguna firma de autor: en WordPress los 982 los firma otro usuario.
   ══════════════════════════════════════════════════════════════════════ */
.blg__t{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:var(--a4);margin-top:var(--a5);align-items:start}
.blg__d,.blg__i,.blg__c{display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit}
.blg__d{padding:var(--a4);background:var(--papel-hondo);
  box-shadow:inset 0 0 0 1px var(--filete-papel);
  transition:background var(--medio) var(--c-micro)}
.blg__d:hover{background:var(--papel)}
.blg__d h2,.blg__d h3{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.024em;
  line-height:1.06;max-width:20ch}
.blg__d p{color:var(--tinta-2);max-width:52ch;font-size:clamp(15px,1.2vw,17px)}
.blg__col{display:flex;flex-direction:column}
.blg__i{padding:20px 0;border-bottom:1px solid var(--filete-papel);gap:8px}
.blg__i:first-child{padding-top:0}
.blg__i h3{font-size:clamp(16px,1.4vw,19px);line-height:1.22;letter-spacing:-.012em}
.blg__i p{display:none}
.blg__i:hover h3,.blg__c:hover h3,.blg__d:hover h2{color:var(--rojo-papel)}
.blg__i--todo h3{color:var(--rojo-papel)}
.blg__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:1px;margin-top:var(--a5);background:var(--filete-papel)}
.blg__c{padding:22px;background:var(--papel);min-height:180px;gap:10px}
.blg__c h3{font-size:16.5px;line-height:1.26;letter-spacing:-.01em;margin-top:auto}
.blg__c p{display:none}
.blg__c:hover{background:var(--papel-hondo)}
.blg__n{margin-top:var(--a3);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--tinta-2)}
.blg__port{padding-top:calc(var(--cab-total) + 90px)}
@media(max-width:900px){.blg__t{grid-template-columns:1fr;gap:var(--a3);margin-top:var(--a4)}}

/* ══════════════════════════════════════════════════════════════════════
   §9-bis · LA PÁGINA DE ARTÍCULO. Una sola columna de prosa a 68 ch, que es
   donde el ojo deja de perder el renglón, con una ficha pegada al lado. El
   HTML viene de WordPress ya colado por la lista blanca (`_limpiar_articulo`),
   así que aquí sólo hay que vestir p, h2, h3, ul, li, blockquote y a.
   ══════════════════════════════════════════════════════════════════════ */
.art__port{padding-top:calc(var(--cab-total) + 90px)}
.art__meta{margin-top:var(--a3);font-family:var(--mono);font-size:var(--t-rotulo);
  letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-clara-2)}
.art__caja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:var(--a5);align-items:start}
.art__txt{max-width:68ch;font-size:clamp(16px,1.28vw,18.5px);line-height:1.72;
  color:var(--tinta)}
.art__txt>*+*{margin-top:1.15em}
.art__txt h2,.art__txt h3,.art__txt h4{font-family:var(--palo);font-weight:800;
  letter-spacing:-.02em;line-height:1.14;color:var(--tinta);margin-top:1.9em}
.art__txt h2{font-size:clamp(24px,2.3vw,33px);max-width:22ch}
.art__txt h3{font-size:clamp(20px,1.8vw,25px);max-width:26ch}
.art__txt h4{font-size:clamp(17px,1.4vw,20px)}
.art__txt strong{font-weight:700;color:var(--tinta)}
.art__txt a{color:var(--rojo-papel);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.art__txt a:hover{background:color-mix(in srgb, var(--rojo-papel) 12%, transparent)}
.art__txt ul,.art__txt ol{padding-left:1.25em}
.art__txt li+li{margin-top:.5em}
.art__txt blockquote{margin-left:0;padding-left:var(--a3);
  border-left:2px solid var(--rojo-papel);font-size:1.08em;color:var(--tinta-2)}
.art__lado{position:sticky;top:calc(var(--cab-total-2) + 40px)}
.art__ficha{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:var(--a4);background:var(--papel-hondo);
  box-shadow:inset 0 0 0 1px var(--filete-papel)}
.art__ficha h2{font-size:clamp(19px,1.6vw,23px);line-height:1.16;letter-spacing:-.018em;
  max-width:16ch}
.art__ficha .boton{margin-top:6px}
@media(max-width:900px){
  .art__caja{grid-template-columns:1fr;gap:var(--a4)}
  .art__lado{position:static}}

/* ══════════════════════════════════════════════════════════════════════
   §10 · EL CATÁLOGO DE VERDAD. El patrón viene de `web/catalogo.html` y ya
   usaba los tokens de la casa: cero colores prestados.
   ══════════════════════════════════════════════════════════════════════ */
.filtros{display:flex;gap:var(--a3);flex-wrap:wrap;align-items:flex-end;
  padding-bottom:clamp(22px,2.4vw,32px);border-bottom:1px solid var(--filete-azul-fuerte)}
.campo{display:flex;flex-direction:column;gap:9px;min-width:0}
.campo label{font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-clara-2)}
.campo input,.campo select{font-family:var(--palo);font-size:15px;color:var(--tinta-clara);
  background:color-mix(in srgb, var(--tinta-clara) 5%, transparent);
  border:1px solid var(--filete-azul-fuerte);padding:13px 15px;min-width:min(300px,72vw);
  transition:border-color var(--micro) var(--c-micro)}
.campo select{min-width:min(260px,72vw);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta-clara-2) 50%),
    linear-gradient(135deg,var(--tinta-clara-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.campo input:hover,.campo select:hover{border-color:var(--tinta-clara-2)}
.marcador{margin-left:auto;font-family:var(--mono);font-size:var(--t-rotulo);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-clara-2);
  padding-bottom:14px}
.lista{list-style:none;display:grid;grid-template-columns:1fr;margin-top:2px;padding:0}
@media(min-width:760px){.lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cur{border-bottom:1px solid var(--filete-azul);border-left:2px solid transparent;
  transition:background var(--micro) var(--c-micro),border-color var(--micro) var(--c-micro)}
.cur,.cur>a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;
  align-items:baseline;padding:13px 16px 13px 15px}
.cur>a{padding:0;text-decoration:none;color:inherit}
.cur:has(>a){padding:13px 16px 13px 15px;display:block}
.cur:hover{background:color-mix(in srgb, var(--tinta-clara) 4.5%, transparent);
  border-left-color:var(--filete-azul-fuerte)}
.cur[hidden]{display:none}
.cur--pub{border-left-color:var(--rojo-azul)}
.cur--pub:hover{border-left-color:var(--rojo-azul)}
.cur__n{font-size:15.5px;line-height:1.32;font-weight:500;color:var(--tinta-clara)}
.cur--pub .cur__n{font-weight:600}
.cur__s{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-clara-2);margin-top:5px}
.cur__e{grid-row:1/3;grid-column:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-clara-2);
  white-space:nowrap;align-self:center;opacity:.72}
.cur--pub .cur__e{color:var(--rojo-azul);opacity:1}
.vacio{display:none;padding:clamp(30px,4vw,54px) 0;font-family:var(--mono);
  font-size:var(--t-menudo);color:var(--tinta-clara-2)}
.lista--vacia + .vacio{display:block}
.leyenda{margin-top:clamp(24px,2.6vw,36px);display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-clara-2)}
.leyenda span{display:flex;align-items:center;gap:9px}
.leyenda i{width:14px;height:2px;background:var(--rojo-azul);display:block;flex:none}
.leyenda i.gris{background:var(--filete-azul-fuerte)}

/* ══════════════════════════════════════════════════════════════════════
   §11 · EL MÉTODO PEGADO. ES el bloque «Método VAO» de la home: los cuatro
   pasos con foto que Héctor dibujó en la libreta (1·2·3). La foto se queda
   clavada y cambia con el scroll. El embudo, que ocupaba este sitio, vive
   ahora sólo en metodo.html.
   ══════════════════════════════════════════════════════════════════════ */
.met2__cab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--a4);margin-bottom:var(--a5)}
.met2__cab h2{max-width:15ch}
.met2__g{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--a5)}
.met2__izq{position:relative}
.met2__marco{position:sticky;top:calc(var(--cab-total-2) + 40px);
  aspect-ratio:4/5;overflow:hidden;background:var(--azul-hondo);
  box-shadow:inset 0 0 0 1px var(--filete-papel), 0 40px 80px -60px #000}
.met2__f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.08) brightness(.7);
  opacity:0;transform:scale(1.06);
  transition:opacity .8s var(--c-out),transform 1.4s var(--c-out)}
.met2__f.es-viva{opacity:1;transform:scale(1)}
.met2__n{position:absolute;left:24px;bottom:18px;z-index:2;
  font:830 clamp(56px,7vw,104px)/.8 var(--palo);font-stretch:104%;
  color:var(--tinta-clara);letter-spacing:-.05em;
  text-shadow:0 10px 40px rgba(0,0,0,.6)}
.met2__der{display:flex;flex-direction:column}
.met2__p{padding:var(--a4) 0;border-bottom:1px solid var(--filete-papel);
  opacity:.34;transition:opacity .5s var(--c-out)}
.met2__p:first-child{padding-top:0}
.met2__p.es-viva{opacity:1}
html:not(.js) .met2__p{opacity:1}
.met2__p b{display:block;font:500 11px/1 var(--mono);letter-spacing:.16em;
  color:var(--rojo-papel);margin-bottom:16px}
.met2__p h3{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.02em;margin-bottom:12px}
.met2__p p{color:var(--tinta-2);max-width:44ch;font-size:clamp(15px,1.2vw,17px)}
@media(max-width:960px){
  .met2__g{grid-template-columns:1fr;gap:var(--a4)}
  .met2__marco{position:relative;top:0;max-height:52vh}
  .met2__p{padding:var(--a4) 0;opacity:1}
}