/**
 * Carrusel de industrias.
 * Flechas y pasos vienen de nav.css (compartidos con servicios).
 */

.scala-ind {
  --scala-ind-visibles: 3;
  --scala-ind-alto: 388px;
  --scala-ind-sep: 32px;
  --scala-ind-radio: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 52 y no 32: el viewport lleva margin vertical de -20px para dar aire a la
     sombra, y eso restaria del espacio real. */
  gap: 52px;
}

/* ---------- encabezado ---------- */

.scala-ind__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 62ch;
}

.scala-ind__titulo {
  margin: 0;
  color: var(--e-global-color-borgonas_darker, #250D1E);
  font-family: var(--e-global-typography-primary-font-family, Georgia), serif;
  font-size: var(--e-global-typography-primary-font-size, 36px);
  font-weight: var(--e-global-typography-primary-font-weight, 700);
  line-height: 1.2;
}

.scala-ind__bajada {
  margin: 0;
  color: var(--e-global-color-text, #393830);
  font-family: var(--e-global-typography-h3-font-family, Georgia), serif;
  font-size: var(--e-global-typography-h3-font-size, 20px);
  line-height: 1.45;
}

/* ---------- pista ---------- */

.scala-ind__viewport {
  /* Ocupa todo el ancho alineado del contenido: el ancho de la tarjeta se
     DERIVA de aqui (ver .scala-ind__card), no al reves. Asi el carrusel calza
     con el hero y con servicios en cualquier monitor, y las tarjetas crecen en
     pantallas grandes en vez de quedar centradas con aire a los lados. */
  width: 100%;
  /* Recorte del carrusel. La sombra de las tarjetas (0 4px 16px) llega ~8px a
     los lados y ~12px abajo, asi que el area de recorte necesita holgura.

     El problema: overflow-clip-margin es un solo valor para los cuatro lados,
     y en horizontal no puede pasar de 16px o asoma la sombra de la tarjeta
     siguiente (24 de separacion menos 8 de su sombra). Con 12px la sombra de
     abajo quedaba cortada justo en el borde.

     Solucion: el espacio VERTICAL se consigue con padding (compensado con
     margin negativo para no mover el layout), y el clip-margin se reserva para
     los LADOS.

     Con 24px de separacion la ventana lateral era demasiado estrecha (la
     sombra necesita 16px y la de la tarjeta siguiente empezaba a los 16px).
     Con 32px de separacion la siguiente sombra empieza a los 24px, asi que
     caben los 20px de margen sin que asome nada. */
  padding: 20px 0;
  margin: -20px 0;
  overflow: clip;
  overflow-clip-margin: 20px;
}

.scala-ind__pista {
  display: flex;
  gap: var(--scala-ind-sep);
  /* El JS escribe --scala-ind-desplaz en px: el carrusel avanza de a UNA
     tarjeta, no por paginas completas. */
  transform: translateX(calc(-1 * var(--scala-ind-desplaz, 0px)));
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}

.scala-ind__card {
  /* El ancho se reparte entre las tarjetas visibles, descontando las
     separaciones: asi tres columnas llenan exactamente el area alineada, sin
     hueco ni tarjeta asomandose.
     La medida del diseno (381px) es el valor que da esta cuenta al ancho en
     que se hizo la maqueta; en monitores mas grandes la tarjeta crece. */
  flex: 0 0 calc(
    (100% - (var(--scala-ind-visibles) - 1) * var(--scala-ind-sep))
    / var(--scala-ind-visibles)
  );
  position: relative;
  display: flex;
  align-items: flex-end;
  height: var(--scala-ind-alto);
  padding: 18px;
  border-radius: var(--scala-ind-radio);
  overflow: hidden;
  text-decoration: none;
  background-color: var(--e-global-color-verde_acero_light_active, #E2E2DA);
  background-image: var(--scala-ind-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .18);
}

/* Etiqueta sobre la imagen. Al estar anclada al fondo de la tarjeta
   (align-items: flex-end), cuando crece lo hace hacia ARRIBA. */
.scala-ind__chip {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--e-global-color-lino_claro_light, #FEFEFD);
  color: var(--e-global-color-borgonas_darker, #250D1E);
}

.scala-ind__nombre {
  display: block;
  font-family: var(--e-global-typography-primary-font-family, Georgia), serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

/* La descripcion se despliega al pasar el mouse.
   Se anima grid-template-rows de 0fr a 1fr: es la forma de animar hacia una
   altura AUTOMATICA sin fijar un max-height a mano, que se rompe en cuanto el
   texto cambia de largo. */
.scala-ind__desc-caja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.16, 1, .3, 1);
}

.scala-ind__desc {
  overflow: hidden;
  font-family: var(--e-global-typography-text-font-family, system-ui), sans-serif;
  font-size: 15px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .35s ease .1s;
}

/* Solo en dispositivos con mouse: en tactil no hay hover. */
@media (hover: hover) {
  .scala-ind__card:hover .scala-ind__desc-caja,
  .scala-ind__card:focus-visible .scala-ind__desc-caja {
    grid-template-rows: 1fr;
  }

  .scala-ind__card:hover .scala-ind__desc,
  .scala-ind__card:focus-visible .scala-ind__desc {
    /* El margen entra junto con el texto, para que no salte al abrir. */
    margin-top: 6px;
    opacity: 1;
  }
}

/* Sin hover disponible (tactil): la descripcion va siempre visible. */
@media (hover: none) {
  .scala-ind__desc-caja { grid-template-rows: 1fr; }
  .scala-ind__desc { margin-top: 6px; opacity: 1; }
}

/* Sin hover: el tema pinta los enlaces (a:hover{color:#336}). */
.scala-ind .scala-ind__card,
.scala-ind .scala-ind__card:hover,
.scala-ind .scala-ind__card:focus,
.scala-ind .scala-ind__card:active { text-decoration: none; }

.scala-ind .scala-ind__card:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #692556);
  outline-offset: 3px;
}

/* ---------- movil ---------- */

@media (max-width: 767px) {
  /* El area recortada declara un ancho de contenido mayor que su caja, y con
     overflow visible eso se propaga hacia arriba hasta el body y genera
     scroll horizontal. Se corta aqui, en el borde del componente: ninguna
     caja hija se pasa de la pantalla, asi que no recorta nada visible. */
  .scala-ind { overflow-x: clip; }

  /* Nav igual que en servicios: de borde a borde del contenido en vez de
     agrupado al centro. .scala-ind centra a sus hijos, asi que hace falta
     stretch; el padding-left de 20px lo alinea con el borde izquierdo de las
     tarjetas (el bloque solo aporta 4px de gutter en movil). */
  .scala-ind .scala-nav {
    align-self: stretch;
    justify-content: space-between;
    /* 20 + los 4 de gutter del bloque = 24 a la izquierda; 24 a la derecha,
       donde el bloque no aporta padding porque el carrusel sangra hasta el
       borde. Asi las flechas quedan a la misma distancia de los dos bordes. */
    padding-left: 20px;
    padding-right: 24px;
  }

  /* Igual que servicios: el area visible sangra hasta el borde derecho de la
     pantalla, asi asoma un trozo de la tarjeta siguiente y el corte queda en
     el borde y no en el gutter del bloque.
     Sin esto el area medía exactamente una tarjeta y no se asomaba nada. */
  .scala-ind__viewport {
    /* align-self: stretch es necesario: .scala-ind centra sus hijos, y con
       width:auto el area crecia al tamano del contenido (las 4 tarjetas) en
       vez de al ancho del bloque. */
    width: auto;
    align-self: stretch;
    /* Sin margen negativo con vw: en movil el bloque ocupa el ancho completo y
       su padding-right es 0, asi que este borde ya es el de la pantalla.
       Con vw el elemento se pasaba del area visible cuando hay barra de scroll
       y generaba scroll horizontal. */
    /* Aire para la sombra izquierda con padding, SIN margen negativo: con
       align-self:stretch un margen negativo hace que el elemento mida
       (padre + 20) y el borde derecho se pase de la pantalla. */
    padding-left: 20px;
    padding-block: 20px;
    margin-block: -20px;
    overflow-clip-margin: 0;
  }

  /* Porcentaje del area (que ahora llega al borde de la pantalla), no un
     calculo con px: el 18% restante es lo que deja asomar la tarjeta
     siguiente. Mismo criterio que en servicios. */
  .scala-ind__card {
    flex: 0 0 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scala-ind__pista,
  .scala-ind__desc-caja,
  .scala-ind__desc { transition: none; }
}