/* ============================================================
   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: 10px 20px 13px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
.hero-inner{ max-width: 1340px; margin: 0 auto; position: relative; z-index: 1; }
.hero-row{
  display: grid; grid-template-columns: 1fr auto;
  gap: 26px; align-items: center;
}
.hero-aside{
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: flex-end;
}

/* Reloj de órganos MTC en hero (compacto, clicable) */
.organ-clock-row{
  --el:        var(--green);
  --el-soft:   var(--green-pale);
  --el-tint:   var(--bg-tint);
  --el-shadow: rgba(32,117,38,.35);

  display: inline-flex; align-items: center; gap: 9px;
  background: var(--el-tint);
  border: 1px solid var(--el-soft);
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit; color: inherit;
  box-shadow: 0 2px 6px -4px var(--el-shadow);
  transition: background .3s ease, border-color .3s ease,
              transform .25s ease, box-shadow .3s ease;
}
.organ-clock-row:hover{
  background: var(--el-soft);
  border-color: var(--el);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 22px -8px var(--el-shadow);
}
.organ-clock-row:hover .organ-clock-cn{
  transform: scale(1.08);
}
.organ-clock-row:focus-visible{
  outline: 2px solid var(--el);
  outline-offset: 2px;
}
.organ-clock-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 22px;
  color: var(--el);
  line-height: 1;
  transition: color .25s ease, transform .25s ease;
}
.organ-clock-text{
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
}
.organ-clock-name{
  font-family: 'Playfair Display', 'Cardo', serif;
  font-style: normal; font-weight: 800;
  font-size: 14px; color: var(--ink); line-height: 1.1;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.organ-clock-time{
  font-family: 'Lato', sans-serif;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 900; color: var(--ink-faint);
}
/* Wǔ Xíng — colores del elemento del órgano activo */
.organ-clock-row[data-element="mu"]{   --el:#4F9359; --el-soft:#BCDCC2; --el-tint:#E9F1EA; --el-shadow:rgba(45,102,56,.35); }
.organ-clock-row[data-element="huo"]{  --el:#D14B36; --el-soft:#F1C0B7; --el-tint:#FBEAE6; --el-shadow:rgba(142,42,30,.35); }
.organ-clock-row[data-element="tu"]{   --el:#C9A04A; --el-soft:#ECD9A5; --el-tint:#FAF1DC; --el-shadow:rgba(124,84,24,.30); }
.organ-clock-row[data-element="jin"]{  --el:#9C9382; --el-soft:#DCD7CC; --el-tint:#F1EFE9; --el-shadow:rgba(95,88,76,.30); }
.organ-clock-row[data-element="shui"]{ --el:#2A5A85; --el-soft:#B6CADD; --el-tint:#E1ECF5; --el-shadow:rgba(20,54,86,.35); }

/* Botón "Instalar app" (PWA) */
.btn-install{
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #3a9241 0%, #207526 100%);
  color: #fff;
  border: none;
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(32,117,38,.45);
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
  animation: install-pulse 2.4s ease-in-out infinite;
}
.btn-install:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px -6px rgba(32,117,38,.6);
  animation-play-state: paused;
}
.btn-install:focus-visible{
  outline: 2px solid var(--green-pale);
  outline-offset: 2px;
}
.btn-install svg{
  width: 14px; height: 14px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
@keyframes install-pulse{
  0%, 100% { box-shadow: 0 4px 14px -4px rgba(32,117,38,.45), 0 0 0 0   rgba(32,117,38,.45); }
  70%      { box-shadow: 0 4px 14px -4px rgba(32,117,38,.45), 0 0 0 10px rgba(32,117,38,0); }
}

/* Selector de idioma · desplegable propio */
.lang-switcher{
  position: relative;
  font-family: 'Lato', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
}
.lang-toggle{
  display: inline-flex; align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--green-pale);
  color: var(--green-dark);
  padding: 4px 8px 4px 7px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.08);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"]{
  background: var(--bg-tint);
  border-color: var(--green);
  box-shadow: 0 4px 10px -2px rgba(32,117,38,.18);
}
.lang-toggle:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.lang-caret{
  width: 10px; height: 10px;
  opacity: .7;
  transition: transform .2s ease;
}
.lang-toggle[aria-expanded="true"] .lang-caret{ transform: rotate(180deg); }

.lang-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--green-pale);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.22);
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: lang-in .18s ease;
}
.lang-menu[hidden]{ display: none; }
@keyframes lang-in{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lang-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink-soft);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.lang-item:hover,
.lang-item:focus-visible{
  background: var(--bg-tint);
  color: var(--green-dark);
  outline: none;
}
.lang-item.active{
  background: var(--bg-tint);
  color: var(--green-dark);
  font-weight: 800;
}
.lang-item.active::after{
  content: '✓';
  margin-left: auto;
  color: var(--green);
  font-weight: 700;
}

.lang-flag{
  width: 16px; height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.10);
  background: #FFFFFF;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  overflow: hidden;
}


/* =============================================================
   CHAT · botón flotante asistente (junto al de Zhong Yi)
   Mismo lenguaje visual pero con tono cinabrio (atención)
   ============================================================= */
.btn-chat{
  position: relative;
  position: fixed;
  bottom: 32px;
  right: 271px;
  z-index: 9998;
  height: 46px;
  padding: 0 17px 0 14px;
  border-radius: 23px;
  border: none;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 6px 18px -4px rgba(32,117,38,.55);
  transition: transform .25s ease, box-shadow .3s ease;
}
.btn-chat::after{
  content: '';
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  background: radial-gradient(circle at 30% 30%, #5aa7ff 0%, #1b73f7 55%, #0d4cb3 100%);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(27,115,247,.18),
    0 2px 8px -1px rgba(27,115,247,.55);
  animation: btnChatPulse 2.4s ease-in-out infinite;
}
@keyframes btnChatPulse{
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(27,115,247,.18), 0 2px 8px -1px rgba(27,115,247,.55), 0 0 0 0 rgba(27,115,247,.55);
  }
  60% {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px rgba(27,115,247,.10), 0 2px 8px -1px rgba(27,115,247,.45), 0 0 0 10px rgba(27,115,247,0);
  }
}
.btn-chat:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 26px -6px rgba(32,117,38,.7);
}
.btn-chat:focus-visible{
  outline: 3px solid rgba(32,117,38,.35);
  outline-offset: 2px;
}
.btn-chat .btn-icon{ opacity: 1; }
.btn-chat-label{
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
  gap: 1px;
}
.btn-chat-label-main{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.btn-chat-label-sub{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.btn-icon{
  width: 13px; height: 13px;
  flex-shrink: 0;
  opacity: .85;
}
.btn-icon-ai{
  width: 18px; height: 18px;
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
  animation: aiSparkle 2.6s ease-in-out infinite;
}
@keyframes aiSparkle{
  0%, 100% { opacity: .95; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.08) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce){
  .btn-icon-ai{ animation: none; }
}
.btn-chat:hover .btn-icon,
.btn-wizard:hover .btn-icon,
.btn-help:hover .btn-icon{ opacity: 1; }
@media (max-width: 600px){
  .btn-chat{
    height: 44px; padding: 0 14px 0 12px;
    bottom: 28px; right: 251px;
    font-size: 11.5px; gap: 6px;
  }
  .btn-chat-label-main{ font-size: 12px; }
  .btn-chat-label-sub{ font-size: 8.5px; letter-spacing: .12em; }
}

/* =============================================================
   CHAT · modal y mensajes
   ============================================================= */
.chat-modal-dialog{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  height: 88vh !important;
  max-height: 88vh !important;
  min-height: 0 !important;
  width: calc(100% - 1rem) !important;
  max-width: 800px !important;
  margin: 0 !important;
}
.chat-modal-dialog.modal-dialog-centered{
  min-height: 0 !important;
}
.chat-modal{
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.chat-modal .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 600px){
  .chat-modal-dialog,
  .chat-modal-dialog.modal-dialog-centered{
    height: 82vh !important;
    max-height: 82vh !important;
    min-height: 0 !important;
    width: calc(100% - 1rem) !important;
    margin: 0 !important;
  }
}
.modal-content.chat-modal .btn-close{
  top: 4px; right: 8px;
  width: 28px; height: 28px;
  font-size: 16px;
}
.chat-hero{
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 10px;
  padding: 8px 50px 6px 18px;
  background: var(--bg-card);
}
.chat-avatar-big{
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 3px 9px -3px rgba(178,58,41,.45);
}
.chat-avatar-big svg{ width: 100%; height: 100%; display: block; }
.chat-hero-info{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.chat-title{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Playfair Display', 'Cardo', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.chat-title-name{
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  letter-spacing: .01em;
}
.chat-title-sub{
  font-family: 'Lato', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cinnabar);
  opacity: .9;
}
.chat-status{
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.chat-status-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4caf50;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(76,175,80,.18);
  animation: chat-status-pulse 2s ease-in-out infinite;
}
@keyframes chat-status-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(76,175,80,.18); }
  50%      { box-shadow: 0 0 0 4px rgba(76,175,80,.05); }
}

