@media (max-width: 768px) {
    #op-list2 {
        display: none;
    }
    
}

body{
  font-family: 'Roboto', sans-serif !important;
}
.row{
  margin-right: 0px;
    margin-left: 0px;
}

.carousel-indicators li{
  border: 1px solid #5f5f5f;
  background-color: #eee;
}



  .form-control {
    min-height: 41px;
    background: #f2f2f2;
    box-shadow: none !important;
    border: transparent;
  }
  .form-control:focus {
    background: #e2e2e2;
  }
  .form-control, .btn {        
        border-radius: 2px;
    }
  .login-form {
    width: 350px;
    margin: 30px auto;
    text-align: center;
  }
  .login-form h2 {
        margin: 10px 0 25px;
    }
    .login-form form {
    color: #7a7a7a;
    border-radius: 3px;
      margin-bottom: 15px;
        background: #ddd;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding-bottom:30px;
        padding-left:30px;
        padding-right:30px;
    }
    .login-form .btn {        
        font-size: 16px;
        font-weight: bold;
    background: #3598dc;
    border: none;
        outline: none !important;
    }
  .login-form .btn:hover, .login-form .btn:focus {
    background: #2389cd;
  }
  .login-form a {
    color: #fff;
    text-decoration: underline;
  }
  .login-form a:hover {
    text-decoration: none;
  }
  .login-form form a {
    color: #7a7a7a;
    text-decoration: none;
  }
  .login-form form a:hover {
    text-decoration: underline;
  }




#ventaLinea{
  display: none;
}

#herramientasVenta{
  display: none;
}

#herramientasDiseno{
  display: none;
}

.listaOpciones{
  z-index: 100;
  position: fixed;
  top: 140px;
}

#headerMenu {
  z-index: 1000;
  position: fixed;
  top: 0px;
}

#menuDe {
  width: 100%;
  position: fixed;
  top: 0px;
  display: none;
  z-index: 1000;
  background-color: #619fd9;
  padding-top: 5px;
  padding-bottom: 5px

}


#myNavbar ul li a{
color:white;
font-family: 'Roboto-condensed';
font-size: 18px;
}
#myNavbar ul li a:hover{
background-color: white;
color: #619fd9;
font-family: 'Roboto-condensed';
font-size: 18px;
}

.navbar-header button{
  background-color: white;
  color: #619fd9;
}

.navbar-header button:hover{
  background-color: #619fd9;
  color: white;
}





/*-----responsivo----*/
@media (max-width: 768px) {

.headerCarrito {
  display: none;
}
    .marcoPos {
        margin-top: 60px;
    }

    .bread {
        font-size: 11px;
    }

    .tituloCat {
        font-size: 20px;
    }

    #headerMenu {
        display: none;
    }
    #menuSub {
        display: none;
    }

    #menuDe {
        display: block;
    }
    .titulosCarrito {
        display: none;
    }

  #btnWhats{
  top: 300px;
  
}
  #btnSubir{
  top: 350px;
  
} 
    
}






/*-----responsivo----*/
@media (max-width: 768px) {

  #btnWhats{
  top: 300px;
}
  #btnSubir{
  top: 350px;
}
    
    
}


/*--------nuevo menu-----*/



@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway/Raleway-Regular.ttf");
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins/Poppins-Regular.ttf");
}
@font-face {
  font-family: "Poppins-Bold";
  src: url("fonts/Poppins/Poppins-Bold.ttf");
}
#menuS {
  width: 100%;
  background-color: #ffffff;
  font-family: 'Raleway';
  color: #000000;
  margin: 0px;
}

#logoMenu {
  width: 18em;
}


#menuS>.col-sm-4 {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;

}



.iconoSesion {
  font-weight: 600;
  color: #303A47;
  font-size: 18px;
  font-family: 'Poppins';


}



/* Crear una clase personalizada para simular 1/7 de fila en Bootstrap 3 */
.col-xs-1-7 {
  width: 14.285714%; /* 100 / 7 */
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Tu estilo original con mejoras */
#menuI {
  width: 100%;
  background-color: #F3F4F6;
  font-family: 'Poppins-Bold';
  color: #000000;
  margin: 0;
}

#menuI .col-xs-1-7 {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid #000000;
}

#menuI .col-xs-1-7:first-child {
  border-left: none;
}

#menuI .col-xs-1-7 a {
  font-size: 16px;
  color: #3a4b66;
  text-decoration: none;
}


