/**
 * Acordeon horizontal de servicios.
 * Los colores y tipografias salen de las variables globales del kit de
 * Elementor, para que el design system siga siendo la unica fuente.
 * Los colores de cada tarjeta llegan por --scala-bg / --scala-fg desde el CPT.
 */

.scala-srv {
  display: grid;
  /* El nav es hermano del intro (no hijo), para poder moverlo debajo de las
     tarjetas en movil. En escritorio se coloca con grid bajo el intro. */
  grid-template-columns: minmax(260px, 33%) 1fr;
  grid-template-rows: auto auto;
  column-gap: 40px;
  align-content: center;
}

.scala-srv__intro { grid-column: 1; grid-row: 1; }
/* Acotado a .scala-srv: sin el prefijo, este margin-top se aplicaba tambien
   al nav de industrias y de recursos, que comparten la clase .scala-nav. */
.scala-srv .scala-nav { grid-column: 1; grid-row: 2; margin-top: 22px; }
.scala-srv__pista { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- columna izquierda ---------- */

.scala-srv__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scala-srv__antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--e-global-color-primary, #692556);
  font-family: var(--e-global-typography-h3-font-family, Georgia), serif;
  font-size: var(--e-global-typography-h3-font-size, 20px);
}

.scala-srv__guion {
  width: 24px;
  height: 1.5px;
  background: currentColor;
  flex: 0 0 auto;
}

.scala-srv__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: var(--e-global-typography-primary-line-height, 1.15em);
}

.scala-srv__bajada {
  margin: 0;
  max-width: 46ch;
  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.5;
}

/* ---------- pista de tarjetas ---------- */

.scala-srv__pista {
  --scala-alto: 560px;
  /* La tarjeta monta sobre la anterior: el ancho visible es
     cerrada - solape = 96px. */
  --scala-cerrada: 120px;
  --scala-solape: 24px;
  --scala-radio: 24px;
  display: flex;
  /* Sin gap: la sombra solida hace de separador entre tarjetas. */
  gap: 0;
  height: var(--scala-alto);
  min-width: 0;
}

.scala-srv__tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Solo las esquinas IZQUIERDAS, el lado derecho recto (asi viene del diseno:
     border-radius: 50px 0 0 50px). Con radio en las cuatro quedaban cunas
     entre tarjetas y habia que separarlas con un gap. */
  border-radius: var(--scala-radio) 0 0 var(--scala-radio);
  background: var(--scala-bg);
  color: var(--scala-fg);
  /* Sombra densa y pegada al borde: es el unico separador entre tarjetas.
     DESVIA del Figma (-9 / 9.3 / 25%): ese valor, medido en el render, cae
     solo 14 puntos de luminancia repartidos en 12px, y sobre las tarjetas
     oscuras no se ve. Esta cae ~85 en 8px. */
  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, .55);
  /* Se anima flex-grow, no flex-basis: hacia "auto" el navegador no puede
     interpolar y el cambio se ve duro. */
  flex: 0 0 var(--scala-cerrada);
  min-width: 0;
  transition: flex-grow 1.6s cubic-bezier(.16, 1, .3, 1);
}

/* Solape: cada tarjeta monta sobre la anterior, la ultima arriba del todo. */
.scala-srv__tarjeta + .scala-srv__tarjeta { margin-left: calc(var(--scala-solape) * -1); }
.scala-srv__tarjeta:nth-child(1) { z-index: 1; }
.scala-srv__tarjeta:nth-child(2) { z-index: 2; }
.scala-srv__tarjeta:nth-child(3) { z-index: 3; }
.scala-srv__tarjeta:nth-child(4) { z-index: 4; }
.scala-srv__tarjeta:nth-child(5) { z-index: 5; }
.scala-srv__tarjeta:nth-child(6) { z-index: 6; }
.scala-srv__tarjeta:nth-child(7) { z-index: 7; }
.scala-srv__tarjeta:nth-child(8) { z-index: 8; }

.scala-srv__tarjeta.is-abierta { flex-grow: 1; }

/* La ultima tarjeta cierra la pila: lleva radio tambien a la derecha, porque
   no hay otra montandose encima que tape ese canto. */
.scala-srv__tarjeta:last-child {
  border-radius: var(--scala-radio);
}


/* Capa de forma de fondo.
   El SVG se aplica como MASCARA, no como imagen: asi el color lo pone el CSS
   (--scala-forma-color, que cada servicio define en su campo) y el mismo
   archivo sirve para las cinco tarjetas en distintos colores.

   La capa tiene la proporcion del SVG (380x540) y su alto se mide sobre el
   ALTO de la tarjeta, que es constante: por eso la forma NO escala al abrir.

   El despliegue es un DESLIZAMIENTO, no un recorte: con la tarjeta cerrada la
   capa esta corrida por completo fuera del borde derecho (translate 100%) y el
   overflow:hidden de la tarjeta la oculta. Al abrir vuelve a 0, entrando desde
   la derecha hacia la izquierda.
   Antes esto se hacia con clip-path y se veia un borde recto avanzando; al
   deslizar, lo que aparece es el propio contorno difuso del SVG. */
