/* /styles/sections.css — EloClinic v5 */

/* ═══ HERO ═══ */
.s-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background: var(--color-brand-50);
}

/* Gradiente de fundo + malha de pontos */
.s-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(100,150,100,0.14) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 100%);
}

/* Arco decorativo — contido pelo overflow:hidden do section */
.s-hero::after {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  right: -140px; top: -140px;
  border-radius: 50%;
  border: 1px solid rgba(100,150,100,0.12);
  pointer-events: none;
  z-index: 0;
  animation: arcPulse 9s ease-in-out infinite alternate;
  box-shadow:
    0 0 0 60px rgba(100,150,100,0.04),
    0 0 0 120px rgba(100,150,100,0.025);
}

@keyframes arcPulse {
  0%   { transform: scale(1) rotate(0deg); opacity: 0.7; }
  100% { transform: scale(1.04) rotate(5deg); opacity: 1; }
}
@keyframes heroFloat {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.s-hero > * { position: relative; z-index: 1; }

.s-hero__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 1024px) {
  .s-hero__grid { grid-template-columns: 1fr 1fr; }
}

.s-hero__content { max-width: 620px; }

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}

/* Visual hero */
.s-hero__visual {
  position: relative;
  animation: heroFloat 6s ease-in-out infinite alternate;
}

.s-hero__visual::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--radius-24) + 8px);
  background: radial-gradient(ellipse at 40% 40%, rgba(100,150,100,0.18) 0%, transparent 65%);
  z-index: -1;
  filter: blur(14px);
}

.s-hero__visual-inner {
  border-radius: var(--radius-24);
  overflow: hidden;
  border: 1px solid rgba(100,150,100,0.18);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.09),
    0 6px 20px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.7);
  position: relative;
  background: linear-gradient(135deg, var(--color-brand-50) 0%, var(--color-brand-100) 100%);
  min-height: 260px;
}

.s-hero__visual-inner::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  z-index: 3;
  animation: shimmer 5s ease-in-out 2s infinite;
  pointer-events: none;
}

.c-hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top left;
  display: block;
}


.s-section { position: relative; overflow: hidden; }
.s-section + .s-section { border-top: 1px solid var(--color-brand-100); }

/* ═══════════════════════════════════════════════════════════════════
   PARA QUEM
═══════════════════════════════════════════════════════════════════ */

#para-quem {
  background:
    radial-gradient(ellipse 50% 60% at 95% 50%, rgba(144,217,176,0.12) 0%, transparent 60%),
    var(--color-bg);
}
#para-quem .c-grid { align-items: stretch; }

/* ═══════════════════════════════════════════════════════════════════
   DIFERENCIAL
═══════════════════════════════════════════════════════════════════ */

#diferencial {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(192,235,211,0.60) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 5% 80%, rgba(74,158,110,0.10) 0%, transparent 50%),
    var(--color-bg);
}

/* Linha decorativa horizontal */
#diferencial::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(74,158,110,0.4), transparent);
}

#diferencial .c-pillars { margin-top: var(--space-10); }

#diferencial .c-pillar {
  border-color: var(--color-brand-200);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-200) var(--ease-out), box-shadow var(--dur-200) var(--ease-out), border-color var(--dur-200) var(--ease-out);
  position: relative; overflow: hidden;
}

/* Brilho no topo do pillar */
#diferencial .c-pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74,158,110,0.5), transparent);
  opacity: 0;
  transition: opacity var(--dur-200);
}
#diferencial .c-pillar:hover::before { opacity: 1; }

#diferencial .c-pillar:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-brand-md);
  border-color: var(--color-brand-300);
}

/* ═══════════════════════════════════════════════════════════════════
   FUNCIONALIDADES
═══════════════════════════════════════════════════════════════════ */

#funcionalidades {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(144,217,176,0.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(74,158,110,0.08) 0%, transparent 50%),
    var(--color-bg);
}

#funcionalidades .c-feature-grid {
  display: grid; gap: var(--space-10); margin-top: var(--space-10);
}

