/* -------------------------------
   1. FUENTES PERSONALIZADAS
--------------------------------*/
@font-face {
  font-family: "SignPainter";
  src: url("../fonts/SignPainter HouseScript Regular.ttf");
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: "Varien";
  src: url("../fonts/Varien.ttf") format("truetype"),
       url("../fonts/Varien.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face { 
  font-family: "Anallop";
  src: url("../fonts/anallop-regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "AnimeAce";
  src: url("../fonts/animeace2_reg.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: 'AnimeAce';
  src: url('../webfonts/animeace.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AnimeAce';
  src: url('../webfonts/animeace_b.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AnimeAce';
  src: url('../webfonts/animeace_i.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

.fuente-anime {
  font-family: "AnimeAce", sans-serif;
}

/* -------------------------------
   2. ESTILOS GENERALES
--------------------------------*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  color: black;
 /* font-family: 'AnimeAce', sans-serif; */
  font-family: 'Rubik', Arial, Helvetica, sans-serif;
  font-weight: 600; /* Semibold */
} 

header {
  position: relative;
}

header .pin img {
  width: auto;
}

.pin {
  display: inline-block;
  position: absolute;
  right: 50%;
  top: 92%;
  margin-right: -45px;
}

/* -------------------------------
   3. SECCIÓN PRINCIPAL
--------------------------------*/

#section_one {
  background-image: url("../img/LANDING/FONDO/backgroundspm.png");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0; /* opcional, si no querés espacio */
  text-align: center;
}

#section_one .container-fluid {
  width: 100%;
  max-width: 1000px; /* opcional */
}


#section_one_data {
  background-image: url("../img/LANDING/FONDO/backgroundspm.png"); 
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100vw;         /* 100% del ancho de la ventana */
  margin: 0 auto;       /* centrar si hay margen automático */
  padding: 0;           /* eliminar padding interno */
  overflow-x: hidden;   /* prevenir scroll horizontal */
}

#section_one_lc {
  background-image: url("../img/LANDING/FONDO/backgroundspm.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100vw;         /* 100% del ancho de la ventana */
  margin: 0 auto;       /* centrar si hay margen automático */
  padding: 0;           /* eliminar padding interno */
  overflow-x: hidden;   /* prevenir scroll horizontal */
}

#section_one.sorteo-no-vigente {
    background-image: url('../img/LANDING/FONDO/backgroundspm.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100vw;         /* 100% del ancho de la ventana */
  margin: 0 auto;       /* centrar si hay margen automático */
  padding: 0;           /* eliminar padding interno */
  overflow-x: hidden;   /* prevenir scroll horizontal */
}

#section_one_data.sorteo-no-vigente {
  background-image: url('../img/LANDING/FONDO/backgroundspm.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100vw;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}



/* -------------------------------
   4. BLOQUE SORTEO GENERAL
--------------------------------*/
.sorteo {
  font-weight: 600;
}

.sorteo h2,
.datos h2,
.perdedor h2,
#mensajes h2 {
  color: #FFF;
  margin-bottom: 0;
  line-height: 1.15;
}

.sorteo p {
  color: #2B3645;
  line-height: 1;
  text-shadow: 
    rgb(255, 255, 255) 5px 0px 0px,
    rgb(255, 255, 255) 4.90033px 0.993347px 0px,
    rgb(255, 255, 255) 4.60531px 1.94709px 0px,
    rgb(255, 255, 255) 4.12668px 2.82321px 0px,
    rgb(255, 255, 255) 3.48353px 3.58678px 0px,
    rgb(255, 255, 255) 2.70151px 4.20736px 0px,
    rgb(255, 255, 255) 1.81179px 4.6602px 0px,
    rgb(255, 255, 255) 0.849836px 4.92725px 0px,
    rgb(255, 255, 255) -0.145998px 4.99787px 0px,
    rgb(255, 255, 255) -1.13601px 4.86924px 0px,
    rgb(255, 255, 255) -2.08073px 4.54649px 0px,
    rgb(255, 255, 255) -2.94251px 4.04248px 0px,
    rgb(255, 255, 255) -3.68697px 3.37732px 0px,
    rgb(255, 255, 255) -4.28444px 2.57751px 0px,
    rgb(255, 255, 255) -4.71111px 1.67494px 0px,
    rgb(255, 255, 255) -4.94996px 0.7056px 0px,
    rgb(255, 255, 255) -4.99147px -0.291871px 0px,
    rgb(255, 255, 255) -4.83399px -1.27771px 0px,
    rgb(255, 255, 255) -4.48379px -2.2126px 0px,
    rgb(255, 255, 255) -3.95484px -3.05929px 0px,
    rgb(255, 255, 255) -3.26822px -3.78401px 0px,
    rgb(255, 255, 255) -2.4513px -4.35788px 0px,
    rgb(255, 255, 255) -1.53666px -4.75801px 0px,
    rgb(255, 255, 255) -0.560763px -4.96845px 0px,
    rgb(255, 255, 255) 0.437495px -4.98082px 0px,
    rgb(255, 255, 255) 1.41831px -4.79462px 0px,
    rgb(255, 255, 255) 2.34258px -4.41727px 0px,
    rgb(255, 255, 255) 3.17346px -3.86382px 0px,
    rgb(255, 255, 255) 3.87783px -3.15633px 0px,
    rgb(255, 255, 255) 4.4276px -2.32301px 0px,
    rgb(255, 255, 255) 4.80085px -1.39708px 0px,
    rgb(255, 255, 255) 4.98271px -0.415447px 0px;
}

/* -------------------------------
   5. BLOQUES GANADOR / PERDEDOR
--------------------------------*/
#ganador h2 {
  margin-top: 20px;
}

.perdedor h2 {
  font-size: 42px;
  margin-top: 55px;
}

.perdedor h2 .red {
  font-size: 42px;
  display: block;
  margin-top: 5px;
}

.perdedor h2 .redmin {
  font-size: 56px;
}

.perdedor.margin h2 {
  margin-top: 15px;
}

.perdedor div {
  margin: 25px 0 35px 0;
}

.sorteo .pant02 {
  margin: 20px 0 30px 0;
}

.sorteo .pant02 .bigblue,
.perdedor h2 .bigblue {
  font-size: 56px;
}

.sorteo .ganaste_p {
  font-size: 32px;
}

#section_one .formulario .sorteo .ganaste_p .red {
  font-size: 42px;
}

.sorteo .perdiste_p {
  font-size: 49px;
  line-height: 0.5;
}

#section_one .perdedor02 .sorteo .perdiste_p .red {
  font-size: 66px;
  line-height: 1.2;
}

