/* ============================================================
   Diccionario de Alimentos según la MTC
   Estilos · paleta verde forestal, editorial moderno
   ============================================================ */

:root{
  /* Fondos */
  --bg:        #FAFAF7;
  --bg-soft:   #F2F1EC;
  --bg-card:   #FFFFFF;
  --bg-tint:   #E8F0E4;   /* verde muy claro para hovers/badges */

  /* Verde principal (inspirado en cincoelementos.es) */
  --green:        #207526;
  --green-dark:   #0c5712;
  --green-soft:   #4A9550;
  --green-pale:   #ABCFA2;

  /* Cinabrio — uso reservado: Wǔ Xíng Fuego + estrella destacado */
  --cinnabar:      #B23A29;
  --cinnabar-dark: #8A2817;

  /* Tinta y grises */
  --ink:        #1F2A22;
  --ink-soft:   #4A5A50;
  --ink-faint:  #8A9690;

  /* Líneas */
  --line:       #E1DFD8;
  --line-soft:  #EFEDE6;

  /* Wǔ Xíng — solo el ocre Tierra se usa en .pill-gold */
  --wx-earth:  #C9A04A;

  --bs-body-font-family: 'Lato', system-ui, sans-serif;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html, body{
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar      { width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg-soft); }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--ink-faint); }


/* =============================================================
   HERO
   ============================================================= */
