/* Selector de tipo de negocio de /negocios (ver assets/js/negocios-tipos.js, generado por scripts/negocios/build_negocios_tipos.py). */
:root {
  --nt-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --nt-accent: var(--org-accent, #2F7A6B);
  --nt-accent-deep: #1F5A4D;
}

/* Iconos Phosphor (duotone) pintados con máscara: toman el color del texto y conservan los dos tonos. */
.ph { display: inline-block; width: 1em; height: 1em; flex: none; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

.tipos { padding: 0; margin-top: var(--section-gap); scroll-margin-top: 80px; }
.tipos-head { text-align: center; max-width: 680px; margin: 0 auto 34px; }
.tipos-step { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--nt-accent); color: #fff; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.35rem;
  box-shadow: 0 8px 20px -6px rgba(47, 122, 107, 0.55); }
.tipos-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-top: 16px; letter-spacing: -0.01em; }
.tipos-head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.55; }

/* Familias: control segmentado */
.fam-tabs { display: flex; gap: 6px; padding: 6px; max-width: 980px; margin: 0 auto 22px; background: #fff; border: 1px solid rgba(46, 42, 34, 0.1);
  border-radius: 24px; box-shadow: 0 2px 10px rgba(46, 42, 34, 0.05); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fam-tabs::-webkit-scrollbar { display: none; }
.fam-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 20px;
  font: inherit; font-weight: 800; font-size: 0.97rem; white-space: nowrap; color: var(--ink-soft); background: transparent; border: 0; border-radius: 18px; cursor: pointer;
  transition: background-color 160ms var(--nt-ease), color 160ms var(--nt-ease), transform 160ms var(--nt-ease); }
