/**
 * Hero de "Sobre SCALA" en movil.
 *
 * El margen y el radio de los paneles se corrigen aqui Y en los controles
 * responsive del contenedor (71-sobre-hero-paneles-movil.php). Duplicado a
 * proposito: los ajustes del documento se pierden cuando el editor guarda con
 * una copia vieja de la pagina, y esta hoja no la toca ningun guardado.
 *
 * En escritorio la composicion es la foto con dos paneles encajados en sus
 * esquinas. En movil el diseno es otro: la foto arriba, y debajo un unico
 * bloque claro con antetitulo, titulo, parrafo y los dos botones apilados.
 *
 * Se resuelve reordenando, no reconstruyendo: las dos filas pasan a
 * display:contents para que titular, bajada y botones queden como hijos
 * directos del bloque y se puedan ordenar con order. La foto es el fondo del
 * bloque, asi que el hueco que ocupa arriba es un ::before con aspect-ratio.
 *
 * Especificidad: Elementor escribe el padding de cada contenedor como
 *   .elementor-276 .elementor-element.elementor-element-XXX  -> (0,3,0)
 * por eso las reglas que lo pisan llevan .elementor-element ademas del prefijo
 * body: (0,3,1). Sin eso el padding de Elementor gana y el texto queda pegado
 * al borde.
 *
 * El overflow:hidden vive SOLO en este media query: en escritorio recorta la
 * esquina cuadrada de los paneles contra el radio de la foto y deja un arco
 * (ver 57-contacto-esquina-sin-radio.php). En movil no hay muescas, asi que
 * ahi si sirve para que los paneles respeten el radio inferior del bloque.
 */

