/* PERSONALIZADO */
#whatsapp {
  position: fixed;
  right: 5px;
  bottom: 82px;
  z-index: 5;
  animation: pulseGlow 4s infinite ease-in-out;
}

/* Animación de parpadeo, zoom y brillo */
@keyframes pulseGlow {
  0% {
    transform: scale(1);
    filter: brightness(0.5);
}
50% {
    transform: scale(1.1);
    filter: brightness(1);
}
100% {
    transform: scale(1);
    filter: brightness(0.5);
  }
}


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

body{
    background-color: rgb(240 248 255);
}
a.agenda{
    position: relative;
    justify-content: center;
}
a.agenda:hover{
    justify-content: space-between;
}
a.agenda img, a.btn.secundario img {
    margin-right: 6px;
    background: white;
    border-radius: 9px !important;
    padding: 5px;
    width: 18px !important;
    height: auto !important;
    position: relative !important;
}
a.btn.secundario:has(img){
    display: flex!important;
    align-items: center;
    justify-content: center;
}
a.agenda:hover::after{
    content: '❯';
    right: 10px;
}

header nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
header {
    z-index: 10;
    position: fixed;
    width: 100%;
    top: 0;
    padding: 10px;
    background: #ffffff6b;
    filter: drop-shadow(2px 4px 6px lightgray);
    backdrop-filter: blur(8px);
}
ul.redesSociales {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

h2{
    color: var(--azulMarca);
}

.redesSociales a {
    display: flex;
    align-items: center;
    border-radius: 50%;
    padding: 5px;
}
.redesSociales a:hover {
    background-color: var(--azulMarca);
}
header .logo:hover {
    filter: none;
}


#hero img{
    border-radius: 20px;
}

#hero {
    gap: 20px;
    max-width: 100%;
    padding: 20px 20px 0px;
    transform: none!important;
    opacity: 1!important;
}

/* === ESTILOS COMUNES === */
#hero img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* === HERO 1 === */
#hero .hero1 {
    width: 100%;
    height: auto;
    grid-row: 1;
    grid-column: 1 / 5;
}

/* === HERO 2 === */
#hero .hero2 {
    width: 100%;
    grid-row: 1;
    grid-column: 5 / 9;
    z-index: 2;
}
#hero .hero2 img {
    position: absolute;
    z-index: 0;
}

/* === HERO 3 === */
#hero .hero3 {
    height: 300px;
    grid-row: 2;
    grid-column: 1 / 6;
}
#hero .hero3 img {
    height: 300px;
    position: absolute;
    z-index: 0;
}

/* === HERO 4 === */
#hero .hero4 {
    width: 100%;
    height: 620px;
    position: relative;
    grid-row: 1 / 3;
    grid-column: 6 / 12;
    z-index: 1;
}


#hero .hero1, #hero .hero2, #hero .hero3, #hero .hero4{
    border-radius: 20px;
}
#hero .hero3 figcaption, #hero .hero2 figcaption{
    z-index: 2;
}

#hero .hero3::after, #hero .hero2::after{
    content: "";
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #0000008a;
    border-radius: 20px;
}

#hero figcaption p{
    margin-bottom: 10px;
}
#hero figcaption {
    color: white;
    border-radius: 20px;
    margin: auto;
    width: 89%;
    padding: 15px;
    display: flex;
    margin-top: 40px;
    flex-direction: column;
    gap: 10px;
}

@media (max-width:768px){
    #hero .hero3 {
        width: 100%;
    }
}
@media (min-width:670px){
    #seguros .card figcaption {
        min-height: 180px;
    }
    #seguros h3 {font-size: 20px;}
    #seguros p {font-size: 13px;}
    
    #seguros .card {align-items: center;    text-align: justify;flex-direction: column;}
    #hero .hero2 {outline: rgb(240 248 255) 20px solid;}
    #hero {display: grid;}
    #hero .hero2 img, #hero .hero2 {height: 300px;}
}
@media (max-width:670px){
    #seguros .card figcaption {
        min-height: 245px;
    }
    #seguros h2 {
        font-size: 30px;
    }
    #seguros .card {
        flex-direction: column;
        margin: auto;
        width: auto !important;
    }
    header nav{
        gap: 10px 20px;
    }
    ul.redesSociales{order: 2;}
    #hero .hero2 img, #hero .hero2 {height: 500px;}
    #hero {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
}

