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

  &.dark{
    background: var(--dark);
    color: var(--white);
    .list-component__item{
      border-color: var(--white);
    }
  }

  &.primary{
    background: var(--primary);
    color: var(--white);
    .list-component__item{
      border-color: var(--white);
    }
  }

  &.title-red .h1.title,  
  &.full-teachers .eyebrow{
    color: var(--primary);
  }

  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 100%;
  }
  [data-component-id="usfq_theme:icon"] {
        color: inherit !important;
  }
  [data-component-id="usfq_theme:link"] {
  /* Variantes color */
    &.link--color-secondary, .link--color-primary, 
    .link--color-light{
      color: inherit !important;
    }
  }
  .container-image {
    div {
      height: 100%;
    }
  }
  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .content {
    padding: 1.5rem 0 6rem 0;
    position: relative;
  }

  .signo{
    font-size: 2rem;
    display: flex;
    align-items: center;
    color: var(--secondary);
  }
  .carousel-controls {
    position: relative;
    left: auto;
    transform: none;
    display: flex;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    padding: 2rem;
  }

  .carousel-control-prev,
  .carousel-control-next {
    position: static;
    width: 52px;
    height: 52px;
    border: 2px solid var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
  }
  .carousel-control-prev .icon,
  .carousel-control-next .icon{
    color: var(--secondary)!important;

  }
  .carousel-control-prev:hover .icon,
  .carousel-control-next:hover .icon{
    color: var(--white)!important;
  }
  .carousel-control-prev:hover,
  .carousel-control-next:hover{
    background-color: black;
  }

  .carousel-control-prev:hover,
  .carousel-control-next:hover,
  .carousel-control-prev:focus,
  .carousel-control-next:focus {
    color: white !important;
    background-color:  var(--secondary) !important;
  }

  .align-items-stretch {
    min-height: 696px;
  }

  .align-items-stretch .content {
    align-self: center;
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    >div {
      min-height: 100%;
    }
    .align-items-stretch {
      min-height: 600px;
    }
    .content { 
      padding: 96px 0;
    }

    .carousel-inner{
      display: flex;
      position: relative;
    }
    .carousel-controls {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      margin-top: auto;
      gap: 4rem;
    }
    .signo{
      color: var(--white);
    }
    .carousel-control-prev,
    .carousel-control-next {
      border: 2px solid var(--white);
      color: var(--white);
    }
    .carousel-control-prev .icon,
    .carousel-control-next .icon{
      color: var(--white)!important;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
        >div {
      min-height: 90vh;

      .content {
        align-self: center;
        height: 100%;
        padding: 6rem 0;
      }
    }

    .align-items-stretch {
      min-height: 834px;
    }

    .carousel-inner{
      display: flex;
      position: relative;
    }
    .carousel-controls {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      gap: 4rem;
      margin-top: auto;
    }
    .signo{
      color: var(--white);
    }
    .carousel-control-prev,
    .carousel-control-next {
      border: 2px solid var(--white);
      color: var(--white);
    }
    .carousel-control-prev .icon,
    .carousel-control-next .icon{
      color: var(--white)!important;
    }                                     
  }
  :where(html[data-theme="dark"]) & {
    .carousel-control-prev,
    .carousel-control-next {
      border-color: var(--white)!important;
    }
    .signo{
      color: var(--white)!important;
    }
    /* mobile */
    .carousel-control-prev:hover .icon,
    .carousel-control-next:hover .icon{
      color: var(--secondary) !important;
    }
    .carousel-control-prev:hover,
    .carousel-control-next:hover{
      background-color: var(--white)!important;
    }
    .carousel-control-prev .icon,
    .carousel-control-next .icon{
      color: var(--white)!important;
    }
    @media (min-width: 768px) and (max-width: 1024px) {
      .carousel-control-prev:hover,
      .carousel-control-next:hover{
        background-color: var(--secondary)!important;
      }
      .carousel-control-prev:hover .icon,
      .carousel-control-next:hover .icon{
        color: var(--white) !important;
      }
    }
    @media (min-width: 1025px) {
      .carousel-control-prev:hover,
      .carousel-control-next:hover{
        background-color: var(--secondary)!important;
      }
      .carousel-control-prev:hover .icon,
      .carousel-control-next:hover .icon{
        color: var(--white) !important;
      }
    }
  }
}
/* Curso: "Descripción del curso". El título va en negro (no es la variante
   roja); en oscuro se deja invertir solo con la regla de text_block.css. */
