@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular');
}

:root {
    --color-primary: #25D366;
    --color-primary-dark: #1da851;
    --color-primary-light: #4ce45f;
    --color-accent: #3af55d;
    --color-dark: #1d1d1b;
    --color-darker: #212121;
    --color-text: #212121;
    --color-text-muted: #4f4f4f;
    --color-text-light: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-bg-green: #4ce45f;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 50rem;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 12px rgba(76, 228, 95, 0.3);

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

body {
    font-family: 'Roboto', sans-serif;
    font-display: swap;
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* titles ------------------------------------ */

.agile_heading {
  font-size: 3em;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  position: relative;
  display: inline-block;
  margin: 1rem auto;
  letter-spacing: 1.5px;
}

/* terms ------------------------------------ */
.privacy-policy {
    max-width: 800px;
    margin: 3rem auto 4rem auto;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1.5px 6px rgba(58,245,93,0.08);
    padding: 2.5rem 2rem;
}

.policy-section {
    border-left: 5px solid #3AF55D;
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
    background: #f8f9fa;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(58,245,93,0.04);
}

.policy-section h2 {
    font-size: 1.5rem;
    color: #212121;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.policy-section p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .privacy-policy {
        padding: 1.2rem 0.5rem;
    }
    .policy-section {
        padding-left: 0.8rem;
    }
    .policy-section h2 {
        font-size: 1.15rem;
    }
}

/* footer ------------------------------------ */
.footer {
    padding: 4em 0;
    background: #212121;
}
.footer h3 {
    font-size: 2.5em;
    color: #fff;
    letter-spacing: 1.5px;
    padding: .5em 0;
    font-weight: 700;
}
.footer p {
    font-size: 1.5em;
    color: #fff;
    letter-spacing: 1.5px;
    padding: .5em 0;
    font-weight: 400;
}
.footer a {
    font-size: 1.5em;
    color: #fff;
    letter-spacing: 1.5px;
    padding: .5em 0;
    font-weight: 400;
}
.footer a:hover {
    font-size: 1.5em;
    color: var(--color-primary-light);
    letter-spacing: 1.5px;
    padding: .5em 0;
    font-weight: 400;
}
/* barra de redes sociales------------------------------------ */

.barraRedesSociales {
  position: fixed;
  /* Fixed position to stay on the screen */
  left: 0;
  /* Align to the left */
  top: 40%;
  /* Center vertically */
  z-index: 2000;
  /* Ensure it appears above other elements */
  opacity: 0;
  /* Initially hidden */
  transition: opacity 0.5s ease-in-out;
  /* Smooth fade-in and fade-out */
}


.barraRedesSociales ul {
  list-style: none;
  padding: 0;
}

.barraRedesSociales ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  /* Same width for all buttons */
  height: 60px;
  /* Same height */
  border-radius: 0px;
  background-color: var(--color-primary-light);
  /* Your green background */
  margin-bottom: 0px;
  /* Adjust spacing */
}


.barraRedesSociales ul li a i {
  font-size: 40px;
  /* Same font size for all icons */
  color: white;
  /* Ensure all icons have the same color */
}

.barraRedesSociales ul li a {
  background: var(--color-primary-light);
}

.barraRedesSociales ul li a:hover {
  background: #000;
  /* Cambiamos el fondo cuando el usuario pase el mouse */
  padding: 10px 40px;
  /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}

@media (max-width: 600px) {
  .barraRedesSociales ul li a {
    width: 40px;
    /* Same width for all buttons */
    height: 40px;
    /* Same height */


  }

  .barraRedesSociales ul li a i {
    font-size: 30px;
    /* Same font size for all icons */
    color: white;
    /* Ensure all icons have the same color */
  }

  .barraRedesSociales ul li a:hover {
    background: #000;
    /* Cambiamos el fondo cuando el usuario pase el mouse */
    padding: 10px 20px;
    /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
  }
}
.barraRedesSociales.visible {
  opacity: 1;
}


.wrap-text {
    overflow-wrap: break-word;
    /* Ensures that long words break and wrap properly */
    word-wrap: break-word;
    /* For older browsers, fallback */
    word-break: break-word;
    /* In case of very long words */
}

/* Change placeholder text color */
.custom-input::placeholder {
    color: #ffffff;
    /* Change this to your desired color */
    opacity: 0.5;
}

/* Remove borders except bottom and change its color */
.custom-input {
    border: none;
    /* Remove all borders */
    border-bottom: 2px solid rgb(255, 255, 255);
    /* Add a blue bottom border (change color as needed) */
    background-color: transparent;
    /* Ensure background is transparent */
    box-shadow: none;
}

/* Optional: Focus effect for bottom border */
.custom-input:focus {
    outline: none;
    /* Remove default outline */
    border-bottom: 2px solid rgb(255, 255, 255);
    /* Change bottom border color when focused */
    box-shadow: none;
}

.img-cover {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    display: block;
}

.green-shadow {

    /* Green shadow with transparency */
    transition: box-shadow var(--transition-base);
}

.green-shadow:hover {
    transition: box-shadow var(--transition-base);
    box-shadow: var(--shadow-primary) !important;
}

/* ===================================================================
     1) Para Desktop: dejamos modal-lg en su tamaño normal (~800px).
     =================================================================== */
@media (min-width: 768px) {
    .modal-dialog.modal-lg {
        max-width: 800px;
        /* Bootstrap default for modal-lg es ~800px */
    }

    /* En pantallas grandes, permitimos que la imagen tenga altura libre */
    .modal .image-column {
        max-height: none;
        overflow: visible;
    }
}

/* ===================================================================
     2) Para Tablets/Móviles (<768px): reducimos ancho del modal
        y limitamos la altura de la imagen a 200px (ajústalo a tu gusto).
     =================================================================== */
