/* =================================================================
   MISTEREIA — Sectores
   Aditivo sobre styles.min.css. Solo se carga en /sectores y en las
   páginas de nicho (clinicas, restaurantes, y las que vengan).
   Define: tokens de acento por sector, el hero con motif de canvas,
   la tarjeta del hub, y la sección "Y en tu negocio".
   ================================================================= */

/* ---------- Tokens por sector ---------- */
/* Restaurantes: cálido, mediterráneo — ámbar de atardecer -> terracota profunda */
body[data-sector="restaurantes"],
.sector-card[data-sector="restaurantes"] {
  --sector-accent: #E2723A;
  --sector-accent-2: #F2B84B;
  --sector-deep: #7A2E22;
  --grad-sector: linear-gradient(120deg, #F2B84B 0%, #E2723A 55%, #7A2E22 100%);
}

/* Clínicas: frío, confianza clínica — cian eléctrico -> azul profundo */
body[data-sector="clinicas"],
.sector-card[data-sector="clinicas"] {
  --sector-accent: #1B6FFF;
  --sector-accent-2: #00D4FF;
  --sector-deep: #0B3D91;
  --grad-sector: linear-gradient(120deg, #00D4FF 0%, #1B6FFF 55%, #0B3D91 100%);
}

.grad-sector {
  background: var(--grad-sector, var(--grad-spectrum)); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn--sector {
  position: relative; color: #fff; background: rgba(10,10,12,.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); isolation: isolate;
}
.btn--sector::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad-sector, var(--grad-spectrum)); background-size: 220% auto;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn--sector:hover { transform: translateY(-3px); }

/* ---------- Hero de nicho con motif de canvas ---------- */
.page-hero--sector { position: relative; overflow: hidden; }
.sector-hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .8; pointer-events: none;
}
.page-hero--sector .container { position: relative; z-index: 1; }
.page-hero--sector::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(0,0,0,0) 0%, var(--dark-2) 72%);
  z-index: 0; pointer-events: none;
}

/* ---------- Tarjeta del hub /sectores ---------- */
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sector-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.sector-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.sector-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad-sector, var(--line-2));
}
.sector-card__swatch {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--grad-sector, var(--line-2)); box-shadow: var(--shadow-sm);
}
.sector-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.sector-card__desc { color: var(--ink-2); font-size: .95rem; flex: 1; }
.sector-card__status {
  align-self: flex-start; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem;
  border-radius: var(--pill); background: var(--bg-2); color: var(--ink-3);
}
.sector-card--live .sector-card__status { background: rgba(255,106,26,.12); color: var(--orange-deep); }
.sector-card__link { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.sector-card__link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.sector-card:hover .sector-card__link svg { transform: translateX(4px); }

@media (max-width: 900px) { .sector-grid { grid-template-columns: 1fr; } }

/* ---------- "Y en tu negocio" ---------- */
.sector-fit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sector-fit__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s;
}
.sector-fit__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.sector-fit__tag {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sector-accent, var(--orange)); margin-bottom: .6rem;
}
.sector-fit__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; }
.sector-fit__card p { color: var(--ink-2); font-size: .9rem; }

@media (max-width: 900px) { .sector-fit { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .sector-fit { grid-template-columns: 1fr; } }

/* ---------- Panel "de demo a negocio real" ---------- */
.sector-honest { border-left: 3px solid var(--sector-accent, var(--orange)); padding-left: 20px; }

/* ---------- "Por qué por sector" (hub) ---------- */
.sector-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .sector-why { grid-template-columns: 1fr; } }