/* ── Horoscopo chino completo (/horoscopo-chino) ───────────────────────── */
.cnh2 {
  --cn-rojo: #b94f4b;
  --cn-rojo-vivo: #d56e5e;
  --cn-oro: #d9b76a;
  --cn-crema: #f2e8d6;
  width: 100%; max-width: 64rem; margin: 0 auto;
  color: #eee7eb;
}
.cnh2 h2, .cnh2 h3 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; }
.cnh2-kicker, .cnh2-etiqueta {
  color: var(--cn-oro); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; line-height: 1.4; text-transform: uppercase;
}
.cnh2-inicio {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .8fr);
  min-height: 31rem; overflow: hidden; border: 1px solid rgba(217,183,106,.34); border-radius: 24px;
  background:
    radial-gradient(circle at 16% 12%, rgba(185,79,75,.22), transparent 32%),
    radial-gradient(circle at 82% 88%, rgba(217,183,106,.1), transparent 31%),
    linear-gradient(135deg, #27101a 0%, #150c17 52%, #0e0a13 100%);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.cnh2-inicio:before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(217,183,106,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(217,183,106,.2) 1px, transparent 1px);
  background-size: 45px 45px; mask-image: linear-gradient(90deg,#000,transparent 72%);
}
.cnh2-intro { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem,5vw,4.1rem); }
.cnh2-intro h2 { max-width: 35rem; margin-top: .65rem; color: #fff; font-size: clamp(2rem,4.5vw,3.35rem); line-height: .98; }
.cnh2-intro>p { max-width: 37rem; margin: 1.25rem 0 0; color: #cfc2c9; font-size: .98rem; line-height: 1.72; text-wrap: pretty; }
.cnh2-ciclo { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-top: 2rem; }
.cnh2-ciclo>span {
  min-width: 0; padding: .6rem .2rem .5rem; border: 1px solid rgba(217,183,106,.16); border-radius: 9px;
  background: rgba(8,5,10,.3); text-align: center; transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cnh2-ciclo b { display: block; color: #dcb8a6; font: 400 1.3rem/1.05 "Noto Serif SC","Songti SC",SimSun,serif; }
.cnh2-ciclo small { display: block; overflow: hidden; margin-top: .28rem; color: #968990; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.cnh2-ciclo .es-activo { border-color: var(--cn-oro); background: rgba(185,79,75,.22); transform: translateY(-2px); }
.cnh2-ciclo .es-activo b, .cnh2-ciclo .es-activo small { color: var(--cn-crema); }
.cnh2-form {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  margin: 1rem; padding: clamp(1.5rem,3vw,2.4rem); border: 1px solid rgba(217,183,106,.31); border-radius: 18px;
  background: linear-gradient(160deg,rgba(52,24,29,.93),rgba(19,12,18,.96)); text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.27);
}
.cnh2-sello {
  display: grid; place-items: center; width: 5.2rem; height: 5.2rem; margin: 0 auto 1rem;
  border: 1px solid rgba(217,183,106,.5); border-radius: 50%; color: var(--cn-oro);
  background: radial-gradient(circle,rgba(185,79,75,.18),transparent 68%);
  font: 400 2.55rem/1 "Noto Serif SC","Songti SC",SimSun,serif;
  box-shadow: inset 0 0 0 7px rgba(217,183,106,.04), 0 0 28px rgba(185,79,75,.12);
}
.cnh2-form-kicker { margin: 0 0 1.1rem; color: #d5b28d; font-size: .67rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.cnh2-form label { margin-bottom: .42rem; color: #f1e8ea; font-size: .87rem; font-weight: 650; text-align: left; }
.cnh2-fecha-caja { position: relative; }
.cnh2-fecha {
  width: 100%; min-height: 3rem; padding: .7rem 3.2rem .7rem .9rem; border: 1px solid rgba(217,183,106,.42); border-radius: 10px;
  outline: none; background: #110c12; color: #fff; color-scheme: dark; font: 600 .96rem var(--ui); text-align: left;
}
.cnh2-fecha::-webkit-calendar-picker-indicator { opacity: 0; }
.cnh2-fecha:focus { border-color: var(--cn-oro); box-shadow: 0 0 0 3px rgba(217,183,106,.12); }
.cnh2-calendario {
  position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 3.05rem; height: 100%; padding: 0;
  border: 0; border-left: 1px solid rgba(217,183,106,.24); border-radius: 0 10px 10px 0; background: transparent; color: var(--cn-oro); cursor: pointer;
}
.cnh2-calendario:hover { background: rgba(217,183,106,.08); }
.cnh2-calendario svg { width: 1.23rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.cnh2-error { margin: .48rem 0 0; color: #f0a69b; font-size: .78rem; text-align: left; }
.cnh2-calcular {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-top: 1rem; padding: .77rem 1rem;
  border: 1px solid #e3c47f; border-radius: 10px; background: linear-gradient(135deg,#e0bd6d,#bd8649); color: #271319;
  font: 750 .88rem var(--ui); cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.22); transition: filter .15s ease, transform .15s ease;
}
.cnh2-calcular i { font: 400 1.25rem/1 var(--ui); }
.cnh2-calcular:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cnh2-calcular:focus-visible, .cnh2-calendario:focus-visible, .cnh2-compartir:focus-visible, .cnh2-repetir:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cnh2-privacidad { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: .75rem 0 0; color: #897c83; font-size: .65rem; }
.cnh2-privacidad svg { width: .8rem; fill: none; stroke: currentColor; stroke-width: 1.7; }

.cnh2-resultado { scroll-margin-top: 1.2rem; margin-top: 2rem; animation: cnh2-entra .55s ease both; }
@keyframes cnh2-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cnh2-resultado-cab {
  position: relative; display: flex; align-items: center; gap: clamp(1.2rem,4vw,2.3rem); overflow: hidden; padding: clamp(1.5rem,4vw,2.6rem);
  border: 1px solid rgba(217,183,106,.38); border-radius: 22px 22px 0 0;
  background: radial-gradient(circle at 14% 50%,rgba(185,79,75,.26),transparent 28%), linear-gradient(120deg,#271019,#130d14 70%);
}
.cnh2-resultado-cab:after { content:"福"; position:absolute; right:3%; top:50%; translate:0 -50%; color:rgba(217,183,106,.055); font:400 10rem/1 "Noto Serif SC","Songti SC",serif; }
.cnh2-medallon {
  position: relative; flex: 0 0 7.4rem; display: grid; place-items: center; width: 7.4rem; height: 7.4rem;
  border: 1px solid rgba(217,183,106,.6); border-radius: 50%; background: radial-gradient(circle,rgba(185,79,75,.28),#160c12 70%);
  box-shadow: inset 0 0 0 8px rgba(217,183,106,.04), 0 0 34px rgba(185,79,75,.14);
}
.cnh2-animal-simbolo { color: var(--cn-crema); font: 400 3.6rem/1 "Noto Serif SC","Songti SC",SimSun,serif; }
.cnh2-elemento-simbolo { position: absolute; right: -.1rem; bottom: .15rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--cn-oro); border-radius: 50%; background: #6f292b; color: #f3d893; font: 400 1rem/1 serif; }
.cnh2-resultado-cab>div:last-child { position: relative; z-index: 1; min-width: 0; }
.cnh2-resultado-cab h2 { margin-top: .35rem; color: #fff; font-size: clamp(2.25rem,6vw,4rem); line-height: .98; }
.cnh2-ano { margin: .7rem 0 0; color: #b9a8af; font-size: .87rem; }
.cnh2-datos { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; border: 1px solid rgba(217,183,106,.27); border-top: 0; background: #120d13; }
.cnh2-datos>div { min-width: 0; padding: 1rem 1.2rem; border-right: 1px solid rgba(217,183,106,.16); }
.cnh2-datos>div:last-child { border-right: 0; }
.cnh2-datos dt { color: #887a82; font-size: .61rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.cnh2-datos dd { overflow: hidden; margin: .2rem 0 0; color: #f1e6e2; font: 600 1rem/1.25 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.cnh2-cusp { margin: 0; padding: 1rem 1.2rem; border: 1px solid rgba(217,183,106,.3); border-top: 0; background: rgba(185,79,75,.1); color: #e2c9bd; font-size: .82rem; line-height: 1.6; text-align: center; }
.cnh2-lectura { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.cnh2-tarjeta { position: relative; min-width: 0; padding: clamp(1.35rem,3vw,2rem); overflow: hidden; border: 1px solid rgba(217,183,106,.2); border-radius: 14px; background: linear-gradient(145deg,#191219,#100c11); }
.cnh2-tarjeta:before { content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:linear-gradient(var(--cn-rojo),transparent 85%); opacity:.75; }
.cnh2-num { position: absolute; right: 1.2rem; top: .8rem; color: rgba(217,183,106,.12); font: 600 2.8rem/1 var(--display); }
.cnh2-tarjeta h3 { position: relative; max-width: 26rem; margin-top: .65rem; color: #f7f0ef; font-size: clamp(1.25rem,2.5vw,1.62rem); line-height: 1.12; }
.cnh2-tarjeta>p { position: relative; margin: .8rem 0 0; color: #b8abb2; font-size: .88rem; line-height: 1.68; text-wrap: pretty; }
.cnh2-esencia, .cnh2-vinculos, .cnh2-fortuna { grid-column: 1/-1; }
.cnh2-esencia { min-height: 15rem; padding-right: clamp(2rem,9vw,8rem); background: radial-gradient(circle at 95% 50%,rgba(185,79,75,.18),transparent 28%),linear-gradient(130deg,#21141b,#100c11); }
.cnh2-esencia .cnh2-esencia-texto { max-width: 45rem; color: #d2c6ca; font-size: .96rem; }
.cnh2-consejo { max-width: 43rem; margin: 1.15rem 0 0; padding: .75rem 0 .75rem 1rem; border-left: 2px solid var(--cn-oro); color: #e5c994; font: italic 500 1rem/1.55 var(--display); }
.cnh2-don-reto { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.1rem 0 0; }
.cnh2-don-reto div { padding: .8rem; border: 1px solid rgba(217,183,106,.15); border-radius: 9px; background: rgba(255,255,255,.02); }
.cnh2-don-reto dt, .cnh2-vinculos-grid small, .cnh2-fortuna-grid small { color: var(--cn-oro); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cnh2-don-reto dd { margin: .3rem 0 0; color: #a99da3; font-size: .75rem; line-height: 1.5; }
.cnh2-yinyang { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; color: #796d74; }
.cnh2-yinyang span { color: var(--cn-oro); font-size: 2rem; line-height: 1; }
.cnh2-yinyang i { font-size: .65rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.cnh2-vinculos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 1.15rem; }
.cnh2-vinculos-grid>div { padding: 1rem; border: 1px solid rgba(217,183,106,.17); border-radius: 10px; background: rgba(255,255,255,.018); }
.cnh2-vinculos-grid b { display: block; margin-top: .35rem; color: #f0e2dc; font: 600 1.25rem/1.2 var(--display); }
.cnh2-vinculos-grid p { margin: .55rem 0 0; color: #92868c; font-size: .75rem; line-height: 1.5; }
.cnh2-compat { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; color: #dfbd75; font-size: .78rem; text-decoration: none; }
.cnh2-compat:hover { color: #ffe09a; }
.cnh2-fortuna-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; margin-top: 1.1rem; }
.cnh2-fortuna-grid>div { padding: 1rem; border: 1px solid rgba(217,183,106,.16); border-radius: 10px; }
.cnh2-colores, .cnh2-numeros { display: flex; flex-wrap: wrap; gap: .55rem; margin: .65rem 0 0!important; }
.cnh2-colores span { display: inline-flex; align-items: center; gap: .38rem; color: #cfc4c8; font-size: .77rem; }
.cnh2-colores i { width: .9rem; height: .9rem; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.025); }
.cnh2-numeros span { display: grid; place-items: center; width: 2.05rem; height: 2.05rem; border: 1px solid rgba(217,183,106,.36); border-radius: 50%; color: #f1d490; font: 600 .82rem var(--ui); }
.cnh2-tarjeta .cnh2-tradicion { margin-top: .75rem; color: #776d73; font-size: .67rem; }
.cnh2-acciones { display: flex; justify-content: center; align-items: center; gap: .65rem; margin-top: 1.1rem; }
.cnh2-compartir, .cnh2-repetir { min-height: 2.85rem; padding: .65rem 1.2rem; border-radius: 999px; font: 700 .8rem var(--ui); cursor: pointer; }
.cnh2-compartir { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid #dec175; background: linear-gradient(135deg,#dfbd6d,#b78349); color: #29161b; }
.cnh2-compartir svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cnh2-repetir { border: 1px solid rgba(217,183,106,.3); background: transparent; color: #c9b8bd; }
.cnh2-compartir:hover, .cnh2-repetir:hover { filter: brightness(1.08); }
.cnh2-guia { margin-top: 2.5rem; padding: clamp(1.5rem,4vw,2.5rem); border-top: 1px solid rgba(217,183,106,.25); border-bottom: 1px solid rgba(217,183,106,.16); text-align: center; }
.cnh2-guia h2 { margin-top: .5rem; color: #f3ecef; font-size: clamp(1.7rem,4vw,2.4rem); }
.cnh2-guia>p { max-width: 49rem; margin: .9rem auto 0; color: #a89ca4; font-size: .88rem; line-height: 1.7; }
.cnh2-guia-puntos { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; max-width: 50rem; margin: 1.5rem auto 0; }
.cnh2-guia-puntos p { margin: 0; padding: 1rem; border: 1px solid rgba(217,183,106,.12); border-radius: 10px; }
.cnh2-guia-puntos b { display: block; color: #dbc07e; font: 600 1.1rem var(--display); }
.cnh2-guia-puntos span { display: block; margin-top: .3rem; color: #887d84; font-size: .72rem; line-height: 1.5; }
.cnh2-editorial { max-width: 58rem; margin: 2.3rem auto 0; }
.cnh2-editorial>header { max-width: 45rem; margin: 0 auto; text-align: center; }
.cnh2-editorial>header h2 { margin-top: .45rem; color: #f2eaed; font-size: clamp(1.65rem,3.5vw,2.25rem); }
.cnh2-editorial>header p { margin: .8rem 0 0; color: #a79ba2; font-size: .86rem; line-height: 1.72; text-wrap: pretty; }
.cnh2-capas { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 1.35rem; }
.cnh2-capas article { position: relative; min-width: 0; padding: 1.25rem; overflow: hidden; border: 1px solid rgba(217,183,106,.17); border-radius: 12px; background: linear-gradient(145deg,#171117,#0e0b10); }
.cnh2-capas article>span { position: absolute; right: .8rem; top: .45rem; color: rgba(217,183,106,.1); font: 600 2.2rem/1 var(--display); }
.cnh2-capas h3 { color: #e7cf9b; font-size: 1.16rem; }
.cnh2-capas p { position: relative; margin: .55rem 0 0; color: #92878d; font-size: .76rem; line-height: 1.6; }
.cnh2-animales-resumen { margin-top: 1.7rem; padding: clamp(1.25rem,3vw,1.8rem); border: 1px solid rgba(217,183,106,.17); border-radius: 14px; background: rgba(15,11,16,.55); }
.cnh2-animales-resumen>h3 { color: #eee5e8; font-size: 1.45rem; text-align: center; }
.cnh2-animales-resumen ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 1.4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.cnh2-animales-resumen li { display: grid; grid-template-columns: 4.3rem 1fr; align-items: baseline; gap: .4rem; padding: .6rem 0; border-bottom: 1px solid rgba(217,183,106,.1); }
.cnh2-animales-resumen b { color: #d8b96f; font: 600 .94rem var(--display); }
.cnh2-animales-resumen span { color: #8f848b; font-size: .69rem; line-height: 1.45; }
.cnh2-editorial-cierre { max-width: 45rem; margin: 1rem auto 0; color: #746b70; font-size: .69rem; line-height: 1.55; text-align: center; }
@media (max-width: 760px) {
  .cnh2-inicio { grid-template-columns: 1fr; }
  .cnh2-intro { padding: 2rem 1.25rem 1.2rem; text-align: center; }
  .cnh2-intro>p { margin-inline: auto; }
  .cnh2-form { margin: .6rem; }
  .cnh2-datos { grid-template-columns: repeat(2,1fr); }
  .cnh2-datos>div:nth-child(2) { border-right: 0; }
  .cnh2-datos>div:nth-child(-n+2) { border-bottom: 1px solid rgba(217,183,106,.16); }
  .cnh2-lectura { grid-template-columns: 1fr; }
  .cnh2-esencia, .cnh2-vinculos, .cnh2-fortuna { grid-column: auto; }
  .cnh2-esencia { padding-right: 1.35rem; }
  .cnh2-vinculos-grid, .cnh2-guia-puntos, .cnh2-capas { grid-template-columns: 1fr; }
  .cnh2-animales-resumen ul { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .cnh2-ciclo { grid-template-columns: repeat(4,1fr); }
  .cnh2-resultado-cab { align-items: flex-start; }
  .cnh2-medallon { flex-basis: 5.4rem; width: 5.4rem; height: 5.4rem; }
  .cnh2-animal-simbolo { font-size: 2.65rem; }
  .cnh2-resultado-cab:after { display: none; }
  .cnh2-fortuna-grid, .cnh2-don-reto { grid-template-columns: 1fr; }
  .cnh2-acciones { flex-direction: column; }
  .cnh2-compartir, .cnh2-repetir { width: 100%; justify-content: center; }
  .cnh2-animales-resumen ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cnh2-resultado { animation: none; }
  .cnh2-ciclo>span, .cnh2-calcular { transition: none; }
}