/* ============================================================
   CANDELA — Vitolario (estilos en identidad de marca)
   Depende de candela.css (tokens). Marcas + Vitolas. Sin maridaje.
   ============================================================ */

/* Stats bajo el page-hero */
.vit-stats { display: flex; justify-content: center; gap: clamp(1.5rem, 6vw, 3.5rem); flex-wrap: wrap; margin-top: 2rem; }
.vit-stat__n { font-family: var(--display); font-size: 2.4rem; color: var(--candela-viva); line-height: 1; }
.vit-stat__l { font-size: 0.66rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(245,235,213,0.55); margin-top: .3rem; }

/* Pestañas */
.vit-tabs { display: flex; justify-content: center; gap: 0; border-bottom: 1px solid var(--oro-linea); position: sticky; top: 0; background: var(--noche-90); backdrop-filter: blur(10px); z-index: 40; }
.vit-tab { padding: 1rem 1.6rem; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--cuerpo); font-weight: 500; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,235,213,0.55); transition: color .25s ease, border-color .25s ease; }
.vit-tab:hover { color: var(--capa-natural); }
.vit-tab.active { color: var(--candela-viva); border-bottom-color: var(--candela-viva); }

/* Paneles */
.vit-panel { display: none; }
.vit-panel.active { display: block; }

/* Barra de búsqueda */
.vit-search { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; max-width: var(--maxw); margin-inline: auto; padding: 1.6rem var(--pad-x); }
.vit-input, .vit-select {
  background: rgba(245,235,213,0.05); border: 1px solid var(--oro-linea); border-radius: 3px;
  padding: .7rem 1rem; color: var(--capa-natural); font-family: var(--cuerpo); font-size: .9rem; outline: none;
  transition: border-color .25s ease;
}
.vit-input { flex: 1; min-width: 220px; }
.vit-input::placeholder { color: rgba(245,235,213,0.4); }
.vit-input:focus, .vit-select:focus { border-color: var(--candela-viva); }
.vit-select { cursor: pointer; }
.vit-select option { background: var(--noche-vega); color: var(--capa-natural); }
.vit-count { font-size: .76rem; letter-spacing: .08em; color: rgba(245,235,213,0.45); margin-left: auto; }

/* ---------- Grid de MARCAS ---------- */
.marca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x) 4rem; }
.marca-card {
  border: 1px solid var(--oro-linea); border-left: 3px solid transparent; border-radius: 3px;
  padding: 1.5rem; cursor: pointer; background: linear-gradient(160deg, rgba(201,165,106,0.04), transparent);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.marca-card:hover { border-left-color: var(--candela-viva); transform: translateY(-3px); background: linear-gradient(160deg, rgba(201,165,106,0.1), transparent); }
.marca-name { font-family: var(--display); font-size: 1.35rem; color: var(--capa-natural); margin: .5rem 0 .4rem; }
.marca-desc { font-size: .85rem; color: rgba(245,235,213,0.62); line-height: 1.5; }
.marca-meta { margin-top: .9rem; font-size: .72rem; color: rgba(201,165,106,0.7); }

/* Badge de fortaleza (escala organoléptica) */
.fz { display: inline-block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 2px; border: 1px solid; }
.fz-suave        { color: #8fae7e; border-color: #8fae7e55; background: rgba(143,174,126,0.12); }
.fz-suave-media  { color: #b3bd6a; border-color: #b3bd6a55; background: rgba(179,189,106,0.12); }
.fz-media        { color: var(--candela-viva); border-color: var(--oro-linea); background: rgba(201,165,106,0.12); }
.fz-media-fuerte { color: #cc8a4a; border-color: #cc8a4a55; background: rgba(204,138,74,0.12); }
.fz-fuerte       { color: #c5614a; border-color: #c5614a55; background: rgba(197,97,74,0.14); }

/* ---------- Grid de VITOLAS ---------- */
.vitola-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x) 4rem; }
.vitola-card {
  border: 1px solid var(--oro-linea); border-radius: 3px; padding: 1.2rem 1.4rem; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: center;
  background: linear-gradient(160deg, rgba(201,165,106,0.03), transparent);
  transition: border-color .25s ease, background .25s ease;
}
.vitola-card:hover { border-color: var(--candela-viva); background: linear-gradient(160deg, rgba(201,165,106,0.09), transparent); }
.vc-brand { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--colorado); }
.vc-name { font-family: var(--display); font-size: 1.15rem; color: var(--capa-natural); margin-top: .15rem; }
.vc-factory { font-size: .78rem; color: rgba(245,235,213,0.5); font-style: italic; margin-top: .1rem; }
.vc-right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.vc-measures { font-size: .82rem; color: var(--candela-viva); font-variant-numeric: tabular-nums; }
.vc-time { font-size: .74rem; color: rgba(245,235,213,0.55); font-variant-numeric: tabular-nums; }

.cigar-svg { display: block; }

/* Estado vacío */
.vit-empty { text-align: center; padding: 4rem var(--pad-x); font-family: var(--display); font-style: italic; font-size: 1.2rem; color: rgba(245,235,213,0.5); }

/* ---------- MODAL ---------- */
.vit-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(8,6,3,0.92); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 2rem 1rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.vit-modal-overlay.open { opacity: 1; pointer-events: all; }
.vit-modal { background: #15110A; border: 1px solid var(--oro-linea); border-radius: 4px; width: 100%; max-width: 780px; position: relative; transform: translateY(20px); transition: transform .3s ease; }
.vit-modal-overlay.open .vit-modal { transform: none; }
.vit-modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; color: rgba(245,235,213,0.5); font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 2; }
.vit-modal__close:hover { color: var(--candela-viva); }
.vit-modal__header { padding: 2rem 2rem 1.3rem; border-bottom: 1px solid var(--oro-tenue); }
.vit-modal__h1 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--capa-natural); margin-top: .5rem; }
.vit-modal__tag { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--candela-viva); margin-top: .3rem; }
.vit-modal__body { padding: 1.5rem 2rem 2.2rem; }
.vit-sec { margin-top: 1.6rem; }
.vit-sec__title { font-size: .68rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--candela-viva); margin-bottom: .8rem; padding-bottom: .4rem; border-bottom: 1px solid var(--oro-tenue); }
.vit-desc { font-size: .9rem; color: rgba(245,235,213,0.78); line-height: 1.7; }
.vit-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.vit-pill { font-size: .74rem; padding: .3rem .7rem; border-radius: 2px; background: rgba(245,235,213,0.05); border: 1px solid var(--oro-tenue); color: rgba(245,235,213,0.7); }
/* Notas de cata destacadas (paleta organoléptica) */
.vit-tasting { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--candela-viva); line-height: 1.6; padding-left: 1rem; border-left: 2px solid var(--oro-linea); }

/* Timeline */
.vit-tl { position: relative; padding-left: 1.5rem; }
.vit-tl::before { content: ""; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 1px; background: var(--oro-linea); }
.vit-tl__item { position: relative; margin-bottom: 1rem; padding-left: 1rem; }
.vit-tl__item::before { content: ""; position: absolute; left: -1.55rem; top: .4rem; width: 7px; height: 7px; border-radius: 50%; background: var(--candela-viva); }
.vit-tl__year { font-size: .72rem; color: var(--candela-viva); margin-bottom: .15rem; }
.vit-tl__desc { font-size: .82rem; color: rgba(245,235,213,0.62); line-height: 1.5; }

/* Tabla de vitolas en el modal */
.vit-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.vit-table th { text-align: left; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--candela-viva); padding: .5rem .6rem; border-bottom: 1px solid var(--oro-tenue); }
.vit-table td { padding: .55rem .6rem; border-bottom: 1px solid rgba(245,235,213,0.05); color: rgba(245,235,213,0.78); vertical-align: middle; }
.vit-table tr:hover td { background: rgba(201,165,106,0.04); }
.vit-table .t-name { color: var(--capa-natural); font-weight: 500; }
.vit-table .t-factory { font-style: italic; color: rgba(245,235,213,0.5); }
.vit-table .t-time { color: var(--candela-viva); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Botones de categoría + grupos de vitolas (Regular / EL / ER) */
.vit-cat-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1.2rem; }
.vit-cat-btn { background: rgba(201,165,106,0.08); border: 1px solid var(--oro-linea); color: var(--candela-viva); padding: .42rem .85rem; border-radius: 2px; cursor: pointer; font-family: var(--cuerpo); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.vit-cat-btn:hover { background: var(--candela-viva); color: var(--noche-vega); }
.vit-cat-btn__n { opacity: .65; margin-left: .15rem; }
.vit-grp { margin-top: 1.6rem; scroll-margin-top: .8rem; }
.vit-grp__title { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--colorado); margin-bottom: .7rem; }

@media (max-width: 600px) {
  .vit-modal { border-radius: 0; }
  .vit-modal__header, .vit-modal__body { padding-inline: 1.2rem; }
  .vit-table .t-factory { display: none; } /* prioriza nombre+medidas en móvil */
}