/**
 * TuColaboradorWeb — Unificación visual (carga DESPUÉS de estilos inline de cada página)
 * Iguala servicios, contacto, blog, etc. al diseño de index.php
 */

/* ── Tipografía index ── */
h1, h2, h3, h4,
.serv-nombre, .serv-precio, .stat-num, .banner-stat-num,
.hero-contacto-titulo, .form-titulo, .razon-contenido h3,
.comp-col h3, .blog-hero h1, .blog-card-title, .art-title,
.gracias-titulo, .paso-titulo-card, .faq-pregunta {
    font-family: 'Instrument Sans', system-ui, sans-serif !important;
    letter-spacing: -0.03em !important;
}

h1 .italic, h2 .italic, h1 .verde, h2 .serif-accent,
.blog-hero h1 em, .banner-quote em {
    font-family: 'Literata', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

h1 .verde, h2 .verde, h1 .accent { color: var(--naranja) !important; }

.s-desc, .intro-text, .comparativa-sub, .razones-sub, .serv-desc {
    color: var(--texto-suave) !important;
    line-height: 1.7 !important;
}

/* ── Tags / kickers ── */
.s-tag, .blog-hero-tag {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--musgo) !important;
    background: transparent !important;
    border: 1px solid var(--borde) !important;
    padding: 6px 12px !important;
    border-radius: 2px !important;
}

.blog-hero-tag {
    color: var(--musgo) !important;
    border-color: var(--borde) !important;
}

/* ── Botones index ── */
.btn-primary, .serv-cta, .form-submit, .btn-wa-primary,
.side-cta-btn, .cta-final .btn-primary {
    background: var(--naranja) !important;
    color: var(--blanco) !important;
    border: 2px solid var(--naranja) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-family: 'Instrument Sans', system-ui, sans-serif !important;
}

.btn-primary:hover, .serv-cta:hover, .form-submit:hover {
    background: var(--carbon) !important;
    border-color: var(--carbon) !important;
    transform: translateY(-2px);
}

.btn-ghost, .btn-secundario, .btn-wa {
    border-radius: 4px !important;
    border: 2px solid var(--carbon) !important;
    box-shadow: none !important;
}

/* ── Icon boxes (Font Awesome) ── */
.icon-box {
    width: 56px;
    height: 56px;
    border: 2px solid var(--carbon);
    background: var(--marfil);
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--naranja);
    border-radius: 2px;
    flex-shrink: 0;
}

.icon-box--sm {
    width: 36px;
    height: 36px;
    font-size: 15px;
    display: inline-grid;
    vertical-align: middle;
}

.icon-box--nav {
    width: 32px;
    height: 32px;
    font-size: 14px;
    display: inline-grid;
    margin-right: 8px;
}

.serv-emoji, .nav-emoji, .mc-emoji { display: none !important; }

.serv-card-body > .icon-box,
.razon-card-body .icon-box { margin-bottom: 16px; }

/* ── Heroes internos = estilo index ── */
.hero-servicios-wrap,
.hero-wrap {
    background: var(--marfil) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") !important;
}

.hero-servicios-wrap {
    background-image: none !important;
}

.hero-servicios-overlay,
.hero-wrap .hero-overlay {
    background: linear-gradient(118deg, var(--marfil) 0%, var(--marfil) 58%, transparent 58%) !important;
}

.blog-hero {
    background: var(--marfil) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") !important;
    border-bottom: 2px solid var(--borde) !important;
    text-align: left !important;
    padding: 72px 48px 60px !important;
}

.blog-hero::before,
.blog-hero::after { display: none !important; }

.blog-hero h1 {
    color: var(--texto) !important;
    text-align: left !important;
    max-width: 640px !important;
}

.blog-hero h1 em { color: var(--naranja) !important; }

.blog-hero p {
    color: var(--texto-suave) !important;
    text-align: left !important;
    margin-left: 0 !important;
}

.blog-hero-inner { text-align: left !important; }

.blog-stat-num {
    font-family: 'IBM Plex Mono', monospace !important;
    color: var(--carbon) !important;
}

.blog-stat-label { color: var(--texto-suave) !important; }

.hero-contacto {
    background: var(--carbon) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") !important;
}

.hero-contacto-overlay {
    background: transparent !important;
}

/* ── Tarjetas estilo index ── */
.serv-card, .razon-card, .stat-box, .form-card, .contacto-card,
.paso-card-full, .faq-item, .precio-card, .serv-card-inner {
    border: 2px solid var(--borde) !important;
    border-radius: 4px !important;
    background: var(--blanco-roto) !important;
    box-shadow: 4px 4px 0 rgba(0,70,132,0.06) !important;
}

.serv-card:hover, .razon-card:hover, .stat-box:hover {
    border-color: var(--carbon) !important;
    box-shadow: 8px 8px 0 rgba(0,70,132,0.1) !important;
}