@media (min-width:479px){
    #main-content{
        margin-top: 90px;
    }
}
@media (max-width:479px){
    #main-content{
        margin-top: 115px;
    }
}



#seguros article {
    width: auto;
    display: flex;
    align-items: baseline;
    gap: 30px;
    text-align: center;
    margin: auto;
    max-width: 960px;
    overflow-x: scroll;
    padding: 30px 15px;
}

#seguros .card {
    padding: 25px;
    border-radius: 20px;
    height: auto;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    text-align: center;
}
#seguros img {
    display: block;
    object-fit: cover;
}

#seguros div{
    overflow: hidden;
    border-radius: 20px;
    filter: drop-shadow(0px 2px 2px var(--verdeMarca));
    width: fit-content;
    margin: auto;
}

#seguros img:hover{
    scale: 1.1;
}

#seguros .card:hover div{
    filter: drop-shadow(0px 2px 2px var(--azulMarca));
}
h3 {
    margin: 12px 0px;
    color: var(--azulMarca);
    font-weight: 800;
}

#formulario form{
    filter: drop-shadow(0px 2px 2px var(--azulMarca));
}

#formulario form:hover{
    filter: drop-shadow(0px 2px 2px var(--verdeMarca));
}
#proteccion{
    width: 100%;
    max-width: 1920px;
    background-image: url(/assets/images/tranquilidad.webp);
    background-size: cover;
    background-attachment: fixed;
    transform: none;
    animation: none;
    opacity: inherit;
}
#reviews, section h2 {
    transform: none !important;
    opacity: 1 !important;
}
@media (min-width:768px){
    #proteccion{
        background-position: center;
    }
    #reviews article{
        gap: 100px;
    }
    #proteccion{
        height: 400px;
    }
}

@media (min-width:768px){
    header a.agenda, #proteccion a.agenda, #agente a{
        padding: 12px 17px;
    }
    #agente p{
        text-align: justify;
    }
    #agente p strong{
        font-size: 25px;
    }
}
@media (max-width:768px){
    #agente h2{
        text-align: center!important;
    }
    #proteccion{
        background-position: left;
    }
    header img.logo {
        transform: scale(0.7);
    }
    header a.agenda, #proteccion a.agenda, #agente a{
        padding: 10px 15px;
    }
    #header-container a:has(.logo) {
        padding: 0px;
        display: flex;
    }
    #faqs details{
        width: 100%;
    }
    #agente{
        flex-wrap: wrap;
    }
    #reviews article{
        gap: 40px;
    }
    #reviews figure {
        flex-direction: column;
    }
    #proteccion{
        height: 650px;
    }
}

#proteccion {
    display: flex;
    align-items: center;
    justify-content: center;
}
#proteccion::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #00000069;
    z-index: 0;
}
#proteccion a.agenda {
    margin: auto;
    z-index: 2;
    transform: scale(1.5);
}
#proteccion h2{
color: white;
}

#reviews article{
    padding: 20px 10px;
}



#reviews article{
    display: flex;
}
#reviews figure{
    padding: 25px;
    width: fit-content;
    display: flex;
    gap: 20px;
    align-items: center;
}
#reviews figure, #reviews figure:hover img{
    border-radius: 10px;
    background-color: aliceblue;
    border: var(--verdeMarca) 3px solid;
    filter: drop-shadow(2px 4px 4px var(--azulMarca));
}
#reviews figure:hover img{
    height: 300px;
}
#reviews figcaption{
    min-height: 300px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
