/* ============================================================
   PERFIL — foto, título e texto de apresentação
   ============================================================ */

/* ---- Céu estrelado na seção de perfil ---- */

[data-page="sobre"] .perfil {
  position: relative;
  isolation: isolate;
}

/* Camada base — névoa sutil + 26 estrelas miúdas */
[data-page="sobre"] .perfil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-stars);
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    /* névoa âmbar no canto superior-direito */
    radial-gradient(
      ellipse 38% 28% at 86% 12%,
      rgba(216, 106, 2, 0.08),
      transparent 100%
    ),
    /* névoa fria difusa no canto inferior-esquerdo */
    radial-gradient(
      ellipse 32% 35% at 10% 82%,
      rgba(232, 224, 212, 0.05),
      transparent 100%
    ),
    /* névoa laranja suave no centro-baixo */
    radial-gradient(
      ellipse 22% 18% at 55% 92%,
      rgba(255, 159, 40, 0.06),
      transparent 100%
    ),
    /* estrelas miúdas — brancas quentes e âmbar, espalhadas */
    radial-gradient(1.5px 1.5px at 6% 12%, rgba(232, 224, 212, 0.96), transparent 100%),
    radial-gradient(1px 1px at 14% 42%, rgba(232, 224, 212, 0.72), transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 68%, rgba(255, 159, 40, 0.82), transparent 100%),
    radial-gradient(1px 1px at 31% 18%, rgba(232, 224, 212, 0.68), transparent 100%),
    radial-gradient(1px 1px at 38% 85%, rgba(232, 224, 212, 0.74), transparent 100%),
    radial-gradient(1.5px 1.5px at 46% 32%, rgba(255, 159, 40, 0.72), transparent 100%),
    radial-gradient(1px 1px at 53% 6%, rgba(232, 224, 212, 0.8), transparent 100%),
    radial-gradient(1px 1px at 58% 58%, rgba(232, 224, 212, 0.62), transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 24%, rgba(232, 224, 212, 0.9), transparent 100%),
    radial-gradient(1px 1px at 70% 76%, rgba(255, 159, 40, 0.68), transparent 100%),
    radial-gradient(1px 1px at 76% 14%, rgba(232, 224, 212, 0.76), transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 50%, rgba(232, 224, 212, 0.86), transparent 100%),
    radial-gradient(1px 1px at 88% 88%, rgba(232, 224, 212, 0.7), transparent 100%),
    radial-gradient(1px 1px at 94% 36%, rgba(255, 159, 40, 0.64), transparent 100%),
    radial-gradient(1px 1px at 4% 92%, rgba(232, 224, 212, 0.58), transparent 100%),
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(255, 159, 40, 0.75), transparent 100%),
    radial-gradient(1px 1px at 27% 50%, rgba(232, 224, 212, 0.56), transparent 100%),
    radial-gradient(1px 1px at 44% 72%, rgba(232, 224, 212, 0.64), transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 96%, rgba(232, 224, 212, 0.7), transparent 100%),
    radial-gradient(1px 1px at 72% 40%, rgba(255, 159, 40, 0.58), transparent 100%),
    radial-gradient(1px 1px at 84% 68%, rgba(232, 224, 212, 0.66), transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 22%, rgba(232, 224, 212, 0.82), transparent 100%),
    radial-gradient(1px 1px at 97% 60%, rgba(232, 224, 212, 0.6), transparent 100%),
    radial-gradient(1px 1px at 35% 4%, rgba(255, 159, 40, 0.72), transparent 100%),
    radial-gradient(1px 1px at 50% 48%, rgba(232, 224, 212, 0.54), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 96%, rgba(232, 224, 212, 0.68), transparent 100%);
  animation: sobre-twinkle 9s ease-in-out infinite alternate;
}

/* Camada de cima — 8 estrelas maiores com auréola pulsando fora de fase */
[data-page="sobre"] .perfil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-stars);
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(
      4px 4px at 8% 20%,
      rgba(255, 241, 214, 0.96) 0%,
      rgba(255, 159, 40, 0.42) 40%,
      transparent 100%
    ),
    radial-gradient(
      4.5px 4.5px at 32% 74%,
      rgba(232, 224, 212, 0.96) 0%,
      rgba(216, 106, 2, 0.4) 40%,
      transparent 100%
    ),
    radial-gradient(
      3.5px 3.5px at 54% 12%,
      rgba(255, 241, 214, 0.92) 0%,
      rgba(255, 159, 40, 0.36) 40%,
      transparent 100%
    ),
    radial-gradient(
      4px 4px at 72% 56%,
      rgba(232, 224, 212, 0.96) 0%,
      rgba(255, 159, 40, 0.36) 40%,
      transparent 100%
    ),
    radial-gradient(
      3.5px 3.5px at 87% 26%,
      rgba(255, 241, 214, 0.92) 0%,
      rgba(216, 106, 2, 0.4) 40%,
      transparent 100%
    ),
    radial-gradient(
      4px 4px at 18% 88%,
      rgba(232, 224, 212, 0.92) 0%,
      rgba(255, 159, 40, 0.32) 40%,
      transparent 100%
    ),
    radial-gradient(
      3.5px 3.5px at 62% 88%,
      rgba(255, 241, 214, 0.9) 0%,
      rgba(216, 106, 2, 0.32) 40%,
      transparent 100%
    ),
    radial-gradient(
      4px 4px at 95% 72%,
      rgba(232, 224, 212, 0.94) 0%,
      rgba(255, 159, 40, 0.34) 40%,
      transparent 100%
    );
  animation: sobre-shine 4.5s ease-in-out infinite alternate;
}

@keyframes sobre-twinkle {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}

@keyframes sobre-shine {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

.perfil__inner {
  display: grid;
  grid-template-columns: 0.75fr 1.4fr;
  gap: var(--space-2xl);
  align-items: start;
}

.perfil__foto {
  position: relative;
}

.perfil__foto::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(216, 106, 2, 0.3),
    transparent 60%
  );
  z-index: 0;
  pointer-events: none;
}

.perfil__foto img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: block;
}

.perfil__titulo {
  font-size: var(--text-3xl);
}

.perfil__texto {
  font-size: var(--text-lg);
  color: var(--text-2);
  line-height: 1.7;
}

/* ============================================================
   VALORES — princípios que guiam o trabalho
   ============================================================ */

.valores {
  background-color: var(--bg-1);
  border-block: 1px solid var(--border-subtle);
}

.valores .section-header {
  margin-block-end: var(--space-2xl);
}

.valores__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.valor-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-base) var(--ease-out),
    background-color var(--transition-base) var(--ease-out);
}

.valor-card:hover {
  border-color: var(--border-default);
  background-color: var(--bg-3);
}

.valor-card__icone {
  width: 2rem;
  height: 2rem;
  color: var(--accent-secondary);
  flex-shrink: 0;
}

.valor-card__icone svg {
  width: 100%;
  height: 100%;
}

.valor-card__titulo {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-1);
}

.valor-card__texto {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.65;
  flex: 1;
}

/* ============================================================
   FERRAMENTAS — tecnologias utilizadas
   ============================================================ */

.ferramentas {
  background-color: var(--bg-3);
}

.ferramentas .section-header {
  margin-block-end: var(--space-2xl);
}

.ferramentas__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-xl) var(--space-2xl);
}

.ferramentas__grupo-nome {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-secondary);
  margin-block-end: var(--space-sm);
}

.ferramentas__lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.ferramentas__lista li {
  font-size: var(--text-sm);
  color: var(--text-2);
  padding-inline-start: var(--space-sm);
  position: relative;
}

.ferramentas__lista li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--accent-secondary);
  font-size: 1.2em;
  line-height: 1;
  top: 0.1em;
}

/* ============================================================
   CTA — convite para iniciar um projeto
   ============================================================ */

.sobre-cta {
  background-color: var(--bg-2);
  border-block-start: 1px solid var(--border-subtle);
}

.sobre-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
}

.sobre-cta__titulo {
  font-size: var(--text-3xl);
  max-width: 20ch;
}

.sobre-cta__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 56rem) {
  .perfil__inner {
    grid-template-columns: 1fr;
  }

  .perfil__foto {
    order: 1;
  }

  .perfil__foto img {
    aspect-ratio: 3 / 2;
    max-height: 28rem;
  }

  .valores__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36rem) {
  .valores__grid {
    grid-template-columns: 1fr;
  }

  .ferramentas__grupos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}