@media (max-width: 767px) {

  body .scala-sobre {
    overflow: hidden;
    background-position: center top;
  }

  /* Las filas dejan de ser caja: sus hijos suben un nivel y se ordenan. */
  body .scala-sobre > .e-con {
    display: contents;
  }

  /* Hueco de la foto. 4/3 es la proporcion del diseno.
     El position:static es obligatorio: Elementor usa .e-con::before para su
     background-overlay y lo deja absolute, asi que sin esto el pseudo no
     ocupa espacio y los paneles quedan encima de la foto. */
  body .scala-sobre::before {
    content: "";
    display: block;
    position: static;
    width: 100%;
    aspect-ratio: 4 / 3;
    order: 0;
    /* La foto es el fondo del bloque y el bloque mide mas que este hueco: con
       cover solo asomaria su franja superior. Heredando la imagen, el pseudo
       la recorta contra su propia caja y se ve completa. */
    background-image: inherit;
    background-size: cover;
    background-position: center;
  }

  /* El logo blanco sobre la foto no va en movil; se oculta la zona completa
     para que no deje su padding como hueco. */
  body .scala-sobre .e-con:has(> .scala-sobre__logo) {
    display: none;
  }

  body .scala-sobre .elementor-element.scala-sobre__titular {
    /* Los -3px de margen y el radio interior encajan los paneles en las
       esquinas de la foto en escritorio; en movil, con ancho 100%, dejan 3px
       de foto asomando al costado y dibujan la linea entre ambos paneles. */
    --margin-top: 0;
    --margin-right: 0;
    --margin-bottom: 0;
    --margin-left: 0;
    border-radius: 0;
    order: 1;
    padding: 24px 20px 12px;
  }

  body .scala-sobre .elementor-element.scala-sobre__bajada {
    /* Los -3px de margen y el radio interior encajan los paneles en las
       esquinas de la foto en escritorio; en movil, con ancho 100%, dejan 3px
       de foto asomando al costado y dibujan la linea entre ambos paneles. */
    --margin-top: 0;
    --margin-right: 0;
    --margin-bottom: 0;
    --margin-left: 0;
    border-radius: 0;
    order: 2;
    padding: 0 20px 20px;
  }

  /* La zona de botones no tiene clase propia: se identifica por su contenido. */
  body .scala-sobre .elementor-element.e-con:has(> .elementor-widget-button) {
    order: 3;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 20px 24px;
    /* Tapa la foto que queda detras: en el diseno los botones van sobre el
       panel claro, no sobre la imagen. */
    background-color: var(--e-global-color-lino_claro_light_active, #FDFCFA);
  }
}

/* ---------- empalmes curvos entre los paneles y la foto ----------
   Cada panel del hero esta pegado a una esquina del bloque de la foto. Donde
   su borde se despega del borde del bloque, el diseno no corta en angulo: la
   foto se curva hacia dentro del panel. Es una curva INVERSA (concava), que no
   se puede hacer con border-radius, y es lo que resuelven los rectangle-*.svg
   del Figma.

   Los dos empalmes de cada panel se dibujan con UN solo pseudo-elemento
   (::after) que se extiende 40px por los dos lados que dan a la foto, pintado
   del color del panel y recortado por dos mascaras de 40x40: cada una deja
   pasar todo menos un cuarto de circulo, que es la curva.

   Va todo en ::after y ninguno en ::before a proposito: Elementor usa
   .e-con::before para su background-overlay y ahi el empalme no se pintaba.

   Las clases son por geometria y no por pagina: scala-empalme--sup-izq para
   el panel pegado arriba a la izquierda y scala-empalme--inf-der para el de
   abajo a la derecha. Las usan los heros de Inicio, Sobre SCALA e Insights.

   Tambien entran por clase los paneles de los bloques de contacto del final
   de las paginas (scala-contacto__panel y scala-conversemos__panel): asi una
   copia del bloque pegada en otra pagina trae los empalmes puestos. Ojo: el
   panel del formulario de la pagina de Contacto usa
   scala-contacto__formulario justo para no caer aqui.

   Junto a cada clase van los ids de esos tres paneles. Es un respaldo: cuando
   el editor guarda con una copia vieja de la pagina se pierden las clases que
   agrega el script, pero el id del contenedor no cambia. Si se duplica o
   reconstruye un hero, hay que actualizar el id.

   El color sale de --scala-empalme; si cambias el fondo del panel en
   Elementor, ajusta esa variable. */

.scala-empalme--sup-izq,
.scala-contacto__panel,
.scala-conversemos__panel,
.scala-experiencia__titular,
.elementor-element-4fe14b8,
.elementor-element-7ff02c0,
.elementor-element-60066f8,
.scala-empalme--inf-der,
.scala-experiencia__listado,
.elementor-element-60c4bb8,
.elementor-element-8e7a295,
.elementor-element-10937e6 {
  --scala-empalme: var(--e-global-color-lino_claro_light_active, #FDFCFA);
  --scala-empalme-radio: 40px;
  /* Paradas en px y no en %: con porcentajes el radio se mide contra la
     diagonal de la caja y la parte opaca queda en un filo de un pixel.

     La parte opaca arranca MEDIO PIXEL ANTES del radio (39.4 en vez de 40) a
     proposito: en el borde de la mascara el color del empalme se mezcla con lo
     que hay debajo —el bloque con su foto y su esquina redondeada— y por ese
     filo asomaba un arco gris de 1px a lo largo de toda la curva. Tapando algo
     mas, el arco desaparece; la muesca queda medio pixel mas chica, que no se
     nota. Es la misma leccion de las muescas del hero del inicio: la pieza que
     tapa tiene que sobresalir, nunca calzar justo. */
  --scala-empalme-mascara-der: radial-gradient(circle at 100% 100%, transparent 0 39.4px, #000 39.9px);
  --scala-empalme-mascara-izq: radial-gradient(circle at 0 0, transparent 0 39.4px, #000 39.9px);
  position: relative;
}

body .elementor-element.scala-empalme--sup-izq::after,
body .elementor-element.scala-contacto__panel::after,
body .elementor-element.scala-conversemos__panel::after,
body .elementor-element.scala-experiencia__titular::after,
body .elementor-element.elementor-element-4fe14b8::after,
body .elementor-element.elementor-element-7ff02c0::after,
body .elementor-element.elementor-element-60066f8::after,
body .elementor-element.scala-empalme--inf-der::after,
body .elementor-element.scala-experiencia__listado::after,
body .elementor-element.elementor-element-60c4bb8::after,
body .elementor-element.elementor-element-8e7a295::after,
body .elementor-element.elementor-element-10937e6::after {
  content: "";
  position: absolute;
  background-color: var(--scala-empalme);
  pointer-events: none;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 40px 40px, 40px 40px;
  mask-size: 40px 40px, 40px 40px;
  -webkit-mask-position: right top, left bottom;
  mask-position: right top, left bottom;
}

/* Pegado arriba y a la izquierda: los empalmes van a su derecha (sobre el
   borde superior) y debajo (sobre el borde izquierdo). */
body .elementor-element.scala-empalme--sup-izq::after,
body .elementor-element.scala-contacto__panel::after,
body .elementor-element.scala-conversemos__panel::after,
body .elementor-element.scala-experiencia__titular::after,
body .elementor-element.elementor-element-4fe14b8::after,
body .elementor-element.elementor-element-7ff02c0::after,
body .elementor-element.elementor-element-60066f8::after {
  inset: 0 calc(0px - var(--scala-empalme-radio)) calc(0px - var(--scala-empalme-radio)) 0;
  -webkit-mask-image: var(--scala-empalme-mascara-der), var(--scala-empalme-mascara-der);
  mask-image: var(--scala-empalme-mascara-der), var(--scala-empalme-mascara-der);
}

/* Pegado abajo y a la derecha: los empalmes van arriba (sobre el borde
   derecho) y a su izquierda (sobre el borde inferior). */
body .elementor-element.scala-empalme--inf-der::after,
body .elementor-element.scala-experiencia__listado::after,
body .elementor-element.elementor-element-60c4bb8::after,
body .elementor-element.elementor-element-8e7a295::after,
body .elementor-element.elementor-element-10937e6::after {
  inset: calc(0px - var(--scala-empalme-radio)) 0 0 calc(0px - var(--scala-empalme-radio));
  -webkit-mask-image: var(--scala-empalme-mascara-izq), var(--scala-empalme-mascara-izq);
  mask-image: var(--scala-empalme-mascara-izq), var(--scala-empalme-mascara-izq);
}

/* ---------- el filo de la esquina ----------
   El panel claro y el bloque que hay detras comparten la MISMA esquina con el
   MISMO radio (40px). Con las dos curvas superpuestas, el borde antialiaseado
   del bloque asomaba por fuera del panel y se leia como un arco gris de 1px
   siguiendo la curva, tanto arriba a la izquierda como abajo a la derecha. Es
   el mismo defecto que tuvo el hero del inicio (ver 16-hero-esquinas.php).

   La cura es la de siempre: que el panel SOBRESALGA. Aqui se hace con un halo
   del mismo color, no con margenes negativos, por dos razones: el halo sigue el
   border-radius (asi que tapa la curva, no solo los lados) y no toca el layout
   —un margen negativo a la derecha no mueve el borde cuando el ancho esta en
   %, que es justo el caso del panel de la bajada, y ese lado se quedaba sin
   arreglar—.

   3px y no 1: el antialiasing de una curva de 40px abarca mas de un pixel.
   Medido en la ficha de servicio: el arco desaparece por completo. */

body .elementor-element.scala-empalme--sup-izq,
body .elementor-element.scala-empalme--inf-der,
body .elementor-element.scala-sobre__titular,
body .elementor-element.scala-sobre__bajada,
body .elementor-element.scala-contacto__panel,
body .elementor-element.scala-conversemos__panel,
body .elementor-element.scala-experiencia__titular,
body .elementor-element.scala-experiencia__listado,
body .elementor-element.elementor-element-4fe14b8,
body .elementor-element.elementor-element-7ff02c0,
body .elementor-element.elementor-element-60066f8,
body .elementor-element.elementor-element-60c4bb8,
body .elementor-element.elementor-element-8e7a295,
body .elementor-element.elementor-element-10937e6 {
  box-shadow: 0 0 0 3px var(--scala-empalme);
}

/* En movil los paneles ocupan todo el ancho y no hay empalmes que dibujar. */
@media (max-width: 767px) {
  /* Sin muescas no hay filo que tapar. */
  body .elementor-element.scala-empalme--sup-izq,
  body .elementor-element.scala-sobre__titular,
  body .elementor-element.scala-contacto__panel,
  body .elementor-element.scala-conversemos__panel,
  body .elementor-element.scala-experiencia__titular,
  body .elementor-element.scala-empalme--inf-der,
  body .elementor-element.scala-sobre__bajada,
  body .elementor-element.scala-experiencia__listado {
    box-shadow: none;
  }

  body .elementor-element.scala-empalme--sup-izq::after,
  body .elementor-element.scala-contacto__panel::after,
  body .elementor-element.scala-conversemos__panel::after,
  body .elementor-element.scala-experiencia__titular::after,
  body .elementor-element.elementor-element-4fe14b8::after,
  body .elementor-element.elementor-element-7ff02c0::after,
  body .elementor-element.elementor-element-60066f8::after,
  body .elementor-element.scala-empalme--inf-der::after,
  body .elementor-element.scala-experiencia__listado::after,
  body .elementor-element.elementor-element-60c4bb8::after,
  body .elementor-element.elementor-element-8e7a295::after,
  body .elementor-element.elementor-element-10937e6::after {
    content: none;
  }
}

/* Los paneles de los bloques de contacto miden lo que su contenido y no lo
   alto del bloque de la foto: un hijo flex se estira por defecto y el aire
   sobrante se repartia entre el texto y los botones.
   Duplicado a proposito con el ajuste del documento (85-conversemos-altura-panel.php):
   esta hoja no la toca ningun guardado de Elementor. */
body .elementor-element.scala-contacto__panel,
body .elementor-element.scala-conversemos__panel {
  align-self: flex-start;
}

/* Radios y margen de los paneles, por id, por lo mismo: dos esquinas visibles
   (la del bloque y la que entra en la foto) y las otras dos a 0; margen 0 para
   que la curva nazca en el borde de la foto. */
body .elementor-element.elementor-element-4fe14b8,
body .elementor-element.elementor-element-7ff02c0,
body .elementor-element.elementor-element-60066f8,
body .elementor-element.elementor-element-60c4bb8,
body .elementor-element.elementor-element-8e7a295,
body .elementor-element.elementor-element-10937e6 {
  border-radius: 40px 0 40px 0;
  --margin-top: 0;
  --margin-right: 0;
  --margin-bottom: 0;
  --margin-left: 0;
}

@media (max-width: 767px) {
  body .elementor-element.elementor-element-4fe14b8,
  body .elementor-element.elementor-element-7ff02c0,
  body .elementor-element.elementor-element-60066f8,
  body .elementor-element.elementor-element-60c4bb8,
  body .elementor-element.elementor-element-8e7a295,
  body .elementor-element.elementor-element-10937e6 {
    border-radius: 0;
  }
}

/* El panel blanco y el bloque de la foto comparten la esquina superior
   izquierda y los dos la redondean con el mismo radio: el antialias de las dos
   curvas no coincide y deja pasar un hilo de la foto. Se tapa con una sombra
   solida de 1px hacia arriba y a la izquierda (fuera del bloque, sobre el fondo
   de la pagina, que es del mismo color). Nada de sombra a la derecha ni abajo:
   ahi el panel limita con la foto y se veria. */
body .elementor-element.scala-conversemos__panel,
body .elementor-element.scala-contacto__panel,
body .elementor-element.elementor-element-676a18e {
  box-shadow: -1px -1px 0 0 var(--e-global-color-lino_claro_light, #FEFEFD);
}


/* =========================================================================
   COMPOSICION MOVIL DE LOS BLOQUES CON FOTO
   =========================================================================
   En escritorio estos bloques son UNA caja: la foto va de fondo y encima se
   apoyan paneles de color que forman las muescas. En movil el diseño los
   separa —texto por un lado y la foto como pieza propia, con el mismo radio en
   las cuatro esquinas— y los paneles desaparecen: su fondo es el mismo de la
   pagina, asi que lo unico que se veia de ellos eran sus bordes y las curvas
   de empalme, leidos como lineas sueltas entre los textos.

   Cubre los cinco bloques que repiten el patron, para que las paginas se vean
   iguales:

     .scala-sobre         hero de Sobre SCALA y hero de la ficha de servicio
     .scala-experiencia   "Experiencia y trayectoria"
     .scala-conversemos   la seccion final de todas las paginas

   Donde cae la foto lo decide el pseudo-elemento elegido: el del bloque la
   pone primero (heros), el de una fila interior la deja entre medio.

   La url llega en --scala-foto (includes/conversemos.php lee el fondo del
   documento) o, cuando la foto viene de un campo del CPT, en
   --scala-srv-hero-foto / --scala-srv-cta-foto (widgets-servicio.php). */

@media (max-width: 767px) {
  /* ---------- 1. el bloque deja de ser la caja ---------- */
  /* Clase repetida tres veces: el documento escribe el fondo del contenedor
     con .elementor-XX .elementor-element.elementor-element-YY:not(
     .elementor-motion-effects-element-type-background), y ese :not cuenta como
     una clase mas — son cuatro. */
  body .elementor-element.scala-sobre.scala-sobre.scala-sobre,
  body .elementor-element.scala-experiencia.scala-experiencia.scala-experiencia,
  body .elementor-element.scala-conversemos.scala-conversemos.scala-conversemos,
  body .elementor-element.scala-srv-cta.scala-srv-cta.scala-srv-cta {
    background-image: none;
    background-color: transparent;
    border-radius: 0;
    min-height: 0;
  }

  /* El velo del bloque: en escritorio es un overlay oscuro que hace legible el
     texto sobre la foto. Sin la foto detras queda como un rectangulo gris.
     Elementor lo pinta en el ::before del contenedor. */
  body .elementor-element.scala-experiencia > .elementor-background-overlay,
  body .elementor-element.scala-conversemos > .elementor-background-overlay,
  body .elementor-element.scala-experiencia::before,
  body .elementor-element.scala-conversemos::before {
    content: none;
    background: none;
    opacity: 0;
  }

  /* ---------- 2. los paneles se vuelven invisibles ---------- */
  body .scala-sobre .elementor-element.elementor-element.elementor-element,
  body .scala-experiencia .elementor-element.elementor-element.elementor-element,
  body .scala-conversemos .elementor-element.elementor-element.elementor-element {
    background-color: transparent;
  }

  body .scala-sobre .scala-empalme--sup-izq::after,
  body .scala-sobre .scala-empalme--inf-der::after,
  body .scala-experiencia .scala-empalme--sup-izq::after,
  body .scala-experiencia .scala-empalme--inf-der::after,
  body .scala-conversemos .scala-empalme--sup-izq::after,
  body .scala-conversemos .scala-empalme--inf-der::after {
    content: none;
  }

  /* Sin fondo propio, el relleno de los paneles solo desalinea el texto. */
  body .scala-sobre .scala-sobre__titular,
  body .scala-sobre .scala-sobre__bajada,
  body .scala-experiencia .scala-experiencia__titular,
  body .scala-experiencia .scala-experiencia__listado {
    --padding-left: 0px;
    --padding-right: 0px;
  }

  /* ---------- 3. la foto, como pieza propia ---------- */
  body .elementor-element.scala-sobre.scala-sobre.scala-sobre::before,
  body .elementor-element.scala-experiencia > .e-con:last-child::before,
  body .scala-conversemos__panel > .e-con:last-child::before,
  body .elementor-element.scala-conversemos__botones::before {
    content: "";
    display: block;
    /* En un contenedor de Elementor el ::before esta reservado al overlay de
       fondo y viene en position:absolute: sin devolverlo al flujo, la foto se
       pinta detras del contenido en vez de empujarlo hacia abajo. */
    position: static;
    width: 100%;
    height: 280px;
    border-radius: 24px;
    background-image: var(--scala-pieza-foto);
    background-size: cover;
    background-position: center;
    background-color: var(--e-global-color-verde_acero_light_active, #E2E2DA);
  }

  /* De donde sale la foto de cada bloque. */
  body .elementor-element.scala-sobre {
    --scala-pieza-foto: var(--scala-srv-hero-foto, var(--scala-foto));
  }

  body .elementor-element.scala-experiencia {
    --scala-pieza-foto: var(--scala-foto);
  }

  body .elementor-element.scala-conversemos,
  body .elementor-element.scala-srv-cta {
    --scala-pieza-foto: var(--scala-srv-cta-foto, var(--scala-foto));
  }

  /* El aire bajo la foto: en los heros la separa del antetitulo; en los otros
     dos bloques, del texto que sigue. */
  body .elementor-element.scala-sobre.scala-sobre.scala-sobre::before {
    margin-bottom: 20px;
  }

  body .elementor-element.scala-experiencia > .e-con:last-child::before,
  body .scala-conversemos__panel > .e-con:last-child::before,
  body .elementor-element.scala-conversemos__botones::before {
    margin-bottom: 24px;
  }

  /* ---------- 4. los botones de "Conversemos" ---------- */
  body .scala-conversemos__panel > .e-con:last-child {
    flex-direction: column;
    align-items: stretch;
  }

  body .scala-conversemos__panel > .e-con:last-child > .elementor-widget-button {
    width: 100%;
  }

  body .scala-conversemos__panel .elementor-widget-button .elementor-button {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 18px 24px;
  }

  /* ---------- 5. textos de "Experiencia" ----------
     Quedaban en 12px (el rol `s`, de pies y etiquetas) y el diseño los muestra
     en el cuerpo del sitio. */
  body .scala-experiencia .scala-experiencia__titular .elementor-widget-text-editor,
  body .scala-experiencia .scala-experiencia__encabezado,
  body .scala-experiencia .scala-experiencia__items,
  body .scala-experiencia .scala-experiencia__items li {
    font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), serif;
    font-size: 16px;
    line-height: 1.45;
  }

  body .scala-experiencia .scala-experiencia__encabezado {
    font-weight: 700;
    margin-bottom: 8px;
  }

  body .scala-experiencia .scala-experiencia__items ul {
    padding-left: 22px;
    margin: 0;
  }

  body .scala-experiencia .scala-experiencia__items li {
    margin-bottom: 4px;
  }
}