/*=========================
RESET
=========================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
background:#FAFBFC;
color:#1F2937;
line-height:1.8;

}

/*=========================
VARIABLES
=========================*/

:root{

--primary:#299bad;
--primary-hover:#256B5B;

--text:#1F2937;
--text-light:#6B7280;

--background:#FAFBFC;

--white:#FFFFFF;

--shadow:0 10px 30px rgba(0,0,0,.08);

--radius:18px;

}

/*=========================
CONTAINER
=========================*/

.container{

width:90%;
max-width:1100px;
margin:auto;

}

/*=========================
HEADER
=========================*/

header{

background:#FFFFFF;
border-bottom:1px solid #ECECEC;
padding:24px 0;

}

.logo{

font-size:28px;
font-weight:700;
text-decoration:none;
color:var(--primary);

}

.logo span{

color:#299bad;

}

/*=========================
HERO
=========================*/

.hero{

padding:90px 0 60px;
text-align:center;

}

.hero h1{

font-size:3rem;
margin-bottom:20px;
font-weight:700;

}

.subtitle{

max-width:850px;
margin:auto;
font-size:1.1rem;
color:var(--text-light);

}

/*=========================
CONTENT
=========================*/

.cookies{

padding-bottom:100px;

}

article{

background:var(--white);
padding:40px;
margin-bottom:30px;
border-radius:var(--radius);
box-shadow:var(--shadow);

}

article h2{

margin-bottom:18px;
color:var(--primary);
font-size:1.55rem;

}

article p{

margin-bottom:18px;
color:var(--text-light);

}

article ul{

padding-left:25px;

}

article li{

margin-bottom:12px;
color:var(--text-light);

}

article strong{

color:var(--text);

}

/*=========================
FOOTER
=========================*/

footer{

background:#FFFFFF;
border-top:1px solid #ECECEC;
padding:30px 0;
text-align:center;
color:#6B7280;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:768px){

.hero{

padding:70px 0 40px;

}

.hero h1{

font-size:2.2rem;

}

.subtitle{

font-size:1rem;

}

article{

padding:28px;

}

article h2{

font-size:1.35rem;

}

}
/* ==========================================================
            MODO OSCURO — POLÍTICA DE COOKIES
========================================================== */

body.dark-mode {

    background: #000000;
    color: #ffffff;

}


/* Header */

body.dark-mode header {

    background: #000000;

    border-color: #2a2a2a;

}


/* Logo */

body.dark-mode .logo {

    color: #ffffff;

}

body.dark-mode .logo span {

    color: #63B39F;

}


/* Hero */

body.dark-mode .hero {

    background: #000000;

}

body.dark-mode .hero h1 {

    color: #ffffff;

}

body.dark-mode .subtitle {

    color: #d1d1d1;

}


/* Contenido */

body.dark-mode .cookies {

    background: #000000;

}

body.dark-mode article {

    background: #111111;

    box-shadow: 0 10px 30px rgba(0,0,0,.35);

}


/* Títulos */

body.dark-mode article h2 {

    color: #2E7D6B;

}


/* Textos */

body.dark-mode article p,
body.dark-mode article li {

    color: #d1d1d1;

}

body.dark-mode article strong {

    color: #ffffff;

}


/* Footer */

body.dark-mode footer {

    background: #000000;

    border-color: #2a2a2a;

    color: #bdbdbd;

}
/* ==========================================================
                BOTÓN MODO OSCURO
========================================================== */

.theme-toggle {

    width: 42px;
    height: 42px;

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

    padding: 0;

    border: 1px solid #d9e3e0;
    border-radius: 50%;

    background-color: #ffffff;
    color: #287f70;

    cursor: pointer;

    font-size: 16px;

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .2s ease;

}

.theme-toggle:hover {

    background-color: #e8f4f1;

    transform: translateY(-2px);

}

.theme-toggle:active {

    transform: scale(.94);

}

body.dark-mode .theme-toggle {

    background-color: #111111;

    border-color: #333333;

    color: #f5d76e;

}

body.dark-mode .theme-toggle:hover {

    background-color: #1c1c1c;

}

/* ==========================================================
            POSICIÓN DEL BOTÓN MODO OSCURO
========================================================== */

.theme-toggle {

    position: fixed;

    top: 25px;
    right: 25px;

    z-index: 9999;

}
.theme-icon {

    display: flex;

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

    font-size: 18px;

    line-height: 1;

}