/* Bencefalo v103 — home cards + finder modal + recommendation color system */

/* Cómo funciona: only Bencefalo brand tones */
.how-process-section{
  background:
    radial-gradient(58rem 30rem at 18% 0%,rgba(124,58,237,.16),transparent 64%),
    radial-gradient(54rem 30rem at 88% 100%,rgba(112,19,55,.23),transparent 68%),
    linear-gradient(135deg,#05050c 0%,#100712 43%,#160b27 100%)!important;
}

/* Tarot cards: wider, less dead space, same treatment on Home and Catalog */
.service-scroll{
  grid-auto-columns:minmax(370px,410px)!important;
  gap:20px!important;
}
.catalog-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
}
.service-scroll .service-card,
.catalog-grid .service-card{
  min-height:285px!important;
  height:auto!important;
  padding:27px 26px 24px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
.service-scroll .service-card h3,
.catalog-grid .service-card h3{
  font-size:25px!important;
  line-height:1.08!important;
  margin:0 0 13px!important;
}
.service-scroll .service-card p,
.catalog-grid .service-card p{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-size:14px!important;
  line-height:1.62!important;
}
.service-scroll .service-card .service-detail-link,
.catalog-grid .service-card .service-detail-link{
  align-self:center!important;
  justify-content:center!important;
  min-height:39px!important;
  margin:24px auto 0!important;
  padding:9px 18px!important;
  border:1px solid rgba(var(--accent-rgb,164,126,255),.34)!important;
  border-radius:999px!important;
  background:rgba(var(--accent-rgb,164,126,255),.075)!important;
  box-shadow:none!important;
  color:var(--accent,#c997ff)!important;
  font-family:var(--font-ui,Inter,Arial,sans-serif)!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:700!important;
  text-decoration:none!important;
}
.service-scroll .service-card .service-detail-link:hover,
.catalog-grid .service-card .service-detail-link:hover{
  border-color:rgba(var(--accent-rgb,164,126,255),.58)!important;
  background:rgba(var(--accent-rgb,164,126,255),.13)!important;
  text-decoration:none!important;
  transform:translateY(-1px);
}

/* Finder is now a modal, never a full-page wizard */
.finder-modal{
  position:fixed;
  inset:0;
  z-index:1050;
  display:grid;
  place-items:center;
  padding:24px;
}
.finder-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,1,8,.82);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.finder-modal-card{
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  max-height:min(88vh,860px);
  overflow:auto;
  padding:26px 30px 30px;
  border:1px solid rgba(164,126,255,.24);
  border-radius:24px;
  background:
    radial-gradient(48rem 28rem at 100% 0%,rgba(124,58,237,.13),transparent 64%),
    radial-gradient(38rem 24rem at 0% 100%,rgba(112,19,55,.12),transparent 68%),
    linear-gradient(150deg,#0d0b1b,#05060d 72%);
  box-shadow:0 36px 110px rgba(0,0,0,.68);
}
.finder-modal-close{
  position:absolute;
  z-index:3;
  top:14px;
  right:14px;
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.025)!important;
  color:#dcd6e3!important;
  font:400 21px/1 var(--font-ui,Inter,Arial,sans-serif)!important;
}
.finder-modal-progress{
  height:3px!important;
  margin:18px 40px 28px 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(164,126,255,.08)!important;
}
.finder-modal-progress span{
  display:block!important;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#b14cff,#7c3aed)!important;
  transition:width .25s ease!important;
}
.finder-modal-body{width:100%}
.finder-modal-heading{
  width:100%;
  margin:0 0 24px;
  text-align:left;
}
.finder-modal-heading h2{
  margin:0 0 8px!important;
  color:#f7f2fa!important;
  font-family:var(--font-display,"AngleFairy",Georgia,serif)!important;
  font-size:38px!important;
  line-height:1.05!important;
  font-weight:400!important;
}
.finder-modal-heading p{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  color:#9f98aa!important;
  font-family:var(--font-body,Newsreader,Georgia,serif)!important;
  font-size:14px!important;
  line-height:1.55!important;
}

/* Topics: compact horizontal cards, 3/2/1 columns by device */
.finder-topic-modal-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.finder-topic-mini{
  --accent:#a855f7;
  --accent-rgb:168,85,247;
  min-width:0;
  min-height:84px;
  display:grid;
  grid-template-columns:43px minmax(0,1fr) 14px;
  gap:12px;
  align-items:center;
  padding:13px 14px;
  text-align:left;
  border:1px solid rgba(var(--accent-rgb),.20);
  border-radius:15px;
  background:
    radial-gradient(15rem 9rem at 0 0,rgba(var(--accent-rgb),.11),transparent 70%),
    rgba(7,8,18,.82);
  color:#fff;
  transition:.16s ease;
}
.finder-topic-mini:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--accent-rgb),.48);
  background:
    radial-gradient(15rem 9rem at 0 0,rgba(var(--accent-rgb),.17),transparent 70%),
    rgba(10,9,22,.94);
}
.finder-topic-mini-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(var(--accent-rgb),.22);
  background:rgba(var(--accent-rgb),.10);
  color:var(--accent);
}
.finder-topic-mini-icon svg{width:22px;height:22px}
.finder-topic-mini-copy{display:grid;gap:4px;min-width:0}
.finder-topic-mini-copy strong{
  color:#f5f1f8;
  font-family:var(--font-ui,Inter,Arial,sans-serif);
  font-size:12px;
  line-height:1.25;
  font-weight:700;
}
.finder-topic-mini-copy small{
  color:#8f899a;
  font-family:var(--font-ui,Inter,Arial,sans-serif);
  font-size:9.5px;
  line-height:1.35;
  font-weight:400;
}
.finder-topic-mini-arrow{
  align-self:center;
  color:rgba(var(--accent-rgb),.72);
  font-size:12px;
}

