/* «Al aire» · la entrada de Natalia Briseño Campillo.
   Una transmisión que empieza: una línea de platino enciende su foto, el cintillo dice su oficio y la guía de
   canales enseña lo que hoy está al aire en su casa. El hilo rosa nace en la C de Campillo, cose la guía
   (lo de hoy en Dosis baja a la historia detrás en Rol) y deja el relevo al hilo de la casa.
   Todo se entiende en la primera pantalla, sin bajar.
   La llegada es sólo CSS (se pinta aunque el módulo falle); entrada.js agrega el globo, el hilo, la costura
   Dosis → Rol y el letrero «Al aire» que responde. Clases con prefijo aire- para no chocar con natalia.css
   (que ya usa .canal, .canales, .oficio, .onda, .pronto, .al-aire). Sin arcos, sin numeralia. */

:root{
 /* Lo que la paleta de la casa todavía no tenía como variable */
 --aire-perla:#f9d6e3;
 --aire-platino:linear-gradient(100deg,#8e8a93 0%,#d9d7dc 34%,#f3f2f5 58%,#b4b1b9 100%);
 --aire-linea:rgb(236 232 226/.12);
 --aire-negro:#020202;  /* el negro de fondo de su foto: la entrada lo toma para que el borde del marco no se note */
}
.aire-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ——— Arriba: el letrero «Al aire» dice qué está al aire de verdad (y lleva ahí) ——— */
.aire-tally{position:relative;display:inline-flex;align-items:center;min-width:0;min-height:40px;padding-right:6px;text-decoration:none;color:var(--texto);pointer-events:auto;white-space:nowrap}
.aire-luz{flex:none;position:relative;width:8px;height:8px;margin:0 10px 0 2px;border-radius:50%;background:var(--rosa-hilo);box-shadow:0 0 0 3px rgb(196 92 124/.16)}
.aire-luz::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgb(196 92 124/.5);opacity:0}
.aire-tally.apagada .aire-luz{background:#3a3438;box-shadow:none;animation:none}
.aire-tally.apagada .aire-luz::after{animation:none}
.aire-tally-t{font:600 11px/1 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--aire-perla)}
.aire-tally-c{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:9px;padding-left:10px;font:500 12.5px/1 var(--sans);color:rgb(236 232 226/.86);transition:color .3s}
.aire-tally-c::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--sutil)}
.aire-tally:hover .aire-tally-c{color:var(--aire-perla)}
.aire-tally-c.cambia>span{display:inline-block;animation:aire-sube .35s var(--ease) both}
.aire-largo{display:none}
.aire-oreja{display:none}
.barra .hablemos{font-size:11px}

/* ——— La entrada ——— */
.aire{
 --aire-sangria:20px;   /* del hilo al texto: el hilo corre por el margen izquierdo */
 /* Su foto: sólo encuadre, nada encima. El marco termina donde empieza el cintillo (en escritorio, al pie de su bloque),
    y la foto se acomoda desde ese borde: la barbilla queda al 44 % del alto de la foto y el borde al 51 %, sobre el abrigo,
    así que entre su barbilla y el cintillo hay 7 % de la foto de aire. El destello desenfocado (66 %) queda fuera del marco.
    --aire-ih es el alto de la foto: deja su pelo debajo de la barra de arriba. --aire-nariz: dónde queda la punta de su nariz
    (60.85 % del ancho), a la derecha del nombre. */
 --aire-ih:clamp(300px,calc((100svh - 633px) * 2.4),700px);
 --aire-nariz:calc(62px + 49vw);
 --aire-fh:100svh;      /* alto del marco: llega hasta arriba de la pantalla */
 --aire-ojo:calc(var(--aire-fh) - var(--aire-ih) * .255);   /* a la altura de su mirada se enciende la señal (desde arriba del marco) */
 --s:0;                 /* avance del scroll sobre la entrada, 0 → 1 (lo pone entrada.js) */
 position:relative;min-height:100svh;padding:0;isolation:isolate;
 /* El fondo de la entrada es el negro de su foto y se funde al ónix de la casa al pie de la sección, lejos de ella */
 background:linear-gradient(var(--aire-negro) calc(100% - 26svh),var(--onix))}

/* La foto: sólo encuadre, sin retoque, sin degradados ni velos. Su cara arriba a la derecha, mirando hacia su frase.
   Vive en el bloque del nombre: en el teléfono su borde de abajo es el borde de arriba del cintillo. */
.aire-retrato{position:relative}
.aire-foto{position:absolute;left:calc(-1 * (var(--g) + var(--aire-sangria)));bottom:-12px;width:100vw;height:var(--aire-fh);margin:0;overflow:hidden;z-index:-1;background:var(--aire-negro);pointer-events:none}
.aire-foto img{position:absolute;left:calc(var(--aire-nariz) - var(--aire-ih) * .9115);bottom:calc(var(--aire-ih) * -.49);width:auto;max-width:none;height:var(--aire-ih)}
/* La línea de platino que enciende la señal, a la altura de su mirada */
.aire-senal{position:absolute;left:0;right:0;bottom:calc(var(--aire-ih) * .255);height:1px;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgb(243 242 245/0),#f3f2f5 18%,#fff 50%,#f3f2f5 82%,rgb(243 242 245/0));box-shadow:0 0 14px 1px rgb(243 242 245/.55)}
.aire-chispas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none}

