@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');
:root{--navy:#102c49;--orange:#e79b49;--ink:#17304c;--cream:#f8f6f2;--line:#e6e9eb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 90% 0%,#e8edf0,transparent 40%),var(--cream)}#app{width:min(100%,560px);min-height:100dvh;display:flex;flex-direction:column;position:relative;margin:auto;background:#fff;box-shadow:0 16px 80px #102c4912}.progress{height:4px;background:#edf0f1;position:sticky;top:0;z-index:5}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),#f3c587);width:0;transition:width .45s cubic-bezier(.2,.8,.2,1)}.logo{width:105px;max-height:76px;object-fit:contain;align-self:center;margin:20px auto 5px}#screen{width:100%;flex:1;padding:20px 26px 118px;animation:rise .35s ease both}@keyframes rise{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.hero{display:block;width:100%;height:235px;object-fit:cover;border-radius:19px;margin:0 0 25px;box-shadow:0 12px 26px #142f4820}.num{display:inline-flex;align-items:center;justify-content:center;background:#f6e9d8;color:#8e5d29;border-radius:99px;width:37px;height:37px;font-weight:700;font-size:15px}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(28px,6vw,37px);line-height:1.22;font-weight:600;letter-spacing:-.4px;margin:19px 0 15px}p{font-size:16px;line-height:1.65;color:#5b6773}.choices{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0}.choice{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:13px;color:var(--navy);font:600 16px 'DM Sans',Arial,sans-serif;cursor:pointer;text-align:left;transition:transform .18s,border-color .18s,box-shadow .18s}.choice:active{transform:scale(.985)}.choice img{width:100%;height:155px;object-fit:cover;border-radius:11px;margin-bottom:11px;display:block}.choice.selected{border-color:var(--orange);background:#fffbf5;box-shadow:0 0 0 3px #e79b4921}.choice.simple{padding:22px;text-align:center}.rating{padding:18px 16px;margin:13px 0;background:#fbfaf8;border:1px solid #ece8e1;border-radius:16px}.rating label{font-size:15px;font-weight:700;display:block;margin-bottom:11px}.stars{display:flex;gap:4px;justify-content:space-between}.star{border:0;background:none;font-size:clamp(33px,8vw,45px);color:#bdc4cc;cursor:pointer;padding:0 2px;transition:transform .18s,color .18s;line-height:1.2}.star.active{color:#eea74c}.star:active{transform:scale(1.25)}.field{width:100%;font:inherit;font-size:16px;padding:16px;border:1px solid #dfe3e6;border-radius:13px;outline:none;color:var(--navy);margin:10px 0 18px;background:#fff}.field:focus{border-color:var(--orange);box-shadow:0 0 0 3px #e79b4925}textarea.field{min-height:130px;resize:vertical}#screen>label{display:block;font-weight:600;font-size:14px;margin-top:15px}#screen label input[type=checkbox]{width:18px;height:18px;accent-color:var(--navy);vertical-align:middle;margin-right:6px}#controls{position:sticky;bottom:0;display:flex;gap:10px;padding:15px 26px max(18px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#ffffff 15%);z-index:4}#controls button{border:0;border-radius:13px;background:var(--navy);color:white;font:700 16px 'DM Sans',Arial,sans-serif;min-height:57px;cursor:pointer;transition:background .2s,transform .2s}#controls button:active{transform:scale(.98)}#controls button:hover{background:#1d466b}#back{width:58px;flex:none}#next{flex:1}#next:after{content:' →';color:var(--orange)}.muted{font-size:13px;color:#77818b}.hidden{display:none!important}.error{color:#b52222;font-size:14px;font-weight:600}.success{text-align:center;padding:10px 0 25px}.success h1{color:var(--navy)}.success:before{content:'✦';font-size:35px;color:var(--orange)}@media(max-width:390px){#screen{padding-left:19px;padding-right:19px}#controls{padding-left:19px;padding-right:19px}.hero{height:190px}.rating{padding:14px 11px}.star{font-size:32px}}@media(min-width:700px){#app{margin:32px auto;min-height:calc(100dvh - 64px);border-radius:24px;overflow:clip}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* Grupo Cielo — edición blanco elegante, optimizada para móviles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{color-scheme:light;--navy:#242b35;--orange:#c88b49;--ink:#222832;--cream:#f6f6f5;--line:#e8e6e2}
html,body{background:#f6f6f5;color:var(--ink)}
body{font-family:'DM Sans',Arial,sans-serif}
#app{background:#fff;box-shadow:0 15px 60px #19283b0d;border:1px solid #eae8e4}
.logo{width:116px;max-height:90px;margin:22px auto 18px}
#screen{padding:20px 24px 124px}
#screen h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(32px,8vw,44px);line-height:1.12;font-weight:400;letter-spacing:-.5px;color:#202733;text-align:center;margin:22px auto 25px;max-width:460px;text-wrap:balance}
#screen>.num{display:flex;margin:2px auto 14px;width:38px;height:38px;background:#f7eee3;color:#a7713a}
#screen>p{text-align:center;max-width:450px;margin:12px auto 22px;color:#666b71}
#screen>p.muted{text-align:center;font-size:13px}
.hero{height:230px;border-radius:16px;box-shadow:none;margin-bottom:24px}
.choices{margin:24px 0;gap:14px}
.choice{border:1px solid #e6e3df;border-radius:17px;background:#fff;color:#272d35;font:600 15px 'DM Sans',Arial,sans-serif;padding:14px;text-align:center;box-shadow:0 4px 16px #11182708}
.choice img{height:190px;border-radius:12px;margin-bottom:13px}
.choice.selected{border-color:#c88b49;background:#fffaf4;box-shadow:0 0 0 2px #c88b492b}
.choice.simple{padding:22px}
.rating{background:#fbfaf8;border:1px solid #eae6e0;border-radius:16px;padding:19px 15px;margin:14px 0}
.rating label{text-align:center;color:#34373c;font-size:16px;margin-bottom:14px}
.stars{justify-content:center;gap:clamp(6px,3vw,16px)}
.star{color:#c6c7c8;font-size:clamp(30px,8vw,43px)}.star.active{color:#d9a059}
.field{border-radius:12px;border:1px solid #e2dfda;background:#fff;color:#252b32}
#screen>label{color:#464a50}
#controls{background:linear-gradient(transparent,#fff 17%,#fff 100%);padding:15px 24px max(18px,env(safe-area-inset-bottom))}
#controls button{border-radius:14px;background:#252b34;color:#fff;min-height:56px;box-shadow:none}
#controls button:hover{background:#39414d}
#back{background:#f0efed!important;color:#353a40!important}
#next:after{color:#e9b778}
.progress{background:#eeece9}.progress span{background:linear-gradient(90deg,#ba8248,#e4b77b)}
.success h1{color:#242b35}.success:before{color:#c88b49}
@media(max-width:390px){#screen{padding-left:18px;padding-right:18px}#controls{padding-left:18px;padding-right:18px}.hero{height:195px}.choice img{height:165px}}
@media(min-width:700px){#app{margin:28px auto;min-height:calc(100dvh - 56px);border-radius:22px;overflow:clip}}