.serv-card-img, .razon-card-img, .equipo-img, .caso-card-img {
    filter: grayscale(85%) contrast(1.05) !important;
}

.serv-card:hover .serv-card-img,
.razon-card:hover .razon-card-img {
    filter: grayscale(50%) contrast(1.05) !important;
}

.serv-num, .razon-numero, .paso-num {
    font-family: 'IBM Plex Mono', monospace !important;
    color: var(--mostaza) !important;
    background: transparent !important;
    border: 2px solid var(--mostaza) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.serv-tiempo-badge {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11px !important;
    color: var(--musgo) !important;
    background: transparent !important;
    border: 1px solid var(--borde) !important;
    border-radius: 2px !important;
    padding: 4px 10px !important;
}

.serv-precio, .stat-num { color: var(--naranja) !important; }

.serv-incluye li::before,
.paso-bullets li::before,
.comp-item.nosotros::before {
    color: var(--musgo) !important;
}

.tag, .chip, .serv-tags .tag {
    border-radius: 2px !important;
    border: 1px solid var(--borde) !important;
    background: var(--marfil) !important;
    color: var(--texto-suave) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 10px !important;
}

/* ── Nav sticky servicios ── */
.serv-nav {
    background: var(--blanco-roto) !important;
    border-bottom: 2px solid var(--borde) !important;
}

.serv-nav-btn {
    border-radius: 4px !important;
    color: var(--texto-suave) !important;
    font-family: 'Instrument Sans', system-ui, sans-serif !important;
}

.serv-nav-btn.active,
.serv-nav-btn:hover {
    background: var(--carbon) !important;
    color: var(--marfil) !important;
    border-color: var(--carbon) !important;
}

.serv-nav-btn.active .icon-box,
.serv-nav-btn:hover .icon-box {
    border-color: var(--mostaza) !important;
    color: var(--mostaza) !important;
}

/* ── Comparativa por qué nosotros ── */
.comp-col.ellos h3 { color: var(--texto-suave) !important; }
.comp-col.nosotros h3 { color: var(--naranja) !important; }
.comp-col.nosotros {
    border-color: var(--carbon) !important;
    background: var(--blanco-roto) !important;
}

.trust-chip {
    border-radius: 4px !important;
    border: 1px solid var(--borde) !important;
    background: var(--blanco-roto) !important;
}

.trust-chip .dot, .badge-dot {
    background: var(--musgo) !important;
}

/* ── Secciones oscuras = index proceso/CTA ── */
.proceso-banner-overlay,
.cta-final, .cta-section, .mid-banner, .blog-cta,
.proceso-timeline-section, .faq-section-dark {
    background: var(--carbon) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") !important;
}

.cta-final h2, .mid-banner h2, .blog-cta h2 { color: var(--marfil) !important; }

/* ── Blog ── */
.blog-card {
    border: 2px solid var(--borde) !important;
    border-radius: 4px !important;
    background: var(--blanco-roto) !important;
}

.blog-cat-badge {
    font-family: 'IBM Plex Mono', monospace !important;
    border-radius: 2px !important;
}

.blog-filters a.active,
.blog-filters a:hover {
    background: var(--carbon) !important;
    color: var(--marfil) !important;
    border-radius: 4px !important;
}

/* ── Formulario contacto ── */
.form-input, .form-select, .form-textarea, .capture-input {
    border: 2px solid var(--borde) !important;
    border-radius: 4px !important;
    font-family: 'Instrument Sans', system-ui, sans-serif !important;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--naranja) !important;
    outline: none !important;
}

.c-m-icon {
    width: 44px !important;
    height: 44px !important;
    border: 2px solid var(--carbon) !important;
    background: var(--marfil) !important;
    color: var(--naranja) !important;
    border-radius: 2px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

/* ── Gracias ── */
.gracias-card {
    border: 2px solid var(--carbon) !important;
    border-radius: 4px !important;
    box-shadow: 8px 8px 0 rgba(0,70,132,0.1) !important;
}

.mientras-card {
    border: 2px solid var(--borde) !important;
    border-radius: 4px !important;
    background: var(--blanco-roto) !important;
}

.mientras-card:hover {
    border-color: var(--carbon) !important;
}

.bg-blob { display: none !important; }

/* ── Artículo blog ── */
.art-content blockquote {
    border-left: 3px solid var(--naranja) !important;
    background: var(--marfil) !important;
}

.side-card {
    border: 2px solid var(--borde) !important;
    border-radius: 4px !important;
}

/* ── Eliminar gradientes azul/verde legacy ── */
.linear-gradient-legacy,
[style*="#1B3A6B"], [style*="#1AAB6D"] { /* fallback via overrides above */ }