/* ——— El hilo de la entrada ——— */
.aire-hilo{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.aire-hilo-trazo{fill:none;stroke:var(--rosa-hilo);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.aire-hilo-halo{fill:none;stroke:var(--rosa-hilo);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.13}
.aire-hilo-pulso{fill:#fff;opacity:0;}
.aire-nudo{position:absolute;left:-4.5px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--onix);border:1px solid rgb(196 92 124/.55);z-index:4;transition:background-color .45s,box-shadow .45s,border-color .45s,transform .45s var(--ease)}
.aire-nudo.prendido{background:var(--rosa-hilo);border-color:var(--rosa-hilo);box-shadow:0 0 0 4px rgb(196 92 124/.13)}
.aire-nudo.late{transform:scale(1.55)}
.aire-nudo-hueco.prendido{background:var(--onix);border-color:var(--rosa-suave);box-shadow:none} /* lo que todavía no sale al aire */
.aire-solo-esc{display:none}
html:not(.aire-vivo) .aire-nudo{visibility:hidden} /* sin módulo no hay hilo: tampoco nudos sueltos */
/* El relevo al hilo de la casa: un nudo en la orilla de abajo, alineado con el hilo */
.aire-salida{top:auto;bottom:0;left:var(--g);margin:0 0 -4.5px -4.5px}

/* ——— El marco: todo cabe en la primera pantalla ——— */
.aire-marco{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:72px var(--gd) calc(12px + env(safe-area-inset-bottom,0px)) var(--g)}

/* Lo que ella mira: su frase, del lado hacia donde voltea */
.aire-mirada{margin:0 0 12px var(--aire-sangria);max-width:10.5em;font:italic 400 19px/1.24 var(--didona);color:rgb(236 232 226/.95);text-shadow:0 1px 14px rgb(11 10 12/.85)}
.aire-mirada em{display:block;color:var(--rosa-suave)}

/* Quién: el nombre (bloque reemplazable), el cintillo de platino y su bajada */
.aire-quien{position:relative;padding-left:var(--aire-sangria)}
.nombre-marca{margin:0;font-family:var(--didona);font-weight:400;color:var(--texto);letter-spacing:-.012em;text-shadow:0 2px 24px rgb(11 10 12/.5)}
.aire-nm{display:block;overflow:hidden;padding:.1em 0 .07em;margin:-.1em 0 -.07em}
.aire-nm>span{display:block}
.aire-nm-1{font-size:clamp(46px,13.4vw,112px);line-height:.94}
.aire-nm-2{font-size:clamp(24px,6.8vw,54px);line-height:1.08;font-style:italic;margin-top:.02em}
.aire-c{position:relative;color:var(--rosa-suave);transition:text-shadow .9s}
.aire-c.brilla{text-shadow:0 0 18px rgb(196 92 124/.8),0 0 2px rgb(255 255 255/.6)}
.aire-oficio{position:relative;display:block;margin:12px calc(-1 * var(--gd)) 0 calc(-1 * var(--aire-sangria));padding:9px 14px 10px var(--aire-sangria);background:var(--aire-platino);color:var(--onix);overflow:hidden;font:600 15px/1.25 var(--sans);font-stretch:96%}
.aire-oficio::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rosa-hilo)}
/* El brillo lento del platino: pasa como reflejo en metal, de vez en cuando */
.aire-oficio::after,.aire-v-quinta::after,.aire-quinta .aire-ir::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;background:linear-gradient(100deg,rgb(255 255 255/0) 30%,rgb(255 255 255/.9) 50%,rgb(255 255 255/0) 70%);transform:translateX(-120%);mix-blend-mode:screen;opacity:1}
.aire-oficio span{position:relative;display:block}
.aire-bajada{display:none}