.scala-srv.tiene-forma .scala-srv__tarjeta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  height: var(--scala-forma-tamano, 100%);
  aspect-ratio: 380 / 540;
  pointer-events: none;
  background: var(--scala-forma-color, currentColor);
  opacity: var(--scala-forma-opacidad, 1);
  -webkit-mask: var(--scala-forma) no-repeat center / 100% 100%;
          mask: var(--scala-forma) no-repeat center / 100% 100%;
  /* Fuera del borde derecho; el overflow de la tarjeta la recorta. */
  translate: 100% -50%;
  /* Mismo ritmo que la apertura de la tarjeta. */
  transition: translate 1.6s cubic-bezier(.16, 1, .3, 1);
}

.scala-srv.tiene-forma .scala-srv__tarjeta.is-abierta::after {
  translate: 0 -50%;
}

/* Respaldo mientras no haya SVG cargado: el circulo, solo en la abierta. */
.scala-srv:not(.tiene-forma) .scala-srv__tarjeta.is-abierta::after {
  content: "";
  position: absolute;
  top: -14%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: .05;
  pointer-events: none;
}

/* El boton cubre la tarjeta completa: se abre haciendo click en cualquier parte.
   El numero queda arriba a la izquierda por el padding. */
.scala-srv .scala-srv__abrir {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  /* Los <button> centran su contenido verticalmente: con el boton a alto
     completo eso ignora el padding-top. Con flex el numero queda arriba. */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  appearance: none;
  border: 0;
  border-radius: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 28px 0 0 28px;
  font: inherit;
}

/* El tema y los estilos globales de Elementor pintan los <button>: se anulan
   en todos los estados, si no aparece un fondo al pasar por encima. */
.scala-srv .scala-srv__abrir,
.scala-srv .scala-srv__abrir:hover,
.scala-srv .scala-srv__abrir:focus,
.scala-srv .scala-srv__abrir:active {
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

.scala-srv__tarjeta.is-abierta .scala-srv__abrir { cursor: default; }

/* La tarjeta se encabeza con el icono del servicio (campo "Icono" del CPT).
   Si el servicio no tiene icono se cae al numero, que es el diseño anterior. */
.scala-srv__marca {
  display: block;
  width: 50px;
  height: 50px;
}

.scala-srv__marca img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scala-srv__numero {
  display: block;
  font-family: var(--e-global-typography-primary-font-family, Georgia), serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}

.scala-srv__cuerpo {
  margin-top: auto;
  padding: 0 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Ancho FIJO, no el de la tarjeta: si dependiera de ella, el texto se
     re-acomodaria en cada frame de la animacion y pareceria encogerse.
     --scala-cuerpo lo mide el JS al cargar y al redimensionar. */
  width: var(--scala-cuerpo, 300px);
  min-width: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}

.scala-srv__tarjeta.is-abierta .scala-srv__cuerpo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Entra cuando la tarjeta ya casi termino de abrirse, no a la vez. */
  transition: opacity .75s ease .55s, visibility .75s .55s;
}

.scala-srv__icono img { width: 28px; height: 28px; object-fit: contain; }