.sorteo .ganaste #importante h2 {
  font-size: 28px;
}

.ganaste #importante {
  width: 500px;
}

.red-big {
  font-size: 72px;
  display: block;
  margin-top: 5px;
  color: #E21818 !important;
}

/* -------------------------------
   6. FORMULARIOS / DATOS
--------------------------------*/
.formulario input {
  margin-top: 10px;
}

.formulario button {
  margin-top: 40px;
}

.formulario .sorteo h2 {
  margin: 20px 0 0;
  line-height: 0.2;
}

.formulario .sorteo .ganaste_p {
  font-size: 34px;
}

.datos {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px 20px 20px;
  background: transparent;
}

.datos h2 {
  margin: 0;
  padding: 0;
  font-size: 40px;
  line-height: 1.2;
}

/*
.datos h2 span.red_min {
  display: block;
  margin-top: 10px;
  font-size: 25px;
  color: #ffeb31;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, -4px 0px 0 #000, 4px 0px 0 #000, 0px -4px 0 #000, 0px 4px 0 #000, -2px -4px 0 #000, 2px -4px 0 #000, -2px 4px 0 #000, 2px 4px 0 #000;
} */

.datos h2 .red {
  line-height: 80px;
}

.titulo-datos {
  font-size: 40px;
  padding-top: 40px;
}

.premios .red_min {
  font-size: 52px;
  margin-top: 25px;
  display: inline-block;
}


#mensajes h2 {
  font-size: 30px;
}

/* -------------------------------
   7. ELEMENTOS VARIOS
--------------------------------*/
#sorteo img {
  display: inline-block;
}

#section_one .sorteo .min {
  font-size: 49px;
  margin-bottom: 0;
}

