:root { color-scheme: light; --black:#0e0e0e; --green:#98c93a; --green-dark:#4f7a0f; --green-wash:#f2f8e6; --ink:#121510; --ink-soft:#5e6558; --line:#dce3d2; --danger:#b33f2e; }
* { box-sizing: border-box; }
body { position:relative; margin:0; min-height:100vh; overflow-x:hidden; padding:56px 16px; background:#fbfcff; color:var(--ink); font-family:Inter,-apple-system,"Segoe UI",sans-serif; }
body::before,body::after { content:""; position:fixed; z-index:0; width:260px; height:52px; border-radius:999px; background:linear-gradient(90deg,#78d329,var(--green)); transform:rotate(-45deg); pointer-events:none; box-shadow:74px 0 0 #87dd34,148px 0 0 #98df42; opacity:.96; }
body::before { top:14px; right:-108px; }
body::after { bottom:28px; left:-135px; }
.escena { position:relative; z-index:1; display:flex; align-items:flex-start; width:min(940px,100%); min-height:calc(100vh - 112px); margin:0 auto; padding-left:72px; }
.escena::before,.escena::after { content:""; position:fixed; z-index:0; width:112px; height:236px; background-image:radial-gradient(circle,var(--green) 3px,transparent 3.5px); background-size:19px 19px; opacity:.46; pointer-events:none; }
.escena::before { top:88px; right:12px; }
.escena::after { right:20px; bottom:18px; }
.tarjeta { position:relative; z-index:2; width:100%; max-width:520px; overflow:hidden; background:#fff; border:1px solid #e4e9df; border-radius:20px; box-shadow:0 26px 70px rgba(27,42,10,.14),0 8px 24px rgba(0,0,0,.06); }
.mascota-fondo { position:absolute; z-index:1; top:105px; right:12px; width:290px; height:auto; filter:drop-shadow(0 24px 25px rgba(51,91,8,.2)); pointer-events:none; user-select:none; }
.marca { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 28px; background:var(--black); border-bottom:4px solid var(--green); }
.marca a { display:flex; align-items:center; }
.marca img { display:block; width:152px; height:auto; }
.marca span { padding:6px 9px; border:1px solid rgba(152,201,58,.55); border-radius:999px; color:var(--green); font-size:10px; font-weight:700; letter-spacing:.16em; }
.contenido { position:relative; padding:32px; background:#fff; }
.contenido::before { content:""; position:absolute; inset:0 0 auto; height:7px; background:linear-gradient(90deg,var(--green),#c7ee71,var(--green)); opacity:.35; }
h1 { font-family:"Space Grotesk",Inter,sans-serif; font-size:30px; line-height:1.08; letter-spacing:-.035em; margin:0 0 9px; }
h1::after { content:""; display:block; width:46px; height:5px; margin-top:13px; border-radius:999px; background:var(--green); }
.subtitulo { color:var(--ink-soft); font-size:14px; margin:0 0 24px; line-height:1.6; }
form { display:flex; flex-direction:column; gap:4px; }
label { font-size:13px; font-weight:600; margin-top:14px; }
input, select, textarea { width:100%; font:inherit; font-size:15px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.94); color:var(--ink); transition:border-color .18s,box-shadow .18s,transform .18s; }
input[type="file"] { padding:8px; }
input[type="file"]::file-selector-button { margin-right:10px; padding:8px 11px; border:0; border-radius:6px; background:var(--green-wash); color:var(--green-dark); font-weight:700; cursor:pointer; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(152,201,58,.2); }
textarea { resize:vertical; }
.ayuda { color:var(--ink-soft); font-size:12px; margin-top:2px; }
button { margin-top:22px; padding:13px 16px; border:1px solid var(--green); border-radius:9px; background:var(--green); color:var(--black); font-family:"Space Grotesk",Inter,sans-serif; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 8px 22px rgba(79,122,15,.23); transition:background .18s,transform .18s,box-shadow .18s; }
button:hover { background:#a9db48; transform:translateY(-1px); box-shadow:0 10px 26px rgba(79,122,15,.3); }
button:disabled { opacity:.6; cursor:not-allowed; }
.resultado { margin-top:14px; padding:10px 12px; border-radius:8px; font-size:14px; background:var(--green-wash); color:var(--green-dark); }
.resultado.error { background:#f6e4de; color:var(--danger); }
@media (max-width:780px) { body { padding:20px 10px 90px; } body::before { top:-5px; right:-168px; } body::after { bottom:10px; left:-185px; } .escena { justify-content:center; min-height:0; padding-left:0; } .escena::before { top:74px; right:-42px; } .escena::after { right:-38px; bottom:0; } .tarjeta { border-radius:15px; } .mascota-fondo { position:fixed; z-index:1; top:auto; right:-46px; bottom:-44px; width:180px; opacity:.22; } .marca { min-height:72px; padding:15px 20px; } .marca img { width:137px; } .contenido { padding:26px 20px; } h1 { font-size:27px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }