/* Propuesta «El viaje», versión 2 (P495-P496) · encima de viaje.css
   - Aire: titulares más chicos y más espacio entre secciones; menos texto por pantalla.
   - 02 · Las cifras: un solo instrumento con tres lecturas (contador + cuadrícula de 100 celdas), anclado.
   - 03 · La puerta: el símbolo se completa y la cámara entra a la mesa por la celda de acento.
   - Capítulos sobre el video: el nombre de cada sección con un degradado que sube desde abajo.
   - Frases del traslado: los remates de cada sección acompañan el movimiento de la cámara. */

/* ── Aire en toda la página ── */
.h-l{font-size:clamp(28px,3vw,46px);line-height:.98;max-width:20ch}
.lead{font-size:clamp(16px,1.2vw,19px);max-width:52ch}
.remate{font-size:clamp(22px,2.3vw,34px)}
#identidad,#comunidad,#criterio,#asesoria,#caminos,#faq,#quien,#cierre{padding:clamp(120px,19vh,220px) 0}
#identidad .h-l,#comunidad .h-l{max-width:18ch}
/* P505: con el titular más chico, la columna de texto quedaba más corta que el collage y dejaba un hueco:
   el texto se centra con la imagen y el collage se achica un poco, para que las dos columnas terminen a la par */
#comunidad .side{align-items:center!important}
#comunidad .side .ph{max-width:min(100%,520px);margin-left:auto}
#comunidad .co-pie{margin-top:clamp(20px,4vh,44px);align-items:center}
#comunidad .co-pie .remate{margin:0}
/* P509: el remate del criterio, del ancho de la columna izquierda (varias líneas) y con la segunda mitad en óxido */
#criterio .cr-remate{grid-column:1;max-width:none;margin-top:clamp(8px,2vh,24px)}
.c4-head .h-l,.tb-lista .h-l{font-size:clamp(26px,2.6vw,40px)}
.camino h3{font-size:clamp(34px,4vw,64px)}
@media(max-width:820px){.h-l{font-size:clamp(28px,8vw,40px)}}

/* ── P510: el símbolo de avance cambia de colores según el fondo (contraste medido, mínimo 3:1 para gráficos) ──
   claro (papel/hueso/avena): marco oliva (7,1-9,3), relleno óxido (3,9-5,1), acento tinta (11-15)
   tinta: marco hueso, relleno ocre (6,1), acento hueso (14,9)
   oliva: marco hueso, relleno hueso (9,3), acento ocre (3,8)
   óxido: marco hueso, relleno hueso (5,1), acento tinta (2,9, junto al hueso se distingue); el verde daría 1,8
   ocre: marco tinta, relleno tinta, acento hueso
   video: hueso y ocre sobre una placa de tinta translúcida, porque el fondo cambia cuadro a cuadro */
