/* ==========================================================================
Contadores EC — Color vivo (oct-2026)
Misma identidad (negro + dorado + naranja) usada con más fuerza: hero oscuro
con brillo dorado, degradados del logo, fondos crema cálidos y acentos de color.
Se carga después de marca.css: para volver atrás basta quitar este .
========================================================================== */
:root {
--oro-claro: #FFC94D;
--oro: #F2A900;
--naranja: #FF8A00;
--grad-oro: linear-gradient(135deg, #FFC94D 0%, #F2A900 45%, #FF8A00 100%);
--carbon: #141414;
--carbon-2: #1f1b16;
--grad-oscuro: radial-gradient(1200px 500px at 85% -10%, rgba(242,169,0,0.22), transparent 60%),
radial-gradient(800px 400px at -10% 110%, rgba(255,138,0,0.14), transparent 60%),
linear-gradient(135deg, #121212 0%, #1f1b16 100%);
--crema: #FFF8EC;
--crema-borde: #F3E3C3;
--surface-alt: var(--crema);
--line: #EFE6D6;
--shadow-card: 0 10px 30px rgba(120, 80, 10, 0.08);
--shadow-card-hover: 0 18px 44px rgba(120, 80, 10, 0.16);
}
/* ---------- Botones ---------- */
.btn-gold { background: var(--grad-oro); color: #1a1405; box-shadow: 0 8px 20px rgba(242,169,0,0.30); }
.btn-gold:hover { background: var(--grad-oro); filter: brightness(1.05); box-shadow: 0 12px 28px rgba(255,138,0,0.38); }
.btn-dark { background: var(--carbon); }
/* ---------- Encabezado: línea dorada inferior ---------- */
.site-header { border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(20,20,20,0.04); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-oro); }
.main-nav .btn-gold, .main-nav a.btn-gold { color: #1a1405; }
/* ---------- Hero oscuro con brillo dorado ---------- */
.hero {
background: #141414 url('../img/fondo.jpg') center / cover;
color: #fff;
position: relative;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-oscuro); opacity: .92; pointer-events: none; }
.hero > .container { position: relative; }
.hero h1 { color: #fff; }
.hero h1 .accent { background: var(--grad-oro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: rgba(255,255,255,0.82); }
.hero-kicker { background: rgba(242,169,0,0.14); color: var(--oro-claro); border-color: rgba(242,169,0,0.45); }
.hero-checks { color: rgba(255,255,255,0.82); }
.hero-checks svg { color: var(--oro); }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero .btn-outline:hover { border-color: var(--oro); color: var(--oro-claro); }
.quick-calc { border: 0; box-shadow: 0 30px 70px rgba(0,0,0,0.45); position: relative; }
.quick-calc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--grad-oro); }
.qc-result { background: var(--grad-oscuro); }
.qc-result .val { color: var(--oro-claro); }
/* Encabezado de páginas internas: mismo estilo oscuro */
.page-hero { background: var(--grad-oscuro); color: #fff; border-bottom: 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.8); }
.breadcrumb { color: rgba(255,255,255,0.6); }
/* ---------- Franja de confianza y logos ---------- */
.trust-strip { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); }
.trust-item .icon-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-oro); color: #1a1405; box-shadow: 0 6px 14px rgba(242,169,0,0.28); }
.trust-item .icon-badge svg { width: 24px; height: 24px; }
.trust-item strong { color: var(--ink); }
.trust-item span { color: var(--ink-muted); }
.entes { background: var(--crema); border-color: var(--crema-borde); }
/* ---------- Secciones ---------- */
.section--alt { background: var(--crema); }
.section--navy, .firmas, .cta-banner, .site-footer { background: var(--grad-oscuro); }
.section--navy .eyebrow, .firmas .eyebrow { color: var(--oro-claro); }
.eyebrow { color: #8A5A00; }
.accent-bar { background: var(--grad-oro); height: 4px; border-radius: 4px; }
h2 .accent, .firmas h2 .accent { background: var(--grad-oro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.firmas-kicker { color: var(--oro-claro); border-color: rgba(242,169,0,0.45); }
.firmas-beneficios svg { color: var(--oro); }
.firmas-teaser .precios-mini span b { background: none; color: #8A5A00; }
.firmas-tabla li.top { background: linear-gradient(90deg, rgba(255,201,77,0.25), rgba(255,138,0,0.10)); }
.firmas-tabla .tag { background: var(--grad-oro); color: #1a1405; }
/* ---------- Tarjetas y servicios ---------- */
.svc { border-color: var(--line); transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden; }
.svc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-oro); opacity: 0; transition: opacity .2s; }
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--crema-borde); }
.svc:hover::before { opacity: 1; }
.svc .ico { background: var(--grad-oro); color: #1a1405; box-shadow: 0 6px 14px rgba(242,169,0,0.28); }
.card { border-color: var(--line); }
.card .icon-tile { background: var(--crema); }
.card .icon-tile svg { color: #B87800; }
.audience { border-top: 4px solid transparent; border-image: var(--grad-oro) 1; }
.step .step-num { background: var(--grad-oro); color: #1a1405; box-shadow: 0 8px 18px rgba(242,169,0,0.3); }
.pro-card { border-left: 5px solid var(--oro); }
.pro-card .role { color: #8A5A00; }
.help-box .icon-tile { background: var(--grad-oro); }
.faq-item { border-color: var(--line); }
.faq-item[open] { border-color: var(--crema-borde); box-shadow: 0 8px 22px rgba(120,80,10,0.08); }
.faq-item[open] .faq-question .chev { color: #B87800; }
.res-tag, .tool-card .tag { background: #FFF1CC; color: #8A5A00; }
.res-card { transition: box-shadow .2s, transform .2s; }
.res-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
/* Novedades en portada: resumen corto (el detalle está en /resoluciones) */
.res-home .res-card > p:not(.res-norma) { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.res-home .res-card .res-norma { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- Formularios y calculadora ---------- */
.field input:focus, .field select:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(242,169,0,0.25); }
.quick-calc .qc-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--oro), 0 2px 8px rgba(20,20,20,0.08); }
.result-box { background: var(--grad-oscuro); }
/* ---------- Pie de página ---------- */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-oro); }
.site-footer h4 { color: var(--oro-claro); }
.social-row a:hover { background: var(--grad-oro); color: #1a1405; }
/* ---------- Accesibilidad y celular (auditoría oct-2026) ---------- */
/* Menú móvil cerrado: fuera del orden de tabulación */
@media (max-width: 1080px) {
.main-nav { visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.main-nav.is-open { visibility: visible; transition: transform .25s ease; }
}
/* Botones del hero: pueden partirse en 2 líneas a 360 px */
@media (max-width: 720px) {
.hero-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.hero-actions .btn { white-space: normal; line-height: 1.25; }
.footer-bottom { padding-bottom: 84px; }
}
/* El botón flotante no tapa campos con foco */
html { scroll-padding-bottom: 90px; }
/* Botón verde con texto legible (blanco sobre #25D366 no alcanza 4.5:1) */
.btn-wa { background: #0F7A3F; color: #fff; }
.btn-wa:hover { background: #0B6633; }
/* Carrusel: también se detiene con teclado; pulso de WhatsApp limitado */
.entes-carrusel:focus-within .entes-track { animation-play-state: paused; }
.wa-float::before { animation-iteration-count: 6; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* ---------- SEO / accesibilidad (31-oct-2026) ---------- */
/* Títulos del pie: