/* ========================================================================== NumeroSpam ยท estilos no criticos (se cargan sin bloquear el renderizado) Lo visible sin desplazar esta en critical.css, incrustado en el . ========================================================================== */ a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; } h3 { font-size: 1.02rem; } .finder-form button:hover { background: #4152ea; } .finder-form input::placeholder { color: #a8afbe; letter-spacing: .02em; } /* ---------- Medidor de riesgo ---------- */ .callcard-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .callcard-actions .btn { background: #262d3d; color: #fff; flex: 1 1 auto; text-align: center; } .callcard-actions .btn:hover { background: #333c50; } .callcard-actions .btn-primary { background: var(--brand); } .callcard-actions .btn-primary:hover { background: #4152ea; } .meter { display: flex; gap: 4px; margin-top: 16px; } .meter i { height: 7px; flex: 1; border-radius: 2px; background: #2c3345; } .meter i.on { background: var(--warn); } .callcard[data-risk="peligroso"] .meter i.on { background: var(--alert); } .callcard[data-risk="vigilado"] .meter i.on { background: var(--brand); } .meter-label { margin-top: 8px; font-size: .88rem; color: #aeb6c8; } .meter-label strong { color: #fff; } /* ---------- Estructura ---------- */ .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } @media (min-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; } .aside .card { position: sticky; top: 72px; } } /* ---------- Etiquetas ---------- */ .tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; background: var(--line-soft); color: var(--ink-soft); } .tag-peligroso { background: var(--alert-tint); color: #9a1f1f; } .tag-sospechoso, .tag-molesto { background: var(--warn-tint); color: #8a5809; } .tag-vigilado { background: var(--brand-tint); color: var(--brand-dark); } .tag-seguro { background: var(--safe-tint); color: #0a6d4c; } /* ---------- Listas de numeros ---------- */ .numlist { list-style: none; margin: 0; padding: 0; } .numlist li { border-top: 1px solid var(--line-soft); } .numlist li:first-child { border-top: 0; } .numlist a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 4px; color: var(--ink); min-height: 48px; } .numlist a:hover { background: var(--brand-tint); text-decoration: none; } .numlist .n { font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; } .numlist .meta { margin-left: auto; font-size: .8rem; color: var(--ink-faint); white-space: nowrap; } /* ---------- Reportes ---------- */ .report { border-top: 1px solid var(--line-soft); padding: 15px 0; } .report:first-of-type { border-top: 0; padding-top: 0; } .report-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .report-author { font-weight: 600; font-size: .92rem; } .report-date { font-size: .78rem; color: var(--ink-faint); } .report p { margin: 0; color: #262b36; overflow-wrap: anywhere; } /* ---------- Formularios ---------- */ .field { margin-bottom: 15px; } .field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; } .field .hint { font-size: .8rem; color: var(--ink-faint); margin: 4px 0 0; } input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; font-family: inherit; font-size: 16px; /* 16px evita el zoom en iOS */ padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); min-height: 48px; } textarea { min-height: 120px; resize: vertical; } .choices { display: flex; gap: 8px; flex-wrap: wrap; } .choices label { border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; cursor: pointer; font-size: .9rem; font-weight: 500; background: #fff; min-height: 44px; display: inline-flex; align-items: center; } .choices input { position: absolute; opacity: 0; width: 0; } .choices label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); } .btn { display: inline-block; font-family: inherit; font-weight: 700; font-size: .95rem; padding: 13px 22px; border: 0; border-radius: var(--r-sm); background: var(--brand); color: #fff; cursor: pointer; min-height: 48px; } .btn:hover { background: var(--brand-dark); text-decoration: none; } .btn-quiet { background: var(--line-soft); color: var(--ink); } .notice { border-left: 3px solid var(--brand); background: var(--brand-tint); padding: 12px 15px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .92rem; } .notice-alert { border-color: var(--alert); background: var(--alert-tint); } .notice-safe { border-color: var(--safe); background: var(--safe-tint); } /* ---------- Rejillas ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; } .grid a { display: block; padding: 12px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); min-height: 48px; } .grid a:hover { border-color: var(--brand); text-decoration: none; } .grid .k { font-weight: 700; display: block; } .grid .v { font-size: .8rem; color: var(--ink-faint); } /* ---------- Datos ---------- */ .facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: .93rem; } .facts dt { color: var(--ink-faint); } .facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } @media (max-width: 400px) { .facts { grid-template-columns: 1fr; gap: 2px 0; } .facts dd { margin-bottom: 8px; } } .crumbs { font-size: .82rem; color: var(--ink-faint); margin: 0 0 14px; } .crumbs a { color: var(--ink-soft); } .crumbs span { margin: 0 5px; } /* ---------- Publicidad ---------- La altura minima esta reservada de antemano: sin esto, el anuncio empuja el contenido al cargar y dispara el CLS, que es la metrica mas facil de suspender en un sitio con AdSense. */ .adslot { margin: 22px 0; text-align: center; min-height: 280px; display: flex; flex-direction: column; justify-content: center; contain: layout; } .adslot::before { content: 'Publicidad'; display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; } .adslot-inline { min-height: 100px; } @media (min-width: 900px) { .adslot { min-height: 250px; } } /* ---------- Pie ---------- */ .footer { background: var(--ink); color: #a2aabc; padding: 30px 0; font-size: .86rem; margin-top: 32px; } .footer a { color: #c4cadb; } .footer .legal a { text-decoration: underline; } .footer-cols { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 20px; } .footer .foot-h { color: #fff; font-size: .88rem; font-weight: 700; margin: 0 0 8px; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: 6px; } .footer li a { display: inline-block; padding: 3px 0; } .footer .legal { border-top: 1px solid #262d3d; padding-top: 16px; color: #8d95a8; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- Contenido editorial de las paginas hub ---------- */ .prosa { margin-top: 18px; } .prosa h2 { font-size: 1.12rem; margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .prosa h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .prosa p { margin: 0 0 12px; color: #2a2f3a; } .prosa strong { font-weight: 700; } .prosa > *:last-child { margin-bottom: 0; }