/* ==========================================================================
   Colora Linktree — Estilo Autêntico do App
   Tipografia: SF Pro Rounded
   Cores e componentes fiéis a KiboHome.swift, KiboColor.swift e HomeSignButton.swift
   ========================================================================== */

:root {
  /* Cores oficiais da sala do Colora */
  --kibo-wall: #EBE9E5;
  --kibo-wall-darker: #E0DDD8;
  --kibo-wood-baseboard: #4A3122;
  --kibo-wood-shadow: #362215;
  
  /* Cores da marca Colora */
  --colora-green-primary: #206649;
  --colora-green-light: #3B8149;
  --colora-lime: #A1BD44;

  /* Cores da placa suspensa (HomeSignButton.swift) */
  --kibo-sign: #4BA821;
  --kibo-sign-shadow: #54883D;
  --kibo-sign-hanger: #AB7861;
  --kibo-sign-hanger-shadow: #9E522A;

  /* Cores de apoio do app */
  --kibo-text-title: #206649;
  --kibo-text-body: #615A52;
  --kibo-card-bg: #FFFDF8;
  --kibo-card-border: #E0DAD0;
  
  /* LinkedIn Oficial */
  --linkedin-blue: #0A66C2;
  --linkedin-shadow: #004182;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  /* Fonte SF Pro Rounded com fallbacks nativos Apple e Nunito */
  font-family: "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Nunito", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background-color: var(--kibo-wall);
  color: var(--kibo-text-title);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-x: hidden;
}

/* Container da sala */
.room-container {
  width: 100%;
  max-width: 500px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 0 20px;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Header: Mascote & Logo Oficial Colora (SVG)
   ========================================================================== */

.mascot-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
}

.app-icon-wrapper {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 28px;
  border: 3.5px solid #FFFFFF;
  overflow: hidden;
  box-shadow: 0 12px 28px -4px rgba(74, 49, 34, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.app-icon-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 34px -4px rgba(74, 49, 34, 0.26), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.app-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo Colora SVG */
.colora-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 260px;
  margin-bottom: 8px;
}

.colora-logo-svg {
  width: 100%;
  height: auto;
  color: var(--colora-green-primary);
  display: block;
  filter: drop-shadow(0 4px 8px rgba(32, 102, 73, 0.16));
}

.app-tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--kibo-text-body);
  line-height: 1.4;
  margin-bottom: 12px;
}

.device-badge-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.room-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #E2DDD5;
  color: #4F463E;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #D5CEBF;
}

/* ==========================================================================
   Placa de Download Suspensa (HomeSignButton do app)
   ========================================================================== */

.download-cta-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.home-sign-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  width: 100%;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-sign-button:hover {
  transform: translateY(-2px);
}

.home-sign-button:active {
  transform: translateY(6px);
}

/* Fita / Hanger de madeira no topo (tortinha como no app e borda menor) */
.sign-hanger {
  width: 56px;
  height: 18px;
  background-color: var(--kibo-sign-hanger);
  border-radius: 2px;
  box-shadow: 0 1.5px 0 var(--kibo-sign-hanger-shadow), 0 2px 4px rgba(74, 49, 34, 0.2);
  z-index: 10;
  margin-bottom: -9px;
  position: relative;
  transform: rotate(-2.8deg);
  transform-origin: center center;
}

.sign-hanger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background-color: var(--kibo-sign-hanger-shadow);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* Placa verde do app com relevo 3D chanfrado alinhada à esquerda */
.sign-pill {
  width: 100%;
  padding: 16px 24px;
  background-color: var(--kibo-sign);
  box-shadow: 0 6px 0 var(--kibo-sign-shadow), 0 14px 24px rgba(84, 136, 61, 0.25);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #FFFFFF;
  transition: box-shadow 0.12s ease;
  position: relative;
  z-index: 2;
}

.home-sign-button:hover .sign-pill {
  box-shadow: 0 8px 0 var(--kibo-sign-shadow), 0 18px 28px rgba(84, 136, 61, 0.3);
}

.home-sign-button:active .sign-pill {
  box-shadow: 0 0 0 transparent;
}

/* Estado Android: Botão cinza (a fitinha de madeira permanece normal) */
.home-sign-button.disabled {
  cursor: default;
  pointer-events: none;
}

.home-sign-button.disabled:hover,
.home-sign-button.disabled:active {
  transform: none;
}

.home-sign-button.disabled .sign-pill {
  background-color: #A39E97;
  box-shadow: 0 6px 0 #78736C, 0 10px 18px rgba(0, 0, 0, 0.08);
  color: #FFFFFF;
}

.home-sign-button.disabled .sign-icon {
  opacity: 0.85;
}

.home-sign-button.disabled .sign-subtitle {
  opacity: 0.85;
}

.sign-icon {
  width: 32px;
  height: 32px;
  fill: #FFFFFF;
  flex-shrink: 0;
}

.sign-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.sign-main-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.sign-subtitle {
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.92;
}

/* ==========================================================================
   Botão do Instagram (@app.colora)
   ========================================================================== */

.instagram-action-button {
  margin-top: 20px;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  background-color: var(--kibo-card-bg);
  border: 1.5px solid var(--kibo-card-border);
  border-radius: 9999px;
  color: var(--kibo-text-title);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 3px 0 #D5CEBF, 0 8px 18px rgba(74, 49, 34, 0.07);
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.instagram-action-button strong {
  color: #D62976;
  font-weight: 800;
}

.instagram-icon {
  width: 18px;
  height: 18px;
  stroke: #D62976;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.instagram-action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #D5CEBF, 0 10px 18px rgba(214, 41, 118, 0.15);
  border-color: #E8BFD1;
}

.instagram-action-button:hover .instagram-icon {
  transform: scale(1.12) rotate(4deg);
}

.instagram-action-button:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 transparent;
}

/* ==========================================================================
   Quadro de Equipe (Estilo prancheta / madeira da casa do Kibo)
   ========================================================================== */

.team-card {
  width: 100%;
  background-color: var(--kibo-card-bg);
  border: 2px solid var(--kibo-card-border);
  border-radius: 28px;
  padding: 24px 20px;
  box-shadow: 0 8px 22px rgba(74, 49, 34, 0.08);
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
}

.team-card-header {
  text-align: center;
  margin-bottom: 18px;
}

.team-card-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--kibo-text-title);
  margin-bottom: 4px;
}

.team-card-subtitle {
  font-size: 14px;
  color: var(--kibo-text-body);
  font-weight: 600;
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

/* Card individual do membro da equipe (estilo tátil 3D do Colora) */
.member-card {
  flex: 0 1 calc(50% - 7px);
  min-width: 135px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 14px 18px;
  background-color: #F8F5EE;
  border: 1.5px solid #E2DCD1;
  border-radius: 24px;
  text-decoration: none;
  box-shadow: 0 4px 0 #D3CBBE, 0 8px 18px rgba(74, 49, 34, 0.05);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  position: relative;
}

.member-card:hover {
  transform: translateY(-4px);
  background-color: #FFFFFF;
  border-color: #D6CEC1;
  box-shadow: 0 8px 0 #C9C0B1, 0 14px 26px rgba(74, 49, 34, 0.1);
}

.member-card:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent, 0 2px 6px rgba(74, 49, 34, 0.06);
}

/* Avatar circular grande com relevo */
.member-avatar-wrapper {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(74, 49, 34, 0.16);
  border: 3.5px solid #FFFFFF;
  background: #E8E2D8;
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.member-card:hover .member-avatar-wrapper {
  transform: scale(1.06);
}

.member-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.member-initials {
  width: 100%;
  height: 100%;
  color: #4F463E;
  font-weight: 800;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Badge sutil de LinkedIn na foto */
.member-linkedin-badge {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 26px;
  height: 26px;
  background-color: var(--linkedin-blue);
  box-shadow: 0 2px 6px rgba(0, 65, 130, 0.35);
  border: 2.5px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.member-card:hover .member-linkedin-badge {
  transform: scale(1.15);
}

.linkedin-svg {
  width: 13px;
  height: 13px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Primeiro nome (destacado e maior) */
.member-name {
  font-size: 19px;
  font-weight: 800;
  color: #2E2A4F;
  line-height: 1.25;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

/* Role / Cargo (estilo chip/pill com cores exclusivas) */
.member-role {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Martina: #FBB141 (Âmbar / Laranja Suave) */
.member-role.tag-martina {
  background-color: #FEF3E2;
  color: #965400;
  border: 1.5px solid #FBB141;
}
.member-card:hover .member-role.tag-martina {
  background-color: #FDE8C0;
  box-shadow: 0 2px 8px rgba(251, 177, 65, 0.28);
}

/* Adriel: #34B07A (Verde Colora / Esmeralda) */
.member-role.tag-adriel {
  background-color: #E6F7EF;
  color: #146842;
  border: 1.5px solid #34B07A;
}
.member-card:hover .member-role.tag-adriel {
  background-color: #CEEFDC;
  box-shadow: 0 2px 8px rgba(52, 176, 122, 0.28);
}

/* Gustavo: #0081B2 (Azul Oceano Vibrante) */
.member-role.tag-gustavo {
  background-color: #E5F4F9;
  color: #005779;
  border: 1.5px solid #0081B2;
}
.member-card:hover .member-role.tag-gustavo {
  background-color: #C6E7F3;
  box-shadow: 0 2px 8px rgba(0, 129, 178, 0.28);
}

/* João: #BBA8E8 (Lavanda / Roxo Suave) */
.member-role.tag-joao {
  background-color: #F4F1FB;
  color: #51348B;
  border: 1.5px solid #BBA8E8;
}
.member-card:hover .member-role.tag-joao {
  background-color: #E6DEF7;
  box-shadow: 0 2px 8px rgba(187, 168, 232, 0.32);
}

/* Fernanda: #F27792 (Rosa Chiclete / Berry) */
.member-role.tag-fernanda {
  background-color: #FDEEF2;
  color: #A01C3C;
  border: 1.5px solid #F27792;
}
.member-card:hover .member-role.tag-fernanda {
  background-color: #FCD7E0;
  box-shadow: 0 2px 8px rgba(242, 119, 146, 0.28);
}

/* ==========================================================================
   Rodapé & Chão de Taco (Parquet) da Sala
   ========================================================================== */

/* Rodapé e Piso de Madeira do App na parte inferior */
.room-floor-wrapper {
  width: 100%;
  align-self: stretch;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.room-baseboard {
  width: 100%;
  height: 22px;
  background-image: url('../assets/baseboard.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: block;
}

.room-parquet-floor {
  width: 100%;
  height: 85px;
  min-height: 85px;
  background-color: #F0BC89; /* Tom de madeira base contínuo para nunca quebrar */
  background-image: url('../assets/floor.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
}

.room-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.academy-credit {
  font-size: 13.5px;
  font-weight: 700;
  color: #53331C;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0;
}

.apple-footer-logo {
  width: 13px;
  height: 16px;
  fill: currentColor;
}

/* ==========================================================================
   Indicador de Rolagem Flutuante: Duplo Chevron em Fluxo (Opção 4)
   ========================================================================== */

.scroll-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px 10px 16px;
  background-color: rgba(255, 253, 248, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--colora-green-primary);
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(32, 102, 73, 0.18), 0 2px 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease, box-shadow 0.15s ease;
}

.scroll-indicator.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.scroll-indicator:hover {
  background-color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(32, 102, 73, 0.25);
  transform: translateX(-50%) translateY(-2px);
}

.scroll-indicator:active {
  transform: translateX(-50%) translateY(2px);
  box-shadow: 0 2px 8px rgba(32, 102, 73, 0.12);
}

.scroll-indicator-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scroll-indicator-text {
  font-size: 13px;
  font-weight: 800;
  color: var(--colora-green-primary);
  font-family: inherit;
  line-height: 1;
}

.scroll-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 18px;
}

.scroll-chevrons svg {
  width: 14px;
  height: 10px;
  stroke: var(--colora-green-primary);
  stroke-width: 3;
}

.scroll-chevrons svg:nth-child(1) {
  animation: chevronPulse1 1.4s infinite;
}

.scroll-chevrons svg:nth-child(2) {
  margin-top: -3px;
  animation: chevronPulse2 1.4s infinite;
}

@keyframes chevronPulse1 {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-1px);
  }
  50% {
    opacity: 1;
    transform: translateY(2px);
  }
}

@keyframes chevronPulse2 {
  0%, 100% {
    opacity: 0.8;
    transform: translateY(-1px);
  }
  50% {
    opacity: 0.3;
    transform: translateY(2px);
  }
}

/* Responsividade Mobile */
@media (max-width: 440px) {
  .room-container {
    padding: 20px 14px 0 14px;
  }
  .colora-logo-container {
    max-width: 220px;
  }
  .app-tagline {
    font-size: 15.5px;
  }
  .kibo-mascot-wrapper {
    width: 150px;
    height: 145px;
  }
  .sign-pill {
    padding: 16px 20px;
  }
  .sign-main-title {
    font-size: 19px;
  }
  .team-card {
    padding: 20px 12px;
  }
  .team-grid {
    gap: 10px;
  }
  .member-card {
    flex: 0 1 calc(50% - 5px);
    padding: 16px 8px 14px;
    border-radius: 20px;
  }
  .member-avatar-wrapper {
    width: 74px;
    height: 74px;
    margin-bottom: 10px;
    border-width: 3px;
  }
  .member-linkedin-badge {
    width: 23px;
    height: 23px;
  }
  .linkedin-svg {
    width: 11px;
    height: 11px;
  }
  .member-name {
    font-size: 17px;
  }
  .member-role {
    font-size: 12px;
    padding: 3px 10px;
  }
  .scroll-indicator {
    bottom: 18px;
    padding: 8px 16px 8px 14px;
    font-size: 13px;
  }
}