:root { --gp-pink:#F0116C; --gp-accent:#E40D81; --gp-soft:#F79FAD; --gp-ink:#25252B; --gp-muted:#696971; --gp-line:#D0D0D0; --gp-bg:#FAFAFB; --gp-white:#FFFFFF; }
* { box-sizing:border-box; } html { background:var(--gp-bg); } body { min-width:320px; margin:0; color:var(--gp-ink); background:var(--gp-bg); font-family:Inter,system-ui,sans-serif; line-height:1.5; }
button,input,select { font:inherit; } button { cursor:pointer; } [hidden] { display:none !important; }
.graduacion-skip { position:fixed; z-index:10; top:-5rem; left:1rem; padding:.7rem 1rem; color:#fff; background:var(--gp-ink); } .graduacion-skip:focus { top:1rem; }
.graduacion-header { border-bottom:1px solid var(--gp-line); background:var(--gp-white); } .graduacion-header__inner { display:flex; width:min(calc(100% - 32px),900px); min-height:76px; margin:auto; align-items:center; gap:12px; } .graduacion-header img { width:38px; height:43px; object-fit:contain; } .graduacion-header p { display:grid; gap:1px; margin:0; font-size:13px; line-height:1.25; } .graduacion-header span { color:var(--gp-muted); font-size:12px; }
.graduacion-main { width:min(calc(100% - 32px),900px); margin:0 auto; padding:40px 0 56px; } .graduacion-intro { max-width:680px; margin-bottom:28px; } .graduacion-kicker { margin:0 0 12px; color:var(--gp-accent); font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.55; } h1 { max-width:650px; margin:0 0 14px; font-size:clamp(30px,5vw,46px); letter-spacing:-.045em; line-height:1.1; } .graduacion-intro>p:not(.graduacion-kicker) { max-width:630px; margin:0; color:var(--gp-muted); } .graduacion-intro__note { margin-top:9px !important; font-size:13px; }
.graduacion-form-shell { padding:22px; background:var(--gp-white); border:1px solid var(--gp-line); border-radius:8px; } .graduacion-loading { margin:0; color:var(--gp-muted); }
.graduacion-form { display:grid; gap:20px; } .graduacion-form__head h2,.graduacion-result h2 { margin:0 0 7px; font-size:23px; letter-spacing:-.025em; } .graduacion-form__head p { margin:0; color:var(--gp-muted); font-size:14px; }
.graduacion-fields { display:grid; grid-template-columns:1fr; gap:16px; } .graduacion-field { display:grid; gap:6px; min-width:0; margin:0; padding:0; border:0; color:var(--gp-ink); font-size:14px; font-weight:600; } .graduacion-field--wide { grid-column:1 / -1; } .graduacion-field legend { padding:0; } .graduacion-field small { color:var(--gp-muted); font-size:12px; font-weight:400; } .graduacion-field input:not([type=radio]),.graduacion-field select { width:100%; min-height:46px; padding:10px 12px; color:var(--gp-ink); border:1px solid var(--gp-line); border-radius:5px; background:#fff; } .graduacion-field input:focus,.graduacion-field select:focus { outline:3px solid color-mix(in srgb,var(--gp-soft) 45%,transparent); border-color:var(--gp-pink); } .graduacion-field [aria-invalid=true] { border-color:#B4233E; } .graduacion-error { min-height:18px; margin:0; color:#B4233E; font-size:12px; font-weight:500; }
.graduacion-choice-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; } .graduacion-choice-grid--breakfast { grid-template-columns:1fr; } .graduacion-choice { position:relative; display:block; cursor:pointer; } .graduacion-choice input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; } .graduacion-choice span { display:grid; min-height:46px; align-items:center; justify-items:center; padding:9px; border:1px solid var(--gp-line); border-radius:5px; background:#fff; transition:border-color .15s,background .15s; } .graduacion-choice--breakfast span { justify-items:start; min-height:68px; } .graduacion-choice b,.graduacion-choice small { display:block; } .graduacion-choice small { margin-top:3px; } .graduacion-choice input:checked + span { border-color:var(--gp-pink); background:#FFF3F7; color:#A3094B; box-shadow:inset 0 0 0 1px var(--gp-pink); } .graduacion-choice input:focus-visible + span { outline:3px solid var(--gp-soft); outline-offset:2px; }
.graduacion-submit,.graduacion-action { min-height:48px; border:1px solid var(--gp-pink); border-radius:5px; padding:11px 18px; color:#fff; background:var(--gp-pink); font-weight:700; } .graduacion-submit:hover,.graduacion-action:hover { background:var(--gp-accent); border-color:var(--gp-accent); } .graduacion-submit:disabled,.graduacion-action:disabled { cursor:wait; opacity:.7; } .graduacion-action--secondary { margin-top:10px; color:var(--gp-ink); border-color:var(--gp-line); background:#fff; } .graduacion-action--secondary:hover { color:var(--gp-accent); background:#fff; border-color:var(--gp-accent); } .graduacion-status { min-height:20px; margin:0; color:#B4233E; font-size:13px; }
.graduacion-result { max-width:590px; padding:14px 0 4px; } .graduacion-result__check { display:grid; width:34px; height:34px; margin-bottom:14px; place-items:center; color:#fff; border-radius:50%; background:#287554; font-weight:700; } .graduacion-result p { color:var(--gp-muted); } .graduacion-result__notice { padding:14px; color:var(--gp-ink) !important; border-left:3px solid var(--gp-pink); background:#FFF3F7; } .graduacion-footer { padding:22px 16px; color:var(--gp-muted); border-top:1px solid var(--gp-line); text-align:center; font-size:12px; }
@media (min-width:700px) { .graduacion-main { padding-top:58px; } .graduacion-form-shell { padding:34px; } .graduacion-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .graduacion-choice-grid--breakfast { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }