/* Doctor Online MX v2 — /automatizacion-consultorio (agente IA de citas: chatbot de WhatsApp) */

.au-problem, .au-remind__grid, .au-which__grid, .au-plans__grid { grid-template-columns: minmax(0, 1fr); }
.au-stage, .au-visual { min-width: 0; }

/* ================= HERO (sobre el inicio oscuro de service.css) ================= */
.au-kicker { display: block; margin-bottom: .75rem; font-family: var(--font); font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.005em; word-spacing: normal; line-height: 1.3; color: var(--sky); }
.au-h1 { display: block; font-size: clamp(2.3rem, 9.6cqi, 4.6rem); }

.au-channels { display: flex; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.au-channels li { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; }
.au-channels .i { width: 1rem; height: 1rem; }

.au-stats { list-style: none; padding: 0; margin: 1.9rem 0 0; display: flex; flex-wrap: wrap; gap: .9rem 2rem; }
.au-stats li { display: grid; align-content: start; gap: .25rem; padding-left: .85rem; border-left: 2px solid var(--sky); }
.au-stats b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.au-stats span { font-size: var(--fs-xs); line-height: 1.3; color: rgba(255, 255, 255, .66); }
@media (max-width: 559px) { .au-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .au-stats li { padding-left: .7rem; } .au-stats b { font-size: 1.4rem; } }

/* Escenario del celular */
.au-visual { gap: 1rem; }
.au-stage { position: relative; width: 100%; max-width: 540px; display: grid; justify-items: center; padding: 1rem 0 .5rem; isolation: isolate; }
.au-stage__rings { position: absolute; inset: -4% -6%; z-index: -1; background: repeating-radial-gradient(circle at 50% 46%, rgba(143, 182, 255, 0) 0 62px, rgba(143, 182, 255, .13) 63px 64px); -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 35%, transparent 100%); mask: radial-gradient(closest-side at 50% 46%, #000 35%, transparent 100%); }
.au-stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%; width: min(460px, 110%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .42), rgba(0, 85, 255, 0)); pointer-events: none; }
.au-phone-wrap { position: relative; perspective: 1600px; display: grid; justify-items: center; }
.au-phone { --pw: 300px; transform: rotateY(-12deg) rotateX(4deg) rotateZ(.8deg); transform-style: preserve-3d; transition: transform .9s var(--ease-out); will-change: transform; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #05070D, 0 0 0 1px rgba(143, 182, 255, .28), 0 40px 80px -30px rgba(0, 0, 0, .7); }
@media (max-width: 1023px) { .au-phone { --pw: min(240px, 64vw); transform: rotateY(-7deg) rotateX(3deg); } }
.au-phone-shadow { width: 70%; height: 30px; margin-top: -8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .5), rgba(0, 85, 255, 0)); filter: blur(8px); }

