:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #9da3a5;
    --secundario: #2d78da;
    --gris: #757575;
    --grisClaro: #DFE9F3;
}
/*  Globales **/

html 
{
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model **/
    scroll-snap-type: y mandatory;
}
/** Scroll Snap**/

.encabezado 
{
    display: flex;
    flex-direction: column; /* Asegura que el título y la navegación estén en columnas */
    align-items: center; /* Centra todo horizontalmente */
    background-color: white; /* Fondo blanco para el header */
    padding: 1rem 0 0; /* Espaciado interno */
}

/* Logo como fondo del encabezado */
.titulo 
{
    font-size: 3.8rem;
    display: flex;
    align-items: center; /* Alinea texto y posibles íconos verticalmente */
    gap: 1rem; /* Espaciado entre elementos del título */
    margin: 1rem;
}

/* Inserta el logo como fondo desde CSS */
.titulo::before 
{
    content: ''; /* Elemento vacío para la imagen */
    display: inline-block;
    width: 120px; /* Ajusta el ancho del logo */
    height: 120px; /* Ajusta el alto del logo */
    background-image: url('/img/logo_V1.svg'); /* Ruta del logo en formato SVG */
    background-size: contain; /* Asegura que la imagen se ajuste */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center;
}

.ventaja,
.navegacion-principal,
.formulario
{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-size: 16px; /* 1rem = 10px */
    font-family: 'Krub', sans-serif;
    background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco) 100% );
}

.contenedor 
{
    max-width: 130rem;
    margin: 0 auto;
}

/*DEPURAR AL FINAL*/
.boton 
{   
    text-decoration: none;
    color: var(--blanco);
    font-weight: bold;
    border-radius: .5rem;
    padding: 1rem 3rem;
    border: none;
    background-color: var(--secundario);
    transition: all 0.3s ease; /* Transición suave */
    cursor: pointer; /* Cambia el cursor para indicar que es interactivo */
        
    margin-top: 3rem;
    font-size: 2rem;
    text-transform: uppercase;    
    width: 90%;
    text-align: center;    
}

.boton:active
{
    background-color: var(--blanco); /* Cambia el color de fondo */
    color: #1b9d3e; /* Cambia el color del texto */
    transform: scale(0.95); /* Efecto de presión */
}

@media (min-width: 768px) 
{
    .boton 
    {
        width: auto;
    }
}
.boton:hover {
    cursor: pointer;
}

.sombra 
{
    box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.48);
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* Tipografia */
h1 {
    font-size: 3.8rem;
}
h2 {
    font-size: 3.2rem;
}
h3 {
    font-size: 3rem;
}
h1,h2,h3 {
    text-align: center;
}


/* Titulos */
.titulo span {
    font-size: 2rem;
}

/** Utilidades **/
.w-sm-100 {
    width: 100%;
}
@media (min-width: 768px) {
    .w-sm-100 {
        width: auto;
    }
}

.flex 
{
    display: flex;
}

.alinear-derecha 
{
    justify-content: flex-end;
}

/* Navegacion Principal */
.nav-bg 
{
    width: 100%; /* La barra de navegación ocupa todo el ancho */
    background-color: var(--secundario);
}

.navegacion-principal
{
    display: flex;
    flex-wrap: wrap; /* Permite ajustar en pantallas pequeñas */
    justify-content: space-around; /* Distribuye espacios equitativamente */
    align-items: center; /* Alinea verticalmente */
    max-width: 130rem; /* Ancho máximo de la barra */
    margin: 0 auto; /* Centrado horizontal */
    padding: 0.5rem 1rem; /* Espaciado interno */
}

@media (min-width: 768px) 
{
    .navegacion-principal,
    .language-selector 
    {
        flex-direction: row;
        justify-content: space-between;
    }
}

.navegacion-principal a
{
    text-align: center;
    color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    padding: 1rem;
    margin: 0; /* Elimina márgenes externos */
    transition: color 0.3s;
}