.sorteo .importe_ganador h2,
.sorteo .importe_perdedor h2 {
  display: inline-block;
}

.sorteo .importe_ganador h2 .red_max {
  font-size: 125px;
  margin: 0;
  vertical-align: middle;
}

.sorteo .importe_perdedor h2 .red_max {
  font-size: 70px;
  margin: 0;
  vertical-align: middle;
}

.sorteo p .red_min {
  font-size: 51px;
}

.sorteo p .red_min_min {
  font-size: 46px;
}

/* -------------------------------
   8. SECCIONES VISUALES
--------------------------------*/
/* Secciones principales */
#section_one,
#section_two {
  padding: 20px 15px;
}

#section_two {
  background-color: #FFF;
  border-top: solid 2px #cacaca;
}

#section_two .col-md-6 {
  float: none;
}

#section_two ul {
  padding: 0;
}

#section_two ul li {
  display: inline-block;
}

/* Participá */
#participa {
  background-color: white;
  display: inline-block;
  padding: 7px;
  margin: auto;
}

#participa div {
  border: 3px double #A0A0A0;
  padding: 7px;
  margin: auto;
}

#participa p {
  color: #323946;
  font-size: 26px;
  line-height: 1.15;
}

/* Encabezados */
h1 {
  color: #E21818;
}

/* Clases de color */
.red,
.red_min,
.red_min_min,
.red_max {
 font-family: "Varien", sans-serif;
 /*font-weight: bold; */
  color: #000000 !important;
  font-size: 20px;
 /* text-shadow:
    -3px -3px 0 #000,
     3px -3px 0 #000,
    -3px  3px 0 #000,
     3px  3px 0 #000,
    -4px  0px 0 #000,
     4px  0px 0 #000,
     0px -4px 0 #000,
     0px  4px 0 #000,
    -2px -4px 0 #000,
     2px -4px 0 #000,
    -2px  4px 0 #000,
     2px  4px 0 #000; */
}

.red_min_modal {
 font-family: "Varien", sans-serif;
/* font-weight: bold; */
 /* color: #ffdd14 !important; */
color:#000000;
 /* text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    -1px  0px 0 #000,
     1px  0px 0 #000,
     0px -1px 0 #000,
     0px  1px 0 #000; */
}

.blue {
  color: #263590 !important;
  font-size: 38pt;
}


/* -------------------------------
   10. IMPORTANTE Y GANADORES
--------------------------------*/

#ganadores {
  width: 100%;
  display: inline-block;
  margin-left: 2px;
}

/* -------------------------------
   11. BASES 
--------------------------------*/

.bases {
  font-weight: 300;
  font-size: 25px;
  padding-top:20px;
}

/* -------------------------------
   12. PLACEHOLDERS
--------------------------------*/

.mu-subscribe-form input::placeholder,
.mu-subscribe-form input:-ms-input-placeholder,
.mu-subscribe-form input::-webkit-input-placeholder,
.mu-subscribe-form input::-moz-placeholder {
  color: #555555;
}

/* -------------------------------
   13. OTROS COMPONENTES
--------------------------------*/

.tick {
  position: relative;
}

.pregunta {
  position: absolute;
  left: 100%;
  top: 15%;
}

/* Modal */
.modal-header .close {
  opacity: 3;
  font-size: 30px;
}

.modal-header .close .span-close {
  color: #2d5775;
}

/* Pantalla 3 */
#perdedor #importante img {
  display: inline-block;
  margin: 5px 0;
}

#ganaste #importante {
  border: none;
  margin-top: -30px;
}

/* Responsive */
.logomob {
  display: none;
}

/* -------------------------------
   14. PERSONALIZACIONES VARIAS
--------------------------------*/

.sorteo .cont-sucursales {
  margin: 10px 0;
  line-height: 0.5;
  font-weight: 400;
}

.sorteo .doble-chance {
/*   margin-top: 80px;  empuja hacia la franja azul inferior */
 /* margin-bottom: 60px;  deja aire hacia abajo */
}

.imagen-marcas {
  margin-top: 40px; /* Aumenta separación desde el texto superior */
}


