/* BEOS-46: encendido y apagado suaves de las letras de marca. */
/* Mezcla animable: el pulso azul del hero sigue vivo bajo el fundido. */
@property --beos-cta-letter-mix{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --beos-letter-rest-color{syntax:"<color>";inherits:false;initial-value:#287f9f}
#home .copy p.hero-claim .brand-letter, #nosotros .hero-brand-letter, #solutions-title .brand-letter, #page-title .brand-letter{transition:--beos-cta-letter-mix .65s cubic-bezier(.4,0,.2,1);color:color-mix(in srgb,var(--beos-letter-rest-color) calc(100% - var(--beos-cta-letter-mix)),var(--beos-cta-orange,#f29a58) var(--beos-cta-letter-mix))!important}
#home .copy p.hero-claim .brand-letter{animation-name:beos-letter-rest-pulse}
#nosotros .hero-brand-letter{--beos-letter-rest-color:var(--blue,#349cc4)}
@keyframes beos-letter-rest-pulse{0%,100%{--beos-letter-rest-color:#287f9f}50%{--beos-letter-rest-color:#58a9c4}}

@media(hover:hover) and (pointer:fine){
body:has(:is(.beos-contact-link,.hero-contact-button,.topbar-contact,.solution-cta,.page-cta,.final-cta,.meet-link,.careers-apply,.careers-jump,.button,.beos-cta,.team-link,.services-link,.hero-media-group,.hero-media-group :is(a,button),.case-link,.impact-footer a,.home-blog-all,#grupo .panel-content>a,.shorts-card,.beos-coto-launcher,[data-beos-cta]):not(:disabled):not([aria-disabled="true"]):hover) #home .copy p.hero-claim .brand-letter,
body:has(:is(.beos-contact-link,.hero-contact-button,.topbar-contact,.solution-cta,.page-cta,.final-cta,.meet-link,.careers-apply,.careers-jump,.button,.beos-cta,.team-link,.services-link,.hero-media-group,.hero-media-group :is(a,button),.case-link,.impact-footer a,.home-blog-all,#grupo .panel-content>a,.shorts-card,.beos-coto-launcher,[data-beos-cta]):not(:disabled):not([aria-disabled="true"]):hover) :is(#nosotros .hero-brand-letter,#solutions-title .brand-letter,#page-title .brand-letter){--beos-cta-letter-mix:100%}
}
body:has(:is(.beos-contact-link,.hero-contact-button,.topbar-contact,.solution-cta,.page-cta,.final-cta,.meet-link,.careers-apply,.careers-jump,.button,.beos-cta,.team-link,.services-link,.hero-media-group,.hero-media-group :is(a,button),.case-link,.impact-footer a,.home-blog-all,#grupo .panel-content>a,.shorts-card,.beos-coto-launcher,[data-beos-cta]):not(:disabled):not([aria-disabled="true"]):focus-visible) #home .copy p.hero-claim .brand-letter,
body:has(:is(.beos-contact-link,.hero-contact-button,.topbar-contact,.solution-cta,.page-cta,.final-cta,.meet-link,.careers-apply,.careers-jump,.button,.beos-cta,.team-link,.services-link,.hero-media-group,.hero-media-group :is(a,button),.case-link,.impact-footer a,.home-blog-all,#grupo .panel-content>a,.shorts-card,.beos-coto-launcher,[data-beos-cta]):not(:disabled):not([aria-disabled="true"]):focus-visible) :is(#nosotros .hero-brand-letter,#solutions-title .brand-letter,#page-title .brand-letter){--beos-cta-letter-mix:100%}
@media(prefers-reduced-motion:reduce){#home .copy p.hero-claim .brand-letter, #nosotros .hero-brand-letter, #solutions-title .brand-letter, #page-title .brand-letter{transition:none}}

/* Las dos tarjetas son entradas a su sección. Cada una activa su rotulador. */
@media (hover:hover) and (pointer:fine){
  #nosotros:has(.hero-media-people:hover) .team-marker path,
  #nosotros:has(.hero-media-specialties:hover) .services-marker path{stroke-dashoffset:0;transition-duration:.17s;transition-timing-function:cubic-bezier(.12,.7,.2,1)}
  #nosotros:has(.hero-media-people:hover) .team-link>span[aria-hidden="true"],
  #nosotros:has(.hero-media-specialties:hover) .services-link>span[aria-hidden="true"]{animation:none}
}
#nosotros:has(.hero-media-people :focus-visible) .team-marker path,
#nosotros:has(.hero-media-specialties :focus-visible) .services-marker path{stroke-dashoffset:0;transition-duration:.17s;transition-timing-function:cubic-bezier(.12,.7,.2,1)}
#nosotros:has(.hero-media-people :focus-visible) .team-link>span[aria-hidden="true"],
#nosotros:has(.hero-media-specialties :focus-visible) .services-link>span[aria-hidden="true"]{animation:none}
@media(prefers-reduced-motion:reduce){#nosotros :is(.services-marker,.team-marker) path{transition:none!important}}


/* Al cambiar de teclado a ratón, el rotulador sigue a la tarjeta bajo el puntero. */
@media (hover:hover) and (pointer:fine){
  #nosotros:has(.hero-media-specialties:hover) .team-link:not(:hover) .team-marker path,
  #nosotros:has(.hero-media-people:hover) .services-link:not(:hover) .services-marker path{stroke-dashoffset:1}
}