.iao-section{padding:24px 0; opacity:0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease}
.iao-section.iao-in{opacity:1; transform:none}
.iao-shell{max-width: var(--iao-maxw, 1100px); margin:0 auto; padding:0 16px}
.iao-card-front{position:relative; background: var(--iao-bg, #fff); border-radius: var(--iao-radius, 20px); box-shadow: var(--iao-shadow, 0 14px 40px rgba(0,0,0,.10)); overflow:hidden; border:1px solid rgba(0,0,0,.06)}
.iao-glow{position:absolute; inset:-40% -30%; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--iao-accent) 45%, transparent), transparent 55%); filter: blur(30px); opacity:.35; pointer-events:none}
.iao-cols{display:grid; grid-template-columns: 1fr 1.15fr 1fr; gap:14px; padding:18px}
.iao-layout-leftwide .iao-cols{grid-template-columns: 1.35fr 1fr 1fr}
.iao-layout-rightwide .iao-cols{grid-template-columns: 1fr 1fr 1.35fr}
@media (max-width: 900px){
  .iao-cols{grid-template-columns: 1fr; padding:14px}
}
.iao-media, .iao-bottom{border-radius: calc(var(--iao-radius, 20px) - 6px); overflow:hidden; background: rgba(0,0,0,.03); position:relative; min-height: 220px; transition: transform .2s ease, box-shadow .2s ease}
@media (max-width: 900px){ .iao-media{min-height: 200px} }
.iao-media img, .iao-bottom img{width:100%; height:100%; object-fit:cover; display:block}
.iao-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: rgba(17,24,39,.55); font-weight:600; letter-spacing:.2px}
.iao-center{color: var(--iao-text, #111827); padding:8px 6px}
.iao-badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.18em; color: color-mix(in srgb, var(--iao-text) 65%, transparent); text-transform:uppercase}
.iao-badge:before{content:""; width:10px; height:10px; border-radius:999px; background: var(--iao-accent)}
.iao-title{margin:10px 0 8px; font-size: clamp(22px, 3.2vw, 34px); line-height:1.15}
.iao-content{font-size:16px; line-height:1.75; color: color-mix(in srgb, var(--iao-text) 88%, transparent)}
.iao-content p{margin: 0 0 10px}
.iao-content a{color: var(--iao-accent); text-decoration: underline; text-underline-offset: 3px}
.iao-bottom{margin-top:14px; min-height: 160px}
.iao-media:hover, .iao-bottom:hover{box-shadow: 0 10px 28px rgba(0,0,0,.14)}
.iao-preview-mode{padding:0}

.iao-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px}
.iao-btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius: 999px; font-weight:700; font-size:14px; text-decoration:none; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.65); color: var(--iao-text); backdrop-filter: blur(6px); transition: transform .15s ease, box-shadow .15s ease}
.iao-btn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.12)}
.iao-btn .iao-ico{width:18px; height:18px; display:inline-flex}
.iao-btn svg{width:18px; height:18px; fill: currentColor}
.iao-btn-wa{background: color-mix(in srgb, var(--iao-accent) 12%, #fff); border-color: color-mix(in srgb, var(--iao-accent) 30%, rgba(0,0,0,.08))}
.iao-btn-contact{background: rgba(255,255,255,.75)}
.iao-social{display:inline-flex; align-items:center; gap:8px; margin-left:auto}
@media (max-width: 900px){ .iao-social{margin-left:0} }
.iao-soc{width:38px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.65); color: var(--iao-text); text-decoration:none; transition: transform .15s ease, box-shadow .15s ease}
.iao-soc:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.12); color: var(--iao-accent)}
.iao-soc svg{width:18px; height:18px; fill: currentColor}