.menuEspaciado {
  width: 100%;
  background-color: #F3F4F6;
  font-family: 'Poppins';
  color: #000000;
  margin: 0px;
  height: 25px;
}



.contenido {
  height: 450px;
}

#footer {
  width: 100%;
  background-image: url('https://calendarioslen.com/images/footer/footer3.webp');
  background-size: cover;
  background-position: center;
  margin: 0px;
  padding: 0px;
}

#footer>.col-sm-4 {
  height: 335px;

  text-align: center;
  background-color: #ffffff;
  opacity: 0.7;
  padding-top: 100px;


}

.textContacto {
  font-family: 'Poppins';
  color: #000000;
  font-weight: 600;
  font-size: 18px;
}

.textContacto>a {
  text-decoration: none;
  color: #000000;
}

.iconosContacto>a {
  border: 1px solid #ddd;
  border-radius: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 15px;
  padding-left: 15px;
  font-size: 20px;
  color: #000000;
  margin-left: 5px;
  margin-right: 5px;
}

.textDerechos {
  font-family: 'Poppins';
  color: #000000;
  font-weight: 600;
  font-size: 14px;
}


.iconoMenu{
font-weight: 600;
  color: #303A47;
  font-size: 18px;
  font-family: 'Poppins';
  text-decoration: none;
color: #303A47;
margin-right: 5px;
  margin-left: 5px;
  text-decoration: none;
transition:  margin-top 0.5s;
}

.iconoMenu:hover{
/*  transform: perspective(150px) rotateX(360deg); */
margin-top: -10px;
}



/*---------Menu colapsado-----------------*/

#menuCollapse >.col-sm-4 {
height: 55px;
display: flex;
  align-items: center;
  justify-content: center; 
  background-color: #FFffff;
}
#menuCollapse >.col-sm-4 > a> img{
width: 8em;
}

#menuCollapse >.col-sm-4 >a> i{
font-size: 25px;
}


@media screen and (max-width: 800px) {
#menuS, #menuI{
display: none;
}

#footer>.col-sm-4 {
height: auto;

  text-align: center;
  background-color: #ffffff;
  opacity: 0.7;
  padding-top: 100px;
}
.textDerechos{
  margin: 0px;
}
}

@media screen and (min-width: 800px) {
#menuCollapse{
display: none;
}



}

.custom-radio {
  transform: scale(2);
  /* Cambia el tamaño */
  margin-right: 10px;

  /* Ajusta espacio si es necesario */
}

#mercadoPago, #facturar{
  margin-bottom: 20px;
}

#opcionesDeFacturacion{
  margin-top: 20px;
}
hr{
  margin:0px
}


/* ===== Menú horizontal centrado (versión flex) ===== */
.menu-len{
  display:flex;
  justify-content:center;      /* CENTRADO HORIZONTAL */
  align-items:center;          /* CENTRADO VERTICAL */
  gap:40px;                    /* separación entre opciones */
  padding:20px 10px;           /* PT=20px, PB=20px */
  background:#F3F4F6;
  font-family:'Poppins-Bold';
  font-weight:700;
  text-align:center;
}

/* Links del menú */
.menu-len a{
  text-decoration:none;
  color:#3a4b66;
  line-height:1.25;            /* ayuda con los <br> */
  white-space:normal;          /* permite el salto de línea */
  position:relative;           /* para el separador ::before */
  display:inline-block;
  padding:2px 0;
}

/* Separadores verticales entre items */
.menu-len a + a::before{
  content:'';
  position:absolute;
  left:-20px;                  /* centrado del separador respecto al gap */
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:18px;
  background:#cfd3d8;
}

/* ===== Responsivo ===== */
@media (max-width: 992px){
  .menu-len{
    flex-wrap:wrap;            /* las opciones bajan a otra línea si no caben */
    row-gap:18px;
    column-gap:28px;
  }
  .menu-len a + a::before{     /* quitamos separadores para que no estorben en wrap */
    display:none;
  }
}

@media (max-width: 600px){
  .menu-len{
    gap:22px;
    padding:16px 8px;          /* un poco más compacto en móvil */
    font-weight:700;
  }
  .menu-len a{
    font-size:15px;
  }
}



/*-----actulizacion----*/

/* ===== Ajustes sticky: logo a la izquierda y más alto ===== */
body.is-sticky #menuS{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;                /* encima del menú */
  height: 60px;                 /* barra compacta */
  border-bottom: 1px solid #e0e0e0;
  display: flex;                /* para alinear fácil */
  align-items: center;
}

