/* ══════════════════════════════════════════════════════════════════════
   IBERLUFFA — FAQ Popup (módulo independiente)
   ──────────────────────────────────────────────────────────────────────
   Todo dentro del prefijo `.faq-`. Para eliminarlo: borra este archivo y
   `faq.js`, quita las dos referencias en los .html.
   ══════════════════════════════════════════════════════════════════════ */

.faq-bg{
  position:fixed; inset:0;
  background:rgba(39,64,1,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease-out;
  z-index:9100;
}
.faq-bg.faq-vis{ opacity:1; pointer-events:all; }

.faq-modal{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%, calc(-50% + 12px)) scale(.96);
  width:min(680px, calc(100vw - 24px));
  max-height:min(86vh, 800px);
  background:var(--cr, #F4E9D3);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 70px -16px rgba(39,64,1,.4), 0 8px 22px rgba(39,64,1,.14);
  z-index:9110;
  opacity:0; pointer-events:none;
  transition:opacity .26s ease-out, transform .35s cubic-bezier(.22,1.2,.36,1);
  display:flex; flex-direction:column;
  font-family:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:var(--v, #274001);
}
.faq-modal.faq-open{
  opacity:1; pointer-events:all;
  transform:translate(-50%, -50%) scale(1);
}

/* Header */
.faq-head{
  position:relative;
  padding:24px 60px 18px 28px;
  background:var(--v, #274001);
  color:var(--cr, #F4E9D3);
  flex-shrink:0;
  overflow:hidden;
}
.faq-head::before{
  content:''; position:absolute;
  right:-40px; bottom:-50px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(162,191,106,.35) 0%, transparent 70%);
  pointer-events:none;
}
.faq-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--vl, #A2BF6A);
  margin-bottom:6px;
}
.faq-eyebrow::before{
  content:''; width:18px; height:1.5px; background:var(--vl, #A2BF6A);
}
.faq-title{
  font-family:var(--ff-display, 'CooperBlack'), Georgia, serif;
  font-size:clamp(24px, 4.2vw, 32px);
  font-weight:400; letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 8px;
  line-height:1.05;
}
.faq-sub{
  font-size:13px; color:rgba(244,233,211,.8);
  margin:0; line-height:1.5;
  max-width:520px;
}
.faq-close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(244,233,211,.16);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, transform .25s ease;
}
.faq-close:hover{ background:rgba(244,233,211,.3); transform:rotate(90deg); }
.faq-close svg{ width:16px; height:16px; stroke:var(--cr, #F4E9D3); stroke-width:2.2; fill:none; stroke-linecap:round; }

/* Tabs por categorías */
.faq-cats{
  display:flex; gap:6px;
  padding:14px 22px 0;
  background:var(--cr, #F4E9D3);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  border-bottom:1px solid rgba(39,64,1,.1);
  flex-shrink:0;
}
.faq-cats::-webkit-scrollbar{ display:none; }
.faq-cat{
  appearance:none; border:none; cursor:pointer;
  padding:8px 14px 12px;
  background:none;
  font-family:inherit;
  font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(39,64,1,.5);
  white-space:nowrap;
  position:relative;
  transition:color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.faq-cat:hover{ color:var(--v, #274001); }
.faq-cat.faq-on{ color:var(--v, #274001); }
.faq-cat.faq-on::after{
  content:''; position:absolute;
  left:14px; right:14px; bottom:0;
  height:2px; background:var(--v, #274001);
  border-radius:2px 2px 0 0;
}

/* Body con lista */
.faq-body{
  flex:1; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 22px 22px;
  background:var(--cr, #F4E9D3);
}
.faq-body::-webkit-scrollbar{ width:6px; }
.faq-body::-webkit-scrollbar-thumb{ background:rgba(39,64,1,.15); border-radius:3px; }

.faq-list{
  display:flex; flex-direction:column;
  gap:8px;
}

/* Item (acordeón) */
.faq-item{
  background:#fff;
  border:1px solid rgba(39,64,1,.08);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faq-item.faq-open{
  border-color:rgba(39,64,1,.18);
  box-shadow:0 10px 24px -10px rgba(39,64,1,.18);
}
.faq-q{
  width:100%;
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  background:none; border:none; cursor:pointer;
  font-family:inherit;
  font-size:14px; font-weight:600;
  color:var(--v, #274001);
  text-align:left;
  letter-spacing:.005em;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.faq-q:hover{ background:rgba(162,191,106,.06); }
.faq-q-num{
  flex-shrink:0;
  width:28px; height:28px; border-radius:50%;
  background:var(--vl, #A2BF6A);
  color:var(--v, #274001);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  letter-spacing:0;
}
.faq-item.faq-open .faq-q-num{
  background:var(--v, #274001);
  color:var(--vl, #A2BF6A);
}
.faq-q-text{
  flex:1; line-height:1.4;
}
.faq-q-icon{
  flex-shrink:0;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--v, #274001);
  transition:transform .3s cubic-bezier(.22,1.2,.36,1);
}
.faq-q-icon svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.faq-item.faq-open .faq-q-icon{ transform:rotate(180deg); }

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.22,1,.36,1);
}
.faq-item.faq-open .faq-a{ max-height:640px; }
.faq-a-inner{
  padding:0 18px 16px 60px;
  font-size:13.5px; line-height:1.6;
  color:rgba(39,64,1,.78);
}
.faq-a-inner p{ margin:0 0 10px; }
.faq-a-inner p:last-child{ margin-bottom:0; }
.faq-a-inner ul{
  list-style:none; padding:0; margin:8px 0 0;
}
.faq-a-inner ul li{
  position:relative;
  padding:4px 0 4px 18px;
  font-size:13px;
}
.faq-a-inner ul li::before{
  content:''; position:absolute;
  left:0; top:13px;
  width:6px; height:6px; border-radius:50%;
  background:var(--vl, #A2BF6A);
}
.faq-a-inner strong{ color:var(--v, #274001); font-weight:700; }

/* Footer con CTA a contacto */
.faq-foot{
  flex-shrink:0;
  padding:14px 22px;
  border-top:1px solid rgba(39,64,1,.1);
  background:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.faq-foot-txt{
  font-size:12.5px;
  color:rgba(39,64,1,.7);
  margin:0;
}
.faq-foot-txt strong{ color:var(--v, #274001); font-weight:700; }
.faq-foot-cta{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  background:var(--v, #274001); color:var(--cr, #F4E9D3);
  border-radius:999px;
  font-size:12px; font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.faq-foot-cta:hover{ background:var(--save, #4F6E20); transform:translateY(-1px); }
.faq-foot-cta svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; }

/* ── MOBILE: fullscreen bottom sheet ────────────────────────────────── */
@media (max-width:768px){
  .faq-modal{
    left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:100%;
    max-height:92vh;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
  }
  .faq-modal.faq-open{ transform:translateY(0); }

  .faq-modal::before{
    content:''; position:absolute; top:8px; left:50%;
    width:42px; height:4px; border-radius:4px;
    background:rgba(244,233,211,.4);
    transform:translateX(-50%);
    z-index:10;
  }
  .faq-head{ padding:24px 56px 16px 22px; }
  .faq-title{ font-size:22px; }
  .faq-sub{ font-size:12.5px; }
  .faq-cats{ padding:12px 18px 0; }
  .faq-cat{ padding:7px 12px 11px; font-size:11px; }
  .faq-body{ padding:14px 18px 18px; }
  .faq-q{ padding:13px 14px; font-size:13.5px; gap:11px; }
  .faq-q-num{ width:26px; height:26px; font-size:10.5px; }
  .faq-a-inner{ padding:0 14px 14px 51px; font-size:13px; }
  .faq-foot{ padding:12px 18px; }
  .faq-foot-txt{ font-size:12px; }
}