body{--av-marco:var(--olive);--av-rel:var(--rust);--av-acc:var(--ink);--av-num:var(--olive)}
body[data-fondo="ink"]{--av-marco:rgba(252,235,202,.75);--av-rel:var(--ochre);--av-acc:var(--bone);--av-num:var(--bone)}
body[data-fondo="olive"]{--av-marco:rgba(252,235,202,.75);--av-rel:var(--bone);--av-acc:var(--ochre);--av-num:var(--bone)}
body[data-fondo="rust"]{--av-marco:rgba(252,235,202,.85);--av-rel:var(--bone);--av-acc:var(--ink);--av-num:var(--bone)}
body[data-fondo="ochre"]{--av-marco:var(--ink);--av-rel:var(--ink);--av-acc:var(--bone);--av-num:var(--ink)}
body[data-fondo="video"]{--av-marco:rgba(252,235,202,.85);--av-rel:var(--bone);--av-acc:var(--ochre);--av-num:var(--bone)}
.avance{padding:10px 8px;border-radius:4px;pointer-events:none;transition:opacity .4s,background-color .4s}
body[data-fondo="video"] .avance{background:rgba(13,12,8,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.avance-sim rect,.on-dark .avance-sim rect{stroke:var(--av-marco);transition:stroke .4s,fill .4s}
.avance-sim .av-relleno rect,.on-dark .avance-sim .av-relleno rect{fill:var(--av-rel)}
.avance-sim .av-relleno rect.acc,.on-dark .avance-sim .av-relleno rect.acc{fill:var(--av-acc)}
.avance-num,.on-dark .avance-num{color:var(--av-num);transition:color .4s}

/* ═══════════ 02 · Las cifras ═══════════ */
#datos.cifras{padding:0}
.cf-anclaje{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;z-index:1}
/* P502: la luz se apaga antes del borde de abajo, así no marca un corte entre las cifras y su CTA */
.cf-luz{position:absolute;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(55vmax 45vmax at var(--mx,50%) var(--my,30%),rgba(208,137,59,.13),transparent 62%);
  -webkit-mask-image:linear-gradient(transparent,#000 18%,#000 55%,transparent 92%);mask-image:linear-gradient(transparent,#000 18%,#000 55%,transparent 92%)}
.cf-cab{position:relative;z-index:1;padding-top:clamp(92px,13vh,124px)}
.cf-cab .num-tag{margin:0}
.cf-tit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;margin:0;width:min(88vw,21ch);text-align:center;
  font:900 clamp(32px,3.6vw,60px)/.96 var(--head);text-transform:uppercase;color:var(--bone)}
.cf-tit span{display:block;margin-top:.35em;color:var(--ochre)}
.cf-escena{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:center;opacity:0}
.cf-izq{--fs:clamp(120px,15.5vw,250px)}
.cf-pils{position:relative;height:1.4em;font:700 13px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ochre)}
.cf-pil{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.cf-pil.on{opacity:1;transform:none;transition-delay:.15s}
.cf-num{display:flex;align-items:flex-start;gap:.04em;margin:clamp(6px,1.5vh,16px) 0 clamp(14px,2.6vh,26px);color:var(--bone)}
.odo.cf-odo{height:var(--fs);gap:0}
.cf-odo .dig{font-size:var(--fs);width:.5em;background:none;border-radius:0;
  -webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.cf-odo .dig::after{display:none}
.cf-pct{font:900 calc(var(--fs) * .3)/1 var(--head);color:var(--ochre);margin-top:.18em}
.cf-txts{position:relative;min-height:7.2em}
.cf-txt{position:absolute;left:0;top:0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.cf-txt.on{opacity:1;transform:none;transition-delay:.25s}
.cf-txt p{margin:0 0 12px;font-size:clamp(17px,1.3vw,20px);line-height:1.5;max-width:36ch;color:rgba(252,235,202,.9)}
.cf-src{font:400 11px/1 var(--mono);letter-spacing:.1em;color:var(--ochre)}
.cf-der{display:flex;flex-direction:column;align-items:flex-start;justify-self:center}
.cf-grilla{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,.45vw,8px);width:min(44vh,30vw)}
.cf-grilla i{aspect-ratio:1;border:1px solid rgba(252,235,202,.16);transform:scale(.82);
  transition:background-color .45s ease var(--d),border-color .45s ease var(--d),transform .6s cubic-bezier(.3,1.4,.5,1) var(--d)}
.cf-grilla i.on{background:var(--rust);border-color:var(--rust);transform:none}
.cf-grilla i.on.antes{background:#7a6a4c;border-color:#7a6a4c}
.cf-grilla.baja i{transition-delay:0s}
.cf-ley{display:flex;flex-direction:column;gap:8px;margin-top:18px;font:400 12px/1.3 var(--mono);letter-spacing:.08em;color:rgba(252,235,202,.78)}
.cf-ley i{display:inline-block;width:10px;height:10px;margin-right:10px;vertical-align:-1px;background:var(--rust)}
.cf-ley b{font-weight:700;color:var(--bone)}
.cf-ley-b{opacity:0;transition:opacity .5s}.cf-ley-b.on{opacity:1}
.cf-ley-b i{background:#7a6a4c}
/* P501: el CTA como estaba (texto a la izquierda, botón a la derecha), sobre el mismo fondo tinta; sin textura ni rasgado
   entre las cifras, el CTA y la puerta, para que se lea como un solo fondo continuo */
#datos>.tex{display:none}
.cf-cta2{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;padding-top:clamp(110px,18vh,190px);padding-bottom:clamp(30px,5vh,56px)}
/* P506: el CTA a mitad de camino entre los botones de las cifras y el símbolo de la puerta (que arranca ~21 % más abajo dentro de su pantalla) */
.cf-cta2 h3{margin:0;max-width:18ch;font:900 clamp(30px,3.2vw,52px)/.95 var(--head);text-transform:uppercase;color:var(--bone)}
.cf-cta2 p{margin:16px 0 0;max-width:44ch;font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:rgba(252,235,202,.88)}
.cf-cta2 .right{justify-self:end}
.cf-cta2 .rv{opacity:0;transform:translateY(24px)}
@media(max-width:900px){.cf-cta2{grid-template-columns:1fr}.cf-cta2 .right{justify-self:start}}
/* P528: fondo de Automatización con textura de plano técnico (como la hoja azul bajo la máquina del video):
   cuadrícula fina + líneas guía cada 5 celdas, en ocre muy tenue, que se apaga hacia los bordes; luz cálida desde arriba */
#auto{background-color:var(--ink)}
#auto>.gridbg{display:block!important;opacity:1;background-image:
  linear-gradient(rgba(208,137,59,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(208,137,59,.17) 1px,transparent 1px),
  linear-gradient(rgba(208,137,59,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(208,137,59,.07) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 72% 52% at 50% 50%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse 72% 52% at 50% 50%,#000 25%,transparent 72%)}
#auto::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 30% at 50% 42%,rgba(208,137,59,.09),transparent 100%)}
/* P534: la luz va al centro y se apaga antes del borde de arriba (ahí sube el papel rasgado sobre el video) */
/* P533: sin sombra abajo, para que el borde rasgado del tramo siguiente (color plano) calce con el fondo */

/* P530: texto chico antes del título del Camino C */
.ca-ante{display:block;font:500 clamp(15px,1.2vw,19px)/1.3 var(--body);text-transform:none;letter-spacing:0;margin-bottom:12px;color:var(--bone)}
/* selector ES/EN: legible (contraste AA) y con área de toque de 44 px sin cambiar cómo se ve */
.lang{font-size:12px}
.lang a{color:rgba(62,62,34,.82);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-13px -10px}
.on-dark .lang a{color:rgba(240,228,200,.8)}
.on-dark .lang i{color:rgba(240,228,200,.5)}

/* P526: la barra 01/02/03 de abajo repetía la etiqueta de cada cifra; se oculta */
.cf-nav{display:none!important}
.cf-nav{position:relative;z-index:1;display:flex;padding-bottom:clamp(22px,4vh,40px);opacity:0}
.cf-nav button{flex:1;position:relative;appearance:none;background:none;border:0;border-top:1px solid rgba(252,235,202,.2);padding:14px 12px 0 0;text-align:left;cursor:pointer;
  font:400 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(252,235,202,.62);transition:color .3s}
.cf-nav button span{color:var(--ochre);margin-right:10px}
.cf-nav button::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--ochre);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.cf-nav button.on{color:var(--bone)}.cf-nav button.on::before{width:100%}
.cf-nav button:hover{color:var(--bone)}
.cf-nav button:focus-visible{outline:2px solid var(--ochre);outline-offset:4px}
@media(max-width:820px){
  .cf-cab{padding-top:84px}
  .cf-escena{grid-template-columns:1fr;align-content:center;gap:18px}
  .cf-izq{--fs:clamp(96px,30vw,150px)}
  .cf-num{margin:4px 0 10px}
  .cf-txts{min-height:8.6em}
  .cf-txt p{font-size:15.5px}
  .cf-der{justify-self:start;flex-direction:row;align-items:flex-end;gap:16px}
  .cf-grilla{width:min(42vw,22svh);gap:3px}
  .cf-ley{margin:0;font-size:12px;color:rgba(252,235,202,.88)}
  .cf-src{font-size:12px}
  .cf-nav button{font-size:10px;letter-spacing:.1em;padding-right:6px}
  .cf-nav button span{display:block;margin:0 0 4px}
}

/* ═══════════ 03 · La puerta del viaje ═══════════ */
.puerta{position:absolute;inset:0;z-index:4;pointer-events:none}
.pt-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.pt-txt{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(36% + min(10vw,15vh) + 36px);display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0}
.pt-txt .num-tag{margin:0 0 14px;color:var(--ochre)}
.pt-txt .num-tag::before{background:var(--ochre)}
.pt-tit{margin:0;max-width:24ch;font:900 clamp(26px,2.7vw,44px)/.98 var(--head);text-transform:uppercase;color:var(--bone)}
.pt-tit span{color:var(--ochre)}
.pt-pal{list-style:none;display:flex;gap:clamp(18px,3vw,48px);margin:24px 0 0;padding:0;font:700 13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ochre)}
.pt-pal li{opacity:0;transform:translateY(8px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.pt-pal li.on{opacity:1;transform:none}
.pt-pal li::before{content:"";display:inline-block;width:7px;height:7px;background:currentColor;margin-right:10px;vertical-align:1px}
@media(max-width:820px){
  .pt-txt{top:calc(34% + min(23vw,13vh) + 28px)}
  .pt-txt .num-tag{font-size:11px;letter-spacing:.1em;gap:10px}
  .pt-pal{flex-direction:column;align-items:center;gap:12px;font-size:12px}
}

/* ═══════════ Capítulos sobre el video (P497): bloque chico abajo a la izquierda ═══════════
   La sombra nace en la esquina de abajo a la izquierda y se apaga antes de llegar a la maqueta. */
.capitulo{--a:0;position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden;opacity:var(--a);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 var(--gutter) clamp(40px,8vh,80px);
  background:radial-gradient(ellipse 70% 75% at 0% 100%,rgba(13,12,8,.92) 0%,rgba(13,12,8,.82) 40%,rgba(13,12,8,.5) 65%,rgba(13,12,8,0) 100%)}
.cp-n{font:400 12px/1 var(--mono);letter-spacing:.22em;color:var(--ochre);margin-bottom:12px}
.cp-n b{color:var(--bone);font-weight:700}
.cp-t{margin:0;font:900 clamp(40px,4.6vw,80px)/.86 var(--head);text-transform:uppercase;color:var(--bone);transform:translateY(calc((1 - var(--a)) * 24px))}
.cp-p{margin:16px 0 0;max-width:34ch;padding-left:16px;border-left:2px solid var(--ochre);font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:rgba(252,235,202,.94);transform:translateY(calc((1 - var(--a)) * 32px))}
.cp-frase{font-size:clamp(28px,2.9vw,48px);line-height:.96;max-width:16ch}
/* P535: en el alejamiento final, un degradado lateral desde toda la izquierda aparece de a poco junto con la frase */
/* P537: primero se forma el degradado (primera mitad de la rampa) y recién entonces aparece la frase (segunda mitad) */
.capitulo.cp-final{justify-content:center;padding-bottom:0;opacity:1;background:none}
.capitulo.cp-final::before{content:"";position:absolute;inset:0;z-index:-1;opacity:clamp(0,calc(var(--a) * 2),1);
  background:linear-gradient(to right,rgba(13,12,8,.9) 0%,rgba(13,12,8,.78) 26%,rgba(13,12,8,.4) 46%,rgba(13,12,8,0) 64%)}
.capitulo.cp-final .cp-frase{opacity:clamp(0,calc(var(--a) * 2 - 1),1);transform:translateY(calc((1 - clamp(0,calc(var(--a) * 2 - 1),1)) * 24px))}
@media(max-width:820px){.capitulo.cp-final{justify-content:flex-end;padding-bottom:56px}
  .capitulo.cp-final::before{background:linear-gradient(to top,rgba(13,12,8,.92) 0%,rgba(13,12,8,.75) 40%,rgba(13,12,8,0) 75%)}}
/* P529: la frase final del alejamiento, más grande */
.cp-final .cp-frase{font-size:clamp(44px,4.8vw,88px);max-width:15ch}
@media(max-width:820px){.cp-final .cp-frase{font-size:clamp(32px,9.6vw,46px)}}
/* P514-P525: títulos de capítulo grandes (aprobados con la cámara S22). Con el video viejo pueden rozar alguna maqueta hasta que llegue el render nuevo */
.capitulo:not(.cp-final) .cp-t{font-size:clamp(64px,7.6vw,132px)}
.capitulo:not(.cp-final) .cp-p{font-size:clamp(16px,1.25vw,19px);max-width:36ch}
@media(max-width:820px){.capitulo:not(.cp-final) .cp-t{font-size:clamp(44px,13vw,64px)}.capitulo:not(.cp-final) .cp-p{font-size:14.5px;max-width:30ch}}
.cp-frase span{display:block;color:var(--ochre);margin-top:.2em}
@media(max-width:820px){
  .capitulo{padding-bottom:56px;background:radial-gradient(ellipse 130% 58% at 0% 100%,rgba(13,12,8,.92) 0%,rgba(13,12,8,.8) 45%,rgba(13,12,8,.45) 70%,rgba(13,12,8,0) 100%)}
  .cp-t{font-size:clamp(38px,11vw,56px)}
  .cp-p{font-size:14.5px;max-width:30ch}
  .cp-frase{font-size:clamp(26px,7.4vw,34px)}
}

/* P541 · en vez del botón flotante: un botón chico al final de cada capítulo (identidad, comunidad, automatización) */
.btn-mini{display:inline-flex;align-items:center;gap:12px;justify-self:start;align-self:start;margin-top:clamp(22px,3.5vh,34px);padding:13px 18px;min-height:48px;box-sizing:border-box;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--bone);background:var(--rust);border:1px solid var(--rust);transition:background .25s,color .25s}
@media(max-width:520px){.btn-mini{letter-spacing:.07em;font-size:12px;white-space:nowrap;padding:13px 14px;gap:10px}}
.btn-mini::after{content:"→";font-size:14px;letter-spacing:0}
.btn-mini:hover{background:transparent;color:var(--rust)}
[data-oscuro] .btn-mini{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
[data-oscuro] .btn-mini:hover{background:transparent;color:var(--ochre)}
.btn-mini:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
#comunidad .co-pie .btn-mini{grid-column:1/-1;margin-top:0}

/* ═══ P545 · ronda 2 de móvil ═══ */
.ap3-cta-m{display:none}
/* P548: en la portada la barra no tiene fondo: logo y ES/EN claros sobre el fondo de la portada */
body.en-portada .bar{background:transparent;border-bottom-color:transparent;box-shadow:none}
body.en-portada .bar .sub{color:var(--ochre)}
.bar{transition:transform .35s ease,background-color .3s ease,border-color .3s ease}
.ap3-cta-m{transition:opacity .3s ease,visibility .3s}
#hero.saliendo .ap3-cta-m{opacity:0;visibility:hidden}
.ap3-medio{position:absolute;inset:0}
/* la portada reserva su alto desde el primer instante: la sección de números no aparece arriba y luego salta (CLS) */
main>section#hero{min-height:300vh}
@media (max-width:860px), (orientation:portrait) and (max-width:1100px){
  /* la portada ocupa la pantalla grande (sin barra de Safari): así no queda franja naranja bajo la imagen */
  #hero .sc-stage.ap3-stage{height:100lvh}
  /* la foto se ubica con transform (no cuenta como salto de diseño al medir la pantalla) */
  .ap3-medio{position:absolute;left:0;right:0;top:0;height:var(--ap3-m-alto,64%);transform:translate3d(0,var(--ap3-m-y,44lvh),0)}
  .ap3-ventana .ap3-medio img,.ap3-ventana .ap3-medio video{top:0!important;height:100%!important}
  /* el botón deja de empujar el texto: flota chico sobre la imagen, por encima de la barra del navegador */
  .ap3-texto .ap-cta{display:none}
  /* P547: la foto sale por abajo del escenario (no queda naranja debajo); la sección siguiente la tapa al subir */
  #hero .sc-stage.ap3-stage{overflow:visible}
  /* P556: en Safari del iPhone la portada fijada (sticky) se corre 1-2 px mientras se anima la barra: el fondo de la
     portada (tinta y su capa óxido) sigue 60 px más arriba, fuera de la pantalla, así nunca asoma una franja detrás */
  #hero .sc-stage.ap3-stage::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:60px;background:var(--ink);pointer-events:none}
  #hero .ap3-tinta{top:-60px}
  #hero .ap-hoja{top:-60px}
  #hero .ap3-ventana .ap3-medio img{object-position:50% 45%}
  /* P547: botón angosto (dos renglones, como botón), en óxido para contrastar con la foto sepia */
  .ap3-cta-m{display:inline-flex;align-items:center;gap:14px;position:absolute;z-index:6;left:50%;transform:translateX(-50%);width:max-content;
    top:calc(100svh - 92px - env(safe-area-inset-bottom,0px));max-width:230px;padding:14px 18px;box-sizing:border-box;
    font:600 12.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
    background:var(--rust);color:var(--bone);box-shadow:0 12px 32px rgba(13,12,8,.45),0 0 0 1px rgba(252,235,202,.18)}
  .ap3-cta-m::after{content:"→";font-size:16px;letter-spacing:0}
  .ap3-cta-m:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
  .ap3-texto .ap-lead{font-size:18px}
}
@media (max-width:820px){
  /* menos aire muerto entre el final de una sección y el comienzo de la siguiente */
  #identidad,#comunidad,#criterio,#asesoria,#caminos,#faq,#quien{padding:clamp(88px,12vh,120px) 0 56px}
  #disponible,#auto{padding-bottom:48px}
  /* el cierre termina en el borde: sin alto mínimo ni hueco después del © */
  #cierre{min-height:0;padding:clamp(88px,12vh,120px) 0 calc(28px + env(safe-area-inset-bottom,0px))}
  #cierre .foot{margin-top:40px;font-size:12px;opacity:1}
  #cierre .meta{opacity:1}
  #cierre .btn{white-space:nowrap;letter-spacing:.08em}
  /* letra mínima 12 px */
  .ap3-cinta{font-size:12px}
  .quote+.src,.faq .a .src,.stat .src,.panel .src,.teletipo .a .src,.fi-n,.mc-txt,#comunidad .mono.rust{font-size:12px!important}
  #comunidad .mono.rust{white-space:nowrap}
  /* el remate de identidad alineado con el resto */
  #identidad .remate{align-self:flex-start;margin-left:0;margin-right:0;max-width:none;text-align:left}
  /* tarjetas apiladas de caminos: cada una deja ver el título completo de la anterior */
  .camino{top:calc(76px + var(--i) * 92px)}
  /* texto del capítulo sobre el video: degradado más firme para leer bien */
  .capitulo{background:radial-gradient(ellipse 140% 62% at 0% 100%,rgba(13,12,8,.95) 0%,rgba(13,12,8,.88) 50%,rgba(13,12,8,.55) 75%,rgba(13,12,8,0) 100%)}
  a.brand{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:400px){
  .wrap{padding-left:22px;padding-right:22px}
  .es-pista{padding-left:22px;padding-right:22px}
}
@media (max-width:820px){
  #caminos .pila::after{content:"";display:block;height:200px}
  #asesoria .mono{font-size:12px}
  /* identidad: imagen antes del remate y el botón al final de todo */
  #identidad .side>div:first-child{display:contents}
  #identidad .side{display:flex;flex-direction:column}
  #identidad .image-options{order:1;margin:28px 0 8px}
  #identidad .remate{order:2}
  #identidad .btn-mini{order:3}
  /* automatización: el titular manda; el diagrama baja de tamaño */
  #auto .c4-head .h-l{font-size:clamp(38px,10.4vw,48px);line-height:.98}
  /* ronda Opus: el diagrama no compite con el titular (el ocre grande queda solo para el titular) */
  #auto .am-caja b{font:600 15px/1.2 var(--mono);letter-spacing:.12em;color:var(--ochre)}
  /* P550: el resultado es lo importante: titular de display en ocre, más chico que el titular de la sección pero con presencia */
  #auto .am-res{display:grid;gap:2px}
  #auto .am-res b{font:900 clamp(28px,8.4vw,36px)/.98 var(--head);text-transform:uppercase;letter-spacing:0;color:var(--ochre)}
  /* P550: botones centrados en el celular */
  .btn-mini{align-self:center;justify-self:center;margin-left:auto;margin-right:auto}
  #identidad .btn-mini,#comunidad .co-pie .btn-mini{align-self:center;justify-self:center}
  .mcta .right{justify-self:center;text-align:center;width:100%}
  .mcta .right .btn{margin:0 auto}
  /* P550: el video de la mesa ocupa la pantalla grande (sin franja gris abajo cuando Safari esconde su barra);
     el texto del capítulo queda por encima de la barra cuando está visible */
  .mesa-escena{height:100lvh}
  .capitulo,.capitulo.cp-final{padding-bottom:calc(56px + 100lvh - 100svh)}
  #auto .am-tareas li{padding:9px 10px}
  #auto .am-caja{padding:12px 14px 12px}
  #auto .am-flecha{height:20px;margin:8px 0 8px 20px}
  #auto .am-marco{padding:10px 14px;gap:8px}
  #auto .am-lbl{font-size:12px}
}
html{background:var(--rust)}
/* Nada que entre animado desde un costado (fichas de la asesoría, tarjetas) puede ensanchar la página en el celular.
   P559: pero el recorte va SOLO en secciones sin bloques fijados. En el iPhone (Safari y Chrome), un recorte horizontal
   en un ancestro de un bloque sticky o fijado hace que ese bloque tiemble 1-3 px al bajar: en la grabación de Fer la
   barra fija de arriba quedaba quieta y la portada y las cifras temblaban. Secciones con bloque fijado: portada,
   cifras, pilares, mesa y caminos (siempre); automatización, especialidades, disponible y preguntas (solo en pantallas
   grandes). */
main>section:not(#hero):not(#datos):not(#pilares):not(.mesa):not(#caminos):not(#auto):not(#especialidades):not(#disponible):not(#faq){overflow-x:clip}
@media (max-width:820px){#especialidades{overflow-x:clip}}
@media (max-width:900px),(max-height:639px){#disponible{overflow-x:clip}}
/* en preguntas el título va fijado en pantallas grandes: se recorta solo la tarjeta de respuestas (no es su ancestro) */
.teletipo{overflow-x:clip}
/* y los bloques fijados van en su propia capa, para que el iPhone los mueva junto con el scroll */
#hero .sc-stage,.mesa-escena,#caminos .camino{-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}