/* Camilo Veterinario · base de las páginas sencillas (legales, resultado del pago, acceso de compradores y 404)
   Mismos tokens y tipografías que la landing (camilo.css), en un archivo pequeño. Sin JavaScript propio de estilos y sin estilos en línea:
   así la CSP de cada ruta puede ser estricta. Móvil primero, y pensada también para imprimirse. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:600 800;src:url(/assets/fonts/bricolage-grotesque-5.3.0-latin-opsz.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:400 800;src:url(/assets/fonts/plus-jakarta-sans-5.3.0-latin-wght.woff2) format('woff2')}
:root{
  --bg:#F2F6F7;--white:#FFFFFF;
  --ink:#0A1E26;--muted:#566E78;--line:rgba(10,30,38,.12);
  --brand:#0C5266;--dark:#0A3441;--pastel:#D9ECF0;
  --action:#E8A92E;--action-2:#D99A1C;--on-action:#2A1D00;
  --focus:#2B67D6;
  --ok:#1B6F47;--ok-tint:#DDF1E6;--warn:#7A4E00;--warn-tint:#FFF0CC;--danger:#B3261E;--danger-tint:#FCE8E6;
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-family:var(--f-ui);font-size:17px;line-height:1.7;color:var(--ink);background:linear-gradient(180deg,#DCEEF2 0,#EEF6F8 280px,var(--bg) 560px) no-repeat,var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--dark)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:28px;height:28px;flex:none}
.salto{position:absolute;left:12px;top:-60px;z-index:10;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none}
.salto:focus{top:12px}

/* cabecera y pie */
.cab{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:820px;width:100%;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left))}
.marca{white-space:nowrap;display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.03em}
.marca img{width:36px;height:36px;display:block}
.volver{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--white);color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 1px 0 var(--line)}
.volver:hover{background:var(--pastel);color:var(--ink)}
main{flex:1;width:100%;margin:0 auto;padding:28px max(20px,env(safe-area-inset-right)) 72px max(20px,env(safe-area-inset-left))}
.pie{margin-top:auto;border-top:1px solid var(--line);background:var(--white)}
.pie-in{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;max-width:820px;margin:0 auto;padding:22px max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));font-size:15px;color:var(--muted)}
.pie-in nav{display:flex;flex-wrap:wrap;gap:0 22px}
.pie-in a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-decoration:none}
.pie-in a:hover{text-decoration:underline}
.pie-in p{margin:0}

/* texto */
h1{margin:0 0 12px;font-family:var(--f-display);font-weight:600;font-size:clamp(2.1rem,6.4vw,3.4rem);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.etiqueta{display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:var(--pastel);color:var(--brand);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lead{margin:0 0 24px;font-size:18px;line-height:1.6;color:var(--ink);max-width:56ch}
.nota{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
/* Con el texto del sistema ampliado, un correo largo no debe ensanchar la página. */
main a,.pie a{overflow-wrap:anywhere}
@media (max-width:420px){.btn{white-space:normal;text-align:center;line-height:1.25;padding-top:12px;padding-bottom:12px}.volver{padding:0 12px;font-size:14px}}

/* tarjeta centrada (resultado del pago, acceso, 404) */
main.centro{max-width:600px;display:flex;flex-direction:column;justify-content:center;padding-top:20px}
.tarjeta{padding:32px 28px 30px;border-radius:32px;background:var(--white);box-shadow:0 1px 0 var(--line),0 30px 60px -40px rgba(10,52,65,.35)}
.tarjeta h1{font-size:clamp(1.9rem,6vw,2.6rem)}
.ayuda{margin:26px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border:0;border-radius:999px;font:inherit;font-weight:700;font-size:17px;line-height:1;text-decoration:none;cursor:pointer;touch-action:manipulation}
.btn-accion{background:var(--action);color:var(--on-action)}
.btn-accion:hover{background:var(--action-2);color:var(--on-action)}
.btn-oscuro{background:var(--dark);color:#fff}
.btn-oscuro:hover{background:var(--brand);color:#fff}
.btn-bloque{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--brand);font:inherit;font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn:hover{color:var(--dark)}

/* estado con icono (resultado del pago) */
.estado-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 0 18px;border-radius:50%;background:var(--pastel);color:var(--brand)}
.estado-ic .ico{display:none}
[data-estado="cargando"] .estado-ic .i-cargando,
[data-estado="ok"] .estado-ic .i-ok,
[data-estado="espera"] .estado-ic .i-espera,
[data-estado="aviso"] .estado-ic .i-aviso,
[data-estado="error"] .estado-ic .i-error{display:block}
[data-estado="ok"] .estado-ic{background:var(--ok-tint);color:var(--ok)}
[data-estado="aviso"] .estado-ic,[data-estado="espera"] .estado-ic{background:var(--warn-tint);color:var(--warn)}
[data-estado="error"] .estado-ic{background:var(--danger-tint);color:var(--danger)}
.i-cargando{width:30px;height:30px;border-radius:50%;border:3px solid #BBD6DD;border-top-color:var(--brand);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
/* Con «reducir movimiento» el indicador de carga sigue girando, más despacio: parado parece una página colgada mientras se comprueba el pago. */
@media (prefers-reduced-motion:reduce){.i-cargando{animation-duration:2.4s}}

/* formularios */
.form{display:grid;gap:10px}
.lab{display:block;margin:6px 0 2px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.in{width:100%;min-height:56px;padding:0 20px;border-radius:20px;border:1.5px solid #6F8892;background:var(--bg);color:var(--ink);font:inherit;font-size:17px}
.in::placeholder{color:#566E78}
.in:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px rgba(43,103,214,.22)}
.codigo{font-family:var(--f-display);font-weight:600;font-size:1.7rem;letter-spacing:.35em;text-align:center}
.mensaje{min-height:1.6em;margin:0;font-size:15px;font-weight:600;color:var(--muted)}
.mensaje.ok{color:var(--ok)}
.mensaje.error{color:var(--danger)}
.acciones{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}

@media print{
  body{background:#fff;font-size:12pt;color:#000}
  .cab,.salto{display:none}
  a{color:#000;text-decoration:none}
}