/* CTA — barra con enlace o botones. Estilos propios: solo dependen del sistema de diseño base. Cargado con la plantilla piloto. */
/* Quiero ser parte (join_cta): titular grande que es un solo enlace, con flecha. Usa el contenedor de sección de la home (cca-v2-home.css). */
.cca-v2 .cca-v2__home-section--join_cta { padding-block: 24px; border-top: 1px solid var(--cca-v2-gray-400); }
.cca-v2 .cca-v2__home-section--join_cta.cca-v2__home-section--no-border { border-top: 0; }
.cca-v2 .cca-v2__join-link { display: flex; justify-content: space-between; align-items: center; gap: 24px; color: inherit; text-decoration: none; }
.cca-v2 .cca-v2__join-link h2 { min-width: 0; }
.cca-v2 .cca-v2__join-link:hover h2 { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.cca-v2 .cca-v2__join-arrow { flex-shrink: 0; font-family: var(--cca-v2-font-headline); font-size: var(--cca-v2-type-h1); font-weight: var(--cca-v2-weight-light); line-height: .9; }
@media (max-width: 767px) {
  .cca-v2 .cca-v2__home-section--join_cta { padding-block: 24px; }
  .cca-v2 .cca-v2__join-link .cca-v2__headline-2 { font-size: 40px; }
}
.cca-v2 .cca-v2__cta { scroll-margin-top: 100px; overflow-wrap: anywhere; }
.cca-v2 .cca-v2__cta-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.cca-v2 .cca-v2__cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; min-height: 84px; padding: 20px 8px; border-radius: var(--cca-v2-radius); color: var(--cca-v2-ink); text-decoration: none; }
.cca-v2 .cca-v2__cta-bar--gray { --cca-v2-surface: var(--cca-v2-gray-200); --cca-v2-ink: #000; background: var(--cca-v2-surface); }
.cca-v2 .cca-v2__cta--full .cca-v2__cta-bar { grid-column: 1 / -1; }
.cca-v2 .cca-v2__cta--left .cca-v2__cta-bar { grid-column: 1 / span 6; }
.cca-v2 .cca-v2__cta--right .cca-v2__cta-bar { grid-column: 7 / span 6; }
/* Solo botones (sin texto): el fondo va en la sección, a todo el ancho de la página; la barra interna no tiene esquinas redondeadas.
   En blanco y gris la sección lleva el borde superior de los bloques de texto. */
.cca-v2 .cca-v2__cta .cca-v2__cta-bar--plain { grid-column: 1 / -1; border-radius: 0; padding-block: 24px; min-height: 0; }
.cca-v2 .cca-v2__cta--plain:is(.cca-v2--light, .cca-v2__cta-bar--gray) { border-top: 1px solid rgb(0 0 0 / 20%); background-clip: padding-box; }
.cca-v2 .cca-v2__cta-title { min-width: 0; margin: 0; }
/* En ancho completo el texto de la barra mide 40 px (token subheadline, fluido en pantallas chicas); en las mitades conserva el tamaño de título. */
.cca-v2 .cca-v2__cta--full .cca-v2__cta-title { font-size: var(--cca-v2-type-subheadline); }
/* La flecha es el carácter → o ↓ de Stack Sans Headline (headline-2: 96 px, peso 300). A 96 px el → mide 78 px de ancho y la caja 67 px de alto. */
.cca-v2 .cca-v2__cta-arrow { flex-shrink: 0; font-family: var(--cca-v2-font-headline); font-size: var(--cca-v2-type-h2); font-weight: var(--cca-v2-weight-light); line-height: .7; letter-spacing: normal; }
/* En las mitades (izquierda o derecha) la flecha mide 60 px, peso 300. */
.cca-v2 :is(.cca-v2__cta--left, .cca-v2__cta--right) .cca-v2__cta-arrow { font-size: 60px; font-weight: var(--cca-v2-weight-light); }
.cca-v2 .cca-v2__cta-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-left: auto; }
.cca-v2 .cca-v2__cta-buttons--start { justify-content: flex-start; margin-left: 0; }
.cca-v2 :is(a.cca-v2__cta-bar, .cca-v2__cta-bar--buttons) { padding-block: 40px; }
/* Como en «Quiero ser parte»: al pasar el mouse sobre la barra con enlace, el texto se subraya. */
.cca-v2 a.cca-v2__cta-bar:hover .cca-v2__cta-title { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.cca-v2 a.cca-v2__cta-bar:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
@media (max-width: 767px) {
  .cca-v2 .cca-v2__cta-grid { grid-template-columns: minmax(0, 1fr); }
  .cca-v2 :is(a.cca-v2__cta-bar, .cca-v2__cta-bar--buttons) { padding-block: 24px; }
  .cca-v2 :is(.cca-v2__cta--full, .cca-v2__cta--left, .cca-v2__cta--right) .cca-v2__cta-bar { grid-column: 1; }
  .cca-v2 .cca-v2__cta-bar:not(a) { flex-direction: column; align-items: flex-start; }
  .cca-v2 .cca-v2__cta-buttons { justify-content: flex-start; margin-left: 0; }
}