/* Formularios → Web3Forms (21-oct-2026): confirmaciones y avisos. Lo usa /js/formularios.js. */

/* Contacto: panel de gracias (reemplaza al formulario) */
.contacto-gracias{max-width:640px;margin:10px auto 0;padding:48px 32px 44px;text-align:center;background:#f4f9f5;border:1px solid #d7eadb;border-top:4px solid #157a2f;border-radius:16px;box-shadow:0 12px 30px rgba(21,122,47,.08);animation:formEntrar .45s ease-out both}
.contacto-gracias:focus{outline:none}
.contacto-gracias__icono{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:#157a2f;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 9px rgba(126,211,33,.28)}
.contacto-gracias__icono svg{width:38px;height:38px}
.contacto-gracias h3{font-family:"Rubik",sans-serif;font-size:28px;line-height:1.25;font-weight:500;color:#232221;margin:0 0 12px}
.contacto-gracias p{font-family:"Roboto",sans-serif;font-size:17px;line-height:1.6;color:#555;margin:0 auto;max-width:460px}

/* Avisos de error (contacto y boletín) */
.form-aviso:empty{display:none}
.form-aviso.is-error{display:inline-block;max-width:640px;margin-top:18px;padding:12px 18px;font-family:"Roboto",sans-serif;font-size:16px;line-height:1.5;color:#8a1f11;background:#fdecea;border:1px solid #f5c6c0;border-left:4px solid #c0392b;border-radius:8px;text-align:left}

/* Boletín: confirmación del mismo tamaño que el campo (sobre la foto oscura) */
.boletin-gracias{display:flex;align-items:center;gap:14px;max-width:770px;min-height:60px;padding:12px 26px 12px 12px;background:#ffffff;border-radius:50px;font-family:"Rubik",sans-serif;font-size:17px;line-height:1.4;color:#232221;box-shadow:0 10px 24px rgba(0,0,0,.18);animation:formEntrar .45s ease-out both}
.boletin-gracias:focus{outline:none}
.boletin-gracias__icono{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#157a2f;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px rgba(126,211,33,.35)}
.boletin-gracias__icono svg{width:20px;height:20px}

@keyframes formEntrar{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:575px){
  .contacto-gracias{padding:36px 20px 32px;border-radius:12px}
  .contacto-gracias h3{font-size:23px}
  .contacto-gracias p{font-size:16px}
  .boletin-gracias{border-radius:16px;font-size:16px;padding:14px 18px 14px 14px;text-align:left}
}
@media (prefers-reduced-motion:reduce){.contacto-gracias,.boletin-gracias{animation:none}}