/* ── Portada «Tres actos» ────────────────────────────────────────────────
   Caja oscura con el titular y, debajo, un escenario blanco con tres
   teléfonos: la vacante en Talent, el análisis de perfil y el primer día en
   Pulse. Un hilo los une y un punto (la candidata) viaja de uno a otro.
   Referencias: .impeccable/referencias/estilo-caja-negra-figura.md y
   estilo-galeria-apple.md. Los teléfonos son maquetas con datos ficticios. */
.actos{
  position:relative; background:var(--cauce); color:var(--blanco); padding:148px 0 96px; overflow:hidden; }
.actos__cabeza{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; align-items:end; }
.actos h1{ font-size:clamp(40px,5.6vw,76px); font-weight:500; line-height:1.02; letter-spacing:-0.035em; }
.actos__lado{ display:flex; flex-direction:column; gap:20px; padding-bottom:8px; }
.actos__sub{ margin:0; font-size:18px; line-height:1.5; color:rgba(255,255,255,0.8); max-width:34em; }
.actos__acciones{ display:flex; flex-wrap:wrap; gap:10px; }
.actos__acciones a{ display:inline-block; white-space:nowrap; text-decoration:none; font-size:16px; font-weight:600; padding:13px 26px; border-radius:56px; transition:opacity .2s; }
.actos__acciones a:hover{ opacity:.8; }
.actos__boton{ background:var(--blanco); color:#000; }
.actos__secundario{ color:var(--blanco); box-shadow:inset 0 0 0 1px var(--blanco); font-weight:500 !important; }
.actos :focus-visible{ outline-color:var(--blanco); }

/* Etiquetas técnicas en letra monoespaciada. */
.actos__mono{ margin:0; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#9A9FB0; }
.actos__mono b{ font-weight:600; color:var(--blanco); }
.actos__punto{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; vertical-align:1px; }
.actos__punto--t{ background:var(--talent-claro); } .actos__punto--p{ background:var(--pulse-claro); }

/* El escenario blanco. */
.actos__escenario{ position:relative; margin-top:64px; padding:44px 0 64px; }
.actos__hilo{ position:absolute; left:50%; top:52px; width:588px; margin-left:-294px; height:2px; background:rgba(255,255,255,0.16); }
.actos__hilo::before{ content:""; position:absolute; left:0; top:0; height:2px; width:var(--avance,0%); background:linear-gradient(90deg,var(--talent-claro),var(--talent-claro) 45%,var(--pulse-claro) 75%); transition:width 1.2s cubic-bezier(.65,0,.35,1); }
.actos__hilo i{ position:absolute; top:-6px; left:var(--avance,0%); width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--talent-claro); box-shadow:0 0 0 5px rgba(143,162,255,.2); transition:left 1.2s cubic-bezier(.65,0,.35,1), background .4s, box-shadow .4s; }
.actos__hilo.en-pulse i{ background:var(--pulse-claro); box-shadow:0 0 0 5px rgba(95,208,166,.2); }
.actos__fila{ position:relative; display:flex; justify-content:center; gap:44px; }
.actos__acto{ display:flex; flex-direction:column; align-items:center; gap:16px; margin:0; }
.actos__acto .actos__mono{ position:relative; background:var(--cauce); padding:0 10px; }
.actos__tel{ position:relative; width:250px; background:#111; border-radius:44px; padding:10px; box-shadow:0 0 0 1px rgba(255,255,255,0.16), 0 40px 80px -30px rgba(0,0,0,0.9); transition:transform .5s var(--salida); }
.actos__acto.activo .actos__tel{ transform:translateY(-10px); }
.actos__pantalla{ position:relative; height:520px; border-radius:35px; overflow:hidden; background:var(--blanco); color:#111; font-size:13px; line-height:1.35; }
.actos__isla{ position:absolute; z-index:2; left:50%; top:10px; width:84px; height:24px; margin-left:-42px; background:#000; border-radius:20px; }
.actos__app{ position:absolute; inset:0; padding:48px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.actos__app header{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; }
.actos__app header img{ width:24px; height:24px; border-radius:7px; }
.actos__app h3{ font-size:21px; font-weight:600; letter-spacing:-.02em; margin:4px 0 0; }
.actos__gris{ color:#666; font-size:12.5px; }
.actos__cand{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:#F2F3F6; }
.actos__cand i{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--talent); color:#fff; font-style:normal; font-size:11px; font-weight:600; }
.actos__cand span{ flex:1; font-weight:600; font-size:12.5px; } .actos__cand small{ display:block; font-weight:400; color:#5C6170; }
.actos__cand em{ font-style:normal; font-weight:600; font-size:12px; font-variant-numeric:tabular-nums; }
.actos__cand--top{ background:#E9EDFF; box-shadow:inset 0 0 0 1.5px var(--talent); }
.actos__aro{ position:relative; width:130px; height:130px; align-self:center; margin:6px 0; }
.actos__aro svg{ transform:rotate(-90deg); }
.actos__aro circle+circle{ transition:stroke-dashoffset 1.6s var(--salida); }
.actos__aro strong{ position:absolute; inset:0; display:grid; place-items:center; font-size:38px; font-weight:600; font-variant-numeric:tabular-nums; }
.actos__sem{ align-self:center; font-size:12px; font-weight:600; color:var(--pulse); background:#E3F4EE; padding:6px 12px; border-radius:20px; }
.actos__rasgo{ display:flex; justify-content:space-between; font-size:12.5px; padding:8px 0; border-top:1px solid #E6E7EB; } .actos__rasgo b{ color:var(--pulse); }
.actos__cara{ align-self:center; width:120px; height:120px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 3px var(--pulse); margin:8px 0; }
.actos__checar{ text-align:center; padding:12px; border-radius:30px; background:var(--pulse); color:#fff; font-weight:600; transition:background .4s; }
.actos__ok{ text-align:center; font-weight:600; color:var(--pulse); transition:opacity .4s; }
.actos__pie{ position:absolute; left:24px; right:24px; bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.actos__pie .actos__mono{ font-size:11px; }
.actos__pausa{ min-height:44px; font:500 13px/1 var(--sans); color:var(--blanco); background:transparent; border:1px solid rgba(255,255,255,0.4); border-radius:56px; padding:8px 14px; cursor:pointer; }
.actos__pausa:hover{ opacity:.7; }
.actos__pausa:focus-visible{ outline:2px solid var(--blanco); outline-offset:2px; }

@media (max-width:980px){
  .actos{ padding:120px 0 64px; }
  .actos__cabeza{ grid-template-columns:1fr; gap:24px; }
  .actos__escenario{ margin:40px calc(var(--gutter) * -1) 0; padding:24px 0 64px; }
  .actos__hilo{ display:none; }
  /* En pantallas angostas los tres teléfonos se deslizan de lado. */
  .actos__fila{ justify-content:flex-start; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px var(--gutter) 4px; scrollbar-width:none; }
  .actos__fila::-webkit-scrollbar{ display:none; }
  .actos__acto{ scroll-snap-align:center; flex:none; }
  .actos__tel{ width:230px; } .actos__pantalla{ height:480px; }
  .actos__acto.activo .actos__tel{ transform:none; }
  .actos__pie{ flex-direction:column; align-items:flex-start; gap:10px; bottom:14px; left:var(--gutter); right:var(--gutter); }
  .actos__escenario{ padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce){
  .actos__tel, .actos__hilo::before, .actos__hilo i, .actos__aro circle+circle{ transition:none; }
}

/* ── Portadas de las demás páginas, en el mismo estilo ─────────────────────
   Mismo fondo, titular y píldoras. La foto de Mario va como antes: sin marco,
   fundida con el fondo a la derecha (se desvanece hacia la izquierda y
   arriba/abajo), con el texto a la izquierda. Ya sin ríos. */
.actos--pagina{ min-height:min(100svh,880px); padding:clamp(120px,18vh,180px) 0 72px; }
.actos--pagina .actos__cabeza, .actos--perfil .actos__lado{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:22px; max-width:min(480px,36vw); }
.actos--pagina h1{ font-size:clamp(40px,4.4vw,64px); max-width:13ch; }
.actos--pagina .actos__lado{ padding:0; }
.actos__producto{ display:inline-flex; align-items:center; gap:10px; }
.actos__producto img{ width:26px; height:26px; border-radius:7px; flex:none; }
.actos__producto img + img{ margin-left:-4px; }
.actos__foto{ position:absolute; z-index:0; right:0; top:52%; width:54%; aspect-ratio:16/9; margin:0; transform:translateY(-50%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 13%), linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0, #000 13%), linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
          mask-composite:intersect; }
.actos__foto img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(0.9) brightness(0.82); }
@media (prefers-reduced-motion:no-preference){
  .actos__foto{ animation:actos-foto 1.2s var(--salida) both; }
  @keyframes actos-foto{ from{ opacity:0; } }
}
/* Quién soy: el retrato (vertical) fundido a la derecha del texto. */
.actos--perfil .actos__foto{ width:min(34vw,480px); aspect-ratio:3/4;
  right:max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 87%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 87%, transparent 100%); }
.actos--perfil .actos__foto img{ object-position:center 20%; }
.actos--perfil h1{ max-width:none; }
.actos__rol{ margin:0; font-size:19px; font-weight:600; color:var(--talent-claro); }
.actos__firma{ width:180px; height:auto; opacity:.9; }
/* Privacidad y 404: banda corta, solo el título. */
.actos--corto{ padding:150px 0 72px; }
.actos--corto h1{ font-size:clamp(36px,5vw,64px); }
.actos--corto .migas{ margin-bottom:22px; }
.actos__codigo{ margin:0 0 10px; font-family:var(--mono); font-size:clamp(64px,10vw,120px); font-weight:500; letter-spacing:-.02em; line-height:1; color:var(--talent-claro); }
.actos--corto .actos__sub{ margin-top:18px; }
.actos--corto .actos__acciones{ margin-top:28px; align-items:center; gap:10px 22px; }
.actos--corto .actos__acciones .enlace{ padding:0; border-radius:0; font-weight:600; }
@media (max-width:900px){
  .actos--pagina{ min-height:0; padding:120px 0 0; }
  .actos--pagina .actos__cabeza, .actos--perfil .actos__lado{ max-width:none; }
  /* En celular la foto va debajo del texto, a todo lo ancho, fundida arriba y abajo. */
  .actos__foto, .actos--perfil .actos__foto{ position:relative; top:auto; right:auto; width:auto; aspect-ratio:auto; transform:none; margin:32px calc(var(--gutter) * -1) 0;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 89%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 89%, transparent 100%); }
  /* 16:10 para que los logotipos de los costados de la foto no se corten. */
  .actos__foto img{ aspect-ratio:16/10; height:auto; }
  .actos--perfil .actos__foto img{ aspect-ratio:4/5; }
  .actos--corto{ padding:120px 0 56px; }
}

/* ── Acople del resto del sitio al estilo de la portada ────────────────────
   Botones en píldora, titulares apretados (peso 500), etiquetas de producto
   en letra monoespaciada, tarjetas con esquinas grandes y sin sombras
   (se separan con un filete fino, como en la referencia «caja negra»). */
:root{ --mono:var(--sans); }
.boton{ border-radius:56px; padding-left:26px; padding-right:26px; }
.cabecera .boton, .cabecera a.boton{ border-radius:56px; }
h1, h2, .giros__gancho, .formulario__titulo{ font-weight:500; letter-spacing:-0.03em; }
.etiqueta-rio{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.etiqueta-rio strong{ font-weight:600; }
.etiqueta-rio i{ width:7px; height:7px; box-shadow:none !important; }
.bloque__foto--pantalla{ border-radius:24px; box-shadow:0 0 0 1px var(--linea); overflow:hidden; }
.bloque__foto--pantalla[data-nota]{ overflow:visible; }
.bloque__foto--pantalla[data-nota] img{ border-radius:24px; }
.bloque__foto--pantalla[data-nota]::after, .actos-nota{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.recorrido__paso img{ border-radius:20px; box-shadow:0 0 0 1px var(--linea); }
.video-eco{ border-radius:32px; box-shadow:none; }
.giros__panel{ border-radius:32px; box-shadow:none; }
.contacto__tarjeta{ border-radius:32px; box-shadow:0 0 0 1px var(--linea); }
.campo input, .campo select, .campo textarea{ border-radius:12px; }
.modulo{ border-radius:20px; }
.modulo:hover{ box-shadow:none; }
.modulos--expediente{ border-radius:24px; }
.flujo__paso{ border-radius:20px; }
.tarjeta__foto{ border-radius:20px; }
.siguientes span, .paso__n{ font-family:var(--mono); font-weight:600; }
.seccion--noche .bloque__foto{ background:var(--cauce); }
.eleccion label span{ border-radius:56px; }
.giros__paneles, .giros__panel{ box-shadow:none; }
/* Líneas de pasos finas, como el hilo de la portada (horizontal en computadora, vertical en celular). */
@media (min-width:901px){ .pasos .paso::before{ height:2px; top:16px; } }
@media (max-width:900px){ .pasos .paso::before{ width:2px; left:15px; } }
@media (min-width:721px){ .recorrido__punto::before{ height:2px; top:7px; } }
/* Portadas de página: el texto centrado en alto junto a la foto (sin hueco abajo). */
@media (min-width:901px){
  .actos--pagina{ display:flex; align-items:center; padding:110px 0 64px; }
  .actos--pagina > .envoltura{ width:100%; }
}
/* Celular: la nota y el botón de pausa van justo debajo de los teléfonos. */
@media (max-width:980px){
  .actos:not(.actos--pagina):not(.actos--corto){ padding-bottom:40px; }
  .actos__escenario{ padding-bottom:0; }
  .actos__pie{ position:static; flex-direction:row; flex-wrap:wrap; align-items:center; margin:20px var(--gutter) 0; }
}

/* ── Celular: acomodo general ─────────────────────────────────────────────── */
@media (max-width:720px){
  /* Botones de portada a todo lo ancho, uno bajo otro. */
  .actos__acciones{ flex-direction:column; align-items:stretch; }
  .actos__acciones a{ text-align:center; }
  .actos--corto .actos__acciones{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .actos--corto .actos__acciones .actos__boton{ flex:1 1 100%; text-align:center; }
  /* Bloques: sin la línea de color a la izquierda; el texto usa todo el ancho. */
  .bloque--talent .bloque__texto, .bloque--pulse .bloque__texto, .bloque--ambos .bloque__texto{ padding-left:0; border-left:0; border-image:none; }
  /* Pantallas y videos con esquinas redondeadas y sin la franja de color de arriba. */
  .bloque--talent .bloque__foto--pantalla, .bloque--pulse .bloque__foto--pantalla, .bloque--pulse .bloque__foto video{ border-top:0; }
  .bloque__foto{ border-radius:24px; overflow:hidden; }
  .bloque__foto--pantalla[data-nota]{ overflow:visible; }
  /* Recorrido de la portada: cada pantalla arriba y a todo lo ancho, el texto abajo. */
  .recorrido__paso{ display:block; padding:0 0 36px 30px; }
  .recorrido__paso img{ width:100%; aspect-ratio:4/3; border-radius:18px; margin-bottom:16px; }
  .recorrido__punto::before{ width:2px; left:7px; }
  .recorrido__paso > p:last-child{ max-width:none; }
  .video-eco{ border-radius:24px; }
  .giros__panel, .contacto__tarjeta{ border-radius:24px; }
  .borrador{ border-radius:16px; }
}
@media (max-width:900px){
  /* La foto se desvanece sobre el azul antes de que empiece la sección blanca. */
  .actos--pagina{ padding-bottom:28px; }
}
.modulos--expediente{ box-shadow:none; }

/* ── Computadora: últimos acomodos ───────────────────────────────────────── */
/* Portada: la nota y la pausa justo debajo de los teléfonos, sin hueco. */
.actos:not(.actos--pagina):not(.actos--corto){ padding-bottom:56px; }
.actos__escenario{ padding-bottom:0; }
.actos__pie{ position:static; margin-top:28px; }
/* Portadas de página: alto justo para la foto, sin espacio sobrante abajo. */
@media (min-width:901px){
  .actos--pagina{ min-height:min(100svh,760px); }
  .actos--perfil{ min-height:min(100svh,820px); }
}
/* Sin franjas de color sobre pantallas, videos y panel: esquinas redondeadas. */
.bloque--talent .bloque__foto--pantalla, .bloque--pulse .bloque__foto--pantalla, .bloque--pulse .bloque__foto video{ border-top:0; }
.bloque__foto{ border-radius:24px; overflow:hidden; }
.bloque__foto--pantalla[data-nota]{ overflow:visible; }
.giros__panel::before{ display:none; }
.borrador{ border-radius:16px; }

/* ── Etiquetas pequeñas: la letra del sitio en mayúsculas espaciadas ──────
   (antes letra de máquina de escribir en gris tenue; el usuario pidió más
   legibles). Más gruesas y con más contraste sobre el fondo oscuro. */
.actos__mono{ font-size:12.5px; font-weight:500; letter-spacing:.1em; color:rgba(255,255,255,0.7); }
.actos__mono b{ font-weight:700; color:var(--blanco); }
.actos__acto .actos__mono{ font-size:12px; }
.actos__acto .actos__mono b{ color:var(--blanco); }
.actos__pie .actos__mono{ font-size:11.5px; color:rgba(255,255,255,0.6); }
.actos__punto{ width:8px; height:8px; }
.actos__codigo{ font-weight:600; letter-spacing:-.04em; }
.etiqueta-rio{ font-size:12.5px; letter-spacing:.1em; font-weight:500; color:var(--gris); }
.etiqueta-rio strong{ font-weight:700; }
.bloque__foto--pantalla[data-nota]::after{ font-size:11.5px; letter-spacing:.08em; font-weight:500; color:var(--gris); }
.siguientes span, .paso__n{ font-weight:700; }

/* ── Quién soy: la foto recortada de Mario en su tarjeta ──────────────────
   Sin desvanecido: el recorte se apoya en el borde de abajo de una tarjeta
   azul noche (esquinas 32 px). Menos espacio muerto antes del cierre. */
.historia .bloque{ align-items:center; }
.historia .bloque__foto.bloque__foto--recorte{ -webkit-mask-image:none; mask-image:none; background:linear-gradient(180deg,#1A2558 0%,#0E1638 100%);
  border-radius:32px; overflow:hidden; aspect-ratio:4/5; display:flex; align-items:flex-end; justify-content:center; padding:36px 24px 0; }
.historia .bloque__foto--recorte img{ width:auto; height:100%; max-height:none; max-width:100%; object-fit:contain; object-position:bottom center; margin:0; }
.historia{ padding-bottom:clamp(40px,5vw,72px); }
.historia + .cierre{ padding-top:clamp(40px,5vw,72px); border-top:1px solid var(--linea); }
@media (max-width:720px){
  .historia .bloque__foto.bloque__foto--recorte{ aspect-ratio:1/1; border-radius:24px; padding-top:24px; }
}

/* ── Índice de la página (riel a la derecha) ─────────────────────────────────
   Un punto por sección; la línea se llena con el color de Talent a Pulse
   conforme se baja. Claro sobre la portada oscura, oscuro sobre lo claro. */
.indice{ --punto:rgba(255,255,255,.34); --lleno:#fff; --pista:rgba(255,255,255,.16);
  --ini:var(--talent-claro); --fin:var(--pulse-claro);
  position:fixed; z-index:40; right:22px; top:50%; transform:translateY(-50%); }
.indice--claro{ --punto:rgba(14,22,56,.22); --lleno:#0E1638; --pista:rgba(14,22,56,.1); --ini:var(--talent); --fin:var(--pulse); }
.indice ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; position:relative; }
.indice__pista{ position:absolute; left:50%; top:12px; bottom:12px; width:2px; margin-left:-1px; border-radius:2px; background:var(--pista); overflow:hidden; transition:background .3s; }
.indice__avance{ position:absolute; inset:0; background:linear-gradient(180deg,var(--ini),var(--fin)); transform:scaleY(0); transform-origin:top; transition:transform .25s linear; }
.indice button{ position:relative; display:block; width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; color:inherit; }
.indice button::before{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:var(--punto); transition:transform .25s, background .3s, box-shadow .3s; }
.indice button.pasado::before{ background:var(--lleno); }
.indice button.activo::before{ background:var(--lleno); transform:scale(1.7); box-shadow:0 0 0 2.5px color-mix(in srgb, var(--lleno) 22%, transparent); }
.indice button:hover::before{ transform:scale(1.7); background:var(--lleno); }
.indice button:focus-visible{ outline:2px solid var(--talent-claro); outline-offset:2px; border-radius:50%; }
.indice__nombre{ position:absolute; right:32px; top:50%; transform:translate(6px,-50%); white-space:nowrap; pointer-events:none;
  font:600 12.5px/1 var(--sans); letter-spacing:.01em; color:#fff; background:#0E1638; padding:7px 12px; border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12); opacity:0; transition:opacity .25s, transform .25s; }
.indice button:hover .indice__nombre, .indice button:focus-visible .indice__nombre,
.indice button.activo .indice__nombre{ opacity:1; transform:translate(0,-50%); }
.indice.en-portada button.activo:not(:hover):not(:focus-visible) .indice__nombre{ opacity:0; transform:translate(6px,-50%); }
/* En pantallas angostas el nombre fijo taparía el contenido: solo al pasar el mouse. */
@media (max-width:1399px){ .indice button.activo:not(:hover):not(:focus-visible) .indice__nombre{ opacity:0; transform:translate(6px,-50%); } }
.indice--solo .indice__pista{ position:relative; display:block; height:32vh; top:0; left:0; margin:0; }
.indice-barra{ display:none; }
@media (max-width:900px){
  .indice{ display:none; }
  .indice-barra{ display:block; position:absolute; left:0; right:0; bottom:0; height:4px; pointer-events:none;
    background:linear-gradient(90deg,var(--talent-claro),var(--pulse-claro)); transform:scaleX(0); transform-origin:left; }
}
.cabecera.solida .indice-barra{ background:linear-gradient(90deg,var(--talent),var(--pulse)); }
@media (prefers-reduced-motion:reduce){ .indice *, .indice *::before{ transition:none !important; } }
@media print{ .indice, .indice-barra{ display:none !important; } }

/* Fila de teléfonos: el teclado puede llegar a ella para deslizarla. */
.actos__fila:focus-visible{ outline:2px solid var(--talent-claro); outline-offset:6px; border-radius:24px; }
/* Puntos bajo los teléfonos en celular: dicen que hay más hacia un lado. */
.actos__puntos{ display:none; }
@media (max-width:980px){
  .actos__puntos{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
  .actos__puntos i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); transition:width .25s, background .25s; }
  .actos__puntos i.activo{ width:22px; border-radius:4px; background:#fff; }
}
/* Enlaces de la página de error con área cómoda para el dedo. */
.actos--corto .actos__acciones .enlace{ display:inline-flex; align-items:center; min-height:44px; }