/* ========== Formulario QR – estilos limpios (mobile-first) ==========
   Variables rápidas:
   --accent    : color del botón / foco
   --overlay   : oscurecedor del fondo (0–1)
   --bg-image  : ruta de la imagen de fondo
==================================================================== */
:root{
  --accent: #ffbf00;
  --text:   #0f172a;
  --overlay: .45;
  --bg-image: url("img/backgroundlink.jpg");
}

/* Reset + tipografía */
*{ box-sizing:border-box; }
html,body{ height:auto; min-height:100dvh; }   /* alto dinámico móvil */
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);

  /* layout centrado con aire arriba/abajo */
  display:grid;
  align-content:start;
  justify-items:center;
  padding-block: 10px 24px;        /* ↑ baja/sube el formulario */
  padding-inline:20px;

  /* fondo con overlay (sin fixed por compatibilidad iOS/Android) */
  background:
    linear-gradient(rgba(0,0,0,var(--overlay)), rgba(0,0,0,var(--overlay))),
    var(--bg-image) center 40% / cover no-repeat;
}

/* Fallback si 100dvh no existe */
@supports not (height: 100dvh){
  html,body{ height:auto; min-height:100vh; }
}

/* Tarjeta */
.card{
  width:min(680px,100%);
  background:rgba(255,255,255,.94);
  border-radius:18px;
  padding:20px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(2px);
}

/* Marca (logo + link) */
.brand{ text-align:center; margin-bottom:10px; }
.brand img{
  display:block; margin:0 auto 6px;
  width:min(68%,260px); height:auto;
}
.brand a{
  display:inline-block; font-weight:700; letter-spacing:.3px;
  color:var(--text); text-decoration:none; border-bottom:2px solid transparent;
}
.brand a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* Títulos */
h1{ margin:0 0 6px; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem); }
h2{ margin:0 0 8px; font-size:clamp(1.3rem,1.1rem + 1.1vw,1.8rem); }

/* Formulario */
form{ margin-top:5px; display:grid; gap:12px; }
.field{ display:grid; gap:8px; }
label{ font-weight:600; }

/* Campos (inputs + select) */
input[type="text"],
input[type="email"],
input[type="tel"],
select{
  width:100%;
  border:2px solid #cbd5e1;
  border-radius:12px;
  padding:10px 14px;                 /* compacto en alto */
  font-size:1rem; background:#fff; color:#0f172a;
  /* Para que el select sea consistente en iOS/Android/desktop */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Foco accesible: fallback + versión moderna */
input:focus,
select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(239,68,68,.25);   /* fallback universal */
  outline:none;
}
@supports (color-mix(in srgb, red 50%, white)){
  input:focus,
  select:focus{
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  }
}

/* Botón */
button{
  border:none; border-radius:12px;
  padding:10px 16px;
  font-size:1rem; font-weight:700; color:#fff;
  background:var(--accent); cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
}
button:hover{ opacity:.96; transform:translateY(-1px); }
button:active{ transform:translateY(0); }

/* Textos secundarios */
.mini{ font-size:.83rem; opacity:.85; }
footer{ margin-top:8px; text-align:center; }

/* Honeypot (antispam) */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; }

/* Accesibilidad: reducir animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ===== Responsive único (≤900px): optimiza móvil y corrige Android/iOS ===== */
@media (max-width: 900px){
  body{
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom:28px;
    padding-inline:16px;

    /* evita glitches del fondo en móviles */
    background-attachment:scroll;
    background-position:center 48%;
  }
  .card{ width:min(680px,94vw); padding:18px 16px; border-radius:16px; }
}

/* ===== Mejora de escritorio (opcional): efecto fijo del fondo ===== */
@media (min-width: 901px){
  body{ background-attachment: fixed; }
}