/* Oculta las columnas 1 y 3, usa la central para el logo */
body.is-sticky #menuS > .col-sm-4:first-child,
body.is-sticky #menuS > .col-sm-4:last-child{
  display: none !important;
}

/* La columna CENTRAL se expande y alinea a la IZQUIERDA */
body.is-sticky #menuS > .col-sm-4:nth-child(2){
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;   /* izquierda */
  padding-left: 20px;            /* separación del borde */
}

/* Logo más chico y un POCO más ARRIBA */
body.is-sticky #logoMenu{
  width: 11em;                   /* antes: 18em */
  margin-top: -6px;              /* súbelo un poquito */
  transition: width .2s ease, margin .2s ease;
}

/* Menú principal fijo debajo, sin que se encime */
body.is-sticky #menuI{
  position: fixed;
  top: 60px;                     /* igual a la altura de #menuS */
  left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Si usas .menu-len, compacta un poco en sticky */
body.is-sticky #menuI .menu-len{
  background: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Espaciador (no salte el contenido) */
#stickySpacer{ height: 0; transition: height .2s ease; }

/* En móvil no aplicar sticky (usas #menuCollapse) */
@media (max-width: 799px){
  body.is-sticky #menuS,
  body.is-sticky #menuI{
    position: static;
    top: auto;
  }
  #stickySpacer{ height: 0 !important; }
}


/*-----2 actulizacion----*/

/* === Alinear logo dentro de un container (no pegado a la izquierda) === */
body.is-sticky #menuS > .col-sm-4:nth-child(2){
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;     /* Izquierda */
  padding-left: 5%;                /* Simula un container (ajusta a gusto: 4%-8%) */
}

/* Logo más proporcionado dentro del container */
body.is-sticky #logoMenu{
  width: 11em;
  margin-top: -4px;
  transition: width .2s ease, margin .2s ease, padding .2s ease;
}

/* === Agrandar tipografía del menú principal === */
#menuI .menu-len a,
#menuI a {
  font-size: 18px;   /* antes 16px */
}

@media (min-width: 1200px){
  #menuI .menu-len a,
  #menuI a {
    font-size: 18px; /* un poco más grande en pantallas grandes */
  }
}

@media (max-width: 900px){
  #menuI .menu-len a,
  #menuI a {
    font-size: 16px; /* más compacto en móvil */
  }
}



/* Utilitarios pequeños */
.no-gutter { margin-left:0; margin-right:0; }
.m-b-10 { margin-bottom:10px; }
.m-b-20 { margin-bottom:20px; }
.m-b-30 { margin-bottom:30px; }
.m-b-40 { margin-bottom:40px; }

/* Encabezados de sección */
.h2-section { margin: 10px 0 18px; font-weight: 600; }
.h4-section { margin: 8px 0 10px; font-weight: 600; }

/* Pasos / Dinámicas */
.pasos img, .dinamicas img { max-width: 100%; height: auto; }

/* Form Google: usa relación de aspecto; en móvil ajusta alto */
.form-wrapper { min-height: 70vh; }
@media (max-width: 768px){
  .form-wrapper { min-height: 80vh; }
}

/* FAQ (acordeón simple) */
.faq .accordion{
  width:100%;
  text-align:left;
  padding:14px 16px;
  border:1px solid #e2e6ea;
  background:#fff;
  margin-bottom:8px;
  font-weight:600;
  border-radius:4px;
  transition: background .2s ease, border-color .2s ease;
}
.faq .accordion[aria-expanded="true"]{
  background:#f8f9fb;
  border-color:#d9dee3;
}
.faq .panel{
  border-left:3px solid #619fd9;
  background:#fbfcfe;
  padding:12px 14px;
  margin:-6px 0 12px 0;
  border-radius:0 0 4px 4px;
}

