[data-component-id="usfq_theme:section_carousel_right"] {
  /* @todo Add your styles here. */

  .text-left .title {
    color: var(--primary);
  }

  /* Título de la columna izquierda (ej. "Cómo aplicar") en rojo. */
  .section-text > div:first-child .title {
    color: var(--primary);
  }

  /* "Paso a paso" (eyebrow del carrusel a la derecha) en negro. */
  .eyebrow {
    color: var(--black, #000);
  }

  /* .text-left .highlighted-text {
    font-size: 1.5rem;
  } */

  .section-text {
    padding: 16px;
  }

  [data-component-id="usfq_theme:text_block"] {
    &[data-component-variant="default"] {

      .title,
      .description,
      .highlighted-text {
        line-height: var(--lh-h1);
        margin-bottom: 1rem !important;
      }
    }
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .section-text {
      padding: 1rem 48px;
    }

    /* .text-left .highlighted-text {
      font-size: 1.5rem;
    } */
  }

  /* DESKTOP */
  @media (min-width: 769px) {
    .section-text {
      padding: 1rem 64px;
    }

    /* .text-left .highlighted-text {
      font-size: 3rem;
    } */
  }
  [data-component-id="usfq_theme:link"] {
      color: inherit !important;
  }
}

  :where(html[data-theme="dark"]) .text-left .title,
:where(html[data-theme="dark"]) .eyebrow {
  color: var(--white)!important;
}

/* Curso: "Registro". Acotado a .curso-layout porque el organismo lo usa
   también el bloque steps_slider colocado a mano en otras páginas. */

.curso-layout [data-component-id="usfq_theme:section_carousel_right"] {

  /* La regla de arriba aplica `line-height: var(--lh-h1)` (48px en desktop)
     a texto corrido de 20px. */
  [data-component-id="usfq_theme:text_block"][data-component-variant="default"] .description {
    font-size: 1rem;
    line-height: 1.5;
  }

  .description p,
  .description ul,
  .description h4,
  .description h5 {
    line-height: 1.5;
  }

  .description p {
    margin-bottom: 1rem;
  }

  .description ul {
    margin: 0 0 1rem;
  }

  /* Los <h4>/<h5> del rich text son subtítulos dentro del paso. */
  .description h4 {
    font-size: 1.125rem;
    margin: 0 0 0.75rem;
  }

  .description h5 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }

  .description h4:not(:first-child),
  .description h5:not(:first-child) {
    margin-top: 1.5rem;
  }

  /* Mismo reparto que "Parámetros para emisión de certificado". */
  @media (min-width: 768px) {
    .section-text {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      /* !important: el twig lleva `.align-items-start` de Bootstrap (también
         !important) en la misma fila, para otros usos del organismo. */
      align-items: center !important;
    }

    /* Sin esto cada .col-*-6 se queda a la mitad de su celda y el gutter
       descuadra el texto respecto a "Parámetros". */
    .section-text > div {
      width: 100%;
      max-width: none;
      flex: none;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .section-text {
      column-gap: 1.5rem;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    .section-text {
      column-gap: 10rem;
    }
  }

  /* Solo el título de la columna izquierda va en rojo. `.text-left .title`
     no llega aquí: este organismo no usa esa clase. */
  :where(html:not([data-theme="dark"])) & {
    .section-text > div:first-child .title {
      color: var(--primary) !important;
    }
  }

  /* El icono del botón hereda su color; sin esta regla gana el
     `color: var(--white) !important` sin scope de section_cards_colegios y
     el icono desaparece sobre el fondo blanco del botón. */
  .btn [data-component-id="usfq_theme:icon"] {
    color: inherit !important;
  }

  /* En hover el botón pasa a fondo negro con borde negro: sobre la página
     oscura no se distingue del fondo. */
  .btn.btn--light:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--secondary) !important;
  }

  :where(html[data-theme="dark"]) & {
    .btn.btn--light:hover:not(:disabled):not([aria-disabled="true"]) {
      border-color: var(--white) !important;
    }
  }
}