/* Soporte — modal de contacto por WhatsApp.
   Usa los tokens del design system (estilo.css). No inventa colores. */

.sop-fondo{
  position:fixed; inset:0; z-index:60;
  background:rgba(46,42,36,.55);
  display:flex; align-items:flex-end; justify-content:center;
  padding:var(--e4);
  animation:sop-entra .16s ease-out;
}
@media (min-width:600px){ .sop-fondo{ align-items:center } }
.sop-fondo.oculto{ display:none }
@keyframes sop-entra{ from{opacity:0} to{opacity:1} }

.sop-caja{
  position:relative; width:100%; max-width:420px;
  background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r4); box-shadow:var(--sombra-l);
  padding:var(--e7) var(--e6) var(--e6);
  text-align:center;
  /* En celular el teclado come la pantalla: que la caja pueda hacer scroll. */
  max-height:88vh; overflow-y:auto;
  animation:sop-sube .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes sop-sube{ from{transform:translateY(14px)} to{transform:none} }

.sop-x{
  position:absolute; top:var(--e3); right:var(--e3);
  width:34px; height:34px; border:none; border-radius:var(--r-pill);
  background:var(--crema); color:var(--tinta-suave);
  font-size:15px; line-height:1; cursor:pointer;
}
.sop-x:hover{ background:var(--crema-2) }

.sop-ico{
  width:52px; height:52px; margin:0 auto var(--e4);
  border-radius:var(--r-pill); background:var(--salvia-velo);
  display:flex; align-items:center; justify-content:center;
}
.sop-ico svg{ width:26px; height:26px; stroke:var(--salvia); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }

.sop-caja h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:1.25rem; color:var(--tinta); margin:0 0 var(--e2);
}
.sop-sub{ font-size:.92rem; color:var(--tinta-suave); margin:0 0 var(--e5); line-height:1.5 }

.sop-texto{
  width:100%; box-sizing:border-box;
  border:1px solid var(--borde); border-radius:var(--r2);
  background:var(--crema); color:var(--tinta);
  font-family:inherit; font-size:1rem; line-height:1.5;
  padding:var(--e3) var(--e4); resize:vertical; min-height:104px;
}
.sop-texto:focus{ outline:none; border-color:var(--salvia); background:var(--blanco) }

.sop-error{
  margin-top:var(--e2); padding:var(--e2) var(--e3);
  background:var(--error-bg); color:var(--error-tx);
  border:1px solid var(--error-bd); border-radius:var(--r1);
  font-size:.86rem; text-align:left;
}
.sop-error.oculto{ display:none }

.sop-enviar{
  width:100%; margin-top:var(--e4);
  border:none; border-radius:var(--r2);
  background:var(--salvia); color:var(--blanco);
  font-family:inherit; font-size:1rem; font-weight:600;
  padding:var(--e4); cursor:pointer;
  transition:background .12s;
}
.sop-enviar:hover{ background:var(--salvia-oscuro) }
.sop-enviar:active{ transform:translateY(1px) }

.sop-nota{ font-size:.78rem; color:var(--tinta-suave); margin:var(--e3) 0 0; line-height:1.45 }