.sorteo .cont-sucursales .instr {
  font-weight: 400;
/*  font-size: 50px !important; */
  text-align: center;
 /* margin-bottom:50px; */
}

.sorteo .cont-sucursales .selecciona { 
  /*font-size:20px !important;*/
  text-align: center;
  margin-bottom:30px;
}
/*
.white {
  background-color: #fff;
}
*/

/* -------------------------------
   15. AJUSTES GENERALES
--------------------------------*/

.form-control {
  height: auto;
}

.form-control-data {
  height: auto;
}

.formulario-data {
 padding-top: 60px !important;
}

.modal-content {
  border-radius: 16px !important;
}

.modal-header {
 /* border: 1px solid #000000; */
  background-color: #002972;
  font-size: 25px;
  color:#ffffff;
}

.modal-header .close {
 opacity: 1 !important;
 margin: 0px;
}

.modal-header .close span {
  font-size: 30px;
  color: #ffffff;
}

.modal-body {
    font-size: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.row {
  margin: 0;
}

/*
#importante h2 {
  margin: 8px 0 10px 0;
} */

#loading {
  display: none;
  background-image: url("../img/LANDING/FONDO/backgroundspm.png");
  width: 100%;
  min-height: 100%;
  height: auto !important;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

#loading img {
  width: 670px;
  height: 570px;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -285px;
  margin-right: -335px;
  z-index: 100;
}

.logodesk img {
  max-width: 65px;
}

/* -------------------------------
   16. MEDIA QUERIES (mobile-first)
--------------------------------*/
/* Hasta 539px */
@media (max-width: 539px) {
  .tick {
    position: initial;
  }

  .pregunta {
    position: initial;
    left: 100%;
    top: 15%;
    margin-top: 5px;
  }

  header .pin img {
    width: 80%;
    margin-right: -14px;
    margin-top: 2px;
  }

  .pin {
    position: absolute;
    right: 50%;
    top: 95%;
    margin-right: -45px;
  }
}

/* 539px a 850px */
@media (min-width: 539px) and (max-width: 850px) {
  .pin {
    position: absolute;
    right: 50%;
    top: 92%;
    margin-right: -45px;
  }
}

/* Hasta 767px 
@media (max-width: 767px) {
  #section_one_data {
    background-image: url("../img/LANDING/FONDO/backgroundspm.png");
    background-size: cover; 
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
   }

   .datos h2 {
         font-size: 40px;
   }

  .datos h2 span.red_min {
        font-size: 30px;
        padding-top: 10px;
    }

  #form div, .cont-importante, .cont-ganadores {
    padding-top: 50px;
    width: 95%;
  }
}*/


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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 #section_one {
    background-size: cover; 
    background-position: center top;
    background-repeat: no-repeat;
  }

#section_one_data {
   /* background-image: url("../img/estructuracompleta03.png"); */
    background-image: url("../img/LANDING/FONDO/backgroundspm.png");
    background-size: cover; 
    background-position: center top;
    background-repeat: no-repeat;
   /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
}

#section_one_lc {
    min-height: 100vh;
    display: flex;
    align-items: center;    /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    flex-direction: column; /* Si querés que los hijos estén en columna */
}
 
  #section_one .sorteo .imgganaste {
    display: none;
  }

  .sorteo h2 {
    font-size: 50px !important;
  }

  #section_one,
  #section_two {
    padding: 0px;
  }

   /*  .sorteo img {
    display: inline-block;
    padding-top: 100px;
    padding-bottom: 100px;
  }*/

.sorteo img {
  	display: inline-block;
        padding-top: 20px;
        padding-bottom: 70px;
        width: 1000px;
        height: 800px; 
}

 .sorteo .cont-sucursales .instr {
   /* font-weight: 400;
    font-size: 70px !important;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 10px; */
  }

 .sorteo p .red_min {
    font-size: 60px;
 }

 .bases {
    font-weight: 300;
    font-size: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .datos h2 {
    font-size: 40px;
   /* padding: 10px; */
  }

  .datos h2 span.red_min {
    font-size: 20px;
    padding-top: 10px;
  }

  #form div,
  .ganaste #importante,
  #section_one #importante {
    width: 95%;
  }

 #form div, .cont-importante, .cont-ganadores {
    margin-top: 20px;
    padding-top: 10px;
 }

  h1 {
    font-size: 35px;
  }

  #participa p {
    font-size: 23px;
  }

  .sorteo h2 .red {
    font-size: 50px;
  }

  .sorteo h2 span {
    font-size: 35px;
  }

  .perdedor h2 {
    font-size: 22px;
  }

  .perdedor h2 .red {
    font-size: 38px;
  }

  .perdedor h2 .redmin,
  .perdedor h2 .bigblue {
    font-size: 32px;
  }

}

