/*
 * Implus Accounting — estilos propios del sitio público.
 *
 * Plano, sin preprocesador ni build step (Vanilla CSS), cargado directamente
 * después de Bootstrap 5 y de tokens.css/fonts.css. Se construye sobre las
 * variables definidas en /css/tokens.css. Se va llenando por componente a
 * medida que se construyen (Fase 3).
 */

body {
    font-family: var(--ia-font-body);
    color: var(--ia-text-on-light);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--ia-font-heading);
}

/* Scroll-reveal (Fase 1c) — ver comentario en layouts/app.blade.php
   sobre por qué la clase "js-reveal" la agrega un script inline en
   <head> y no app.js. Sin esa clase (JS desactivado, o el usuario
   prefiere menos movimiento) las secciones quedan visibles siempre:
   este bloque solo puede OCULTARLAS, nunca es la única forma de
   mostrarlas. Se excluye el hero (primer <section> de cada página)
   para no afectar el LCP. */
.js-reveal main > section:not(:first-child) {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-reveal main > section:not(:first-child).ia-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal main > section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Atom: button (.ia-btn) */
.ia-btn {
    border-radius: var(--ia-radius-pill);
    padding: 0.75rem 1.75rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.ia-btn-primary {
    /* Toque metálico sutil, solo en el botón CTA (a pedido del
       cliente) — 3 tonos del mismo dorado en diagonal, sin simular un
       reflejo/brillo real. Los 3 tonos se verificaron contra el texto
       (--ia-accent-contrast, #0A1829): el más oscuro da ~5:1, el más
       claro ~7.7:1 — ambos cumplen AA de sobra, así que el degradado
       nunca baja la legibilidad del texto del botón. El resto del
       sitio (íconos, textos, otros botones) se queda en el dorado
       plano — ver tokens.css para la razón (evitar "efectos" que el
       manual de marca pide no usar en el isotipo, y mantener el
       contraste auditable en todo lo demás).
       Oscuro #A28440 / base var(--ia-accent) #BE9B4B / claro #C6A761. */
    background: linear-gradient(135deg, #A28440 0%, var(--ia-accent) 45%, #C6A761 100%);
    border: 1px solid var(--ia-accent);
    color: var(--ia-accent-contrast);
}

.ia-btn-primary:hover,
.ia-btn-primary:focus {
    /* Mismo degradado, desplazado un tono más claro en los 3 puntos. */
    background: linear-gradient(135deg, var(--ia-accent) 0%, #C6A761 45%, #CDB274 100%);
    border-color: #C6A761;
    color: var(--ia-accent-contrast);
}

.ia-btn-outline-light {
    background-color: transparent;
    border: 1px solid var(--ia-text-on-dark);
    color: var(--ia-text-on-dark);
}

.ia-btn-outline-light:hover,
.ia-btn-outline-light:focus {
    background-color: var(--ia-text-on-dark);
    color: var(--ia-text-on-light);
}

.ia-btn-outline-dark {
    background-color: transparent;
    border: 1px solid var(--ia-text-on-light);
    color: var(--ia-text-on-light);
}

.ia-btn-outline-dark:hover,
.ia-btn-outline-dark:focus {
    background-color: var(--ia-text-on-light);
    color: var(--ia-text-on-dark);
}

/* Fase 16c — botones de la franja CTA dorada de ImplusERP. Sobre el
   dorado, el botón principal es azul profundo sólido con texto marfil
   (15.48:1); el de WhatsApp es contorno azul profundo (6.79:1). */
.ia-btn-navy {
    background-color: var(--ia-bg-primary);
    border: 1px solid var(--ia-bg-primary);
    color: var(--ia-text-on-dark);
}

.ia-btn-navy:hover,
.ia-btn-navy:focus {
    background-color: var(--ia-bg-secondary);
    border-color: var(--ia-bg-secondary);
    color: var(--ia-text-on-dark);
}

.ia-btn-outline-navy {
    background-color: transparent;
    border: 1px solid var(--ia-bg-primary);
    color: var(--ia-bg-primary);
}

.ia-btn-outline-navy:hover,
.ia-btn-outline-navy:focus {
    background-color: var(--ia-bg-primary);
    color: var(--ia-text-on-dark);
}

.ia-btn-navy:focus-visible,
.ia-btn-outline-navy:focus-visible {
    outline: 2px solid var(--ia-bg-primary);
    outline-offset: 2px;
}

/* Molecule: topbar */
.ia-topbar {
    background-color: var(--ia-bg-secondary);
    color: var(--ia-text-on-dark-muted);
    font-size: 0.85rem;
}

.ia-topbar-link {
    color: var(--ia-text-on-dark-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* WCAG 2.5.8: el texto solo mide ~20px de alto, por debajo del
       mínimo de 24px — este padding lo completa sin cambiar el tamaño
       visual del texto. */
    padding-block: 4px;
}

.ia-topbar-link:hover {
    color: var(--ia-text-on-dark);
}

.ia-topbar-social.d-flex {
    gap: 0.5rem !important;
}

.ia-topbar-social .ia-social-icon {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
}

/* Molecule: navbar */
.ia-navbar {
    background-color: var(--ia-bg-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ia-nav-link {
    color: var(--ia-text-on-dark-muted) !important;
    font-weight: 500;
    padding: 0.5rem 0.9rem !important;
}

.ia-nav-link:hover,
.ia-nav-link.active {
    /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */
    color: var(--ia-accent-teal) !important;
}

.ia-dropdown-menu {
    background-color: var(--ia-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ia-dropdown-menu .dropdown-item {
    color: var(--ia-text-on-dark-muted);
}

.ia-dropdown-menu .dropdown-item:hover,
.ia-dropdown-menu .dropdown-item:focus {
    /* Fase 15: el texto en hover/focus pasa a beige (--ia-text-on-dark,
       10.5:1 sobre el hover compuesto rgb(31,56,75)) y el estado se marca
       también con un indicador dorado de 3px a la izquierda, no solo con
       color (WCAG 1.4.1). El fondo de hover baja a rgba(...,.08). */
    background-color: rgba(243, 238, 231, 0.08);
    color: var(--ia-text-on-dark);
    box-shadow: inset 3px 0 0 0 var(--ia-accent);
}

/* Estado activo/seleccionado: conserva el indicador y usa
   --ia-accent-teal-bright, legible sobre secundario (6.00:1). */
.ia-dropdown-menu .dropdown-item.active,
.ia-dropdown-menu .dropdown-item:active {
    background-color: rgba(243, 238, 231, 0.08);
    color: var(--ia-accent-teal-bright);
    box-shadow: inset 3px 0 0 0 var(--ia-accent);
}

/* Fase 15: anillo de foco de marca en vez del contorno azul de Bootstrap
   (WCAG 2.4.7 se mantiene: el foco sigue visible). Dorado 2px con offset
   2px — 6.75:1 sobre --ia-bg-primary y 5.88:1 sobre --ia-bg-secondary. */
.ia-nav-link:focus-visible,
.ia-navbar .dropdown-toggle:focus-visible,
.ia-dropdown-menu .dropdown-item:focus-visible,
.ia-offcanvas .ia-nav-link:focus-visible {
    outline: 2px solid var(--ia-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.ia-phone-pill {
    background-color: var(--ia-bg-secondary);
    color: var(--ia-text-on-dark);
    border-radius: var(--ia-radius-pill);
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.ia-offcanvas {
    background-color: var(--ia-bg-primary);
    color: var(--ia-text-on-dark);
    max-width: 320px;
}

/* Organism: footer */
.ia-footer {
    background-color: var(--ia-bg-primary);
}

.ia-footer-link {
    color: var(--ia-text-on-dark-muted);
    text-decoration: none;
    font-size: 0.95rem;
    /* el correo (tucontador@implusaccounting.co) no cabe sin partirse en la
       columna angosta "Contacto" del footer en mobile (col-6) — sin esto
       desborda el ancho de la página y genera scroll horizontal. */
    overflow-wrap: anywhere;
    /* auditoría WCAG mobile: el texto solo daba ~23px de alto, bajo el
       mínimo de 24x24px de objetivo táctil (2.5.8) */
    display: inline-block;
    padding-block: 2px;
}

.ia-footer-link:hover {
    /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */
    color: var(--ia-accent-teal);
}

.ia-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ia-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ia-text-on-dark);
    text-decoration: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.ia-social-icon:hover {
    /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */
    background-color: var(--ia-accent-teal);
    border-color: var(--ia-accent-teal);
    color: var(--ia-text-on-dark);
}

/* Organism: whatsapp floating button */
.ia-whatsapp-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--ia-accent);
    color: var(--ia-accent-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    /* Anillo azul profundo (Fase 16f): sin él el botón dorado se pierde sobre
       la franja dorada del CTA de /como-trabajamos. */
    box-shadow: 0 0 0 3px var(--ia-bg-primary), var(--ia-shadow-card-dark);
    z-index: 1040;
    text-decoration: none;
    transition: transform 0.15s ease-in-out;
}

.ia-whatsapp-fab:hover {
    transform: scale(1.08);
    color: var(--ia-accent-contrast);
}

/* Atoms */
.ia-divider {
    width: 28px;
    height: 3px;
    border-radius: 2px;
}

.ia-link-arrow {
    /* auditoría WCAG mobile: sin esto medía ~21px de alto, bajo el
       mínimo de 24x24px de objetivo táctil (2.5.8) */
    padding-block: 3px;
}

.ia-link-arrow i {
    transition: transform 0.15s ease-in-out;
}

.ia-link-arrow:hover i {
    transform: translateX(4px);
}

/* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) —
   variante según si el link-arrow está sobre fondo oscuro o claro. */
.ia-link-arrow-light:hover {
    color: var(--ia-accent-teal) !important;
}

.ia-link-arrow-dark:hover {
    color: var(--ia-accent-teal-on-light) !important;
}

/* Fondo azul de marca + iniciales doradas: legible tanto sobre las secciones
   claras (tarjetas de equipo) como sobre las oscuras (panel de área).
   Dorado sobre --ia-bg-secondary ≈ 4.9:1. */
.ia-avatar.object-fit-cover {
    /* Fotos tipo documento (vertical): anclar arriba para no cortar la cabeza. */
    object-position: top center;
}

.ia-avatar-fallback {
    background-color: var(--ia-bg-secondary);
    border: 2px solid var(--ia-accent);
    color: var(--ia-accent);
    font-family: var(--ia-font-heading);
    letter-spacing: .02em;
}

.ia-badge-accent {
    background-color: rgba(190, 155, 75, 0.12);
    color: var(--ia-accent-on-light);
}

.ia-form-control {
    border-color: var(--ia-border);
    padding: 0.7rem 1rem;
    border-radius: 8px;
}

.ia-form-control:focus {
    border-color: var(--ia-accent);
    box-shadow: 0 0 0 0.2rem rgba(190, 155, 75, 0.15);
}

/* Molecules */
.ia-breadcrumb-link {
    color: var(--ia-text-on-dark-muted);
    text-decoration: none;
}

.ia-breadcrumb-link:hover {
    /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */
    color: var(--ia-accent-teal);
}

.breadcrumb-item.active {
    color: var(--ia-accent-teal);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ia-text-on-dark-muted);
}

.ia-process-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--ia-accent);
    color: var(--ia-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--ia-font-heading);
}

/* Fase 12: variantes de process-timeline (mismos datos, distinto
   tratamiento visual por página — ver plan). */

/* "flow" (Contabilidad y Nómina): flecha entre cada paso, solo desde lg+
   (por debajo de eso los pasos se apilan en varias filas y una flecha
   entre ellos ya no tendría sentido). */
@media (min-width: 992px) {
    .ia-process-flow > .row > [class*="col-"] {
        position: relative;
    }

    .ia-process-flow > .row > [class*="col-"]:not(:last-child)::after {
        content: "\2192";
        position: absolute;
        top: 24px;
        right: -0.85rem;
        transform: translateY(-50%);
        color: var(--ia-accent);
        font-size: 1.25rem;
        font-weight: 700;
    }
}

/* "vertical" (Personas Naturales): línea conectora entre los círculos. */
.ia-process-vertical-line {
    width: 2px;
    min-height: 1.5rem;
    background-color: var(--ia-border-dark);
    margin-block: 0.25rem;
}

/* "zigzag" (Revisoría Fiscal): línea vertical central punteada, con los
   pasos alternando a izquierda/derecha — evoca un rastro de auditoría.
   Solo desde lg+ (en mobile los pasos van en una sola columna, sin
   línea, igual que el resto de layouts). */
.ia-process-zigzag-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dashed var(--ia-accent);
    opacity: 0.5;
}

@media (min-width: 992px) {
    .ia-process-zigzag-item {
        width: 50%;
        padding-right: 2rem;
    }

    .ia-process-zigzag-item-right {
        margin-left: auto;
        padding-right: 0;
        padding-left: 2rem;
    }
}

.ia-service-card {
    background-color: var(--ia-bg-light);
    border-radius: var(--ia-radius-card);
    box-shadow: var(--ia-shadow-card);
    transition: transform 0.2s ease-in-out;
}

.ia-service-card:hover {
    transform: translateY(-4px);
}

.ia-service-card-icon,
.ia-benefit-icon {
    color: var(--ia-accent);
}

/* atoms/icon-badge — identidad gráfica propia, ver DESIGN.md §10. El
   cuadrado redondeado principal contiene el ícono; el cuadrado pequeño
   ("corner") asoma detrás en la esquina superior derecha, eco en
   miniatura de los 4 cuadrados de esquina del isotipo real — nunca el
   isotipo mismo, solo su gramática visual. */
.ia-icon-badge-corner {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 38%;
    height: 38%;
    /* Fase 15: el cuadro de la esquina es sólido (antes opacity .4) y lleva
       un "+" centrado estilo exponente, dibujado con dos barras CSS. El
       color de fondo lo fija el átomo inline: --ia-accent-teal sobre fondo
       oscuro, --ia-accent-teal-on-light sobre fondo claro.
       Contraste verificado del "+" beige (--ia-text-on-dark) contra el
       cuadro: #F3EEE7 sobre #4E8A8F = 3.43:1 y sobre #2D6167 = 6.17:1 —
       ambos ≥3:1 (mínimo para gráfico). */
    min-width: 18px;
    min-height: 18px;
    border-radius: 5px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ia-icon-badge-corner::before,
.ia-icon-badge-corner::after {
    content: "";
    position: absolute;
    background-color: var(--ia-text-on-dark);
    border-radius: 1px;
}

.ia-icon-badge-corner::before {
    width: 46%;
    height: 2px;
}

.ia-icon-badge-corner::after {
    width: 2px;
    height: 46%;
}

.ia-icon-badge-main {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 1.5px solid;
}

/* Fase 11: numeración editorial en vez de ícono en benefit-card — el
   color viene inline (según variant), acá solo tamaño/peso/línea. */
.ia-benefit-number {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    font-family: var(--ia-font-heading);
    opacity: 0.2;
}

.ia-team-card-photo :where(img, span) {
    display: block;
    margin-inline: auto;
}

.ia-testimonial-card {
    background-color: var(--ia-bg-light);
    border-radius: var(--ia-radius-card);
    box-shadow: var(--ia-shadow-card);
    transition: transform 0.2s ease-in-out;
}

.ia-testimonial-card:hover {
    transform: translateY(-4px);
}

.ia-cta-inline {
    background-color: rgba(190, 155, 75, 0.08);
    border: 1px solid rgba(190, 155, 75, 0.25);
    border-radius: var(--ia-radius-card);
}

.ia-cta-inline-icon {
    color: var(--ia-accent-on-light);
}

/* Acordeón de FAQ (Bootstrap 5 nativo, sin jQuery) */
.ia-faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ia-border);
}

.ia-faq-button {
    background: transparent;
    color: var(--ia-text-on-light);
    font-weight: 600;
    padding: 1.25rem 0;
    box-shadow: none !important;
    transition: color 0.15s ease-in-out;
}

.ia-faq-button:hover {
    color: var(--ia-accent-on-light);
}

/* Bootstrap usa box-shadow (no outline) para el foco del acordeón; se
   anuló arriba para quitar el halo azul por defecto — se repone acá un
   indicador de foco visible propio, requisito de WCAG 2.4.7. */
.ia-faq-button:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(190, 155, 75, 0.35) !important;
    border-radius: 4px;
}

.ia-faq-button:not(.collapsed) {
    color: var(--ia-accent-on-light);
    background: transparent;
}

.ia-faq-button::after {
    filter: none;
}

.accordion-body {
    padding: 0 0 1.25rem 0;
    color: var(--ia-text-on-light-muted);
}

/* Organisms: heroes */
.ia-hero {
    background-color: var(--ia-bg-primary);
    color: var(--ia-text-on-dark);
    min-height: 480px;
    display: flex;
    align-items: center;
}

.ia-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.45;
}

.ia-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ia-bg-primary) 15%, rgba(11, 11, 11, 0.55) 60%, rgba(11, 11, 11, 0.35) 100%);
}

