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

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: Georgia, serif;
}

/* ============================
   FONDO PRINCIPAL (TU IMAGEN)
============================ */

body {
    background: url('https://images.unsplash.com/photo-1513519245088-0e12902e5a38?q=80&w=1920') no-repeat center center fixed !important;
    background-size: cover !important;
    background-color: #f7efe4 !important;
    position: relative;
}

/* capa lujo encima */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(
        rgba(255,248,240,0.10),
        rgba(0,0,0,0.12)
    );
    pointer-events: none;
    z-index: -1;
}

/* ============================
   HEADER NEGRO PREMIUM
============================ */

header,
.site-header,
#masthead {
    background: #000 !important;
    min-height: 95px;
    border-bottom: 2px solid #d4af37 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ============================
   LOGO
============================ */

.site-title,
.site-title a,
.custom-logo-link {
    color: #d4af37 !important;
    font-size: 48px !important;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* ============================
   MENU
============================ */

.main-navigation a,
nav a,
.menu a {
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.main-navigation a:hover,
nav a:hover,
.menu a:hover {
    color: #d4af37 !important;
}

/* dropdown */

.sub-menu {
    background: #111 !important;
    border: 1px solid #d4af37 !important;
}

.sub-menu a {
    color: white !important;
}

.sub-menu a:hover {
    color: #d4af37 !important;
}

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

.site-main,
.entry-content,
.hero,
.home-banner {
    background: transparent !important;
    min-height: 100vh;
}

/* ============================
   TITULOS GRANDES
============================ */

h1 {
    font-size: 90px !important;
    color: #ffffff !important;
    font-family: "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 0.9;
}

h2 {
    color: #ffffff !important;
    font-size: 55px !important;
}

h3,h4 {
    color: #ffffff !important;
}

/* ============================
   SUBTEXTO
============================ */

p, span {
    color: #f5efe6 !important;
    font-size: 18px;
}

/* ============================
   BOTON SHOP NOW
============================ */

button,
.wp-block-button__link,
input[type="submit"],
.button {
    background: transparent !important;
    border: 2px solid #d4af37 !important;
    color: #d4af37 !important;
    padding: 15px 35px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease;
}

button:hover,
.button:hover {
    background: #d4af37 !important;
    color: black !important;
}

/* ============================
   PRODUCTOS
============================ */

.products li,
.product,
.wc-block-grid__product {
    background: rgba(0,0,0,0.85) !important;
    border: 1px solid #d4af37 !important;
    transition: 0.4s ease;
    padding: 20px;
}

.products li:hover {
    transform: translateY(-8px);
}

/* nombre producto */

.woocommerce-loop-product__title {
    color: white !important;
}

/* precio */

.price {
    color: #d4af37 !important;
    font-size: 20px !important;
}

/* ============================
   ICONOS BENEFICIOS
============================ */

.feature-box,
.icon-box {
    background: rgba(0,0,0,0.70);
    border: 1px solid #d4af37;
    color: white !important;
    padding: 20px;
}

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

footer,
.site-footer {
    background: #000 !important;
    border-top: 2px solid #d4af37 !important;
    color: white !important;
    padding: 40px;
}

/* ============================
   QUITAR FONDOS BLANCOS FEOS
============================ */

section,
.container,
.content-area,
.site-content,
.page-content {
    background: transparent !important;
}

/* ============================
   EFECTO PREMIUM
============================ */

img {
    transition: 0.4s ease;
}

img:hover {
    transform: scale(1.02);
}

/* ============================
   MOBILE
============================ */

@media(max-width:768px){

h1{
    font-size:48px !important;
}

.site-title{
    font-size:28px !important;
}

header{
    min-height:70px;
}

}