/**
 * Ficha de servicio.
 *
 * Los cuatro bloques reciben la paleta del servicio como variables en su
 * contenedor (--scala-srv-fondo / --scala-srv-texto / --scala-srv-suave), asi
 * que una sola hoja sirve para los cinco servicios y cambiar de color es
 * cambiar un campo en el administrador.
 */

/* Los textos de los campos se muestran tal cual se escriben: los saltos de
   linea del administrador se respetan. */
.scala-srv__bajada,
.scala-srv__resumen,
.scala-dir__texto,
.scala-pasos__texto,
.scala-sfaq__respuesta p,
.scala-srv-bajada {
  white-space: pre-line;
}

/* ---------- Qué incluye ----------
   La estructura y la geometria son las del acordeon del inicio (servicios.css):
   este widget emite el mismo marcado. Aqui solo van los colores, que alli
   vienen por tarjeta desde el CPT y aca son los del servicio: la abierta toma
   su color y las cerradas quedan en lino. */

.scala-srv--incluye .scala-srv__tarjeta {
  --scala-bg: var(--e-global-color-lino_claro_normal, #F9F5EF);
  --scala-fg: var(--e-global-color-verde_acero_darker, #393830);
}

.scala-srv--incluye .scala-srv__tarjeta.is-abierta {
  --scala-bg: var(--scala-srv-fondo, var(--e-global-color-borgonas_dark));
  --scala-fg: var(--scala-srv-texto, var(--e-global-color-lino_claro_light));
}

/* El color y la opacidad de la forma NO van aqui: los pone el widget con los
   mismos valores del inicio (el campo "Color de la forma de fondo" del
   servicio y opacidad 0.4).

   Lo que si cambia respecto al inicio: la forma solo se ve en la tarjeta
   abierta. Cerrada queda en opacidad 0 —y no con content:none— para conservar
   su entrada.

   Las dos transiciones son distintas a proposito: al ABRIR la forma se funde
   en 0.8s (la regla del estado abierto) y al CERRAR desaparece al instante
   (esta regla, con 0s). Con un desvanecido al cerrar, la forma se seguia
   viendo mientras la tarjeta ya se habia cerrado. */
/* Los selectores llevan .tiene-forma ademas de la clase del widget para
   sumar especificidad: servicios.css declara la opacidad de la forma con
   .scala-srv.tiene-forma .scala-srv__tarjeta::after (0,3,0) y, con un selector
   mas corto, esa regla ganaba y la forma se seguia viendo al cerrar. */
.scala-srv.scala-srv--incluye.tiene-forma .scala-srv__tarjeta::after {
  opacity: 0;
  transition: translate 1.6s cubic-bezier(.16, 1, .3, 1), opacity 0s;
}

.scala-srv.scala-srv--incluye.tiene-forma .scala-srv__tarjeta.is-abierta::after {
  opacity: var(--scala-forma-opacidad, .4);
  transition: translate 1.6s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
}

/* ---------- A quién está dirigido ----------
   Mismo aspecto que las tarjetas de "Nuestro sello" del inicio: titulo en serif
   con dos lineas reservadas para que todos los textos arranquen a la misma
   altura, y descripcion chica.

   Estos valores son solo el punto de partida: el widget expone columnas,
   separacion, tamaño del icono, colores y tipografias, y lo que se ajuste ahi
   manda sobre esta hoja. */

.scala-dir {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* El icono va sin caja: solo el dibujo. */
.scala-dir__icono {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--e-global-color-verde_acero_dark, #7A7966);
  font-size: var(--scala-dir-icono, 40px);
}

.scala-dir__icono img,
.scala-dir__icono svg {
  width: var(--scala-dir-icono, 40px);
  height: var(--scala-dir-icono, 40px);
  display: block;
}

.scala-dir__titulo {
  margin: 0 0 10px;
  font-family: var(--e-global-typography-h3-font-family), serif;
  font-size: 20px;
  line-height: 1.25;
  /* Dos lineas reservadas, como en el sello. */
  min-height: 2.5em;
  color: var(--e-global-color-verde_acero_darker, #393830);
}

.scala-dir__texto {
  margin: 0;
  font-size: var(--e-global-typography-s-font-size, 12px);
  line-height: 1.6;
  color: var(--e-global-color-verde_acero_dark, #7A7966);
}

@media (max-width: 1024px) {
  .scala-dir { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .scala-dir { grid-template-columns: 1fr; }
  .scala-dir__titulo { min-height: 0; }
}

/* ---------- Cómo trabajamos ----------
   Mismos colores que los pasos del inicio: numero, raya, titulo y texto en el
   gris malva #8F8186 (un color propio que se fijo alli, no un global del kit)
   y, al pasar el cursor, todo al borgoña mas oscuro mientras la raya crece.
   El comportamiento es el mismo de proceso.css; aqui se replica sobre las
   clases propias del widget. */

.scala-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.scala-pasos__item {
  --scala-paso-color: #8F8186;
}

.scala-pasos__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.scala-pasos__num {
  font-family: var(--e-global-typography-primary-font-family), serif;
  font-size: 28px;
  line-height: 1;
  color: var(--scala-paso-color);
  transition: color 1.2s ease;
}

.scala-pasos__linea {
  height: 2px;
  width: 40px;
  border-radius: 99px;
  background: var(--scala-paso-color);
  transition: width 3s cubic-bezier(.33, 1, .68, 1), background-color 1.2s ease;
}

.scala-pasos__titulo {
  margin: 0 0 8px;
  font-family: var(--e-global-typography-h3-font-family), serif;
  font-size: 20px;
  line-height: 1.3;
  /* Reserva dos lineas para que las descripciones arranquen a la misma altura. */
  min-height: 2.6em;
  color: var(--scala-paso-color);
  transition: color 1.2s ease;
}

.scala-pasos__texto {
  margin: 0;
  font-size: var(--e-global-typography-s-font-size, 12px);
  line-height: 1.6;
  color: var(--scala-paso-color);
  transition: color 1.2s ease;
}

.scala-pasos__item:hover,
.scala-pasos__item:focus-within {
  --scala-paso-color: var(--e-global-color-borgonas_darker, #250D1E);
}

.scala-pasos__item:hover .scala-pasos__linea,
.scala-pasos__item:focus-within .scala-pasos__linea {
  width: 100%;
}

@media (max-width: 1024px) {
  .scala-pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .scala-pasos { grid-template-columns: 1fr; gap: 20px; }
  .scala-pasos__titulo { min-height: 0; }
}

/* ---------- Casos frecuentes ----------
   La tarjeta la pone la plantilla compartida (recursos.css); aqui solo va la
   rejilla. */

.scala-casos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .scala-casos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .scala-casos { grid-template-columns: 1fr; }
}

/* ---------- Preguntas frecuentes ----------
   Mismo aspecto y comportamiento que el acordeon de la pagina de Contacto: una
   sola tarjeta por pregunta (pregunta y respuesta comparten fondo y sombra),
   los iconos del diseno alternandose segun el estado y la respuesta
   desplegandose con animacion. */

.scala-sfaq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scala-sfaq__item {
  border-radius: 16px;
  background: var(--e-global-color-lino_claro_light, #FEFEFD);
  box-shadow: 0 0 9.3px rgba(0, 0, 0, .25);
}

.scala-sfaq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--e-global-typography-text-font-family, Inter), sans-serif;
  font-size: var(--e-global-typography-text-font-size, 14px);
  color: var(--e-global-color-verde_acero_darker, #393830);
}

/* El triangulo nativo del <summary> sobra: el icono lo pone el widget. */
.scala-sfaq__pregunta::-webkit-details-marker { display: none; }
.scala-sfaq__pregunta::marker { content: ""; }

.scala-sfaq__icono {
  flex: 0 0 auto;
  display: inline-flex;
  width: 30px;
  height: 30px;
}

.scala-sfaq__icono img,
.scala-sfaq__icono svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* Los dos iconos estan siempre en el marcado; se alterna cual se ve. */
.scala-sfaq__item .scala-sfaq__icono--abierto,
.scala-sfaq__item[open] .scala-sfaq__icono--cerrado {
  display: none;
}

.scala-sfaq__item[open] .scala-sfaq__icono--abierto {
  display: inline-flex;
}

.scala-sfaq__item[open].esta-cerrando .scala-sfaq__icono--abierto {
  display: none;
}

.scala-sfaq__item[open].esta-cerrando .scala-sfaq__icono--cerrado {
  display: inline-flex;
}

/* La respuesta se despliega en vez de aparecer de golpe. <details> no anima su
   altura, asi que se anima el contenido: la rejilla pasa de 0fr a 1fr. */
.scala-sfaq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 20px;
  font-size: var(--e-global-typography-s-font-size, 12px);
  line-height: 1.6;
  color: var(--e-global-color-verde_acero_dark, #7A7966);
  transition: grid-template-rows .55s cubic-bezier(.4, 0, .2, 1),
              padding .55s cubic-bezier(.4, 0, .2, 1);
}

.scala-sfaq__item[open] .scala-sfaq__respuesta {
  grid-template-rows: 1fr;
  padding-bottom: 18px;
}

/* Cierre animado: servicio.js mantiene la pregunta abierta y le pone esta
   clase mientras dura la transicion inversa, porque <details> quita su
   contenido en cuanto se le saca el atributo "open" y la salida no se veia.
   Va despues de la regla [open] para ganarle por orden: las dos tienen la
   misma especificidad. */
.scala-sfaq__item[open].esta-cerrando .scala-sfaq__respuesta {
  grid-template-rows: 0fr;
  padding-bottom: 0;
}

.scala-sfaq__respuesta p {
  margin: 0;
  overflow: hidden;
}

/* ---------- "Qué incluye" en movil ----------
   Igual que el carrusel del inicio: la tarjeta abierta arranca en el margen
   del contenido y la siguiente se asoma por el borde derecho de la pantalla.

   La diferencia con el inicio —y lo que hacia que aqui se viera descentrada y
   cortada— es que alli la seccion ya llega al borde derecho, y en la ficha el
   bloque tiene margen a los dos lados: el carrusel se estira hacia la derecha
   con un margen negativo para recuperar ese asomo, y pierde el desplazamiento
   de 20px que corria la tarjeta activa hacia la derecha. */

@media (max-width: 767px) {
  .scala-srv.scala-srv--incluye {
    /* Aire arriba y abajo para la sombra; a la derecha, hasta el borde. */
    padding: 20px 0;
    margin: -20px -30px -20px 0;
  }

  /* La flecha derecha vuelve al margen del contenido, no al borde. */
  .scala-srv.scala-srv--incluye .scala-nav {
    padding-right: 30px;
  }

  /* Alto de la maqueta. El widget de la ficha no expone control de alto (el del
     inicio si), asi que el valor vive aqui. */
  .scala-srv.scala-srv--incluye .scala-srv__pista {
    --scala-alto: 480px;
  }
}