/* Creativo Rock: ajustes propios sobre el CSS de Webflow */

/* 1. CTA "Start a project" dentro del menu, debajo de Contact */
.cr-cta{
  display:inline-flex; align-items:center; gap:12px;
  align-self:flex-start; margin-top:32px;
  height:56px; padding:0 28px;
  background-color:var(--colors--black); color:var(--colors--white);
  border:1px solid var(--colors--black); border-radius:12px;
  font-family:var(--_typography---font-families--primary-font-family);
  font-weight:var(--_typography---font-weights--font-weight-500);
  font-size:.95rem; letter-spacing:.02em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:background-color .35s ease-in-out,color .35s ease-in-out;
}
.cr-cta-arrow{display:inline-block;transition:transform .35s ease-in-out}
.cr-cta:hover{background-color:var(--colors--white);color:var(--colors--black)}
.cr-cta:hover .cr-cta-arrow{transform:translateX(4px)}
.cr-cta:focus-visible{outline:2px solid var(--colors--black);outline-offset:3px}
@media screen and (max-width:479px){
  .cr-cta{height:48px;padding:0 20px;font-size:.8rem;margin-top:24px}
}

/* 2. Menu abierto: evitar que el email se monte sobre YOUTUBE / INSTAGRAM */
.nav-bottom-block{flex-wrap:wrap;column-gap:32px;row-gap:16px;width:100%}
.nav-bottom-block .mail-link{min-width:0;max-width:100%}
.nav-bottom-block .text-block-3{max-width:100%;overflow-wrap:anywhere}
.nav-bottom-block .social-links-block{flex-shrink:0}
@media screen and (max-width:767px){
  .nav-bottom-block .mail-link-inner{width:auto}
  .nav-bottom-block .text-block-3{max-width:none;white-space:nowrap;overflow-wrap:normal}
}

/* 3. Footer: equilibrio lateral. El contenido se alinea con la reticula del sitio (max 1520px)
      y gana aire a los lados en pantallas grandes, sin tocar movil */
.footer-content-wrapper{width:100%;max-width:1440px;margin-left:auto;margin-right:auto}
@media screen and (min-width:992px){
  .footer{padding-left:clamp(32px,5vw,96px);padding-right:clamp(32px,5vw,96px)}
}