#funcionalidades .c-feature {
  display: grid; gap: var(--space-6); align-items: center;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-200) var(--ease-out), box-shadow var(--dur-200) var(--ease-out), border-color var(--dur-200) var(--ease-out);
  position: relative; overflow: hidden;
}

/* Brilho lateral no hover do feature */
#funcionalidades .c-feature::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--color-brand-400), transparent);
  opacity: 0;
  transition: opacity var(--dur-200);
}
#funcionalidades .c-feature:hover::before { opacity: 1; }

#funcionalidades .c-feature:nth-child(-n + 3) {
  border-color: var(--color-brand-300);
  box-shadow: var(--shadow-brand-sm);
  background:
    linear-gradient(160deg, rgba(244,252,247,0.95), rgba(255,255,255,1)),
    var(--color-surface);
}

#funcionalidades .c-feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-brand-md);
  border-color: var(--color-brand-400);
}

/* ─── Screenshot: frame premium com múltiplos efeitos ─── */

#funcionalidades .c-feature__media {
  position: relative;
  border-radius: var(--radius-18);
  overflow: hidden;
  background: var(--color-brand-50);

  /* Moldura dupla: borda fina + sombra verde */
  box-shadow:
    0 0 0 1px var(--color-brand-200),
    0 0 0 5px rgba(74,158,110,0.06),
    var(--shadow-md),
    0 20px 40px rgba(74,158,110,0.12);

  transition:
    transform var(--dur-300) var(--ease-out),
    box-shadow var(--dur-300) var(--ease-out);
}

/* Reflexo de brilho no topo */
#funcionalidades .c-feature__media::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  );
  pointer-events: none; z-index: 3;
  border-radius: var(--radius-18) var(--radius-18) 0 0;
}

/* Overlay verde diagonal */
#funcionalidades .c-feature__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(144,217,176,0.10) 0%, transparent 45%),
    linear-gradient(315deg, rgba(74,158,110,0.06) 0%, transparent 40%);
  pointer-events: none; z-index: 2;
}

/* Barra de "janela" no topo (simula chrome de app) */
.c-feature__media--chrome {
  padding-top: 28px;
}
.c-feature__media--chrome::before {
  height: 28px;
  background: linear-gradient(180deg, rgba(74,158,110,0.08) 0%, rgba(255,255,255,0.05) 60%, transparent 100%);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
}

#funcionalidades .c-feature__media img {
  width: 100%; height: auto; display: block;
  transition: transform var(--dur-500) var(--ease-out);
}

#funcionalidades .c-feature__media:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow:
    0 0 0 1px var(--color-brand-300),
    0 0 0 5px rgba(74,158,110,0.10),
    var(--shadow-lg),
    0 30px 60px rgba(74,158,110,0.18);
}

#funcionalidades .c-feature__media:hover img {
  transform: scale(1.025);
}

#funcionalidades .c-feature__body { max-width: 640px; }

@media (min-width: 980px) {
  #funcionalidades .c-feature {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  }
  #funcionalidades .c-feature:nth-child(even) .c-feature__body { order: 2; }
  #funcionalidades .c-feature:nth-child(even) .c-feature__media { order: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════════════ */

#faq {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(192,235,211,0.50) 0%, transparent 55%),
    var(--color-bg-muted);
}
#faq .c-faq { margin-top: var(--space-6); }

/* ═══════════════════════════════════════════════════════════════════
   CTA FINAL
═══════════════════════════════════════════════════════════════════ */

/* ── Seção CTA: fundo verde escuro com linhas decorativas ── */
.s-section--cta {
  position: relative;
  overflow: hidden;
  background: var(--color-brand-900);
}