#reviews figure:hover, #reviews img{
    background-color: rgb(250, 254, 255);
    border: var(--azulMarca) 3px solid;
    filter: drop-shadow(2px 4px 4px var(--verdeMarca));
}
#reviews img {
    display: block;
    margin: auto;
    object-fit: cover;
}
h3.servicio{
    font-size: 20px;
}
.stars{
    color: var(--azulMarca);
    font-size: 20px;
    letter-spacing: 5px;
    line-height: normal;
}
#reviews figure:hover .stars{
    color: var(--verdeMarca);
}
.perfil p {
    font-weight: 700;
    margin: 6px 10px;
}
#reviews img, #reviews figcaption{
    width: 290px;
    transition: 2s;
}
#formulario button:hover{
    background-color: var(--verdeMarca);
    color: white;
}
#formulario .mitad{
    flex: 1;
}

#formulario .completo{
    width: 100%;
}

#formulario div{
    display: flex;
    flex-direction: column;
}

#agente{
    display: flex;
    gap: 40px;
    justify-content: center;
    max-width: 900px;
}

#agente h2{
    font-size: 36px;
    text-align: start;
}

#agente h3{
    font-size: 18px;
}

#agente div{
    border-radius: 40px;
    border: 2px solid var(--verdeMarca);
    height: 408px;
}
#agente div:hover{
    filter: drop-shadow(2px 2px 2px var(--azulMarca));
}
#agente div:hover img{
    scale: 1.05;
}
#agente img{
    object-fit: cover;
    border-radius: 40px;
}
#agente a{
    margin-top: 20px;
}

#faqs .preguntas{
    border-radius: 10px;
    padding: 20px;
    outline: 2px solid var(--verdeMarca);
    filter: drop-shadow(2px 2px 4px var(--azulMarca));
    background-color: aliceblue;
    display: flex;
    gap: 15px;
    max-width: 1000px;
    margin: auto;
    flex-wrap: wrap;
}
#faqs summary {
    background: var(--azulMarca);
    padding: 10px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: 4s;
}
#faqs summary:hover{
    outline: solid 2px;
    scale: 0.97;
    transition: 0.5s;
}
#faqs summary:focus{
    outline: solid 2px;
    scale: 1.05;
}
#faqs summary span{
    font-weight: 700;
}
#faqs p {
    padding: 15px 3%;
    margin-top: 5px;
    text-align: justify;
    background: var(--verdeMarca);
    border-radius: 5px;
    color: white;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#faqs details {
    filter: drop-shadow(2px 3px 3px black);
}

@media (min-width:768px){
    #faqs details{
        width: 48%;
    }
}

.imagen-footer-top {
    object-fit: contain;
    height: fit-content;
    width: 100%;
}
.imagen-footer-top:hover{
    transform: none;
}
footer nav{
    background-color: var(--azulMarca);
}

footer *{
    color: var(--grisBajo);
    display: block;
    text-align: center;
}

footer small{
    padding: 20px;
    background-color: black;
}

footer .politicas a {
    width: fit-content;
    margin: auto;
    padding: 15px;
}

.logo-footer img {
    margin: auto;
}


#reviews article::-webkit-scrollbar, #seguros article::-webkit-scrollbar {
    height: 8px;
}

#reviews article::-webkit-scrollbar-thumb, #seguros article::-webkit-scrollbar-thumb {
    background-color: var(--verdeMarca);
    border-radius: 10px;
}
#reviews article::-webkit-scrollbar-track, #seguros article::-webkit-scrollbar-track {
    background: var(--azulMarca);
    border-radius: 10px;
}





/* MAIN */
a.btn, button, a.agenda{
    color: white;
    background-color: var(--azulMarca);
    outline:2px solid var(--azulMarca);
    position: relative;
    position: relative;
    align-items: center;
}
a.agenda{
    border-radius: 5px;
    width: 180px;
    display: flex;
}
a.btn:hover, button:hover, a.agenda:hover{
    background-color: white;
    cursor: pointer;
    color: var(--azulMarca);
}

a.btn.secundario, button.secundario{
    background-color: var(--azulMarca);
    color: white;
    outline: 2px solid var(--azulMarca);
    display: block;
}
a.btn.secundario:hover, button.secundario:hover{
    background-color: white;
    color: var(--verdeMarca);
}

