/* ============================================================
   COMPONENTES — piezas reutilizables: botones, chips y campos
   de formulario.
   ============================================================ */

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:2px; font-size:13.5px; font-weight:700;
  letter-spacing:0.03em; cursor:pointer; border:1px solid transparent;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap; font-family:inherit;
}
.btn-block{width:100%; margin-top:6px;}
.btn-gold{background:var(--gold-500); color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-400); transform:translateY(-1px);}
.btn-outline{border-color:rgba(247,242,230,0.4); color:var(--cream); background:transparent;}
.btn-outline:hover{border-color:var(--gold-400); color:var(--gold-200);}
.btn-outline-navy{border-color:rgba(14,19,61,0.35); color:var(--navy-900); background:transparent;}
.btn-outline-navy:hover{border-color:var(--navy-900); background:rgba(14,19,61,0.06);}

/* Chips / etiquetas */
.chip-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.chip{
  border:1px solid rgba(14,19,61,0.18); padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--navy-900);
}
.chip.new{border-color:var(--gold-500); background:rgba(201,162,39,0.1); color:var(--gold-600);}

/* Campos de formulario */
.field{margin-bottom:16px;}
.field label{display:block; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(247,242,230,0.6); margin-bottom:7px; font-weight:600;}
.field input, .field select, .field textarea{
  width:100%; background:rgba(247,242,230,0.06); border:1px solid rgba(217,184,74,0.25);
  color:var(--cream); padding:12px 14px; font-family:'Public Sans',sans-serif; font-size:14px;
}
.field textarea{resize:vertical; min-height:80px;}
.field input::placeholder, .field textarea::placeholder{color:rgba(247,242,230,0.35);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-error input, .field-error textarea{border-color:#cf7a5e; background:rgba(207,122,94,0.08);}
.form-aviso{font-size:12.5px; color:#e8b4a0; margin:0 0 10px; line-height:1.5;}
.form-aviso:empty{margin:0;}
.form-alt{font-size:12.5px; color:rgba(247,242,230,0.55); text-align:center; margin:14px 0 4px;}
.form-privacidad{font-size:11px; color:rgba(247,242,230,0.62); text-align:center; margin:12px 0 0; line-height:1.5;}
/* Honeypot anti-bot: invisible para personas, pero los robots que llenan
   todos los campos delatan que lo son. No usar display:none (algunos bots lo saltan). */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Respaldo institucional cuando falta una foto (lo inserta script.js) */
.img-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  width:100%; height:100%; min-height:180px; text-align:center; padding:20px;
  background:
    radial-gradient(ellipse 320px 220px at 30% 18%, rgba(217,184,74,0.16), transparent 65%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border:1px solid var(--line);
}
.img-fallback img{height:52px; width:auto; opacity:0.95;}
.img-fallback span{
  font-size:9.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(247,242,230,0.55); font-weight:600;
}