.language-selector label,
.language-selector select
{
    display: block;
    text-align: center;
    color: var(--blanco);
    font-size: 1.75rem;    
}

.navegacion-principal a:hover
{
    /*background-color: var(--primario);*/
    color: var(--primario);
}

.language-selector select:hover 
{
    color: var(--primario); /* Cambio de color al pasar el mouse */
}

/* Alineación vertical para el selector */
.language-selector 
{
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espaciado entre elementos */
}

.language-selector label 
{
    color: white; /* Color del texto */
    font-size: 1.75rem;
}

.language-selector select 
{
    appearance: none; /* Elimina el estilo por defecto del navegador */
    background-color: var(--secundario); /* Fondo transparente */
    color: white; /* Color del texto */
    border: 1px solid white; /* Opcional: Borde */
    border-radius: 4px; /* Opcional: Bordes redondeados */
    padding: 0.3rem 1rem; /* Espaciado interno */
}

/* Personalizar las opciones del select */
.language-selector select option {
    background-color: var(--secundario); 
    color: white; /* Color del texto */
    font-size: 1.5rem;
    padding: 0.5rem; /* Espaciado dentro de las opciones */
}

/* Icono pequeño de flecha para select */
.language-selector select:focus 
{
    outline: none; /* Elimina contorno al enfocar */
}