:where(html:not([data-theme="dark"])) .curso-layout [data-component-id="usfq_theme:section_highlight"] .title {
  color: var(--dark) !important;
}


/* ===== Section highlight: imágenes con altura = viewport ===== */

/* Desktop / tablet (columnas lado a lado) */
@media (min-width: 576px) {
  .section-highlight-carousel-gallery > .row {
    min-height: 100vh;   /* fallback */
    min-height: 100svh;  /* evita saltos con barras del navegador */
  }

  .section-highlight-carousel-gallery .container-img {
    position: relative;
    padding: 0;
  }

  /* La imagen se posiciona absoluta: ya no define la altura de la fila */
  .section-highlight-carousel-gallery .container-img .carousel {
    position: absolute;
    inset: 0;
  }
}

/* Común a todos los tamaños */
.section-highlight-carousel-gallery .carousel-inner,
.section-highlight-carousel-gallery .carousel-item,
.section-highlight-carousel-gallery .carousel-image-wrapper {
  height: 100%;
}

/* Caja de referencia del panel de creditos, que va en position: absolute. */
.section-highlight-carousel-gallery .carousel-image-wrapper {
  position: relative;
}

.section-highlight-carousel-gallery .carousel-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* recorta sin deformar */
  object-position: center;  /* punto focal del recorte */
}

/* Móvil (columnas apiladas): la imagen también ocupa el alto del viewport */
@media (max-width: 575.98px) {
  .section-highlight-carousel-gallery .container-img {
    aspect-ratio: 16 / 9;
    height: auto; /* que aspect-ratio tome el control */
  }
}
/* ===========================================================================
   PILARES DESPLEGABLES

   Dentro del texto del highlight, un <div class="pillars"> con un
   <details class="pillar"> por punto: el <summary> es el nombre y el resto
   el texto que se abre. Es HTML nativo, así que funciona con teclado y sin
   JS. El editor de full_html deja escribir <details class> y <summary> desde
   el código fuente. Numeración y marcas salen del CSS.
   =========================================================================== */
[data-component-id="usfq_theme:section_highlight"] .pillars {
  counter-reset: pillar;
  margin: 8px 0 0;
  border-top: 1px solid rgba(23, 23, 23, 0.14);

  .pillar {
    counter-increment: pillar;
    border-bottom: 1px solid rgba(23, 23, 23, 0.14);
  }

  .pillar > summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    cursor: pointer;
    list-style: none;
    font-family: var(--headings-font-family);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--secondary);
    transition: color 0.15s ease;
  }

  /* Safari todavía pinta el triángulo con el pseudo-elemento propio. */
  .pillar > summary::-webkit-details-marker {
    display: none;
  }

  .pillar > summary::before {
    content: counter(pillar, decimal-leading-zero);
    flex: none;
    min-width: 1.6em;
    font-size: 12px;
    font-weight: 700;
    color: rgba(23, 23, 23, 0.4);
  }

  /* Un "+" que gira a "×" al abrir. */
  .pillar > summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--font-family-base);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--primary);
    transition: transform 0.2s ease;
  }

  .pillar[open] > summary,
  .pillar > summary:hover {
    color: var(--primary);
  }

  .pillar[open] > summary::after {
    transform: rotate(45deg);
  }

  .pillar > summary:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }

  .pillar > :not(summary) {
    margin: 0;
    padding: 0 4px 18px calc(1.6em * 12 / 16 + 16px + 4px);
    font-size: 16px;
    line-height: 1.6;
    color: #55585c;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-component-id="usfq_theme:section_highlight"] .pillars .pillar > summary::after {
    transition: none;
  }
}

/* El enlace con línea ("Descubre nuestro modelo") se pone rojo entero al pasar
   el cursor: flecha, línea y texto. La línea es el borde de
   .link-divider__text en currentColor y la flecha hereda el color, así que basta
   con cambiar el del enlace; arriba se fija con !important, así que aquí
   también lo lleva. Sobre el fondo rojo (variante primary) no se vería y se
   queda como está. */
[data-component-id="usfq_theme:section_highlight"]:not(.primary) {
  .link-divider,
  .link-divider .link-divider__text,
  .link-divider [data-component-id="usfq_theme:icon"] {
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .link-divider:hover,
  .link-divider:focus-visible {
    color: var(--primary) !important;
  }
}