/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/
:root {
  /* ==========================================
     TOKENS DE TIPOGRAFÍA
     ========================================== */
  --font-titles: "PT Serif", Times, serif;
  --font-body: "Open Sans", sans-serif;
  --font-handwrite: "mynerve", Times, serif;
  /* TOKENS DE GROSOR (Font Weights) */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* TAMAÑOS FLUIDOS (Sin Media Queries) */
  --font-size-xl: clamp(48px, 2.0rem + 4.5vw, 72px);
  --font-size-subtitle-lg: clamp(36px, 1.4rem + 2vw, 50px);
  --font-size-subtitle-m: clamp(30px, 1.2rem + 1.5vw, 36px);
  --font-size-subtitle-xs: clamp(24px, 1rem + 1vw, 26px);
  --font-size-body: clamp(15px, 0.91rem + 0.15vw, 16px);
  --font-size-text-xs: 12px;

  --line-height-tight: 0.65;   /* Equivale a 65% - Para títulos gigantes con tracking ajustado */
  --line-height-compact: 1.0;  /* Equivale a 100% - Para subtítulos en bloques medianos */
  --line-height-normal: 1.15;  /* Equivale a 110% - Para textos pequeños y etiquetas cortas */
  --line-height-text: 1.30;    /* Equivale a 130% - Para textos de párrafo */

  /* ==========================================
     TOKENS DE COLOR
     ========================================== */
  --color-primary: #376c5b;
  --color-primary-dark: #0d4a38;
  --color-primary-light: #eddecb; 
  --color-secondary: #c0a05d;
  --color-light: white;
  --color-dark: #172d26;
  --color-accent: #d8f5a2;
  --color-accent-light: #f5ffe3;

  /* Colores neutros */
  --color-text-main: #172d26;
  --color-text-muted: #494A60;
  --color-text-light: #eddecb;
  --color-bg-main: #f3ebe1;
  --color-bg-light:#ffffff;
  --color-bg-dark:#376c5b;
} 

body {
  --mfn-column-gap-bottom: 10px;
  font-family: ;
  font-size: ;
  font-weight: ;
  line-height: ;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text-main);
  background-color: var(--color-bg-main);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
.gr-color-primary{
    color:var(--color-primary);
} 
.gr-color-text-main{
    color:var(--color-text-main);
} 
.gr-color-secondary{
    color:var(--color-secondary);
} 
.gr-color-light{
    color:var(--color-light);
} 

.gr-text-light{
    color: var(--color-text-light);
}
.gr-title-xl {
    font-family: ;
        /* Aplicamos el tamaño fluido */
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal); /* Aplicado token 65% */
}
.gr-subtitle-lg {
    font-family: ;
    color: ;
    font-size: var(--font-size-subtitle-lg);
    line-height: var(--line-height-normal); /* Aplicado token 90% */
}
.gr-subtitle-m {
    font-family: var(--font-titles);
    font-size: var(--font-size-subtitle-m);
    font-weight: 300;
    line-height: var(--line-height-normal); /* Aplicado token 90% */
}

.gr-subtitle-xs {
    font-family: var(--font-titles);
    font-size: var(--font-size-subtitle-xs);
   line-height: var(--line-height-normal); /* Aplicado token 110% */
}
.gr-text-xs {
    font-family: var(--font-body);
    font-size: var(--font-size-text-xs);
}
.gr-bloque-parrafo{
    margin: 0 10% 20px 5%;
}
.gr-posicion-datos{
position: relative;
    bottom: 130px;
    padding: 50px 0px;
    z-index: 1;
}
.gr-posicion-datos-next{
   position: relative;
    top: -140px; 
}
.gr-no-margin{
    margin:0px;
}
.highlight-text {
  background-color: var(--color-accent);
  display: inline-block;
  padding: 4px 15px; 
  box-sizing: border-box;
  font-size:var(--font-size-body);
  font-family:var(--font-body);
}
.highlight-text-price {
  color:var(--color-bg-dark);
  font-family: var(--font-titles);
  font-size: var(--font-size-subtitle-xs);
  background-color: var(--color-accent-light); 
  border:solid 2px var(--color-accent);
  Border-radius:10px;
  display: inline-block;
  padding: 10px 15px; 
  box-sizing: border-box;
  position:absolute;
top:-45px;
left:15px;

}
/*.highlight-tour-pills {
  color:var(--color-bg-dark);
  background-color: var(--color-accent-light); 
  border:solid 2px var(--color-accent);
  Border-radius:10px;
  display: inline-block;
  padding: 10px 15px; 
  box-sizing: border-box;
  position:absolute;
}*/

