@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --main: #064e3b;      /* Verde Esmeralda */
  --accent: #fbbf24;    /* Ámbar */
  --bg-light: #f9fafb;  /* Fondo Gris Tenue */
  --text-dark: #1f2937; /* Texto */
  --text-muted: #6b7280;
  --white: #ffffff;
  --border: #e5e7eb;

 --naranja:#ff9600;
 --verde:#27ae60;
 --verdeSuave:#9cd1b2;
 --azul:#03afe7;
 --gris:#d8d8d8;
 --rojo:#df4545;

}
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
}

.colorMain{color: var(--main);}
.colorSecun{color: var(--accent);}
.borde{border: 1px #df0000 solid;}

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.cabecera-fija {
  position: sticky;
  top: 0;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 100;
  padding: 10px 0;
}

a{text-decoration: none}
.icoCopy{width:20px; vertical-align: middle; margin-left:10px; cursor: pointer;}

.imgCont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 20px 0px;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    background: var(--verdeSuave);
}

.qrImg{
    width: 200px;
    height: 200px;
    border: 10px #ffffff solid;
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-img { height: 50px; }

.italica{font-style: italic;}

.navegacion-desktop { display: flex; align-items: center; gap: 30px; }
.navegacion-desktop a { text-decoration: none; color: var(--text-dark); font-weight: 500; }
.navegacion-desktop a:hover { color: var(--main); }




/* BOTONES */
.btn{
    display:inline-block;
    cursor:pointer;
    border:none;
    text-align:center;
    box-sizing:border-box;
    border-radius:6px;
    font-weight:300;
    font-size: 20px;
    font-family: "Roboto","Arial","Sans";
    transition:all .2s ease-in-out;
    user-select:none;
}


.btnEnviar{border:1px var(--main) solid;background:var(--main);color:#ffffff;padding:10px 20px;text-align: center;}
.btnVerde{border:1px var(--verde) solid;background:var(--verde);color:#ffffff;padding:10px 20px;text-align: center;}
.btnAzul{border:1px var(--azul) solid;background:var(--azul);color:#ffffff;padding:10px 20px;text-align: center;}
.btnGris{border:1px var(--gris) solid;background:var(--gris);color:#ffffff;padding:10px 20px;text-align: center;}
.btnGrande{padding:10px 100px;}
.btnChico{padding:2px 10px;    font-size: 14px; margin: 10px 0px;
}


/* Botones */
.btn-primario {
  background: var(--main);
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: 8px;
  transition: opacity 0.3s;
}

.btn-primario-grande {
  display: inline-block;
  background: var(--main);
  color: var(--white);
  padding: 15px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(6, 78, 59, 0.3);
}

.btn-secundario-grande {
  display: inline-block;
  border: 2px solid var(--main);
  color: var(--main);
  padding: 13px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
}


.icoPortada{width:80px;}

/* Ajusta el valor (70px) a la altura de tu menú */
section {
  scroll-margin-top: 90px;
}

/* Hero Section */
.seccion-hero {
  padding: 80px 0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.hero-flex {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.hero-texto { flex: 1; min-width: 300px; }
.hero-texto h1 { font-size: 3rem; color: var(--main); line-height: 1.2; margin-bottom: 20px; }
.hero-texto p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 30px; }
.hero-acciones { display: flex; gap: 15px; }

.txtcenter{text-align: center;}

.hero-imagen img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Features & Pricing */
.titulo-centrado { text-align: center; margin-bottom: 50px; }
.titulo-centrado h2 { font-size: 2.5rem; color: var(--main); }

.rejilla-caracteristicas, .rejilla-precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.rejilla-precios {
    margin-bottom: 40px;
}

.tarjeta-feature, .tarjeta-precio {
  background: var(--white);
  padding: 30px;
  border-radius: 15px;
  border: 1px solid var(--border);
  transition: transform 0.3s;
}

.tarjeta-precio.destacado {
  border: 2px solid var(--accent);
  position: relative;
  transform: scale(1.05);
}

.etiqueta-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  padding: 4px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

.precio span { font-size: 2.5rem; font-weight: bold; color: var(--main); }

/* Utilidades Móvil */
.btn-movil { display: none; background: none; border: none; cursor: pointer; }
.btn-movil svg { width: 30px; height: 30px; }






.guia-pasos-titulo {
    text-align: center;
    margin-bottom: 30px; /* Un poco de espacio abajo antes de que empiecen las tarjetas */
}

.guia-pasos-titulo h1 {
    font-family: sans-serif; /* O la tipografía de tu web */
    color: var(--main);
    font-size: 2.5rem; /* Tamaño llamativo */
}
/* Contenedor general en modo Flexbox */
.guia-onboarding-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espacio entre tarjetas */
    margin: 0px auto; /* Margen arriba y abajo para dar aire al desborde */
    padding: 20px;
    justify-content: center; /* Centra la fila de abajo si fuera necesario */
}

/* Estilo base de la tarjeta */
.card-paso {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: 30px;
    height: 220px; /* Altura fija para controlar el desborde exacto */
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative; /* Clave para posicionar el celular */
    margin-bottom:40px;    
    /* IMPORTANTE: Quitamos overflow:hidden para permitir el desborde */
    overflow: visible; 
}

/* --- El truco de las columnas (3 arriba, 2 abajo) --- */

/* Primeros 3 elementos (Paso 1, 2 y 3): Ocupan ~33% */
.card-paso:nth-child(1),
.card-paso:nth-child(2),
.card-paso:nth-child(3) {
    width: calc(33.333% - 20px);
}

/* Últimos 2 elementos (Paso 4 y 5): Ocupan ~50% */
.card-paso:nth-child(4),
.card-paso:nth-child(5) {
    width: calc(50% - 15px);
}


/* Bloque izquierdo de la información */
.card-paso-info {
    flex: 1.2; /* Le da un poco más de espacio al texto */
    padding-right: 10px;
    z-index: 2;
}

.paso-numero {
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    color: #4CAF50;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.paso-titulo {
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.paso-descripcion {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #555555;
    margin: 0;
}

/* Bloque derecho destinado al celular */
.card-paso-mockup {
    flex: 0.8; 
    height: 100%;
    position: relative;
    z-index: 5;
}

/* Imagen del celular desbordada e inclinada */
.celular-inclinado {
    position: absolute;
    width: 150px; /* Ancho fijo del celular */
    height: auto;
    
    /* Centrado vertical relativo al contenedor derecho */
    top: 50%;
    left: 50%;
    /* El translate(-50%, -50%) lo centra. El rotate simula la inclinación tridimensional */
    transform: translate(-50%, -50%) rotateY(-15deg) rotateZ(5deg);
    
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

/* Efecto hover interactivo al pasar el mouse */
.card-paso:hover .celular-inclinado {
    transform: translate(-50%, -55%) rotateY(-5deg) rotateZ(2deg) scale(1.05);
}

/* --- RESPONSIVE: Adaptación perfecta para tablets y celulares --- */
@media (max-width: 992px) {
    /* En tablets ponemos todo en 2 columnas */
    .card-paso:nth-child(1),
    .card-paso:nth-child(2),
    .card-paso:nth-child(3),
    .card-paso:nth-child(4),
    .card-paso:nth-child(5) {
        width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    /* En celulares pasa a 1 sola columna y quitamos el desborde rígido para evitar cortes */
    .card-paso:nth-child(1),
    .card-paso:nth-child(2),
    .card-paso:nth-child(3),
    .card-paso:nth-child(4),
    .card-paso:nth-child(5) {
        width: 100%;
        height: auto; /* Que crezca según el contenido */
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    
    .card-paso-info {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .card-paso-mockup {
        height: 220px;
        width: 100%;
    }

    .celular-inclinado {
        position: relative;
        top: 0;
        left: 0;
        margin: 0 auto;
        transform: rotateY(-10deg) rotateZ(3deg);
    }
    
    .card-paso:hover .celular-inclinado {
        transform: rotateY(0deg) rotateZ(0deg) scale(1.05);
    }
}





.contenedorMain{
    max-width:1200px;text-align: left;
    margin:50px auto 100px auto;
}


/* Estilos extra para listas y footer */
.lista-checks { list-style: none; padding: 0; margin: 20px 0; }
.lista-checks li:before { content: '✓'; color: var(--main); margin-right: 10px; font-weight: bold; }

.seccion-blanca2 { background: #f0f0f0; padding: 60px 0; }
.seccion-cta { background: var(--main); padding: 60px 0; }
.texto-blanco-centrado { text-align: center; color: var(--white); }
.btn-accent-grande { 
    display: inline-block; 
    background: var(--accent); 
    color: #000; 
    padding: 15px 40px; 
    border-radius: 10px; 
    text-decoration: none; 
    font-weight: bold; 
    margin-top: 20px;
}

.pie-pagina { background: #111827; color: var(--white); padding: 60px 0 20px; }
.rejilla-footer { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 40px; 
    margin-bottom: 40px;
}
.rejilla-footer h4 { color: var(--accent); margin-bottom: 20px; }
.rejilla-footer a { display: block; color: #9ca3af; text-decoration: none; margin-bottom: 10px; }
.rejilla-footer a:hover { color: var(--white); }

.footer-copyright { border-top: 1px solid #374151; padding-top: 20px; text-align: center; color: #6b7280; }

/* Botones de bloque completo para precios */
.btn-primario-full, .btn-gris-full, .btn-oscuro-full {
    display: block; text-align: center; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: bold; margin-top: 20px;
}
.btn-primario-full { background: var(--main); color: var(--white); }
.btn-gris-full { background: #f3f4f6; color: var(--text-dark); }
.btn-oscuro-full { background: #1f2937; color: var(--white); }




.btn-movil {
    position: relative;
    z-index: 1001; /* Un nivel arriba del menú fixed (999) */
    background: none;
    border: none;
    cursor: pointer;
    color: var(--main); /* O el color que prefieras */
    padding: 10px;
}

/* Evita que los SVGs se encimen si hay errores de carga */
.btn-movil svg {
    width: 30px;
    height: 30px;
    display: block;
}

/* Asegúrate de que tu clase hidden esté disponible */
.hidden {
    display: none !important;
}




/*==============================
    MINI ALERTA
======================*/
#miniAlertaBox{
    position:fixed;
    top:-200px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    z-index:9999;
    transition:.4s;
}

#miniAlertaBox.activo{
    top:100px;
}

.miniAlertaContenido{
    background:white;
    padding:20px 30px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    text-align:center;
    min-width:320px;
}

/* tipos */

.miniAlerta_ok{border-top:10px solid #28a745;}
.miniAlerta_error{border-top:10px solid #dc3545;}
.miniAlerta_warn{border-top:10px solid #ffc107;}
#miniAlertaMensaje{
    margin-bottom:15px;
    font-size:24px;
}
#miniAlertaBtn{
    background:var(--main);
    color:white;
    border:none;
    padding:8px 20px;
    border-radius:6px;
    cursor:pointer;
}





        .logotipoCont{width:100%;text-align: center;}
        .logotipo{width:90%;max-width:200px; float: none; display: inline-block;}
        .form-container { max-width: 450px; margin: 50px auto; padding: 30px; background: white; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .campo { margin-bottom: 20px; }
        .campo label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--main); }
        .campo input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; }
        .campo select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; }
        .alerta-exito { color: #065f46; background: #d1fae5; padding: 10px; border-radius: 5px; margin-bottom: 20px; }
        .alerta-error { color: #991b1b; background: #fee2e2; padding: 10px; border-radius: 5px; margin-bottom: 20px; }
/* Cuando el botón esté deshabilitado */
#btnRegistro:disabled {
    background-color: #9ca3af !important; /* Un gris neutro */
    color: #f3f4f6 !important;
    font-style: italic; /* Las cursivas que pediste */
    cursor: not-allowed; /* Cambia el cursor a un círculo de prohibido */
    box-shadow: none; /* Quitamos sombras para que se vea "plano" */
    transform: none !important; /* Por si tenías un efecto de escala al hacer hover */
}




.tarjeta-info-plan {
    border: 2px solid var(--main);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #c9e7d2;
    padding-bottom: 5px;
}

.plan-precio {
    color: var(--main);
    font-weight: bold;
    font-size: 1.1rem;
}

.lista-checks-mini {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.lista-checks-mini li:before {
    content: '✓';
    color: var(--main);
    margin-right: 8px;
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}


@media (max-width: 768px) {
  .navegacion-desktop {
    display: none; /* Oculto por defecto */
    
    /* Configuración Full Screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Ocupa toda la pantalla */
    background-color: var(--white);
    z-index: 999; /* Por encima de todo */
    
    /* Alineación de los elementos */
    flex-direction: column;
    justify-content: center; /* Centra todo verticalmente */
    align-items: center;
    gap: 25px;
    padding: 20px;
    box-sizing: border-box;
  }

  /* Clase que activa el JS */
  .navegacion-desktop.activo {
    display: flex;
  }

  /* Ajuste de los enlaces para que sean más grandes */
  .navegacion-desktop a {
    font-size: 1.5rem;
    width: 100%;
    text-align: center;
  }

  /* --- Estilos para los BOTONES en móvil --- */
  .botones-auth {
    display: flex;
    flex-direction: column;
    width: 100%; /* Que ocupen todo el ancho */
    gap: 15px;
    margin-top: 20px;
  }

  .botones-auth a {
    display: block;
    width: 100%;
    padding: 15px 0 !important; /* Más altos para el touch */
    text-align: center;
    font-size: 1.2rem !important;
    border-radius: 12px; /* Más redondeados para el look hamburguesería */
  }

  .link-login {
    border: 2px solid var(--main);
    color: var(--main) !important;
  }

  /* El botón de cerrar (opcional pero recomendado) */
  .btn-movil {
    display: block;
    position: relative;
    z-index: 1000; /* Siempre por encima del menú fixed */
  }
}



.titulo-registro{
    font-size:20px;
    display:flex;
    justify-content:center; /* horizontal */
    align-items:center;     /* vertical */
    text-align:center;
}

/* =========================
   FONDO BRONCE
========================= */
.bg-bronce{
    background: linear-gradient(
        135deg,
        #5c3b1e 0%,
        #8c6239 25%,
        #cd7f32 50%,
        #e0a96d 75%,
        #7a4a22 100%
    );
    color:#fff;
}
.bg-bronce strong{
        font-size:30px;
        color: #ffffff;
}
.bg-bronce .plan-precio{
        font-size:30px;
        color: #ffffff;
}
.bg-bronce ul{
        font-size:16px;
        color: #ffffff;
}


/* =========================
   FONDO PLATA
========================= */
.bg-plata{
    background: linear-gradient(
        135deg,
        #5f5f5f 0%,
        #9b9b9b 25%,
        #d9d9d9 50%,
        #f5f5f5 75%,
        #7a7a7a 100%
    );
    color:#222;
}
.bg-plata strong{
        font-size:30px;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000000;
}
.bg-plata .plan-precio{
        font-size:30px;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000000;

}
.bg-plata ul{
        font-size:16px;
        color: #ffffff;
}



/* =========================
   FONDO ORO
========================= */
.bg-oro{
    background: linear-gradient(
        135deg,
        #6e5200 0%,
        #b8860b 25%,
        #ffd700 50%,
        #fff1a8 75%,
        #8a6a00 100%
    );
    color:#222;
}
.bg-oro strong{
        font-size:30px;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000000;
}
.bg-oro .plan-precio{
        font-size:30px;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000000;

}
.bg-oro ul{
        font-size:16px;
        color: #ffffff;
}



.bg-oro{
    position: relative;
    overflow: hidden;
    
    background: linear-gradient(
        135deg,
        #6e5200 0%,
        #b8860b 25%,
        #ffd700 50%,
        #fff1a8 75%,
        #8a6a00 100%
    );

    color:#222;
}


/* brillo animado */
.bg-oro::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;

    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.15) 30%,
        rgba(255,255,255,0.7) 50%,
        rgba(255,255,255,0.15) 70%,
        transparent 100%
    );

    transform: skewX(-25deg);

    animation: shimmerMove 3s infinite;
}


@keyframes shimmerMove{
    0%{
        left:-120%;
    }
    100%{
        left:140%;
    }
}