/* ── Layout primitives ────────────────────────────────────────── */
.es-hero { background: linear-gradient(160deg, #ecfdf5 0%, #ffffff 50%, #f8fafc 100%); }
.es-hero::before { content: ""; position: absolute; inset: -1px; background-image: radial-gradient(circle at 12% 18%, rgba(16,185,129,.14), transparent 38%), radial-gradient(circle at 88% 8%, rgba(15,23,42,.05), transparent 36%); pointer-events: none; }
.es-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.es-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(15,23,42,.32); border-color: rgba(16,185,129,.35); }
.es-pill { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #047857; }
.es-step { background: linear-gradient(180deg, #ffffff, #f8fafc); }
.es-faq summary { list-style: none; }
.es-faq summary::-webkit-details-marker { display: none; }
.es-table th, .es-table td { vertical-align: top; }

/* ── Hero illustration shell ──────────────────────────────────── */
.es-hero-art { position: relative; border-radius: 28px; overflow: hidden; background: linear-gradient(150deg, #ecfdf5 0%, #ffffff 65%, #f0fdf4 100%); box-shadow: 0 30px 70px -45px rgba(16,185,129,.45), 0 8px 24px -16px rgba(15,23,42,.08); }
.es-hero-art-grid { background-image: linear-gradient(rgba(16,185,129,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(16,185,129,.08) 1px, transparent 1px); background-size: 28px 28px; }
.es-hero-img-wrap { position: relative; padding: 22px; }
.es-hero-img-wrap img { border-radius: 18px; box-shadow: 0 20px 40px -28px rgba(15,23,42,.4); }
.es-floating-pill { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border: 1px solid rgba(15,23,42,.06); box-shadow: 0 14px 30px -18px rgba(15,23,42,.25); }

/* ── Animated SVGs (subtle, respect reduced motion) ──────────── */
@keyframes esPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes esFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes esWave { 0% { transform: scaleY(.45); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.45); } }
@keyframes esRing { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes esDash { to { stroke-dashoffset: -200; } }
@keyframes esShimmer { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } }

.es-anim-mic { animation: esFloat 4.2s ease-in-out infinite; }
.es-anim-pulse { animation: esPulse 2.4s ease-in-out infinite; }
.es-anim-ring { transform-origin: center; animation: esRing 2.6s ease-out infinite; }
.es-anim-ring.delay-1 { animation-delay: .9s; }
.es-anim-ring.delay-2 { animation-delay: 1.8s; }
.es-anim-bar { transform-origin: center; animation: esWave 1.4s ease-in-out infinite; }
.es-anim-bar.b2 { animation-delay: .15s; }
.es-anim-bar.b3 { animation-delay: .30s; }
.es-anim-bar.b4 { animation-delay: .45s; }
.es-anim-bar.b5 { animation-delay: .60s; }
.es-anim-bar.b6 { animation-delay: .75s; }
.es-anim-bar.b7 { animation-delay: .9s; }
.es-anim-bar.b8 { animation-delay: 1.05s; }
.es-anim-dash { stroke-dasharray: 6 8; animation: esDash 6s linear infinite; }

.es-shimmer-bar { position: relative; height: 4px; border-radius: 999px; background: rgba(16,185,129,.15); overflow: hidden; }
.es-shimmer-bar::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent 0%, rgba(16,185,129,.85) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: esShimmer 2.4s ease-in-out infinite; }

/* ── Comparison columns (Why Spanish needs different cleanup) ── */
.es-compare-card { position: relative; border-radius: 18px; padding: 22px; background: #ffffff; border: 1px solid rgba(15,23,42,.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.es-compare-card.is-vclar { background: linear-gradient(165deg, #ecfdf5, #ffffff); border-color: rgba(16,185,129,.45); box-shadow: 0 24px 50px -32px rgba(16,185,129,.45); }
.es-compare-card:hover { transform: translateY(-3px); }

/* ── Step-flow (How It Feels) ────────────────────────────────── */
.es-flow { position: relative; }
.es-flow-line { display: none; }
@media (min-width: 1024px) { .es-flow-line { display: block; position: absolute; top: 56px; left: 8%; right: 8%; height: 2px; pointer-events: none; } }

/* ── Waveform helpers (Before / After) ───────────────────────── */
.es-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 36px; }
.es-wave span { width: 4px; border-radius: 3px; background: linear-gradient(180deg, #10b981, #047857); transform-origin: center; }

/* ── FAQ accordion (icon rotation) ───────────────────────────── */
.es-faq details[open] summary .es-faq-toggle i { transform: rotate(45deg); }
.es-faq summary .es-faq-toggle i { transition: transform .2s ease; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .es-anim-mic, .es-anim-pulse, .es-anim-ring, .es-anim-bar, .es-anim-dash, .es-shimmer-bar::after { animation: none !important; }
    .es-card:hover, .es-compare-card:hover { transform: none; }
}