/* ==========================================================================
   MASTERLED CATEGORY HEADER
   EDITORIAL LIGHT
   ========================================================================== */

.cat-hero {

  --ml-navy: #142d59;
  --ml-blue: #23599d;
  --ml-blue-soft: #eef3fa;

  --ml-yellow: #dce200;

  --ml-text: #222733;
  --ml-muted: #737d8d;

  --ml-line: #e1e6ed;
  --ml-line-strong: #d5dce6;

  --ml-bg: #f6f7f9;
  --ml-card: #ffffff;

  position: relative;

  margin: 0 0 1rem;

  padding-inline: .5rem;

}


@media (min-width: 1200px) {

  .cat-hero {
    padding-inline: .75rem;
  }

}


/* ==========================================================================
   SUPERFICIE GENERAL
   ========================================================================== */

.cat-hero__surface {

  position: relative;

  isolation: isolate;

  overflow: hidden;


  /*
   * Más respiración vertical.
   *
   * Arriba:    ~18px
   * Laterales: ~22px
   * Abajo:     ~22px
   */
  padding:
    3.15rem
    1.35rem
    4.4rem;


  border:
    1px solid
    var(--ml-line);


  /*
   * Etiqueta que nace de la cabecera superior (pegada arriba): solo
   * esquinas inferiores redondeadas. Fondo blanco sobre el gris de la web.
   */
  border-radius: 0 0 12px 12px;


  background:

    radial-gradient(
      ellipse at 73% -15%,
      rgba(51, 104, 170, .075) 0%,
      rgba(51, 104, 170, .025) 30%,
      transparent 54%
    ),

    radial-gradient(
      ellipse at 102% 110%,
      rgba(218, 225, 0, .055) 0%,
      transparent 37%
    ),

    #ffffff;


  box-shadow:
    0 1px 3px rgba(20, 38, 61, .05),
    0 12px 30px -18px rgba(20, 38, 61, .18);

}


/* ==========================================================================
   DETALLE EDITORIAL ABSTRACTO
   ========================================================================== */

.cat-hero__surface::before {

  content: "";

  position: absolute;

  z-index: 0;

  width: 430px;
  height: 430px;

  right: 10%;
  top: -385px;

  border:
    1px solid
    rgba(42, 88, 145, .13);

  border-radius: 50%;

  pointer-events: none;

}


.cat-hero__surface::after {

  content: "";

  position: absolute;

  z-index: 0;

  width: 210px;
  height: 210px;

  right: -145px;
  bottom: -165px;

  border:
    1px solid
    rgba(205, 213, 0, .11);

  border-radius: 50%;

  pointer-events: none;

}



/* ==========================================================================
   FOTO AMBIENTAL
   ========================================================================== */

.cat-hero__bg {

  position: absolute;

  z-index: 0;

  inset: 0;

  pointer-events: none;


  background-repeat:
    no-repeat;

  background-size:
    cover;

  background-position:
    right center;


  opacity:
    .10;


  filter:
    saturate(.65)
    contrast(.96)
    brightness(1.07);


  -webkit-mask-image:

    linear-gradient(
      to right,
      transparent 0%,
      transparent 35%,
      rgba(0,0,0,.22) 57%,
      #000 100%
    );


  mask-image:

    linear-gradient(
      to right,
      transparent 0%,
      transparent 35%,
      rgba(0,0,0,.22) 57%,
      #000 100%
    );

}


/*
 * Fundido para mantener legibilidad.
 */

.cat-hero__bg-overlay {

  position: absolute;

  z-index: 1;

  inset: 0;

  pointer-events: none;


  background:

    linear-gradient(
      90deg,
      rgba(247,249,251,.98) 0%,
      rgba(247,249,251,.92) 30%,
      rgba(247,249,251,.62) 61%,
      rgba(247,249,251,.30) 100%
    );

}



/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.cat-crumb {

  position: relative;

  z-index: 5;

  /*
   * Algo más de espacio antes del cuerpo de la cabecera.
   */
  margin:
    0
    0
    .95rem;

}


.cat-crumb ol {

  list-style: none;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: .08rem;

  margin: 0;
  padding: 0;

  font-size: .75rem;
  line-height: 1.2;

}


.cat-crumb__item {

  display: inline-flex;
  align-items: center;

}


