/* cambia el tamaño del texto base del sitio web. Eliminar si no se quiere cambiar el tamaño base */

body{
    font-size:16px; 
}

h1, h2, h3, h4 {font-weight:700}

h1{font-size:3rem;} 
h2{font-size:2.3rem;} 
h3{font-size:1.7rem;} 
h4{font-size:1.3rem;} 

/* Cambia los tamaños de los títulos en diferentes resoluciones de pantalla */
/* medium screen */
@media screen and (min-width: 40em) and (max-width: 61.9375em) 
{ 
    h1{font-size:2.5rem;} 
    h2{font-size:2.25rem;} 
    h3{font-size:1.4rem;} 
    h4{font-size:1.25rem;} 
} 

/* small screen */ 
@media screen and (max-width: 39.9375em)
{ 
    h1{font-size:2.2rem;} 
    h2{font-size:1.9rem;} 
    h3{font-size:1.3rem;} 
    h4{font-size:1.2rem;} 
}
/* colores de texto */
.azul-oscuro {color: #01426D !important;}
.azul {color: #0271b9 !important;}
.azul-claro {color: #add8e6 !important;}
.amarillo {color: #FFDA78 !important;}
.naranja {color: #FF7F3E !important;}

/* Estilo para crear párrafos destacados de mayor tamaño */
.lead{
    font-size:125%;
}
.ceja {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-transform: none;
    color: #01426D;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform:uppercase;
}
.perfil-lector{
    font-size:14px;
}
.tiempo-lectura{
    font-size:12px;
}
.outline-text {
    /* 1. TAMAÑO Y GROSOR */
    font-size: 200px;      /* Debe ser grande para que luzca */
    font-weight: 900;      /* IMPORTANTE: Usa la fuente más gruesa posible (Bold/Black) */
    font-family: sans-serif; /* Queda mejor en fuentes sin serifa */
    line-height: 1;        /* Evita espacios extra arriba y abajo */
    
    /* 2. EL TRUCO DEL BORDE */
    color: transparent;    /* Hacemos el relleno invisible */
    
    /* Define el grosor (2px) y el color del borde */
    /* Usé el azul oscuro de tu paleta, pero puedes cambiarlo */
    -webkit-text-stroke: 2px #FF7F3E; 
    
    /* 3. COMPATIBILIDAD */
    /* Aunque funciona en casi todos los navegadores modernos, esto ayuda */
    background-clip: text;
}
@media screen and (min-width: 40em) and (max-width: 61.9375em) 
{ 
    .outline-text {font-size: 150px;}
}
@media screen and (max-width: 39.9375em)
{ 
    .outline-text {font-size: 100px;}
}

/* Cifra animada */
.cifra-animada{
    text-align:center;
}
/* Estilo para quitar los márgenes a algún elemento particular del sitio web */
.no-margin{
    margin:0;
}

.main-content a{
    text-decoration:underline;
}
.texto-destacado {
    font-weight: 700;
    font-size: 48px;
    line-height: 52px;
    color: #FF7F3E;
}
/* Imágenes */
.borde-40 img{
    border-radius: 40px;
}
/* Cajas */
.caja-destacada-cta{
    border-radius: 40px;
    padding: 40px 60px 40px 60px;
}
.caja-redondeada-20{
    border-radius: 20px;
    background-color:#ffffff;
    padding:20px;
}
.caja-redondeada-diferencia{
    border-radius: 20px;
    background-color:#ffffff;
    padding:40px 30px;
    min-height:150px;
}
.caja-redondeada-30{
    border-radius: 30px;
    background-color:#ffffff;
    padding:30px;
}
.caja-redondeada-30-no-color{
    border-radius: 30px;
    padding:30px;
}
.caja-redondeada-40{
    border-radius: 40px;
    background-color:#ffffff;
    padding:40px;
}
.caja-redondeada-40-no-color{
    border-radius: 40px;
    padding:40px;
}
.caja-amarilla{
    border: 5px solid #FFDA78;
    border-radius: 40px;
    /*background-color:#ffffff;*/
    padding:40px;
}
/* Imágenes */
.zoho-customer-logo{
    max-width: 100px;
}

/* Fondos */
/* Clase para el fondo animado */
.fondo-animado {
    /* 1. Definimos el degradado con tus 5 colores exactos */
    background: linear-gradient(
        -45deg, 
        #FFDA78, 
        #FF7F3E, 
        #01426D, 
        #0271b9, 
        #add8e6
    );

    /* 2. Hacemos el fondo mucho más grande que el contenedor para poder moverlo */
    background-size: 400% 400%;

    /* 3. Ejecutamos la animación: nombre, duración, suavizado e infinito */
    animation: moverGradiente 15s ease infinite;
}

/* 4. Definimos los "fotogramas" del movimiento */
@keyframes moverGradiente {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Clase para el texto con fondo animado */
.texto-gradiente {
    /* 1. Configuración de la fuente (Debe ser GRUESA para que luzca) */
    font-size: 60px;       /* Tamaño grande */
    font-weight: 800;      /* Muy negrita */
    line-height: 1.1;      /* Espaciado ajustado */
    display: inline-block; /* Ayuda a que el recorte sea preciso */

    /* 2. El degradado con tus 5 colores */
    background: linear-gradient(
        -45deg, 
        #FFDA78, 
        #FF7F3E, 
        #01426D, 
        #0271b9, 
        #add8e6
    );
    
    /* 3. Tamaño para permitir movimiento */
    background-size: 300% 300%;

    /* 4. LA MAGIA: Recortar el fondo a la forma del texto */
    -webkit-background-clip: text; /* Para Chrome, Safari y Edge */
    background-clip: text;         /* Estándar */

    /* 5. Hacer el texto transparente para ver el fondo a través de él */
    color: transparent;

    /* 6. Animación del fondo */
    animation: moverTexto 8s ease infinite;
}

/* Los fotogramas de la animación */
@keyframes moverTexto {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.texto-imagen-estatico {
    /* 1. TIPOGRAFÍA GRUESA (Fundamental) */
    font-size: 80px;       
    font-weight: 900;      /* Entre más gruesa, mejor se ve la imagen */
    text-transform: uppercase; 
    line-height: 1.1;
    /*display: inline-block;*/

    /* 2. CONFIGURACIÓN DE LA IMAGEN */
    /* Reemplaza con tu URL */
    background-image: url('/images/AdobeStock_1746725237_Preview.jpeg');
    
    /* 'cover' asegura que la imagen cubra todo el texto sin deformarse */
    background-size: cover; 
    
    /* Centramos la imagen para que se vea la mejor parte */
    background-position: center; 
    
    /* Evitamos que se repita como mosaico */
    background-repeat: no-repeat;

    /* 3. EL RECORTE */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 4. TRANSPARENCIA */
    color: transparent;
}

.maquina-escribir {
    display: inline-block;       /* Necesario para ajustar el ancho */
    overflow: hidden;            /* Oculta el texto que aún no "se escribe" */
    white-space: nowrap;         /* Obliga al texto a estar en una sola línea */
    border-right: 3px solid #ff7f3e; /* El cursor (la barrita que parpadea) */
    
    /* Configuración de la fuente */
    /* IMPORTANTE: Funciona perfecto con fuentes monoespaciadas (tipo código).
       Si usas fuentes normales (Arial, Roboto), el cursor podría cortar letras. */
    font-family: 'Courier New', monospace; 
    font-size: 30px;
    font-weight: bold;
    width: 0; /* Empieza oculto */

    /* LA ANIMACIÓN */
    /* steps(30): Aquí debes poner el NÚMERO DE CARACTERES de tu texto aprox. */
    animation: 
        escribiendo 3s steps(30, end) forwards,
        cursor .75s step-end infinite;
}
/* 1. Anima el ancho de 0 a 100% */
@keyframes escribiendo {
    from { width: 0 }
    to { width: 100% }
}

/* 2. El parpadeo del cursor */
@keyframes cursor {
    from, to { border-color: transparent }
    50% { border-color: #ff7f3e; }
}


/* 1. Estilo base del H1 */
.titulo-dinamico {
  /* Ajusta estos valores según tu diseño
  font-family: sans-serif;
  font-weight: 800; 
  color: #333; */
  font-size: 38px !important; 
  line-height: 1.2em !important;   /* Importante mantenerlo bajo */
}
/* medium screen */
@media screen and (min-width: 40em) and (max-width: 61.9375em) 
{ 
	.titulo-dinamico {font-size: 36px !important;}
} 

/* small screen */ 
@media screen and (max-width: 39.9375em)
{ 
	.titulo-dinamico {font-size: 28px !important;}
}

/* 2. El marco pequeño que recorta las palabras */
.marco-carrusel {
  display: inline-block;
  vertical-align: bottom; /* Alinea el texto con la base */
  height: 1.2em;  /* Misma altura que el line-height */
  overflow: hidden; /* Oculta lo que se salga del marco */
  color: #FFDA78;  /* Color amarillo Crecer iQ para destacar la palabra cambiante */
}

/* 3. La lista que se mueve */
.palabras-movimiento {
  display: block;
  /* 12s para que cada una de las 4 palabras tenga su tiempo */
  animation: rotarPalabras 9s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

/* 4. Cada palabra individual */
.palabras-movimiento span {
  display: block;
  height: 1.2em;  /* Debe coincidir con la altura del marco */
  /*padding-left: 10px;  Un poco de aire a la izquierda */
}

/* 5. La Animación (Cálculos en EM para ser responsive) */
@keyframes rotarPalabras {
  /* PARADA 1: Prospectos (0em) */
  0%, 20% {
    transform: translateY(0);
  }
  
  /* PARADA 2: Ganancias (-1.2em) */
  25%, 45% {
    transform: translateY(-1.2em);
  }
  
  /* PARADA 3: Su Negocio (-2.4em) */
  50%, 70% {
    transform: translateY(-2.4em);
  }
  
  /* PARADA 4: Su Impacto (-3.6em) */
  75%, 95% {
    transform: translateY(-3.6em);
  }
  
  /* FINAL: Reset al Clon (-4.8em) */
  100% {
    transform: translateY(-4.8em); /* 4 elementos * 1.2em = 4.8em */
  }
}



.maquina-bucle {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #ff7f3e; /* El cursor */
    
    font-family: 'Courier New', monospace;
    font-size: 30px;
    font-weight: bold;
    width: 0;

    /* LA ANIMACIÓN */
    /* 4s = Duración total del ciclo (escribir + esperar + borrar)
       steps(30) = Ajusta este número a la cantidad de letras de tu texto
    */
    animation: 
        cicloEscribir 4s steps(30) infinite,
        cursor .75s step-end infinite;
}

/* Definimos los tiempos de la animación */
@keyframes cicloEscribir {
    0% {
        width: 0;
    }
    40% {
        /* Termina de escribir al 40% del tiempo */
        width: 100%;
    }
    90% {
        /* Se mantiene visible (pausa de lectura) hasta el 90% */
        width: 100%;
    }
    100% {
        /* Se borra al final para empezar de nuevo */
        width: 0;
    }
}

@keyframes cursor {
    from, to { border-color: transparent }
    50% { border-color: #ff7f3e; }
}

/* Estilos para modificar la apariencia del footer */

.footer{
    font-size:15px;
    background-color: #f8f8f8;
    color: #595959;
}
.footer svg {
    fill: #FF7F3E;
}
.footer .zpdark-section .zpelem-iconheading .zpicon-common svg {
    fill: #FF7F3E !important;
}
.footer a{
    color:#0271b9;
}
.footer li a{
    color:#0271b9;
}
.footer li a:hover{
    text-decoration:underline;
}

/* Estilos para la barra de legales en el pie de página */

.legal{
    background:#0FA251;
    padding:15px 0;
    font-size:12px;
}
.legal a{
    color:#ffffff;
    text-decoration:underline;
}
.legal .zpelement{
    margin:0;
}

/* Estilos para los créditos de Crecer iQ en el pie de página */

.creceriq{
    background:#fff;
    color:#0c813b;
    padding:0;
    text-align:center;
}
.creceriq .zpelement{
    margin:0;
    font-size:12px;
}
.creceriq p{
    margin:15px 0;
    color:#707070;
}
.creceriq a{
    color:#0271b9;
}

.creceriq a:hover{
    color:#FF7F3E;
    text-decoration:underline;
}

/* Botón de Whatsapp */

.whatsapp {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 20;
}

.whatsapp img {
    width: 80px;
    height: 80px;
}