/* ============================================================
   SOUL STUDIO · /contatti/ · pagina dedicata
   Prefisso: ct-
   Form smartform: gestito globalmente da style.css (ss-smartform)
   ============================================================ */

:root {
  --ct-bg: #0a0a0a;
  --ct-bg-soft: #14110d;
  --ct-bordeaux: #8b1a22;
  --ct-red: #c0313c;
  --ct-red-light: #d44a55;
  --ct-red-glow: rgba(192, 49, 60, 0.55);
  --ct-text: rgba(255, 255, 255, 0.95);
  --ct-text-soft: rgba(255, 255, 255, 0.62);
  --ct-text-mute: rgba(255, 255, 255, 0.35);
  --ct-border: rgba(255, 255, 255, 0.08);
  --ct-whatsapp: #25D366;
  --ct-whatsapp-glow: rgba(37, 211, 102, 0.4);
}

.contatti-page { background: var(--ct-bg); color: var(--ct-text); overflow-x: hidden; }
.contatti-page * { box-sizing: border-box; }

/* UTILITIES SOUL */
.contatti-page .ct-kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ct-red);
  display: inline-flex; align-items: center; gap: 8px;
}
.contatti-page .ct-kicker::before {
  content: ''; width: 6px; height: 6px;
  background: var(--ct-red); border-radius: 50%;
  animation: ctPulse 1.8s ease-in-out infinite;
}
@keyframes ctPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.7);} }

.contatti-page .ct-h1 { font-size: clamp(40px, 6vw, 96px); font-weight: 900; line-height: 0.96; letter-spacing: -0.035em; text-transform: lowercase; font-family: 'Inter', sans-serif; }
.contatti-page .ct-h2 { font-size: clamp(30px, 4vw, 56px); font-weight: 900; line-height: 0.96; letter-spacing: -0.035em; text-transform: lowercase; font-family: 'Inter', sans-serif; }

.contatti-page .ct-grad {
  background: linear-gradient(135deg, var(--ct-bordeaux), var(--ct-red), var(--ct-red-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contatti-page .ct-emoji { display: inline-block; transform: rotate(-8deg); font-size: 0.85em; margin-left: 0.15em; }

/* FLOATING EMOJI */
.contatti-page .ct-floating-emoji {
  position: absolute; pointer-events: none; user-select: none;
  z-index: 1; opacity: 0.18; filter: blur(0.5px);
  animation: floatA 18s ease-in-out infinite;
}
.contatti-page .ct-floating-emoji.b { animation: floatB 22s ease-in-out infinite; }
.contatti-page .ct-floating-emoji.c { animation: floatC 26s ease-in-out infinite; }
.contatti-page .ct-floating-emoji.d { animation: floatD 20s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translate(0,0) rotate(-12deg) scale(1); } 50% { transform: translate(20px,-30px) rotate(8deg) scale(1.05); } }
@keyframes floatB { 0%,100% { transform: translate(0,0) rotate(15deg) scale(1); } 50% { transform: translate(-25px,20px) rotate(-10deg) scale(0.95); } }
@keyframes floatC { 0%,100% { transform: translate(0,0) rotate(-5deg) scale(1); } 50% { transform: translate(15px,25px) rotate(20deg) scale(1.08); } }
@keyframes floatD { 0%,100% { transform: translate(0,0) rotate(8deg) scale(1); } 33% { transform: translate(-20px,-15px) rotate(-15deg) scale(1.05); } 66% { transform: translate(25px,10px) rotate(12deg) scale(0.95); } }

/* ============================================================
   01 · HERO + CHANNEL CARDS
   ============================================================ */
.contatti-page .ct-hero {
  position: relative;
  padding: 80px 32px 50px;
  text-align: center;
  overflow: hidden;
}
.contatti-page .ct-hero__beam {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1200px 800px at 50% 60%, var(--ct-red-glow), transparent 65%),
    radial-gradient(circle 500px at 30% 30%, rgba(192, 49, 60, 0.12), transparent 70%);
  pointer-events: none; z-index: 0;
}
.contatti-page .ct-hero__inner {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
}
.contatti-page .ct-hero__kicker { margin-bottom: 20px; }
.contatti-page .ct-h1 { margin-bottom: 22px; }
.contatti-page .ct-hero__sub {
  font-size: 16px; line-height: 1.55; color: var(--ct-text-soft);
  max-width: 540px; margin: 0 auto 40px;
}

.contatti-page .ct-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.contatti-page .ct-channel {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 28px 16px 22px;
  background: var(--ct-bg-soft);
  border: 1px solid var(--ct-border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--ct-text);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s, background 0.3s;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.contatti-page .ct-channel:hover {
  transform: translateY(-6px);
  border-color: var(--ct-red);
  box-shadow: 0 20px 40px rgba(192, 49, 60, 0.3);
  background: rgba(20, 17, 13, 0.95);
}
.contatti-page .ct-channel--whatsapp:hover {
  border-color: var(--ct-whatsapp);
  box-shadow: 0 20px 40px var(--ct-whatsapp-glow);
}
.contatti-page .ct-channel__icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
  display: inline-block;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.contatti-page .ct-channel__label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ct-text-mute);
  margin-bottom: 8px;
}
.contatti-page .ct-channel__value {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  margin-bottom: 8px;
  line-height: 1.2;
  color: var(--ct-text);
}
.contatti-page .ct-channel__hint {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ct-red-light);
  line-height: 1.3;
}
.contatti-page .ct-channel--whatsapp .ct-channel__hint { color: var(--ct-whatsapp); }

/* ============================================================
   02 · MAPPA + INFO
   ============================================================ */
.contatti-page .ct-map-section {
  position: relative;
  padding: 50px 32px;
  overflow: hidden;
}
.contatti-page .ct-map-section__beam {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 1100px 700px at 50% 50%, rgba(192, 49, 60, 0.32), transparent 65%);
  pointer-events: none; z-index: 0;
}
.contatti-page .ct-map-section__inner {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
}
.contatti-page .ct-map-section__head {
  text-align: center;
  margin-bottom: 40px;
}
.contatti-page .ct-map-section__head .ct-kicker { margin-bottom: 16px; }
.contatti-page .ct-map-section__head .ct-h2 { margin-bottom: 0; }

.contatti-page .ct-map-section__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: stretch;
}

.contatti-page .ct-map {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ct-border);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  min-height: 460px;
  background: var(--ct-bg-soft);
  position: relative;
}
.contatti-page .ct-map iframe {
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6);
}

.contatti-page .ct-info {
  display: flex; flex-direction: column;
  gap: 24px;
  padding: 28px 24px;
  background: var(--ct-bg-soft);
  border: 1px solid var(--ct-border);
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}
.contatti-page .ct-info__block {
  display: flex; flex-direction: column;
  gap: 8px;
}
.contatti-page .ct-info__label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ct-red);
}
.contatti-page .ct-info__value {
  font-size: 16px; font-weight: 700;
  line-height: 1.4;
  color: var(--ct-text);
}
.contatti-page .ct-info__hours {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.contatti-page .ct-info__hours li {
  display: flex; justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ct-text-soft);
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.contatti-page .ct-info__hours li:last-child { border-bottom: none; }
.contatti-page .ct-info__hours strong {
  color: var(--ct-text);
  font-weight: 700;
}
.contatti-page .ct-info__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ct-text-soft);
  margin: 0;
}
.contatti-page .ct-info__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--ct-bordeaux), var(--ct-red));
  color: white;
  border-radius: 999px;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none; text-transform: lowercase;
  box-shadow: 0 6px 18px rgba(192, 49, 60, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.contatti-page .ct-info__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(192, 49, 60, 0.55);
}

/* ============================================================
   03 · FAQ
   ============================================================ */
.contatti-page .ct-faq {
  position: relative;
  padding: 50px 32px;
  overflow: hidden;
}
.contatti-page .ct-faq__beam {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 1100px 700px at 50% 50%, rgba(192, 49, 60, 0.28), transparent 65%);
  pointer-events: none; z-index: 0;
}
.contatti-page .ct-faq__inner {
  position: relative; z-index: 5;
  max-width: 800px; margin: 0 auto;
}
.contatti-page .ct-faq__head {
  text-align: center;
  margin-bottom: 40px;
}
.contatti-page .ct-faq__head .ct-kicker { margin-bottom: 16px; }
.contatti-page .ct-faq__head .ct-h2 { margin-bottom: 18px; }
.contatti-page .ct-faq__sub {
  font-size: 15px; line-height: 1.55;
  color: var(--ct-text-soft);
  max-width: 540px; margin: 0 auto;
}

.contatti-page .ct-faq__list {
  display: flex; flex-direction: column;
  gap: 12px;
}
.contatti-page .ct-faq__item {
  background: var(--ct-bg-soft);
  border: 1px solid var(--ct-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.contatti-page .ct-faq__item[open] {
  border-color: var(--ct-red);
  box-shadow: 0 12px 24px rgba(192, 49, 60, 0.2);
}
.contatti-page .ct-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15px; font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ct-text);
  user-select: none;
}
.contatti-page .ct-faq__q::-webkit-details-marker { display: none; }
.contatti-page .ct-faq__q::marker { display: none; content: ''; }
.contatti-page .ct-faq__plus {
  flex-shrink: 0;
  font-size: 22px; font-weight: 700;
  color: var(--ct-red);
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ct-red);
  transition: transform 0.3s, background 0.3s;
}
.contatti-page .ct-faq__item[open] .ct-faq__plus {
  transform: rotate(45deg);
  background: var(--ct-red);
  color: white;
}
.contatti-page .ct-faq__a {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ct-text-soft);
}

/* ============================================================
   04 · CTA WHATSAPP FINALE
   ============================================================ */
.contatti-page .ct-final {
  position: relative;
  padding: 70px 32px 80px;
  text-align: center;
  overflow: hidden;
}
.contatti-page .ct-final__beam {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1100px 700px at 50% 50%, rgba(37, 211, 102, 0.18), transparent 60%),
    radial-gradient(ellipse 800px 500px at 50% 50%, rgba(192, 49, 60, 0.32), transparent 65%);
  pointer-events: none; z-index: 0;
}
.contatti-page .ct-final__inner {
  position: relative; z-index: 5;
  max-width: 720px; margin: 0 auto;
}
.contatti-page .ct-final__kicker { margin-bottom: 20px; }
.contatti-page .ct-final__title { margin-bottom: 20px; }
.contatti-page .ct-final__sub {
  font-size: 15px; line-height: 1.55;
  color: var(--ct-text-soft);
  max-width: 520px; margin: 0 auto 32px;
}
.contatti-page .ct-cta-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #1faa54, var(--ct-whatsapp));
  color: white; border-radius: 999px;
  font-weight: 800; font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none; text-transform: lowercase;
  box-shadow: 0 10px 30px var(--ct-whatsapp-glow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.contatti-page .ct-cta-whatsapp:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 40px var(--ct-whatsapp-glow);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .contatti-page .ct-channels { grid-template-columns: repeat(2, 1fr); }
  .contatti-page .ct-map-section__layout {
    grid-template-columns: 1fr;
  }
  .contatti-page .ct-map { min-height: 360px; }
}
@media (max-width: 560px) {
  .contatti-page .ct-hero { padding: 60px 20px 40px; }
  .contatti-page .ct-channels { grid-template-columns: 1fr; max-width: 360px; }
  .contatti-page .ct-map-section,
  .contatti-page .ct-faq { padding: 40px 20px; }
  .contatti-page .ct-final { padding: 50px 20px 60px; }
  .contatti-page .ct-info { padding: 22px 18px; }
  .contatti-page .ct-faq__q { padding: 16px 18px; font-size: 14px; }
  .contatti-page .ct-faq__a { padding: 0 18px 18px; font-size: 13px; }
}