/* ===== Colores provisionales: uno distinto por clase (cámbialos aquí) ===== */
:root {
  --c-logo: #e6194b;
  --c-title: #1b8a2f;
  --c-box: #2f54d6;
  --c-box-title: #e8590c;
  --c-box-text: #8e24aa;
  --c-footer: #00838f;
  --c-footer-link: #8d5524;
  --c-footer-note: #5d6d00;
  --c-form: #b00020;
  --c-descr: #6d6d00;
  --c-field-title: #1a237e;
  --c-field: #d81b9c;
  --c-error: #ff1744;
  --c-check-label: #00695c;
  --c-check-link: #ff6d00;
  --c-btn: #ff9100;
  --c-cookie-note: #6a3d9a;
  --c-cookie-note-link: #c2185b;
  --c-legal-clause: #3949ab;
  --c-legal-title: #2e7d32;
  --c-legal-text: #6a1b9a;
  --c-result-title: #00acc1;
  --c-result-text: #ad1457;
  --c-result-link: #d84315;
}

*, *::before, *::after { box-sizing: border-box; }

/* ===== Fondo: imagen borrosa estirada a todo el alto del documento ===== */
html { min-height: 100%; background: #1d2433; }
body {
  margin: 0; position: relative; isolation: isolate; min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem; line-height: 1.5; text-align: center;
}
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("images/background.svg") center / 100% 100% no-repeat;
  filter: blur(8px);
}

/* ===== Estructura: ancho tipo móvil, centrado ===== */
.page {
  width: 100%; max-width: 30rem; min-height: 100vh; margin: 0 auto; padding: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.header { display: flex; justify-content: center; width: 100%; }
.logo { display: block; width: 6rem; height: auto; border: 4px solid var(--c-logo); border-radius: 50%; background: #fff; }
.main { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.title { margin: 0; font-size: 1.8rem; line-height: 1.2; color: var(--c-title); background: rgba(255,255,255,.9); border: 3px solid var(--c-title); border-radius: .75rem; padding: .5rem 1rem; width: 100%; }

/* ===== Cajas de la home ===== */
.box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; background: rgba(255,255,255,.88); border: 3px solid var(--c-box); border-radius: .75rem; }
.box-title { margin: 0; font-size: 1.3rem; color: var(--c-box-title); }
.box-text { margin: 0; color: var(--c-box-text); }

/* ===== Pie ===== */
.footer { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1rem; background: rgba(255,255,255,.88); border: 3px solid var(--c-footer); border-radius: .75rem; }
.footer-nav { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.footer-link { color: var(--c-footer-link); font-weight: 600; }
.footer-note { margin: 0; font-size: .85rem; color: var(--c-footer-note); }

/* ===== Formularios ===== */
.form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem 1rem 0; }
/* Aspecto de caja compartido: formulario y caja informativa (cambia aquí fondo/borde de ambas) */
.form, .info-box { background: rgba(255,255,255,.88); border: 3px solid var(--c-form); border-radius: .75rem; }
.step { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; transition: opacity .3s; }
.step[disabled] { display: none; }
.group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.descr, .info-box-text { margin: 0; color: var(--c-descr); }
.field-title { font-weight: 700; color: var(--c-field-title); }
.field { width: 100%; padding: .6rem .8rem; font: inherit; text-align: center; color: var(--c-field); border: 2px solid var(--c-field); border-radius: .5rem; background: #fff; }
.field::placeholder { color: rgba(0,0,0,.35); }
.field--textarea { min-height: 3.5rem; resize: none; overflow: hidden; field-sizing: content; }
.error { margin: 0; font-weight: 600; color: var(--c-error); }
.error[hidden] { display: none; }
.check-label { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--c-check-label); text-align: center; }
.check { flex: none; width: 1.4rem; height: 1.4rem; }
.check-link { color: var(--c-check-link); }
.turnstile { display: flex; justify-content: center; }

/* Botón anclado abajo mientras se ve el formulario */
.btn-bar { position: sticky; bottom: 0; width: calc(100% + 2rem); display: flex; justify-content: center; padding: .75rem 1rem; background: rgba(255,255,255,.92); border-radius: 0 0 .5rem .5rem; }
.btn { width: 100%; max-width: 20rem; padding: .8rem 1rem; font: inherit; font-weight: 700; color: #fff; background: var(--c-btn); border: 0; border-radius: .6rem; cursor: pointer; }

/* ===== Páginas legales ===== */
.legal-clause { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem; background: rgba(255,255,255,.88); border: 3px solid var(--c-legal-clause); border-radius: .75rem; }
.legal-title { margin: 0; font-size: 1.15rem; color: var(--c-legal-title); }
.legal-text { margin: 0; color: var(--c-legal-text); }

/* ===== Resultado de formularios (sin JS, con :target) ===== */
.result { display: none; width: 100%; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem 1rem; background: rgba(255,255,255,.88); border: 3px solid var(--c-result-title); border-radius: .75rem; }
.result:target { display: flex; }
body:not(:has(.result:target)) .result-default { display: flex; }
.result-title { margin: 0; color: var(--c-result-title); }
.result-text { margin: 0; color: var(--c-result-text); }

/* ===== Cancelación: resultado mostrado directamente por PHP ===== */
.result--shown { display: flex; }
.result-link { color: var(--c-result-link); font-weight: 600; }

/* ===== Mensaje de resultado de la cancelación (visible siempre) ===== */
.message { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem 1rem; background: rgba(255,255,255,.88); border: 3px solid var(--c-result-title); border-radius: .75rem; }
.message-title { margin: 0; color: var(--c-result-title); }
.message-text { margin: 0; color: var(--c-result-text); }
.message-link { color: var(--c-result-link); font-weight: 600; }

/* ===== Aviso de cookies de origen y verificación bajo el botón ===== */
.cookie-note { width: 100%; margin: 0; padding: .75rem 1rem; font-size: .85rem; color: var(--c-cookie-note); background: rgba(255,255,255,.88); border: 3px solid var(--c-cookie-note); border-radius: .75rem; }
.cookie-note-link { color: var(--c-cookie-note-link); font-weight: 600; }
.human { padding-bottom: 1rem; }

/* ===== Caja informativa sobre el formulario: usa el mismo aspecto que .form y el texto de .descr ===== */
.info-box { width: 100%; padding: 1rem; }