/*
Theme Name: Centro Joyero Guadalajara
Theme URI: https://centrojoyeroguadalajara.mx
Author: Logiprint Marketing
Author URI: https://logiprint.com.mx
Description: Tema a la medida para el sitio institucional y comercial de Centro Joyero Guadalajara. Compatible con Elementor (gratuito). Consume los CPT y shortcodes de los plugins Centro Joyero Toolkit y Centro Joyero — Eventos para directorio, promociones y eventos. Incluye slider principal, secciones institucionales, directorio dinámico y formulario de contacto.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: centro-joyero
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, e-commerce, one-column, two-columns, three-columns
*/

/* =========================================================
   1. Variables e identidad visual (NO modificar colores)
   ========================================================= */
:root{
  --gold:#B8862B;
  --gold-deep:#8a631d;
  --gold-light:#e7d3a1;
  --ink:#1C1713;
  --ink-soft:#3a3229;
  --cream:#F7F2E8;
  --surface:#ffffff;
  --line:#e6dcc8;
  --muted:#7a6f5e;
  --whatsapp:#2f6b4f;
  --blue:#2d4a6b;
  --radius:2px;
  --container:1160px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Work Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}

/* =========================================================
   2. Reset / contenedor general (sin overflow horizontal)
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); line-height:1.5; overflow-x:hidden;
  min-width:0;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0 0 .4em;}
p{min-width:0;}

.wrap, .cjg-container{
  max-width:var(--container);
  width:100%;
  margin-inline:auto;
  padding-inline:20px;
  box-sizing:border-box;
}

/* Grids: siempre con min-width:0 para evitar que una columna fuerce overflow */
.cjg-grid, .qs-grid, .cat-grid, .steps-grid, .dir-grid, .promo-scroller,
.pilares-grid, .calendario-grid{
  min-width:0;
}
.cjg-grid > *, .qs-grid > *, .cat-grid > *, .steps-grid > *, .dir-grid > *,
.promo-scroller > *, .pilares-grid > *, .calendario-grid > *{
  max-width:100%;
  min-width:0;
}

.eyebrow, .cjg-kicker{font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:600;}

/* =========================================================
   3. Header
   ========================================================= */
