/* =====================================================
   MERCHI – CSS GLOBAL UNIFICADO
   Marca: #FE00FE | Secundario: #000000
   Estética: premium · moderna · dinámica
===================================================== */

:root{
  --merchi-primary:#FE00FE;
  --merchi-dark:#000000;
  --merchi-ink:#111111;
  --merchi-muted:#6b7280;
  --merchi-light:#f7f7f8;
  --merchi-border:#e5e7eb;
}

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

.angulo-header-main .top-nav *{
  color:#ffffff!important;
}

#mainHeader{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Oculta texto login */
a[data-action="session-login"] .d-flex span:first-child{
  display:none!important;
}

/* Menú */
.navbar-dark-v .navbar-nav .nav-link{
  font-size:13px;
  padding:15px 20px;
  font-weight:600;
  letter-spacing:.3px;
  transition:color .2s ease;
}
.navbar-dark-v .navbar-nav .nav-link:hover{
  color:var(--merchi-primary)!important;
}

.navbar-top .navbar-nav .nav-item{
  margin-right:28px;
  border-bottom:2px solid transparent;
}
.navbar-top .navbar-nav .nav-item:hover{
  border-bottom-color:var(--merchi-primary);
}

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

.product-status{ display:none; }

.angulo-item-producto{
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.angulo-item-producto:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.angulo-item-img{
  border-radius:14px;
  height:220px!important;
  background-size:contain!important;
}

.angulo-item-name{
  font-size:.85rem;
  font-weight:500;
  text-align:center;
}

.angulo-item-price .price{
  font-size:1.35rem;
  font-weight:700;
  color:var(--merchi-primary);
}

/* Botones */
.btn.angulo-item-button,
.btn.angulo-item-outline{
  background:var(--merchi-primary);
  color:#fff!important;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.3px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn.angulo-item-button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(254,0,254,.35);
}

/* ================= FICHA PRODUCTO ================= */

.product-price{
  color:var(--merchi-primary)!important;
}
.product-price h3{
  font-size:1.6rem!important;
}

h3.m-0{
  font-size:1.6rem;
  font-weight:700;
}

.product-description{
  background:#f3f3f5;
  border-radius:16px;
  padding:24px;
  margin-top:32px;
}

/* ================= BUSCADOR ================= */

.intBuscar{
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid var(--merchi-border)!important;
  color:var(--merchi-ink)!important;
}
.intBuscar:focus{
  box-shadow:0 0 0 4px rgba(254,0,254,.18);
  border-color:var(--merchi-primary)!important;
}

/* ================= ASIDE / FILTROS ================= */

.angulo-section-aside{
  background:#fff;
  border-radius:18px;
  border:1px solid var(--merchi-border);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.angulo-section-aside h4{
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.angulo-section-aside h4::after{
  background:var(--merchi-primary);
}

/* Botón filtrar */
.angulo-section-aside .btn.btn-secondary{
  background:#fff!important;
  border:2px solid var(--merchi-primary)!important;
  color:var(--merchi-primary)!important;
  border-radius:999px;
}
.angulo-section-aside .btn.btn-secondary:hover{
  background:var(--merchi-primary)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(254,0,254,.35);
}

/* Swatches */
.colorButtonAttributeProduct > a.active{
  box-shadow:0 0 0 3px var(--merchi-primary)!important;
}

/* ================= BLOG ================= */

.blog-title-container{
  color:var(--merchi-primary);
}
.blog-description{
  color:var(--merchi-muted);
}

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

footer{
  background:#0b0b0b;
  color:#e5e7eb;
}

footer .pre-footer h6::after{
  background:var(--merchi-primary);
}

footer a:hover{
  color:var(--merchi-primary);
}

footer #redes a{
  background:rgba(254,0,254,.15);
  border-radius:14px;
}
footer #redes a:hover{
  background:#fff;
  color:var(--merchi-primary);
}

/* Barra copyright */
footer .footer-copy{
  background:#000!important;
  color:#ccc!important;
}

/* ================= TITULOS DESTACADOS ================= */

.text-destacado::before{
  background:var(--merchi-primary);
}
.text-destacado span{
  background:#fff;
}

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

@media(max-width:768px){
  .navbar-collapse{
    background:#fff;
  }
  .navbar-collapse .nav-link{
    color:#000!important;
  }
}

/* ==============================
   PREHEADER / TOP-NAV · MERCHI
   ============================== */

.top-nav{
  background:#000000 !important;          /* fondo negro */
}

/* Texto e íconos */
.top-nav,
.top-nav a,
.top-nav i{
  color:#ffffff !important;
  font-size:13px;
  font-weight:500;
  letter-spacing:.2px;
  transition:color .2s ease;
}

/* Hover MERCHI */
.top-nav a:hover,
.top-nav a:hover i{
  color:#FE00FE !important;
  text-decoration:none;
}

/* Ajuste visual del link */
.top-nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
}