/* Botón de descarga */
a.btn.btn-primary{
  background:#3598dc;
  border-color:#2389cd;
}
a.btn.btn-primary:hover { background:#2389cd; }

/* Evita que TODAS las .row se queden sin gutters: usa .no-gutter solo donde quieras 0 */
.row { margin-left: -15px; margin-right: -15px; } /* restauramos el default de Bootstrap */


/* Banner ancho completo */
.banner-img{
  display:block;      /* quita espacios fantasmas */
  width:100%;         /* 100% del contenedor */
  height:auto;        /* mantiene proporción */
}

/* ya tienes esto, pero por si acaso: fila sin gutters */
.no-gutter{ margin-left:0; margin-right:0; }
.no-gutter > [class*="col-"]{ padding-left:0; padding-right:0; }

/* si usas la lógica sticky que ya montamos */
#bannerTop{ transition: margin-top .2s ease; }
body.is-sticky #bannerTop{ margin-top:200px; }

/* Quitar padding a columnas de una fila específica */
.no-padding-cols > [class*="col-"]{ padding-left:0; padding-right:0; }


/* ===== Pasos centrados con zoom suave ===== */
/* ===== Pasos: 3 imágenes en una línea con zoom ===== */

.pasos-container {
  padding: 40px 0;
  background-color: #fff; /* opcional */
}

/* Fila */
/* Fila sin separación */
.pasos-row {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pasos-row.no-gutter > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Imágenes */
.paso-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  will-change: transform;
}

/* Efecto zoom */
.paso-img:hover,
.paso-img:active,
.paso-img:focus {
  transform: scale(1.08);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  z-index: 2;
}

/* --- En pantallas pequeñas: imágenes apiladas (una debajo de otra) --- */
@media (max-width: 768px) {
  .pasos-row {
    flex-direction: column;   /* apila verticalmente */
  }
  .pasos-row > div {
    width: 100%;              /* ocupa todo el ancho */
    max-width: none;
  }
  .paso-img {
    width: 100%;
    max-width: 480px;         /* ancho máximo opcional */
    margin: 0 auto 15px auto; /* espacio entre imágenes */
  }
}

/* ===== Formulario Google sin scroll interno ===== */
.formulario-trivia iframe {
  width: 100%;
  min-height: 1400px; /* altura base para escritorio */
  border: none;
  overflow: hidden;
  display: block;
}

/* Ajuste de altura en pantallas pequeñas */
@media (max-width: 768px) {
  .formulario-trivia iframe {
    min-height: 1600px; /* más alto en móvil */
  }
}


/* ===== Hero de formulario con degradado y animación ===== */
/* ===== Hero de formulario con degradado morado→blanco y caída constante ===== */
.form-hero {
  /* De morado (arriba) a blanco (abajo) */
  background: linear-gradient(180deg, #A129C4 0%, #ffffff 100%);
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}

/* Ajustes columnas */
.hero-left {
  position: relative;
  min-height: 1160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
}
.hero-right {
  padding: 30px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Texto lateral */
.hero-copy {
  position: relative;
  bottom: 18px;
  left: 18px;
  right: 18px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  font-family: 'Poppins';
}
.hero-copy h2 { margin: 0 0 6px; font-weight: 700; }
.hero-copy p { margin: 0; }

/* Iframe del formulario */
.form-iframe {
  width: 100%;
  max-width: 720px;
  min-height: 1400px;
  border: none;
  display: block;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}

/* === ANIMACIÓN DE PRODUCTOS: caída desde arriba === */
.product-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.product-rain .drop {
  position: absolute;
  top: -150px;
  width: 120px;
  height: auto;
  opacity: 0;
  animation: dropFall linear infinite;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .2));
}

/* Caída vertical */
@keyframes dropFall {
  0%   { opacity: 0; transform: translateY(-150px) rotate(0deg) scale(0.9); }
  10%  { opacity: 1; }
  90%  { opacity: 1; transform: translateY(110vh) rotate(10deg) scale(1.05); }
  100% { opacity: 0; transform: translateY(120vh) rotate(15deg) scale(1); }
}

/* Variaciones: posición y tiempos para naturalidad */
.product-rain .d1 { left: 5%;  animation-duration: 8s;  animation-delay: 0s; }
.product-rain .d2 { left: 20%; animation-duration: 9s;  animation-delay: 2s; }
.product-rain .d3 { left: 35%; animation-duration: 7s;  animation-delay: 1s; }
.product-rain .d4 { left: 50%; animation-duration: 10s; animation-delay: 3s; }
.product-rain .d5 { left: 65%; animation-duration: 8s;  animation-delay: 1.5s; }
.product-rain .d6 { left: 80%; animation-duration: 9.5s; animation-delay: 2.5s; }
.product-rain .d7 { left: 40%; animation-duration: 11s; animation-delay: 4s; }
.product-rain .d8 { left: 90%; animation-duration: 12s; animation-delay: 5s; }

/* Responsive */
@media (max-width: 991px){
  .hero-left{ min-height: 460px; }
  .product-rain .drop{ width: 100px; }
}
@media (max-width: 768px){
  .form-hero{
    background: linear-gradient(180deg, #A129C4 0%, #ffffff 100%);
    padding: 24px 0 40px;
  }
  .hero-left{ min-height: 360px; }
  .product-rain .drop{ width: 80px; }
  .form-iframe{ min-height: 1600px; }
}



/*dinamicas*/
/* ==== Dinámicas: giro 180° visible (sin desaparecer) ==== */
/* Card por imagen: aísla la animación */
.dinamica-card{
  position: relative;
  padding: 8px;                 /* pequeño gap entre imágenes */
  perspective: 1000px;          /* 3D solo para esta tarjeta */
  overflow: hidden;             /* el zoom no invade al vecino */
  border-radius: 10px;          /* opcional, se ve nice */
  background: transparent;      /* por si quieres ver el gap */
}

/* Imagen dentro de la card */
.dinamica-img{
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transition: transform .8s ease, box-shadow .4s ease;
  will-change: transform;
  backface-visibility: visible; /* no desaparece al rotar */
}

/* Aplica el giro SOLO cuando el puntero está en su propia card */
.dinamica-card:hover .dinamica-img,
.dinamica-card:focus .dinamica-img,
.dinamica-card:active .dinamica-img{
  transform: rotateY(180deg) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

/* Eleva z-index de la card activa para que no clippee visualmente */
.dinamica-card:hover{ z-index: 5; }

/* En pantallas táctiles: evita el flip completo (opcional) */
@media (hover:none) and (pointer:coarse){
  .dinamica-card:active .dinamica-img{
    transform: scale(1.06);   /* sutil zoom en móvil */
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
  }
}


.texto-trivia {
  font-size: 16px;
  font-family: 'Poppins';
  line-height: 1.6;
  color: #333;
  margin-bottom: 14px;
  text-align: justify;
}

.texto-trivia a {
   font-family: 'Poppins';
  color: #A129C4;
  font-weight: 600;
  text-decoration: none;
}

.texto-trivia a:hover {
  text-decoration: underline;
}


/* ===== FAQ con tipografía Poppins ===== */
.faq {
  font-family: 'Poppins', sans-serif;
  text-align: left;
}

.faq .accordion {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid #e2e6ea;
  background: #fff;
  margin-bottom: 8px;
  font-weight: 600;
  border-radius: 6px;
  transition: background .2s ease, border-color .2s ease;
  font-family: 'Poppins', sans-serif;
}

.faq .accordion[aria-expanded="true"] {
  background: #f8f9fb;
  border-color: #d9dee3;
}

.faq .panel {
  border-left: 3px solid #A129C4;
  background: #fbfcfe;
  padding: 14px 18px;
  margin: -6px 0 12px 0;
  border-radius: 0 0 6px 6px;
  font-family: 'Poppins', sans-serif;
  color: #333;
}

.faq .panel p,
.faq .panel li {
  font-size: 15px;
  line-height: 1.6;
}

.faq .panel ul {
  margin-top: 6px;
  margin-bottom: 10px;
  padding-left: 20px;
}

.faq .panel a {
  color: #A129C4;
  font-weight: 600;
  text-decoration: none;
}

.faq .panel a:hover {
  text-decoration: underline;
}


/* ===== Normas y Aviso Legal ===== */
.normas-trivia {
  font-family: 'Poppins', sans-serif;
  margin-top: 20px;
  margin-bottom: 40px;
}

.texto-norma {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

.aviso-legal {
  background: #fbf9ff;
  border-left: 4px solid #A129C4;
  padding: 18px 20px;
  border-radius: 6px;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  font-family: 'Poppins', sans-serif;
}

.aviso-legal strong {
  color: #A129C4;
  text-transform: uppercase;
  font-weight: 700;
}

.btn-descarga {
  background-color: #A129C4;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.btn-descarga:hover {
  background-color: #8c1da9;
  transform: translateY(-2px);
}

.btn-descarga i {
  margin-right: 6px;
}

/* ===== Botón de descarga (color institucional LEN) ===== */
.btn-descarga {
  background-color: #A129C4;       /* Morado LEN */
  border: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.btn-descarga:hover {
  background-color: #881CA8;       /* tono más oscuro al pasar el mouse */
  transform: translateY(-2px);
  color: #fff;
}

.btn-descarga i {
  margin-right: 6px;
}