/*
Theme Name: El Rincon de Shiwa Premium
Version: 3.0
*/

:root{
  --morado:#12051f;
  --morado2:#1f0933;
  --dorado:#d4af37;
  --blanco:#f7f4ef;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:var(--morado);
  color:var(--blanco);
  font-family:'Cormorant Garamond',serif;
}

a{
  text-decoration:none;
}

.container{
  max-width:1400px;
  margin:auto;
}

.site-header{
  background:#12051f;
  border-bottom:1px solid rgba(212,175,55,.2);
  padding:15px 40px;
}

.site-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo img{
  height:100px;
  width:auto;
}

nav a{
  margin-left:30px;
  color:#D4AF37;
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;
  letter-spacing:2px;
}

.hero{
  min-height:750px;

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

  text-align:center;

  background:
  linear-gradient(
    rgba(20,10,40,.70),
    rgba(20,10,40,.70)
  ),
  url('https://elrincondeshiwa.es/wp-content/uploads/2026/06/pexels-jonnylew-1121123-scaled.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero-overlay{
  background:rgba(15,5,35,.70);
  backdrop-filter:blur(5px);

  padding:80px;
  border-radius:20px;

  border:1px solid rgba(212,175,55,.3);
}

.hero h1{
  font-family:'Alex Brush',cursive !important;
  font-size:5rem;
  color:#D4AF37;
  margin-bottom:25px;
}

.hero p{
  color:#D4AF37;
  letter-spacing:6px;
  text-transform:uppercase;
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;
}

.btn-shiwa{
  display:inline-block;

  margin-top:35px;

  background:#D4AF37;
  color:#000;

  padding:15px 40px;

  border-radius:8px;

  font-weight:bold;
}

.features{
  background:#160724;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:40px;

  padding:80px;
}

.feature{
  text-align:center;
}

.feature h3{
  color:#D4AF37;
  margin:15px 0;
  font-size:2rem;
}

.feature p{
  color:#ddd;
}

footer{
  text-align:center;
  padding:40px;
  background:#0c0415;
}

.slider{

position:relative;

width:100%;
max-width:1200px;

margin:0 auto 40px auto;

height:600px;

overflow:hidden;

border-radius:20px;

border:1px solid rgba(212,175,55,.3);

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

}

.slide{

position:absolute;

width:100%;
height:100%;

object-fit:contain;
background:#12051f;

opacity:0;

transition:opacity 1s ease;

}

.slide.active{

opacity:1;

}

.hero-overlay{

max-width:1100px;

}

.hero h1{

margin-top:30px;

font-size:4rem !important;

}


.slide{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    opacity:0 !important;
    transition:opacity 1s ease !important;
}

.slide.active{
    opacity:1 !important;
}

.slider{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    background:#12051f !important;
}


@media (max-width: 768px){

.site-header .container{
    flex-direction:column;
    gap:15px;
}

.logo img{
    height:70px;
}

nav{
    text-align:center;
}

nav a{
    margin:0 10px;
    font-size:1rem;
}

.hero{
    min-height:auto;
    padding:20px;
}

.hero-overlay{
    width:100%;
    padding:20px;
}

.slider{
    width:100%;
    max-width:100%;
    height:350px;
}

.hero h1{
    font-size:2.8rem !important;
    text-align:center;
}

.hero p{
    font-size:1rem;
    letter-spacing:2px;
}

.features{
    grid-template-columns:1fr;
    padding:40px 20px;
}

}



/* Página Sobre Mi */

.sobre-mi{
    max-width:1100px;
    margin:80px auto;
    padding:50px;
    background:rgba(31,9,51,.4);
    border:1px solid rgba(212,175,55,.25);
    border-radius:20px;
    box-shadow:0 0 20px rgba(0,0,0,.4);
}

.sobre-mi h1{
    text-align:center;
    color:#D4AF37;
    margin-bottom:40px;
    font-family:'Alex Brush',cursive;
    font-size:4rem;
    font-weight:normal;
}

.sobre-mi h2{
    color:#D4AF37;
    margin-top:50px;
    margin-bottom:20px;
    font-family:'Cormorant Garamond',serif;
    font-size:2.2rem;
    letter-spacing:1px;
}

.sobre-mi p{
    line-height:2;
    margin-bottom:25px;
    font-family:'Cormorant Garamond',serif;
    font-size:1.1rem;
    color:#f7f4ef;
}

@media (max-width:768px){

    .sobre-mi{
        padding:25px;
        margin:30px 15px;
    }

    .sobre-mi h1{
        font-size:2.8rem;
    }

    .sobre-mi h2{
        font-size:1.8rem;
    }

    .sobre-mi p{
        font-size:1rem;
    }
}


/* Forzar Alex Brush en toda la página Sobre Mi */

.sobre-mi,
.sobre-mi h1,
.sobre-mi h2,
.sobre-mi h3,
.sobre-mi p,
.sobre-mi li,
.sobre-mi span,
.sobre-mi div{
    font-family:'Alex Brush',cursive !important;
}

.sobre-mi p{
    font-size:2rem !important;
    line-height:1.8 !important;
}

.sobre-mi h2{
    font-size:3rem !important;
}


.contacto-form{
    max-width:800px;
    margin:40px auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contacto-form label{
    font-family:'Alex Brush',cursive;
    font-size:2rem;
    color:#D4AF37;
}

.contacto-form input,
.contacto-form textarea{
    padding:15px;
    border-radius:10px;
    border:1px solid rgba(212,175,55,.4);
    background:#1f0933;
    color:#fff;
    font-size:1.1rem;
}

.contacto-form button{
    background:#D4AF37;
    color:#000;
    border:none;
    padding:15px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
}

.mensaje-ok{
    max-width:800px;
    margin:30px auto;
    text-align:center;
    color:#D4AF37;
    font-size:2rem;
    font-family:'Alex Brush',cursive;
}


/* BLOG PORTADA */

.blog-home{
    padding:80px 40px;
    background:#12051f;
    text-align:center;
}

.blog-home h2{
    font-family:'Alex Brush',cursive !important;
    color:#D4AF37;
    font-size:4rem;
    margin-bottom:40px;
    font-weight:normal;
}

.blog-grid{
    max-width:1200px;
    margin:0 auto 40px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.blog-card{
    background:rgba(31,9,51,.6);
    border:1px solid rgba(212,175,55,.3);
    border-radius:20px;
    padding:30px;
    text-align:center;
    box-shadow:0 0 20px rgba(0,0,0,.3);
}

.blog-card h3{
    font-family:'Alex Brush',cursive !important;
    color:#D4AF37;
    font-size:2.5rem;
    margin-bottom:20px;
    font-weight:normal;
}

.blog-card p{
    font-family:'Alex Brush',cursive !important;
    color:#f7f4ef;
    font-size:1.8rem;
    line-height:1.6;
    margin-bottom:20px;
}

.blog-card a{
    font-family:'Alex Brush',cursive !important;
    color:#D4AF37;
    font-size:1.8rem;
}

@media (max-width:768px){

    .blog-home h2{
        font-size:3rem;
    }

    .blog-card h3{
        font-size:2rem;
    }

    .blog-card p,
    .blog-card a{
        font-size:1.4rem;
    }

}