/*
Theme Name: Divi Child
Theme URI: https://tusitio.com
Description: Child Theme de Divi
Author: Tu Nombre
Template: Divi
Version: 1.0
*/

.woocommerce ul.products li.product .woocommerce-loop-product__description { 
  display: block !important; 
}

/* Fondo negro global */
body {
  background-color: #000000 !important;
}

/* === FIXES MOBILE DIVI === */
@media (max-width: 767px) {
  body { 
    overflow-x: hidden;
    background-color: #000000 !important; /* aseguramos negro también en móvil */
  }

  .et_pb_row { 
    width: 100% !important; 
    padding-left: 16px; 
    padding-right: 16px; 
  }

  img { 
    max-width: 100%; 
    height: auto; 
  }

  h1 { 
    font-size: 24px; 
    line-height: 1.2; 
  }

  h2 { 
    font-size: 20px; 
  }

  h3 { 
    font-size: 18px; 
  }

  p { 
    font-size: 14px; 
  }
}

.jl-productos-header{text-align:center;padding:80px 60px 56px;background:#080808}
.jl-section-tag{display:block;font-family:'DM Sans','Segoe UI',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#C9A84C;margin-bottom:12px}
.jl-section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:.03em;line-height:1;color:#E8E2D5;margin:0}
.jl-section-title span{background:linear-gradient(135deg,#F0C96A,#C9A84C);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}
.jl-section-line{width:60px;height:2px;background:linear-gradient(90deg,#C9A84C,transparent);margin:20px auto 0}
.jl-productos-page{padding:0 60px 100px;background:#080808;min-height:60vh}
.jl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1280px;margin:0 auto 60px}
.jl-pcard{position:relative;background:#111;border:1px solid rgba(201,168,76,.1);border-radius:4px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;opacity:0;transform:translateY(20px);animation:jl-up .6s ease forwards;transition:border-color .4s ease,transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.jl-pcard:hover{border-color:rgba(201,168,76,.5);transform:translateY(-8px)!important;box-shadow:0 28px 56px rgba(0,0,0,.6),0 0 0 1px rgba(201,168,76,.2)}
@keyframes jl-up{to{opacity:1;transform:translateY(0)}}
.jl-pc-corner{position:absolute;width:13px;height:13px;z-index:3;pointer-events:none;transition:all .4s ease}
.jl-pc-tl{top:9px;left:9px;border-top:1.5px solid rgba(201,168,76,.25);border-left:1.5px solid rgba(201,168,76,.25)}
.jl-pc-br{bottom:9px;right:9px;border-bottom:1.5px solid rgba(201,168,76,.25);border-right:1.5px solid rgba(201,168,76,.25)}
.jl-pcard:hover .jl-pc-tl{top:6px;left:6px;width:17px;height:17px;border-color:rgba(201,168,76,.9)}
.jl-pcard:hover .jl-pc-br{bottom:6px;right:6px;width:17px;height:17px;border-color:rgba(201,168,76,.9)}
.jl-pc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#1a1a1a,#0d0d0d)}
.jl-pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.jl-pcard:hover .jl-pc-img img{transform:scale(1.07)}
.jl-pc-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem;opacity:.12}
.jl-pc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.85) 0%,transparent 60%);transition:background .4s}
.jl-pcard:hover .jl-pc-overlay{background:linear-gradient(to top,rgba(8,8,8,.9) 0%,rgba(8,8,8,.35) 60%,rgba(201,168,76,.04) 100%)}
.jl-pc-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + 12px));background:linear-gradient(135deg,#F0C96A,#C9A84C);color:#080808;font-family:'DM Sans','Segoe UI',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 18px;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));opacity:0;z-index:2;transition:all .35s cubic-bezier(.16,1,.3,1)}
.jl-pcard:hover .jl-pc-badge{opacity:1;transform:translate(-50%,-50%)}
.jl-pc-info{padding:14px 16px 16px;display:flex;align-items:center;gap:10px;flex:1}
.jl-pc-cat{display:none}
.jl-pc-name{font-family:'DM Sans','Segoe UI',sans-serif;font-size:.88rem;font-weight:500;color:#C8C2B5;line-height:1.4;margin:0;flex:1;transition:color .3s}
.jl-pcard:hover .jl-pc-name{color:#F0C96A}
.jl-pc-arrow{font-size:.9rem;color:rgba(201,168,76,.25);flex-shrink:0;transition:all .3s}
.jl-pcard:hover .jl-pc-arrow{color:#C9A84C;transform:translateX(4px)}
.jl-pc-line{height:2px;background:linear-gradient(90deg,transparent,#C9A84C,transparent);transform:scaleX(0);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.jl-pcard:hover .jl-pc-line{transform:scaleX(1)}
.jl-pagination{display:flex;justify-content:center;gap:8px;margin-top:16px}
.jl-page-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.15);border-radius:4px;color:#888880;text-decoration:none;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;transition:all .3s}
.jl-page-btn:hover{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.4);color:#F0C96A}
.jl-page-active{background:linear-gradient(135deg,#F0C96A,#C9A84C)!important;border-color:transparent!important;color:#080808!important;font-weight:700!important}
.jl-empty{text-align:center;padding:100px 0;color:#888880}
.jl-empty span{font-size:4rem;display:block;margin-bottom:16px;opacity:.2}
.jl-empty p{font-family:'DM Sans',sans-serif;font-size:1rem}
@media(max-width:1100px){.jl-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.jl-productos-page{padding:0 24px 80px}.jl-productos-header{padding:60px 24px 40px}.jl-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:480px){.jl-grid{grid-template-columns:1fr}}



/* ============================= */
/* ICONOS CON HALO BLANCO + HOVER DORADO */
/* ============================= */

.jl-icon-glow{
display:flex;
justify-content:center;
align-items:center;
padding:20px;
border-radius:12px;

/* halo blanco suave */
background:rgba(255,255,255,0.05);
box-shadow:0 0 18px rgba(255,255,255,0.15);

transition:all .35s ease;
}

.jl-icon-glow img{
transition:all .35s ease;
transform-origin:center;
}

/* efecto hover */

.jl-icon-glow:hover img{
transform:translateY(-6px) scale(1.05);
filter:brightness(1.3) drop-shadow(0 0 10px rgba(240,201,106,.8));
}

/* halo dorado al pasar el mouse */

.jl-icon-glow:hover{
box-shadow:0 0 25px rgba(201,168,76,.35);
background:rgba(255,255,255,0.08);
}

.reel-video {
    max-width: 350px;
    margin: 0 auto;
}

.reel-video video {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   AJUSTES AL .jl-pcard — descripción + botones
   (ADICIONAL a lo que ya tienes, no reemplaza nada)
   ============================================ */

/* La tarjeta ya no es <a>, ahora es <div>, mantenemos el mismo look */
.jl-pcard {
  cursor: default;
}

.jl-pc-img-link {
  display: block;
  text-decoration: none;
}

/* Descripción corta bajo el nombre */
.jl-pc-desc{
    font-family:'DM Sans','Segoe UI',sans-serif;
    font-size:.78rem;
    color:#888880;
    line-height:1.5;
    margin:6px 0 0;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

/* Reordenar info: ahora apilado (nombre arriba, descripción debajo) en vez de en fila */
.jl-pc-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Quitamos la flechita, ya no aplica con este layout */
.jl-pc-arrow {
  display: none;
}

/* Contenedor de botones */
.jl-pc-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.jl-pc-btn {
  flex: 1;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: all .3s ease;
}

/* Ver detalle — estilo dorado outline, igual línea visual que el resto */
.jl-pc-btn-detalle {
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.4);
  color: #F0C96A;
}
.jl-pc-btn-detalle:hover {
  background: rgba(201,168,76,.18);
  border-color: #C9A84C;
}

/* Hablar con asesor — verde WhatsApp, sólido */
.jl-pc-btn-asesor {
  background: #25D366;
  color: #080808;
}
.jl-pc-btn-asesor:hover {
  background: #1ebe5a;
  transform: translateY(-2px);
}

/* En móvil, botones uno debajo del otro si el espacio queda muy chico */
@media (max-width: 480px) {
  .jl-pc-actions {
    flex-direction: column;
  }
}

/* ============================================
   WIDGET WHATSAPP CON MENÚ DE ASESORES
   (reemplaza al antiguo .whatsapp-float)
   ============================================ */

.wa-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}

.wa-float-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    cursor: pointer;
    transition: transform .3s;
}

.wa-float-btn:hover {
    transform: scale(1.1);
}

.wa-float-btn img {
    width: 100%;
    height: 100%;
}

.wa-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: 74px;
    right: 0;
    width: 260px;
    background: #111;
    border: 1px solid rgba(201,168,76,.25);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}

.wa-menu.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.wa-menu-title {
    font-family: 'DM Sans','Segoe UI',sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #C9A84C;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wa-menu-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .25s ease;
}

.wa-menu-item:last-child {
    border-bottom: none;
}

.wa-menu-item:hover {
    background: rgba(37,211,102,.12);
}

.wa-menu-name {
    font-family: 'DM Sans','Segoe UI',sans-serif;
    font-size: .88rem;
    font-weight: 600;
    color: #E8E2D5;
}

.wa-menu-cargo {
    font-family: 'DM Sans','Segoe UI',sans-serif;
    font-size: .75rem;
    color: #888880;
    margin-top: 2px;
}

@media (max-width: 480px) {
    .wa-menu {
        width: 220px;
    }
}