.cjg-topbar{background:var(--ink); color:#e6ddc9; font-size:.78rem;}
.cjg-topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:14px; padding-block:8px; flex-wrap:wrap;}
.cjg-topbar a{text-decoration:none; color:#e6ddc9;}
.cjg-topbar a:hover{color:var(--gold-light);}
.cjg-topbar-contact{display:flex; gap:18px; flex-wrap:wrap;}
.cjg-topbar-social{display:flex; align-items:center; gap:10px;}
.cjg-topbar-social span{color:#b4a98f;}
.cjg-topbar-social a{width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;}
.cjg-topbar-social a:hover{border-color:var(--gold);}

header.site{position:sticky; top:0; z-index:50; background:rgba(247,242,232,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:40px; width:auto;}
.brand-text{font-family:var(--serif); font-size:1.05rem; color:var(--ink); line-height:1.1;}
.brand-text small{display:block; font-size:.6em; letter-spacing:.1em; color:var(--muted);}
nav.links{display:flex; gap:28px; font-size:.88rem; flex-wrap:wrap;}
nav.links a{text-decoration:none; color:var(--ink-soft);}
nav.links a:hover, nav.links a.current, nav.links .current-menu-item a{color:var(--gold-deep);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.icon-btn{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;}
.icon-btn:hover{border-color:var(--gold); color:var(--gold-deep);}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:50%; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer;}
.mobile-panel{display:none; flex-direction:column; gap:2px; padding:8px 20px 18px; border-top:1px solid var(--line);}
.mobile-panel a{padding:10px 4px; text-decoration:none; color:var(--ink-soft); border-bottom:1px solid var(--line); font-size:.92rem;}
body.nav-open .mobile-panel{display:flex;}
@media (max-width:860px){ nav.links, .nav-actions .icon-btn.desktop-only{display:none;} .burger{display:flex;} }

/* =========================================================
   4. Botones
   ========================================================= */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-size:.86rem; letter-spacing:.03em; text-decoration:none; cursor:pointer; border-radius:var(--radius); border:1px solid transparent; font-family:var(--sans); font-weight:600;}
.btn-gold{background:var(--gold); color:#211a0d; border-color:var(--gold);}
.btn-gold:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:#fff;}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{border-color:var(--gold-deep); color:var(--gold-deep);}
.btn-whatsapp{background:var(--whatsapp); color:#fff; border-color:var(--whatsapp);}
.btn-whatsapp:hover{filter:brightness(1.08);}
.btn svg{width:16px; height:16px; flex:none;}

/* =========================================================
   5. Slider principal — NO modificar una vez implementado
   ========================================================= */
.cjg-slider{position:relative; overflow:hidden; background:linear-gradient(135deg,#241d13,#14100b 55%,#1b150e); isolation:isolate;}
.cjg-slider-track{display:flex; width:100%; height:100%; transition:transform .6s ease;}
.cjg-slide{position:relative; flex:0 0 100%; width:100%; min-height:420px; display:flex; align-items:center;}
.cjg-slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; z-index:0;}
.cjg-slide .wrap{position:relative; z-index:1;}
.cjg-slide h1,.cjg-slide h2{color:#fbf6ea; font-size:clamp(2.1rem,5vw,3.4rem); max-width:14ch;}
.cjg-slide p.lead{color:#e6ddc9; max-width:52ch; font-size:1.05rem; margin-bottom:28px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:40px;}
.chip{font-size:.76rem; color:#f3ead2; border:1px solid rgba(255,255,255,.28); padding:7px 14px; border-radius:20px; background:rgba(255,255,255,.06);}
.cjg-slider-dots{position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:8px; z-index:2;}
.cjg-slider-dots button{width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:transparent; padding:0; cursor:pointer;}
.cjg-slider-dots button.is-active{background:var(--gold); border-color:var(--gold);}
.cjg-slider-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.25); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.cjg-slider-arrow:hover{border-color:var(--gold); color:var(--gold);}
.cjg-slider-arrow.prev{left:18px;} .cjg-slider-arrow.next{right:18px;}
@media (max-width:640px){.cjg-slide{min-height:360px;} .cjg-slider-arrow{display:none;}}

section{padding-block:76px;}
.section-head, .cjg-section-head{max-width:640px; margin-bottom:44px;}
.section-head p, .cjg-section-head p{color:var(--muted); font-size:1rem;}

/* =========================================================
   6. Quiénes somos — DOS columnas reales (Grid)
   ========================================================= */
/*.cjg-ref-section{border-bottom:1px solid var(--line);}*/
.cjg-ref-cream{background:var(--cream);}
.cjg-who .cjg-who-grid, .qs-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:start;
  width:100%;
}
.cjg-who-copy p, .qs-copy p{color:var(--ink-soft); font-size:1.02rem; margin:0 0 16px;}
.cjg-find-card, .qs-panel{background:var(--surface); border:1px solid var(--line); padding:28px; min-width:0;}
.metal-list{display:flex; flex-wrap:wrap; gap:8px;}
.metal-list span{font-size:.78rem; border:1px solid var(--line); padding:6px 12px; border-radius:20px; color:var(--ink-soft);}
@media (max-width:860px){
  .cjg-who .cjg-who-grid, .qs-grid{grid-template-columns:1fr;}
}

/* =========================================================
   7. Categorías / Recorre el sitio — 3 col desktop, 2 tablet, 1 mobile
   ========================================================= */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{border:1px solid var(--line); background:var(--surface); padding:22px; min-width:0;}
.cat-card h3{font-size:1.05rem; margin-bottom:8px;}
.cat-card p{color:var(--muted); font-size:.9rem; margin:0 0 14px;}

/* Cómo visitarnos — pasos numerados */
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){.steps-grid{grid-template-columns:1fr;}}
.step-card{padding:6px 0; min-width:0;}
.step-num{font-family:var(--serif); font-size:1.6rem; color:var(--gold); display:block; margin-bottom:8px;}
.step-card h3{font-size:1.05rem; margin-bottom:6px;}
.step-card p{color:var(--muted); font-size:.92rem; margin:0;}

/* =========================================================
   8. Directorio
   ========================================================= */
.cjg-directorio-wrap, #directorio{background:var(--surface);}
.cjg-dir-toolbar{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; align-items:center; justify-content:space-between;}
.filters, .cjg-filtros{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0; padding:18px; background:var(--cream); border:1px solid var(--line); flex:1;}
.filters select, .filters input, .cjg-filtros select, .cjg-filtros input{font-family:var(--sans); font-size:.86rem; padding:10px 12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--radius); min-width:150px;}
.filters input, .cjg-filtros input{flex:1; min-width:200px;}
.cjg-dir-view-toggle{display:flex; gap:6px; flex:none;}
.cjg-dir-view-toggle button{width:36px; height:36px; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.cjg-dir-view-toggle button.is-active{border-color:var(--gold); color:var(--gold-deep);}
.dir-grid, .cjg-dir-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.dir-grid.cjg-cols-2, .cjg-dir-grid.cjg-cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:960px){.dir-grid, .cjg-dir-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.dir-grid, .cjg-dir-grid{grid-template-columns:1fr;} .filters select,.filters input,.cjg-filtros select,.cjg-filtros input{min-width:0; width:100%;}}
.loc-card{border:1px solid var(--line); background:var(--cream); padding:22px; display:flex; flex-direction:column; gap:12px; min-width:0;}
.loc-card:hover{border-color:var(--gold);}
.loc-top{display:flex; align-items:center; gap:12px;}
.loc-avatar{width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden; background:linear-gradient(135deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; color:#26200f;}
.loc-avatar img{width:100%; height:100%; object-fit:cover;}
.loc-name{font-family:var(--serif); font-size:1.05rem;}
.loc-meta{font-size:.78rem; color:var(--muted);}
.loc-tags{display:flex; gap:6px; flex-wrap:wrap;}
.loc-tags span{font-size:.7rem; padding:4px 9px; border:1px solid var(--line); border-radius:14px; color:var(--ink-soft);}
.no-results, .cjg-sin-resultados{color:var(--muted); font-size:.92rem; padding:20px 0;}
.cjg-pagination{display:flex; gap:8px; justify-content:center; margin-top:32px; flex-wrap:wrap;}
.cjg-pagination a, .cjg-pagination span{padding:8px 14px; border:1px solid var(--line); font-size:.82rem; text-decoration:none;}
.cjg-pagination .current{background:var(--gold); border-color:var(--gold); color:#211a0d;}
.cjg-back-link{display:inline-block; margin-bottom:24px; font-size:.86rem; color:var(--gold-deep); text-decoration:none;}
.cjg-back-link:hover{text-decoration:underline;}

/* =========================================================
   9. Promociones / Eventos
   ========================================================= */
.promo-scroller{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){.promo-scroller{grid-template-columns:1fr;}}
.promo-card{border:1px solid var(--line); background:var(--surface); overflow:hidden; min-width:0;}
.promo-band{height:120px; background:linear-gradient(135deg,var(--ink),#2c2418); position:relative;}
.promo-band img{width:100%; height:100%; object-fit:cover;}
.promo-badge{position:absolute; top:14px; left:14px; background:var(--gold); color:#221b0c; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; font-weight:700;}
.promo-body{padding:20px;}
.promo-body p{color:var(--muted); font-size:.92rem; margin:0 0 14px;}

/* =========================================================
   10. Contacto
   ========================================================= */
#contacto{background:var(--surface);}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
form.contact-form, .cjg-contact-form{display:grid; gap:16px; min-width:0;}
.field{display:grid; gap:6px;}
.field label{font-size:.8rem; color:var(--muted);}
.field input,.field textarea{font-family:var(--sans); font-size:.94rem; padding:12px 14px; border:1px solid var(--line); background:var(--cream); color:var(--ink); border-radius:var(--radius); resize:vertical; width:100%;}
.consent{display:flex; align-items:flex-start; gap:10px; font-size:.8rem; color:var(--muted);}
.form-msg{font-size:.85rem; color:var(--whatsapp); background:#eaf4ee; border:1px solid var(--whatsapp); padding:12px 14px; margin-bottom:10px;}
.form-msg.is-error{color:#7a2b22; background:#fbeae7; border-color:#c0493a;}
.info-panel{background:var(--cream); border:1px solid var(--line); padding:28px; display:flex; flex-direction:column; gap:22px; min-width:0;}
.info-row{display:flex; gap:14px;}
.info-row .ico{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none; color:var(--gold-deep);}
.info-row h4{margin:0 0 4px; font-size:.92rem;}
.info-row p{margin:0; font-size:.86rem; color:var(--muted);}
.cjg-map iframe{width:100%; height:220px; border:1px solid var(--line);}
.map-placeholder{border:1px dashed var(--line); background:var(--cream); height:220px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.85rem; text-align:center; padding:20px;}

/* =========================================================
   11. Footer
   ========================================================= */
footer.site{background:var(--ink); color:#d9cfbb; padding-block:44px 28px;}
.foot-grid{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12);}
.foot-brand{display:flex; align-items:center; gap:10px;}
.foot-brand img{height:auto; filter:brightness(0) invert(1);}
.foot-brand span{font-family:var(--serif); color:#f2ece0;}
.foot-col h4{color:#f2ece0; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.foot-col a{color:#d9cfbb; text-decoration:none; font-size:.88rem;}
.foot-col a:hover{color:var(--gold-light);}
.foot-newsletter form{display:flex; gap:8px; flex-wrap:wrap;}
.foot-newsletter input[type=email]{flex:1; min-width:160px; padding:10px 12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#f2ece0; border-radius:var(--radius);}
.foot-social{display:flex; gap:10px;}
.foot-social a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:#e6ddc9; text-decoration:none;}
.foot-social a:hover{border-color:var(--gold); color:var(--gold);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:20px; font-size:.78rem; color:#9c927c;}

.page-hero{background:var(--ink); color:#f3ead2; padding-block:60px;}
.page-hero h1{color:#fbf6ea;}

/* pilares (quiénes somos) */
.pilares-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:16px;}
@media (max-width:900px){.pilares-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.pilares-grid{grid-template-columns:1fr;}}
.pilar-card{border:1px solid var(--line); background:var(--cream); padding:20px; min-width:0;}
.pilar-card h3{font-size:.98rem; margin-bottom:6px;}
.pilar-card p{color:var(--muted); font-size:.88rem; margin:0;}
.cta-band{background:var(--ink); color:#f3ead2; padding:40px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:56px;}
.cta-band h3{color:#fbf6ea; margin:0 0 4px;}
.cta-band p{margin:0; color:#e6ddc9;}

/* calendario temporadas (promociones) */
.calendario-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:960px){.calendario-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.calendario-grid{grid-template-columns:1fr;}}
.temporada-card{border:1px solid var(--line); background:var(--cream); padding:18px; min-width:0;}
.temporada-card .eyebrow{display:block; margin-bottom:6px;}
.temporada-card h3{font-size:.98rem; margin-bottom:6px;}
.temporada-card p{color:var(--muted); font-size:.86rem; margin:0;}

/* FAQ */
.faq-list{display:grid; gap:14px; max-width:760px;}
.faq-item{border:1px solid var(--line); background:var(--cream); padding:18px 20px; min-width:0;}
.faq-item h4{margin:0 0 6px; font-size:.96rem;}
.faq-item p{margin:0; color:var(--muted); font-size:.9rem;}

/* franja social */
.social-band{background:var(--ink); padding-block:56px;}
.social-band-inner{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.social-band-inner h2{margin:0; font-size:1.4rem;}

/* =========================================================
   12. Utilidades generales de contenido (the_content)
   ========================================================= */
.cjg-entry-content{max-width:100%; min-width:0;}
.cjg-entry-content img{border-radius:var(--radius);}