@media (max-width: 767.98px) {
    .modal-dialog.modal-lg {
        max-width: 90% !important;
        margin: 1.75rem auto;
        /* para centrarlo */
    }

    .modal .image-column {
        max-height: 100%;
        /* la "altura recortada" de la imagen */
        overflow: hidden;
    }

    .modal p {
        font-size: 10px;
    }

    .modal h2 {
        font-size: 12px;
    }

}
/* ===================================================================
     3) Hacemos que la imagen siempre cubra su contenedor sin deformarse
     =================================================================== */
.modal .image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.nav-title:hover {
    color: var(--color-primary-light);
    transition: var(--transition-base);

}

.nav-title--active {
    color: var(--color-primary) !important;
    font-weight: 600;
    position: relative;
}

.nav-title--active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
}

.nav-logo:hover {
    transition: transform 2s ease;

}




@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 3) Overlay centrado sobre el banner */
.banner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    width: 90%;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.banner-heading {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .banner-heading {
        font-size: 3rem;
    }

    .banner-subheading {
        font-size: 1.25rem;
    }
}

.banner-subheading {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    color: #f0f0f0;
}

.banner-background {
    position: relative;
    background-image: url('images/whatbot_Banner.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 80vh;
    max-height: 600px;
    /* Adjust based on your layout */
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    padding: 2rem;
    background: rgba(0, 0, 0, 0);
    /* Optional overlay */
    border-radius: 1rem;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: black;
    overflow: hidden;
    border-radius: 20px;
    /* More rounded borders */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Subtle shadow for depth */
    transition: transform 0.3s ease;
}

.video-container:hover {
    transform: scale(1.02);
    /* Slight scale effect on hover */
}

/* Maintain a 16:9 aspect ratio */
.video-container::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.video-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ensure the thumbnail covers the container */
.video-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Play button: white triangle with hover effect */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 0;
    height: 0;
    border-left: 30px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    z-index: 2;
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button-dark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 0;
    height: 0;
    border-left: 30px solid darkslategray;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    z-index: 2;
    transition: transform 0.3s ease;
}

.play-button-dark:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* The iframe is scaled up slightly to crop any black bars */
.video-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    transform: scale(1.03);
    /* Adjust this value as needed */
}

.cardhover {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-md);
}

.cardhover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.modern-image {
    border-radius: 50px;
    /* Increase for rounder edges */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    /* Soft shadow for depth */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.modern-image:hover {
    transform: scale(1.05);
    /* Slight zoom effect on hover */
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.3);
    /* More depth on hover */
}

/* Responsive adjustments */
@media (max-width: 450px) {
    .form-image {
        height: 14rem !important;
        width: 19rem !important;
    }
}

@media (max-width: 450px) {
    .beneficios-image {
        height: 11rem !important;
        width: 18rem !important;
    }
}

.parallax-2 {
    /* The image used */
    background-image: url("images/banner3.jpg");

    /* Set a specific height */
    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.focus-green:focus {
    color: var(--color-primary-light);
}

.whatbot-black {
    color: var(--color-darker);
}
.bgwhatbotblack {
    background-color: var(--color-darker);
}
.grecaptcha-badge {
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  opacity: 0.15 !important;
  transition: opacity 0.3s ease !important;
  transform: scale(0.7);
  transform-origin: bottom left;
}

.grecaptcha-badge:hover {
  opacity: 1 !important;
}
.shadow-efect:hover {
    box-shadow: 0 1px 1rem rgba(0, 0, 0, 0.5) !important;
    transition: box-shadow 0.3s ease-in-out;
}
.card-efect {
    transition: transform 0.3s ease-in-out;
}
.card-efect:hover {
    transform: translateY(-0.5rem);
}

/* Plans */
.plan-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.plan-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.plan-card--featured {
    border: 2px solid var(--color-primary) !important;
    transform: scale(1.03);
    box-shadow: var(--shadow-primary);
    position: relative;
    z-index: 2;
}

.plan-card--featured:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 16px 40px rgba(37, 211, 102, 0.35);
}

.plan-badge-wrapper {
    padding-top: 1rem !important;
    padding-bottom: 0 !important;
}

.plan-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: var(--shadow-primary);
}

.plan-tag {
    background-color: var(--color-primary-light) !important;
    color: var(--color-text-light);
}

.plan-cta {
    background-color: var(--color-dark);
    width: 100%;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.plan-cta:hover {
    background-color: #000;
    transform: translateY(-2px);
}

.plan-cta--featured {
    background-color: var(--color-primary);
}

.plan-cta--featured:hover {
    background-color: var(--color-primary-dark);
}

/* Utility classes */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-dark-custom { background-color: var(--color-dark) !important; }
.bg-darker { background-color: var(--color-darker) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-muted-custom { color: var(--color-text-muted) !important; }

.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-sm-custom { box-shadow: var(--shadow-sm) !important; }
.shadow-md-custom { box-shadow: var(--shadow-md) !important; }
.shadow-lg-custom { box-shadow: var(--shadow-lg) !important; }

/* Floating WhatsApp CTA */
.whatsapp-cta {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 998;
    background-color: var(--color-primary) !important;
    border: none;
    font-size: 28px;
    color: var(--color-text-light);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    animation: pulse-whatsapp 2s infinite;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-cta:hover {
    background-color: var(--color-primary-dark) !important;
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.6);
    animation: none;
}

@keyframes pulse-whatsapp {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7); }
}

.scroll-top-btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 6rem;
    left: 1.5rem;
    z-index: 999;
    background-color: var(--color-dark);
    color: var(--color-text-light);
    border: none;
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.scroll-top-btn:hover {
    background-color: #000;
    transform: translateY(-3px);
    color: var(--color-text-light);
}