/* === Ajustes entre 769px y 1055=== */
@media (min-width: 769px) and (max-width: 1055px) {
       html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }	

   .datos {
      padding-top: 50px;
      padding-bottom: 50px;
  }
   .datos h2 {
      font-size: 50px;   
   }

   #section_one_data {
      background-image: url("../img/LANDING/FONDO/backgroundspm.png");
      background-size: auto;
   }

  .datos h2 span.red_min {
            margin-top: 35px;
        font-size: 28px;
   }

   #form div, .cont-importante, .cont-ganadores {
    padding-bottom: 30px;
    padding-top: 30px;
   }
}

/* === Ajustes entre 1056px y 1100px === */
@media (min-width: 1056px) {
  #section_one {
    background-position: top center;
  }

  .imagen-marcas {
    margin-top: 50px !important;
    padding-top: 30px !important;
  }

  .sorteo p .red_min {
    font-size: 60px !important;
  }

  .sorteo .cont-sucursales .selecciona {
    font-size: 40px !important;
    margin-bottom: 30px !important;
  }
}

/* === Ajustes entre 1101 y 1180 === */
@media (min-width: 1101px)  {

    .sorteo p .red_min {
        font-size: 65px !important;
    }

}


/* === Ajustes entre 1250 y 1330 === */
@media (min-width: 1250px) and (max-width: 1330px) {
           html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }	
}

/* ==== FORMULARIO MODERNO FINAL ==== */
/* ===== CONTENEDOR PRINCIPAL DEL FORMULARIO ===== */
#form {
  padding: 20px 20px 60px 20px; /* espacio superior e inferior */
  display: flex;
  justify-content: center;
}

.form-wrapper {
  background: rgba(255, 255, 255, 0.08); /* leve fondo translúcido, opcional */
  border-radius: 25px;
  padding: 50px 60px; /* espaciado interno entre el borde y los inputs */
  max-width: 700px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-wrapper:hover {
  transform: scale(1.01);
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
}

/* ==== PLACEHOLDERS CENTRADOS ==== */
input::placeholder,
select::placeholder,
textarea::placeholder {
  text-align: center;
  color: #666; /* podés usar otro tono si querés más contraste */
  opacity: 1; /* asegura que se vea con claridad */
}

/* Para Safari y Edge (compatibilidad) */
input:-ms-input-placeholder {
  text-align: center;
}
input::-ms-input-placeholder {
  text-align: center;
}

/* -------------------------------
   12. PLACEHOLDERS
--------------------------------*/

.mu-subscribe-form input::placeholder,
.mu-subscribe-form input:-ms-input-placeholder,
.mu-subscribe-form input::-webkit-input-placeholder,
.mu-subscribe-form input::-moz-placeholder {
  color: #555555;
  text-align: center; /* <-- agregado para centrar el texto del placeholder */
}


/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  #form {
    padding: 40px 10px;
  }

  .form-wrapper {
    padding: 30px 20px;
    border-radius: 15px;
  }
}

.form-wrapper.bright {
  background: rgba(255, 255, 255, 0.92);
  padding: 30px 40px;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  margin: 0 auto;
  max-width: 600px;
  color: #222;
}

.modern-label {
  display: block;
  font-size: 18px;
  color: #222;
  font-weight: 600;
  margin-bottom: 6px;
  font-family: 'Rubik', Arial, Helvetica, sans-serif;
  font-weight: 600; /* Semibold */
}

.input-with-icon {
  position: relative;
}

.input-with-icon input,
.input-with-icon select {
  width: 100%;
  padding-left: 42px; /* espacio para el ícono de la izquierda */
  padding-right: 42px; /* espacio para el ícono de pregunta a la derecha */
  border-radius: 18px;
  border: 1px solid #ccc;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  height: 46px;
  box-sizing: border-box;
  color: #000000;
  text-align: center;
}

.input-with-icon input:focus,
.input-with-icon select:focus {
  /*border-color: #fb1818; */
   border-color:#002972;
/*  box-shadow: 0 0 6px rgba(242,131,27,0.5); */
  box-shadow: 0 8px 20px rgb(57 24 251 / 59%);
  outline: none;
}

/* Ícono izquierdo (dentro del input) */
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #002972;
  font-size: 18px;
  pointer-events: none;
}

/* Ícono derecho (fuera del input) */
.icon-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #fb1818;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

.icon-btn:hover {
  color: #fb1818;
  transform: translateY(-50%) scale(1.2);
}

/* Tooltip opcional */
.tooltip-icon[title]:hover::after {
  content: attr(title);
  position: absolute;
  background: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  top: -35px;
  right: 0;
  z-index: 10;
  opacity: 0.9;
}

/* === CONTENEDOR COMPLETO DE LA PREGUNTA === */
.modern-question-block {
  background: #fff;
  border-radius: 16px;
  padding: 20px 25px;
  margin: 25px 0 20px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.modern-question-block:hover,
.modern-question-block:focus-within {
  transform: translateY(-3px);
 /* box-shadow: 0 8px 20px rgba(251, 24, 24, 0.25); */
 /* border-color: rgba(251, 24, 24, 0.2); */
  box-shadow: 0 8px 20px rgb(57 24 251 / 59%);
  border-color: rgb(57 23 253 / 27%);
}

/* ==== PREGUNTA PRINCIPAL DEL FORM ==== */
.modern-question {
  /*color: #111; */
  color: #002972;
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  background: transparent;
  border-radius: 14px;
  padding: 0;
  margin: 0 0 15px 0;
  box-shadow: none;
  border: none;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.radio-options label {
  /*color: #222;*/
  color:#002972;
  background: #f4f4f4;
  border-radius: 12px;
  padding: 10px 18px;
  margin: 5px;
  transition: background 0.3s ease, color 0.3s ease;
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
}

.radio-options label:hover {
 /* background: #fb1818; */
  background: #002972;
  color: #fff;
}

.modern-btn-action {
  background: linear-gradient(90deg, #791d1d, #fb1818); 
 /* background: linear-gradient(90deg, #1c2537, #002972); */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.modern-btn-action:hover {
  background: linear-gradient(90deg, #fb1818, #791d1d); 
/*  background: linear-gradient(90deg, #002972, #1c2537); */
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
  .form-wrapper.bright {
    padding: 20px;
  }
  .modern-label {
    font-size: 16px;
  }
  .modern-btn-action {
    width: 100%;
  }
  .modern-question-block {
    padding: 18px;
    border-radius: 12px;
  }
}


/* ==== BLOQUE DE DATOS (versión título, sin fondo ni sombra externa) ==== */
.modern-datos {
  text-align: center;
  background: none; /* sin fondo */
  border: none;
  box-shadow: none; /* sin sombra de bloque */
  padding: 30px 15px 10px;
  margin: 0 auto 25px auto;
  max-width: 850px;
  transition: transform 0.3s ease;
}

.modern-datos:hover {
  transform: scale(1.02);
}

/* ===== TÍTULO PRINCIPAL ===== */
.modern-datos .titulo-principal {
 /* font-size: 44px; */
  color: #ffffff;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0 0 10px rgba(0,0,0,0.5);
  margin-bottom: 8px;
  line-height: 1.1;
}

/* ===== SUBTÍTULO / TEXTO AMARILLO ===== */
.modern-datos .titulo-premio {
 /* font-size: 26px; */
  color: #ffeb31;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    0 0 10px rgba(0,0,0,0.6);
  margin-bottom: 8px;
}

/* ===== MONTOS ===== */
/* === MONTOS DESTACADOS === */
.montos-destacados {
  font-size: 26px; /* igual al subtítulo */
  color: #ffeb31;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    0 0 10px rgba(0,0,0,0.6);
  text-align: center;
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  transition: transform 0.25s ease, text-shadow 0.25s ease;
}

/* ==== Responsive ==== */
@media (max-width: 768px) {
  .modern-datos {
    padding: 20px 10px;
  }

  .modern-datos .titulo-principal {
   /* font-size: 30px; */
  }

  .modern-datos .titulo-premio {
   /* font-size: 20px; */
  }

  .montos-destacados {
   /* font-size: 20px; */ /* mantiene proporción con el subtítulo en mobile */
    margin-top: 8px;
    margin-bottom: 16px;
  }
}


/* =========================================================
   ESTILO GENERAL INDEX.PHP 
========================================================= */

/* ===== CONTENEDOR GENERAL ===== */
#section_one {
background-image: url("..img/LANDING/FONDO/backgroundspm.png");
  padding: 60px 20px;
  color: #fff;
  text-align: center;
 /* font-family: "Rubik", sans-serif; */
}

/* ===== TÍTULOS ===== */
#section_one h2.instr,
#section_one h2.selecciona {
 /* font-family: "SignPainter", cursive; */
  color: #ffffff;
  font-size: 80px !important;
  line-height: 1.1;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0 0 10px rgba(0,0,0,0.5);
  margin-bottom: 15px;
}

/* ===== IMAGEN DE MARCAS ===== */
.imagen-marcas {
  text-align: center;
  margin: 30px auto 40px;
}

.imagen-marcas img {
  display: inline-block;
  max-width: 90%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.3s ease;
}

/* Hover: efecto flotante y relieve */
.imagen-marcas img:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
  filter: brightness(1.05);
}


/* ===== DOBLE CHANCE ===== */
.doble-chance .convertite {
 /* font-family: "SignPainter", cursive; */
  font-size: 38px;
  color: #ffeb31;
  margin: 0;
  line-height: 1;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    0 0 10px rgba(0,0,0,0.6);
}


/* ===== BOTÓN ===== */
#btSiguiente {
  background: linear-gradient(90deg, #791d1d, #fb1818);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

#btSiguiente img {
  width: 90px;
  height: auto;
}

#btSiguiente:hover {
  background: linear-gradient(90deg, #fb1818, #791d1d);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
} 


/* ===== IMPORTANTE ===== */
.cont-importante h2 {
  /*font-family: "SignPainter", cursive; */
  font-size: 55px;
  color: #ffffff;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    0 0 10px rgba(0,0,0,0.6);
  background-color: #fb1818;
    max-width: 700px;
    padding: 25px 30px;
    margin: 25px auto;
    border-radius: 10px;
}

/* ===== TEXTO GANADORES ===== */
.cont-ganadores p {
  background: linear-gradient(180deg, #fb1818 0%, #791d1d 100%);
  border-radius: 16px;
  padding: 25px 30px;
  margin: 25px auto;
  max-width: 700px;
 /* font-family: "Rubik", sans-serif;*/
  font-size: 25px;
  color: #fff;
  line-height: 1.5;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.cont-ganadores p:hover,
.cont-ganadores p:focus-within {
  transform: translateY(-4px);
  background: linear-gradient(180deg, #791d1d 0%, #fb1818 100%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.2);
}

/* texto interno */
.cont-ganadores p strong,
.cont-ganadores p .red_min {
  color: #fff; /* Cambiado para resaltar sobre el fondo rojo */
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


/* ===== LINK BASES ===== */
.bases a.red_min {
  display: inline-block;
  /*margin-top: 10px;*/
  font-size: 30px;
  color: #ffeb31;
  text-shadow: 2px 2px 0 #000;
  transition: transform 0.2s ease, text-shadow 0.3s ease;
}

.bases a.red_min:hover {
  transform: scale(1.05);
  text-shadow: 3px 3px 0 #000, 0 0 10px #ffeb31;
}

/* form en línea */
#form-sucursales {
  display: flex;
  align-items: center;
  gap: 15px; /* separación entre select y botón */
}

/* select */
#form-sucursales select {
  /*font-family: "Rubik", sans-serif;*/
  font-size: 20px;
  color: #333;
  padding: 12px 18px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #fff;
  min-width: 240px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease;
}

#form-sucursales select:focus {
  border-color: #fb1818;
  box-shadow: 0 0 12px rgba(251, 24, 24, 0.3);
  outline: none;
}

/* botón */
#form-sucursales .button {
  background: linear-gradient(90deg, #791d1d, #fb1818);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

#form-sucursales .button:hover {
  background: linear-gradient(90deg, #fb1818, #791d1d);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
} 


#form-sucursales .button img {
  height: 55px;
  width: auto;
  display: block;
  transition: transform 0.25s ease;
}

#form-sucursales .button:hover img {
  transform: scale(1.08);
}
 
/* responsive */
@media (max-width: 768px) {
  #form-sucursales {
    flex-direction: column;
    gap: 12px;
  }

  #form-sucursales select {
    font-size: 18px;
    min-width: 200px;
  }

  #form-sucursales .button img {
    height: 50px;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  #section_one {
    padding: 40px 10px;
  }
  #form form {
    flex-direction: column;
    gap: 15px;
  }
  #btSiguiente img {
    width: 70px;
  }

  .lc-doble-chance {
    max-width: 450px !important;
  }

   .lc-doble-chance-titulo {
    max-width: 500px !important;
  }


 .lc-img-titulo {
	max-width: 450px !important;
  }
}