.ia-hero-page,
.ia-hero-service {
    min-height: 320px;
}

/* Fase 15: tarjeta "Asesorado por" del hero de servicio. Fondo sólido
   --ia-bg-secondary (no semitransparente, para que el contraste sea el
   calculado y no dependa de la foto de turno detrás del overlay).
   Contrastes del texto sobre #0C283D: nombre beige 13.5:1; cargo
   (--ia-text-on-dark-muted) 8.6:1 — de sobra sobre AA. */
.ia-advisor-card {
    background-color: var(--ia-bg-secondary);
    border: 1px solid var(--ia-border-dark);
    border-radius: var(--ia-radius-card);
    padding: 1rem 1.25rem;
    max-width: 360px;
}

.ia-advisor-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ia-accent);
    margin-bottom: 0.65rem;
}

/* Fase 12: acento geométrico decorativo — esquina superior derecha del
   hero, encima del overlay, detrás del contenido (orden en el DOM). */
.ia-brand-pattern {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    /* en mobile el hero es más angosto — se reduce para no competir con
       el contenido, que en esos anchos ya ocupa todo el ancho */
    .ia-brand-pattern {
        width: 110px;
        height: 110px;
    }
}

/* Chips de navegación interna dentro de un hero (ej. anclas #equipo /
   #como-trabajamos en Nosotros, Fase 9) */