button:disabled, button.secundario:disabled, button.secundario:disabled:hover, button:disabled:hover,
a.deshabilitado, a.btn.deshabilitado.secundario, a.deshabilitado:hover, a.btn.secundario.deshabilitado:hover{
    background-color: var(--gris);
    color: var(--grisBajo);
    border: none;
}
button:disabled, button.secundario:disabled, button.secundario:disabled:hover, button:disabled:hover,
a.deshabilitado, a.btn.deshabilitado.secundario, a.deshabilitado:hover, a.btn.secundario.deshabilitado:hover, input:disabled, textarea:disabled, select:disabled, label.disabled{
    cursor: no-drop;
}
label, input, textarea, select, option{
    color: var(--azulMarca);
}
input, textarea, select, #formulario details{
    border-color: var(--negroFuerte);
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
}

input:focus, textarea:focus, select:focus{
    background-color: var(--azulAlert2);
    outline-color: var(--azulAlert1);
    border: 1px var(--azulAlert1);
    outline-width: 1px;
    outline-style: solid;
}

input:hover, textarea:hover, select:hover{
    border: 1px var(--azulMarca);
    outline-color: var(--azulMarca);
    outline-width: 2px;
    outline-style: solid;
    transition: 0s;
}
input:disabled, textarea:disabled, select:disabled,
input:disabled:hover, textarea:disabled:hover, select:disabled:hover{
    background-color: var(--grisBajo);
    outline-color: var(--gris);
    border: 1px var(--gris);
    color: var(--gris);
    outline-width: 1px;
    outline-style: solid;
}
label.disabled{
    color: var(--gris);
}

::placeholder{
    color:var(--gris)
}

.card {
    background: white;
    filter: drop-shadow(0px 2px 2px var(--azulMarca));
}
.card:hover {
background: white;
    filter: drop-shadow(0px 2px 2px var(--verdeMarca));
}
form.enviado input:valid, form.enviado select:valid, form.enviado textarea:valid {
    border: 2px solid var(--verdeFuerte);
    background-color: var(--verdeBajo);
}

form.enviado input:invalid, form.enviado select:invalid, form.enviado textarea:invalid {
    border: 2px solid var(--rojoFuerte);
    background-color: var(--rojoBajo);
}

/*   OK OK OK OK OK OK OK OK OK OK OK OK OK   */







/* 🎨 ROJO */
.BGRojoFuerte { background-color: var(--rojoFuerte); }
.BGRojoBajo { background-color: var(--rojoBajo); }
.CRojoFuerte { color: var(--rojoFuerte); }
.CRojoBajo { color: var(--rojoBajo); }


/* 🎨 AZUL */
.BGAzulMarca { background-color: var(--azulMarca); }
.CAzulMarca { color: var(--azulMarca); }

/* 🎨 AZUL */
.BGVerdeMarca { background-color: var(--verdeMarca); }
.CVerdeMarca { color: var(--verdeMarca); }


/* 🎨 GRIS */
.BGGris { background-color: var(--gris); }
.BGGrisBajo { background-color: var(--grisBajo); }
.CGris { color: var(--gris); }
.CGrisBajo { color: var(--grisBajo); }

/* 🎨 NEGRO */
.BGNegroFuerte { background-color: var(--negroFuerte); }
.BGNegroBajo { background-color: var(--negroBajo); }
.CNegroFuerte { color: var(--negroFuerte); }
.CNegroBajo { color: var(--negroBajo); }

/* 🎨 AZUL ALERTA */
.BGAzulAlert1 { background-color: var(--azulAlert1); }
.BGAzulAlert2 { background-color: var(--azulAlert2); }
.CAzulAlert1 { color: var(--azulAlert1); }
.CAzulAlert2 { color: var(--azulAlert2); }

/* 🎨 VERDE */
.BGVerdeFuerte { background-color: var(--verdeFuerte); }
.BGVerdeBajo { background-color: var(--verdeBajo); }
.CVerdeFuerte { color: var(--verdeFuerte); }
.CVerdeBajo { color: var(--verdeBajo); }