.cat-crumb__item +
.cat-crumb__item::before {

  content: "";

  width: 5px;
  height: 5px;

  flex: 0 0 auto;

  margin:
    0
    .32rem;


  border-top:
    1px solid
    #a3acb8;

  border-right:
    1px solid
    #a3acb8;


  transform:
    rotate(45deg);

}


.cat-crumb__link,
.cat-crumb__cur {

  display: inline-flex;
  align-items: center;

  text-decoration: none;

}


.cat-crumb__link {

  padding:
    .18rem
    .25rem;

  color:
    #7a8492;

}


.cat-crumb__link:hover {

  color:
    var(--ml-blue);

}


.cat-crumb__cur {

  padding:
    .3rem
    .55rem;

  border-radius:
    7px;

  color:
    var(--ml-navy);


  background:
    #e9edf3;


  font-weight:
    600;

}


.cat-crumb__home {

  display:
    block;

}


.cat-crumb__sronly {

  position:
    absolute !important;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(0,0,0,0);

  white-space:
    nowrap;

  border:
    0;

}



/* ==========================================================================
   CONTENIDO 27 / 73
   ========================================================================== */

.cat-hero__content {

  position: relative;

  z-index: 4;

  display: grid;


  grid-template-columns:
    minmax(245px, 27%)
    minmax(0, 1fr);


  align-items: center;

  gap:
    1.55rem;

  min-width:
    0;

}



/* ==========================================================================
   INTRO
   ========================================================================== */

.cat-hero__intro {

  position: relative;

  min-width: 0;

  padding:
    .35rem
    1.5rem
    .35rem
    .1rem;

}


/*
 * Separador visual muy ligero.
 */

.cat-hero__intro::after {

  content: "";

  position: absolute;

  top: 5%;
  right: 0;
  bottom: 5%;

  width: 1px;


  background:

    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(79, 96, 118, .13) 20%,
      rgba(79, 96, 118, .13) 80%,
      transparent 100%
    );

}


.cat-hero__title {

  margin:
    0
    0
    .45rem;


  color:
    var(--ml-text);


  font-size:

    clamp(
      1.5rem,
      1.1rem + .85vw,
      1.95rem
    );


  line-height:
    1.08;


  font-weight:
    400;


  letter-spacing:
    -.026em;

}



/* ==========================================================================
   DESCRIPCIÓN
   ========================================================================== */

.cat-hero__desc {

  color:
    var(--ml-muted);

  font-size:
    .86rem;

  line-height:
    1.52;

}


.cat-hero__desc-inner {

  display:
    -webkit-box;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

  overflow:
    hidden;

}


.cat-hero__desc-inner p {

  margin:
    0;

}


.cat-hero__desc-inner p + p {

  margin-top:
    .4rem;

}


.cat-hero__desc-inner strong,
.cat-hero__desc-inner b {

  color:
    #3f4652;

}


.cat-hero__desc-inner a {

  color:
    var(--ml-blue);

}


.cat-hero__desc.is-expanded
.cat-hero__desc-inner {

  display:
    block;

  -webkit-line-clamp:
    unset;

  max-height:
    300px;

  padding-right:
    .45rem;

  overflow-y:
    auto;

}


.cat-hero__desc.is-expanded
.cat-hero__desc-inner::-webkit-scrollbar {

  width:
    5px;

}


.cat-hero__desc.is-expanded
.cat-hero__desc-inner::-webkit-scrollbar-thumb {

  background:
    #ccd3dc;

  border-radius:
    999px;

}



/* ==========================================================================
   MÁS INFORMACIÓN
   ========================================================================== */

.cat-hero__more {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    .3rem;

  margin-top:
    .38rem;

  padding:
    .1rem
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--ml-blue);

  font-size:
    .78rem;

  line-height:
    1.3;

  font-weight:
    600;

  cursor:
    pointer;

}


.cat-hero__more:hover {

  color:
    var(--ml-navy);

}


.cat-hero__more::after {

  content: "";

  width:
    17px;

  height:
    1px;

  margin-left:
    .1rem;

  background:
    var(--ml-yellow);


  transition:
    width .18s ease;

}


.cat-hero__more:hover::after {

  width:
    27px;

}


.cat-hero__more svg {

  width:
    12px;

  height:
    12px;


  transition:
    transform .2s ease;

}