.hero{
  position: relative;
  padding: 18px 24px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-inner{ max-width: 1340px; margin: 0 auto; position: relative; z-index: 1; }
.hero-row{
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: center;
}
.hero-text{ min-width: 0; }


/* =============================================================
   HERO · CARD ESTADÍSTICA (contador de alimentos)
   ============================================================= */
.hero-stat{
  position: relative;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(160deg, #2a8a30 0%, #207526 50%, #155218 100%);
  color: #FFFFFF;
  padding: 18px 40px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.20),
    0 14px 32px -14px rgba(12,87,18,.45);
  text-align: center;
  overflow: hidden;
  min-width: 260px;
}
.hero-stat::before{
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,90,.55) 50%, transparent 100%);
  pointer-events: none;
}
.hero-stat-cn{
  position: absolute;
  right: -18px; bottom: -42px;
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  font-size: 170px; line-height: 1;
  color: rgba(255,255,255,.07);
  pointer-events: none; user-select: none;
}
.hero-stat-illu{
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  width: 42px; height: auto;
  pointer-events: none;
  opacity: .9;
}
.hero-stat-num{
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 52px;
  line-height: 1; letter-spacing: -.03em;
  position: relative; z-index: 1;
  transition: color .2s ease;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.hero-stat-label{
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  font-weight: 900;
  margin-top: 12px;
  padding-top: 10px;
  color: #F4E9C8;
  position: relative; z-index: 1;
}
.hero-stat[data-state="filtered"]{
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(135deg, #2A8A30 0%, #207526 60%, #1A6320 100%);
}
.hero-stat[data-state="empty"]{
  background: linear-gradient(135deg, #B23A29 0%, #8A2817 100%);
  box-shadow: 0 14px 32px -14px rgba(178,58,41,.4);
}
.hero-title-row{
  display: flex; align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.hero-logo{
  display: block;
  max-height: 60px; width: auto;
  flex-shrink: 0;
}
.hero h1{
  font-family: 'Cardo', serif;
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1; letter-spacing: -.025em;
  color: var(--ink); margin: 0;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
}
.hero h1 em{
  font-style: italic; color: var(--green); font-weight: 700;
}
.hero h1 .cn{
  font-family: 'Noto Serif SC', serif;
  color: var(--green-pale); font-weight: 700;
  font-size: .35em; vertical-align: .55em; margin-left: .3em;
  letter-spacing: 0;
}


/* =============================================================
   LAYOUT
   ============================================================= */
.layout{
  max-width: 1340px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
}
.alert-mtc{
  border: 1px solid var(--cinnabar);
  background: rgba(178,58,41,.06);
  border-radius: 6px;
  padding: 14px 18px; color: var(--cinnabar-dark);
  font-size: 14px;
}


/* =============================================================
   SIDEBAR DE FILTROS
   ============================================================= */
.filter-box{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, #207526 0%, #1A6320 100%);
  border: 1px solid #185919;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 24px -10px rgba(12,87,18,.35);
  color: #FFFFFF;
}
.filter-box h2{
  font-family: 'Cardo', serif;
  font-size: 22px; font-weight: 700;
  margin: 0; padding: 22px 22px 14px;
  display: flex; align-items: center; gap: 10px;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.filter-box h2 .cn{
  font-family: 'Noto Serif SC', serif;
  color: #ABCFA2; font-size: 17px; font-weight: 500;
}

/* Labels de filtros sobre fondo verde */
.filter-box .filter-group label{
  color: rgba(255,255,255,.65);
}
.filter-box .filter-group label .cn{
  color: #ABCFA2;
}

/* Inputs en blanco dentro del sidebar para contraste */
.filter-box .search-input,
.filter-box .select2-container--bootstrap-5 .select2-selection{
  background: #FFFFFF !important;
  border-color: transparent !important;
}
.filter-box .search-input:focus,
.filter-box .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.filter-box .select2-container--bootstrap-5.select2-container--open .select2-selection{
  border-color: #ABCFA2 !important;
  box-shadow: 0 0 0 3px rgba(171,207,162,.25) !important;
}

/* Chips/pills: fondo verde, texto blanco en negrita, × en blanco */
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice{
  background: var(--green) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--green-dark) !important;
  border-radius: 999px !important;
  padding: 3px 10px 3px 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(12,87,18,.25);
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease;
  cursor: default;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice:hover{
  background: var(--green-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -3px rgba(12,87,18,.45);
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove{
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: var(--green-dark) !important;
  font-size: 13px; line-height: 1;
  font-weight: 700;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover{
  background: var(--cinnabar) !important;
  color: #FFFFFF !important;
  transform: scale(1.1);
}

/* Botón "Limpiar todo" sobre fondo verde */
.filter-box .actions-row .btn-ghost{
  background: #FFFFFF;
  color: var(--green-dark);
  border: 1px solid #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.18);
}
.filter-box .actions-row .btn-ghost:hover{
  background: var(--bg-tint);
  border-color: var(--bg-tint);
  color: var(--green-dark);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.25);
}


/* =============================================================
   FORMULARIO DE FILTROS
   ============================================================= */
.filter-form{ padding: 18px 22px 22px; }
.filter-group{ margin-bottom: 14px; }
.filter-group label{
  display: block;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-faint);
  font-weight: 700; margin-bottom: 6px;
}
.filter-group label .cn{
  font-family: 'Noto Serif SC', serif;
  color: var(--green);
  letter-spacing: 0; font-size: 13px; margin-right: 4px; font-weight: 500;
}

.search-input{
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 15px; color: var(--ink);
  outline: none; transition: all .2s;
}
.search-input::placeholder{ color: var(--ink-faint); font-style: italic; }
.search-input:focus{
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(32,117,38,.10);
}

.btn-ghost{
  font-family: 'Lato', sans-serif;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 18px; font-weight: 700;
  border-radius: 6px; cursor: pointer; transition: all .2s;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
}
.btn-ghost:hover{
  background: var(--bg-tint); color: var(--green-dark);
  border-color: var(--green-pale);
}

.actions-row{ margin-top: 18px; }


/* =============================================================
   FILTRO POR ELEMENTO (Wǔ Xíng) en sidebar
   ============================================================= */
.wuxing-block{
  margin: 22px 0 4px;
  padding: 18px 16px 16px;
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.25);
}
.wuxing-head{
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px; margin-bottom: 6px;
}
.wuxing-head .cn{
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  font-size: 16px; color: var(--green); line-height: 1;
}
.wuxing-head .label{
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}

.wuxing-svg{
  width: 100%; max-width: 220px; height: auto;
  margin: 4px auto 0; display: block;
  overflow: visible;
}
.wuxing-svg .node{ cursor: pointer; }
.wuxing-svg .node circle.bg{
  transition: stroke-width .2s ease, filter .3s ease;
}
.wuxing-svg .node:hover circle.bg{
  stroke-width: 4;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.wuxing-svg .node.active circle.bg{
  stroke-width: 4;
  filter: drop-shadow(0 0 10px currentColor);
}
.wuxing-svg .sheng-line{
  stroke: var(--green); stroke-width: 1.4;
  opacity: .35; fill: none;
}
.wuxing-svg .ke-line{
  stroke: var(--ink-faint); stroke-width: 1;
  opacity: .22; fill: none;
  stroke-dasharray: 3 3;
}
.wuxing-svg .center-text{
  font-family: 'Noto Serif SC', serif;
  fill: var(--green); font-weight: 700; opacity: .35;
}
.wuxing-svg .node-cn{
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  fill: #fff;
  pointer-events: none; user-select: none;
}
.wuxing-svg .node-name{
  font-family: 'Lato', sans-serif; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  fill: var(--ink-soft); pointer-events: none; font-weight: 700;
}

.wuxing-clear{
  background: transparent; border: none;
  color: var(--green);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
  cursor: pointer; margin-top: 6px;
  font-family: 'Lato', sans-serif;
  padding: 4px 10px; border-radius: 5px;
  transition: all .2s;
}
.wuxing-clear:hover{ color: var(--green-dark); background: var(--bg-card); }
.wuxing-clear[disabled]{ display: none; }
.actions-row .btn-ghost{ width: 100%; }


/* =============================================================
   Select2 customizado
   ============================================================= */
.select2-container--bootstrap-5 .select2-selection{
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  min-height: 42px !important;
  padding: 4px 8px !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection{
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(32,117,38,.10) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice{
  background: var(--green) !important;
  color: #fff !important;
  border: 1px solid var(--green-dark) !important;
  border-radius: 4px !important;
  padding: 2px 8px 2px 6px !important;
  font-size: 12px !important; font-weight: 600 !important;
  margin-top: 4px !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove{
  color: #fff !important;
  border-right: 1px solid rgba(255,255,255,.25) !important;
  margin-right: 6px !important; padding-right: 6px !important;
}
.select2-dropdown{
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 8px 24px -8px rgba(31,42,34,.18) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted{
  background: transparent !important; color: inherit !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected{
  background: var(--bg-tint) !important; color: var(--green-dark) !important;
  font-weight: 600;
}

/* Casillas de selección en cada opción del dropdown */
.mtc-select-dropdown .select2-results__option{
  position: relative;
  padding-left: 38px !important;
  display: flex; align-items: center;
  min-height: 34px;
}
.mtc-select-dropdown .select2-results__option::before{
  content: '';
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #FFFFFF;
  transition: background .15s ease, border-color .15s ease;
}
.mtc-select-dropdown .select2-results__option--selected::before,
.mtc-select-dropdown .select2-results__option[aria-selected="true"]::before{
  background: var(--green);
  border-color: var(--green);
}
.mtc-select-dropdown .select2-results__option--selected::after,
.mtc-select-dropdown .select2-results__option[aria-selected="true"]::after{
  content: '';
  position: absolute;
  left: 19px; top: 50%;
  width: 5px; height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}


/* =============================================================
   RESULTADOS
   ============================================================= */
.loading{
  text-align: center; padding: 60px 20px;
  color: var(--ink-faint); font-style: italic;
  font-family: 'Cardo', serif; font-size: 19px;
}
.loading .cn{
  display: block;
  font-family: 'Noto Serif SC', serif; font-size: 34px;
  color: var(--green); opacity: .4; font-weight: 500;
  margin-bottom: 8px; font-style: normal;
  animation: pulse 1.4s ease infinite;
}
@keyframes pulse{ 0%,100%{opacity:.25} 50%{opacity:.6} }

.empty{
  text-align: center; padding: 80px 20px;
  color: var(--ink-faint);
  font-family: 'Cardo', serif;
  font-style: italic; font-size: 21px;
}
.empty .cn{
  display: block; font-size: 46px;
  color: var(--green); opacity: .35;
  font-family: 'Noto Serif SC', serif; margin-bottom: 8px;
  font-style: normal; font-weight: 500;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}


/* =============================================================
   CARDS
   ============================================================= */
.card-item{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 22px 20px;
  cursor: pointer;
  position: relative;
  transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
  display: flex; flex-direction: column;
  min-height: 220px; overflow: hidden;
  animation: cardIn .35s ease both;
}
@keyframes cardIn{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}
/* Franja superior coloreada según temperatura */
.card-item::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--line);
  transition: height .25s ease;
}
.card-item[data-temp="1"]::before{ background: linear-gradient(90deg, #3D6B89, #5C8FAE); }
.card-item[data-temp="2"]::before{ background: linear-gradient(90deg, #5C8266, #84A984); }
.card-item[data-temp="3"]::before{ background: linear-gradient(90deg, #A18748, #C9A04A); }
.card-item[data-temp="4"]::before{ background: linear-gradient(90deg, #C57A36, #E09A52); }
.card-item[data-temp="5"]::before{ background: linear-gradient(90deg, #B23A29, #D45A48); }

.card-item:hover{
  border-color: var(--green-pale);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -16px rgba(31,42,34,.22);
}
.card-item:hover::before{ height: 5px; }

.card-cat{
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--green); font-weight: 700; margin-bottom: 14px;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
}
.card-cat::before{
  content: ''; width: 22px; height: 1px; background: var(--green-pale);
}
.card-title{
  font-family: 'Cardo', serif;
  font-size: 28px; font-weight: 700;
  line-height: 1.06; color: var(--ink);
  margin: 0 0 16px; letter-spacing: -.018em;
  position: relative; z-index: 1;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
}
.card-meta{
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 14px; position: relative; z-index: 1;
}

.badge-mtc{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
}
.badge-mtc .dot{ width: 6px; height: 6px; border-radius: 50%; }
.b-temp-1{ background:#DDE8F0; color:#1F3A52; } .b-temp-1 .dot{ background:#3D6B89; }
.b-temp-2{ background:#DDE8DD; color:#2F4E38; } .b-temp-2 .dot{ background:#5C8266; }
.b-temp-3{ background:#EFE9D8; color:#5B4823; } .b-temp-3 .dot{ background:#A18748; }
.b-temp-4{ background:#F0DCC4; color:#7B4A1B; } .b-temp-4 .dot{ background:#C57A36; }
.b-temp-5{ background:#F0CFC7; color:#7A1F0F; } .b-temp-5 .dot{ background:#B23A29; }
.b-sabor{
  background: var(--bg-tint); color: var(--green-dark);
  border: 1px solid transparent;
}

.card-rutas{
  margin-top: auto; padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: 'Cardo', serif;
  font-size: 15px; color: var(--ink-soft);
  font-style: italic; line-height: 1.45;
  letter-spacing: .005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative; z-index: 1;
}
.card-rutas::before{
  content: '经';
  font-family: 'Noto Serif SC', serif; font-style: normal;
  color: var(--green); font-size: 14px; font-weight: 500;
  margin-right: 8px;
  vertical-align: 1px;
}

.destacado-mark{
  position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px;
  background: var(--cinnabar); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; z-index: 3;
  box-shadow: 0 4px 10px -3px rgba(178,58,41,.45);
  transition: transform .25s ease;
}
.card-item:hover .destacado-mark{ transform: scale(1.1) rotate(8deg); }


/* =============================================================
   PAGINACIÓN
   ============================================================= */
.pager{
  margin-top: 36px;
  display: flex; justify-content: center; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.pager button{
  background: var(--bg-card); color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 40px; height: 40px;
  cursor: pointer; transition: all .2s;
  font-family: 'Lato', sans-serif;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.pager button:hover:not(:disabled){
  background: var(--bg-tint); color: var(--green-dark);
  border-color: var(--green-pale);
}
.pager button.active{
  background: var(--green); color: #fff;
  border-color: var(--green);
}
.pager button:disabled{ opacity: .35; cursor: not-allowed; }
.pager .ellipsis{ color: var(--ink-faint); padding: 0 4px; }


/* =============================================================
   MODAL
   ============================================================= */
.modal-content{
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.modal-header.mtc{
  background: var(--green);
  padding: 6px 0; border: none;
}
.modal .btn-close{
  position: absolute; top: 16px; right: 16px;
  z-index: 10;
  opacity: 1; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 50%;
  width: 36px; height: 36px; padding: 0;
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
  background-image: none;
}
.modal .btn-close:hover{
  background: var(--bg-tint); color: var(--green-dark);
  border-color: var(--green-pale);
}
.modal .btn-close:focus{
  box-shadow: 0 0 0 3px rgba(32,117,38,.15);
  outline: none;
}
.modal-title{
  font-family: 'Cardo', serif;
  font-size: 38px; font-weight: 700;
  color: var(--ink); letter-spacing: -.015em;
  line-height: 1.1;
}
.field{ margin-bottom: 18px; }
.field-label{
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.field-label .cn{
  font-family: 'Noto Serif SC', serif;
  color: var(--green); font-size: 13px; letter-spacing: 0; font-weight: 500;
}
.pill{
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 999px;
  margin: 2px 4px 2px 0; font-size: 13px;
  color: var(--ink-soft);
}
.pill-cinnabar{ background: var(--green);     color: #fff; border-color: var(--green); }
.pill-jade    { background: var(--green-soft); color: #fff; border-color: var(--green-soft); }
.pill-gold    { background: var(--wx-earth);  color: #fff; border-color: var(--wx-earth); }
.empty-v{ color: var(--ink-faint); font-style: italic; font-size: 13px; }

.notes-block{
  background: var(--bg-tint);
  border-left: 3px solid var(--green);
  border-radius: 4px;
  padding: 14px 18px;
  font-style: italic;
  font-family: 'Cardo', serif;
  font-size: 16px; color: var(--ink-soft);
  white-space: pre-line; line-height: 1.55;
}
.modal-foot-mtc{
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 14px 24px;
  display: flex; justify-content: flex-end; align-items: center;
  font-size: 11px; letter-spacing: .08em; color: var(--ink-faint);
}
.seal-mini{
  background: var(--green); color: #fff;
  padding: 3px 8px; border-radius: 4px;
  font-family: 'Noto Serif SC', serif;
  font-weight: 500; font-size: 11px;
}


/* =============================================================
   TOAST
   ============================================================= */
.toast-mtc{
  position: fixed; top: 20px; right: 20px;
  z-index: 10000;
  background: var(--ink); color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  border-left: 3px solid var(--green);
  font-size: 13px;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(-10px);
  transition: all .25s;
  max-width: 320px;
}
.toast-mtc[hidden]{ display: none; }
.toast-mtc.show{ opacity: 1; transform: translateY(0); }


/* =============================================================
   FOOTER
   ============================================================= */
.site-foot{
  border-top: 1px solid var(--line);
  background: var(--bg-card);
  padding: 24px;
  margin-top: auto;
}
.foot-inner{
  max-width: 1340px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--ink-faint);
  flex-wrap: wrap;
}
.foot-inner .cn-glyph{
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  color: var(--green); font-size: 18px;
}
.btn-whatsapp{
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a9241 0%, #2d7c32 100%);
  color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 8px 24px -6px rgba(45,124,50,.55);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: wa-pulse 2.2s ease-out infinite;
}
.btn-whatsapp:hover{
  transform: scale(1.10);
  color: #FFFFFF;
  animation-play-state: paused;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 30px -6px rgba(45,124,50,.65);
}
.btn-whatsapp:active{ transform: scale(1.04); }
.btn-whatsapp .wa-icon{
  width: 30px; height: 30px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

@keyframes wa-pulse{
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px -6px rgba(45,124,50,.55), 0 0 0 0   rgba(45,124,50,.55); }
  70%  { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px -6px rgba(45,124,50,.55), 0 0 0 18px rgba(45,124,50,0); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px -6px rgba(45,124,50,.55), 0 0 0 0   rgba(45,124,50,0); }
}

@media (max-width: 600px){
  .btn-whatsapp{ width: 54px; height: 54px; bottom: 18px; right: 18px; }
  .btn-whatsapp .wa-icon{ width: 26px; height: 26px; }
}


/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 992px){
  .layout{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px){
  .hero{ padding: 32px 20px 36px; }
  .hero h1{ white-space: normal; }
  .hero-row{ grid-template-columns: 1fr; gap: 20px; }
  .hero-stat{ justify-self: start; }
}
@media (max-width: 600px){
  .layout{ padding: 28px 14px 60px; }
  .grid{ grid-template-columns: 1fr; gap: 14px; }
  .modal-title{ font-size: 28px; }
  .foot-inner{ flex-direction: column; align-items: flex-start; }
}