/* LEVLI — componentes exclusivos da página "Marketing, Automação e Integrações".
   Carregar DEPOIS de styles.css e servico.css. Tudo prefixado com .mk- */
.mk-sym { position: absolute; width: 0; height: 0; overflow: hidden; }
.svc__intro a { color: var(--cereja); font-weight: 600; text-underline-offset: 3px; }
.svc--dark .svc__intro a { color: var(--rosa); }

/* Cards das frentes */
.mk-fr { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.mk-card { background: var(--offwhite); border: 1.5px solid var(--grafite); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.mk-card__top { display: flex; gap: 1rem; align-items: center; }
.mk-card__ic { width: 3.5rem; height: 3.5rem; flex: none; color: var(--cereja); }
.mk-card__n { font-family: var(--font-display); font-style: italic; color: var(--cereja); font-size: 1.05rem; }
.mk-card h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; }
.mk-card__lead { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; }
.mk-sub { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cereja); margin-bottom: .6rem; }
.mk-card .front__list { font-size: .95rem; gap: .4rem; }
.mk-card details { border-top: 1px solid var(--linha); padding-top: .9rem; }
.mk-card summary { cursor: pointer; font-weight: 600; font-size: .95rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.mk-card summary::-webkit-details-marker { display: none; }
.mk-card summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--cereja); transition: transform .2s; }
.mk-card details[open] summary::after { transform: rotate(45deg); }
.mk-card details .front__list { margin-top: .9rem; }
.mk-note { font-size: .88rem; color: var(--texto-suave); border-left: 3px solid var(--rosa); padding-left: .9rem; }
.svc--dark .mk-card, .svc--soft .mk-card { color: var(--grafite); }

/* E-commerce */
.mk-eco { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
.mk-eco__c { border: 1.5px solid var(--linha-escura); border-radius: 6px; padding: 1.5rem; background: rgba(246,240,233,.06); display: grid; gap: .8rem; align-content: start; min-width: 0; }
.mk-eco__c h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--rosa); display: flex; gap: .7rem; align-items: center; }
.mk-eco__c h3 svg { width: 2.5rem; height: 2.5rem; flex: none; }
.mk-eco .front__list { font-size: .93rem; gap: .35rem; }
.mk-eco .front__list li::before { background: var(--rosa); }
.mk-lim { margin-top: 2.5rem; display: grid; gap: .75rem; background: var(--offwhite); color: var(--grafite); border-radius: 6px; padding: 1.5rem; }
.mk-lim h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.mk-lim .front__list { font-size: .95rem; }

/* Ferramentas */
.mk-tools { display: flex; flex-wrap: wrap; gap: .6rem; }
.mk-tool { border: 1.5px solid var(--grafite); border-radius: 999px; padding: .5rem 1.15rem; font-weight: 600; font-size: .92rem; background: var(--offwhite); }
.mk-tool--cat { border-style: dashed; border-color: var(--cereja); font-weight: 500; }
.mk-tools__g + .mk-tools__g { margin-top: 1.75rem; }
.mk-tools__t { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cereja); margin-bottom: .75rem; }

/* Informações */
.mk-info { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.mk-info li { border-top: 1px solid var(--grafite); padding-top: .9rem; font-size: .96rem; }
.mk-lgpd { margin-top: 2rem; background: rgba(231,166,180,.38); border-radius: 6px; padding: 1.5rem; display: grid; gap: .6rem; max-width: 52rem; }
.mk-lgpd h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }

.mk-pers { display: grid; gap: 1.25rem; max-width: 46rem; margin-top: 1.5rem; }

@media (min-width: 700px) { .mk-eco, .mk-info { grid-template-columns: repeat(2, 1fr); } .mk-fr { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mk-eco { grid-template-columns: repeat(3, 1fr); } .mk-info { grid-template-columns: repeat(2, 1fr); gap: 1rem 3rem; } }
.mk-card summary:focus-visible, .mk-tool:focus-visible { outline: 3px solid var(--cereja); outline-offset: 3px; }
@media (min-width: 700px) { .mk-fr > :last-child:nth-child(odd) { grid-column: 1 / -1; } }