/* lv-contact.css — estilos del island #lv-contact (página /contacto).
 *
 * Sólo aplica dentro de `#lv-contact`. El resto de la página
 * (cabecera, pie, export de Framer) sigue con sus estilos intactos.
 *
 * Tokens: reutiliza los existentes del design system (--lvd-* en
 * lv-dia.css). Sin colores nuevos. La sensación "premium" sale de
 * tipografía, espaciado y bordes finos, nunca de paletas inventadas.
 *
 * Reglas de oro para esta pieza:
 *  - H1 generoso (clamp ~40–64px) para que el titular mande.
 *  - Sin hueco gigante encima del form.
 *  - Móvil: motivos como chips de 2 columnas + hint debajo del
 *    seleccionado, y los canales aparecen DESPUÉS del form (no
 *    antes) para que el usuario llegue al form lo antes posible.
 *  - Reduced motion desactiva transiciones y animaciones.
 *  - Mantiene paleta raíz: navy, panel, blue, cream, coral, teal.
 */

#lv-contact.lvc-root {
  /* Tokens locales (--lvc-*), mapean a --lvd-* de lv-dia */
  --lvc-navy:        var(--lvd-navy, #031c4c);
  --lvc-navy-2:      var(--lvd-navy-2, #0c2c63);
  --lvc-panel:       var(--lvd-panel, #062457);
  --lvc-blue:        var(--lvd-blue, #1baaff);
  --lvc-cream:       var(--lvd-cream, #f3f1f0);
  --lvc-line:        color-mix(in oklab, var(--lvc-cream) 14%, transparent);
  --lvc-line-strong: color-mix(in oklab, var(--lvc-cream) 22%, transparent);
  --lvc-fg:          var(--lvc-cream);
  --lvc-fg-dim:      color-mix(in oklab, var(--lvc-cream) 75%, transparent);
  --lvc-fg-muted:    color-mix(in oklab, var(--lvc-cream) 60%, transparent);
  --lvc-coral:       var(--lvd-coral, #ff7450);
  --lvc-teal:        var(--lvd-teal, #27b88c);
  --lvc-radius:      14px;
  --lvc-radius-sm:   10px;
  --lvc-control-h:   44px;

  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background: var(--lvc-navy);
  color: var(--lvc-fg);
  font-family: "Outfit", "Outfit Placeholder", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  padding: clamp(112px, 9vw, 144px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
  width: 100%;
  overflow-x: hidden;
  display: block;
}

#lv-contact,
#lv-contact *,
#lv-contact *::before,
#lv-contact *::after { box-sizing: inherit; }

/* ─── Ocultar el Main exportado por Framer sin tocar el DOM ───── */
.lvc-hide-main {
  display: none !important;
}

#lv-contact [hidden] { display: none !important; }
html[data-lvc-mounted] .framer-17oilpz { display: none !important; }

/* ─── Layout ───────────────────────────────────────────────────── */
.lvc-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

/* ─── Hero ─────────────────────────────────────────────────────── */
.lvc-head {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin: 0;
}
.lvc-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--lvc-blue);
  margin: 0;
}
.lvc-head h1 {
  font-family: "Poppins", "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--lvc-cream);
}
.lvc-head h1 .lvc-h1-line { display: block; color: var(--lvc-cream); }
.lvc-head h1 .lvc-h1-accent { display: block; color: var(--lvc-blue); }
.lvc-subtitle {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  color: var(--lvc-fg-dim);
  max-width: 640px;
  margin: 0;
}
.lvc-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--lvc-fg-dim);
  margin: 4px 0 0;
}
.lvc-cta-link {
  color: var(--lvc-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in oklab, var(--lvc-blue) 50%, transparent);
  padding-bottom: 1px;
}
.lvc-cta-link:hover,
.lvc-cta-link:focus-visible {
  border-bottom-color: var(--lvc-blue);
  outline: none;
}
.lvc-meta-sep { color: var(--lvc-fg-muted); }

/* ─── Grid principal ───────────────────────────────────────────── */
.lvc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 860px) {
  .lvc-grid { grid-template-columns: 1fr; }
}

/* ─── Columna izquierda ────────────────────────────────────────── */
.lvc-left {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
  align-content: start;
}

/* Motivos */
.lvc-reasons { display: grid; gap: 16px; }
.lvc-reasons h2 {
  font-family: "Poppins", "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .02em;
  margin: 0;
  color: var(--lvc-fg);
}
.lvc-reason-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 1100px) {
  .lvc-reason-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  /* Móvil: chips compactos de 2 columnas, hint debajo del seleccionado */
  .lvc-reason-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}

.lvc-reason {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--lvc-line);
  border-radius: 999px;
  color: var(--lvc-fg);
  padding: 8px 14px;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lvc-reason:hover,
.lvc-reason:focus-visible {
  border-color: var(--lvc-line-strong);
  background: color-mix(in oklab, var(--lvc-panel) 70%, transparent);
  outline: none;
}
.lvc-reason[aria-pressed="true"] {
  border-color: var(--lvc-blue);
  background: color-mix(in oklab, var(--lvc-blue) 14%, transparent);
  color: var(--lvc-cream);
}
.lvc-reason strong {
  font-weight: 600;
  letter-spacing: -.005em;
}

/* Hint contextual bajo motivos */
.lvc-reason-hint {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--lvc-fg-dim);
  border-left: 2px solid var(--lvc-blue);
  padding: 4px 0 4px 12px;
  min-height: 1.5em;
  margin: 0;
}