/* Linhas curvas suaves de fundo */
.s-section--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='500' viewBox='0 0 1400 500' fill='none'%3E%3Cpath d='M-200 150 Q200 20 500 160 Q800 300 1100 120 Q1300 30 1600 100' stroke='%2390d9b0' stroke-width='1.5' fill='none' opacity='0.15'/%3E%3Cpath d='M-200 280 Q150 150 450 280 Q750 420 1050 240 Q1280 120 1600 200' stroke='%2390d9b0' stroke-width='1' fill='none' opacity='0.10'/%3E%3Cpath d='M-200 400 Q100 280 400 380 Q700 480 1000 340 Q1250 240 1600 320' stroke='%2390d9b0' stroke-width='0.8' fill='none' opacity='0.07'/%3E%3Cpath d='M0 80 Q300 -20 600 80 Q900 180 1200 60 Q1380 0 1600 50' stroke='%234a7a4a' stroke-width='1.2' fill='none' opacity='0.20'/%3E%3Cpath d='M-100 460 Q200 360 500 450 Q800 540 1100 400 Q1350 300 1600 420' stroke='%234a7a4a' stroke-width='0.8' fill='none' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/* Glow radial suave */
.s-section--cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 20% 50%, rgba(74,158,110,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 85% 30%, rgba(50,107,75,0.12) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.s-section--cta > * { position: relative; z-index: 1; }

/* Card CTA interno — mais claro que o fundo escuro */
.c-cta {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(144,217,176,0.20);
  border-radius: var(--radius-24);
  padding: var(--space-10);
  box-shadow: 0 8px 40px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform var(--dur-200) var(--ease-out), box-shadow var(--dur-200) var(--ease-out);
  position: relative; overflow: hidden;
  backdrop-filter: blur(8px);
}

/* Linha decorativa no topo do CTA */
.c-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(144,217,176,0.50), transparent);
  z-index: 1;
}

.c-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Textos sobre fundo escuro */
.c-cta .c-h2,
.c-cta h2 { color: #ffffff; }

.c-cta .c-subtitle { color: var(--color-brand-200); }
.c-cta .c-cta__header h2::after {
  background: linear-gradient(90deg, var(--color-brand-300), var(--color-brand-500));
}

.c-cta__header { margin-bottom: var(--space-8); }
.c-cta__grid { display: grid; gap: var(--space-8); }
.c-cta__copy p { color: var(--color-brand-100); }
.c-cta__copy .c-list li { color: var(--color-brand-100); }
.c-cta__copy .c-list li::before { color: var(--color-brand-400); }

@media (min-width: 980px) {
  .c-cta__grid { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
}

/* Formulário sobre fundo escuro */
.c-cta__grid form {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-16);
  padding: var(--space-5);
  border: 1px solid rgba(144,217,176,0.18);
  backdrop-filter: blur(6px);
}

/* Inputs sobre fundo escuro */
.c-cta__grid form label { color: var(--color-brand-200); }
.c-cta__grid form input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(144,217,176,0.25);
  color: #ffffff;
}
.c-cta__grid form input::placeholder { color: rgba(255,255,255,0.30); }
.c-cta__grid form input:focus {
  border-color: var(--color-brand-400);
  box-shadow: 0 0 0 3px rgba(144,217,176,0.15);
}
.c-cta__grid .c-form__hint { color: var(--color-brand-300); opacity: 0.7; }
.c-cta__grid .c-caption { color: var(--color-brand-300); }

/* Botão ghost no fundo escuro */
.c-cta__grid form .c-button--ghost {
  background: rgba(144,217,176,0.12);
  color: #ffffff;
  border-color: rgba(144,217,176,0.35);
}
.c-cta__grid form .c-button--ghost:hover {
  background: rgba(144,217,176,0.22);
  border-color: rgba(144,217,176,0.55);
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION SAFETY
═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .s-hero::after, .s-hero__deco::before, .s-hero__deco::after { animation: none; }
  .s-hero__visual { animation: none; }
  .s-hero__visual-inner::after { animation: none; }
  #funcionalidades .c-feature, #funcionalidades .c-feature__media img,
  .c-cta, #diferencial .c-pillar { transition: none; }
  #funcionalidades .c-feature:hover, #funcionalidades .c-feature__media:hover,
  .c-cta:hover, #diferencial .c-pillar:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .s-hero { padding-top: calc(var(--section-pad-y) + var(--space-4)); }
  .s-hero__visual { animation: none; }
  .s-hero__actions { flex-direction: column; align-items: stretch; }
  #funcionalidades .c-feature { padding: var(--space-5); }
  .c-cta { padding: var(--space-6); }
}