.scala-srv__nombre {
  margin: 0;
  max-width: 20ch;
  font-family: var(--e-global-typography-primary-font-family, Georgia), serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.scala-srv__resumen {
  margin: 0;
  max-width: 34ch;
  font-family: var(--e-global-typography-text-font-family, system-ui), sans-serif;
  font-size: 16px;
  line-height: 1.45;
  opacity: .92;
}

.scala-srv__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: inherit;
  text-decoration: none;
  font-family: var(--e-global-typography-accent-font-family, system-ui), sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.scala-srv__enlace svg { width: 18px; height: 18px; }

/* Sin hover en el enlace de la tarjeta.
   Hello Elementor define a:hover{color:#336} (azul) con mas especificidad que
   una sola clase, asi que hay que anular el COLOR, no solo el subrayado. */
.scala-srv .scala-srv__enlace,
.scala-srv .scala-srv__enlace:hover,
.scala-srv .scala-srv__enlace:focus,
.scala-srv .scala-srv__enlace:active {
  color: inherit;
  text-decoration: none;
}

/* ---------- foco visible ---------- */

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

.scala-srv__tarjeta.is-abierta .scala-srv__abrir:focus-visible {
  outline-color: var(--scala-fg);
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
  /* Una sola columna: hay que reubicar los tres bloques. Si la pista se queda
     en "grid-column: 2" el grid crea una columna implicita y desborda. */
  .scala-srv { grid-template-columns: 1fr; row-gap: 32px; column-gap: 0; }
  .scala-srv__intro { grid-column: 1; grid-row: 1; }
  .scala-srv__pista { grid-column: 1; grid-row: 2; }
  .scala-srv .scala-nav { grid-column: 1; grid-row: 3; margin-top: 0; }
  .scala-srv__pista { --scala-solape: 20px; }
}

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

@media (max-width: 767px) {
  /* Una columna, y el nav DEBAJO de las tarjetas (en escritorio va al lado). */
  .scala-srv {
    display: flex;
    flex-direction: column;
    gap: 26px;
    /* Las tarjetas se asoman a proposito fuera del borde derecho; el recorte
       evita que eso genere scroll horizontal en la pagina. "clip" no crea
       contenedor de scroll, a diferencia de "hidden".
       overflow-clip-margin corre el recorte hacia afuera para que la SOMBRA
       de las tarjetas no quede cortada en el borde del contenedor. */
    /* El carrusel llega al borde derecho de la pantalla y recorta ahi.
       No hace falta ningun margen negativo con vw: en movil la seccion ocupa
       el ancho completo y su padding-right es 0, asi que el borde derecho de
       este contenedor YA ES el de la pantalla.
       (Con vw el elemento se pasaba del area visible cuando el navegador
       muestra barra de scroll, y aparecia scroll horizontal.)
       El padding/margin izquierdo y vertical dan aire a la sombra sin mover
       el contenido. */
    /* El aire para la sombra izquierda se da con padding, SIN margen negativo:
       con margen negativo el elemento mide (padre + 20) y el borde derecho se
       pasa de la pantalla. Los 20px se descuentan del padding del contenedor
       para que el contenido quede en el mismo sitio. */
    padding: 20px 0 20px 20px;
    margin: -20px 0;
    overflow: clip;
    overflow-clip-margin: 0;
  }

  .scala-srv__intro { order: 0; }
  .scala-srv__pista { order: 1; }
  /* padding-right para que las flechas queden a la misma distancia de los dos
     bordes de la pantalla: a la izquierda ya hay 24px (20 del contenedor mas
     los 4 de gutter del bloque) y a la derecha el nav llegaba al borde. */
  /* padding-right para que las flechas queden a la misma distancia de los dos
     bordes de la pantalla: a la izquierda ya hay 24px (20 del contenedor mas
     los 4 de gutter del bloque) y a la derecha el nav llegaba al borde. */
  .scala-srv .scala-nav {
    order: 2;
    margin-top: 0;
    justify-content: space-between;
    padding-right: 24px;
  }

  .scala-srv__pista {
    /* El alto y el ancho cerrado los fijan los controles del widget por
       breakpoint: Elementor los escribe con mas especificidad que este
       archivo, asi que declararlos aqui no tendria efecto.
       El solape no tiene control, va solo en CSS. */
    /* Sin solape en movil: las tarjetas van una al lado de otra, no apiladas.
       El separador lo hace la sombra. */
    --scala-solape: 0px;
    /* Separacion real entre tarjetas: en movil cada una es una pieza cerrada,
       no una pila. */
    --scala-sep: 24px;
    flex-direction: row;
    gap: var(--scala-sep);
    height: var(--scala-alto);
    /* Carrusel: la pista se corre para que la tarjeta activa quede a la
       izquierda. Cada tarjeta anterior ocupa (cerrada + separacion), y el JS
       escribe --scala-indice con la posicion activa. */
    transform: translateX(calc(-1 * var(--scala-indice, 0) * (var(--scala-cerrada) + var(--scala-sep))));
    transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
    /* Las tarjetas siguientes se asoman fuera del borde derecho. */
    overflow: visible;
  }

  /* En movil el ancho no se puede animar con flex-grow: la pista es mas
     angosta que la suma de las tarjetas, asi que no queda espacio libre que
     repartir. Se anima el width, que entre px y vw si interpola. */
  .scala-srv__tarjeta {
    flex: 0 0 auto;
    width: var(--scala-cerrada);
    transition: width 1.6s cubic-bezier(.16, 1, .3, 1);
    /* Las CUATRO esquinas: en movil no se apilan, asi que cada tarjeta se
       cierra por si sola (en escritorio el lado derecho va recto porque la
       siguiente monta encima). */
    border-radius: var(--scala-radio, 24px);
    /* Sombra en TODO el contorno: al ser piezas separadas, cada tarjeta
       proyecta su propia sombra. En escritorio la sombra va solo a la
       izquierda porque ahi hace de separador entre tarjetas apiladas. */
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .22);
  }

  .scala-srv__tarjeta.is-abierta {
    width: var(--scala-abierta, 82vw);
  }

  .scala-srv__numero { font-size: 30px; }

  .scala-srv__marca { width: 42px; height: 42px; }

  .scala-srv .scala-srv__abrir { padding: 20px 0 0 22px; }

  .scala-srv__cuerpo { padding: 0 22px 24px; }

  .scala-srv__nombre { font-size: 19px; }
  .scala-srv__resumen { font-size: 15px; }
}

/* ---------- sin animacion si el sistema lo pide ---------- */

@media (prefers-reduced-motion: reduce) {
  .scala-srv__tarjeta,
  .scala-srv__cuerpo,
  .scala-srv__paso,
  .scala-srv__enlace svg { transition: none; }
}