/* Portada v8: T2's styles (hero-v5/t2-pulso/estilos.css) plus one rule at the end. */
.isla-estrellas{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2.4s var(--ease)}
.isla-estrellas.lista{opacity:1}
.presentacion .foto-presentacion{opacity:.42}

/* title focus (TrueFocus look, vanilla): only once JS has started the cycle */
.titular{position:relative}
.titular .linea{display:block;width:fit-content;margin:0 auto -.12em;padding-bottom:.12em;transition:filter .7s ease,text-shadow .6s var(--ease),color .6s var(--ease)}
.con-foco .titular .linea{filter:blur(1.6px)}
.con-foco .titular .linea.enfocada{filter:none}
/* the travelling light reaching a line makes it glow for a moment */
.titular .linea.activa{color:#fff;text-shadow:0 0 28px rgba(167,139,250,.7),0 0 2px rgba(196,174,255,.85)}
.marco-foco{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;
  transition:transform .7s var(--ease),width .7s var(--ease),height .7s var(--ease),opacity .7s var(--ease)}
.con-foco .marco-foco{opacity:1}
.esquina{position:absolute;width:14px;height:14px;border:2px solid #C4AEFF;border-radius:3px;
  filter:drop-shadow(0 0 4px rgba(167,139,250,.75))}
.esquina.si{top:-10px;left:-12px;border-right:0;border-bottom:0}
.esquina.sd{top:-10px;right:-12px;border-left:0;border-bottom:0}
.esquina.ii{bottom:-10px;left:-12px;border-right:0;border-top:0}
.esquina.id{bottom:-10px;right:-12px;border-left:0;border-top:0}
@media(max-width:700px){ .esquina{width:10px;height:10px} .esquina.si,.esquina.ii{left:-8px} .esquina.sd,.esquina.id{right:-8px} }

/* Portada v8: on a phone the site's third line wraps; balanced, as in the Z3 hero («Del código a / la
   aplicación.», «From code / to the app.») instead of leaving one word alone */
.titular .linea{text-wrap:balance;text-wrap:pretty}