.ia-chip-link {
    transition: opacity 0.15s ease-in-out;
}

.ia-chip-link:hover {
    opacity: 0.75;
}

.ia-cta-banner {
    background-color: var(--ia-bg-primary);
    color: var(--ia-text-on-dark);
    position: relative;
    overflow: hidden;
}

/* Organisms: about / highlight cards */
.ia-about-photo {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.ia-about-highlight {
    /* Fase 11: --ia-bg-primary, no --ia-bg-secondary — la sección
       "Quiénes somos" (único lugar donde se usa esta tarjeta) ahora usa
       --ia-bg-secondary como fondo; si la tarjeta usara el mismo tono se
       perdería el contraste entre ambas. */
    background-color: var(--ia-bg-primary);
    border-radius: var(--ia-radius-card);
    max-width: 340px;
    bottom: -1.5rem;
    left: -1.5rem;
    box-shadow: var(--ia-shadow-card-dark);
}

@media (max-width: 991.98px) {
    .ia-about-highlight {
        position: static !important;
        max-width: 100%;
        margin-top: 1rem;
    }
}

/* Franja de cifras de "Quiénes somos" (ver about-section.blade.php) —
   divisor vertical solo desde lg+, igual que el resto de conectores
   decorativos lg-only del sitio (zigzag, línea vertical del proceso). */
@media (min-width: 992px) {
    .ia-about-stats-item:not(:first-child) {
        border-left: 1px solid var(--ia-border-dark);
    }
}

.ia-highlight-card {
    background-color: var(--ia-bg-light-alt);
    border-radius: var(--ia-radius-card);
}

.ia-contact-mini-card {
    background-color: var(--ia-bg-light-alt);
    border-radius: var(--ia-radius-card);
}

/* Foto de apoyo en contact-info-panel (ver comentario ahí) — apaisada,
   distinta de .ia-about-photo (vertical), altura más baja porque va
   entre las tarjetas y el CTA, no como pieza principal de la columna. */
.ia-contact-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.ia-mini-link {
    /* auditoría WCAG mobile: sin esto medían ~22px de alto, bajo el
       mínimo de 24x24px de objetivo táctil (2.5.8) */
    display: inline-block;
    padding-block: 2px;
}

/* Organism: contact form */
.ia-contact-form .form-label {
    color: var(--ia-text-on-light);
}

.htmx-indicator {
    opacity: 0;
    display: none;
}

.htmx-request .htmx-indicator {
    opacity: 1;
    display: inline-block;
}

.htmx-request.htmx-indicator {
    opacity: 1;
    display: inline-block;
}

/* Módulo Recursos (Fase A) — calculadoras + tarjetas de hub/blog. */

/* molecules/calculator-result.blade.php — sin precedente en el sitio,
   caja de resultado sobre --ia-bg-light-alt con los tokens de card ya
   existentes. El número usa --ia-accent-on-light, nunca --ia-accent
   crudo como color de texto (falla WCAG AA sobre fondo claro, ver
   tokens.css). */
.ia-calculator-result {
    background-color: var(--ia-bg-light-alt);
    border-radius: var(--ia-radius-card);
    padding: 1.5rem;
}

.ia-calculator-result-value {
    font-family: var(--ia-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ia-accent-on-light);
}

.ia-calculator-result-suffix {
    font-size: 1rem;
    font-weight: 600;
    margin-left: .25rem;
    color: var(--ia-text-on-light-muted);
}

/* organisms/resource-card.blade.php — la imagen de portada (artículos)
   sangra hasta los bordes de la tarjeta (.ia-service-card usa p-4 =
   1.5rem, de ahí el margen negativo) en vez de quedar con marco blanco
   alrededor. */
.ia-resource-card-image {
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    overflow: hidden;
    border-radius: var(--ia-radius-card) var(--ia-radius-card) 0 0;
}

.ia-resource-card-image img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

/* pages/recursos/blog/show.blade.php — tipografía básica del cuerpo del
   artículo (HTML generado por el editor Quill del backoffice). */
.ia-article-body {
    color: var(--ia-text-on-light);
    font-size: 1.05rem;
    line-height: 1.75;
}

.ia-article-body :is(h1, h2, h3, h4) {
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.ia-article-body p {
    margin-bottom: 1.25rem;
}

.ia-article-body :is(ul, ol) {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.ia-article-body a {
    color: var(--ia-accent-on-light);
}

.ia-article-body blockquote {
    border-left: 3px solid var(--ia-accent);
    padding-left: 1rem;
    color: var(--ia-text-on-light-muted);
    font-style: italic;
}

/* organisms/blog-sidebar.blade.php (Fase A2) */
.ia-sidebar-link {
    padding-block: .35rem;
    color: var(--ia-text-on-light-muted);
    transition: color .15s ease-in-out;
}

.ia-sidebar-link:hover,
.ia-sidebar-link.active {
    color: var(--ia-accent-on-light);
}

.ia-sidebar-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.ia-sidebar-thumb-fallback {
    background-color: var(--ia-bg-light-alt);
    color: var(--ia-accent-on-light);
    font-size: 1.25rem;
}

.ia-badge-accent-active {
    background-color: var(--ia-accent);
    color: var(--ia-accent-contrast);
}

/* ============================================================
   Fase 13 — Selector de áreas de especialidad (/nosotros#areas)
   ============================================================ */
.ia-area-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.5rem;
}

/* ≥1200px: cuadrícula ordenada 3×2 (6 pestañas), en vez del wrap irregular
   del flex. Debajo de 1200px manda el wrap normal. */
@media (min-width: 1200px) {
    .ia-area-tabs {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
    }
}

.ia-area-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 1px solid var(--ia-border-dark);
    border-radius: var(--ia-radius-pill);
    background: transparent;
    color: var(--ia-text-on-dark-muted);
    font-weight: 600;
    font-size: .9rem;
    transition: background-color .15s, color .15s, border-color .15s;
}

.ia-area-tab:hover {
    color: var(--ia-text-on-dark);
    border-color: var(--ia-accent);
}

.ia-area-tab.is-active {
    background: var(--ia-accent);
    border-color: var(--ia-accent);
    color: var(--ia-accent-contrast);
}

.ia-area-tab:focus-visible {
    outline: 2px solid var(--ia-text-on-dark);
    outline-offset: 2px;
}

.ia-area-panel[hidden] {
    display: none;
}

.ia-area-subtitle {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ia-accent);
    margin-bottom: .75rem;
}

.ia-area-when li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: .5rem;
    color: var(--ia-text-on-dark-muted);
}

.ia-area-when li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--ia-accent);
}

/* Fase 14: misma lista de "cuándo lo necesita" sobre fondo claro
   (service-intro), donde el texto on-dark no se lee. El punto usa el
   dorado oscuro (--ia-accent-on-light) porque --ia-accent crudo no
   cumple contraste sobre claro. */
.ia-area-when-light li {
    color: var(--ia-text-on-light-muted);
}

.ia-area-when-light li::before {
    background: var(--ia-accent-on-light);
}

/* Bloques internos de un área (p. ej. "Contabilidad y revisoría" separa
   contabilidad/nómina de revisoría fiscal). Separación con borde neutro
   de 1px + espacio, sin cajas anidadas ni acentos de color en bordes. */
.ia-area-block-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ia-text-on-dark);
    margin-bottom: .75rem;
}

.ia-area-block-next {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--ia-border-dark);
}

.ia-area-pro-caption {
    margin: -.25rem 0 .75rem;
    font-family: var(--ia-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ia-text-on-dark);
}

.ia-area-pro {
    background: var(--ia-bg-primary);
    border: 1px solid var(--ia-border-dark);
    border-radius: var(--ia-radius-card);
    padding: 1.5rem;
}

/* Plantel sobre el selector de áreas (Fase 13b). */
.ia-roster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 0 0 2.5rem;
    padding: 0;
}

.ia-roster-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    width: 100%;
    height: 100%;
    padding: 1rem .75rem;
    text-align: center;
    background: transparent;
    border: 1px solid var(--ia-border-dark);
    border-radius: var(--ia-radius-card);
    color: var(--ia-text-on-dark);
    transition: background-color .15s, border-color .15s;
}

.ia-roster-item:not(:disabled):hover,
.ia-roster-item.is-active {
    background: rgba(243, 238, 231, .06);
    border-color: var(--ia-accent);
}

.ia-roster-item:focus-visible {
    outline: 2px solid var(--ia-text-on-dark);
    outline-offset: 2px;
}

.ia-roster-item .ia-avatar {
    margin-bottom: .5rem;
    /* Fotos verticales tipo documento (la de Jhonatan): la cabeza arriba,
       nunca recortada por el centro del círculo. */
    object-position: top center;
}

.ia-roster-name {
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.25;
}

.ia-roster-role {
    font-size: .8rem;
    line-height: 1.3;
    color: var(--ia-text-on-dark-muted);
}

.ia-roster-areas {
    margin-top: .25rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ia-accent);
}

/*
 * Fase 16c — ImplusERP (organisms/erp-showcase): la sección se parte en 5
 * regiones con fondo propio. Cada región lleva una clase de TONO que define
 * las variables --erp-*; el marcado solo consume esas variables (nada de
 * colores fijos por estilo inline). Orden en la página:
 *   a light (marfil) → b teal (teal profundo) → c light-gold (marfil)
 *   → d navy (azul profundo) → e gold (franja dorada)
 * Ninguna región oscura queda pegada a otra oscura (DESIGN.md §4).
 *
 * --erp-border se fija en ≥3:1 contra el fondo de su tono porque delimita
 * componentes (chips de estado, panel "Así funciona"); los fondos de
 * sección ya se distinguen solos y no dependen del borde.
 */
.ia-erp-region {
    background-color: var(--erp-bg);
    color: var(--erp-fg);
}

.ia-erp-tone-light {
    --erp-bg: var(--ia-bg-light);
    --erp-fg: var(--ia-text-on-light);
    --erp-muted: var(--ia-text-on-light-muted);
    --erp-accent: var(--ia-accent-teal-on-light);
    --erp-border: rgba(10, 24, 41, 0.47);   /* 3.05:1 sobre #F3EEE7 */
    --erp-panel: rgba(10, 24, 41, 0.035);
}

.ia-erp-tone-teal {
    --erp-bg: var(--ia-bg-teal-deep);
    --erp-fg: var(--ia-text-on-dark);
    --erp-muted: var(--ia-text-on-dark-muted);
    --erp-accent: var(--ia-accent-teal-bright);
    --erp-border: rgba(243, 238, 231, 0.40); /* 3.02:1 sobre #1A3945 */
    --erp-panel: rgba(243, 238, 231, 0.07);
}

.ia-erp-tone-light-gold {
    --erp-bg: var(--ia-bg-light);
    --erp-fg: var(--ia-text-on-light);
    --erp-muted: var(--ia-text-on-light-muted);
    --erp-accent: var(--ia-accent-on-light);
    --erp-border: rgba(10, 24, 41, 0.47);   /* 3.05:1 sobre #F3EEE7 */
    --erp-panel: var(--ia-bg-primary);
}

.ia-erp-tone-navy {
    --erp-bg: var(--ia-bg-primary);
    --erp-fg: var(--ia-text-on-dark);
    --erp-muted: var(--ia-text-on-dark-muted);
    --erp-accent: var(--ia-accent);
    --erp-border: rgba(243, 238, 231, 0.36); /* 3.03:1 sobre #0A1829 */
    --erp-panel: rgba(243, 238, 231, 0.05);
}

.ia-erp-tone-gold {
    --erp-bg: var(--ia-accent);
    --erp-fg: var(--ia-bg-primary);   /* texto sólido, sin alfa (6.79:1) */
    --erp-muted: var(--ia-bg-primary);
    --erp-accent: var(--ia-bg-primary);
    --erp-border: rgba(10, 24, 41, 0.57);    /* 3.06:1 sobre #BE9B4B */
    --erp-panel: rgba(10, 24, 41, 0.06);
}

/* Los subtítulos y el panel siguen el acento del tono, no el dorado fijo. */
.ia-erp-region .ia-area-subtitle {
    color: var(--erp-accent);
}

/* Chips de estado: contorno por defecto (Próximamente). */
.ia-erp-chip {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--erp-border);
    border-radius: var(--ia-radius-pill);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--erp-muted);
}

.ia-erp-chip-sm {
    padding: .2rem .6rem;
    font-size: .68rem;
}