.fam-tab .ph { font-size: 1.45rem; }
.fam-tab[aria-selected="true"] { background: var(--nt-accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(47, 122, 107, 0.6); }
.fam-tab:active { transform: scale(0.97); }
.fam-tab:focus-visible, .kind-card:focus-visible { outline: 3px solid rgba(47, 122, 107, 0.45); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .fam-tab[aria-selected="false"]:hover { background: var(--events-tint); color: var(--nt-accent-deep); } }

/* Tipos de la familia elegida */
.kind-grid { max-width: 980px; margin: 0 auto 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.kind-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; min-height: 76px; font: inherit; color: var(--ink);
  background: #fff; border: 2px solid rgba(46, 42, 34, 0.08); border-radius: 22px; cursor: pointer; position: relative;
  transition: transform 180ms var(--nt-ease), border-color 160ms var(--nt-ease), background-color 160ms var(--nt-ease), box-shadow 160ms var(--nt-ease); }
.kind-grid.is-in .kind-card { animation: nt-in 280ms var(--nt-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
/* El icono va en un recuadro tintado: el recuadro es el elemento y el icono se dibuja con ::before. */
.kind-card-icon { width: 48px; height: 48px; border-radius: 15px; background-color: var(--events-tint); color: var(--nt-accent); flex: none; position: relative;
  -webkit-mask: none; mask: none; }
.kind-card-icon::before { content: ''; position: absolute; inset: 11px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.kind-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kind-card-name { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.kind-card-mode { font-weight: 700; font-size: 0.78rem; color: var(--ink-soft); }
.kind-card[aria-pressed="true"] { border-color: var(--nt-accent); background: var(--events-tint); box-shadow: 0 10px 24px -12px rgba(47, 122, 107, 0.55); }
.kind-card[aria-pressed="true"] .kind-card-icon { background-color: #fff; }
.kind-card[aria-pressed="true"]::after { content: ''; position: absolute; top: 10px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--nt-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px; background-repeat: no-repeat; background-position: center; }
.kind-card:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .kind-card:hover { transform: translateY(-2px); border-color: rgba(47, 122, 107, 0.5); box-shadow: 0 12px 26px -14px rgba(46, 42, 34, 0.35); } .kind-card:hover:active { transform: scale(0.97); } }

/* Escenario: aviso inicial y detalle del tipo */
.tipos-stage { max-width: 1040px; margin: 0 auto; scroll-margin-top: 84px; }
.stage-empty { text-align: center; padding: 46px 24px 50px; border-radius: 32px; background: linear-gradient(180deg, #E3F0EA, #F1F7F4); box-shadow: inset 0 0 0 1px rgba(47, 122, 107, 0.14); }
.stage-empty-arrow { font-size: 2.2rem; color: var(--nt-accent); animation: nt-bob 1.6s var(--nt-ease) infinite; }
.stage-empty-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.55rem; margin-top: 10px; }
.stage-empty-text { margin: 10px auto 0; max-width: 520px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }

.stage-head { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 8px 6px 28px; animation: nt-in 300ms var(--nt-ease) both; }
.stage-badge { width: 96px; height: 96px; border-radius: 30px; background: linear-gradient(145deg, #3A8C7B, #1F5A4D); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 34px -14px rgba(31, 90, 77, 0.65); }
.stage-badge .ph { font-size: 52px; }
.stage-mode { display: inline-block; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nt-accent-deep); background: var(--events-tint); padding: 6px 14px; border-radius: 999px; }
.stage-copy h3 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 10px; letter-spacing: -0.01em; }
.stage-copy p { margin-top: 10px; max-width: 620px; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.55; }

/* Bento: 4+2 / 2+2+2, con fondos distintos */
.nt-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.nt-tile { grid-column: span 2; padding: 26px 24px 24px; border-radius: 28px; background: #fff; border: 1px solid rgba(46, 42, 34, 0.08); position: relative; overflow: hidden;
  animation: nt-in 320ms var(--nt-ease) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
.nt-tile h4 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.12rem; line-height: 1.25; margin-top: 18px; }
.nt-tile p { margin-top: 8px; font-size: 0.97rem; line-height: 1.5; color: var(--ink-soft); font-weight: 600; }
.nt-icon { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--nt-accent); box-shadow: 0 6px 16px -8px rgba(46, 42, 34, 0.35); }
.nt-icon .ph { font-size: 30px; }
.nt-tile--1 { grid-column: span 4; background: linear-gradient(150deg, #2F7A6B, #1F5A4D); border-color: transparent; color: #fff; padding: 108px 30px 30px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; }
.nt-tile--1 h4 { font-size: 1.6rem; font-family: 'Fraunces', Georgia, serif; line-height: 1.15; }
.nt-tile--1 p { color: rgba(255, 255, 255, 0.86); font-size: 1.06rem; max-width: 460px; }
.nt-tile--1 .nt-icon { position: absolute; top: 28px; left: 30px; width: 60px; height: 60px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.nt-tile--1 .nt-icon .ph { font-size: 36px; }
.nt-tile--2 { background: var(--highlight-tint); border-color: transparent; }
.nt-tile--2 .nt-icon { color: #8A6D1F; }
.nt-tile--3 { background: #fff; }
.nt-tile--4 { background: var(--votes-tint); border-color: transparent; }
.nt-tile--4 .nt-icon { color: var(--votes); }
.nt-tile--5 { background: var(--economy-tint); border-color: transparent; }
.nt-tile--5 .nt-icon { color: #B04D22; }
@media (hover: hover) and (pointer: fine) { .nt-tile { transition: transform 200ms var(--nt-ease), box-shadow 200ms var(--nt-ease); } .nt-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -18px rgba(46, 42, 34, 0.4); } }

.stage-foot { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.stage-foot .btn:active { transform: scale(0.97); }

/* Precios del final: aviso mientras no hay tipo elegido y etiqueta del tipo elegido */
.pricing-pick { max-width: 640px; margin: 22px auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 22px 24px; border-radius: 24px; background: linear-gradient(180deg, #E3F0EA, #F1F7F4); box-shadow: inset 0 0 0 1px rgba(47, 122, 107, 0.14); }
.pricing-pick[hidden], .pricing-for[hidden] { display: none; }
.pricing-pick p { font-weight: 800; font-size: 1.02rem; line-height: 1.45; }
.pricing-for { max-width: fit-content; margin: 20px auto 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: var(--events-tint); color: var(--nt-accent-deep); font-weight: 800; padding: 10px 18px; border-radius: 999px; }
.pricing-for .ph { font-size: 1.4rem; }
.pricing-change { color: var(--nt-accent-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 800; margin-left: 6px; }
#precios.has-kind .price-list li { animation: nt-in 260ms var(--nt-ease) both; }

@keyframes nt-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes nt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (max-width: 900px) {
  .nt-bento { grid-template-columns: 1fr 1fr; }
  .nt-tile, .nt-tile--1 { grid-column: span 1; }
  .nt-tile--1 { grid-column: span 2; min-height: 200px; }
  .nt-tile--5 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .tipos-head { margin-bottom: 26px; }
  .kind-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kind-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 0; }
  .stage-head { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .stage-badge { width: 72px; height: 72px; border-radius: 22px; }
  .stage-badge .ph { font-size: 40px; }
  .nt-bento { grid-template-columns: 1fr; }
  .nt-tile, .nt-tile--1, .nt-tile--5 { grid-column: span 1; }
  .stage-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kind-grid.is-in .kind-card, .nt-tile, .stage-head, #precios.has-kind .price-list li { animation: none; }
  .stage-empty-arrow { animation: none; }
  .kind-card, .fam-tab, .nt-tile { transition: none; }
}