/* 🎨 AMARILLO */
.BGAmarilloFuerte { background-color: var(--amarilloFuerte); }
.BGAmarilloBajo { background-color: var(--amarilloBajo); }
.CAmarilloFuerte { color: var(--amarilloFuerte); }
.CAmarilloBajo { color: var(--amarilloBajo); }

/* 🎨 NARANJA */
.BGNaranjaFuerte { background-color: var(--naranjaFuerte); }
.BGNaranjaBajo { background-color: var(--naranjaBajo); }
.CNaranjaFuerte { color: var(--naranjaFuerte); }
.CNaranjaBajo { color: var(--naranjaBajo); }


.CBlanco{
    color: white;
}

:root{
  --rojoFuerte: #f70000;
  --rojoBajo: #ffe8e7;

  --azulMarca: #1367a6;
  --verdeMarca: #6ca53c;

  --gris: #A8A8A9;
  --grisBajo: #F1F1F1;
  
  --negroFuerte: #000000;
  --negroBajo: #231F20;

  --azulAlert1: #005080;
  --azulAlert2: #e9f4ff;

  --verdeFuerte: #005531;
  --verdeBajo: #c1ffe0;

  --amarilloFuerte: #ffec00;
  --amarilloBajo: #fffad8;
  --naranjaFuerte: #ffba00;
  --naranjaBajo: #fff1e1;
}

body{
    color: var(--negroBajo);
}

*{
    font-family: "Montserrat", sans-serif;
    line-height: normal;
    font-weight: 400;
    padding: 0px;
    margin: 0px;
    position: relative;
    transition: 0.5s;
    text-decoration: none;
    font-size: 16px;
}

*:hover{
    transition: 0.5s;
}


li::marker{
  content: none;
}



/* ANIMACIONES */

/* Animación máquina de escribir */
@keyframes typewriterBanner {
  from { width: 0; white-space: nowrap;display: inline-block;overflow: hidden;}
  to { width: 100%; white-space: nowrap;display: inline-block;overflow: hidden;}
}

@keyframes blinkCaretBanner {
  0%, 100% { border-color: transparent; }
  50% { border-color: transparent; }
}

/* Efecto para textos 
#convierteteDistribuidor h1  {
  white-space: wrap;
  border-right: 2px solid transparent;
  animation:
    typewriterBanner 2.5s steps(30, end),
    blinkCaretBanner 0.7s step-end infinite;
}*/

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

#convierteteDistribuidor *, #distribuidorOficial *, #thankyou * {
  opacity: 0;
  animation: aparecerDesdeAbajoBanner 0.8s ease-out forwards;
}

/* Puedes hacer que los elementos aparezcan en cascada: */
h1 { animation-delay: 0.2s; }
h2 { animation-delay: 0.4s; }
h3 { animation-delay: 0.6s; }
p  { animation-delay: 0.8s; }






/* Máquina de escribir */
@keyframes typewriter {
  0% {
    width: 0;display: inline-block;overflow: hidden;white-space: nowrap;
  }
  99% {
    width: 100%;display: inline-block;overflow: hidden;white-space: wrap;
  }
  100% {
    width: 100%;display: inline-block;overflow: hidden;white-space: nowrap;
  }
}

@keyframes blinkCaret {
  0%, 100% { border-color: transparent; }
  50% { border-color: transparent; }
}

