/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
* {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Safari iOS - touch active state para loop cards */
.loop-services.cr-touch-active::before {
  background-image: linear-gradient(180deg, #4D00008F 0%, #3B0101 100%) !important;
  opacity: 1 !important;
}

.loop-services:not(.cr-touch-active)::before {
  background-image: linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) !important;
}

.effects-container .elementor-motion-effects-container {
    border-radius: 20px;
}

/* Opción 1 — webkit-mask-image (el más efectivo en Safari) */
@supports (-webkit-touch-callout: none) {
  .effects-container .elementor-motion-effects-container {
    border-radius: 20px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
  }
}

elementor-motion-effects-layer {

  -webkit-transform: translateX(var(--translateX));

  transform: translateX(var(--translateX));

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -webkit-perspective: 1000;

  perspective: 1000;

  will-change: transform;

}

.elementor-motion-effects-container {

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

}

.elementor-motion-effects-layer {

  -webkit-transform: translateX(var(--translateX)) translateZ(0);

  transform: translateX(var(--translateX)) translateZ(0);

  will-change: transform;

}

/* Solo Safari */

@supports (-webkit-touch-callout: none) {

  .elementor-motion-effects-layer {

    transform: none !important;

    width: 100% !important;

  }

}