:root{color-scheme:light;--crema:#fff9f3;--tinta:#2a1a1f;--soft:#735e66;--fram:#b42350;--linea:#ead9c8;font-family:'Segoe UI',system-ui,sans-serif;color:var(--tinta);background:var(--crema)}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;display:flex;flex-direction:column}a{color:var(--fram);text-underline-offset:4px}header{max-width:1200px;width:100%;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}header>a:last-child{font-size:14px}.marca{display:flex;align-items:center;gap:12px;color:var(--tinta);font-weight:750;font-size:26px;text-decoration:none}main{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:90px;align-items:center;max-width:1120px;width:100%;padding:54px 40px 100px;margin:auto}.ceja{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--fram)}h1{font-size:clamp(32px,3.6vw,52px);line-height:1.12;letter-spacing:-.045em;margin:22px 0}p{color:var(--soft);line-height:1.65;margin:0}.intro p{max-width:34ch;font-size:17px}.detalle{margin-top:42px;border-left:3px solid #e8567a;padding:8px 18px;color:var(--soft);font-size:14px}.tarjeta{background:#fff;padding:38px;border:1px solid var(--linea);border-radius:20px;box-shadow:0 14px 50px #8b45500a}h2{font-size:25px;letter-spacing:-.03em;margin:18px 0 6px}.tarjeta p{font-size:14px}form{margin-top:24px}label{display:block;font-size:14px;font-weight:600;margin:16px 0 8px}input,select{display:block;font:inherit;width:100%;min-height:46px;border:1px solid #d6c4cd;border-radius:8px;background:#fff;padding:10px 12px}input:focus,select:focus{outline:2px solid #e8567a;outline-offset:2px}button{font:inherit;width:100%;border:0;border-radius:8px;background:var(--fram);color:white;font-weight:650;min-height:48px;margin-top:24px;cursor:pointer}button:hover{background:#941b40}button:disabled{opacity:.6;cursor:wait}#estado{font-size:14px;color:var(--fram);line-height:1.5;margin-top:18px}#estado:empty{display:none}#salir{display:inline-block;font-size:14px;margin-top:20px}footer{padding:24px;text-align:center;font-size:12px;color:var(--soft)}
@media(max-width:700px){header{padding:22px 24px}.marca{font-size:23px}header>a:last-child{font-size:12px}main{display:block;padding:26px 24px 36px;max-width:480px}.intro{display:none}.tarjeta{padding:28px 24px}h2{font-size:24px}footer{margin-top:auto}}