.au-phone .phone__screen { background: #EEF3FB; font-size: calc(var(--pw) * .044); line-height: 1.3; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-stretch: 100%; letter-spacing: -.01em; }
.au-chat { position: absolute; inset: 0; padding-top: calc(var(--pw) * .15); display: flex; flex-direction: column; background: #EEF3FB; }
.au-chat__head { display: flex; align-items: center; gap: .6em; padding: 0 .9em .65em; background: #fff; box-shadow: 0 1px 0 #E2E8F3; }
.au-chat__head img { width: 2.3em; height: 2.3em; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.au-chat__head span { display: grid; flex: 1; min-width: 0; }
.au-chat__head b { font-size: .84em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-chat__head em { font-style: normal; font-size: .7em; color: var(--mint-ink); }
.au-chat__head .i { width: 1.2em; height: 1.2em; color: var(--electric); }
.au-chat__day { align-self: center; margin-top: .7em; padding: .2em .75em; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: .64em; font-weight: 600; color: var(--ink-3); }
.au-chat__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; padding: .7em .75em; overflow: hidden; }
.au-msg { max-width: 84%; padding: .55em .8em; border-radius: 1.1em; font-size: .8em; line-height: 1.38; animation: au-msg-in .45s var(--ease-out) both; }
@keyframes au-msg-in { from { opacity: 0; transform: translateY(.6em) scale(.96); } }
.au-msg--me { align-self: flex-end; background: var(--electric); color: #fff; border-bottom-right-radius: .3em; }
.au-msg--bot { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: .3em; box-shadow: 0 .15em .4em rgba(11, 29, 59, .06); }
.au-msg--typing { display: inline-flex; gap: .25em; padding: .75em .9em; }
.au-msg--typing i { width: .42em; height: .42em; border-radius: 50%; background: var(--ink-3); animation: au-dot 1.1s var(--ease-in-out) infinite; }
.au-msg--typing i:nth-child(2) { animation-delay: .15s; }
.au-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes au-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-.3em); opacity: 1; } }
.au-chat__input { display: flex; align-items: center; justify-content: space-between; margin: 0 .7em .9em; min-height: 2.5em; padding: 0 .55em 0 1em; border-radius: 999px; background: #fff; font-size: .8em; color: var(--ink-3); }
.au-chat__input .i { width: 1.9em; height: 1.9em; padding: .45em; border-radius: 50%; background: var(--electric); color: #fff; }

.au-notif { position: absolute; z-index: 20; top: calc(var(--pw) * .13); left: .6em; right: .6em; display: flex; align-items: center; gap: .65em; padding: .7em .85em; border-radius: 1.1em; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 .8em 2em -.6em rgba(11, 29, 59, .35), 0 0 0 1px rgba(11, 29, 59, .06); transform: translateY(-160%); opacity: 0; transition: transform .7s var(--ease-out), opacity .4s; }
.au-notif .i { width: 2em; height: 2em; padding: .45em; border-radius: .6em; background: var(--mint); color: #fff; flex: none; }
.au-notif span { display: grid; font-size: .78em; }
.au-notif b { font-weight: 650; }
.au-notif em { font-style: normal; color: var(--ink-2); }
.au-notif.is-shown { transform: none; opacity: 1; }

/* Tarjetas flotantes */
.au-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: .6rem; max-width: 13.5rem; padding: .6rem .9rem .6rem .6rem; border-radius: 16px; background: rgba(6, 16, 46, .66); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 50px -20px rgba(0, 0, 0, .6); font-size: .8125rem; line-height: 1.25; color: #fff; transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.au-float b { display: block; font-weight: 650; color: #fff; }
.au-float em { font-style: normal; font-size: .75rem; color: rgba(255, 255, 255, .7); }
.au-float__icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 12px; display: grid; place-items: center; background: var(--electric); color: #fff; }
.au-float__icon .i { width: 1.1rem; height: 1.1rem; }
.au-float--b .au-float__icon { background: var(--mint); color: #053B35; }
.au-float--a { left: 0; top: 40%; }
.au-float--b { right: 0; bottom: 22%; }
.is-live .au-float:not(.is-shown) { opacity: 0; transform: translateY(10px) scale(.96); }
@media (min-width: 1024px) { .au-float--a { left: -2%; } .au-float--b { right: -1%; } }
@media (max-width: 559px) {
  .au-float { max-width: 9.6rem; gap: .45rem; padding: .45rem .6rem .45rem .45rem; font-size: .72rem; border-radius: 14px; }
  .au-float em { font-size: .66rem; }
  .au-float__icon { width: 1.8rem; height: 1.8rem; border-radius: 10px; }
  .au-float--a { top: 38%; }
  .au-float--b { bottom: 24%; }
}

/* Riel de lo que hace el chatbot */
.au-rail { list-style: none; margin: 0; padding: .3rem; display: flex; gap: .2rem; border-radius: 999px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: .8125rem; font-weight: 600; }
.au-rail li { padding: .45rem .8rem; border-radius: 999px; color: rgba(255, 255, 255, .56); white-space: nowrap; transition: color .4s var(--ease-out), background-color .4s var(--ease-out); }
.au-rail li.is-done { color: var(--sky); }
.au-rail li.is-on { background: var(--electric); color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 85, 255, .9); }
@media (max-width: 420px) { .au-rail { font-size: .72rem; } .au-rail li { padding: .4rem .55rem; } }

.au-stage__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }
.au-stage__foot .ex-label { position: static; }
.au-chat-ctrl { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font-size: var(--fs-xs); font-weight: 620; color: rgba(255, 255, 255, .82); transition: box-shadow .2s var(--ease-out), color .2s, background-color .2s; }
.au-chat-ctrl:hover { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.au-chat-ctrl::before { content: ""; width: .55rem; height: .7rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.au-chat-ctrl.is-paused::before { width: 0; height: 0; border-right: 0; border-left: .6rem solid currentColor; border-top: .38rem solid transparent; border-bottom: .38rem solid transparent; }

/* ================= PROBLEMA ================= */
.au-problem { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1024px) { .au-problem { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.au-problem__head { margin-bottom: 1.75rem; }
.au-pains { display: grid; }
.au-pains li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.au-pains li:last-child { border-bottom: 1px solid var(--line); }
.au-pains .i-box { width: 2.75rem; height: 2.75rem; border-radius: 14px; display: grid; place-items: center; background: var(--electric-050); color: var(--electric); }
.au-pains p { font-size: 1.06rem; font-weight: 560; line-height: 1.42; color: var(--ink); text-wrap: pretty; }

.au-inbox { position: relative; padding-bottom: 2.25rem; }
.au-inbox__card { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-panel); background: linear-gradient(165deg, #12285A, var(--night) 60%); color: #fff; box-shadow: var(--shadow-3); }
.au-inbox__card::before { content: ""; position: absolute; z-index: -1; width: 26rem; height: 26rem; left: 50%; top: -15rem; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .55), rgba(0, 85, 255, 0)); }
.au-inbox__clock { display: grid; justify-items: center; gap: .15rem; padding: .5rem 0 1.25rem; text-align: center; }
.au-inbox__clock b { font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 2.6vw, 4.2rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.au-inbox__clock span { font-size: var(--fs-xs); color: rgba(255, 255, 255, .66); }
.au-inbox ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.au-inbox li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .75rem .85rem; border-radius: 16px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.au-inbox li b { display: block; font-size: .8125rem; font-weight: 620; color: #fff; }
.au-inbox li em { display: block; font-style: normal; font-size: .875rem; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-inbox li > span:nth-child(2) { min-width: 0; }
.au-inbox__when { align-self: start; font-size: .72rem; color: rgba(255, 255, 255, .55); white-space: nowrap; max-width: 6.5rem; text-align: right; }
.au-inbox__app { width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; }
.au-inbox__app .i { width: 1.1rem; height: 1.1rem; }
.au-inbox li.is-lost { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.au-inbox li.is-lost em, .au-inbox li.is-lost b { color: rgba(255, 255, 255, .55); }
.au-inbox__lost { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .8125rem; font-weight: 560; color: var(--sky); }
.motion-ready .au-inbox li { transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(.3s + var(--k) * .22s); }
.motion-ready .au-inbox:not(.is-in) li { opacity: 0; transform: translateY(-14px) scale(.97); }
@media (max-width: 559px) { .au-inbox__when { max-width: 4.6rem; white-space: normal; line-height: 1.2; } }

.au-callout { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 1.25rem; margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem); border-radius: var(--r-panel); box-shadow: var(--shadow-3); }
.au-callout::before { content: ""; position: absolute; z-index: -1; width: 36rem; height: 36rem; right: -14rem; top: -18rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .6), rgba(0, 85, 255, 0)); }
@media (min-width: 1024px) { .au-callout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 3.5rem; } }
.au-callout__big { font-family: var(--font-display); font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.8rem); font-weight: 600; letter-spacing: -.015em; word-spacing: .07em; line-height: 1.06; color: #fff; text-wrap: balance; }
.au-callout__big em { font-style: normal; color: var(--sky); }
.au-callout .stack > p { color: rgba(255, 255, 255, .78); max-width: 46ch; }

/* ================= RECORDATORIOS ================= */
.au-remind { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.au-remind__grid { display: grid; gap: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1024px) { .au-remind__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.au-remind .stack > .ticks { margin-top: 1.6rem; }
.au-remind .ticks li { font-size: var(--fs-body); }
.au-timeline-wrap { position: relative; padding-bottom: 2rem; }
.au-timeline { position: relative; list-style: none; padding: .25rem 0 0; margin: 0; display: grid; gap: 1.25rem; }
.au-timeline::before { content: ""; position: absolute; left: 1.05rem; top: .9rem; bottom: 2.4rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--electric), rgba(0, 85, 255, .14)); }
.au-timeline li { position: relative; display: grid; gap: .5rem; padding-left: 3rem; }
.au-timeline li::before { content: ""; position: absolute; left: .5rem; top: .1rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3.5px var(--electric), 0 0 0 5px var(--paper-2); }
.au-timeline li:last-child::before { box-shadow: inset 0 0 0 3.5px var(--mint), 0 0 0 5px var(--paper-2); }
.au-timeline__when { font-size: var(--fs-xs); color: var(--ink-3); }
.au-timeline__when b { margin-right: .45rem; font-weight: 650; color: var(--ink); }
.au-bubble { justify-self: start; max-width: 25rem; padding: .85rem 1rem; border-radius: 18px 18px 18px 6px; background: var(--card); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
.au-bubble__reply, .au-bubble__map { display: flex; align-items: center; gap: .4rem; width: max-content; max-width: 100%; margin-top: .65rem; padding: .4rem .85rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 620; }
.au-bubble__reply { background: var(--electric); color: #fff; }
.au-bubble__map { background: var(--electric-050); color: var(--electric-600); }
.au-bubble__map .i { width: 1rem; height: 1rem; }
.motion-ready .au-timeline li { transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(.2s + var(--k) * .28s); }
.motion-ready .au-timeline:not(.is-in) li { opacity: 0; transform: translateX(-16px); }

/* ================= COMPARATIVA ================= */
.au-vs { overflow: hidden; border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-3), 0 0 0 1px var(--line); }
.au-vs__head { display: none; }
.au-vs__rows { list-style: none; padding: 0; margin: 0; }
.au-vs__rows li { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.au-vs__rows li:first-child { border-top: 0; }
.au-vs__no, .au-vs__yes { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .7rem; align-items: start; padding: .85rem 1.15rem; line-height: 1.45; }
.au-vs__no { background: #F1F4FA; color: var(--ink-2); font-size: var(--fs-small); }
.au-vs__yes { color: var(--ink); font-weight: 580; }
.au-vs__no::before, .au-vs__yes::before { content: ""; width: 1.3rem; height: 1.3rem; margin-top: .05rem; border-radius: 999px; }
.au-vs__no::before { background: rgba(11, 29, 59, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7690' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 52% no-repeat; }
.au-vs__yes::before { background: var(--electric) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 58% no-repeat; }
.au-vs__arrow { display: none; }
@media (min-width: 760px) {
  .au-vs__head { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); }
  .au-vs__h { display: flex; align-items: center; gap: .55rem; padding: 1.15rem 1.6rem; font-weight: 650; font-stretch: var(--semi-wide); }
  .au-vs__h--no { background: #E6ECF6; color: var(--ink-2); }
  .au-vs__h--mid { justify-content: center; padding: 0; background: linear-gradient(90deg, #E6ECF6 50%, var(--electric) 50%); color: transparent; font-size: 0; }
  .au-vs__h--yes { background: var(--electric); color: #fff; }
  .au-vs__h--yes em { margin-left: auto; padding: .25rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-style: normal; font-size: var(--fs-xs); font-weight: 640; }
  .au-vs__rows li { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); }
  .au-vs__no, .au-vs__yes { padding: 1.15rem 1.6rem; align-items: center; }
  .au-vs__no { font-size: var(--fs-body); }
  .au-vs__arrow { display: grid; place-items: center; background: linear-gradient(90deg, #F1F4FA 50%, var(--card) 50%); }
  .au-vs__arrow::before { content: ""; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230055FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 56% no-repeat; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -6px rgba(0, 85, 255, .55); }
}
.motion-ready .au-vs .au-vs__yes { transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(.35s + var(--k) * .12s); }
.motion-ready .au-vs:not(.is-in) .au-vs__yes { opacity: 0; transform: translateX(-14px); }
.au-vs__cta { margin-top: 2rem; }

/* ================= ¿CUÁL NECESITAS? ================= */
.au-which__grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .au-which__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
@media (max-width: 899px) {
  .au-which__grid { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 1.1rem var(--gutter) 1.75rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .au-which__grid::-webkit-scrollbar { display: none; }
  .au-which__grid > .au-opt { flex: 0 0 min(86%, 24rem); scroll-snap-align: start; }
}
.au-which__hint { display: none; margin-top: -.75rem; font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 899px) { .au-which__hint { display: block; } }
.au-opt { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.35rem, 1rem + 1vw, 1.85rem); border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.au-opt header { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .85rem; align-items: center; }
.au-opt .i-box { grid-row: span 2; width: 2.75rem; height: 2.75rem; border-radius: 14px; display: grid; place-items: center; background: var(--electric-050); color: var(--electric); }
.au-opt h3 { font-size: 1.15rem; font-weight: 650; font-stretch: var(--semi-wide); letter-spacing: -.012em; line-height: 1.2; }
.au-opt__tag { font-size: var(--fs-xs); color: var(--ink-3); }
.au-opt dl { flex: 1; display: grid; align-content: start; gap: .85rem; margin: 0; }
.au-opt dt { font-size: var(--fs-xs); font-weight: 640; color: var(--ink-3); }
.au-opt dd { margin: .15rem 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.au-opt dd b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.au-opt .link, .au-opt .btn { align-self: flex-start; }
.au-opt--star { background: linear-gradient(180deg, #fff, #F2F6FF); box-shadow: 0 0 0 1.5px var(--electric), var(--shadow-3); }
.au-opt--star > .badge { position: absolute; top: -.85rem; left: 1.5rem; background: var(--electric); color: #fff; }
.au-opt--star .i-box { background: var(--electric); color: #fff; }

/* ================= PLANES ================= */
.au-plans__grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .au-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.au-plan { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 1.15rem; padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-3), 0 0 0 1.5px var(--electric); }
.au-plan::before { content: ""; position: absolute; z-index: -1; width: 28rem; height: 28rem; right: -12rem; top: -14rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .14), rgba(0, 85, 255, 0)); pointer-events: none; }
.au-plan__head { display: flex; align-items: center; gap: .9rem; }
.au-plan__head .i-box { flex: none; width: 3rem; height: 3rem; border-radius: 15px; display: grid; place-items: center; background: var(--electric-050); color: var(--electric); }
.au-plan__head small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.au-plan__head h3 { font-family: var(--font-display); word-spacing: .07em; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.15; }
.au-plan .price__num { font-size: clamp(2.9rem, 2.2rem + 2.8vw, 4.3rem); }
.au-plan .price__from { align-self: center; font-size: var(--fs-small); font-weight: 620; color: var(--ink-2); }
.au-plan__note { margin-top: .35rem; font-size: var(--fs-small); color: var(--ink-2); }
.au-plan .ticks { flex: 1; align-content: start; }
.au-plan__fine { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .5rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); }
.au-plan__fine .i { margin-top: .15rem; color: var(--electric); }
.au-plan--night { background: radial-gradient(70% 60% at 100% 0%, rgba(0, 85, 255, .45), rgba(0, 85, 255, 0) 70%), var(--night); box-shadow: var(--shadow-3), 0 0 0 1px rgba(255, 255, 255, .08); }
.au-plan--night::before { display: none; }
.au-plan--night .au-plan__head .i-box { background: rgba(143, 182, 255, .14); color: var(--sky); }
.au-plan--night .au-plan__head small { color: rgba(255, 255, 255, .6); }
.au-plan--night .au-plan__head h3 { color: #fff; }
.au-plan--night .price__from { color: rgba(255, 255, 255, .72); }
.au-plan--night .au-plan__note { color: rgba(255, 255, 255, .74); }
.au-plan--night .au-plan__fine { color: rgba(255, 255, 255, .64); }
.au-plan--night .au-plan__fine .i { color: var(--sky); }
.au-plan--night .ticks li::before { background: rgba(143, 182, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB6FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }
.au-plans__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }

/* ================= FORMULARIO ================= */
.s-form__panel .select { background-color: #fff; color: var(--ink); }
.select[aria-invalid="true"] { border-color: #D92D20; box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); }
#formulario .stack > .s-mini-steps { margin-top: 1.6rem; }
#formulario .btn--wa { justify-self: start; }
@media (max-width: 559px) { #formulario .btn--wa { width: 100%; } }

/* ================= Movimiento reducido ================= */
@media (prefers-reduced-motion: reduce) {
  .au-phone { transform: none; }
}

/* =====================================================================
   v3 — alto impacto: galería horizontal de las 8 etapas con dial,
   banda cinética, comparativa y planes sobre bandas oscuras
   ===================================================================== */

/* ---------- Frase: tipografía de display, como el manifiesto de la portada ---------- */
.page-auto .s-statement { font-family: var(--font-display); font-weight: 600; font-stretch: 100%; letter-spacing: -.02em; word-spacing: .07em; font-size: clamp(2rem, .9rem + 3.9vw, 4.6rem); line-height: 1.02; max-width: 21ch; }

/* ---------- Galería de las 8 etapas ---------- */
/* .section + .hg__pin duplicaban el aire vertical: el padding vive solo en .hg__pin */
.au-hg.section { padding-block: 0; }
.au-hg .hg__pin { position: relative; isolation: isolate; }
.au-hg .hg__head { align-items: center; }
.au-hg__title { display: grid; gap: .8rem; flex: 1 1 32rem; min-width: 0; }
.au-hg__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: 600; color: var(--sky); }
.au-hg__title .t-d2 { max-width: 22ch; }
.au-hg__title .hg__progress { margin-top: .35rem; }

/* Dial: el círculo de automatización se llena conforme avanza la galería */
.au-dial { position: relative; flex: none; width: clamp(118px, 10vw, 150px); aspect-ratio: 1; container-type: inline-size; }
.au-dial::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .45), rgba(0, 85, 255, 0)); pointer-events: none; }
.au-dial__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-112.5deg); }
.au-dial__track { fill: rgba(6, 20, 51, .7); stroke: rgba(143, 182, 255, .18); stroke-width: 1.2; }
.au-dial__fill { fill: none; stroke: url(#au-dial-grad); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 87.5; transition: stroke-dashoffset .6s var(--ease-out); filter: drop-shadow(0 0 2px rgba(0, 85, 255, .9)); }
.au-dial__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.au-dial__nodes li { --ang: calc(var(--i) * 45deg - 90deg); position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #0D2150; box-shadow: inset 0 0 0 1.5px rgba(143, 182, 255, .5); transform: rotate(var(--ang)) translate(44cqi) rotate(calc(var(--ang) * -1)) scale(var(--s, 1)); transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.au-dial__nodes li.is-done { background: var(--sky); box-shadow: none; }
.au-dial__nodes li.is-on { --s: 1.5; background: #fff; box-shadow: 0 0 0 3px rgba(0, 85, 255, .55), 0 0 16px rgba(143, 182, 255, .9); }
.au-dial__center { position: absolute; inset: 16%; display: grid; place-content: center; justify-items: center; gap: .1rem; text-align: center; }
.au-dial__center b { font-family: var(--font-display); font-size: 25cqi; font-weight: 600; letter-spacing: -.03em; line-height: .9; font-variant-numeric: tabular-nums; color: #fff; }
.au-dial__center span { font-size: max(.68rem, 9.2cqi); font-weight: 600; line-height: 1.15; color: rgba(255, 255, 255, .78); }
@media (max-width: 759px) { .au-dial { display: none; } }

/* Tarjetas de etapa */
.au-step { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); border-radius: 28px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.au-step::before { content: ""; position: absolute; z-index: -1; width: 22rem; height: 22rem; left: -9rem; top: -11rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .42), rgba(0, 85, 255, 0)); pointer-events: none; }
.hg__track > .au-step { width: min(84vw, 460px); }
.au-step__top { display: flex; align-items: center; gap: .85rem; margin-bottom: .3rem; }
.au-step__ic { flex: none; width: 3rem; height: 3rem; border-radius: 16px; display: grid; place-items: center; background: var(--electric); color: #fff; box-shadow: 0 0 0 6px rgba(0, 85, 255, .18), 0 0 30px rgba(0, 85, 255, .55); }
.au-step__ic .i { width: 1.3rem; height: 1.3rem; }
.au-step__kicker { font-size: var(--fs-xs); font-weight: 640; color: var(--sky); }
.au-step__title { font-family: var(--font-display); word-spacing: .07em; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 600; letter-spacing: -.012em; line-height: 1.05; color: #fff; }
.au-step__sub { font-weight: 580; color: var(--sky); }
.au-step__text { margin-top: .3rem; line-height: 1.58; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
.au-step__text a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(143, 182, 255, .7); }
.au-step__text a:hover { text-decoration-color: #fff; }
.au-step__meta { display: grid; gap: .7rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.au-step__meta dt { font-size: var(--fs-xs); font-weight: 600; color: rgba(255, 255, 255, .6); }
.au-step__meta dd { margin: .15rem 0 0; font-size: var(--fs-small); line-height: 1.45; color: #fff; }
.au-step--clinic .au-step__meta div:last-child dd { color: var(--mint); font-weight: 620; }
.au-step--end { justify-content: flex-end; gap: 1.1rem; background: radial-gradient(90% 70% at 50% 25%, rgba(0, 85, 255, .5), rgba(0, 85, 255, 0) 70%), rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .3); }
.au-step--end::before { display: none; }
.hg__track > .au-step--end { width: min(84vw, 400px); }
.au-step--end .t-h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); max-width: 14ch; }
.au-step--end .btn { align-self: flex-start; }
.au-step--end .link { align-self: flex-start; }
.au-step__obj { position: absolute; z-index: -1; left: 50%; top: 0; width: 112%; height: auto; transform: translate(-50%, -14%); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }
@media (max-width: 559px) { .au-step--end .btn { width: 100%; } }
@media (min-width: 1024px) {
  .au-hg.is-pinned .hg__pin { height: 100svh; min-height: 0; justify-content: flex-start; padding-block: calc(var(--header-h) + 1.25rem) 1.75rem; }
  .au-hg.is-pinned .hg__head { margin-bottom: 1.25rem; flex-wrap: nowrap; }
  .au-hg.is-pinned .au-hg__title .t-d2 { font-size: clamp(2rem, .9rem + 2.2vw, 3.4rem); max-width: 28ch; }
  .au-hg.is-pinned .hg__viewport { flex: 1; min-height: 0; display: flex; }
  .au-hg.is-pinned .hg__track { height: 100%; padding-block: .25rem .5rem; }
  .au-hg.is-pinned .au-step { height: 100%; width: clamp(400px, 33vw, 480px); }
  .au-hg.is-pinned .au-step--end { width: clamp(340px, 27vw, 420px); }
}
@media (min-width: 1024px) and (max-height: 820px) { .au-hg.is-pinned .au-hg__lead { display: none; } }
@media (min-width: 1024px) and (max-height: 760px) {
  .au-hg.is-pinned .au-hg__eyebrow { display: none; }
  .au-hg.is-pinned .au-dial { width: 100px; }
  .au-hg.is-pinned .au-step { gap: .4rem; padding: 1.2rem 1.4rem; }
  .au-hg.is-pinned .au-step__top { margin-bottom: 0; }
  .au-hg.is-pinned .au-step__ic { width: 2.5rem; height: 2.5rem; border-radius: 13px; }
  .au-hg.is-pinned .au-step__title { font-size: 1.6rem; }
  .au-hg.is-pinned .au-step__text { font-size: var(--fs-small); line-height: 1.5; }
  .au-hg.is-pinned .au-step__meta { gap: .45rem; padding-top: .7rem; }
}

/* ---------- Recordatorios: hoja clara con retícula de puntos ---------- */
.au-remind .wrap { position: relative; z-index: 1; }

/* ---------- Banda cinética + comparativa (un solo tramo oscuro) ---------- */
.au-band { background: var(--night); z-index: 1; }
.au-compare { overflow: clip; background: radial-gradient(70% 80% at 18% 55%, #0A1A44 0%, var(--night) 62%), var(--night); }
.au-compare .au-vs { --line: rgba(11, 29, 59, .12); color: var(--ink); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12); }

/* ---------- Planes: el clímax de la página ---------- */
.au-plans { overflow: clip; }
.au-plans .section-head .t-d2 { max-width: 16ch; }
.au-plans .au-plan { color: rgba(255, 255, 255, .82); background: radial-gradient(70% 60% at 100% 0%, rgba(0, 85, 255, .35), rgba(0, 85, 255, 0) 70%), linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 100px -50px rgba(0, 0, 0, .8); --line: rgba(255, 255, 255, .12); transition: transform .25s linear; }
.au-plans .au-plan::before { display: none; }
.au-plans .au-plan--star { background: radial-gradient(80% 60% at 100% 0%, rgba(0, 85, 255, .6), rgba(0, 85, 255, 0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(62, 207, 191, .14), rgba(62, 207, 191, 0) 70%), linear-gradient(165deg, #0D2152, #061232 70%); box-shadow: inset 0 0 0 1.5px rgba(143, 182, 255, .55), 0 60px 120px -40px rgba(0, 85, 255, .55); }
.au-plans .au-plan__head .i-box { background: rgba(143, 182, 255, .14); color: var(--sky); }
.au-plans .au-plan--star .au-plan__head .i-box { background: var(--electric); color: #fff; box-shadow: 0 0 24px rgba(0, 85, 255, .6); }
.au-plans .au-plan__head small { color: rgba(255, 255, 255, .6); }
.au-plans .au-plan__head h3 { color: #fff; }
.au-plans .au-plan .price__num { font-size: clamp(3.4rem, 2.4rem + 3.6vw, 5.6rem); color: #fff; background: linear-gradient(180deg, #fff 35%, #9CC0FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .04em; }
.au-plans .au-plan .price__from { color: rgba(255, 255, 255, .72); }
.au-plans .au-plan .price__note { color: rgba(255, 255, 255, .76); }
.au-plans .au-plan__note { color: rgba(255, 255, 255, .74); }
.au-plans .au-plan__fine { color: rgba(255, 255, 255, .64); }
.au-plans .au-plan__fine .i { color: var(--sky); }
.au-plans .au-plan .link { color: #fff; text-decoration: underline; text-decoration-color: rgba(143, 182, 255, .6); text-underline-offset: 3px; }
.au-plans .au-plan :focus-visible { outline-color: #fff; }
.au-plan__obj { position: absolute; z-index: -1; right: -6%; top: -3%; width: 46%; max-width: 270px; height: auto; pointer-events: none; opacity: .92; -webkit-mask-image: radial-gradient(closest-side, #000 46%, transparent 100%); mask-image: radial-gradient(closest-side, #000 46%, transparent 100%); }
@media (max-width: 559px) { .au-plan__obj { width: 44%; opacity: .5; } }

/* ---------- Celular: menos altura ---------- */
@media (max-width: 759px) {
  .page-auto .s-statement { font-size: clamp(1.75rem, 1rem + 3.4vw, 2.2rem); }
  .au-phone { --pw: min(228px, 60vw); }
}

@media (prefers-reduced-motion: reduce) {
  .au-plans .au-plan { transition: none; }
}

/* =====================================================================
   v3 · revisión: preguntas en dos columnas, planes y dolores en carrusel
   en celular, inicio que cabe en pantallas bajas y contraste de textos pequeños
   ===================================================================== */

/* ---------- Preguntas: título fijo a la izquierda y respuestas a la derecha (como la portada) ---------- */
.au-faq .t-d2 { max-width: 11ch; }
@media (min-width: 1024px) {
  .au-faq .faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: start; }
  .au-faq .section-head { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
  .au-faq .faq { max-width: none; }
}

/* ---------- Celular: dolores y planes se deslizan de lado (página más corta, nada se pierde) ---------- */
.au-plans__hint { display: none; }
@media (max-width: 759px) {
  .au-problem > div { min-width: 0; }
  .au-pains { grid-auto-flow: column; grid-auto-columns: min(72%, 16rem); gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding: .35rem var(--gutter) .75rem; scroll-padding-inline: var(--gutter); }
  .au-pains::-webkit-scrollbar { display: none; }
  .au-pains li, .au-pains li:last-child { scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: .85rem; padding: 1.1rem; border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
  .au-pains p { font-size: 1rem; }

  .au-plans__grid { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding: .5rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter); }
  .au-plans__grid::-webkit-scrollbar { display: none; }
  .au-plans__grid > .au-plan { flex: 0 0 min(88%, 24rem); scroll-snap-align: start; }
  .au-plans__hint { display: block; margin-top: .25rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, .62); }
  .au-plans__foot { margin-top: 1.25rem; }
}

/* ---------- Escritorio con poca altura (1366 × 700): el botón principal del inicio cabe sin desplazarse ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  .au-hero.s-hero { padding-top: calc(var(--header-h) + 1rem); }
  .au-hero .s-hero__top { margin-bottom: .85rem; }
  .au-hero .au-kicker { margin-bottom: .45rem; font-size: 1.05rem; }
  .au-hero .au-h1 { font-size: clamp(2.2rem, 7.2cqi, 3.6rem); }
  .au-hero .s-hero__lead { margin-top: 1rem; font-size: 1.04rem; line-height: 1.5; }
  .au-hero .s-hero__price { margin-top: 1.1rem; }
  .au-hero .s-hero__price .price__num { font-size: 2.5rem; }
  .au-hero .s-hero__ctas { margin-top: 1.2rem; }
  .au-hero .au-stats { margin-top: 1.3rem; }
}

/* ---------- Contraste de textos pequeños sobre fondos claros ---------- */
.au-timeline__when, .au-opt__tag, .au-opt dt, .au-which__hint { color: var(--ink-2); }
@media (min-width: 760px) { .au-vs__h--yes em { background: #fff; color: var(--electric-600, var(--electric)); } }