/* ==========================================================================
   Contacto — estilo tipo "precio.css" (paleta calmada)
   Se aplica dentro de un contenedor con clase .contact-page
   ========================================================================== */

/* ===== Paleta & tokens (scopeados a la página de contacto) ============= */
.contact-page{
  --bg: #f6f9fc;
  --panel: #ffffff;
  --stroke: #e6ecf3;

  --text: #2f3a4f;       /* gris azulado; no negro */
  --muted: #6f7d95;
  --accent: #2a6eea;     /* azul confianza */
  --accent-weak: #e9f1ff;

  --shadow: 0 10px 30px rgba(46,74,117,.08);
  --radius: 16px;

  background: var(--bg);
  color: var(--text);
  padding: 1.5rem 1rem 3rem;
}

/* ===== Cabecera ======================================================== */
.contact-hero{
  max-width: 1100px;
  margin: 0 auto 1rem;
}
.contact-hero h1{
  margin: .25rem 0;
  font-size: clamp(1.6rem,2.6vw,2.2rem);
  letter-spacing: -.01em;
  color: var(--text);
}
.contact-hero p{
  margin: 0;
  color: var(--muted);   /* sub-encabezado más legible */
}

/* ===== Layout principal ================================================= */
.contact-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 980px){
  .contact-grid{
    grid-template-columns: 1.25fr .75fr;  /* formulario + lateral */
    align-items: start;
  }
}

/* ===== Panel formulario (ligero, sin “caja” externa) ==================== */
.contact-form{
  background: linear-gradient(180deg, #fff, #f9fbff);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}

.field{
  display: grid;
  gap: .45rem;
  margin-bottom: .9rem;
}
.field label{
  font-weight: 800;
  color: var(--text);
}
.req{ color: color-mix(in oklab, var(--accent), #b91c1c 28%); }

/* Inputs & textarea */
.input, .textarea,
.contact-form input, .contact-form textarea, .contact-form select{
  width: 100%;
  padding: .78rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: #fff;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.textarea, .contact-form textarea{ min-height: 150px; }
.input::placeholder,
.textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: color-mix(in oklab, var(--muted), #ffffff 35%); }

.input:focus, .textarea:focus,
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
  background: #fff;
}

/* Checkboxes (Django CheckboxSelectMultiple → <ul><li>...) */
.checkbox-grid ul{
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem .9rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px){
  .checkbox-grid ul{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.checkbox-grid li{
  display: flex; align-items: center;
  color: var(--text);
}
.checkbox-grid input[type="checkbox"]{
  width: 18px; height: 18px; margin-right: 10px;
  accent-color: var(--accent);
}

/* Errores */
.form-alert{
  border: 1px solid color-mix(in oklab, #ef4444, #000 10%);
  background: color-mix(in oklab, #fee2e2, #fff 10%);
  color: #991b1b;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: .75rem;
}
.error{
  margin: 0;
  color: #b91c1c;
  font-size: .95rem;
}

/* Acciones */
.actions{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: .6rem;
}
.actions .btn{ height: 44px; border-radius: 12px; }
.actions .btn.btn-primary{
  background: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent), #0B1220 10%);
  color: #fff;
  box-shadow: var(--shadow);
}
.tiny{ font-size: .9rem; color: var(--muted); }

/* ===== Lateral ========================================================== */
.contact-side .card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: .9rem .95rem;
  box-shadow: var(--shadow);
}
.contact-side h3{ margin: 0 0 .25rem; font-size: clamp(1.05rem,1.6vw,1.2rem); color: var(--text); }
.contact-side p{ margin: 0; color: var(--muted); }

/* Checklist con ticks */
.checklist{
  list-style: none;
  padding: 0; margin: .4rem 0 0;
  display: grid; gap: .4rem;
  color: var(--text);
}
.checklist li{
  position: relative; padding-left: 26px;
}
.checklist li::before{
  content: "✓";
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: .8rem; line-height: 1;
  background: color-mix(in oklab, var(--accent), #fff 80%);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent), #000 85%);
}

/* Utilidades */
.muted{ color: var(--muted); }
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden;
}

/* ===== Accesibilidad (foco) ============================================ */
:where(.contact-form a,.contact-form button,.contact-form input,.contact-form textarea,.contact-form select):focus-visible{
  outline: 3px solid var(--accent-weak);
  outline-offset: 3px;
  border-radius: 10px;
}