.cp-contact{
  padding: 32px 0 64px;
}

.cp-contact__shell{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.cp-contact__hero{
  margin-bottom: 28px;
}

.cp-contact__title{
  margin: 10px 0 16px;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-text-strong);
}

.cp-contact__lead{
  max-width: 860px;
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--c-text-soft);
}

.cp-contact__grid{
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 22px;
}

.cp-contact__block,
.cp-contact__notice{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.cp-contact__block--soft{
  background: #f8fafc;
}

.cp-contact__block h2,
.cp-contact__notice h2,
.cp-contact__block h3{
  color: var(--c-text-strong);
}

.cp-contact__block h2,
.cp-contact__notice h2{
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.2;
}

.cp-contact__block h3{
  margin: 20px 0 10px;
  font-size: 1.08rem;
}

.cp-contact__block p,
.cp-contact__block li,
.cp-contact__notice p,
.cp-contact__notice li{
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--c-text);
}

.cp-contact__block ul,
.cp-contact__notice ul{
  margin: 12px 0 0 1.2rem;
  padding: 0;
}

.cp-contact__notice{
  margin-bottom: 20px;
}

.cp-contact__notice--success{
  background: #f0fdf4;
  border-color: #abefc6;
}

.cp-contact__notice--danger{
  background: #fff4f5;
  border-color: #f3b4bf;
}

.cp-contact__form{
  display: grid;
  gap: 16px;
}

.cp-contact__field{
  display: grid;
  gap: 8px;
}

.cp-contact__field label{
  font-weight: 600;
  color: var(--c-text-strong);
}

.cp-contact__field input,
.cp-contact__field textarea{
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  color: var(--c-text);
  font: inherit;
}

.cp-contact__field input:focus,
.cp-contact__field textarea:focus{
  outline: none;
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(23,92,211,.12);
}

.cp-contact__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 860px){
  .cp-contact__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px){
  .cp-contact__shell{
    padding: 0 18px;
  }

  .cp-contact__block,
  .cp-contact__notice{
    padding: 22px 18px;
  }
}

/* ===============================
   CAMPOS BASE
================================ */
.cp-contact__field input,
.cp-contact__field textarea,
.cp-contact__field select {
  width: 100%;
  padding: 10px 12px;

  font-size: 0.95rem;
  line-height: 1.4;

  border: 1px solid var(--c-border);
  border-radius: 10px;

  background: var(--c-surface);
  color: var(--c-text);

  outline: none;

  transition: border-color .15s ease, box-shadow .15s ease;
}

/* ===============================
   HOVER (ligero)
================================ */
.cp-contact__field input:hover,
.cp-contact__field textarea:hover {
  border-color: var(--c-divider);
}

/* ===============================
   FOCUS (activo)
================================ */
.cp-contact__field input:focus,
.cp-contact__field textarea:focus {
  border-color: var(--c-link);
  box-shadow: 0 0 0 2px rgba(23, 92, 211, 0.15);
}

/* ===============================
   ERROR
================================ */
.cp-contact__field--error input,
.cp-contact__field--error textarea {
  border-color: #d92d20;
}

.cp-contact__field--error input:focus,
.cp-contact__field--error textarea:focus {
  box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.15);
}

/* FORZAR BORDES DEL FORMULARIO DE CONTACTO */
.cp-contact .cp-contact__form input,
.cp-contact .cp-contact__form textarea,
.cp-contact .cp-contact__form select {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;

  background: #ffffff !important;
  color: #101828 !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-color: #cfd4dc !important;
  border-radius: 12px !important;

  padding: 12px 14px !important;
  box-sizing: border-box !important;

  box-shadow: none !important;
  outline: none !important;
}

.cp-contact .cp-contact__form input:focus,
.cp-contact .cp-contact__form textarea:focus,
.cp-contact .cp-contact__form select:focus {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #175cd3 !important;
  box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.12) !important;
}

.cp-contact .cp-contact__form textarea {
  min-height: 180px !important;
  resize: vertical !important;
}