.chat-modal .modal-body{
  padding: 0;
  background: var(--bg);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-messages{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg{
  display: flex;
  max-width: 85%;
}
.chat-msg-user{ align-self: flex-end; }
.chat-msg-bot{  align-self: flex-start; }
.chat-msg-bubble{
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 14px;
  word-wrap: break-word;
  white-space: normal;
}
.chat-msg-user .chat-msg-bubble{
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-bot .chat-msg-bubble{
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-msg-bot .chat-msg-bubble strong{ color: var(--green-dark); }
.chat-cite{
  display: inline-block;
  margin: 2px 2px;
  padding: 2px 8px;
  border: 1px solid var(--green-pale);
  border-radius: 12px;
  background: var(--bg-tint);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.chat-cite:hover{
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-1px);
}

.chat-thinking{
  display: inline-flex; align-items: center; gap: 4px;
}
.chat-thinking span{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: chat-dot 1.2s infinite ease-in-out;
}
.chat-thinking span:nth-child(2){ animation-delay: .15s; }
.chat-thinking span:nth-child(3){ animation-delay: .30s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40%           { opacity: 1;   transform: scale(1); }
}

.chat-footer{
  padding: 14px 20px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--line);
}
.chat-form{
  display: flex; gap: 8px; align-items: flex-end;
}
.chat-input{
  flex: 1;
  min-height: 42px;
  max-height: 140px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 21px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  outline: none;
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease, height .1s ease;
}
.chat-input:focus{
  border-color: var(--green-pale);
  box-shadow: 0 0 0 3px rgba(32,117,38,.12);
}
.chat-input:disabled{ opacity: .6; cursor: wait; }
.chat-send{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.chat-send svg{ width: 18px; height: 18px; }
.chat-send:hover:not(:disabled){
  background: var(--green-dark);
  transform: translateY(-1px);
}
.chat-send:disabled{ opacity: .5; cursor: wait; }

/* Botón adjuntar foto · destacado (cinabrio sólido) */
.chat-attach{
  position: relative;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--cinnabar);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(178,58,41,.55);
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
}
.chat-attach svg{ width: 20px; height: 20px; }
.chat-attach::after{
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  background: var(--cinnabar);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
  animation: chatAttachPulse 2s ease-in-out infinite;
}
@keyframes chatAttachPulse{
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.3); opacity: .55; }
}
.chat-attach:hover:not(:disabled){
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px -4px rgba(178,58,41,.7);
}
.chat-attach:disabled{ opacity: .5; cursor: wait; }
.chat-attach:disabled::after{ display: none; }

/* Botón micrófono · Speech-to-Text (Web Speech API) */
.chat-mic{
  position: relative;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.2px solid var(--green);
  background: var(--bg-card);
  color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px -3px rgba(32,117,38,.35);
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.chat-mic svg{ width: 20px; height: 20px; position: relative; z-index: 2; }
.chat-mic:hover:not(:disabled){
  transform: translateY(-2px) scale(1.05);
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 18px -4px rgba(32,117,38,.5);
}
.chat-mic:disabled{ opacity: .5; cursor: wait; }
.chat-mic-pulse{
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0;
  pointer-events: none;
}
.chat-mic.is-listening{
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(178,58,41,.55);
}
.chat-mic.is-listening .chat-mic-pulse{
  opacity: 1;
  border-color: var(--cinnabar);
  animation: chatMicPulse 1.4s ease-out infinite;
}
@keyframes chatMicPulse{
  0%   { transform: scale(.85); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Preview de la imagen adjunta antes de enviar */
.chat-attachment{
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  padding: 6px 36px 6px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  max-width: 100%;
}
.chat-attachment img{
  width: 46px; height: 46px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-attachment-label{
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}
.chat-attachment-remove{
  position: absolute;
  top: 4px; right: 6px;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.chat-attachment-remove:hover{
  background: var(--cinnabar);
  color: #fff;
}

/* Imagen dentro de un mensaje del usuario */
.chat-msg-img{
  display: block;
  max-width: 220px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.chat-msg-text{ font-family: inherit; }

@media (max-width: 600px){
  .chat-hero{ padding: 6px 46px 5px 14px; gap: 8px; }
  .chat-avatar-big{ width: 26px; height: 26px; }
  .chat-title{ font-size: 13px; }
  .chat-status{ font-size: 9.5px; }
  .chat-messages{ padding: 14px; }
  .chat-msg{ max-width: 92%; }
  .chat-footer{ padding: 12px 14px 14px; }
  .chat-attach{ width: 38px; height: 38px; }
  .chat-attach svg{ width: 17px; height: 17px; }
  .chat-msg-img{ max-width: 180px; }
}

/* =============================================================
   INFO · botón flotante "Quiénes somos" (junto al de Ayuda)
   Doble anillo verde (estilo moneda china)
   ============================================================= */
.btn-wizard{
  position: fixed;
  bottom: 32px;
  right: 111px;
  z-index: 9998;
  height: 36px;
  padding: 0 13px;
  border-radius: 18px;
  border: 1.2px solid var(--green);
  background: var(--bg-card);
  color: var(--green);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px -4px rgba(32,117,38,.45);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .3s ease;
}
.btn-wizard:hover{
  transform: translateY(-2px);
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 18px -4px rgba(32,117,38,.55);
}
.btn-wizard:focus-visible{
  outline: 3px solid rgba(32,117,38,.25);
  outline-offset: 2px;
}
.btn-wizard-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 14.5px;
  color: inherit;
  line-height: 1; letter-spacing: 0;
}
.btn-wizard-label{ line-height: 1; }
@media (max-width: 600px){
  .btn-wizard{
    height: 33px; padding: 0 11px;
    bottom: 28px; right: 106px;
    font-size: 11.5px; gap: 5px;
  }
  .btn-wizard-cn{ font-size: 13.5px; }
}

/* =============================================================
   ABOUT · modal "Quiénes somos"
   ============================================================= */
.about-modal{
  background: var(--bg-card);
}
.about-hero{
  text-align: center;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.about-hero-yinyang{
  display: block;
  width: 140px; height: 140px;
  margin: 0 auto 16px;
  shape-rendering: geometricPrecision;
}
.about-hero-yinyang .yy-spin{
  transform-origin: 50px 50px;
  animation: yy-spin 60s linear infinite;
}
.about-modal:hover .about-hero-yinyang .yy-spin{ animation-duration: 24s; }
@media (prefers-reduced-motion: reduce){
  .about-hero-yinyang .yy-spin{ animation: none; }
}
@media (max-width: 600px){
  .about-hero-yinyang{ width: 115px; height: 115px; }
  .about-intro-title{ font-size: 17px; }
  .about-section-title{ font-size: 14.5px; margin-top: 18px; }
}
.about-title{
  font-family: 'Playfair Display', 'Cardo', serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}
.about-sub{
  font-family: 'Cardo', serif;
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-soft);
  letter-spacing: .04em;
  margin: 8px 0 0;
}
.about-body{
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 640px;
  margin: 0 auto;
}
.about-body p{ margin: 0 0 16px; }
.about-body strong{
  font-weight: 700;
  color: var(--green-dark);
}
.about-intro-title{
  font-family: 'Playfair Display', 'Cardo', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--green-dark);
  margin: 0 0 14px;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.about-section-title{
  font-family: 'Playfair Display', 'Cardo', serif;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  margin: 22px 0 8px;
  letter-spacing: 0;
  line-height: 1.3;
}
.about-body .about-signature{
  font-family: 'Cardo', serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  color: var(--ink-faint);
  text-align: center;
  margin: 70px 0 0;
  letter-spacing: .04em;
  line-height: 1.5;
}

@media (max-width: 600px){
  .about-hero-cn{ font-size: 44px; }
  .about-body{ font-size: 14.5px; }
}

/* =============================================================
   SIDEBAR · CARD ESTADÍSTICA (contador de alimentos)
   ============================================================= */
.sidebar-stat{
  margin: 14px 18px 0;
  padding: 10px 14px;
  background: #E8F0E4;
  border: 2px solid #FAFAF7;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  box-shadow: 0 2px 6px -3px rgba(0,0,0,.15);
  transition: box-shadow .25s ease;
}
.sidebar-stat-label{
  font-family: 'Lato', sans-serif;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color .25s ease;
}
.sidebar-stat-num{
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1; letter-spacing: -.02em;
  color: var(--green-dark);
  transition: color .25s ease;
}
.sidebar-stat-wuxing{
  width: 30px; height: 30px;
  flex-shrink: 0;
  transition: transform .35s ease;
}
.sidebar-stat:hover .sidebar-stat-wuxing{ transform: scale(1.08); }
.sidebar-stat-wuxing .wx-spin{
  transform-origin: 50px 50px;
  animation: wx-spin 24s linear infinite;
}
.sidebar-stat:hover .sidebar-stat-wuxing .wx-spin{ animation-duration: 8s; }
@keyframes wx-spin{
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .sidebar-stat-wuxing .wx-spin{ animation: none; }
}
.sidebar-stat[data-state="filtered"] .sidebar-stat-num{ color: var(--green); }
.sidebar-stat[data-state="empty"] .sidebar-stat-num{ color: var(--cinnabar); }
.sidebar-stat[data-state="empty"] .sidebar-stat-label{ color: var(--cinnabar-dark); font-weight: 900; }
.hero-title-row{
  display: flex; align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-logo{
  display: block;
  width: 44px; height: 44px;
  flex-shrink: 0;
  transition: transform .35s ease;
}
.hero-logo:hover{ transform: scale(1.06); }
.hero-logo .yy-spin{
  transform-origin: 50px 50px;
  animation: yy-spin 32s linear infinite;
}
.hero-logo:hover .yy-spin{ animation-duration: 12s; }
@keyframes yy-spin{
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo .yy-spin{ animation: none; }
}
.hero h1{
  font-family: 'Cardo', serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  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;
}
.hero h1 .hero-tail{
  font-family: 'Cardo', serif;
  font-style: italic;
  font-weight: 700;
  font-size: .42em;
  color: var(--ink);
  letter-spacing: .04em;
  margin-left: .5em;
  vertical-align: .35em;
}


/* =============================================================
   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;
  display: flex; flex-direction: column;
}
.filter-box .filter-form{
  display: flex; flex-direction: column;
  flex: 1;
}
.filter-box h2{
  font-family: 'Cardo', serif;
  font-size: 22px; font-weight: 700;
  margin: 0; padding: 40px 22px 14px;
  display: flex; align-items: center; justify-content: 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: #E1ECF5 !important;
  color: #143656 !important;
  border: 1px solid #B6CADD !important;
  border-radius: 999px !important;
  padding: 3px 10px 3px 12px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  box-shadow: 0 1px 3px rgba(20,54,86,.18);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor: default;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice:hover{
  background: #CDDDEB !important;
  border-color: #2A5A85 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(20,54,86,.30);
}
/* Botón eliminar a la derecha con ✓ */
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove{
  position: relative;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: transparent !important;
  font-size: 0 !important;
  order: 2;
  transition: background .2s ease, transform .2s ease;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove::before{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 9px;
  border: solid #2A5A85;
  border-width: 0 2px 2px 0;
  transform: translate(-65%, -65%) rotate(45deg);
  transition: border-color .2s ease;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover{
  background: var(--cinnabar) !important;
  transform: scale(1.1);
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover::before{
  border-color: #FFFFFF;
}

/* Botón "Limpiar todo" sobre fondo verde */
.filter-box .actions-row{ margin-top: auto; padding-top: 36px; }
.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);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.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);
}
.btn-ghost-icon{
  width: 16px; height: 16px;
  flex-shrink: 0;
}
/* Botón "Eliminar Filtro": oculto cuando no hay ningún filtro activo */
#btnReset{ display: none; }
#btnReset.has-filters{ display: inline-flex; }


/* =============================================================
   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); }
.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: 100px 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: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 800;
}

.wuxing-svg{
  width: 100%; max-width: 240px; height: auto;
  margin: 4px auto 0; display: block;
  overflow: visible;
}
.wuxing-svg .wx-bg-ring{
  stroke: var(--green); stroke-width: .8;
  stroke-dasharray: 2 6; opacity: .22;
}
.wuxing-svg .wx-bg-ring2{
  stroke: var(--green); stroke-width: .6; opacity: .14;
}
.wuxing-svg .node{ cursor: pointer; }
.wuxing-svg .node circle.bg,
.wuxing-svg .node circle.halo,
.wuxing-svg .node ellipse.shine{
  transition: all .25s ease;
}
.wuxing-svg .node circle.halo{
  fill: none; stroke: currentColor;
  stroke-width: 1; opacity: 0;
}
.wuxing-svg .node.huo  { color: #D14B36; }
.wuxing-svg .node.tu   { color: #E0B048; }
.wuxing-svg .node.jin  { color: #C8C0B0; }
.wuxing-svg .node.shui { color: #2A5A85; }
.wuxing-svg .node.mu   { color: #4F9359; }
.wuxing-svg .node[data-element="huo"]  { color: #D14B36; }
.wuxing-svg .node[data-element="tu"]   { color: #E0B048; }
.wuxing-svg .node[data-element="jin"]  { color: #9C9382; }
.wuxing-svg .node[data-element="shui"] { color: #2A5A85; }
.wuxing-svg .node[data-element="mu"]   { color: #4F9359; }
.wuxing-svg .node circle.bg{
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.22));
}
.wuxing-svg .node:hover circle.bg{
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.32));
  transform: scale(1.06);
  transform-origin: center;
  transform-box: fill-box;
}
.wuxing-svg .node:hover circle.halo{
  opacity: .55;
  r: 46;
}
.wuxing-svg .node.active circle.bg{
  stroke-width: 2.5;
  filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.wuxing-svg .node.active circle.halo{
  opacity: .9;
  stroke-width: 1.5;
  r: 48;
  animation: wx-pulse 2.4s ease-in-out infinite;
}
@keyframes wx-pulse{
  0%, 100% { opacity: .9; r: 48; }
  50%      { opacity: .35; r: 54; }
}
.wuxing-svg .sheng-line{
  stroke: var(--green); stroke-width: 1.2;
  opacity: .3; fill: none;
  stroke-linejoin: round;
}
.wuxing-svg .ke-line{
  stroke: #B23A29; stroke-width: .8;
  opacity: .22; fill: none;
  stroke-dasharray: 3 4;
}
.wuxing-svg .center-bg{ opacity: .4; }
.wuxing-svg .center-text{
  font-family: 'Noto Serif SC', serif;
  fill: var(--green); font-weight: 700; opacity: .55;
  letter-spacing: .04em;
}
.wuxing-svg .node-cn{
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  fill: #fff;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.wuxing-svg .node-name{
  font-family: 'Lato', sans-serif; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  fill: var(--ink-soft); pointer-events: none; font-weight: 700;
}
.wuxing-svg .node ellipse.shine{
  pointer-events: none;
}
.wuxing-svg .node:hover ellipse.shine{
  opacity: .35;
}

.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 .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardIn{
  from{ opacity: 0; transform: translateY(16px); }
  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, #1b73f7, #5BA0FF); }
.card-item[data-temp="2"]::before{ background: linear-gradient(90deg, #71c5f6, #A8DCF8); }
.card-item[data-temp="3"]::before{ background: linear-gradient(90deg, #dbdede, #f0f0f0); }
.card-item[data-temp="4"]::before{ background: linear-gradient(90deg, #f6a6be, #f9c4d3); }
.card-item[data-temp="5"]::before{ background: linear-gradient(90deg, #ef1313, #f7595a); }

.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:#1b73f7; color:#FFFFFF; }      .b-temp-1 .dot{ background:#FFFFFF; }
.b-temp-2{ background:#71c5f6; color:#0E2E55; }      .b-temp-2 .dot{ background:#1b73f7; }
.b-temp-3{ background:#dbdede; color:#3A3F44; }      .b-temp-3 .dot{ background:#7A8086; }
.b-temp-4{ background:#f6a6be; color:#5A1F31; }      .b-temp-4 .dot{ background:#C44570; }
.b-temp-5{ background:#ef1313; color:#FFFFFF; }      .b-temp-5 .dot{ background:#FFFFFF; }
.b-sabor{
  background: var(--bg-tint); color: var(--green-dark);
  border: 1px solid transparent;
}
/* Sabores · paleta Wǔ Xíng (igual que la modal de Ayuda) */
.b-sabor.s-salado,  .pill-sabor.s-salado  { background:#2A5A85; color:#FFFFFF; border-color:#2A5A85; }
.b-sabor.s-picante, .pill-sabor.s-picante { background:#9C9382; color:#FFFFFF; border-color:#9C9382; }
.b-sabor.s-agrio,   .pill-sabor.s-agrio   { background:#4F9359; color:#FFFFFF; border-color:#4F9359; }
.b-sabor.s-amargo,  .pill-sabor.s-amargo  { background:#D14B36; color:#FFFFFF; border-color:#D14B36; }
.b-sabor.s-dulce,   .pill-sabor.s-dulce   { background:#E0B048; color:#5B4823; border-color:#E0B048; }

.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: 12px; right: 12px;
  width: 26px; height: 26px;
  background: #2A5A85;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(244,241,232,.40),
    inset 0 0 0 2px #2A5A85,
    0 2px 6px -1px rgba(20,54,86,.55);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.destacado-mark .destacado-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 16px; line-height: 1;
  color: #F4F1E8;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
.card-item:hover .destacado-mark{
  transform: scale(1.08) rotate(-4deg);
  box-shadow:
    inset 0 0 0 1px rgba(244,241,232,.55),
    inset 0 0 0 2px #2A5A85,
    0 3px 9px -1px rgba(20,54,86,.65);
}

/* =============================================================
   TOGGLE Cuadrícula ↔ Lista
   ============================================================= */
.view-bar{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
  align-items: center;
  margin: 0 0 14px;
}
.view-bar-themes{
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-width: 0;
}
.view-bar-themes > button{
  width: 100%;
  justify-content: center;
  min-width: 0;
}
.view-bar-tools{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
@media (max-width: 600px){
  .view-bar{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .view-bar-themes{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .view-bar-themes > button{ flex: 1 1 auto; }
  .view-bar-tools{ justify-content: flex-end; }
}
.sort-control{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px 4px 10px;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,.12);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sort-control:hover{
  border-color: var(--green-pale);
  box-shadow: 0 4px 12px -4px rgba(32,117,38,.18);
}
.sort-icon{
  width: 16px; height: 16px;
  color: var(--green-dark);
  flex-shrink: 0;
}
.sort-control select{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font-family: 'Lato', sans-serif;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--green-dark);
  cursor: pointer;
  min-width: 155px;
  padding: 4px 22px 4px 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5712' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 12px;
}
.sort-control select:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
.view-toggle{
  display: inline-flex; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,.12);
}
.view-opt{
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.view-opt svg{ width: 16px; height: 16px; flex-shrink: 0; }
.view-opt:hover{ color: var(--green-dark); background: var(--bg-tint); }
.view-opt.active{
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px -3px rgba(32,117,38,.4);
}
.view-opt:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }

/* Modo LISTA */
.grid.is-list{
  grid-template-columns: 1fr;
  gap: 6px;
}
.grid.is-list .card-item{
  display: flex; flex-direction: row; align-items: center;
  flex-wrap: wrap;
  min-height: 0;
  padding: 12px 18px 12px 22px;
  gap: 10px 16px;
  animation: listIn .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes listIn{
  from{ opacity: 0; transform: translateX(-12px); }
  to  { opacity: 1; transform: translateX(0); }
}
.grid.is-list .card-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(31,42,34,.18);
}
.grid.is-list .card-item::before{
  width: 4px; height: 100%;
  top: 0; bottom: 0; right: auto;
  border-radius: 12px 0 0 12px;
}
.grid.is-list .card-item:hover::before{ height: 100%; width: 5px; }
.grid.is-list .card-cat{
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.grid.is-list .card-cat::before{ display: none; }
.grid.is-list .card-title{
  font-family: 'Cardo', serif;
  font-size: 19px; font-weight: 700;
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid.is-list .card-meta{
  margin: 0;
  flex: 0 0 auto;
}
.grid.is-list .card-rutas{
  margin: 0;
  padding: 0;
  border-top: 0;
  font-size: 13.5px;
  flex: 0 1 240px;
  -webkit-line-clamp: 1;
  min-width: 0;
}
.grid.is-list .destacado-mark{
  position: static;
  width: 22px; height: 22px;
  flex-shrink: 0;
  order: -1;
  margin-right: 4px;
}
.grid.is-list .destacado-mark .destacado-cn{ font-size: 13px; }
.grid.is-list .card-item:hover .destacado-mark{ transform: scale(1.10) rotate(-3deg); }

@media (max-width: 600px){
  .grid.is-list .card-rutas{ flex-basis: 100%; }
  .grid.is-list .card-title{ flex-basis: 100%; }
}


/* =============================================================
   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;
}
/* Botón Compartir en el pie de la modal de detalle */
.btn-share{
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  background: var(--green);
  border: 1px solid var(--green-dark);
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px -3px rgba(32,117,38,.4);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-share:hover{
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -3px rgba(32,117,38,.55);
}
.btn-share:focus-visible{
  outline: 2px solid var(--green-pale);
  outline-offset: 2px;
}
.btn-share svg{ width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 600px){
  .btn-share span{ display: none; }
  .btn-share{ padding: 7px 9px; }
}

/* Cuando hay una modal abierta, ocultamos los botones flotantes
   para no solapar el contenido (especialmente el Compartir en el pie) */
html body.modal-open .btn-help,
html body.modal-open .btn-wizard,
html body.modal-open .btn-chat,
html body.modal-open .btn-up,
html body.modal-open .btn-selection{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.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(--cinnabar);  color: #fff; border-color: var(--cinnabar); }
.pill-sabor   { background: var(--bg-tint);   color: var(--green-dark); border-color: var(--bg-tint); }

.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; font-weight: 700;
  color: var(--ink);
  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: space-between; align-items: center;
  gap: 14px;
  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: 12px 24px;
  margin-top: auto;
}
.foot-inner{
  max-width: 1340px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: #1a6420;
  flex-wrap: wrap;
}
.foot-inner .cn-glyph{
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  color: var(--green); font-size: 14px;
}
/* CTA de WhatsApp dentro del modal "Quiénes somos" */
.about-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 28px 0 18px;
}
.about-wa-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3a9241 0%, #2d7c32 100%);
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 6px 18px -6px rgba(45,124,50,.55);
  transition: transform .2s ease, box-shadow .25s ease, color .2s ease;
}
.about-wa-btn:hover{
  transform: translateY(-1px);
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 24px -6px rgba(45,124,50,.65);
}
.about-wa-btn:active{ transform: translateY(0); }
.about-wa-btn .wa-icon{
  width: 20px; height: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

/* Botón teléfono · variante outline compacta bajo WhatsApp */
.about-tel-btn{
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1.5px solid var(--green);
  color: var(--green-dark) !important;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  box-shadow:
    0 1px 0 rgba(0,0,0,.02),
    0 4px 12px -6px rgba(32,117,38,.3);
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.about-tel-btn:hover{
  transform: translateY(-1px);
  background: #F4FAF4;
  color: var(--green-dark) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.02),
    0 8px 18px -8px rgba(32,117,38,.45);
}
.about-tel-btn:active{ transform: translateY(0); }
.about-tel-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a9241 0%, #2d7c32 100%);
  color: #FFFFFF;
  flex: 0 0 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.about-tel-icon svg{ width: 14px; height: 14px; }
.about-tel-text{
  display: flex; flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.about-tel-label{
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  opacity: .85;
}
.about-tel-number{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px){
  .about-wa-btn{ padding: 10px 18px; font-size: 13px; }
  .about-wa-btn .wa-icon{ width: 18px; height: 18px; }
  .about-tel-btn{ padding: 5px 14px 5px 7px; gap: 7px; }
  .about-tel-icon{ width: 24px; height: 24px; flex-basis: 24px; }
  .about-tel-icon svg{ width: 13px; height: 13px; }
  .about-tel-number{ font-size: 12.5px; }
  .about-tel-label{ font-size: 8px; }
}

/* =============================================================
   GLOSARIO MTC · Tooltips sobre <dfn class="glo-term">
   ============================================================= */
.glo-term{
  font-style: normal;
  font-weight: 700;
  color: var(--green-dark);
  border-bottom: 1.5px dotted var(--green);
  cursor: help;
  padding: 0 1px;
  border-radius: 2px;
  transition: background .2s ease, color .2s ease, border-bottom-color .2s ease;
}
.glo-term:hover,
.glo-term:focus-visible{
  background: var(--bg-tint);
  color: var(--green);
  border-bottom-color: var(--green-dark);
  outline: none;
}

.tooltip.mtc-tooltip{
  --bs-tooltip-bg: var(--bg-card);
  --bs-tooltip-color: var(--ink);
  --bs-tooltip-max-width: 320px;
  --bs-tooltip-opacity: 1;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.tooltip.mtc-tooltip .tooltip-inner{
  background: var(--bg-card);
  color: var(--ink);
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--green-pale);
  border-radius: 8px;
  max-width: 320px;
  text-transform: none;
}
.tooltip.mtc-tooltip .tooltip-inner b{
  display: block;
  font-family: 'Playfair Display', 'Cardo', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--green-dark);
  margin-bottom: 4px;
  letter-spacing: .01em;
}
.tooltip.mtc-tooltip .tooltip-arrow::before{ display: none; }

/* Tooltip de los botones Ayuda y Asistente — estilo "sello chino verde MTC" */
.tooltip.help-tooltip{
  --bs-tooltip-bg: var(--green);
  --bs-tooltip-color: #FFFFFF;
  --bs-tooltip-max-width: 260px;
  --bs-tooltip-opacity: 1;
  filter: drop-shadow(0 10px 24px rgba(32,117,38,.35));
}
.tooltip.help-tooltip .tooltip-inner{
  position: relative;
  background: linear-gradient(135deg, #4DA34F 0%, #207526 55%, #0c5712 100%);
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-size: 13px; font-weight: 700;
  line-height: 1.5; letter-spacing: 0;
  text-align: left;
  padding: 14px 20px 14px 16px;
  border: 1px solid #0a3d0a;
  border-radius: 6px;
  max-width: 260px;
  text-transform: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.tooltip.help-tooltip .tooltip-inner::before{
  content: '';
  position: absolute;
  top: 8px; right: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #F0C060;
  box-shadow: 0 0 5px rgba(240,192,96,.7);
}
.tooltip.help-tooltip .tooltip-inner b{
  display: block;
  font-family: 'Playfair Display', 'Noto Serif SC', 'Cardo', serif;
  font-weight: 800;
  font-size: 14.5px;
  color: #FFFFFF;
  margin-bottom: 5px;
  letter-spacing: .015em;
  text-shadow: 0 1px 1px rgba(0,0,0,.20);
}
.tooltip.help-tooltip .tooltip-arrow::before{ display: none; }


/* =============================================================
   CHIPS · Filtros activos
   ============================================================= */
.active-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px dashed var(--line);
  animation: chips-in .25s ease both;
}
@keyframes chips-in{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.filter-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tint);
  border: 1px solid var(--green-pale);
  color: var(--green-dark);
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.filter-chip:hover{
  background: var(--bg-card);
  border-color: var(--green);
  box-shadow: 0 2px 8px -2px rgba(32,117,38,.2);
}
.filter-chip .chip-label{
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  padding-right: 4px;
  border-right: 1px solid var(--green-pale);
  margin-right: 2px;
}
.filter-chip .chip-value{
  color: var(--ink);
  font-family: 'Lato', sans-serif;
}
.filter-chip .chip-remove{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--green);
  border: none; border-radius: 50%;
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0;
  margin-left: 2px;
  font-family: 'Lato', sans-serif;
  transition: background .15s ease, color .15s ease, transform .25s ease;
}
.filter-chip .chip-remove:hover{
  background: var(--cinnabar);
  color: #fff;
  transform: rotate(90deg);
}
.filter-chip .chip-remove:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.chip-clear-all{
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cinnabar);
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.chip-clear-all:hover{
  background: rgba(178,58,41,.06);
  border-color: rgba(178,58,41,.3);
  color: var(--cinnabar-dark);
}
.chip-clear-all:focus-visible{
  outline: 2px solid var(--cinnabar);
  outline-offset: 2px;
}

@media (max-width: 600px){
  .filter-chip{ font-size: 12px; padding: 3px 3px 3px 10px; }
  .filter-chip .chip-label{ font-size: 9.5px; }
  .chip-clear-all{ margin-left: 0; width: 100%; text-align: center; }
}

/* =============================================================
   BOTÓN VOLVER ARRIBA flotante
   ============================================================= */
.btn-up{
  position: fixed;
  bottom: 96px; right: 24px;
  z-index: 9997;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--green);
  background: var(--bg-card);
  color: var(--green);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -6px rgba(32,117,38,.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, visibility .25s ease,
              transform .25s ease, background .2s ease,
              color .2s ease, box-shadow .25s ease;
}
.btn-up.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn-up:hover{
  transform: translateY(-3px);
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 26px -6px rgba(32,117,38,.55);
}
.btn-up:focus-visible{
  outline: 3px solid var(--green-pale);
  outline-offset: 2px;
}
.btn-up svg{ width: 18px; height: 18px; }

@media (max-width: 600px){
  .btn-up{ bottom: 84px; right: 18px; width: 40px; height: 40px; }
}

/* =============================================================
   BOTÓN AYUDA flotante
   ============================================================= */
.btn-help{
  position: fixed;
  bottom: 32px; right: 16px;
  z-index: 9998;
  height: 36px;
  padding: 0 13px;
  border-radius: 18px;
  border: 1.2px solid var(--green);
  background: var(--bg-card);
  color: var(--green);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(32,117,38,.45);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .3s ease;
}
.btn-help:hover{
  transform: translateY(-2px);
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 18px -4px rgba(32,117,38,.55);
}
.btn-help:focus-visible{
  outline: 3px solid rgba(32,117,38,.25);
  outline-offset: 2px;
}
.btn-help .help-label{ line-height: 1; }

@media (max-width: 600px){
  .btn-help{
    bottom: 28px; right: 16px;
    height: 33px;
    padding: 0 11px;
    gap: 5px;
    font-size: 11.5px;
  }
  .btn-help .help-label{ display: inline; }
}

/* =============================================================
   MODAL AYUDA · Bioenergética de los Alimentos
   ============================================================= */
.help-modal .modal-body{ background: var(--bg-card); }

.help-hero{
  text-align: center;
  padding: 40px 24px 28px;
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.help-yinyang{
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}
.help-yinyang svg{ width: 100%; height: 100%; }
.help-title{
  font-family: 'Playfair Display', 'Cardo', serif;
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}
.help-title em{
  font-style: italic;
  font-weight: 700;
  color: var(--green);
}
.help-sub{
  margin-top: 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-faint);
}
.help-rule{
  width: 60px; height: 2px; margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}

.help-content{
  padding: 36px clamp(20px, 4vw, 44px) 24px;
}

.help-sect{
  margin-bottom: 44px;
}
.help-sect:last-child{ margin-bottom: 0; }

.help-sect-label{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.help-num{
  font-family: 'Noto Serif SC', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cinnabar);
  opacity: .35;
  line-height: 1;
}
.help-tag{
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex; align-items: center;
}
.help-tag::before{
  content: ''; display: inline-block;
  width: 22px; height: 1px; background: var(--ink-faint);
  margin-right: 12px;
}

.help-sect-title{
  font-family: 'Playfair Display', 'Cardo', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
  line-height: 1.15;
}
.help-sect-title.help-sm{ font-size: 1.25rem; }
.help-sect-title .cn{
  font-family: 'Noto Serif SC', serif;
  color: var(--green);
  font-size: .85em;
  font-weight: 500;
}

.help-body{
  font-family: 'Cardo', serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 12px;
  max-width: 760px;
}
.help-body.help-sm{ font-size: 14.5px; line-height: 1.6; }
.help-italic{ font-style: italic; color: var(--ink-faint); font-size: 14px; }
.help-body strong{ color: var(--ink); font-weight: 700; }

.help-temp-pills{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}

/* SABORES */
.help-sabores{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.help-sabor{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 16px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.help-sabor::after{
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--green));
}
.help-sabor:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.18);
  border-color: var(--accent, var(--green));
}
.help-sabor h4{
  font-family: 'Playfair Display', 'Cardo', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.help-sabor-elem{
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.help-sabor-desc{
  font-family: 'Cardo', serif;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.help-sabor-dot{
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, var(--green));
  box-shadow: 0 0 12px var(--accent, var(--green));
  display: block; margin: 0 auto 14px;
}
.help-sabor.s-salado  { --accent: #2A5A85; }
.help-sabor.s-picante { --accent: #9C9382; }
.help-sabor.s-agrio   { --accent: #4F9359; }
.help-sabor.s-amargo  { --accent: #D14B36; }
.help-sabor.s-dulce   { --accent: #E0B048; }

/* TRIPLE FILA */
.help-triple{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
}
.help-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 14px -6px rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.help-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.18);
}

.help-list{
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.help-row{
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  transition: background .2s ease;
}
.help-row:hover{ background: var(--bg-tint); }
.help-row strong{ color: var(--ink); font-weight: 700; }
.help-sym{
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--cinnabar);
  color: var(--cinnabar);
  background: rgba(178,58,41,.08);
  font-size: 14px;
  flex-shrink: 0;
}
.help-sym svg{ width: 14px; height: 14px; display: block; }
.help-sym-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
}
.help-sym.filled{
  background: var(--cinnabar);
  color: #fff;
  box-shadow: 0 0 10px rgba(178,58,41,.35);
}

.help-codes{
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 4px;
}
.help-code{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: background .2s ease;
}
.help-code:hover{ background: var(--bg-tint); }

.help-meridians{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
}
.help-meri{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: background .2s ease;
}
.help-meri:hover{ background: var(--bg-tint); }
.help-meri .mcode{
  font-family: 'Lato', sans-serif;
  font-weight: 700; font-size: 11px;
  color: var(--green);
  background: var(--bg-tint);
  border: 1px solid var(--green-pale);
  border-radius: 5px;
  padding: 2px 7px;
  min-width: 32px;
  text-align: center;
  letter-spacing: .04em;
  flex-shrink: 0;
}

@media (max-width: 992px){
  .help-sabores{ grid-template-columns: repeat(3, 1fr); }
  .help-triple{ grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px){
  .help-hero{ padding: 28px 18px 22px; }
  .help-yinyang{ width: 64px; height: 64px; margin-bottom: 12px; }
  .help-content{ padding: 26px 18px 18px; }
  .help-sabores{ grid-template-columns: 1fr 1fr; }
  .help-meridians{ grid-template-columns: 1fr; }
}


/* =============================================================
   MI SELECCIÓN · Botón ☆ en tarjetas
   ============================================================= */
.card-star{
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card-star svg{ width: 18px; height: 18px; }
.card-star:hover{
  background: var(--bg-card);
  color: var(--cinnabar);
  border-color: var(--cinnabar);
  transform: scale(1.08);
  box-shadow: 0 4px 10px -2px rgba(178,58,41,.3);
}
.card-item.is-selected .card-star{
  background: var(--cinnabar);
  color: #fff;
  border-color: var(--cinnabar);
  box-shadow: 0 4px 12px -3px rgba(178,58,41,.45);
}
.card-item.is-selected .card-star svg polygon{
  fill: currentColor;
}
.card-item.is-selected .card-star:hover{
  background: var(--cinnabar-dark);
  color: #fff;
}
/* Si hay destacado, desplazarlo a la izquierda para que no choque con la estrella */
.card-item.is-selected .destacado-mark,
.card-item .destacado-mark{ right: auto; left: 14px; }

/* En modo lista la estrella va más compacta */
.grid.is-list .card-star{
  position: static; order: -1;
  flex-shrink: 0;
  width: 28px; height: 28px;
  margin-right: 4px;
}

/* =============================================================
   MI SELECCIÓN · Botón flotante (esquina inferior izquierda)
   ============================================================= */
.btn-selection{
  position: fixed;
  bottom: 32px; left: 24px;
  z-index: 9998;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar);
  font-family: 'Lato', sans-serif;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(178,58,41,.45);
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  animation: sel-pop .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sel-pop{
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.btn-selection svg{ width: 18px; height: 18px; }
.btn-selection:hover{
  transform: translateY(-2px);
  background: var(--cinnabar);
  color: #fff;
  box-shadow: 0 10px 26px -6px rgba(178,58,41,.55);
}
.btn-selection-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cinnabar);
  color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0;
}
.btn-selection:hover .btn-selection-count{
  background: #fff;
  color: var(--cinnabar);
}
@media (max-width: 600px){
  .btn-selection{
    top: 10px;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 38px;
    padding: 0 12px 0 10px;
    animation: sel-pop-top .3s cubic-bezier(.16,1,.3,1) both;
  }
  .btn-selection:hover{
    transform: translateX(-50%) translateY(-2px);
  }
  .btn-selection-label{ display: none; }
}
@keyframes sel-pop-top{
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Botón toggle de selección en pie de modal de detalle */
.btn-sel-toggle{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar);
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn-sel-toggle svg{ width: 14px; height: 14px; }
.btn-sel-toggle:hover{ background: var(--cinnabar); color: #fff; }
.btn-sel-toggle.is-selected{ background: var(--cinnabar); color: #fff; }
.btn-sel-toggle.is-selected .btn-sel-toggle-label::before{ content: '✓ '; }

/* =============================================================
   MI SELECCIÓN · Modal contenido
   ============================================================= */
.selection-meta{
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.selection-shared-banner{
  background: linear-gradient(135deg, #FBEAE6 0%, #F1C0B7 100%);
  border-left: 4px solid var(--cinnabar);
  color: var(--cinnabar-dark);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.selection-empty{
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-faint);
  font-style: italic;
  font-family: 'Cardo', serif;
  font-size: 15px;
}
.selection-list{
  display: flex; flex-direction: column;
  gap: 8px;
}
.sel-item{
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cinnabar);
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sel-item:hover{
  border-color: var(--green-pale);
  border-left-color: var(--cinnabar);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.12);
}
.sel-item-main{ flex: 1; min-width: 0; }
.sel-item-cat{
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.sel-item-title{
  font-family: 'Cardo', serif;
  font-weight: 700; font-size: 19px;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.sel-item-meta{ display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.sel-item-meta .badge-mtc{ font-size: 9.5px; padding: 3px 8px 3px 7px; }
.sel-item-rutas{
  font-family: 'Cardo', serif;
  font-style: italic;
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.4;
}
.sel-item-remove{
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sel-item-remove:hover{
  background: var(--cinnabar);
  color: #fff;
  transform: scale(1.08);
}

/* Pie de modal con acciones de compartir */
.selection-foot{
  padding: 16px 24px;
}
.selection-actions{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.selection-share-group{ display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Confirmación inline para "Vaciar" */
.selection-confirm{
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #FBEAE6 0%, #F1C0B7 100%);
  border: 1px solid var(--cinnabar);
  border-radius: 10px;
  animation: sel-confirm-in .25s cubic-bezier(.16,1,.3,1) both;
  flex-wrap: wrap;
}
@keyframes sel-confirm-in{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.selection-confirm-text{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--cinnabar-dark);
  flex: 1; min-width: 200px;
}
.selection-confirm-text svg{ width: 18px; height: 18px; flex-shrink: 0; color: var(--cinnabar); }
.selection-confirm-actions{ display: inline-flex; gap: 8px; }
.btn-sel-cancel{
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.btn-sel-cancel:hover{
  background: var(--bg-tint);
  border-color: var(--green-pale);
  color: var(--green-dark);
}
.btn-sel-yes{
  background: var(--cinnabar);
  border: 1px solid var(--cinnabar-dark);
  color: #fff;
  font-weight: 800 !important;
}
.btn-sel-yes:hover{
  background: var(--cinnabar-dark);
  border-color: var(--cinnabar-dark);
  color: #fff;
}
.btn-sel{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn-sel svg{ width: 14px; height: 14px; flex-shrink: 0; }
.btn-sel:hover{ transform: translateY(-1px); }
.btn-sel-clear:hover{ background: var(--cinnabar); color: #fff; border-color: var(--cinnabar); }
.btn-sel-share:hover{ background: var(--green); color: #fff; border-color: var(--green); }
.btn-sel-wa{ background: #25D366; color: #fff; border-color: #25D366; }
.btn-sel-wa:hover{ background: #1da851; border-color: #1da851; }
.btn-sel-print:hover{ background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }

@media (max-width: 600px){
  .selection-foot{ flex-direction: column; align-items: stretch; }
  .selection-share-group{ justify-content: center; }
  .btn-sel-clear{ width: 100%; justify-content: center; }
}

/* Modo impresión: solo se ve la lista de selección */
@media print{
  body.printing-selection > *:not(#selectionModal){ display: none !important; }
  body.printing-selection #selectionModal{
    position: static !important;
    display: block !important;
    background: #fff !important;
  }
  body.printing-selection .modal-backdrop,
  body.printing-selection .btn-close,
  body.printing-selection .selection-foot,
  body.printing-selection .sel-item-remove,
  body.printing-selection .modal-header,
  body.printing-selection .selection-shared-banner{ display: none !important; }
  body.printing-selection .modal-dialog{ max-width: 100% !important; margin: 0 !important; }
  body.printing-selection .modal-content{ border: none !important; box-shadow: none !important; }
  body.printing-selection .sel-item{ break-inside: avoid; page-break-inside: avoid; }
}

/* =============================================================
   BANNER RGPD / Cookies
   ============================================================= */
.gdpr-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 10000;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--green-pale);
  border-left: 4px solid var(--green);
  border-radius: 12px;
  box-shadow: 0 14px 36px -12px rgba(0,0,0,.22);
  font-family: 'Lato', sans-serif;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 760px;
  margin-left: auto; margin-right: auto;
  animation: gdpr-in .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gdpr-in{
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gdpr-banner.gdpr-leaving{
  animation: gdpr-out .3s ease forwards;
}
@keyframes gdpr-out{
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}
.gdpr-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: var(--green);
  flex-shrink: 0;
}
.gdpr-icon svg{ width: 22px; height: 22px; }
.gdpr-text{ flex: 1; }
.gdpr-accept{
  background: var(--green);
  border: 1px solid var(--green-dark);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gdpr-accept:hover{
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(32,117,38,.4);
}
.gdpr-accept:focus-visible{
  outline: 2px solid var(--green-pale);
  outline-offset: 2px;
}

@media (max-width: 600px){
  .gdpr-banner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    left: 10px; right: 10px; bottom: 10px;
    font-size: 12.5px;
  }
  .gdpr-text{ text-align: center; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 992px){
  .layout{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px){
  .hero{ padding: 10px 16px 12px; }
  .hero h1{ white-space: normal; font-size: 22px; }
  .hero-row{ grid-template-columns: 1fr; gap: 10px; }
  .hero-logo{ width: 38px; height: 38px; }
  .hero-title-row{ gap: 12px; }
  .hero h1 .hero-tail{ font-size: 12px; vertical-align: .2em; margin-left: .35em; }
}
@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; }
  .hero{ padding: 8px 14px 10px; }
  .hero h1{ font-size: 20px; }
  .hero-logo{ display: none; }
  .hero h1 .cn{ font-size: .42em; }
  .hero h1 .hero-tail{ font-size: 11px; vertical-align: .25em; }
}

/* =============================================================
   TEST 5 ELEMENTOS · Botón en la barra superior (antes de ordenar)
   ============================================================= */
.view-bar .btn-test{
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #4F9359 0%, #D14B36 25%, #E0B048 50%, #DCD7CC 75%, #2A5A85 100%) border-box;
  color: var(--cinnabar);
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 14px -6px rgba(178,58,41,.35);
  transition: transform .2s ease, box-shadow .25s ease, color .2s ease;
}
.view-bar .btn-test:hover{
  transform: translateY(-1px);
  color: var(--green-dark);
  box-shadow: 0 8px 20px -6px rgba(178,58,41,.45);
}
.view-bar .btn-test:focus-visible{
  outline: 3px solid rgba(178,58,41,.25);
  outline-offset: 2px;
}
.btn-test-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 16px;
  color: var(--cinnabar);
  line-height: 1;
  transition: color .2s ease;
}
.view-bar .btn-test:hover .btn-test-cn{ color: var(--green-dark); }
.btn-test-label{ line-height: 1; }
.btn-test-dots{
  display: inline-flex; gap: 3px;
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.btn-test-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.btn-test-dot.d-mu  { background: #4F9359; }
.btn-test-dot.d-huo { background: #D14B36; }
.btn-test-dot.d-tu  { background: #E0B048; }
.btn-test-dot.d-jin { background: #C8C0B0; }
.btn-test-dot.d-shui{ background: #2A5A85; }
@media (max-width: 600px){
  .view-bar .btn-test{
    height: 32px; padding: 0 11px 0 10px;
    font-size: 10.5px; gap: 7px;
  }
  .btn-test-cn{ font-size: 14px; }
  .btn-test-dots{ display: none; }
}

/* =============================================================
   TEST 5 ELEMENTOS · Modal
   ============================================================= */
/* Dialog del test: más ancho y casi pantalla completa en alto */
.test-modal-dialog{
  max-width: 920px;
  height: calc(100vh - 1.75rem);
  margin: .875rem auto;
}
.modal-content.test-modal{
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Cada sección ocupa todo el alto disponible y desplaza su propio contenido */
.modal-content.test-modal > .test-hero,
.modal-content.test-modal > .test-section,
.modal-content.test-modal > .test-results{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.modal-content.test-modal .btn-close{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  width: 32px; height: 32px;
  font-size: 18px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.18);
}
@media (max-width: 600px){
  .test-modal-dialog{
    height: calc(100vh - .5rem);
    margin: .25rem;
    max-width: none;
  }
}

/* Hero del test */
.test-hero{
  position: relative;
  padding: 56px 28px 48px;
  background: linear-gradient(135deg, #0c5712 0%, #207526 45%, #4f9359 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.test-hero-orb{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.test-hero-orb:nth-child(1){ width: 280px; height: 280px; top: -80px; left: -60px; }
.test-hero-orb:nth-child(2){ width: 200px; height: 200px; bottom: -60px; right: -40px; }
.test-hero-orb:nth-child(3){ width: 140px; height: 140px; top: 40%; right: 20%; }
.test-hero-content{ position: relative; z-index: 1; max-width: 520px; }
.test-hero-badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-family: 'Lato', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 22px;
}
.test-dot-row{ display: inline-flex; gap: 4px; }
.test-mini-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; opacity: .8;
}
.test-mini-dot:nth-child(1){ background: #4F9359; opacity: 1; }
.test-mini-dot:nth-child(2){ background: #D14B36; opacity: 1; }
.test-mini-dot:nth-child(3){ background: #E0B048; opacity: 1; }
.test-mini-dot:nth-child(4){ background: #DCD7CC; opacity: 1; }
.test-mini-dot:nth-child(5){ background: #2A5A85; opacity: 1; }
.test-hero-title{
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: 38px; line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.test-hero-subtitle{
  font-family: 'Cardo', serif; font-style: italic;
  font-size: 18px;
  margin: 0 0 16px;
  opacity: .95;
}
.test-hero-desc{
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 auto 26px;
  max-width: 440px;
  opacity: .85;
}
.test-btn-start{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px;
  background: #fff;
  color: var(--green-dark);
  border: none;
  border-radius: 999px;
  font-family: 'Lato', sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .25s ease;
}
.test-btn-start:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,.55);
}

/* Sección de preguntas */
.test-section{ padding: 56px 28px 36px; }
.test-progress{ margin-bottom: 28px; padding-right: 44px; }
.test-progress-track{
  width: 100%; height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.test-progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green) 0%, var(--cinnabar) 100%);
  transition: width .35s ease;
}
.test-progress-text{
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .14em; text-transform: uppercase;
}

.test-question-card{ display: none; }
.test-question-card.active{ display: block; animation: testQFade .25s ease both; }
@keyframes testQFade{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.test-question-number{
  font-family: 'Lato', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--green);
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 10px;
}
.test-question-text{
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 22px; line-height: 1.35;
  color: var(--ink);
  margin: 0 0 22px;
}
.test-tiebreaker-notice{
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--bg-tint);
  border-left: 3px solid var(--cinnabar);
  border-radius: 4px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
}
.test-tiebreaker-notice strong{ color: var(--cinnabar); }
.test-options{
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.test-option-btn{
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.test-option-btn:hover{
  border-color: var(--green);
  background: var(--bg-tint);
  transform: translateX(2px);
}
.test-option-btn.selected{
  border-color: var(--green);
  background: var(--bg-tint);
  box-shadow: inset 0 0 0 1px var(--green);
}
.test-option-letter{
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--green);
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0;
}
.test-option-btn.selected .test-option-letter{
  background: var(--green);
  color: #fff;
}
.test-nav-buttons{
  display: flex; justify-content: space-between;
  margin-top: 6px;
}
.test-nav-btn{
  padding: 9px 18px;
  background: var(--bg-card);
  border: 1px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  font-family: 'Lato', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.test-nav-btn:hover:not(:disabled){
  background: var(--green);
  color: #fff;
}
.test-nav-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}
.test-nav-btn.next{
  background: var(--green);
  color: #fff;
}
.test-nav-btn.next:disabled{
  background: var(--bg-soft);
  color: var(--ink-faint);
  border-color: var(--line);
}
.test-nav-btn.next:hover:not(:disabled){
  background: var(--green-dark);
  border-color: var(--green-dark);
}

/* Resultados */
.test-results{ padding: 0 0 36px; }
.test-results-header{
  text-align: center;
  padding: 28px 28px 18px;
}
.test-results-header h3{
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--green);
  margin: 0 0 6px;
}
.test-results-header p{
  font-family: 'Cardo', serif; font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
}
.test-score-bars{
  padding: 18px 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.test-score-row{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
}
.test-score-label{
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.test-score-row.winner .test-score-label{ color: var(--ink); }
.test-score-track{
  height: 22px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.test-score-fill{
  height: 100%;
  width: 0%;
  display: flex; align-items: center;
  padding: 0 10px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .04em;
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.test-score-fill.madera{ background: linear-gradient(90deg, #2d5e38, #4a8a5c); }
.test-score-fill.fuego{  background: linear-gradient(90deg, #962820, #d94535); }
.test-score-fill.tierra{ background: linear-gradient(90deg, #a07c08, #d4a520); }
.test-score-fill.metal{  background: linear-gradient(90deg, #4a5a66, #7a8e9e); }
.test-score-fill.agua{   background: linear-gradient(90deg, #1a4a60, #357da0); }

.test-result-detail{ padding: 0; }
.test-result-banner{
  position: relative;
  text-align: center;
  padding: 38px 28px 32px;
  margin: 26px 28px 0;
  color: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 36px -14px rgba(0,0,0,.35);
}
.test-result-banner::before,
.test-result-banner::after{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
}
.test-result-banner::before{ width: 480px; height: 480px; }
.test-result-banner::after{
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
}
.test-result-banner > *{ position: relative; z-index: 1; }
.test-element-icon{
  font-size: 62px;
  display: block;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
.test-result-banner h3{
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-style: italic;
  font-size: 56px;
  line-height: 1;
  margin: 0 0 14px;
  letter-spacing: -.015em;
  text-shadow: 0 2px 14px rgba(0,0,0,.20);
}
.test-result-banner h3::after{
  content: '';
  display: block;
  width: 40px; height: 2px;
  margin: 14px auto 0;
  background: rgba(255,255,255,.55);
  border-radius: 999px;
}
.test-archetype{
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .32em; text-transform: uppercase;
  opacity: .92;
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.test-result-body{ padding: 26px 28px 0; }
.test-result-meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.test-meta-item{
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.test-meta-label{
  font-family: 'Lato', sans-serif;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 3px;
}
.test-meta-value{
  font-family: 'Lato', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
}
.test-result-desc{
  font-family: 'Cardo', serif;
  font-size: 16px; line-height: 1.6;
  color: var(--ink);
  margin-bottom: 22px;
}
.test-result-desc p{ margin: 0 0 12px; }
.test-result-desc p:last-child{ margin-bottom: 0; }
.test-result-tip,
.test-food-tip-box{
  background: var(--bg-tint);
  border-left: 4px solid var(--green);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 26px;
}
.test-result-tip strong,
.test-food-tip-box strong{
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.test-result-tip p,
.test-food-tip-box p{
  margin: 0;
  font-family: 'Cardo', serif;
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
}

.test-result-food,
.test-result-acu,
.test-result-formulas{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.test-result-food-title,
.test-result-section-title{
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 20px;
  color: var(--green-dark);
  margin: 0 0 6px;
}
.test-result-food-intro,
.test-result-section-intro{
  font-family: 'Cardo', serif; font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.test-food-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.test-food-col{
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.test-food-favor{ background: rgba(79,147,89,.08); border-color: rgba(79,147,89,.3); }
.test-food-avoid{ background: rgba(209,75,54,.06); border-color: rgba(209,75,54,.25); }
.test-food-col-label{
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.test-food-favor .test-food-col-label{ color: var(--green-dark); }
.test-food-avoid .test-food-col-label{ color: var(--cinnabar); }
.test-food-col p{
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
}

.test-acu-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.test-acu-card{
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
}
.test-acu-name{
  font-family: 'Lato', sans-serif;
  font-weight: 800; font-size: 13px;
  color: var(--green-dark);
  margin-bottom: 3px;
}
.test-acu-location{
  font-family: 'Lato', sans-serif;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 4px;
}
.test-acu-action{
  font-family: 'Cardo', serif;
  font-size: 14px; line-height: 1.45;
  color: var(--ink);
}
.test-formula-list{ display: flex; flex-direction: column; gap: 10px; }
.test-formula-card{
  padding: 12px 14px;
  border-left: 4px solid var(--green);
  background: var(--bg-soft);
  border-radius: 4px;
}
.test-formula-name{
  font-family: 'Lato', sans-serif;
  font-weight: 800; font-size: 13px;
  color: var(--green-dark);
  margin-bottom: 4px;
}
.test-formula-action{
  font-family: 'Cardo', serif;
  font-size: 14px; line-height: 1.45;
  color: var(--ink);
}

.test-btn-restart{
  display: block;
  margin: 28px auto 0;
  padding: 10px 24px;
  background: var(--bg-card);
  border: 1px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  font-family: 'Lato', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.test-btn-restart:hover{
  background: var(--green);
  color: #fff;
}

@media (max-width: 600px){
  .test-hero{ padding: 44px 18px 36px; min-height: 320px; }
  .test-hero-title{ font-size: 28px; }
  .test-hero-subtitle{ font-size: 15px; }
  .test-hero-desc{ font-size: 13px; }
  .test-section{ padding: 52px 18px 28px; }
  .test-result-banner{ margin: 22px 18px 0; }
  .test-question-text{ font-size: 18px; }
  .test-option-btn{ padding: 11px 13px; font-size: 13px; gap: 10px; }
  .test-option-letter{ width: 22px; height: 22px; font-size: 10px; }
  .test-results-header{ padding: 22px 18px 14px; }
  .test-score-bars{ padding: 14px 18px 22px; }
  .test-score-row{ grid-template-columns: 72px 1fr; gap: 10px; }
  .test-result-banner{ padding: 30px 18px; }
  .test-result-banner h3{ font-size: 36px; }
  .test-result-body{ padding: 22px 18px 0; }
  .test-result-meta{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .test-food-columns{ grid-template-columns: 1fr; }
}

/* Botón discreto de admin junto al selector de idiomas */
.btn-admin{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  text-decoration: none;
  margin-left: 6px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.btn-admin svg{ width: 14px; height: 14px; }
.btn-admin:hover{
  color: var(--green);
  border-color: var(--green);
  background: var(--bg-tint);
}
.btn-admin-name{
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
  margin-left: 8px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px){
  .btn-admin-name{ display: none; }
}

/* =============================================================
   ADMIN · login y dashboard de estadísticas
   ============================================================= */
body.admin-page{
  background: var(--bg-soft);
  min-height: 100vh;
  margin: 0;
  font-family: 'Lato', sans-serif;
  color: var(--ink);
}

/* ---- LOGIN ---- */
.admin-login-wrap{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.admin-login-card{
  background: var(--bg-card);
  width: 100%; max-width: 380px;
  padding: 36px 32px 32px;
  border-radius: 14px;
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.22);
}
.admin-login-brand{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.admin-login-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 20px;
  color: var(--cinnabar);
  line-height: 1;
}
.admin-login-title{
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-login-heading{
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: 26px;
  color: var(--green-dark);
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.admin-login-error{
  background: rgba(178,58,41,.08);
  border-left: 3px solid var(--cinnabar);
  color: var(--cinnabar);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 16px;
}

.admin-field{
  display: block;
  margin-bottom: 14px;
}
.admin-field-label{
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.admin-field input{
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.admin-field input:focus{
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(32,117,38,.15);
}

.admin-btn-primary{
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 18px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.admin-btn-primary:hover{ background: var(--green-dark); transform: translateY(-1px); }
.admin-btn-ghost{
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink-soft);
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.admin-btn-ghost:hover{
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}

/* Volver al sitio (verde) */
.admin-btn-back{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 12px;
  border: 1.2px solid var(--green);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--green);
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .25s ease;
  box-shadow: 0 3px 10px -5px rgba(32,117,38,.35);
}
.admin-btn-back svg{ width: 14px; height: 14px; transition: transform .2s ease; }
.admin-btn-back:hover{
  background: var(--green);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(32,117,38,.5);
}
.admin-btn-back:hover svg{ transform: translateX(-3px); }
@media (max-width: 720px){
  .admin-btn-back span{ display: none; }
  .admin-btn-back{ padding: 7px 10px; }
}

/* ---- Header ---- */
.admin-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
.admin-header-brand{ display: flex; align-items: center; gap: 10px; }
.admin-header-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 18px;
  color: var(--cinnabar);
}
.admin-header-title{
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-header-right{ display: flex; align-items: center; gap: 14px; }
.admin-header-user{
  font-family: 'Lato', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
}

/* ---- Dashboard ---- */
.admin-dashboard{
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 28px 60px;
}
.admin-stats-summary{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.admin-stat-card{
  background: var(--bg-card);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.10);
  display: flex; flex-direction: column;
  gap: 6px;
}
.admin-stat-card-label{
  font-family: 'Lato', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-stat-card-value{
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: 32px;
  color: var(--green-dark);
  line-height: 1;
}

.admin-stats-block{
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px 22px 28px;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.10);
}
.admin-stats-title{
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 18px;
  color: var(--green-dark);
  margin: 0 0 18px;
}
.admin-stats-sub{
  font-family: 'Lato', sans-serif;
  font-style: italic; font-weight: 400; font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0;
  margin-left: 6px;
}
.admin-stats-empty{
  color: var(--ink-faint);
  font-style: italic;
  margin: 0;
}
.admin-stats-list{
  display: flex; flex-direction: column;
  gap: 4px;
}

/* Gráfica de barras verticales */
.admin-chart{
  display: flex; align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding: 8px 4px 0;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.admin-chart-col{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  height: 100%;
  cursor: help;
}
.admin-chart-bar{
  width: 100%;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 2px;
  transition: filter .2s ease, transform .2s ease;
  display: flex; justify-content: center;
}
.admin-chart-col:hover .admin-chart-bar{
  filter: brightness(1.15);
  transform: scaleY(1.04);
  transform-origin: bottom;
}
.admin-chart-value{
  position: absolute;
  top: -16px;
  font-family: 'Lato', sans-serif;
  font-size: 9.5px; font-weight: 800;
  color: var(--green-dark);
  opacity: 0;
  transition: opacity .2s ease;
}
.admin-chart-col:hover .admin-chart-value{ opacity: 1; }
.admin-chart-day{
  font-family: 'Lato', sans-serif;
  font-size: 9px; font-weight: 700;
  color: var(--ink-faint);
  margin-top: 4px;
}

.admin-stats-subtitle{
  font-family: 'Lato', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* Fila de acción (label + barra + count) */
.admin-action-row{
  display: grid;
  grid-template-columns: 180px 1fr 110px;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
}
.admin-action-label{
  font-family: 'Lato', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
}

@media (max-width: 720px){
  .admin-chart{ height: 110px; gap: 2px; }
  .admin-chart-day{ font-size: 8px; }
  .admin-action-row{ grid-template-columns: 120px 1fr 70px; gap: 8px; }
  .admin-action-label{ font-size: 11.5px; }
}
.admin-stat-row-wrap{
  border-radius: 8px;
  transition: background .2s ease;
}
.admin-stat-row-wrap[open]{ background: rgba(32,117,38,.04); }
.admin-stat-row-wrap > summary{
  list-style: none;
  cursor: pointer;
}
.admin-stat-row-wrap > summary::-webkit-details-marker{ display: none; }
.admin-stat-row{
  display: grid;
  grid-template-columns: 14px 64px 1fr 110px;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
}
.admin-stat-row::before{
  content: '▸';
  color: var(--ink-faint);
  font-size: 10px;
  display: inline-block;
  transition: transform .2s ease, color .2s ease;
  text-align: center;
}
.admin-stat-row-wrap[open] .admin-stat-row::before{
  transform: rotate(90deg);
  color: var(--green);
}
.admin-stat-row-wrap > summary:hover .admin-stat-row{
  background: rgba(32,117,38,.06);
}
.admin-stat-cities{
  padding: 10px 14px 14px 30px;
  animation: adminCityFade .25s ease both;
}
@keyframes adminCityFade{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-stat-cities ul{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 14px;
}
.admin-stat-cities li{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
}
.admin-stat-city-info{
  display: flex; flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.admin-stat-city-name{
  color: var(--ink);
  font-weight: 700;
}
.admin-stat-city-ip{
  font-family: 'Lato', sans-serif;
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: .02em;
  margin-top: 1px;
  word-break: break-all;
}
.admin-stat-city-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px;
  padding: 0 8px;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .04em;
}
.admin-stat-day{
  font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.admin-stat-bar{
  height: 18px;
  background: rgba(0,0,0,.05);
  border-radius: 999px;
  overflow: hidden;
}
.admin-stat-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, #4a8a5c 100%);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.admin-stat-count{
  text-align: right;
  display: flex; flex-direction: column;
  line-height: 1.1;
}
.admin-stat-count strong{
  font-family: 'Lato', sans-serif;
  font-size: 14px; font-weight: 800;
  color: var(--ink);
}
.admin-stat-count-sub{
  font-family: 'Lato', sans-serif;
  font-size: 10px; font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

@media (max-width: 720px){
  .admin-header{ padding: 14px 16px; }
  .admin-header-title{ font-size: 10px; letter-spacing: .14em; }
  .admin-header-user{ font-size: 12px; }
  .admin-dashboard{ padding: 22px 16px 50px; }
  .admin-stats-summary{ grid-template-columns: 1fr; }
  .admin-stat-card-value{ font-size: 28px; }
  .admin-stat-row{ grid-template-columns: 12px 54px 1fr 88px; gap: 8px; }
  .admin-stats-block{ padding: 18px 16px 22px; }
}

/* =============================================================
   BOTÓN CALENDARIO CHINO (junto al test 5 Elementos)
   ============================================================= */
.view-bar .btn-animal{
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #1b73f7 0%, #2A5A85 100%) border-box;
  color: var(--ink);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.view-bar .btn-animal:hover{
  transform: translateY(-1px);
  color: #2A5A85;
  box-shadow: 0 8px 20px -6px rgba(27,115,247,.45);
}
.view-bar .btn-animal:focus-visible{
  outline: 3px solid rgba(27,115,247,.25);
  outline-offset: 2px;
}
.btn-animal-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 16px;
  color: #1b73f7;
  line-height: 1;
}
.btn-animal-label{ line-height: 1; }

/* =============================================================
   MODAL CALCULADORA ANIMAL/ELEMENTO (Calendario Chino)
   Estilos completamente scoped bajo .animal-modal para no chocar
   con el resto del sitio.
   ============================================================= */
.animal-modal-dialog{
  max-width: 800px !important;
  width: calc(100% - 1rem) !important;
  min-height: 85vh !important;
  display: flex;
  align-items: stretch;
}
.animal-modal{
  display: flex;
  flex-direction: column;
  width: 100%;
  --animal-madera: #4a7a52;
  --animal-fuego:  #bf3b30;
  --animal-tierra: #c49520;
  --animal-metal:  #708090;
  --animal-agua:   #2e6b8a;
  --animal-bg:     #faf7f2;
  --animal-bg2:    #f0ebe2;
  --animal-bg3:    #e6dfd3;
  --animal-text:   #1e1a12;
  --animal-text-mid:   #504838;
  --animal-text-light: #8a7e6e;
  --animal-card:   #ffffff;
  --animal-border: rgba(30,26,18,0.06);
  --animal-shadow: 0 4px 20px rgba(30,26,18,0.06);
  --animal-radius: 20px;
  --animal-radius-sm: 14px;
  background: var(--animal-bg) !important;
  border-radius: 16px !important;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--animal-text);
}
.animal-modal .btn-close{
  position: absolute; top: 10px; right: 14px;
  z-index: 10;
  width: 32px; height: 32px;
  font-size: 18px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  border: 1px solid var(--animal-border);
}
.animal-modal .animal-page{
  position: relative;
  padding: 2.4rem 1.6rem 1.6rem;
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.animal-modal .animal-page::before{
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}
.animal-modal .animal-orb{
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
}
.animal-modal .animal-orb-1{
  width: 280px; height: 280px;
  background: var(--animal-fuego);
  top: -10%; right: -8%; opacity: 0.06;
}
.animal-modal .animal-orb-2{
  width: 220px; height: 220px;
  background: var(--animal-agua);
  bottom: -8%; left: -5%; opacity: 0.06;
}
.animal-modal .animal-content{
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
}

.animal-modal .animal-header{
  text-align: center;
  margin-bottom: 1.8rem;
}
.animal-modal .animal-icon{
  font-size: 2.6rem;
  display: block;
  margin-bottom: .7rem;
}
.animal-modal .animal-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .4rem;
  color: var(--animal-text);
}
.animal-modal .animal-subtitle{
  font-size: .88rem;
  color: var(--animal-text-mid);
  font-weight: 300;
  margin: 0;
  line-height: 1.55;
}

.animal-modal .animal-input-card{
  background: var(--animal-card);
  border-radius: var(--animal-radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--animal-shadow);
  border: 1px solid var(--animal-border);
  width: 100%;
}
.animal-modal .animal-input-label{
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--animal-text-light);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .6rem;
}
.animal-modal .animal-date-input{
  width: 100%;
  padding: .85rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--animal-text);
  background: var(--animal-bg);
  border: 1.5px solid var(--animal-bg3);
  border-radius: var(--animal-radius-sm);
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.animal-modal .animal-date-input:focus{ border-color: var(--animal-text-mid); }
.animal-modal .animal-btn-calc{
  display: block; width: 100%;
  margin-top: 1.1rem;
  padding: .85rem;
  background: var(--animal-text);
  color: var(--animal-bg);
  border: none;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .3s, transform .15s;
}
.animal-modal .animal-btn-calc:hover{ box-shadow: 0 6px 20px rgba(30,26,18,0.15); }
.animal-modal .animal-btn-calc:active{ transform: scale(.98); }

.animal-modal .animal-result-section{
  display: none;
  width: 100%;
  margin-top: 1.2rem;
}
.animal-modal .animal-result-card{
  background: var(--animal-card);
  border-radius: var(--animal-radius);
  overflow: hidden;
  box-shadow: var(--animal-shadow);
  border: 1px solid var(--animal-border);
}
.animal-modal .result-banner{
  padding: 2.2rem 1.6rem 1.6rem;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.animal-modal .result-banner::before{
  content: '';
  position: absolute;
  top: -60%; right: -25%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.animal-modal .result-animal-icon{
  font-size: 3.2rem;
  display: block;
  margin-bottom: .4rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}
.animal-modal .result-animal-name{
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.01em;
  position: relative;
}
.animal-modal .result-element-tag{
  display: inline-block;
  margin-top: .4rem;
  padding: .25rem 1rem;
  background: rgba(255,255,255,.15);
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  position: relative;
}
.animal-modal .result-body{ padding: 1.8rem 1.6rem; }
.animal-modal .result-meta{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--animal-bg2);
}
.animal-modal .meta-item{
  text-align: center;
  padding: .65rem .3rem;
  background: var(--animal-bg);
  border-radius: 10px;
}
.animal-modal .meta-label{
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--animal-text-light);
  margin-bottom: .2rem;
  font-weight: 500;
}
.animal-modal .meta-value{
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--animal-text);
}
.animal-modal .result-desc{
  font-size: .92rem;
  line-height: 1.7;
  color: var(--animal-text-mid);
  font-weight: 300;
}
.animal-modal .result-desc p{ margin-bottom: .7rem; }
.animal-modal .result-desc p:last-child{ margin-bottom: 0; }
.animal-modal .result-section-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.3rem 0 .5rem;
  color: var(--animal-text);
}
.animal-modal .result-tip{
  background: var(--animal-bg);
  border-radius: var(--animal-radius-sm);
  padding: 1.1rem 1.2rem;
  margin-top: 1.2rem;
  border-left: 3px solid var(--animal-madera);
}
.animal-modal .result-tip strong{
  display: block;
  margin-bottom: .25rem;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--animal-text);
}
.animal-modal .result-tip p{
  font-size: .86rem;
  line-height: 1.6;
  color: var(--animal-text-mid);
  font-weight: 300;
}
.animal-modal .animal-btn-again{
  display: block; width: 100%;
  margin-top: 1rem;
  padding: .75rem;
  background: var(--animal-bg2);
  color: var(--animal-text-mid);
  border: 1px solid var(--animal-border);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.animal-modal .animal-btn-again:hover{
  background: var(--animal-bg3);
  color: var(--animal-text);
}

@media (max-width: 600px){
  .btn-animal{ padding: 6px 10px; font-size: 11px; }
  .btn-animal-cn{ font-size: 13px; }
  .animal-modal .animal-page{ padding: 2rem 1.1rem .8rem; }
  .animal-modal .animal-input-card{ padding: 1.5rem 1.2rem; }
  .animal-modal .result-banner{ padding: 1.8rem 1.2rem 1.4rem; }
  .animal-modal .result-animal-name{ font-size: 1.7rem; }
  .animal-modal .result-body{ padding: 1.4rem 1.2rem; }
}

/* =============================================================
   BOTÓN BAZI (junto a Calendario Chino)
   ============================================================= */
.view-bar .btn-bazi{
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #8B5CF6 0%, #4C1D95 100%) border-box;
  color: var(--ink);
  font-family: 'Lato', sans-serif;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(76,29,149,.35);
  transition: transform .2s ease, box-shadow .25s ease, color .2s ease;
}
.view-bar .btn-bazi:hover{
  transform: translateY(-1px);
  color: #4C1D95;
  box-shadow: 0 8px 20px -6px rgba(76,29,149,.45);
}
.view-bar .btn-bazi:focus-visible{
  outline: 3px solid rgba(76,29,149,.25);
  outline-offset: 2px;
}
.btn-bazi-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 14px;
  color: #6D28D9;
  line-height: 1;
  letter-spacing: 0;
}
.btn-bazi-label{ line-height: 1; }

/* =============================================================
   MODAL BAZI · CUATRO PILARES
   Estilos completamente scoped bajo .bazi-modal
   ============================================================= */
.bazi-modal-dialog{
  max-width: 820px !important;
  width: calc(100% - 1rem) !important;
  min-height: 85vh !important;
  display: flex;
  align-items: stretch;
}
.bazi-modal{
  display: flex;
  flex-direction: column;
  width: 100%;
  --bazi-madera: #4a7a52;
  --bazi-fuego:  #bf3b30;
  --bazi-tierra: #c49520;
  --bazi-metal:  #708090;
  --bazi-agua:   #2e6b8a;
  --bazi-bg:     #faf7f2;
  --bazi-bg2:    #f0ebe2;
  --bazi-bg3:    #e6dfd3;
  --bazi-text:   #1e1a12;
  --bazi-text-mid:   #504838;
  --bazi-text-light: #8a7e6e;
  --bazi-card:   #ffffff;
  --bazi-border: rgba(30,26,18,0.06);
  --bazi-shadow: 0 4px 20px rgba(30,26,18,0.06);
  --bazi-radius: 20px;
  --bazi-radius-sm: 14px;
  background: var(--bazi-bg) !important;
  border-radius: 16px !important;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--bazi-text);
}
.bazi-modal .btn-close{
  position: absolute; top: 10px; right: 14px;
  z-index: 10;
  width: 32px; height: 32px;
  font-size: 18px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  border: 1px solid var(--bazi-border);
}
.bazi-modal .bazi-page{
  position: relative;
  padding: 2.4rem 1.6rem 1.6rem;
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bazi-modal .bazi-orb{
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
}
.bazi-modal .bazi-orb-1{
  width: 280px; height: 280px;
  background: #8B5CF6;
  top: -10%; right: -8%; opacity: 0.07;
}
.bazi-modal .bazi-orb-2{
  width: 220px; height: 220px;
  background: #2e6b8a;
  bottom: -8%; left: -5%; opacity: 0.06;
}
.bazi-modal .bazi-content{
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  max-width: 660px;
  margin: 0 auto;
  width: 100%;
}

.bazi-modal .bazi-header{
  text-align: center;
  margin-bottom: 1.8rem;
}
.bazi-modal .bazi-icon{
  font-family: 'Noto Serif SC', serif;
  font-size: 2.4rem;
  display: block;
  margin-bottom: .6rem;
  color: #6D28D9;
  letter-spacing: .04em;
}
.bazi-modal .bazi-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .3rem;
  color: var(--bazi-text);
}
.bazi-modal .bazi-sub{
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
  font-style: italic;
  color: var(--bazi-text-light);
  margin: 0 0 .8rem;
}
.bazi-modal .bazi-desc{
  font-size: .86rem;
  color: var(--bazi-text-mid);
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
}

.bazi-modal .bazi-input-card{
  background: var(--bazi-card);
  border-radius: var(--bazi-radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--bazi-shadow);
  border: 1px solid var(--bazi-border);
  width: 100%;
}
.bazi-modal .bazi-input-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.bazi-modal .bazi-input-group{ display: flex; flex-direction: column; }
.bazi-modal .bazi-input-label{
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--bazi-text-light);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .5rem;
}
.bazi-modal .bazi-date-input,
.bazi-modal .bazi-hour-select{
  width: 100%;
  padding: .85rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 400;
  color: var(--bazi-text);
  background: var(--bazi-bg);
  border: 1.5px solid var(--bazi-bg3);
  border-radius: var(--bazi-radius-sm);
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.bazi-modal .bazi-date-input:focus,
.bazi-modal .bazi-hour-select:focus{ border-color: var(--bazi-text-mid); }
.bazi-modal .bazi-btn-calc{
  display: block; width: 100%;
  padding: .85rem;
  background: var(--bazi-text);
  color: var(--bazi-bg);
  border: none;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .3s, transform .15s;
}
.bazi-modal .bazi-btn-calc:hover{ box-shadow: 0 6px 20px rgba(30,26,18,0.15); }
.bazi-modal .bazi-btn-calc:active{ transform: scale(.98); }

.bazi-modal .bazi-result-section{
  display: none;
  width: 100%;
  margin-top: 1.2rem;
}
.bazi-modal .bazi-result-card{
  background: var(--bazi-card);
  border-radius: var(--bazi-radius);
  overflow: hidden;
  box-shadow: var(--bazi-shadow);
  border: 1px solid var(--bazi-border);
}
.bazi-modal .result-banner{
  padding: 2rem 1.6rem;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bazi-modal .result-banner::before{
  content: '';
  position: absolute;
  top: -60%; right: -25%;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.bazi-modal .result-dm-icon{
  font-size: 2.4rem;
  display: block;
  margin-bottom: .3rem;
}
.bazi-modal .result-dm-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 800;
  position: relative;
}
.bazi-modal .result-dm-subtitle{
  font-size: .88rem;
  opacity: .85;
  font-style: italic;
  margin-top: .2rem;
  position: relative;
}
.bazi-modal .result-body{ padding: 1.8rem 1.6rem; }
.bazi-modal .section-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bazi-text);
  margin: 1.6rem 0 .9rem;
}
.bazi-modal .section-title:first-child{ margin-top: 0; }

.bazi-modal .pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.bazi-modal .pillar{ text-align: center; }
.bazi-modal .pillar-label{
  font-size: .66rem;
  font-weight: 600;
  color: var(--bazi-text-light);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .35rem;
}
.bazi-modal .pillar-stem,
.bazi-modal .pillar-branch{
  color: #fff;
  border-radius: 10px;
  padding: .65rem .35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
}
.bazi-modal .pillar-stem{ margin-bottom: .3rem; }
.bazi-modal .pillar-char{
  font-family: 'Noto Serif SC', serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.bazi-modal .pillar-pinyin{
  font-size: .62rem;
  opacity: .9;
  font-weight: 400;
}
.bazi-modal .pillar-el{
  font-size: .54rem;
  opacity: .75;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bazi-modal .pillar-animal-emoji{
  font-size: 1.2rem;
  margin-bottom: .05rem;
}

.bazi-modal .dm-desc{
  font-size: .9rem;
  line-height: 1.7;
  color: var(--bazi-text-mid);
  font-weight: 300;
}
.bazi-modal .dm-desc p{ margin-bottom: .9rem; }
.bazi-modal .dm-traits{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.bazi-modal .dm-trait{
  background: var(--bazi-bg);
  border-radius: var(--bazi-radius-sm);
  padding: .95rem;
}
.bazi-modal .dm-trait-label{
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .3rem;
}
.bazi-modal .dm-strength .dm-trait-label{ color: var(--bazi-madera); }
.bazi-modal .dm-challenge .dm-trait-label{ color: var(--bazi-fuego); }
.bazi-modal .dm-trait p{
  font-size: .82rem;
  line-height: 1.55;
  color: var(--bazi-text-mid);
  font-weight: 300;
}

.bazi-modal .element-balance{
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1rem;
}
.bazi-modal .balance-row{
  display: flex;
  align-items: center;
  gap: .7rem;
}
.bazi-modal .balance-label{
  width: 80px;
  font-size: .76rem;
  font-weight: 500;
  text-align: right;
  flex-shrink: 0;
}
.bazi-modal .balance-track{
  flex: 1;
  height: 24px;
  background: var(--bazi-bg2);
  border-radius: 100px;
  overflow: hidden;
}
.bazi-modal .balance-fill{
  height: 100%;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  min-width: 28px;
  transition: width .8s ease;
}
.bazi-modal .balance-summary{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.bazi-modal .balance-item{
  background: var(--bazi-bg);
  border-radius: var(--bazi-radius-sm);
  padding: .8rem;
  text-align: center;
}
.bazi-modal .balance-item-label{
  display: block;
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bazi-text-light);
  margin-bottom: .25rem;
}
.bazi-modal .balance-item-value{
  font-size: .86rem;
  font-weight: 600;
  color: var(--bazi-text);
}
.bazi-modal .bazi-tip{
  background: var(--bazi-bg);
  border-radius: var(--bazi-radius-sm);
  padding: 1.2rem;
  margin-top: 1.4rem;
  border-left: 3px solid var(--bazi-madera);
}
.bazi-modal .bazi-tip strong{
  display: block;
  margin-bottom: .25rem;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bazi-text);
}
.bazi-modal .bazi-tip p{
  font-size: .86rem;
  line-height: 1.6;
  color: var(--bazi-text-mid);
  font-weight: 300;
}
.bazi-modal .bazi-btn-again{
  display: block; width: 100%;
  margin-top: 1rem;
  padding: .75rem;
  background: var(--bazi-bg2);
  color: var(--bazi-text-mid);
  border: 1px solid var(--bazi-border);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.bazi-modal .bazi-btn-again:hover{
  background: var(--bazi-bg3);
  color: var(--bazi-text);
}

@media (max-width: 600px){
  .view-bar .btn-bazi{ height: 32px; padding: 0 11px 0 10px; font-size: 10.5px; gap: 7px; }
  .btn-bazi-cn{ font-size: 12px; }
  .bazi-modal .bazi-page{ padding: 2rem 1.1rem .8rem; }
  .bazi-modal .bazi-input-card{ padding: 1.5rem 1.2rem; }
  .bazi-modal .bazi-input-row{ grid-template-columns: 1fr; }
  .bazi-modal .pillars-grid{ gap: .35rem; }
  .bazi-modal .pillar-char{ font-size: 1.25rem; }
  .bazi-modal .pillar-stem,
  .bazi-modal .pillar-branch{ padding: .5rem .25rem; }
  .bazi-modal .dm-traits{ grid-template-columns: 1fr; }
  .bazi-modal .result-body{ padding: 1.4rem 1.2rem; }
  .bazi-modal .result-dm-title{ font-size: 1.4rem; }
  .bazi-modal .balance-summary{ grid-template-columns: 1fr; }
}

/* =============================================================
   BADGE DINÁMICO DE ESTACIÓN MTC (en hero, junto al reloj de órganos)
   ============================================================= */
.season-badge{
  --season-color: var(--green);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 12px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--season-color), color-mix(in srgb, var(--season-color) 60%, #000)) border-box;
  color: var(--ink);
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  text-align: left;
  box-shadow: 0 3px 10px -4px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .25s ease;
}
.season-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.28);
}
.season-badge:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--season-color) 30%, transparent);
  outline-offset: 2px;
}
.season-badge-cn{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700; font-size: 18px;
  color: var(--season-color);
  line-height: 1;
}
.season-badge-text{
  display: flex; flex-direction: column;
  gap: 1px; line-height: 1.05;
}
.season-badge-name{
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
}
.season-badge-dates{
  font-size: 9.5px; font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .02em;
}
@media (max-width: 600px){
  .season-badge{ padding: 5px 10px 5px 9px; gap: 7px; }
  .season-badge-cn{ font-size: 16px; }
  .season-badge-name{ font-size: 10px; }
  .season-badge-dates{ font-size: 9px; }
}

/* =============================================================
   MODAL ESTACIÓN ACTUAL
   ============================================================= */
.season-modal-dialog{
  max-width: 760px !important;
  width: calc(100% - 1rem) !important;
}
.season-modal{
  --season-color: var(--green);
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--bg-card) !important;
}
.season-modal .btn-close{
  position: absolute; top: 50%; right: 12px;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px; height: 28px;
  background: #fff;
  background-image: none;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  opacity: 1;
  filter: none;
  font-size: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.season-modal .btn-close::before,
.season-modal .btn-close::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.8px;
  background: #1e1a12;
  border-radius: 2px;
}
.season-modal .btn-close::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.season-modal .btn-close::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}
.season-modal .btn-close:hover{
  background: #f6f3eb;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
}
.season-hero{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 56px 10px 22px;
  color: #fff;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--season-color) 90%, #000) 0%,
      color-mix(in srgb, var(--season-color) 60%, #000) 100%);
}
.season-hero-cn{
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem; font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.season-hero-text{
  display: flex; flex-direction: row;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.season-hero-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
}
.season-hero-meta{
  font-family: 'Lato', sans-serif;
  font-size: 11.5px; font-weight: 500;
  opacity: .92;
  line-height: 1.2;
}
.season-hero-meta::before{
  content: '·';
  margin-right: 8px;
  opacity: .6;
}
.season-hero-meta strong{ font-weight: 700; }

.season-body{
  padding: 22px 28px 28px;
  max-height: 65vh;
  overflow-y: auto;
}
.season-desc{
  font-family: 'Lato', sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.season-foods-title{
  display: flex; align-items: baseline; gap: 10px;
  font-family: 'Cardo', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 14px;
}
.season-foods-title .cn{
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  color: var(--green);
}
.season-foods{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.season-foods .season-food{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.season-foods .season-food:hover{
  background: var(--bg-tint);
  border-color: var(--green-pale);
  transform: translateY(-1px);
}
.season-foods .season-food-cat{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.season-foods .season-food-name{
  font-family: 'Cardo', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 4px;
  line-height: 1.2;
}
.season-foods .season-food-meta{
  display: flex; flex-wrap: wrap; gap: 4px;
}
.season-foods .season-food-meta .badge-mtc{
  font-size: 9px; padding: 2px 7px 2px 6px;
}
.season-foods .loading{ grid-column: 1 / -1; text-align: center; padding: 24px; }
.season-foods .selection-empty{ grid-column: 1 / -1; text-align: center; padding: 24px; color: var(--ink-faint); }

/* Footer del modal de estación */
.season-foot{
  --season-color: var(--green);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 22px;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
}
.season-foot-seal{
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--season-color);
  line-height: 1;
}
.season-foot-text{
  flex: 1;
  font-family: 'Cardo', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.35;
}
.season-foot-close{
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--season-color);
  background: transparent;
  color: var(--season-color);
  font-family: 'Lato', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.season-foot-close:hover{
  background: var(--season-color);
  color: #fff;
}

@media (max-width: 600px){
  .season-hero{ padding: 8px 48px 8px 14px; gap: 8px; }
  .season-hero-cn{ font-size: 1.2rem; }
  .season-hero-title{ font-size: 1rem; }
  .season-hero-meta{ font-size: 10.5px; }
  .season-foot{ padding: 8px 14px; gap: 10px; }
  .season-foot-seal{ font-size: 1.2rem; }
  .season-foot-text{ font-size: 11px; }
  .season-foot-close{ padding: 5px 11px; font-size: 10.5px; }
  .season-body{ padding: 18px 20px 22px; }
  .season-foods{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}