/* Paginas publicas de datos "hoy" y herramientas gratis (04-10-2026): miedo y codicia, dominancia, calculadoras. */
body { font-family: 'Inter', system-ui, sans-serif; }
.hh { max-width: 900px; margin: 0 auto; }
.hh-eti { font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0891b2; }
html.dark .hh-eti { color: #22d3ee; }
.hh h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 900; line-height: 1.15; margin: .3rem 0 .4rem; letter-spacing: -.02em; }
.hh-sub { color: #6b7280; font-size: .95rem; margin: 0 0 1.4rem; }
.hh-caja { background: #fff; border: 1px solid #e5e7eb; border-radius: 1.1rem; padding: 1.3rem; }
html.dark .hh-caja { background: #13151a; border-color: #1f222a; }
.hh-hoy { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 640px) { .hh-hoy { grid-template-columns: 1fr; text-align: center; } }
.hh-num { font-size: 4.2rem; font-weight: 900; line-height: 1; }
.hh-zona { font-size: 1.1rem; font-weight: 900; margin-top: .4rem; }
.hh-comp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
@media (max-width: 640px) { .hh-comp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hh-comp div { padding: .7rem .8rem; border-radius: .8rem; background: #f9fafb; border: 1px solid #e5e7eb; }
html.dark .hh-comp div { background: #0d0e12; border-color: #1f222a; }
.hh-comp small { display: block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.hh-comp b { display: block; font-size: 1.25rem; font-weight: 900; }
.hh-comp span { font-size: .75rem; font-weight: 700; }
.hh-sec { margin-top: 1.4rem; }
.hh h2 { font-size: 1.15rem; font-weight: 900; margin: 0 0 .7rem; }
.hh p.txt { color: #4b5563; line-height: 1.7; font-size: .95rem; } html.dark .hh p.txt { color: #9ca3af; }
.hh-grafico svg { width: 100%; height: auto; display: block; }
.hh-ejes { display: flex; justify-content: space-between; gap: .5rem; font-size: .7rem; color: #9ca3af; margin-top: .3rem; }
.hh-rep { display: grid; grid-template-columns: 9rem 4rem 1fr; align-items: center; gap: .6rem; font-size: .88rem; padding: .3rem 0; }
.hh-rep b { text-align: right; } .hh-rep i { height: 8px; border-radius: 9999px; background: rgba(100,116,139,.15); overflow: hidden; }
.hh-rep em { display: block; height: 100%; background: #06b6d4; border-radius: 9999px; }
.hh-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-color: rgba(6,182,212,.45) !important; background: rgba(6,182,212,.06) !important; }
.hh-btn { display: inline-block; padding: .8rem 1.3rem; border-radius: .8rem; font-weight: 900; color: #0f172a; text-decoration: none; background: linear-gradient(90deg, #06b6d4, #10b981); white-space: nowrap; }
.hh-faq details { padding: .8rem 0; border-bottom: 1px solid #e5e7eb; } html.dark .hh-faq details { border-color: #1f222a; }
.hh-faq summary { cursor: pointer; font-weight: 800; font-size: .95rem; }
.hh-faq p { margin: .5rem 0 0; color: #6b7280; line-height: 1.65; font-size: .9rem; }
.hh-gratis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 760px) { .hh-gratis { grid-template-columns: 1fr; } }
.hh-gratis a { display: block; padding: .8rem .95rem; border-radius: .9rem; border: 1px solid #e5e7eb; background: #fff; color: inherit; text-decoration: none; }
html.dark .hh-gratis a { background: #13151a; border-color: #1f222a; }
.hh-gratis a:hover { border-color: #06b6d4; }
.hh-gratis b { display: block; font-size: .88rem; } .hh-gratis span { font-size: .76rem; color: #6b7280; }
/* formularios de las calculadoras */
.hh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
@media (max-width: 560px) { .hh-form { grid-template-columns: 1fr; } }
.hh-campo label { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: .35rem; }
.hh-campo input, .hh-campo select { width: 100%; padding: .6rem .75rem; border-radius: .6rem; border: 1px solid #e5e7eb; background: #f9fafb; color: #111827; font-size: .95rem; }
html.dark .hh-campo input, html.dark .hh-campo select { background: #0d0e12; border-color: #1f222a; color: #fff; }
.hh-campo input:focus, .hh-campo select:focus { outline: none; border-color: #06b6d4; }
.hh-seg { display: flex; gap: .35rem; } .hh-seg button { flex: 1; padding: .55rem; border-radius: .6rem; border: 1px solid #e5e7eb; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
html.dark .hh-seg button { border-color: #1f222a; }
.hh-seg button.on.largo { border-color: #10b981; color: #10b981; background: rgba(16,185,129,.08); }
.hh-seg button.on.corto { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }
.hh-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.hh-tabla th { text-align: left; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; padding: .45rem .4rem; border-bottom: 1px solid #e5e7eb; }
.hh-tabla td { padding: .45rem .4rem; border-bottom: 1px solid #f3f4f6; }
html.dark .hh-tabla th { border-color: #1f222a; } html.dark .hh-tabla td { border-color: #1a1d24; }
.hh-tabla tr.sel td { background: rgba(6,182,212,.08); font-weight: 800; }