/* ============================================================
   Anyi Ramírez · MADE IN HOUSE — Decoración artesanal y sostenible
   Paleta e identidad reales de la marca (cálida, clara).
   ============================================================ */
:root {
    --primary-color: #A9724C;   /* clay / terracota-marrón (botones/enlaces) */
    --secondary-color: #C0895D; /* caramelo */
    --accent-color: #B4623C;    /* terracota */
    --dark-brown: #3E2E22;      /* marrón profundo (texto/logo) */
    --olive: #8A8B5C;           /* verde oliva (hojas) */
    --light-beige: #F3ECE1;     /* crema (fondos) */
    --warm-sand: #E7DAC6;       /* arena */
    --earth-orange: #CBB79C;    /* taupe */
    --text-dark: #3E2E22;
    --text-light: #4A3B2F;
    --success-green: #6a8f4f;
    --border-radius: 14px;
    --shadow: 0 4px 10px rgba(62,46,34,0.08);
    --shadow-lg: 0 12px 30px rgba(62,46,34,0.15);
}

body {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-light);
    background-color: #FBF8F3;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 700;
    padding-top: 84px;
}

/* Titulares con serif elegante (aire artesanal) */
h1, h2, h3, h4, h5, h6, .section-title, .hero-mih h1, .navbar-brand-text,
.about-content h3, .card-title, .product-title, .site-footer h5 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.02em;
    font-weight: 800;
}

/* El tema legacy fija Montserrat en p/li/span (regla directa que gana por herencia).
   Lo forzamos a la tipografía nueva para que aplique en TODAS las páginas. */
p, li, span {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/* Miga de pan (breadcrumb) en Poppins */
.breadcrumb-item, .breadcrumb-item a {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------- Navbar (claro, con logo) ---------- */
.navbar {
    background: rgba(243, 236, 225, 0.97);
    backdrop-filter: blur(6px);
    padding: 0.4rem 0;
    box-shadow: 0 2px 14px rgba(62,46,34,0.08);
    border-bottom: 1px solid var(--earth-orange);
}
.navbar .navbar-brand img { height: 54px; width: auto; }
.navbar .nav-link { color: var(--dark-brown) !important; font-weight: 600; transition: all .25s ease; }
.navbar .nav-link:hover { color: var(--accent-color) !important; }
.navbar .dropdown-menu { background: #fff; border: 1px solid var(--earth-orange); }
.navbar .dropdown-item { color: var(--dark-brown) !important; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: var(--warm-sand) !important; color: var(--dark-brown) !important; }
.navbar .dropdown-submenu > a.dropdown-item { color: var(--dark-brown) !important; }
.navbar .form-control { border: 1px solid var(--earth-orange); background: #fff; }
.navbar .btn-outline-accent { color: var(--primary-color); border-color: var(--primary-color); }
.navbar .btn-outline-accent:hover { background: var(--primary-color); color: #fff; }
/* submenú de categorías */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }
@media (max-width: 991px){ .dropdown-submenu > .dropdown-menu { position: static; left: 0; } }
.btn-cart-mih { background: var(--accent-color); color: #fff; border: none; padding: .45rem .7rem; border-radius: 50px; position: relative; }
.btn-cart-mih:hover { background: var(--primary-color); color: #fff; }

/* ---------- Social float ---------- */
.social-float { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.social-item { width: 44px; height: 44px; background: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all .3s ease; box-shadow: var(--shadow); }
.social-item:hover { transform: scale(1.1); color: #fff; }
.social-item.instagram:hover { background: #E4405F; }
.social-item.facebook:hover { background: #1877F2; }
.social-item.tiktok:hover { background: #000; }
.social-item.pinterest:hover { background: #E60023; }
.social-item.whatsapp:hover { background: #25D366; }
@media (max-width: 768px){ .social-float{ left: 8px; } .social-item{ width: 36px; height: 36px; font-size:.8rem; } }

/* ---------- Botones ---------- */
.btn { border-radius: var(--border-radius); font-weight: 600; transition: all .25s ease; }
.btn-primary { background: var(--primary-color); border-color: var(--primary-color); }
.btn-primary:hover { background: var(--dark-brown); border-color: var(--dark-brown); transform: translateY(-2px); }
.btn-secondary { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.btn-secondary:hover { background: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary:hover { background: var(--primary-color); color: #fff; }

/* ---------- Hero (cálido, claro) ---------- */
.hero-mih { background: linear-gradient(135deg, var(--warm-sand), var(--light-beige)); color: var(--dark-brown); padding: 96px 0 84px; text-align: center; position: relative; overflow: hidden; }
.hero-mih::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(138,139,92,.10), transparent 42%), radial-gradient(circle at 85% 80%, rgba(180,98,60,.10), transparent 42%); pointer-events:none; }
.hero-mih .wrap { position: relative; z-index: 2; }
.hero-mih .kicker { display:inline-block; letter-spacing:3px; text-transform:uppercase; font-size:.8rem; font-weight:600; color: var(--accent-color); margin-bottom:.6rem; }
.hero-mih h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; margin-bottom: 1rem; }
.hero-mih p { font-size: 1.12rem; max-width: 640px; margin: 0 auto 2rem; color: var(--text-light); }
.hero-mih .btn-light-outline { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; }
.hero-mih .btn-light-outline:hover { background: var(--primary-color); color: #fff; }

/* ---------- Hero slider (carrusel con imágenes) ---------- */
.hero-slider .carousel-item { height: 540px; background-size: cover; background-position: center; position: relative; }
.hero-slider .hero-overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(62,46,34,.82), rgba(62,46,34,.45) 60%, rgba(62,46,34,.25)); }
.hero-slider .hero-caption { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #fff; text-align: left; }
.hero-slider .hero-caption .kicker { color: var(--warm-sand); }
.hero-slider .hero-caption h1, .hero-slider .hero-caption h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; margin: .5rem 0 1rem; text-shadow: 0 2px 14px rgba(0,0,0,.4); font-family: 'Poppins', sans-serif; letter-spacing: -0.02em; }
.hero-slider .hero-caption p { font-size: 1.12rem; max-width: 560px; margin-bottom: 1.6rem; opacity: .96; }
.hero-slider .carousel-indicators { z-index: 3; margin-bottom: 1.2rem; }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 6%; z-index: 3; }
@media (max-width: 576px){
  .hero-slider .carousel-item { height: 440px; }
  .hero-slider .hero-caption { text-align: center; align-items: center; }
}

/* ---------- Ofertas ---------- */
.offers-section { background: linear-gradient(135deg, var(--warm-sand), var(--light-beige)); }

/* ---------- Franja de confianza ---------- */
.trust-strip { background: #fff; border-top: 1px solid var(--earth-orange); border-bottom: 1px solid var(--earth-orange); }
.trust-strip .trust-item { padding: .4rem .5rem; }
.trust-strip i { font-size: 1.7rem; color: var(--accent-color); margin-bottom: .5rem; display: inline-block; }
.trust-strip h6 { font-weight: 700; color: var(--dark-brown); margin: 0 0 .1rem; font-size: .98rem; }
.trust-strip p { color: #8a7d6d; font-size: .82rem; margin: 0; line-height: 1.3; }

/* ---------- Preguntas frecuentes ---------- */
.faq-section { background: #fff; }
.faq-section .accordion-item { border-color: var(--earth-orange); border-radius: 10px !important; margin-bottom: .7rem; overflow: hidden; }
.faq-section .accordion-button { font-weight: 600; color: var(--dark-brown); background: var(--light-beige); }
.faq-section .accordion-button:not(.collapsed) { background: var(--warm-sand); color: var(--primary-color); box-shadow: none; }
.faq-section .accordion-button:focus { box-shadow: none; border-color: var(--earth-orange); }
.faq-section .accordion-body { color: var(--text-light); }

/* ---------- CTA personalización (detalle) ---------- */
.perso-cta { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: #fff; border-radius: var(--border-radius); }
.perso-cta h4 { color: #fff; font-weight: 700; }
.perso-cta .btn-light { background: #fff; color: var(--primary-color); font-weight: 700; }
.perso-cta .btn-light:hover { background: var(--light-beige); color: var(--dark-brown); }

/* Caja acento (terracota) — "hecho a mano" */
.brand-box { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); }

/* ---------- Section titles ---------- */
.section-title { color: var(--dark-brown); font-weight: 800; font-size: clamp(1.95rem, 4.4vw, 2.9rem); position: relative; padding-bottom: 1rem; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--accent-color); }
.kicker { display:inline-block; letter-spacing:3px; text-transform:uppercase; font-size:.8rem; font-weight:600; color: var(--accent-color); }

/* ---------- Categorías ---------- */
.categories-section { background: linear-gradient(135deg, var(--light-beige), #fff); }
.cat-card { position: relative; overflow: hidden; border-radius: var(--border-radius); transition: all .3s ease; height: 260px; display:block; box-shadow: var(--shadow); }
.cat-card img { width:100%; height:100%; object-fit: cover; transition: transform .4s ease; }
.cat-card::after { content:''; position:absolute; inset:0; background: linear-gradient(rgba(62,46,34,.10), rgba(62,46,34,.72)); }
.cat-card .cat-content { position:absolute; bottom:0; left:0; right:0; padding: 1.4rem; color:#fff; z-index:2; text-align:center; }
.cat-card .cat-content h4 { font-weight:700; margin-bottom:.2rem; }
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cat-card:hover img { transform: scale(1.06); }

/* ---------- Productos ---------- */
.products-section { background: #fff; }
.product-card { background: #fff; border: none; border-radius: var(--border-radius); overflow: hidden; transition: all .3s ease; box-shadow: var(--shadow); height: 100%; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card .card-img-top { height: 220px; object-fit: cover; }
.product-card .card-body { padding: 1rem 1.1rem 1.2rem; }
.product-title { color: var(--dark-brown); font-weight: 800; font-size: 1.18rem; }
.precio-now { color: var(--primary-color); font-weight: 800; font-size: 1.18rem; }
.precio-old { text-decoration: line-through; color: #b9b0a5; font-size: .9rem; margin-left: .4rem; }
.product-badge { position: absolute; top: 10px; right: 10px; background: var(--accent-color); color:#fff; font-weight:700; padding: .2rem .55rem; font-size: .72rem; border-radius: 8px; z-index:2; }
.pill-tag { position: absolute; top: 10px; left: 10px; color:#fff; font-weight:600; padding: .2rem .55rem; font-size: .68rem; border-radius: 6px; z-index:2; }
.pill-tag.stock { background: var(--olive); }
.pill-tag.warn  { background: var(--accent-color); }
.pill-tag.info  { background: var(--secondary-color); }
.btn-add-cart { background: var(--primary-color); color:#fff; border:none; border-radius: 10px; width: 42px; height: 42px; display:inline-flex; align-items:center; justify-content:center; }
.btn-add-cart:hover { background: var(--dark-brown); color:#fff; }

/* ---------- Quiénes somos ---------- */
.about-section { background: #fff; }
.about-content h3, .about-content h4 { color: var(--primary-color); }
.about-content p { line-height: 1.8; }
.mission-section { background: var(--light-beige); padding: 1.6rem; border-radius: var(--border-radius); }

/* ---------- Contacto ---------- */
.contact-section { background: linear-gradient(135deg, var(--warm-sand), #fff); }
.contact-form .form-control { border: 2px solid var(--earth-orange); border-radius: var(--border-radius); padding: .7rem 1rem; }
.contact-form .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 .2rem rgba(169,114,76,.2); }
.contact-info .info-item { display:flex; align-items:center; gap: 1rem; margin-bottom: 1rem; }
.contact-info .info-item i { color: var(--primary-color); font-size: 1.2rem; width: 22px; text-align:center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark-brown); color: #F3ECE1; padding: 3rem 0 1rem; margin-top: 0; }
.site-footer img { height: 60px; margin-bottom: 1rem; }
.site-footer h5 { color: var(--warm-sand); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer ul li { margin-bottom: .5rem; }
.site-footer a { color: #E7DAC6; text-decoration: none; transition: color .25s ease; }
.site-footer a:hover { color: #fff; }
.site-footer .social-links a { font-size: 1.2rem; margin-right: 1rem; }

/* ---------- Animaciones ---------- */
@keyframes fadeIn { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }
.fade-in-up { animation: fadeIn .7s ease-out both; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float { position: fixed; bottom: 22px; right: 22px; background:#25D366; color:#fff; padding: .7rem 1rem; border-radius: 50px; box-shadow: var(--shadow-lg); z-index: 1000; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.whatsapp-float:hover { color:#fff; filter: brightness(1.05); }

/* ---------- Marquee categorías ---------- */
.marquee { overflow: hidden; }
.marquee-content { display: flex; gap: 2.5rem; list-style: none; padding: 0; margin: 0; white-space: nowrap; animation: marquee 22s linear infinite; }
.marquee-content li a { color:#fff; text-decoration:none; font-weight:600; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

@media (max-width: 576px){
  body { padding-top: 74px; }
  .navbar .navbar-brand img { height: 44px; }
  .hero-mih { padding: 70px 0 56px; }
  .product-card .card-img-top { height: 180px; }
}

/* ============================================================
   Armonización de páginas internas (detalle, categoría, búsqueda,
   checkout, carrito) a la paleta boutique.
   ============================================================ */
.text-tertiary { color: var(--primary-color) !important; }
.text-accent   { color: var(--accent-color) !important; }
.text-primary  { color: var(--primary-color) !important; }
.bg-tertiary   { background-color: var(--secondary-color) !important; }
.bg-primary    { background-color: var(--dark-brown) !important; }
a.text-primary:hover { color: var(--dark-brown) !important; }

.btn-outline-accent { color: var(--primary-color); border-color: var(--primary-color); background: transparent; }
.btn-outline-accent:hover { background: var(--primary-color); color: #fff; }

/* Breadcrumb */
.breadcrumb { background: transparent; margin-bottom: .25rem; }
.breadcrumb-item a { color: var(--primary-color); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--dark-brown); }
.breadcrumb-item.active { color: var(--secondary-color); }

/* Tarjetas internas */
section .card { border: none; border-radius: var(--border-radius); box-shadow: var(--shadow); }
.card-header.fw-bold { background: var(--light-beige); color: var(--primary-color); border-bottom: 1px solid var(--earth-orange); }

/* Pestañas de producto */
.nav-tabs { border-bottom: 2px solid var(--earth-orange); }
.product-tab { color: var(--dark-brown); font-weight: 600; border: none; }
.product-tab.active { color: var(--primary-color) !important; background: transparent !important; border-bottom: 3px solid var(--primary-color) !important; }

/* Banner de categoría */
.category-banner { min-height: 260px; }
.category-banner .breadcrumb-item a { color: #fff; }
.category-banner .breadcrumb-item.active { color: var(--warm-sand); }

/* Cantidad + zoom */
.quantity-input { max-width: 60px; }
.cursor-zoom-in { cursor: zoom-in; }
.zoom-image { transition: transform .3s ease; }

/* Formularios */
.form-control:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 .2rem rgba(169,114,76,.15); }
.form-control.is-invalid { border-color: #dc3545; }

/* Badges de estado en terracota */
.card .bg-danger { background-color: var(--accent-color) !important; }
.position-absolute.bg-danger { position: absolute; }

/* ============================================================
   Fix de rojos heredados + swal + responsive
   ============================================================ */
/* El tema legacy (styleFront.css) define --accent/--secondary/--primary en ROJO.
   Los remapeamos a la marca para eliminar los rojos en hovers (subrayados ::after,
   dropdown, bordes de tarjeta, etc.). */
:root {
    --primary: #A9724C;
    --secondary: #C0895D;
    --accent: #B4623C;
    --whipri: #ffffff;
}
.btn-secondary:hover { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.nav-link:hover::after, .footer-link:hover::after, .category-card:hover::before { background-color: var(--accent-color) !important; }
.navbar { border-bottom-color: var(--earth-orange) !important; }

/* SweetAlert (swal) — reambientado a la marca */
.swal-modal { border-radius: 16px; }
.swal-button, .swal-button--confirm { background-color: var(--primary-color) !important; color: #fff !important; }
.swal-button:hover, .swal-button--confirm:hover { background-color: var(--dark-brown) !important; }
.swal-button--cancel { background-color: #E7DAC6 !important; color: var(--dark-brown) !important; }
.swal-button--cancel:hover { background-color: #d8c7ad !important; }
.swal-icon--success, .swal-icon--success__ring { border-color: rgba(106,143,79,.35) !important; }
.swal-icon--success__line { background-color: #6a8f4f !important; }
.swal-title { color: var(--dark-brown); }
.swal-text { color: var(--text-light); }

/* Responsive — evita cualquier desbordamiento horizontal en móvil */
html, body { overflow-x: hidden; max-width: 100%; }
.marquee { overflow: hidden; max-width: 100%; }
img { max-width: 100%; }