/* ——— La guía de canales ——— */
.aire-guia{margin-top:14px}
.aire-guia-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px var(--aire-sangria);font:600 11px/1 var(--sans);font-stretch:116%;letter-spacing:.18em;text-transform:uppercase;color:var(--sutil)}
.aire-guia-t>span{white-space:nowrap}
.aire-guia-t>span:first-child{color:var(--texto)}
.aire-p-esc{display:none}
/* En el teléfono: Dosis y Rol lado a lado, la costura debajo y luego los renglones */
.aire-canales{display:grid;grid-template-columns:var(--aire-sangria) minmax(0,1fr) 12px minmax(0,1fr);margin:0;padding:0;list-style:none}
.aire-canales>li{position:relative;grid-column:1/-1;min-width:0}
.aire-canales>.aire-dosis{grid-column:2}
.aire-canales>.aire-rol{grid-column:4}
.aire-ir{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n d v" "a a v";align-items:center;column-gap:9px;row-gap:2px;padding:6px 0 6px var(--aire-sangria);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a.aire-ir::after,.aire-costura a::after{content:"";position:absolute;inset:0 calc(-1 * var(--gd)) 0 0;background:linear-gradient(90deg,rgb(196 92 124/0),rgb(196 92 124/.08));opacity:0;transition:opacity .35s;pointer-events:none}
a.aire-ir:hover::after,a.aire-ir:active::after,.aire-costura a:hover::after,.aire-costura a:active::after{opacity:1}
.aire-c-nombre{grid-area:n;font:600 12.5px/1.2 var(--sans);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase;color:var(--texto);transition:color .3s;white-space:nowrap}
.aire-c-desc{grid-area:d;min-width:0;font:italic 400 15px/1.2 var(--didona);color:var(--rosa-suave)}
.aire-ahora{grid-area:a;position:relative;display:block;min-width:0}
.aire-tx{display:block}
.aire-k{display:block;font:600 11px/1.35 var(--sans);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;color:var(--aire-perla);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aire-t{display:block;font:400 14px/1.32 var(--sans);font-stretch:96%;color:rgb(236 232 226/.8)}
.aire-ventana{grid-area:v;position:relative;display:block;overflow:hidden;width:48px;height:40px;background:var(--onix-2);border:1px solid rgb(236 232 226/.16);transition:border-color .35s}
.aire-ventana img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
a.aire-ir:hover .aire-c-nombre,a.aire-ir:focus-visible .aire-c-nombre{color:var(--aire-perla)}
a.aire-ir:hover .aire-ventana,a.aire-ir:focus-visible .aire-ventana{border-color:rgb(196 92 124/.65)}

/* Dosis y Rol: ventanas destacadas con sus mapas */
.aire-ventanal .aire-ir{grid-template-columns:minmax(0,1fr);grid-template-areas:"v" "n" "d";align-items:start;row-gap:0;padding:0 0 11px}
.aire-ventanal .aire-ventana{width:100%;height:clamp(80px,10.4svh,104px);margin-bottom:9px}
.aire-ventanal .aire-c-nombre{font-size:12px;letter-spacing:.1em}
.aire-ventanal .aire-c-desc{margin-top:2px}
.aire-ventanal a.aire-ir::after{inset:-4px}

/* La ventana de Dosis: el globo gira a donde pasó cada cápsula; sin JS, la edición como blíster */
.aire-v-dosis{background:radial-gradient(60% 70% at 50% 54%,rgb(196 92 124/.14),transparent 70%),#0f0d11}
.aire-globo{position:absolute;inset:0;width:100%;height:100%;display:block}
.aire-blister{position:absolute;inset:28px 8px 6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:4px 6px}
.aire-blister span{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgb(236 232 226/.7)}
.aire-blister span::before{content:"";display:inline-block;width:12px;height:5px;margin-right:6px;border-radius:3px;background:linear-gradient(90deg,var(--rosa-hilo) 50%,#ece8e2 50%);vertical-align:1px}
.aire-con-globo .aire-blister{display:none}
.aire-aqui{display:none;position:absolute;left:50%;top:54%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--rosa-hilo);box-shadow:0 0 4px rgb(196 92 124/.5)}
.aire-aqui::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgb(196 92 124/.75);animation:aire-onda 2.4s ease-out infinite}
.aire-con-globo .aire-aqui{display:block}
.aire-sello{position:absolute;left:6px;top:6px;z-index:2;padding:3px 5px 2px;font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--texto);background:rgb(11 10 12/.74)}
.aire-v-rol img{object-position:38% 42%}
.aire-s-esc{display:none}

/* La costura: lo de hoy (Dosis) y, por el hilo, la historia que lo explica (Rol) */
.aire-costura{padding:9px 0 9px var(--aire-sangria);border-top:1px solid var(--aire-linea)}
.aire-costura a{position:relative;display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.aire-costura a::after{inset:-5px calc(-1 * var(--gd)) -5px calc(-1 * var(--aire-sangria))}
.aire-costura .aire-nudo{left:calc(-1 * var(--aire-sangria) - 4.5px);top:3px}
.aire-detras{margin-top:10px}
.aire-detras .aire-nudo{top:6px}
.aire-hoy .aire-k{padding-right:118px}
.aire-hoy .aire-t{margin-top:2px;font:400 18px/1.16 var(--didona);color:var(--texto);letter-spacing:-.003em}
.aire-costura .aire-tx{font-size:13.5px;line-height:1.36}
.aire-detras .aire-tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.aire-anio{display:inline;margin-right:.3em;font:italic 400 18px/0 var(--didona);color:var(--rosa-suave)}
.aire-detras .aire-t{display:inline;font-size:13.5px;line-height:1.36;color:rgb(236 232 226/.76)}
.aire-tx.sale{animation:aire-sale .32s ease-in both}
.aire-tx.entra{animation:aire-entra .55s var(--ease) both}
.aire-costura a:hover .aire-t,.aire-costura a:focus-visible .aire-t{color:var(--aire-perla)}

/* La costura avanza sola: una marca por cápsula y pausa (WCAG 2.2.2), a la derecha de lo de hoy */
.aire-barras{position:absolute;right:0;top:4px;z-index:5;display:flex;align-items:center;min-width:112px;height:24px}
.aire-barras button{position:relative;flex:1 0 24px;height:24px;min-width:24px}
.aire-barras button::before,.aire-barras button::after{content:"";position:absolute;left:2px;right:2px;top:11px;height:2px;background:rgb(236 232 226/.28)}
.aire-barras button::after{background:var(--rosa-hilo);transform:scaleX(0);transform-origin:left}
.aire-barras button.vista::after,.aire-barras button.activa::after{transform:none}
.aire-barras.corre button.activa::after{transform:scaleX(0);animation:aire-llena var(--dur,6500ms) linear forwards}
.aire-barras.quieta button.activa::after{animation-play-state:paused}
.aire-barras .aire-pausa{flex:none;width:26px;display:grid;place-items:center;color:var(--texto)}
.aire-barras .aire-pausa::before,.aire-barras .aire-pausa::after{display:none}
.aire-pausa svg{width:9px;height:9px;fill:currentColor}

/* Ktarsis y Podcast: renglones sencillos */
.aire-renglon{border-top:1px solid var(--aire-linea)}
.aire-renglon .aire-tx{display:flex;align-items:baseline;gap:7px;min-width:0}
.aire-renglon .aire-t{order:-1;white-space:nowrap}
.aire-renglon .aire-k{flex:1;min-width:0;font:400 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--sutil)}
.aire-renglon .aire-k::before{content:"· "}
/* Ktarsis: su rostro, encuadrado sin retoque */
.aire-v-ktarsis img{inset:auto;left:50%;top:50%;width:calc(5.2 * 48px);height:auto;max-width:none;transform:translate(-50%,-19.5%)}
/* Podcast: la voz todavía casi en silencio */
.aire-v-voz{height:30px;background:radial-gradient(circle at 50% 50%,rgb(196 92 124/.16),transparent 70%),var(--onix-2)}
.aire-v-voz svg{position:absolute;inset:0;width:100%;height:100%}
.aire-v-voz path{fill:none;stroke:var(--rosa-suave);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.8}
.aire-pronto .aire-c-nombre{color:rgb(236 232 226/.84)}
.aire-pronto .aire-ahora{display:none}
.aire-pronto .aire-ir{grid-template-areas:"n d v"}

/* Quintaesencia: su práctica, en una franja de platino con brillo lento */
.aire-q-linea,.aire-cta{display:none}
.aire-quinta{margin-top:6px}
.aire-quinta .aire-ir{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n d" "l l" "c c";align-items:baseline;row-gap:3px;column-gap:8px;margin-right:calc(-1 * var(--gd));padding:9px 14px 10px var(--aire-sangria);background:var(--aire-platino);color:var(--onix);overflow:hidden}
.aire-quinta .aire-ir::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rosa-hilo)}
.aire-quinta .aire-ventana,.aire-quinta .aire-ahora{display:none}
.aire-quinta .aire-c-nombre,.aire-quinta a.aire-ir:hover .aire-c-nombre{font-size:11.5px;letter-spacing:.1em;color:var(--onix)}
.aire-quinta .aire-c-desc{font-size:15px;color:var(--rosa-tinta);white-space:nowrap}
.aire-quinta .aire-q-linea{grid-area:l;display:block;font:500 13.5px/1.3 var(--sans);font-stretch:96%;color:rgb(11 10 12/.84)}
.aire-quinta .aire-cta{grid-area:c;display:block;margin-top:1px;font:italic 400 19px/1.1 var(--didona);color:var(--onix)}
.aire-quinta .aire-cta span{display:inline-block;transition:transform .35s var(--ease)}
.aire-quinta a.aire-ir:hover .aire-cta span{transform:translateX(5px)}
.aire-quinta a.aire-ir::after{background:linear-gradient(100deg,rgb(255 255 255/0) 30%,rgb(255 255 255/.9) 50%,rgb(255 255 255/0) 70%);inset:0 auto 0 0;opacity:1}
.aire-quinta .aire-nudo{top:13px}

/* Foco visible: dos píxeles de rosa hilo, separado del borde */
.aire :focus-visible,.aire-tally:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:3px}
.aire-quinta .aire-ir:focus-visible{outline-color:var(--rosa-tinta)}