.cat-hero__desc.is-expanded +
.cat-hero__more svg {

  transform:
    rotate(180deg);

}



/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */

.cat-hero__nav {

  position:
    relative;

  min-width:
    0;

}



/* ==========================================================================
   CARRUSEL
   ========================================================================== */

.cat-hero__carousel {

  position:
    relative;

  min-width:
    0;

  padding-inline:
    2.35rem;

}


.cat-hero__viewport {

  min-width:
    0;

  overflow:
    hidden;

}


.cat-hero__track {

  display:
    flex;

  gap:
    .62rem;


  /*
   * Un poco más de aire vertical alrededor
   * de las cards.
   */
  padding:
    .3rem
    .08rem
    .4rem;


  overflow-x:
    auto;


  scroll-behavior:
    smooth;


  scroll-snap-type:
    x proximity;


  scrollbar-width:
    none;

}


.cat-hero__track::-webkit-scrollbar {

  display:
    none;

}



/* ==========================================================================
   CARD SUBCATEGORÍA
   ========================================================================== */

.cat-hero__card {

  flex:
    0
    0
    116px;

  width:
    116px;

  min-height:
    114px;


  scroll-snap-align:
    start;


  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;


  gap:
    .4rem;


  padding:
    .6rem
    .4rem
    .55rem;


  border:
    1px solid
    var(--ml-line);


  border-radius:
    10px;


  background:
    rgba(255,255,255,.91);


  color:
    var(--ml-text);


  text-align:
    center;

  text-decoration:
    none;


  box-shadow:
    0 1px 2px
    rgba(21,39,62,.018);


  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);


  transition:

    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease;

}


.cat-hero__card:hover {

  transform:
    translateY(-2px);


  border-color:
    rgba(35,89,157,.30);


  background:
    #fff;


  color:
    var(--ml-blue);


  box-shadow:
    0 4px 12px
    rgba(23,48,80,.055);

}



/* ==========================================================================
   IMAGEN
   ========================================================================== */

