/* F1 · Entrada de Natalia Briseño Campillo: el oficio y los tres caminos.
   Se quita el cintillo de platino. «Estrategia y crisis.» se arma por sílabas (suben 16 px, escalonadas 30 ms,
   600 ms en total); «El periodismo como raíz.» llega 120 ms después, y un trazo rosa nace del hilo de la página
   y subraya el oficio. (Los tres caminos de cristal se sustituyeron el 3 nov por el panel «¿A qué vienes?»: f4/inicio.css.)
   Se carga después de entrada.css y fase1.css; sólo toca lo que vive en #of1.
   Curvas: entrada cubic-bezier(.2,.7,.2,1), salida cubic-bezier(.4,0,1,1). Sólo se animan transform y opacity
   (y el stroke-dashoffset del trazo, como pide la especificación). Con movimiento reducido, todo llega quieto. */

.of1{--of1-entra:cubic-bezier(.2,.7,.2,1);--of1-sale:cubic-bezier(.4,0,1,1);--of1-platino:#f3f2f5}

/* ——— El oficio: sin cintillo, sin brillo de metal ——— */
.aire .aire-oficio.of1{position:relative;display:block;margin:22px 0 0 calc(-1 * var(--aire-sangria));padding:0 0 0 var(--aire-sangria);background:none;color:var(--of1-platino);overflow:visible;font:inherit;font-stretch:normal;animation:none}
.aire .aire-oficio.of1::before,.aire .aire-oficio.of1::after{content:none;display:none;animation:none}
.aire .aire-oficio.of1 .of1-sr{position:absolute;display:block;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;animation:none}
.of1 .of1-cin{position:relative;display:inline-block;font:560 clamp(23px,6.9vw,30px)/1.1 var(--sans);font-stretch:106%;letter-spacing:-.018em;color:var(--of1-platino);animation:none}
.of1 .of1-pal{position:relative;display:inline-block;white-space:nowrap;animation:none}
.of1 .of1-s{position:relative;display:inline-block;animation:none}
.of1 .of1-raiz{display:block;margin-top:14px;font:italic 400 clamp(19px,5.4vw,23px)/1.2 var(--didona);letter-spacing:-.005em;color:var(--rosa-suave)}

/* El trazo: nace del hilo (orilla izquierda del oficio), baja y corre bajo «Estrategia y crisis.» */
.of1-trazo{position:absolute;left:calc(-1 * var(--aire-sangria));top:0;width:calc(100% + var(--aire-sangria) + 6px);height:calc(100% + 12px);overflow:visible;pointer-events:none}
.of1-trazo path{fill:none;stroke:var(--rosa-hilo);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.of1-punta{fill:var(--rosa-perla)}
/* Si el hilo de la entrada no se dibujó (sin módulo), el trazo es sólo el subrayado: sin gancho que no nace de nada */
html:not(.aire-vivo) .of1-trazo{clip-path:inset(-4px -8px -8px var(--aire-sangria))}

/* ——— La llegada: nombre → oficio (el panel llega después, f4/inicio.css), todo en menos de 2 s ——— */
@media (prefers-reduced-motion:no-preference){
 /* Siete sílabas: 6 × 30 ms + 420 ms = 600 ms */
 .of1 .of1-s{animation:of1-sube .42s var(--of1-entra) calc(.45s + var(--k) * 30ms) both}
 .of1 .of1-raiz{animation:of1-raiz .42s var(--of1-entra) 1.17s both}
 .of1 .of1-trazo path{animation:of1-traza .6s var(--of1-entra) 1.3s both}
 .of1 .of1-punta{animation:of1-aparece .2s var(--of1-entra) 1.86s both}
 /* Con el módulo, el trazo espera a que el hilo pase por la orilla y entonces brota de él */
 .of1.of1-js .of1-trazo path{animation:none;stroke-dashoffset:1}
 .of1.of1-js .of1-punta{animation:none;opacity:0}
 .of1.of1-js.of1-traza .of1-trazo path{animation:of1-traza .6s var(--of1-entra) both}
 .of1.of1-js.of1-traza .of1-punta{opacity:1;animation:of1-aparece .2s var(--of1-entra) .56s both}
}
@keyframes of1-sube{from{opacity:0;transform:translateY(16px)}}
@keyframes of1-raiz{from{opacity:0;transform:translateY(12px)}}
@keyframes of1-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes of1-aparece{from{opacity:0}}

/* ——— Teléfonos bajos (Safari con barras): todo cabe en la primera pantalla ——— */
@media (max-width:899px) and (max-height:780px){
 .aire .aire-oficio.of1{margin-top:16px}
 .of1 .of1-cin{font-size:clamp(22px,6.4vw,26px)}
 .of1 .of1-raiz{margin-top:10px;font-size:clamp(18px,5vw,20px)}
}

/* ——— Computadora ——— */
@media (min-width:900px){
 .aire .aire-oficio.of1{margin-top:24px}
 .of1 .of1-cin{font-size:clamp(30px,2.6vw,40px)}
 .of1 .of1-raiz{display:inline-block;margin:0 0 0 .5em;font-size:clamp(23px,2vw,30px)}
}
@media (min-width:900px) and (max-height:780px){
 .aire .aire-oficio.of1{margin-top:18px}
}