*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:url("../img/bar.webp") center center;
background-size:cover;
background-attachment:fixed;
min-height:100vh;
font-family:Poppins,sans-serif;
position:relative;
}
.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
backdrop-filter:blur(1px);
z-index:1;
}
header{
position:absolute;
right:40px;
top:30px;
z-index:100;
}
.btn-registro{
color:white;
text-decoration:none;
border:1px solid #a86d1b;
padding:15px 28px;
border-radius:10px;
font-size:15px;
transition:.3s;
background:rgba(0,0,0,.25);
}
.btn-registro:hover{
background:#d8a24b;
color:black;
}

/* HERO: ocupa la primera pantalla completa, igual que antes */
.hero{
position:relative;
z-index:10;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:100vh;
text-align:center;
padding:20px;
}
.logo{
width:360px;
max-width:90%;
margin-bottom:30px;
}
h1{
font-family:'Cinzel',serif;
font-size:55px;
color:white;
line-height:1.25;
margin-bottom:45px;
text-shadow:0 0 12px #000;
}
.botones{
display:flex;
gap:25px;
justify-content:center;
flex-wrap:wrap;
}
.btn{
padding:18px 45px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
font-size:18px;
transition:.3s;
}
.amarillo{
background:#d59b34;
color:black;
}
.amarillo:hover{
background:#efb247;
transform:translateY(-3px);
}
.oscuro{
border:2px solid #d59b34;
color:white;
background:rgba(0,0,0,.4);
}
.oscuro:hover{
background:#d59b34;
color:black;
}
h2 {
    color: white;
}

/* CONTENIDO ADICIONAL: aparece al hacer scroll, debajo del hero */
.contenido-extra{
position:relative;
z-index:10;
max-width:800px;
margin:0 auto;
padding:40px 25px 80px;
text-align:center;
}
.intro{
color:#f0e6d6;
font-size:18px;
line-height:1.7;
margin-bottom:50px;
}
.secciones{
border-top:1px solid rgba(213,155,52,.4);
padding-top:35px;
}
.secciones h3{
font-family:'Cinzel',serif;
color:#d59b34;
font-size:26px;
margin-bottom:20px;
}
.lista-secciones{
list-style:none;
display:flex;
flex-direction:column;
gap:14px;
align-items:center;
}
.lista-secciones a{
color:white;
text-decoration:none;
border:1px solid rgba(213,155,52,.5);
padding:14px 30px;
border-radius:10px;
font-size:16px;
transition:.3s;
display:inline-block;
background:rgba(0,0,0,.25);
}
.lista-secciones a:hover{
background:#d59b34;
color:black;
border-color:#d59b34;
}

@media(max-width:768px){
.logo{
width:250px;
}
h1{
font-size:32px;
padding:0 20px;
}
.btn{
width:270px;
}
header{
right:15px;
top:15px;
}
.intro{
font-size:16px;
}
}

/* ==========================================================
   CONTENIDO NUEVO: categorías, features, pasos, CTA, footer
   Mantiene la paleta y tipografía originales del sitio
   ========================================================== */

.contenido-extra h3{
font-family:'Cinzel',serif;
color:#d59b34;
font-size:26px;
margin-bottom:12px;
text-align:center;
}
.subtexto{
color:#cbbfa9;
font-size:15px;
text-align:center;
margin-bottom:30px;
}

.bloque-categorias,
.bloque-features,
.bloque-pasos{
border-top:1px solid rgba(213,155,52,.4);
padding-top:40px;
margin-bottom:50px;
}

/* Categorías */
.categorias-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
max-width:1000px;
margin:0 auto;
}
.categoria-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
min-height:180px;
border-radius:12px;
overflow:hidden;
text-decoration:none;
border:1px solid rgba(213,155,52,.35);
background:rgba(0,0,0,.35);
transition:.3s;
padding:16px;
}
.categoria-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
opacity:.55;
transition:.4s;
}
.categoria-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.9) 10%, rgba(0,0,0,.25) 70%);
z-index:1;
}
.categoria-card:hover img{
opacity:.75;
transform:scale(1.06);
}
.categoria-card:hover{
border-color:#d59b34;
transform:translateY(-4px);
}
.categoria-nombre{
position:relative;
z-index:2;
font-family:'Cinzel',serif;
color:#efb247;
font-size:19px;
margin-bottom:4px;
}
.categoria-desc{
position:relative;
z-index:2;
color:#f0e6d6;
font-size:13px;
line-height:1.4;
}
.categoria-card--ver-todas{
align-items:center;
justify-content:center;
text-align:center;
background:rgba(213,155,52,.08);
}
.categoria-card--ver-todas .categoria-nombre{
color:#d59b34;
}

/* Features */
.features{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
max-width:900px;
margin:0 auto;
}
.feature{
text-align:center;
padding:10px;
}
.feature-icono{
font-size:32px;
display:block;
margin-bottom:10px;
}
.feature h4{
font-family:'Cinzel',serif;
color:#d59b34;
font-size:17px;
margin-bottom:8px;
}
.feature p{
color:#cbbfa9;
font-size:14px;
line-height:1.5;
}

/* Pasos */
.pasos{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
max-width:900px;
margin:0 auto;
}
.paso{
text-align:center;
padding:16px;
border:1px solid rgba(213,155,52,.25);
border-radius:12px;
background:rgba(0,0,0,.25);
}
.paso-numero{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
border:1px solid #d59b34;
color:#d59b34;
font-family:'Cinzel',serif;
margin-bottom:10px;
}
.paso h4{
font-family:'Cinzel',serif;
color:#efb247;
font-size:16px;
margin-bottom:6px;
}
.paso p{
color:#cbbfa9;
font-size:14px;
line-height:1.5;
}

/* CTA final */
.cta-final{
text-align:center;
padding:45px 20px;
margin-top:10px;
border-radius:14px;
border:1px solid rgba(213,155,52,.4);
background:rgba(213,155,52,.06);
}
.cta-final h3{
margin-bottom:10px;
}
.cta-final p{
color:#f0e6d6;
margin-bottom:22px;
}

/* Footer */
.footer-rincon{
position:relative;
z-index:10;
text-align:center;
padding:35px 20px 30px;
border-top:1px solid rgba(213,155,52,.3);
background:rgba(0,0,0,.35);
}
.footer-marca{
font-family:'Cinzel',serif;
color:#d59b34;
font-size:18px;
margin-bottom:14px;
}
.footer-nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:18px;
margin-bottom:16px;
}
.footer-nav a{
color:#cbbfa9;
text-decoration:none;
font-size:13px;
transition:.3s;
}
.footer-nav a:hover{
color:#d59b34;
}
.footer-copy{
color:#7a7166;
font-size:12px;
}

@media(max-width:768px){
.categorias-grid,
.features,
.pasos{
grid-template-columns:1fr;
}
}