/* Canales directos */
.lvc-channels {
  display: grid;
  gap: 10px;
}
.lvc-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lvc-line);
  border-radius: var(--lvc-radius-sm);
  background: color-mix(in oklab, var(--lvc-panel) 60%, transparent);
  color: var(--lvc-fg);
  text-decoration: none;
  font: inherit;
  font-size: .95rem;
  transition: border-color .15s ease, background .15s ease;
  min-height: var(--lvc-control-h);
}
.lvc-channel:hover,
.lvc-channel:focus-visible {
  border-color: var(--lvc-blue);
  background: color-mix(in oklab, var(--lvc-panel) 80%, transparent);
  outline: none;
}
.lvc-channel-icon {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  color: var(--lvc-blue);
  display: inline-flex;
}
.lvc-channel-icon svg { width: 100%; height: 100%; }
.lvc-channel-label {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.lvc-channel-title {
  font-weight: 600;
  font-size: .95rem;
  color: var(--lvc-cream);
}
.lvc-channel-sub {
  color: var(--lvc-fg-muted);
  font-size: .78rem;
  letter-spacing: .01em;
}

/* ─── Formulario ───────────────────────────────────────────────── */
.lvc-form-card {
  background: color-mix(in oklab, var(--lvc-panel) 88%, transparent);
  border: 1px solid var(--lvc-line);
  border-radius: var(--lvc-radius);
  padding: clamp(20px, 3vw, 32px);
}
.lvc-form { display: grid; gap: 16px; }

.lvc-field { display: grid; gap: 6px; margin: 0; }
.lvc-field label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--lvc-fg);
}
.lvc-field label .lvc-required {
  color: var(--lvc-blue);
  margin-left: 2px;
}

.lvc-control {
  height: var(--lvc-control-h);
  border-radius: var(--lvc-radius-sm);
  background: color-mix(in oklab, var(--lvc-navy) 85%, transparent);
  border: 1px solid var(--lvc-line);
  color: var(--lvc-fg);
  font: inherit;
  font-size: 1rem;
  padding: 0 12px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.lvc-control::placeholder { color: color-mix(in oklab, var(--lvc-fg) 65%, transparent); }
.lvc-control:focus,
.lvc-control:focus-visible {
  outline: none;
  border-color: var(--lvc-blue);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lvc-blue) 30%, transparent);
}
.lvc-control[aria-invalid="true"] {
  border-color: var(--lvc-coral);
}

textarea.lvc-control {
  height: auto;
  min-height: 140px;
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}

.lvc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .lvc-row { grid-template-columns: 1fr; }
}