/* Topic palette follows the existing Bencefalo palette */
.finder-topic-mini.topic-general{--accent:#c084fc;--accent-rgb:192,132,252}
.finder-topic-mini.topic-amor{--accent:#f472b6;--accent-rgb:244,114,182}
.finder-topic-mini.topic-economia{--accent:#facc15;--accent-rgb:250,204,21}
.finder-topic-mini.topic-salud{--accent:#34d399;--accent-rgb:52,211,153}
.finder-topic-mini.topic-profesion{--accent:#fb923c;--accent-rgb:251,146,60}
.finder-topic-mini.topic-familia{--accent:#22d3ee;--accent-rgb:34,211,238}
.finder-topic-mini.topic-personal{--accent:#38bdf8;--accent-rgb:56,189,248}
.finder-topic-mini.topic-espiritualidad{--accent:#f8fafc;--accent-rgb:248,250,252}
.finder-topic-mini.topic-creatividad{--accent:#60a5fa;--accent-rgb:96,165,250}
.finder-topic-mini.topic-viajes{--accent:#a78bfa;--accent-rgb:167,139,250}
.finder-topic-mini.topic-legales{--accent:#cbd5e1;--accent-rgb:203,213,225}
.finder-topic-mini.topic-mente{--accent:#86efac;--accent-rgb:134,239,172}
.finder-topic-mini.topic-negocios{--accent:#f4c65d;--accent-rgb:244,198,93}
.finder-topic-mini.topic-balance{--accent:#8b5cf6;--accent-rgb:139,92,246}
.finder-topic-mini.topic-analisis-energetico{--accent:#d946ef;--accent-rgb:217,70,239}

.finder-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.finder-choice{
  min-height:58px;
  padding:13px 15px;
  border:1px solid rgba(164,126,255,.17);
  border-radius:14px;
  background:rgba(12,10,25,.80);
  color:#dcd6e3;
  font-family:var(--font-ui,Inter,Arial,sans-serif);
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  text-align:left;
}
.finder-choice:hover{
  border-color:rgba(201,151,255,.42);
  background:rgba(54,27,88,.35);
  color:#fff;
}

/* Recommendation cards inherit each reading's established identity */
.finder-reco,
.finder-alt{
  --accent:#c997ff;
  --accent-rgb:201,151,255;
}
.finder-reco.service-tarot-express,.finder-alt.service-tarot-express{--accent:#34d399;--accent-rgb:52,211,153}
.finder-reco.service-caminos-abiertos,.finder-alt.service-caminos-abiertos{--accent:#60a5fa;--accent-rgb:96,165,250}
.finder-reco.service-sesion-oracular,.finder-alt.service-sesion-oracular{--accent:#fb923c;--accent-rgb:251,146,60}
.finder-reco.service-tarot-amor,.finder-alt.service-tarot-amor{--accent:#ef4444;--accent-rgb:239,68,68}
.finder-reco.service-presente-pasado-futuro,.finder-alt.service-presente-pasado-futuro{--accent:#a78bfa;--accent-rgb:167,139,250}
.finder-reco.service-sesion-terapeutica,.finder-alt.service-sesion-terapeutica{--accent:#22d3ee;--accent-rgb:34,211,238}
.finder-reco.service-rueda-ano,.finder-alt.service-rueda-ano{--accent:#facc15;--accent-rgb:250,204,21}

.finder-recommendation-head{text-align:center;margin:0 0 20px}
.finder-recommendation-head .eyebrow{color:#c997ff!important}
.finder-reco{
  padding:26px 28px!important;
  border:1px solid rgba(var(--accent-rgb),.34)!important;
  border-radius:20px!important;
  background:
    radial-gradient(30rem 18rem at 0 0,rgba(var(--accent-rgb),.13),transparent 68%),
    linear-gradient(145deg,rgba(17,13,34,.96),rgba(6,7,16,.98))!important;
  box-shadow:inset 3px 0 0 rgba(var(--accent-rgb),.52)!important;
}
.finder-reco h3{
  margin:0!important;
  color:var(--accent)!important;
  font-size:35px!important;
  line-height:1.05!important;
}
.finder-reco .meta{
  margin:8px 0 17px!important;
  color:var(--accent)!important;
  font-size:12px!important;
  font-weight:700!important;
}
.finder-reco p{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  color:#c4bdca!important;
  font-size:14px!important;
  line-height:1.62!important;
}
.finder-reco .reco-actions{
  justify-content:flex-end!important;
  margin-top:20px!important;
}
.finder-primary{
  min-height:41px!important;
  padding:9px 17px!important;
  border:1px solid rgba(var(--accent-rgb),.62)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.96),rgba(var(--accent-rgb),.72))!important;
  color:#09070e!important;
  box-shadow:0 9px 24px rgba(var(--accent-rgb),.14)!important;
  font-size:11px!important;
  font-weight:700!important;
}
.finder-alt{
  margin-top:12px!important;
  padding:15px 17px!important;
  border:1px solid rgba(var(--accent-rgb),.20)!important;
  border-radius:16px!important;
  background:rgba(var(--accent-rgb),.025)!important;
}
.finder-alt small{
  display:block;
  margin-bottom:4px;
  color:#9b94a5!important;
  font-size:9px!important;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.finder-alt>div>div{color:var(--accent)!important;font-size:13px!important;font-weight:700!important}
.finder-dark{
  min-height:39px!important;
  padding:8px 16px!important;
  border:1px solid rgba(201,151,255,.22)!important;
  border-radius:999px!important;
  background:rgba(8,8,18,.82)!important;
  color:#dcd6e3!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:700!important;
}
.finder-dark:hover{
  border-color:rgba(201,151,255,.42)!important;
  background:rgba(28,18,45,.92)!important;
}
.finder-secondary-actions{
  justify-content:flex-start!important;
  gap:9px!important;
  margin-top:20px!important;
}

@media(max-width:900px){
  .finder-topic-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  .service-scroll{grid-auto-columns:minmax(88vw,1fr)!important;gap:14px!important}
  .catalog-grid{grid-template-columns:1fr!important}
  .service-scroll .service-card,
  .catalog-grid .service-card{
    min-height:0!important;
    padding:24px 22px 22px!important;
  }
  .finder-modal{padding:10px}
  .finder-modal-card{
    max-height:94vh;
    padding:20px 14px 18px;
    border-radius:20px;
  }
  .finder-modal-progress{margin:18px 42px 22px 0!important}
  .finder-modal-heading{margin-bottom:18px}
  .finder-modal-heading h2{font-size:30px!important}
  .finder-modal-heading p{font-size:13px!important}
  .finder-topic-modal-grid{grid-template-columns:1fr;gap:8px}
  .finder-topic-mini{min-height:72px;padding:10px 11px;grid-template-columns:39px minmax(0,1fr) 12px}
  .finder-topic-mini-icon{width:39px;height:39px}
  .finder-topic-mini-icon svg{width:20px;height:20px}
  .finder-topic-mini-copy strong{font-size:11.5px}
  .finder-topic-mini-copy small{font-size:9px}
  .finder-choice-grid{grid-template-columns:1fr}
  .finder-choice{min-height:50px}
  .finder-reco{padding:21px 18px!important}
  .finder-reco h3{font-size:30px!important}
  .finder-reco .reco-actions{justify-content:stretch!important}
  .finder-primary{width:100%!important}
  .finder-alt{align-items:flex-start!important;gap:14px!important}
  .finder-secondary-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .finder-secondary-actions .finder-dark{width:100%!important;padding-left:10px!important;padding-right:10px!important}
}

/* v103.1: recommendation buttons must not inherit the global purple CTA */
.finder-modal-card .btn.finder-primary{
  background-image:none!important;
  background-color:var(--accent)!important;
  border-color:rgba(var(--accent-rgb),.70)!important;
  color:#08070d!important;
}
.finder-modal-card .btn.finder-dark{
  background-image:none!important;
  background-color:#0b0a14!important;
  border-color:rgba(201,151,255,.24)!important;
  color:#dcd6e3!important;
  box-shadow:none!important;
}
.finder-modal-card .btn.finder-dark:hover{
  background-color:#171022!important;
  border-color:rgba(201,151,255,.44)!important;
}