/* ——— La transmisión empieza: sólo CSS, todo legible a los 0.5 s ——— */
@media (prefers-reduced-motion:no-preference){
 .aire-luz{animation:aire-prende .45s var(--ease) both,aire-respira 2.8s ease-in-out 1.6s infinite}
 .aire-luz::after{animation:aire-onda 2.8s ease-out 1.6s infinite}
 .aire-foto{animation:aire-enciende .75s cubic-bezier(.3,0,.1,1) .3s both}
 .aire-foto img{animation:aire-acerca 2.4s var(--ease) .08s both}
 .aire-senal{animation:aire-raya .34s var(--ease) both}
 .aire-nm>span{animation:aire-asoma .6s var(--ease) both}
 .aire-nm-1>span{animation-delay:.03s}
 .aire-nm-2>span{animation-delay:.1s}
 .aire-oficio{animation:aire-cinta .4s var(--ease-io) .15s both}
 .aire-oficio span{animation:aire-aparece .3s ease-out .28s both}
 .aire-oficio::after{animation:aire-barre 13s var(--ease-io) 1.8s infinite}
 .aire-mirada{animation:aire-sube .7s var(--ease) .3s both}
 .aire-bajada{animation:aire-aparece .6s ease-out .34s both}
 .aire-guia-t{animation:aire-aparece .45s ease-out .26s both}
 .aire-canales>li{animation:aire-sube .45s var(--ease) calc(.28s + var(--i,0) * 40ms) both}
 .aire-ventana>*{animation:aire-revela .55s var(--ease-io) calc(.36s + var(--i,0) * 40ms) both}
 .aire-quinta .aire-ir::after,.aire-v-quinta::after{animation:aire-barre 13s var(--ease-io) 8.3s infinite}
}
@keyframes aire-prende{from{transform:scale(0)}}
@keyframes aire-respira{50%{opacity:.6}}
@keyframes aire-onda{0%{opacity:.75;transform:scale(.55)}70%,100%{opacity:0;transform:scale(1.55)}}
@keyframes aire-enciende{from{clip-path:inset(var(--aire-ojo) 0 calc(var(--aire-fh) - var(--aire-ojo) - 1px) 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes aire-acerca{from{transform:scale(1.045)}}
/* La raya de luz se traza y se apaga justo cuando la foto empieza a abrirse: nunca queda encima de ella */
@keyframes aire-raya{0%{opacity:1;transform:scaleX(0)}70%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes aire-asoma{from{transform:translateY(106%)}}
@keyframes aire-cinta{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes aire-aparece{from{opacity:0}}
@keyframes aire-sube{from{opacity:0;transform:translateY(7px)}}
@keyframes aire-revela{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes aire-barre{0%{transform:translateX(-120%)}10%,100%{transform:translateX(190%)}}
@keyframes aire-llena{to{transform:scaleX(1)}}
@keyframes aire-sale{to{opacity:0;transform:translateY(-6px)}}
@keyframes aire-entra{from{opacity:0;transform:translateY(8px)}}

/* ——— Teléfonos bajos (Safari con barras, 360 × 740…): todo sigue cabiendo ——— */
@media (max-width:899px) and (max-height:780px){
 .aire{--aire-ih:clamp(260px,calc((100svh - 560px) * 2.2),560px)}
 .aire-mirada{display:none}
 .aire-pronto{display:none}
 .aire-nm-1{font-size:clamp(40px,11.8vw,60px)}
 .aire-nm-2{font-size:clamp(22px,6.2vw,32px)}
 .aire-oficio{font-size:14px;padding-block:7px 8px}
 .aire-guia{margin-top:12px}
 .aire-ventanal .aire-ventana{height:clamp(72px,11svh,96px)}
 .aire-renglon .aire-ir{padding-block:6px}
}
@media (max-width:899px) and (max-height:690px){
 .aire{--aire-ih:clamp(260px,calc((100svh - 505px) * 2.4),480px)}
 .aire-guia-t{display:none}
 .aire-pronto{display:none}
 .aire-ventanal .aire-c-desc{display:none}
}
/* «Muestra» es más largo que «Al aire»: el letrero se aprieta antes de que la fecha se corte */
@media (max-width:389px){
 .aire-tally-t{letter-spacing:.14em}
 .aire-tally-c{margin-left:7px;padding-left:8px}
}
@media (max-width:374px){
 .barra .hablemos{padding:0 12px;letter-spacing:.16em}
 .aire-tally-t{letter-spacing:.14em}
 .aire-tally-c{margin-left:7px;padding-left:8px;font-size:12px}
 .aire-ventanal .aire-c-nombre{font-size:11px;letter-spacing:.06em}
 .aire-barras{min-width:96px}
 .aire-hoy .aire-k{padding-right:100px}
 .aire-c-nombre{font-size:12px;letter-spacing:.1em}
 .aire-oficio{font-size:14px}
 .aire-hoy .aire-t{font-size:17px}
 .aire-renglon .aire-k{display:none}
 .aire-quinta .aire-c-desc{display:none}
 .aire-guia-t{letter-spacing:.12em;gap:8px}
}

/* ——— Escritorio: el cintillo a la izquierda, ella a la derecha, la guía como parrilla de programación ——— */
@media (min-width:900px){
 .barra{padding:20px max(56px,4.4vw)}
 .aire-largo{display:inline}
 .aire-corto{display:none}
 .aire-tally-c{font-size:13px}
 .aire{
  --aire-sangria:28px;
  --aire-ih:calc((100svh - 440px) * 2.5);
  --aire-nariz:calc(75vw - 10.6svh);
  --aire-vh:clamp(96px,12.4svh,124px);   /* alto de las ventanas de la parrilla */
  --g:max(56px,4.4vw);--gd:max(56px,4.4vw)}
 /* La foto ocupa la derecha, su cara a tres cuartos del ancho. El marco termina al pie del bloque del nombre:
    la guía de canales va debajo, sobre ónix, nunca sobre ella. Al bajar, la foto se desliza un poco dentro de su marco. */
 .aire-retrato{position:static}
 .aire-foto{left:calc(-1 * var(--g));bottom:0}
 .aire-foto img{translate:0 calc(var(--s) * 6svh)}
 .aire-marco{padding:96px var(--gd) 20px var(--g)}
 /* La frase, junto a su mirada */
 .aire-mirada{position:absolute;top:27svh;right:calc(25vw + 10.5svh + 54px);margin:0;max-width:13em;font-size:clamp(20px,1.6vw,26px);text-align:right}
 .aire-quien{max-width:min(880px,62vw)}
 .aire-nm-1{font-size:clamp(72px,7.6vw,124px)}
 .aire-nm-2{font-size:clamp(34px,3.5vw,58px)}
 .aire-oficio{display:inline-block;margin:16px 0 0 calc(-1 * var(--aire-sangria));padding:11px 30px 12px var(--aire-sangria);font-size:16px}
 .aire-bajada{display:block;margin:14px 0 0;max-width:44ch;font:400 18px/1.4 var(--sans);color:rgb(236 232 226/.86)}
 .aire-guia{margin-top:clamp(20px,3.4svh,36px)}
 .aire-guia-t{justify-content:flex-start;gap:28px;margin:0 0 16px var(--aire-sangria)}
 .aire-p-tel{display:none}
 .aire-p-esc{display:inline}
 /* La parrilla: cinco canales en columnas; la costura corre bajo Dosis y Rol */
 .aire-canales{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px}
 .aire-canales>li,.aire-canales>.aire-dosis,.aire-canales>.aire-rol{grid-column:auto;grid-row:1;border:0;margin:0}
 .aire-canales>.aire-costura{grid-column:1/3;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start;padding:12px 0 0}
 .aire-canales>.aire-renglon,.aire-canales>.aire-quinta{grid-row:1/3}
 .aire-ir,.aire-ventanal .aire-ir,.aire-quinta .aire-ir,.aire-pronto .aire-ir{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"v" "n" "d" "a";align-items:start;row-gap:0;margin:0;padding:18px 0 0;background:none;color:inherit;overflow:visible}
 a.aire-ir::after,.aire-ventanal a.aire-ir::after{inset:0 -12px -10px -12px}
 .aire-costura a::after{inset:-6px -12px}
 .aire-quinta .aire-ir::before{display:none}
 .aire-ventana,.aire-ventanal .aire-ventana,.aire-quinta .aire-ventana,.aire-v-voz{display:block;width:100%;height:var(--aire-vh);margin-bottom:14px}
 .aire-c-nombre,.aire-quinta .aire-c-nombre,.aire-quinta a.aire-ir:hover .aire-c-nombre{font-size:12px;letter-spacing:.1em;color:var(--texto)}
 .aire-quinta .aire-c-nombre,.aire-quinta a.aire-ir:hover .aire-c-nombre{font-size:11.5px;letter-spacing:.06em}
 .aire-c-desc,.aire-quinta .aire-c-desc{margin-top:4px;font-size:16px;color:var(--rosa-suave);white-space:normal}
 .aire-ahora,.aire-quinta .aire-ahora,.aire-pronto .aire-ahora{display:block;margin-top:12px}
 .aire-renglon .aire-tx{display:block}
 .aire-renglon .aire-t{white-space:normal}
 .aire-renglon .aire-k{font:600 11px/1.35 var(--sans);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;color:var(--aire-perla)}
 .aire-renglon .aire-k::before{content:none}
 .aire-renglon .aire-t{margin-top:3px}
 .aire-pronto .aire-k{color:var(--sutil)}
 .aire-k{font-size:11px}
 .aire-t{font-size:14px}
 .aire-hoy .aire-k{padding-right:0}
 .aire-hoy .aire-t{font-size:19px}
 .aire-detras{margin-top:0}
 .aire-detras .aire-t{font-size:14px}
 .aire-detras .aire-tx{display:block;-webkit-line-clamp:none;overflow:visible}
 .aire-barras{right:auto;left:0;top:auto;bottom:0;min-width:116px}
 .aire-canales>.aire-costura{padding-bottom:30px}
 .aire-costura .aire-ahora{margin-top:0}
 .aire-quinta .aire-q-linea,.aire-quinta .aire-cta{display:none}
 .aire-solo-tel{display:none}
 .aire-solo-esc{display:block}
 .aire-nudo,.aire-quinta .aire-nudo{left:-4.5px;top:-4.5px}
 .aire-salida{left:auto;right:calc(var(--gd) / 2);margin:0 -4.5px -4.5px 0}
 .aire-v-ktarsis img{width:250%;transform:translate(-50%,-20%)}
 .aire-quinta .aire-v-quinta{display:grid;place-items:center;background:var(--aire-platino);border:0}
 .aire-trabajemos{position:relative;z-index:1;padding-inline:12px;font:italic 400 clamp(19px,1.6vw,23px)/1.1 var(--didona);color:var(--onix);text-align:center;text-wrap:balance}
 .aire-c-nombre,.aire-k{white-space:normal}
 .aire-trabajemos span{display:inline-block;transition:transform .35s var(--ease)}
 .aire-quinta a.aire-ir:hover .aire-trabajemos span{transform:translateX(6px)}
 .aire-quinta a.aire-ir::after{display:none}
 .aire-s-esc{display:inline}
}
/* Escritorio angosto (900–1180): cinco columnas apretadas, la letra se acomoda sin cortarse */
@media (min-width:900px) and (max-width:1180px){
 .aire-canales{column-gap:16px}
 .aire-c-nombre,.aire-quinta .aire-c-nombre,.aire-quinta a.aire-ir:hover .aire-c-nombre{font-size:11px;letter-spacing:.08em}
 .aire-hoy .aire-t{font-size:17px}
}
@media (min-width:1100px){
 .aire-oreja{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sutil);white-space:nowrap;transition:opacity .4s}
 .barra.solida .aire-oreja{opacity:0}
}
@media (min-width:900px) and (max-height:780px){
 .aire{--aire-vh:clamp(76px,11svh,96px);--aire-ih:min(calc((100svh - 380px) * 2.2),75vw)}
 .aire-bajada{display:none}
 .aire-nm-1{font-size:clamp(60px,6.2vw,100px)}
 .aire-nm-2{font-size:clamp(30px,2.9vw,46px)}
 .aire-guia{margin-top:20px}
 .aire-guia-t{margin-bottom:16px}
}

/* ——— Movimiento reducido: todo en su sitio desde el primer cuadro ——— */
@media (prefers-reduced-motion:reduce){
 .aire-foto img{translate:none}
 .aire-tx.sale,.aire-tx.entra,.aire-aqui::after{animation:none}
 .aire-nudo,.aire-c,.aire-tally-c,a.aire-ir::after,.aire-ventana{transition:none}
}

/* ——— 30 oct · Lo que pidió Natalia: aire arriba, primero su autoridad, su casa más abajo y con cadencia ——— */
/* La barra: sólo su nombre, discreto, y «Hablemos» */
.barra-nombre{font:400 17px/1 var(--didona);letter-spacing:.01em;color:var(--texto);text-decoration:none;opacity:0;transition:opacity .5s}
.barra.solida .barra-nombre{opacity:1}
.barra-nombre:focus-visible{opacity:1}

/* La entrada respira: la foto crece, el texto se queda abajo con espacio entre cada cosa */
.aire:not(.aire-casa){--aire-ih:clamp(360px,calc((100svh - 380px) * 2),980px)}
.aire:not(.aire-casa) .aire-marco{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.aire-mirada{margin-bottom:22px}
.aire-oficio{margin-top:18px}
.aire-autoridad{margin:18px 0 0;max-width:24em;font:400 17px/1.45 var(--sans);font-stretch:96%;color:rgb(236 232 226/.86);text-wrap:pretty}
.aire-autoridad em{font:italic 400 1.12em/1 var(--didona);color:var(--rosa-suave)}
.aire-acciones{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:22px 0 0}
.aire-acciones a{display:inline-flex;align-items:center;gap:10px;min-height:46px;text-decoration:none;font:600 11px/1 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase}
.aire-cta-1{padding:0 20px;background:var(--aire-platino);color:var(--onix)}
.aire-cta-2{color:var(--texto);border-bottom:1px solid var(--rosa-hilo)}
.aire-cta-1:hover span{transform:translateY(2px)}
.aire-cta-1 span{display:inline-block;transition:transform .35s var(--ease)}
@media (prefers-reduced-motion:no-preference){
 .aire-autoridad{animation:aire-sube .8s var(--ease) .55s both}
 .aire-acciones{animation:aire-sube .8s var(--ease) .75s both}
}
@media (max-width:899px) and (max-height:780px){
 .aire:not(.aire-casa){--aire-ih:clamp(300px,calc((100svh - 360px) * 1.9),760px)}
 .aire-mirada{display:block;font-size:17px;margin-bottom:14px}
 .aire-autoridad{font-size:15.5px;margin-top:14px}
 .aire-acciones{margin-top:16px}
}
@media (max-width:899px) and (max-height:690px){
 .aire-mirada{display:none}
}
@media (min-width:900px){
 .aire:not(.aire-casa){--aire-ih:calc((100svh - 230px) * 1.55)}
 .aire:not(.aire-casa) .aire-marco{padding-bottom:9svh}
 .aire-autoridad{font-size:19px;margin-top:22px}
 .barra-nombre{font-size:19px}
}

/* Su casa: la guía de canales como portadas, más abajo, en su propia sección */
.aire-casa{min-height:0;background:none}
.aire-casa .aire-marco{min-height:0;display:block;padding:clamp(72px,12svh,140px) var(--gd) 4svh var(--g)}
.aire-casa .aire-marco>.nudo{left:calc(var(--g) - 4.5px);top:clamp(80px,12.6svh,148px)}
.aire-letrero{margin:0 0 18px var(--aire-sangria)}
.aire-letrero .aire-tally{min-height:32px}
.aire-casa .aire-guia{margin-top:0}
.aire-casa .aire-guia-t{flex-wrap:wrap;margin-bottom:22px}
.aire-casa .aire-guia-t>span:first-child{font:400 clamp(30px,8vw,56px)/1.02 var(--didona);letter-spacing:-.01em;text-transform:none;color:var(--texto)}
.aire-casa .aire-ventanal .aire-ventana{height:clamp(110px,30vw,150px)}
.aire-casa .aire-renglon .aire-ventana{width:64px;height:64px}
.aire-casa .aire-v-voz{height:64px}
.aire-casa .aire-renglon .aire-ir{padding-block:12px}
.aire-casa .aire-nudo{display:none}
.aire-casa [data-revela]{--d:0s}
@media (min-width:900px){
 .aire-casa .aire-marco{padding-top:16svh}
 .aire-casa .aire-marco>.nudo{left:calc(var(--g) - 24px)}
 .aire-casa .aire-guia-t{gap:28px;align-items:baseline}
 .aire-casa{--aire-vh:clamp(140px,17svh,190px)}
 .aire-casa .aire-renglon .aire-ventana,.aire-casa .aire-v-voz{width:100%;height:var(--aire-vh)}
}
/* Las portadas llegan una tras otra */
@media (prefers-reduced-motion:no-preference){
 .aire-vivo .aire-casa .aire-canales>li{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
 .aire-vivo .aire-casa.vista .aire-canales>li{opacity:1;transform:none}
}

/* ——— 31 oct · Las portadas de su casa: arte real, como portadas de pódcast (no un pulso ni un color) ——— */
.portadas{list-style:none;margin:0 0 0 var(--aire-sangria);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.portada>a,.portada>.p-a{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#0d0c0f;color:var(--texto);text-decoration:none;isolation:isolate;-webkit-tap-highlight-color:transparent}
.p-arte{position:absolute;inset:0;z-index:-1}
.p-arte img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.portada a:hover .p-arte img,.portada a:focus-visible .p-arte img{transform:scale(1.035)}
.p-k{position:absolute;left:10px;top:10px;font:600 9.5px/1.25 var(--sans);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase;color:var(--texto)}
.p-t{position:absolute;left:10px;right:10px;bottom:10px;display:block;font:400 clamp(19px,5.2vw,30px)/1 var(--didona);letter-spacing:-.01em;text-wrap:balance}
.p-t b{font-weight:400}
.p-t em{display:block;font-style:italic;color:var(--rosa-suave)}
.p-sello{position:absolute;right:10px;top:10px;padding:3px 6px 2px;font:500 10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--texto);background:rgb(11 10 12/.7)}
.p-cred{position:absolute;left:10px;right:10px;bottom:4px;font:500 8.5px/1.2 var(--mono);color:rgb(236 232 226/.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portada .p-t+.p-cred{bottom:4px}
/* Dosis: su blíster, sobre su propio arte */
.p-dosis .p-arte img{object-position:93% 46%;transform-origin:85% 50%}
.p-dosis .p-t{bottom:12px}
/* Rol: el plano de 1524, con una banda de tinta al pie para que el título se lea (es un plano, no una persona) */
.p-rol .p-arte::after{content:"";position:absolute;inset:45% 0 0 0;background:linear-gradient(transparent,rgb(11 10 12/.86) 58%)}
.p-rol .p-arte img{object-position:40% 40%}
.p-rol .p-t,.p-ktarsis .p-t{bottom:22px}
/* Ktarsis: la mano que sale del mar; el título en el cielo negro, nunca sobre la mano */
.p-ktarsis .p-arte img{object-position:50% 72%}
.p-ktarsis .p-t{top:30px;bottom:auto}
.p-ktarsis .p-t em{color:var(--rosa-perla)}
/* Su voz: su foto original, sólo encuadrada; las letras van en la noche de arriba, lejos de ella */
.p-voz .p-arte img{object-position:44% 55%}
.p-voz .p-pronto{left:10px;right:auto;top:auto;bottom:10px;background:rgb(11 10 12/.72);color:var(--rosa-suave)}
.aire-hoy-casa{margin-top:22px}
.aire-casa .aire-hoy-casa>.aire-costura{grid-column:1/-1}
@media (prefers-reduced-motion:no-preference){
 .aire-vivo .aire-casa .portadas>li{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 130ms)}
 .aire-vivo .aire-casa.vista .portadas>li{opacity:1;transform:none}
}
@media (min-width:900px){
 .portadas{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-left:0}
 .p-k{left:14px;top:14px;font-size:10.5px}
 .p-t{left:14px;right:14px;bottom:16px;font-size:clamp(24px,2.2vw,34px)}
 .p-sello{right:14px;top:14px}
 .p-cred{left:14px;font-size:9.5px;bottom:6px}
 .p-rol .p-t,.p-ktarsis .p-t{bottom:26px}
 .p-ktarsis .p-t{top:40px}
 .aire-casa .aire-hoy-casa{display:block;max-width:760px;margin-top:30px}
 .aire-casa .aire-hoy-casa>.aire-costura{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;padding:14px 0 34px}
}
/* Para qué la contratan, sin rodeos: cuatro puertas a «Lo que hago» */
.aire-para{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.aire-para a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid rgb(236 232 226/.22);font:500 12.5px/1 var(--sans);color:var(--texto);text-decoration:none;transition:border-color .3s,color .3s}
.aire-para a:first-child{border-color:var(--rosa-hilo);color:var(--rosa-perla)}
.aire-para a:hover{border-color:var(--rosa-suave)}
@media (prefers-reduced-motion:no-preference){.aire-para{animation:aire-sube .8s var(--ease) .65s both}}
@media (max-width:899px) and (max-height:780px){.aire-para{margin-top:12px}.aire-para a{min-height:30px;font-size:12px;padding:0 10px}.aire-acciones{margin-top:12px}}
.p-sello.aire-sello{left:auto;right:10px;top:10px}
.p-k{padding:4px 6px 3px;margin:-4px 0 0 -6px;background:rgb(11 10 12/.62)}
.p-ktarsis .p-k,.p-voz .p-k{background:none}
.p-rol .p-arte::after{inset:32% 0 0 0;background:linear-gradient(transparent,rgb(11 10 12/.9) 52%)}
@media (min-width:900px){.p-sello.aire-sello{right:14px;top:14px}}
@media (max-width:899px){.p-sello.aire-sello{right:auto;left:10px;top:34px;background:none;padding:0;color:var(--rosa-perla)}}