/* =============================================================================
   MODAL.CSS — Modal de contacto (componente compartido)
   Una sola hoja para index.html y henkel.html. Los estilos de botón NO viven
   aquí a propósito: cada página aporta su propio .btn y el modal se integra.
   ========================================================================== */

/* ==========================================================
   MODAL DE CONTACTO — estructura, tarjeta y campos
   ========================================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(27,27,24,.62);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
.modal-overlay.active{opacity:1;visibility:visible}
.modal-card{
  position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--white);border:1px solid var(--line);border-top:4px solid var(--henkel-red);
  border-radius:var(--radius);padding:34px 32px 30px;
  box-shadow:0 30px 70px rgba(27,27,24,.34);
  transform:translateY(18px) scale(.98);opacity:0;
  transition:transform .32s var(--ease),opacity .32s var(--ease);
}
.modal-overlay.active .modal-card{transform:none;opacity:1}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:#67634F;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  transition:all .2s var(--ease);
}
.modal-close:hover{background:var(--henkel-red);color:#fff;border-color:var(--henkel-red);transform:rotate(90deg)}
.modal-card h3{font-size:29px;color:var(--ink);letter-spacing:.02em;margin-bottom:10px}
.modal-card > p{font-size:14px;color:#55524A;margin-bottom:24px;max-width:46ch}

.modal-form-group{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.modal-form-group label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--steel);
}
.modal-form-group input,
.modal-form-group select{
  width:100%;padding:12px 14px;font-family:'Inter',sans-serif;font-size:14px;
  color:var(--graphite);background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius);outline:none;transition:all .2s var(--ease);
}
.modal-form-group select{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px;
}
.modal-form-group input::placeholder{color:#A8A496}
.modal-form-group input:focus,
.modal-form-group select:focus{border-color:var(--steel);box-shadow:0 0 0 3px rgba(46,92,140,.14)}

.btn-ghost-henkel{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1.5px solid var(--steel);color:var(--steel);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;border-radius:var(--radius);
  transition:all .25s var(--ease);
}
.btn-ghost-henkel:hover{background:var(--henkel-red);color:var(--white);border-color:var(--henkel-red);box-shadow:0 4px 14px rgba(229,0,20,.3)}
.btn-henkel-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--orange);color:#fff;border:1.5px solid var(--orange);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;border-radius:var(--radius);
  transition:all .25s var(--ease);
}
.btn-henkel-primary:hover{background:#C7440F;border-color:#C7440F;transform:translateY(-2px);box-shadow:0 6px 18px rgba(226,87,28,.34)}

/* Estado de éxito */
.modal-success{text-align:center;padding:14px 0 6px}
.modal-success .check{
  width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:27px;animation:pop .4s var(--ease);
}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.modal-success h3{margin-bottom:10px}
.modal-success p{font-size:14px;color:#55524A;max-width:40ch;margin:0 auto 22px}
body.modal-open{overflow:hidden}


/* --- Campos extendidos --- */
.modal-form-group textarea{
  width:100%;padding:12px 14px;font-family:'Inter',sans-serif;font-size:14px;
  color:var(--graphite);background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius);outline:none;resize:vertical;min-height:88px;
  transition:all .2s var(--ease);
}
.modal-form-group textarea:focus{border-color:var(--steel);box-shadow:0 0 0 3px rgba(46,92,140,.14)}
.modal-form-group textarea::placeholder{color:#75715F}
.modal-form-group .hint{font-family:'Inter',sans-serif;font-size:12px;color:#5F5C4A;text-transform:none;letter-spacing:0}
.modal-context{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:var(--radius);padding:10px 13px;margin-bottom:18px;
}
.modal-context b{font-weight:600}
.consent{display:flex;flex-direction:row;align-items:flex-start;gap:11px;margin:6px 0 4px}
.consent input[type="checkbox"]{width:20px;height:20px;min-width:20px;margin-top:1px;accent-color:var(--ink);cursor:pointer}
.consent label{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;color:#4F4C43;text-transform:none;letter-spacing:0;font-weight:400}
.consent a{color:var(--steel);border-bottom:1px solid var(--steel)}
.form-error{
  display:none;margin-bottom:16px;padding:12px 14px;border-radius:var(--radius);
  background:#FDECEC;border:1px solid var(--henkel-red);border-left:3px solid var(--henkel-red);
  font-size:13px;color:#8A0010;
}
.form-error.is-visible{display:block}
.form-error ul{margin:6px 0 0;padding-left:0}
.form-error li{margin-top:3px}

/* --- Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan) --- */
.modal-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Cabecera de la tarjeta --- */
.modal-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--henkel-red);margin-bottom:6px;
}

/* --- Estados de validación y foco --- */
.modal-form-group input:user-invalid{border-color:var(--henkel-red)}
.modal-form-group input:user-invalid:focus{box-shadow:0 0 0 3px rgba(229,0,20,.16)}
.modal-card :focus-visible{outline:3px solid var(--steel);outline-offset:2px}

/* --- Responsive --- */
@media (max-width:620px){
  .modal-overlay{padding:14px;align-items:flex-end}
  .modal-card{padding:28px 20px 24px;max-height:92vh}
  .modal-card h2,.modal-card h3{font-size:25px}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions button,.modal-actions .btn{width:100%}
}