/* =========================== */
/* BOTON DE CARGAR OTRO        */
/* =========================== */

.modern-btn-l {
  background: linear-gradient(90deg, #791d1d, #fb1818);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  margin-bottom: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.modern-btn-l:hover {
  background: linear-gradient(90deg, #fb1818, #791d1d);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}


.modern-btn-doble-chance {
  background: linear-gradient(90deg, #791d1d, #fb1818);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  margin-bottom: 50px;
  margin-top: 20px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.modern-btn-doble-chance:hover {
  background: linear-gradient(90deg, #fb1818, #791d1d);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}


.modern-btn-w {
  background: linear-gradient(90deg, #791d1d, #fb1818);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  margin: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.modern-btn-w:hover {
  background: linear-gradient(90deg, #fb1818, #791d1d);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}


/* ======================= */
/* Pantalla de lc.php 	   */
/* ======================= */

.lc-titulo {
   font-family: "Varien", sans-serif;
   font-weight: bold;
   color: #fc0000;
  font-size: 50px;
}


.lc-texto {
  color: #ffffff;
  margin:0px !important;
  padding:0px !important;
}

.lc-doble-chance {
    max-width: 850px;
}

.lc-doble-chance-titulo {
    max-width: 900px;
}


/* ======================= */
/* Pantalla de l.php 	   */
/* ======================= */

.l-texto {
 color: #ffffff;
}

.lc-img-titulo {
    max-width: 850px;
    padding-top: 50px;
}

.lc-img-texto {
    max-width: 850px;
}

/* ======================= */
/* Pantalla de w.php 	   */
/* ======================= */

.w-titulo {
 color: #fc0000;
 background: #fff;
  border-radius: 16px;
  padding: 20px 25px;
  margin: 25px auto 20px auto;
  max-width: 850px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}


.w-titulo:hover,
.w-titulo:focus-within {
  transform: translateY(-3px);
 /* box-shadow: 0 8px 20px rgba(251, 24, 24, 0.25); */
 /* border-color: rgba(251, 24, 24, 0.2); */
  box-shadow: 0 8px 20px rgb(57 24 251 / 59%);
  border-color: rgb(57 23 253 / 27%);
}

.w-comprobantes {
    font-family: "Varien", sans-serif;
    font-weight: bold;
    color: #ffff !important;
    font-size: 38pt;
}


.vigencia {    
      font-family: "Varien", sans-serif;
    font-weight: bold;
  color: #fc0000;
  background: #fff;
  border-radius: 16px;
  padding: 20px 25px;
  margin: 25px auto 50px auto;
  max-width: 850px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.vigencia:hover,
.vigencia:focus-within {
  transform: translateY(-3px);
 /* box-shadow: 0 8px 20px rgba(251, 24, 24, 0.25); */
 /* border-color: rgba(251, 24, 24, 0.2); */
  box-shadow: 0 8px 20px rgb(57 24 251 / 59%);
  border-color: rgb(57 23 253 / 27%);
}