/* =====================================================================
   OpoReal · Contacto
   =====================================================================
   El prefijo es `opr-cn-`, no `opr-ct-`: ese ya es de `oporeal-cuenta`.
   Dos plugins con el mismo prefijo son dos plugins que se pisan el CSS.
   ===================================================================== */
.opr-cn .opr-cn-cabeza{margin-bottom:clamp(26px,3.2vw,40px) !important}


/* --- las dos columnas: por dónde escribir, y el formulario --- */
.opr-cn .opr-cn-cuerpo{
  display:grid !important; grid-template-columns:minmax(0,360px) minmax(0,1fr) !important;
  gap:clamp(24px,3.4vw,56px) !important; align-items:start !important;
}


/* --- las vías --- */
.opr-cn .opr-cn-vias{display:grid !important; gap:14px !important}
.opr-cn .opr-cn-via{
  display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; gap:14px !important; align-items:start !important;
  padding:16px 18px !important; border:1px solid var(--borde) !important; border-radius:var(--radio) !important;
  background:var(--superficie) !important;
}
.opr-cn .opr-cn-via:hover{border-color:var(--borde2) !important}
.opr-cn .opr-cn-icono{
  width:38px !important; height:38px !important; border-radius:11px !important; background:var(--p100) !important;
  display:grid !important; place-items:center !important; color:var(--suave) !important;
}
.opr-cn .opr-cn-icono svg{width:19px !important; height:19px !important}
.opr-cn .opr-cn-via dt{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important; margin-bottom:2px !important}
.opr-cn .opr-cn-via dd{font-size:.875rem !important; color:var(--suave) !important; line-height:1.5 !important}
.opr-cn .opr-cn-via a{color:var(--tinta) !important; font-weight:600 !important; overflow-wrap:anywhere !important}
.opr-cn .opr-cn-via a:hover{text-decoration:underline !important; text-underline-offset:3px !important}


/* --- el compromiso: no es un adorno, es lo que se promete --- */
.opr-cn .opr-cn-plazo{
  margin-top:4px !important; padding:16px 18px !important; border-radius:var(--radio) !important;
  background:var(--p950) !important; color:var(--p100) !important;
}
.opr-cn .opr-cn-plazo b{display:block !important; color:#fff !important; font-size:1.0625rem !important; letter-spacing:-.018em !important; margin-bottom:4px !important}
.opr-cn .opr-cn-plazo span{font-size:.875rem !important; color:var(--p400) !important; line-height:1.5 !important}


/* --- el formulario --- */
.opr-cn .opr-cn-form{
  padding:clamp(20px,2.6vw,30px) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:var(--sombra-s) !important;
  display:grid !important; gap:16px !important;
}
.opr-cn .opr-cn-dos{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important; align-items:start !important}
.opr-cn .opr-cn-campo{display:grid !important; gap:6px !important; align-content:start !important}
.opr-cn .opr-cn-campo label{font-size:.875rem !important; font-weight:600 !important; letter-spacing:-.008em !important}
.opr-cn .opr-cn-campo input, .opr-cn .opr-cn-campo select, .opr-cn .opr-cn-campo textarea{
  width:100% !important; padding:12px 14px !important; min-height:46px !important;
  border-radius:var(--radio-s) !important; background:var(--p50) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  font-size:1rem !important; color:var(--tinta) !important;
}
.opr-cn .opr-cn-campo textarea{min-height:132px !important; resize:vertical !important; line-height:1.55 !important}
.opr-cn .opr-cn-campo input:focus, .opr-cn .opr-cn-campo select:focus, .opr-cn .opr-cn-campo textarea:focus{
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--p500) !important;
}
.opr-cn .opr-cn-campo.es-mal input, .opr-cn .opr-cn-campo.es-mal select, .opr-cn .opr-cn-campo.es-mal textarea{box-shadow:inset 0 0 0 1.5px var(--no500) !important}
.opr-cn .opr-cn-pista{font-size:.8125rem !important; color:var(--tenue) !important; line-height:1.45 !important}
.opr-cn .opr-cn-campo.es-mal .opr-cn-pista{color:var(--no600) !important}


/* La trampa para robots: fuera de la pantalla, no `display:none`. Un campo
   oculto con `display:none` lo saltan hasta los robots más tontos. */
.opr-cn .opr-cn-trampa{position:absolute !important; left:-9999px !important; top:0 !important}
.opr-cn .opr-cn-casilla{
  display:flex !important; gap:11px !important; align-items:flex-start !important;
  font-size:.875rem !important; color:var(--suave) !important; line-height:1.5 !important;
}
.opr-cn .opr-cn-casilla input{
  width:19px !important; height:19px !important; margin-top:2px !important; flex:none !important; border-radius:5px !important;
  box-shadow:inset 0 0 0 1.5px var(--borde2) !important; background:var(--superficie) !important;
}
.opr-cn .opr-cn-casilla input:checked{background:var(--p950) !important; box-shadow:inset 0 0 0 1.5px var(--p950) !important}
.opr-cn .opr-cn-casilla a{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:2px !important}
.opr-cn .opr-cn-casilla.es-mal{color:var(--no600) !important}
.opr-cn .opr-cn-form .opr-btn{width:100% !important; min-height:48px !important}


/* --- el aviso de después --- */
.opr-cn .opr-cn-aviso{
  padding:14px 16px !important; border-radius:var(--radio-s) !important; font-size:.9375rem !important; line-height:1.5 !important;
}
.opr-cn .opr-cn-aviso.es-bien{background:var(--ok100) !important; color:var(--ok900) !important}
.opr-cn .opr-cn-aviso.es-mal{background:var(--no100) !important; color:var(--no900) !important}
@media (max-width:880px){
.opr-cn .opr-cn-cuerpo{grid-template-columns:1fr !important}
}
@media (max-width:520px){
.opr-cn .opr-cn-dos{grid-template-columns:1fr !important}
}