/* Hero */
.hero 
{
    background-image: url(../img/img01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    position: relative;
    margin-bottom: 2rem;
}

.contenido-hero 
{
    position: absolute;
    background-color: rgba( 0,0,0, .7 ); /** Anterior **/
    background-color: rgb( 0 0 0 / 50% );
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

@media (min-width: 765px) 
{
    .contenido-hero 
    {
        position: absolute;
        background-color: rgba( 0,0,0, .7 ); /** Anterior **/
        background-color: rgb( 0 0 0 / 50% );
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    
    }
}

.contenido-hero h2 
{
    color: var(--blanco);
}

.contenido-hero .logo 
{
    display: flex;
    align-items: flex-end;    
}

/** Ventajas **/
@media (min-width: 768px) {
    .ventajas {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 3rem;
    }
}

.ventaja
{
    display: flex;
    flex-direction: column;
    align-items: center;    
}

.ventaja h3
{
    color: var(--secundario);
    font-weight: bold;
    margin-bottom: 1rem;
}

.ventaja p
{
    line-height: 2;
    text-align: center;
    line-height: 160%;
    margin-top: 0rem;
}

.ventaja {
     
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.contenedor_ventaja
{
    height: 37rem;
    width: 56rem;
    /*border: 0.1rem solid #000;*/
    overflow: hidden;    
}

.contenedor_ventaja img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/** Contacto **/
.formulario {
    background-color: var(--gris);
    margin: 0 auto;
    height: auto; /* Permite que el contenedor se adapte al contenido */
    width: auto; /** Utilizar el valor más pequeño **/
    min-width: 20rem;
    max-width: 100%;
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
    align-items: stretch; /* Estira los elementos dentro del contenedor */
    overflow: visible; /* Permite que los hijos influyan en el tamaño del contenedor */
}

.formulario fieldset 
{
    border: none;
}

.formulario legend {
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #d5d5d5;
}

.contenedor-campos 
{
    display: grid;
    grid-template-columns: 1fr; /* Cada columna ocupa todo el espacio disponible */
    column-gap: 1rem; /* Espacio entre las columnas */
}

@media (min-width: 768px) {
    .contenedor-campos {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
        grid-template-rows: auto;
        column-gap: 1rem;
    }

    .campo:nth-child(3),
    .campo:nth-child(4) {
        grid-column: 1 / 3;
    }
}
.campo {
    margin-bottom: 1rem;
}
.campo label {
    color: var(--blanco);
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;
}
.campo textarea {
    height: 20rem;
}

.input-text
{
    width: 100%;
    border: 1px solid black;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.secc_2
{
    margin: auto;
    margin-top: 2rem;
    max-width: 90rem;   
    width: 100%; /* Permite que se adapte al 100% del viewport o contenedor */    
}

.metodo_uso .step
{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.metodo_uso
{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 3rem;
}

.step
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img_step
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 724px;
    width: 1292px;
    /*border: 0.1rem solid #000;*/
    overflow: hidden;
    margin-bottom: 2rem;
}

.img_step img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intro
{
    background-image: url(../img/Fondo_intro.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
    position: relative;
    margin-bottom: 2rem;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.contenido_intro h2
{
    color: var(--blanco);
}

.contenedor_intro
{
    width: auto;
    height: auto;    
    padding: 1rem; 
}

@media (min-width: 768px) 
{
  .contenedor_intro
  {
    width: 75rem;
    height: auto;    
    padding: 1rem;/* Agrega algo de espacio interno */    
  }
}

.contenido_intro {
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100%; /* Ocupa toda la altura de la ventana */
    text-align: center; /* Asegura que el texto esté centrado */
    flex-direction: column; /* Apila elementos en una columna */
    background-color: rgb(0 0 0/50%);
}

.contenido_intro p
{
    font-family:Verdana, Geneva, Tahoma, sans-serif, Arial;  
    color: var(--blanco);
    font-size: 2rem;
    text-align: justify;  
    line-height: 1.5em;
}

.contenido_intro p span
{
    display: block;
    text-align: center;
}

/*Download*/
.title_cutopti_download,
.title_about_us
{
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 2.2rem;
    color: #757575;
}

.OS_select 
{
    display: flex;
    align-items: center;
    gap: 1rem; /* Espacio entre texto e imágenes */
    font-size: 2.2rem;
    color: #757575;
    margin: 0rem;
}

.logo_os 
{
    width: 120px; /* Ajusta el tamaño de los logos */
    height: auto;
}

.demo h3
{
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 1.8rem;
    color: #757575;
    margin-bottom: -1.5rem;
}

.descarga
{    
    flex-direction: column;   
}

.barra-descarga
{   
    scroll-snap-align: center;
    scroll-snap-stop: always;
    
    box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.48);
    background-color: #E0E0E0;    
    border-radius: 1rem;    
    margin-bottom: 1.5rem;
    display: flex; 
    flex-direction: column;
    
    /* Estilo para los enlaces dentro del contenedor de descarga */
    padding: 1.5rem 8rem; /* Padding interno para un mejor diseño */
    
    align-items: center; /* Alinea verticalmente los elementos */
    gap: 1rem; /* Espacio entre los enlaces */
}

/* Opcional: para mejorar la apariencia de los enlaces */
.barra-descarga a 
{
    display: block;
    text-align: center;
    text-decoration: none; /* Elimina subrayado */
    color: #000; /* Define el color del texto */
    font-size: 1.5rem; /* Tamaño del texto */
    padding: 1rem;
    margin-bottom: -1rem;   
}

@media (min-width: 768px) 
{
    .barra-descarga
    {
        flex-direction: row;
        justify-content: space-between;        
    }
}

#download_id
{
    text-decoration: underline; /* Elimina subrayado */
    color: var(--secundario);
    font-weight: bold;
    border-radius: 4px;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--secundario);
    background-color: transparent; /* Fondo transparente inicialmente */
    transition: all 0.3s ease; /* Transición suave */
}

#download_id:active 
{
    background-color: var(--secundario); /* Cambia el color de fondo */
    color: white; /* Cambia el color del texto */
    transform: scale(0.95); /* Efecto de presión (ligeramente más pequeño) */
}

#AboutUs_p
{
    scroll-snap-align: center;
    scroll-snap-stop: always;
    white-space: pre-line;
    text-align: justify;   
    font-size: 1.85rem;
    line-height: 3rem;        
}

/*Contact*/
.contact
{
    background-image: url(../img/photo-contact.avif);
    background-repeat: no-repeat;
    background-size: cover;
    height: 440px;
    position: relative;
    margin-bottom: 2rem;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.contenido_contact h2
{
    color: var(--blanco);
    margin-bottom: 0rem;
}

.contenido_contact {
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100%; /* Ocupa toda la altura de la ventana */
    text-align: center; /* Asegura que el texto esté centrado */
    flex-direction: column; /* Apila elementos en una columna */
    background-color: rgb(0 0 0/50%);
}

@media (min-width: 768px) 
{
  .contenedor_contact
  {
    width: 100rem;
    height: auto;    
    padding: 1rem;/* Agrega algo de espacio interno */  
    white-space: pre-line;  
  }
}

.contenido_contact p
{
    font-family:krub, sans-serif;  
    color: var(--blanco);
    font-size: 2rem;
    text-align: center;  
    line-height: 1.75em;
}

/** Footer **/
.footer 
{
    text-align: center;
    color:white;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background-color: #2d78da;
    padding: 2rem;
    margin-top: 1rem;
}

.link_footer
{
    text-align: left;
    text-decoration: none;    
    color: var(--blanco);    
    font-size: 2rem;
    font-weight: 700;
    padding: 1rem;
    margin: 0; /* Elimina márgenes externos */
    transition: color 0.3s;
    background-color: transparent;
}

.title_buy
{
    display: block;
    align-items: center;
    text-align: center;
    font-size: 2.5rem;
    color: #757575;
    margin-bottom: 2rem;
}

.select_plan
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

.plan_container {
    display: flex;
    gap: 3rem;
}

.plan_demo
{
    display: block;
    padding: 1rem 1.5rem;
    border: 1px solid #757575;/*Bordeparaelrecuadro*/
    border-radius: 15px;/*Esquinasredondeadas*/
    background-color: #f9f9f9;/*Fondoclaro*/  
    user-select: none; /* Evita que el texto se seleccione */    
    text-align: left;
    align-self: flex-start;  
}

.plan_anual
{
    display: block;
    padding: 1rem 2rem;
    border: 1px solid #757575;/*Bordeparaelrecuadro*/
    border-radius: 15px;/*Esquinasredondeadas*/
    background-color: #f9f9f9;/*Fondoclaro*/    
    width: 360px;  
    user-select: none;
}

.plan_anual p
{
    text-align: left;
}

.plan:hover {
    background-color: #f0f0f0; /* Efecto hover */
}


.plan_demo label, .plan_anual label
{
    font-weight: bold;
    font-size: 2.5rem;
}

.input-email
{
    width: 100%;
    font-size: 16px;
    transition: border-color 0.3s;
    border: 1px solid black;
    padding: 1.5rem;
    border-radius: 2.0rem;
    box-sizing: border-box;
    -webkit-border-radius: 2.0rem;
    -moz-border-radius: 2.0rem;
    -ms-border-radius: 2.0rem;
    -o-border-radius: 2.0rem;
}

.input-email.input-error
{
  border-color: #e74c3c; /* rojo */
  background-color: #fff0f0;
}

.error-msg
{
  color: #e74c3c;
  font-size: 14px;
  margin-top: 4px;
  font-style: italic;
}

#precio_demo, #precio_anual
{
    font-weight: bold;
    font-size: 3.5rem;
    color: var(--secundario);
    text-align: center;
    margin: 2rem;
}

.img_paypal, .img_credit_card
{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 70px;
  width: 270px;
  overflow: hidden;
  margin-top: 1rem;
}

.img_paypal img, .img_credit_card img
{
    width: 100%;
  height: 100%;
  object-fit: contain;
}

.img_warning img
{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 70px;
  width: 72px;
  overflow: hidden;
  object-fit: contain;
}

#paypal-button-container {
    max-height: 90vh;
    overflow-y: auto;
    margin-top: 20px;
}

.content-to-hide
{
    transition: opacity 0.4s ease;
}

.hidden
{
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}