/* Reserva directa: composición del hotel con pago alojado en Mercado Pago. */
#pagos{display:block;width:100%;padding:88px max(28px,calc((100vw - 1200px)/2));background:#f4ecdc;color:#1a110a;border-block:1px solid #c9b893}
#pagos .payment-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:end;margin-bottom:36px}
#pagos h2{font-size:clamp(36px,4.1vw,60px);line-height:1.08;letter-spacing:-.03em;margin:0;font-weight:500}
#pagos h2>span,#pagos h2>em{display:block}
#pagos h2>em{color:#b03f22;font-weight:500}
#pagos .payment-heading>p{font-size:16px;line-height:1.75;color:#5b4432;max-width:47ch;margin:0}
#pagos .direct-rate{display:flex;align-items:center;gap:36px;background:#1a110a;color:#f4ecdc;padding:27px 34px;margin-bottom:44px;border-radius:12px}
#pagos .direct-rate strong{font-size:clamp(22px,2.3vw,30px);line-height:1.2;color:#d9a441;max-width:250px;flex:0 0 250px;font-weight:600}
#pagos .direct-rate p{font-size:14px;line-height:1.65;margin:0;max-width:64ch;color:#f4ecdc}
#pagos .payment-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:start}
#pagos .payment-journey h3{font-size:clamp(26px,2.8vw,36px);line-height:1.2;letter-spacing:-.025em;font-weight:500;margin:0 0 30px}
#pagos .payment-steps{list-style:none;counter-reset:payment;margin:0;padding:0}
#pagos .payment-steps li{position:relative;counter-increment:payment;padding:0 0 24px 50px;margin:0 0 22px;border-bottom:1px solid #c9b893}
#pagos .payment-steps li:last-child{margin-bottom:0;border:0;padding-bottom:0}
#pagos .payment-steps li:before{content:counter(payment);position:absolute;left:0;top:0;border:1px solid #b06e3a;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:13px;color:#8e3a1e}
#pagos .payment-steps strong{font-size:17px;font-weight:600}
#pagos .payment-steps p{font-size:14px;line-height:1.7;color:#5b4432;margin:7px 0 0;max-width:44ch}
#pagos .mp-panel{min-width:0;background:white;color:#253044;border:1px solid #dce4e8;border-radius:12px;overflow:hidden;font-family:Inter,Arial,sans-serif}
#pagos .mp-panel header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:23px 28px;border-bottom:1px solid #e8edf0}
#pagos .mp-panel h3{margin:0;line-height:1}
#pagos .mp-panel h3 img{display:block;width:145px;height:58px;object-fit:contain}
#pagos .mp-active{font-size:12px;font-weight:600;color:#246145;background:#eaf5ef;padding:7px 11px;border-radius:5px}
#pagos .mp-body{padding:28px}
#pagos .mp-body h4{font-family:inherit;font-size:19px;font-weight:600;line-height:1.4;margin:0 0 25px}
#pagos .mp-body dl{margin:0}
#pagos .mp-body dl>div{display:flex;justify-content:space-between;gap:24px;padding:15px 0;border-bottom:1px solid #e8edf0;font-size:13px;line-height:1.5}
#pagos .mp-body dt{color:#596579}
#pagos .mp-body dd{margin:0;text-align:right;font-weight:600}
#pagos .mp-body dl>div:last-child dd{color:#00769e}
#pagos .mp-methods{font-size:12px;line-height:1.7;color:#596579;margin:23px 0}
#pagos .mp-action{display:flex;align-items:center;justify-content:center;gap:15px;background:#0079a5;color:white;border-radius:6px;padding:17px 15px;font-size:14px;font-weight:600;text-decoration:none;min-height:52px}
#pagos .mp-action:hover{background:#006184}
#pagos .mp-action:focus-visible{outline:3px solid #1a110a;outline-offset:4px}
#pagos .mp-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
#pagos .mp-help{font-size:12px;line-height:1.5;text-align:center;color:#596579;margin:13px 0 0}
#pagos .mp-panel footer{display:flex;justify-content:center;align-items:center;gap:10px;padding:18px 24px;background:#f7f9fa;font-size:11px;line-height:1.6;border-top:1px solid #e8edf0;color:#596579}
#pagos .mp-panel footer svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.5}
@media(max-width:800px){#pagos{padding:55px 24px}#pagos .payment-heading,#pagos .payment-layout{grid-template-columns:1fr;gap:28px}#pagos .payment-heading{margin-bottom:28px}#pagos .payment-heading>p{max-width:unset}#pagos .direct-rate{align-items:flex-start;flex-direction:column;gap:12px;padding:24px;margin-bottom:32px}#pagos .direct-rate strong{flex:auto;max-width:unset}#pagos .payment-steps p{max-width:unset}#pagos .payment-layout{gap:36px}}
@media(max-width:380px){#pagos{padding-inline:18px}#pagos .mp-panel header,#pagos .mp-body{padding:22px 18px}#pagos .mp-panel h3 img{width:125px;height:50px}#pagos .mp-body dl>div{gap:12px}}
/* Phone walkthrough: familiar payment journey, clearly marked as a demo. */
#pagos .payment-journey h3{margin-bottom:25px}
#pagos .payment-demo{max-width:440px;margin:0 auto}
#pagos .demo-phone{position:relative;width:278px;height:495px;margin:0 auto;border:7px solid #201b17;border-radius:38px;background:#fff;box-shadow:0 20px 35px #38281c24;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#253044}
#pagos .phone-island{position:absolute;z-index:4;top:7px;left:50%;transform:translateX(-50%);width:88px;height:22px;border-radius:20px;background:#201b17}
#pagos .phone-status{position:relative;z-index:3;display:flex;justify-content:space-between;padding:12px 19px 14px;font-size:10px;font-weight:600;background:#fff}
#pagos .phone-screen{position:absolute;inset:40px 0 0;overflow:hidden}
#pagos .phone-scene{position:absolute;inset:0;opacity:0;transform:translateX(14px);pointer-events:none;transition:opacity 250ms var(--ease),transform 250ms var(--ease);background:#fff}
#pagos .phone-scene.is-current{opacity:1;transform:translateX(0)}
#pagos .phone-home{position:absolute;z-index:4;bottom:7px;left:50%;transform:translateX(-50%);width:90px;height:4px;border-radius:4px;background:#201b17}
#pagos .chat-header{display:flex;align-items:center;gap:10px;padding:13px;background:#f6f8f5;border-bottom:1px solid #dae2da}
#pagos .chat-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#e5dac5;color:#5b4432;font-size:10px;font-weight:700}
#pagos .chat-header strong{display:block;font-size:12px}
#pagos .chat-header small{display:block;font-size:10px;color:#596658;margin-top:4px}
#pagos .chat-content{height:100%;padding:15px 12px;background:#ece9df}
#pagos .chat-date{display:table;margin:0 auto 20px;padding:5px 10px;border-radius:5px;background:#fff9;font-size:10px;color:#4a554b}
#pagos .chat-bubble{font-size:12px;line-height:1.6;border-radius:8px;padding:12px;max-width:215px;background:#fff;opacity:0;transform:translateY(8px)}
#pagos .chat-bubble small{display:block;text-align:right;font-size:9px;color:#5b695c;margin-top:7px}
#pagos .chat-ticks{color:#0079a5}
#pagos .chat-link{padding:10px;margin-top:10px;background:#f1f6f8;border-radius:5px}
#pagos .chat-link img{display:block;width:95px;height:38px;object-fit:contain;margin-bottom:6px}
#pagos .chat-link>span{display:block;font-size:10px;font-weight:600;color:#00769e}
#pagos .chat-bubble.outgoing{margin:13px 0 0 auto;background:#d9f3cf;max-width:170px}
#pagos .demo-tap{position:absolute;bottom:31px;left:0;right:0;text-align:center;font-size:10px;color:#4c594d}
#pagos .phone-mp-header{padding:14px 18px;border-bottom:1px solid #e2edf2}
#pagos .phone-mp-header img{width:112px;height:44px;object-fit:contain}
#pagos .phone-checkout{padding:21px 16px}
#pagos .phone-checkout>small{font-size:10px;color:#596579}
#pagos .phone-checkout h4{font-family:inherit;font-size:18px;line-height:1.3;letter-spacing:-.02em;margin:10px 0 12px}
#pagos .demo-rate{font-size:10px;color:#596579;margin-bottom:16px}
#pagos .demo-method{display:flex;align-items:center;gap:9px;padding:13px 9px;border:1px solid #dde7ec;border-radius:6px;margin-bottom:8px;font-size:10px}
#pagos .demo-method svg{width:19px;height:19px;fill:none;stroke:#0079a5;stroke-width:1.5;flex:none}
#pagos .demo-method i{margin-left:auto;width:12px;height:12px;border:1px solid #9caeb5;border-radius:50%;flex:none}
#pagos .demo-method.selected{border-color:#0079a5;background:#f1f9fc}
#pagos .demo-method.selected i{border:4px solid #0079a5}
#pagos .demo-pay{padding:12px;background:#0079a5;color:white;text-align:center;font-size:12px;font-weight:600;border-radius:6px;margin-top:17px}
#pagos .phone-checkout>p{font-size:9px;text-align:center;color:#596579;margin-top:13px}
#pagos .demo-success{height:100%;padding:48px 22px 25px;text-align:center;background:#f4faf6}
#pagos .success-seal{width:74px;height:74px;display:grid;place-items:center;margin:0 auto 25px;border-radius:50%;background:#2b7650}
#pagos .success-seal svg{width:47px;height:47px;fill:none;stroke:white;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
#pagos .success-seal path{stroke-dasharray:40;stroke-dashoffset:40}
#pagos .demo-success h4{font-family:inherit;font-size:22px;font-weight:600;margin:0 0 15px;line-height:1.25;color:#24543d}
#pagos .demo-success>p{font-size:12px;line-height:1.8;color:#3c614d;margin:0}
#pagos .demo-hotel{margin-top:30px;padding-top:20px;border-top:1px solid #ccdfd0}
#pagos .demo-hotel img{display:block;width:135px;height:40px;object-fit:contain;margin:0 auto 10px}
#pagos .demo-hotel span{font-size:11px;color:#3c614d}
#pagos .demo-controls{display:flex;gap:7px;justify-content:center;margin-top:23px}
#pagos .demo-step{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;background:transparent;color:#5b4432;border:0;border-bottom:2px solid #c9b893;padding:8px 5px;font-size:11px;cursor:pointer;flex:1}
#pagos .demo-step>span:first-child{font-size:10px}
#pagos .demo-step[aria-pressed=true]{color:#8e3a1e;border-bottom-color:#b03f22;font-weight:700}
#pagos .demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:8px;font-size:10px;color:#5b4432}
#pagos .demo-play{background:transparent;color:#8e3a1e;font-size:11px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:8px;cursor:pointer}
#pagos .demo-step:focus-visible,#pagos .demo-play:focus-visible{outline:2px solid #8e3a1e;outline-offset:3px}
#pagos .is-current .chat-bubble{animation:payment-message 400ms var(--ease) both}
#pagos .is-current .chat-bubble.outgoing{animation-delay:1200ms}
#pagos .is-current .success-seal{animation:payment-seal 400ms var(--ease) both}
#pagos .is-current .success-seal path{animation:payment-check 500ms var(--ease) 200ms both}
#pagos .payment-demo:not(.is-running) .chat-bubble,#pagos .payment-demo:not(.is-running) .success-seal,#pagos .payment-demo:not(.is-running) .success-seal path{animation-play-state:paused}
@keyframes payment-message{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes payment-seal{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes payment-check{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){#pagos .phone-scene{transform:none;transition:opacity 150ms ease}#pagos .chat-bubble{opacity:1;transform:none;animation:none!important}#pagos .success-seal{animation:none!important}#pagos .success-seal path{animation:none!important;stroke-dashoffset:0}}
@media(max-width:800px){#pagos .payment-journey h3{text-align:center}#pagos .payment-demo{max-width:390px}}
#pagos .payment-demo.is-manual .chat-bubble{animation:none;opacity:1;transform:none}
#pagos .payment-demo.is-manual .success-seal{animation:none;opacity:1;transform:none}
#pagos .payment-demo.is-manual .success-seal path{animation:none;stroke-dashoffset:0}
#pagos .demo-phone{height:530px}
#pagos .phone-checkout{padding:18px 16px}
#pagos .phone-checkout h4{font-size:17px}
#pagos .demo-method{padding:11px 9px}
#pagos #como-pagar{scroll-margin-top:100px}