.cat-hero__card-media {

  position:
    relative;

  width:
    80px;

  height:
    68px;


  flex:
    0 0 auto;


  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.cat-hero__card-media img {

  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    80px;

  max-height:
    68px;

  object-fit:
    contain;


  transition:
    transform .18s ease;

}


.cat-hero__card:hover
.cat-hero__card-media img {

  transform:
    scale(1.035);

}



/* ==========================================================================
   NOMBRE
   ========================================================================== */

.cat-hero__card-name {

  display:
    -webkit-box;

  width:
    100%;

  min-height:
    1.8em;

  overflow:
    hidden;


  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;


  font-size:
    .75rem;

  line-height:
    1.15;


  font-weight:
    600;

}



/* ==========================================================================
   CATEGORÍA ACTIVA
   ========================================================================== */

.cat-hero__card.active {

  border-color:
    rgba(20,71,135,.46);


  background:

    linear-gradient(
      180deg,
      #f8fbff 0%,
      #edf3fa 100%
    );


  color:
    var(--ml-navy);


  box-shadow:

    inset
    0
    -2px
    0
    var(--ml-navy),

    0
    2px
    8px
    rgba(20,53,93,.045);

}


.cat-hero__card.active:hover {

  border-color:
    rgba(20,71,135,.62);

}



/* ==========================================================================
   FALLBACK SIN ICONO
   ========================================================================== */

.cat-hero__card.is-noicon
.cat-hero__card-media::after {

  content: "";

  width:
    34px;

  height:
    34px;


  border:
    1.5px solid
    #d4dbe4;


  border-radius:
    8px;


  background:

    linear-gradient(
      145deg,
      #f7f8fa,
      #eef1f5
    );

}



/* ==========================================================================
   FLECHAS
   ========================================================================== */

.cat-hero__arrow {

  position:
    absolute;

  top:
    50%;

  z-index:
    8;


  width:
    33px;

  height:
    33px;


  display:
    flex;

  align-items:
    center;

  justify-content:
    center;


  padding:
    0;


  transform:
    translateY(-50%);


  border:
    1px solid
    var(--ml-line-strong);


  border-radius:
    50%;


  background:
    rgba(255,255,255,.95);


  color:
    #293647;


  box-shadow:
    0 2px 7px
    rgba(26,45,70,.045);


  cursor:
    pointer;


  transition:

    border-color .15s ease,
    color .15s ease,
    background .15s ease,
    transform .15s ease,
    opacity .15s ease,
    box-shadow .15s ease;

}


.cat-hero__arrow.js-cat-prev {

  left:
    0;

}


.cat-hero__arrow.js-cat-next {

  right:
    0;

}


.cat-hero__arrow:hover {

  color:
    var(--ml-navy);


  border-color:
    rgba(20,71,135,.34);


  background:
    #fff;


  transform:
    translateY(-50%)
    scale(1.04);


  box-shadow:
    0 4px 11px
    rgba(26,45,70,.075);

}


.cat-hero__arrow[disabled] {

  opacity:
    .28;

  cursor:
    default;


  transform:
    translateY(-50%);


  box-shadow:
    none;

}


.cat-hero__arrow svg {

  width:
    16px;

  height:
    16px;

}



/* ==========================================================================
   SIN NAVEGACIÓN
   ========================================================================== */

.cat-hero__content.is-no-nav {

  grid-template-columns:
    1fr;

}


.cat-hero__content.is-no-nav
.cat-hero__intro {

  max-width:
    760px;

  padding-right:
    0;

}


.cat-hero__content.is-no-nav
.cat-hero__intro::after {

  display:
    none;

}



/* ==========================================================================
   DESKTOP MEDIO
   ========================================================================== */

@media (max-width: 1250px) {

  .cat-hero__surface {

    padding:
      1rem
      1.1rem
      1.2rem;

  }


  .cat-hero__content {

    grid-template-columns:

      minmax(220px,27%)
      minmax(0,1fr);


    gap:
      1.2rem;

  }


  .cat-hero__intro {

    padding:
      .3rem
      1.15rem
      .3rem
      .1rem;

  }


  .cat-hero__card {

    flex-basis:
      108px;

    width:
      108px;

    min-height:
      109px;

  }


  .cat-hero__card-media {

    width:
      73px;

    height:
      63px;

  }


  .cat-hero__card-media img {

    max-width:
      73px;

    max-height:
      63px;

  }

}



/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991px) {

  .cat-hero__surface {

    padding:
      1.05rem
      .95rem
      1.2rem;


    border-radius:
      0 0 12px 12px;

  }


  .cat-hero__content {

    grid-template-columns:
      1fr;

    gap:
      .9rem;

  }


  .cat-hero__intro {

    padding:
      0
      0
      .85rem;

  }


  .cat-hero__intro::after {

    top:
      auto;

    left:
      0;

    right:
      0;

    bottom:
      0;


    width:
      auto;

    height:
      1px;


    background:

      linear-gradient(
        to right,
        transparent,
        rgba(79,96,118,.12) 12%,
        rgba(79,96,118,.12) 88%,
        transparent
      );

  }


  .cat-hero__bg {

    opacity:
      .07;

  }

}



/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 575px) {

  .cat-hero {

    padding-inline:
      .35rem;

  }


  .cat-hero__surface {

    padding:
      .95rem
      .7rem
      1.05rem;


    border-radius:
      0 0 10px 10px;

  }


  .cat-crumb {

    margin-bottom:
      .75rem;

  }


  .cat-hero__title {

    font-size:
      1.45rem;

  }


  .cat-hero__desc {

    font-size:
      .83rem;

  }


  .cat-hero__carousel {

    padding-inline:
      0;

  }


  .cat-hero__arrow {

    display:
      none;

  }


  .cat-hero__track {

    gap:
      .48rem;


    padding:
      .25rem
      .05rem
      .35rem;

  }


  .cat-hero__card {

    flex-basis:
      98px;

    width:
      98px;

    min-height:
      103px;

  }


  .cat-hero__card-media {

    width:
      66px;

    height:
      57px;

  }


  .cat-hero__card-media img {

    max-width:
      66px;

    max-height:
      57px;

  }


  .cat-hero__card-name {

    font-size:
      .7rem;

  }


  .cat-hero__bg {

    display:
      none;

  }

}



/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .cat-hero__track {

    scroll-behavior:
      auto;

  }


  .cat-hero__card,
  .cat-hero__card-media img,
  .cat-hero__arrow,
  .cat-hero__more::after,
  .cat-hero__more svg {

    transition:
      none;

  }

}