/* ==========================================
   CLASE ANIMACIÓN 
   ========================================== */
.cs-wrapper-animation,
.cs-inline-text-wrapper {
    opacity: 0;
    transform: translateY(30px);
    /* Al salir de pantalla, queremos que vuelva a ocultarse un poco más rápido (0.4s) y sin retrasos */
    transition: transform 0.4s ease-in, opacity 0.5s ease-in;
    will-change: transform, opacity;
}

/* ==========================================================
   ESTADO ACTIVO / ANIMACIÓN DE ENTRADA (Cuando aparece)
   ========================================================== */
.cs-wrapper-animation.in-view,
.cs-inline-text-wrapper.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
    /* Al entrar, queremos la animación premium: 1 segundo y curva fluida */
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease-out !important;
}

/* ----------------------------------------------------------
   MODIFICADORES DE RETRASO (Solo actúan al aparecer)
   ---------------------------------------------------------- */
.cs-wrapper-animation.in-view.delay-200, 
.cs-inline-text-wrapper.in-view.delay-200 { transition-delay: 0.2s !important; }

.cs-wrapper-animation.in-view.delay-500, 
.cs-inline-text-wrapper.in-view.delay-500 { transition-delay: 0.5s !important; }

.cs-wrapper-animation.in-view.delay-800, 
.cs-inline-text-wrapper.in-view.delay-800 { transition-delay: 0.8s !important; }

/* Clases de retraso en TIEMPO REAL (Segundos) */
.delay-first { transition-delay: 3s; }
.delay-second { transition-delay: 3s; }

/*============================================
FADEIN LEFT
============================================*/
/* 1. Definimos los fotogramas (keyframes) de tu animación personalizada */
@keyframes csFadeInLeft {
    0% {
        opacity: 0;
        /* Empieza un poco desplazado a la izquierda para el efecto de empuje */
        transform: translate3d(-150px, 0, 0); 
        margin-left: 0;
    }
    100% {
        opacity: 1;
        /* Llega a su eje X real */
        transform: translate3d(0, 0, 0);
        /* Se clava con el offset del 15% invadiendo el bloque derecho */
        margin-left: -10%;
    }
}

/* 2. Ajustes */
.cs-animation-fadeinleft {
    position: relative;
    z-index: 10; /* Se asegura de flotar por encima del DIV de la derecha */
    
       animation: csFadeInLeft 1.3s ease-out;
    
    /* OBLIGATORIO: Mantiene los estilos del fotograma final (100%) 
       para que el bloque no vuelva bruscamente al 0% al terminar */
    animation-fill-mode: forwards; 
}
/*---------------
MODIFICADAS
----------------*/
.blog_slider.flat .blog_slider_ul .blog_slider_li .item_wrapper .date_label {
    color: var(--color-text-main);
}
.column_column ul li, .column_post_content ul li, .column_helper ul li, .column_visual ul li, .icon_box ul li, .mfn-acc ul li, .ui-tabs-panel ul li, .post-excerpt ul li, .the_content_wrapper ul li, .column_product_short_description ul li, .column_product_content .source-editor ul li, .elementor-widget-text-editor ul li, .mfn-toggle .toggle-content ul li, .column_column ol li, .column_post_content ol li, .column_helper ol li, .column_visual ol li, .icon_box ol li, .mfn-acc ol li, .ui-tabs-panel ol li, .post-excerpt ol li, .the_content_wrapper ol li, .column_product_short_description ol li, .elementor-widget-text-editor ol li, .mfn-toggle .toggle-content ol li {
    margin-bottom: 0px;
}


.column.one.single-photo-wrapper.video.embed {
    margin-bottom: 36px;
}
h1.title, .subheader-both-center #Subheader .title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
}

.mfn-footer-menu-style-vertical li a {
    padding: 5px 0;
}
h1, .h1{
    overflow-wrap: break-word; 
  hyphens: auto;
}
/* Aplica la regla a cualquier enlace dentro de las etiquetas H1 a H6 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none!important; /* Quita el subrayado nativo */
  color: inherit;         /* Mantiene el color original del título */
  
  /* Creamos el "subrayado" usando un fondo con gradiente */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%; /* Posiciona la línea abajo a la izquierda */
  background-repeat: no-repeat;
  
  /* Tamaño inicial: 0% de ancho, 2px de grosor */
  background-size: 0% 2px;
  
  /* Transición suave para el ancho del fondo */
  transition: background-size 0.3s ease-in-out;
}

/* Estado :hover */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  /* Al pasar el cursor, se expande al 100% de izquierda a derecha */
  background-size: 100% 2px;
}

.grecaptcha-badge {
    visibility: hidden;
}