/* Privacy checkbox */
.lvc-privacy {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  margin: 4px 0 8px;
  font-size: .88rem;
  color: var(--lvc-fg-dim);
  line-height: 1.45;
}
.lvc-privacy input[type="checkbox"] {
  width: 22px; height: 22px;
  margin: 1px 0 0;
  accent-color: var(--lvc-blue);
  cursor: pointer;
}
.lvc-privacy label { min-height: 44px; cursor: pointer; }
.lvc-privacy .lvc-error { grid-column: 2; }
.lvc-form--sent .lvc-fields { display: none; }
.lvc-privacy a {
  color: var(--lvc-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honeypot — oculto fuera de pantalla, sin required. */
.lvc-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Errores / estado — usa coral de marca, no un rojo inventado */
.lvc-error {
  color: var(--lvc-coral);
  font-size: .82rem;
  min-height: 0;
  margin: 2px 0 0;
}
.lvc-error:empty { display: none; }
.lvc-field--invalid label { color: var(--lvc-coral); }

.lvc-status {
  border-radius: var(--lvc-radius-sm);
  padding: 12px 14px;
  font-size: .92rem;
  line-height: 1.45;
  border: 1px solid transparent;
  margin: 0;
}
.lvc-status[hidden] { display: none; }
.lvc-status--error {
  background: color-mix(in oklab, var(--lvc-coral) 12%, transparent);
  border-color: color-mix(in oklab, var(--lvc-coral) 35%, transparent);
  color: var(--lvc-coral);
}
.lvc-status--success {
  background: color-mix(in oklab, var(--lvc-teal) 12%, transparent);
  border-color: color-mix(in oklab, var(--lvc-teal) 35%, transparent);
  color: var(--lvc-teal);
}

/* Botón */
.lvc-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--lvc-control-h);
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--lvc-blue);
  color: var(--lvc-navy);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: filter .15s ease;
}
.lvc-submit:hover,
.lvc-submit:focus-visible {
  filter: brightness(1.06);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lvc-blue) 30%, transparent);
}
.lvc-submit:disabled {
  opacity: .55;
  cursor: progress;
}
.lvc-submit[hidden] { display: none; }
.lvc-submit--ghost {
  background: transparent;
  color: var(--lvc-blue);
  border: 1px solid color-mix(in oklab, var(--lvc-blue) 60%, transparent);
}
.lvc-submit--ghost:hover,
.lvc-submit--ghost:focus-visible {
  background: color-mix(in oklab, var(--lvc-blue) 12%, transparent);
  filter: none;
}
.lvc-submit-arrow { font-weight: 400; }

.lvc-success {
  display: grid;
  gap: 12px;
  padding: 4px 0 0;
}
.lvc-success h3 {
  margin: 0;
  font-family: "Poppins", "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
}
.lvc-success p { margin: 0; color: var(--lvc-fg-dim); }

/* ─── Móvil: orden reasons → form → channels ───────────────────── */
@media (max-width: 860px) {
  /* En móvil los canales pasan al final: primero motivos + form. */
  .lvc-left { display: contents; }
  .lvc-left .lvc-channels { order: 3; }
  .lvc-left .lvc-reasons { order: 1; }
  .lvc-grid > .lvc-form-card { order: 2; }
}

/* ─── FAQ ──────────────────────────────────────────────────────── */
.lvc-faq {
  margin-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--lvc-line);
  padding-top: clamp(28px, 4vw, 48px);
  display: grid;
  gap: 16px;
}
.lvc-faq h2 {
  font-family: "Poppins", "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin: 0;
}
.lvc-faq-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lvc-faq details {
  border: 1px solid var(--lvc-line);
  border-radius: var(--lvc-radius-sm);
  padding: 14px 16px;
  background: color-mix(in oklab, var(--lvc-panel) 50%, transparent);
}
.lvc-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .98rem;
  list-style: none;
}
.lvc-faq summary::-webkit-details-marker { display: none; }
.lvc-faq summary::after {
  content: "+";
  float: right;
  color: var(--lvc-blue);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .15s ease;
}
.lvc-faq details[open] summary::after { content: "−"; }
.lvc-faq p {
  margin: 10px 0 0;
  font-size: .92rem;
  color: var(--lvc-fg-dim);
  line-height: 1.55;
}

/* Mobile tweaks finos */
@media (max-width: 520px) {
  #lv-contact.lvc-root { padding: 108px 16px 56px; }
  .lvc-form-card { padding: 18px; }
  .lvc-channel-sub { font-size: .72rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #lv-contact *,
  #lv-contact *::before,
  #lv-contact *::after {
    transition: none !important;
    animation: none !important;
  }
}