/* Fade desde abajo (mejorado con escala como mencionaste) */
@keyframes aparecerDesdeAbajo {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.4);
  }
  to {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

/* Fade desde abajo con scroll */
section h2, section h3, section h4, section p, section li, section span, section label {
  opacity: 0;
  transform: translateY(50px) scale(0.4);

  animation-name: aparecerDesdeAbajo;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;

  /* Scroll trigger */
  view-timeline-name: --reveal-timeline;
  view-timeline-axis: block;
  animation-timeline: --reveal-timeline;
  animation-range: entry 10% cover 20%;
}




@keyframes imagenDesdeAbajo {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

section img {
  opacity: 0;
  transform: translateY(50px) scale(0.8);

  animation-name: imagenDesdeAbajo;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;

  /* Scroll trigger */
  view-timeline-name: --timelineImagenes;
  view-timeline-axis: block;
  animation-timeline: --timelineImagenes;
  animation-range: entry 5% cover 10%;
}

section, summary {
  opacity: 0.7;
  transform: translateY(20px) scale(0.5);

  animation-name: imagenDesdeAbajo;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;

  /* Scroll trigger */
  view-timeline-name: --timelineImagenes;
  view-timeline-axis: block;
  animation-timeline: --timelineImagenes;
  animation-range: entry 5% cover 10%;
}


/* BASE */


/* Para activar los font size pasando los 1200px se ajusta su valor mayor, y se unan las media queries para ajustar tamaños reales en mobile
y desktop */

strong{font-weight: 700;}
#formulario form {
    max-width: 690px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: auto;
    background: white;
    padding: 10px;
    border-radius: 12px;
}
#formulario button {
    width: 150px;
}
#formulario .terminos {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#formulario .terminos a {
    width: auto;
    padding: 3px 6px;
    font-size: 12px;
    background: black;
    color: white;
    align-items: center;
    line-height: normal;
    border-radius: 5px;
}

#formulario form .normal, #formulario .seleccion {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#formulario details div {
    display: flex;
    flex-direction: column;
}

button{
    width: fit-content;}
a.btn, button, label, input, textarea, select, a, .seleccion p, .seleccion details{
    padding: 10px;
}
textarea{
    margin-top: 7px;
}
input, select{
    margin-top: 5px;
}
a.btn, button{
    text-align: center;
    border-radius: 15px;
    border: 0px;
}

.fontSizeDesk80Mob36, .fontSizeDesk48Mob32, .fontSizeDesk48Mob28, .fontSizeDesk36Mob28, .fontSizeDesk30Mob24, .fontSizeDesk48Mob48, .fontSizeDesk36Mob36, 
.fontSizeDesk36Mob32, .fontSizeDesk30Mob28, h1, h2, h3, h4 {
  font-weight: bold;
}

#thankyou article {
  max-width: 1000px;
  margin: auto;
}


h2 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
}

body#gracias{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
section.banner{
  padding: 0px;
  margin: 0px;
}

section{
    max-width: 1440px;
}

@media (min-width:768px){
  #thankyou{
    padding-top: 40px;
    padding-bottom: 40px;
  }
    section{
        margin: 80px auto;
        padding: 0px 48px;
    }
}

@media (max-width:768px){
    section{
        margin: 60px 24px;
        padding: 0px;
    }
}

@media (max-width:768px){

}


.textCenter{text-align: center;}
.displayFlex{
  display: flex;
}
#textoGracias {
    max-width: 80%;
    margin: 40px auto;
}

#thankyou .home {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
}
#thankyou {
  max-width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}
header img:hover, footer img:hover, footer .politicas a:hover {
        transform: scale(1.05);
        filter: drop-shadow(0px 0px 3px gray);
    }
#tituloGracias {
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 50px;
}
#thankyou hr {
    border-width: 4px;
    border-style: solid;
    width: 80%;
    margin: auto;
}
#textoGracias {
    font-size: 35px;
}


/* Estilos MOBILE */
@media (max-width:768px) {
    #thankyou{
    padding:24px;
  }
    #formulario form .normal, #formulario .seleccion {
    width: 100%;}
    .textCenterMob{text-align: center;}
}

#politicas {
    padding: 48px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    max-width: 100%;
    margin: auto;
}
#politicas li {
    padding-left: 20px;
    margin-bottom: 8px;
}
#politicas h1{
  font-size: 48px;
  margin-bottom: 48px;
  text-align: center;
}

#politicas h2{
  font-size: 32px;
  margin: 40px 10px;
}
#politicas p{
  text-align: justify;
  margin-bottom: 25px;
}
#politicas article{
  margin-bottom: 48px;
}
#politicas a.btn{
  display: block;
  margin: auto;
}