/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
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: 1.0.1
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
*/

/* Efecto desenfoque caja numeros */

.blured-background {
  background: rgba(34, 34, 34, 0.4);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Estilo textos timeline */

.bloque-contenido hr {
  border: none;
  border-top: 1px solid #FAB72F;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.bloque-contenido b {
  color: #222222;
  display: inline-block;
  margin-bottom: 20px;
}

/* Alineacion flechas y cards timeline */

/* 1. Limita el ancho del contenedor visible, sin romper el scroll */
.bloque-contenido .jet-hor-timeline-inner {
  width: 97%;
  margin: 0 auto;
  overflow: hidden; /* Esto sí se puede aplicar aquí */
}

/* 2. Alineación de las tarjetas */
.bloque-contenido .jet-hor-timeline-list--top {
  align-items: flex-start !important;
  display: flex !important;
}

/* 3. Cards alineadas arriba */
.bloque-contenido .jet-hor-timeline-item__card {
  top: 0 !important;
  transform: none !important;
}

/* 4. Flechas de navegación arriba */
.bloque-contenido .jet-arrow {
  top: 9vh !important;
  transform: none !important;
}

/* Capa blured caja sectores */

.capa-blured {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end; /* o center, según diseño */
  justify-content: flex-start;
  padding: 20px;
  color: white;
  z-index: 1;
}

.capa-blured::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
  z-index: 0;
}

/* Hover: quitar el blur */
.capa-blured:hover::before {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* El texto queda por encima del blur */
.capa-blured > * {
  position: relative;
  z-index: 1;
}