/* Relleno dorado (Disponible / Primera etapa): texto azul profundo. */
.ia-erp-region .ia-erp-chip-live,
.ia-erp-region .ia-erp-chip-stage {
    background: var(--ia-accent);
    border-color: var(--ia-accent);
    color: var(--ia-accent-contrast);
}

/* Región light-gold: el chip "Primera etapa" usa el dorado oscuro con
   texto marfil (6.05:1) — el dorado plano no cumple sobre fondo claro. */
.ia-erp-tone-light-gold .ia-erp-chip-stage {
    background: var(--ia-accent-on-light);
    border-color: var(--ia-accent-on-light);
    color: var(--ia-text-on-dark);
}

/* Títulos de la primera etapa: escala mayor que el resto de la sección. */
.ia-erp-feature-title {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

/* Panel "Así funciona". En la región light-gold se INVIERTE a azul
   profundo: redefine las variables para que su contenido herede el
   tono oscuro (texto marfil, acento dorado). */
.ia-erp-steps {
    padding: 2rem;
    background: var(--erp-panel);
    border: 1px solid var(--erp-border);
    border-radius: var(--ia-radius-card);
}

.ia-erp-tone-light-gold .ia-erp-steps {
    --erp-fg: var(--ia-text-on-dark);
    --erp-muted: var(--ia-text-on-dark-muted);
    --erp-accent: var(--ia-accent);
    --erp-border: rgba(243, 238, 231, 0.36);
}

.ia-erp-steps .ia-area-subtitle {
    font-size: .85rem;
}

.ia-erp-step-number {
    width: 36px;
    height: 36px;
    font-size: .9rem;
}

.ia-erp-steps .ia-process-vertical-line {
    width: 2px;
    min-height: 1rem;
    background-color: rgba(168, 135, 95, .45);
}