/* Íconos un poco más prolijos */
.top-nav i{
  font-size:14px;
}

/* Mobile: un poco más de aire */
@media (max-width: 768px){
  .top-nav{
    padding:6px 0;
  }
}

.form-contact{
  display: none !important;
}


/* FICHA PRODUCTOS IMAGENES*/
/* Imagen principal del producto */
.containerImagePrincipal a div{
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff; /* opcional para evitar fondo vacío */
}


/* ==============================
   FOOTER · TRIEBA (solo CSS)
   ============================== */
footer{
  --brand:#fe00fe;
  --ink:#111827;
  --muted:#6b7280;
  --surface:#fff;
  --surface-alt:#f8fafc;
  font-family: var(--font-customize, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* ---------- PRE-FOOTER ---------- */
footer .pre-footer{
  background: var(--surface);
  padding-top: 44px;
  padding-bottom: 28px;
  position: relative;
  overflow: hidden;
}

/* Motivos de puntos (eco visual del resto del sitio) */
footer .pre-footer::before,
footer .pre-footer::after{
  content:"";
  position:absolute;
  background-image: radial-gradient(#eaf5a2 1.6px, transparent 1.6px);
  background-size: 10px 10px;
  opacity:.6;
  pointer-events:none;
}
footer .pre-footer::before{ width:140px; height:170px; left:-20px; top:-10px; }
footer .pre-footer::after{  width:170px; height:140px; right:-10px; bottom:-15px; }

/* Columnas como “tarjetitas” */
footer .pre-footer .row > .col-md-3{
  background:#fff;
  border:1px solid rgba(17,24,39,.06);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  padding:18px 18px 14px;
  margin:0 12px 18px;
}

/* Títulos */
footer .pre-footer h6{
  margin:0 0 12px 0;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--ink);
  text-transform:uppercase;
  display:inline-block;
  position:relative;
}
footer .pre-footer h6::after{
  content:"";
  display:block;
  width:44px; height:3px;
  background:var(--brand);
  border-radius:2px;
  margin-top:8px;
}

/* Links */
footer .pre-footer a{
  color:var(--ink);
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
footer .pre-footer a:hover{
  color:var(--brand);
  transform:translateX(2px);
}
footer .pre-footer ul.list-unstyled li{
  margin:.45rem 0;
  line-height:1.4;
}

/* Flechitas “fa-angle-right” en verde */
footer .pre-footer i.fa-angle-right{
  color:var(--brand);
  margin-right:6px;
  font-size:.9rem;
}

/* Forzar color de la lista de contacto (el HTML trae color inline) */
footer .pre-footer .col-md-3 ul[style]{
  color:var(--ink) !important;
}

/* Iconos de contacto (tel, mail, whatsapp) */
footer .pre-footer .fa-whatsapp,
footer .pre-footer .fa-phone-alt,
footer .pre-footer .fa-envelope{
  color: var(--brand);
  margin-right: 8px;
}

/* Cambiar el glifo del ícono de teléfono a WhatsApp SOLO en el footer */
footer .pre-footer i.fa-phone-alt::before {
  /* Soporta FA6 y FA5; si tu proyecto usa FA4, el codepoint también es \f232 */
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  content: "\f232" !important; /* WhatsApp */
  font-weight: 400 !important; /* peso de los brand icons */
}


/* ---------- Redes sociales (igual estética que Contacto) ---------- */
footer #redes{ margin-top:6px; }
footer #redes ul{ margin-left:0 !important; } /* anula ml-5 del HTML */
footer #redes .list-inline-item{
  margin-right:8px;
}
footer #redes a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  background:#f0fdf4; /* verde muy claro */
  color:var(--brand);
  border:1px solid rgba(111,191,68,.25);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(111,191,68,.12);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
footer #redes a:hover{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
footer #redes i{ font-size:18px; }

/* ---------- Footer copy ---------- */
footer .footer-copy{
  background:#0f172a; /* slate oscuro moderno */
  color:#e5e7eb;
  padding:16px 0;
}
footer .footer-copy span{
  font-size:.95rem;
}
footer .footer-copy a{
  color:#b7f0c3; /* verde suave */
  text-decoration:none;
  border-bottom:1px dotted transparent;
  transition:color .2s ease, border-color .2s ease;
}
footer .footer-copy a:hover{
  color:#ffffff;
  border-bottom-color:#ffffff;
}

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px){
  footer .pre-footer{
    padding-top: 36px;
    padding-bottom: 18px;
  }
  footer .pre-footer .row > .col-md-3{
    margin-left:0; margin-right:0;
    border-radius:14px;
  }
  footer .pre-footer .list-unstyled.ml-3{ margin-left:0 !important; } /* quita sangrías */
  footer #redes .d-none.d-sm-none.d-lg-block.d-md-block{ display:none !important; }
  footer #redes .d-block.d-sm-block.d-lg-none.d-md-none{ display:block !important; }
}
/* === Fix contraste en copyright === */
footer .footer-copy{
  background:#0f172a !important; /* barra oscura */
}

/* fuerza color claro para todo el texto dentro de la barra */
footer .footer-copy,
footer .footer-copy .copyright_text,
footer .footer-copy .copyright_text *,
footer .footer-copy span,
footer .footer-copy center span{
  color:#e5e7eb !important;
}

/* enlaces: verde suave + hover blanco */
footer .footer-copy a{
  color:#b7f0c3 !important;
  text-decoration:none;
  border-bottom:1px dotted transparent;
}
footer .footer-copy a:hover{
  color:#ffffff !important;
  border-bottom-color:#ffffff;
}
/* Tamaño y legibilidad del texto de copyright */
footer .footer-copy .copyright_text,
footer .footer-copy .copyright_text *,
footer .footer-copy span,
footer .footer-copy center span{
  font-family: var(--font-customize, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: .85rem !important;   /* ~13.6px */
  line-height: 1.4 !important;
  letter-spacing: .2px !important;
}

/* Un poco más pequeño aún en pantallas chicas */
@media (max-width: 575.98px){
  footer .footer-copy .copyright_text,
  footer .footer-copy .copyright_text *,
  footer .footer-copy span,
  footer .footer-copy center span{
    font-size: .8rem !important;   /* ~12.8px */
  }
}
/* ====== Fallback TikTok para el footer (cuando FA no lo trae) ====== */
/* Selecciono el <i> que agregaste: fa-tiktok (FA5/6) y variantes */
footer #redes i.fa-tiktok,
footer #redes i.fab.fa-tiktok,
footer #redes i.lab.la-tiktok,
footer #redes i.la.la-tiktok{
  /* mismo tratamiento que los otros íconos del footer */
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  line-height: 1 !important;
  font-style: normal !important;
  /* el color se hereda del botón/anchor */
  background: currentColor !important;

  /* dibujamos el logo con máscara para que respete currentColor */
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M448 209.9v89.7c-37.4.1-73.8-10.7-105.3-31v111.1c0 75.3-61 136.3-136.3 136.3S70.1 455 70.1 379.7c0-66.7 47.7-122.2 110.6-134.2v92.7c-10.3 5.5-17.3 16.3-17.3 28.7 0 18 14.6 32.6 32.6 32.6s32.6-14.6 32.6-32.6V0h90.7c6.3 69 62.4 123.6 131.1 129.2v80.7c-1.8 0-3.8-.1-5.8-.1z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain !important;
          mask: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M448 209.9v89.7c-37.4.1-73.8-10.7-105.3-31v111.1c0 75.3-61 136.3-136.3 136.3S70.1 455 70.1 379.7c0-66.7 47.7-122.2 110.6-134.2v92.7c-10.3 5.5-17.3 16.3-17.3 28.7 0 18 14.6 32.6 32.6 32.6s32.6-14.6 32.6-32.6V0h90.7c6.3 69 62.4 123.6 131.1 129.2v80.7c-1.8 0-3.8-.1-5.8-.1z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Por si el <i> venía con font-size; lo alineamos visualmente */
footer #redes .list-inline-item i.fa-tiktok{
  font-size: 0 !important; /* evitamos “huecos” de la fuente */
}

/* Asegura que herede el color correcto dentro del botón social */
footer #redes .list-inline-item a:hover i.fa-tiktok{
  color: var(--ink, #111827) !important;
}