/* ===========================
   09. CONTACTO / CTA FINAL — VARIANTE CLARA
   Fondo gris claro con acentos morado/naranja sutiles. El "shell" es blanco.
   Textos en carbon, sin alta saturación visual.
=========================== */
#contacto {
  background: var(--gray-light);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  color: var(--carbon);
}

/* Glow sutil de fondo con la paleta de marca (acentos sin invadir) */
#contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(107,31,184,0.07), transparent 45%),
    radial-gradient(ellipse at 88% 82%, rgba(255,107,26,0.06), transparent 45%);
}

/* Patrón de puntos sutiles, en gris claro */
#contacto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(42,14,95,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0.6;
}

/* Container "shell" blanco, estilo arquitectónico */
.contacto-shell {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid rgba(107,31,184,0.10);
  border-radius: 22px;
  background: var(--white);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 24px 64px rgba(42,14,95,0.10),
    0 6px 18px rgba(42,14,95,0.04);
  overflow: hidden;
}

/* ---- Bloque superior: hero del CTA ---- */
.contacto-hero {
  padding: 64px 56px 56px;
  text-align: center;
}
@media (max-width: 720px) { .contacto-hero { padding: 48px 24px 40px; } }

.contacto-hero h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--carbon);
  margin: 0 auto;
  max-width: 760px;
}

.contacto-hero h2 .accent {
  background: linear-gradient(90deg,
    var(--purple-primary) 0%,
    #8a3ee0 35%,
    var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-weight: 600;
}

.contacto-hero .sub {
  margin: 22px auto 36px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-text);
}

/* CTA principal: degradado de marca (resalta sobre fondo claro) */
.contacto-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 38px;
  background: var(--grad-btn);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-size: 17px; font-weight: 800;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 14px 36px rgba(107,31,184,0.30),
    0 4px 12px rgba(255,107,26,0.18);
  transition:
    background-position 0.5s var(--ease-out),
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}
.contacto-btn:hover {
  background-position: 100% 50%;
  transform: translateY(-3px);
  box-shadow:
    0 20px 48px rgba(255,107,26,0.40),
    0 6px 16px rgba(107,31,184,0.22);
}
.contacto-btn svg { transition: transform 0.35s var(--ease-out); }
.contacto-btn:hover svg { transform: translateX(4px); }

/* ---- Separador horizontal ---- */
.contacto-sep {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(107,31,184,0.15) 25%,
    rgba(255,107,26,0.45) 50%,
    rgba(107,31,184,0.15) 75%,
    transparent 100%);
}

/* ---- Grid de 3 cajas (Email · Teléfono · Ubicación) ---- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 820px) { .contacto-grid { grid-template-columns: 1fr; } }

.contacto-box {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(107,31,184,0.10);
  position: relative;
  transition: background 0.4s var(--ease-out);
}
.contacto-box:last-child { border-right: none; }
@media (max-width: 820px) {
  .contacto-box { border-right: none; border-bottom: 1px solid rgba(107,31,184,0.10); }
  .contacto-box:last-child { border-bottom: none; }
}

/* Veil suave que aparece al hover sobre toda la caja */
.contacto-box::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,107,26,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.contacto-box:hover::after { opacity: 1; }

/* Header de cada caja */
.contacto-box-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  background: rgba(107,31,184,0.04);
  border-bottom: 1px solid rgba(107,31,184,0.08);
}
.contacto-box-head svg {
  width: 18px; height: 18px;
  color: var(--purple-primary);
  stroke-width: 1.6;
  transition: color 0.3s, transform 0.3s var(--ease-out);
}
.contacto-box:hover .contacto-box-head svg {
  color: var(--orange);
  transform: scale(1.08);
}
.contacto-box-head h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--carbon);
  margin: 0;
}

/* Cuerpo de cada caja */
.contacto-box-body {
  padding: 36px 24px;
  flex: 1;
  display: flex; align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.contacto-box-body .lines {
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.contacto-box-body .row {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.contacto-box-body a,
.contacto-box-body .text {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--carbon);
  word-break: break-word;
  transition: color 0.2s;
}
.contacto-box-body a {
  border-bottom: 1px dashed transparent;
}
.contacto-box-body a:hover {
  color: var(--purple-primary);
  border-bottom-color: rgba(107,31,184,0.5);
}

/* Footer descriptivo de cada caja */
.contacto-box-foot {
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(107,31,184,0.08);
  font-size: 13px;
  color: var(--gray-text);
  line-height: 1.5;
}

/* ---- Botón de copiar ---- */
.copy-btn {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(107,31,184,0.06);
  border: 1px solid rgba(107,31,184,0.12);
  border-radius: 8px;
  color: var(--purple-primary);
  cursor: pointer;
  position: relative;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease-out);
}
.copy-btn:hover {
  background: rgba(107,31,184,0.12);
  border-color: rgba(107,31,184,0.28);
  color: var(--purple-primary);
  transform: scale(1.05);
}
.copy-btn:active { transform: scale(0.96); }
.copy-btn svg {
  width: 14px; height: 14px;
  transition: transform 0.2s var(--ease-out), opacity 0.2s ease;
  position: absolute;
}
.copy-btn .icon-check { color: #10b981; transform: scale(0.4); opacity: 0; }
.copy-btn.copied { color: #10b981; border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.10); }
.copy-btn.copied .icon-copy  { transform: scale(0.4); opacity: 0; }
.copy-btn.copied .icon-check { transform: scale(1); opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contacto-btn,
  .contacto-box,
  .contacto-box-head svg,
  .copy-btn {
    transition: none;
  }
  .contacto-btn:hover,
  .copy-btn:hover {
    transform: none;
  }
}