/*
Theme Name: erase_una_vez
Theme URI: https://muchoscuentos.com
Author: Ibai Moneo
Author URI: https://muchoscuentos.com
Description: Tema personalizado del sitio de cuentos infantiles 
'www.muchoscuentos.com' dedicado a la educación y diversión de los 
menores sin importar estatus social, origen, sexo, color de piel...
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erase_una_vez
*/
/* Custom Theme Styles for erase_una_vez - newsletter.css */
.newsletter, 
.newsletter h2,
.newsletter h3 {
    font-family: 'Verdana', Arial, sans-serif;
    letter-spacing: var(--sans-spacing);
    line-height: 1.5; 
}
.newsletter {
    padding: 2dvw 2dvw 0;
    outline: .003em ridge darkturquoise;
    border-radius: .5em;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.newsletter__input {
    width: 80%;
    margin: .6em auto 0;
    padding: .3em 0 .3em .5em;
    color: #000 ;
    outline: .15em ridge indigo;
    border: .04em solid darkturquoise;
    border-radius: .5em;
}
.newsletter__check {
    display:none;
}
.newsletter__checkmark {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    background: white;
    border: .001em solid darkturquoise;
    border-radius: 100%;
    transition: all .5s;
    margin-left: 1.5em;
}
.newsletter__accept {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .1em; 
}
.newsletter__checkmark:after {
    content: "";
    position: absolute;
    border: .001em solid darkturquoise;
    border-width: 0 .18em .18em 0;
    transform: rotate(45deg);
    width: .15em;
    height: .3em;
    inset: 0;
    margin: auto;
    opacity: 0;
    transition: .3s ease;
}
.newsletter__accept 
.newsletter__check:checked ~.newsletter__checkmark:after {
    opacity: 1;
}
/* Estilo para el mensaje */
#brevo-message {
    margin-top: 1em;
    padding: .6em;
    border-radius: .24em;
    display: none;
}
#brevo-message.success {
    background-color: #e6ffea;
    border: 1px solid #a8e6b5;
    color: #2e7d32;
}
#brevo-message.error {
    background-color: #ffebee;
    border: .06em solid #ffcdd2;
    color: #c62828;
}
/* Tamaños de fuente */
.newsletter__accept,
.newsletter__accept a {
    font-size: var(--fp);
}
.newsletter h2 {
    font-size: var(--pabc);
    font-weight: 600; 
}
.newsletter h3,
.newsletter__input {
    font-size: var(--vp);
    font-weight: 500; 
}
.newsletter__enterate {
    text-wrap: pretty;
    hyphens: auto;
}