/* Global */
:root{
  color-scheme: dark;
  color:#111;
  background:#f7f5f2;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{background:#000000;color:#f5f0eb}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%;height:auto}
.hidden{display:none !important}

.page-shell{max-width:1200px;margin:0 auto;padding:20px;display:grid;gap:24px}

.top-socials{display:grid;gap:18px;padding:18px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:24px}
.brand{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:#f5f0eb}
.social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.social-grid::-webkit-scrollbar{display:none}
.social-card{padding:18px 18px;min-height:90px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);transition:transform .25s ease,background .25s ease,box-shadow .25s ease;text-align:center;color:#fff}
.social-card:hover{transform:translateY(-2px);background:rgba(255,255,255,0.12);box-shadow:0 16px 40px rgba(0,0,0,0.2)}
.top-socials.shrink-buttons .social-card{padding:9px 9px;min-height:45px;font-size:.875rem;border-radius:12px}

.hero-grid{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
.hero-image{border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.22);background:linear-gradient(180deg,#29222f,#1a141d);min-width:0;display:flex;min-height:520px}
.hero-image img,.hero-image video{width:100%;height:100%;object-fit:cover;display:block}
.hero-copy{display:grid;gap:18px;min-width:0;grid-template-rows:auto 1fr;}
.description-card{display:grid;gap:16px;padding:24px;border-radius:30px;background:#080808;border:1px solid rgba(255,255,255,0.12);cursor:pointer;transition:transform .2s ease,background .2s ease;overflow:hidden;height:100%;}
.description-content{overflow-y:auto;padding-right:8px;height:100%;}
.description-content p{margin:0;color:rgba(245,240,235,0.92);line-height:1.8;}
.description-content::-webkit-scrollbar{width:8px}
.description-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.16);border-radius:999px}
@media (min-width: 540px){
  .hero-grid{grid-template-columns:minmax(0,60%) minmax(0,40%);}
  .hero-image{min-height:520px}
  .hero-copy{min-height:520px;height:520px;}
}
.eyebrow{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.08);color:#ffe8d4;font-size:.86rem;text-transform:uppercase;letter-spacing:.15em}
.hero-copy h1{margin:0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;color:#fff}
.hero-copy p{margin:0;color:rgba(245,240,235,.88)}
.description-card:hover{transform:translateY(-2px);background:rgba(255,255,255,0.12)}
.description-card:focus{outline:3px solid rgba(255,107,129,0.5);outline-offset:4px}
.feature-text{margin:0;padding:18px;background:rgba(255,255,255,0.05);border-radius:22px;border:1px solid rgba(255,255,255,0.08);}

.modal-note{padding:14px 18px;margin:0 0 18px;border-radius:20px;background:rgba(255,107,129,0.16);color:#ffd9e1;font-weight:600;animation:floatText 2.8s ease-in-out infinite;}
@keyframes floatText{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.footer-actions{display:grid;gap:18px}
.cta-button{width:100%;padding:18px 20px;border:none;border-radius:24px;font-size:1.05rem;font-weight:700;color:#111;background:#ff6b81;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.cta-button:hover{transform:translateY(-1px);box-shadow:0 20px 40px rgba(255,107,129,.34)}
.new-social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.new-social-grid::-webkit-scrollbar{display:none}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10;opacity:0;transition:opacity .2s ease}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.98);width:min(420px,calc(100%-32px));padding:28px 26px;background:#110f16;border-radius:30px;box-shadow:0 32px 80px rgba(0,0,0,.35);z-index:11;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.modal h2{margin:0 0 12px;font-size:1.65rem;color:#fff}
.modal-legal-text {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 22px;
  padding-right: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  text-align: left;
}
.modal-legal-text::-webkit-scrollbar{width:4px}
.modal-legal-text::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:10px}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-button{padding:14px 16px;border-radius:18px;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.modal-button.primary{background:#ff6b81;color:#111}
.modal-button.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.18)}
.modal-button:hover{transform:translateY(-1px)}

.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-backdrop.open{opacity:1}

@media (min-width: 768px){
  .top-socials{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:minmax(0,60%) minmax(0,40%);align-items:start}
  .hero-image{min-height:520px}
  .hero-copy{min-height:520px}
  .footer-actions{grid-template-columns:1fr}
}

/* ============================================================
   DESIGN EXCLUSIVO PARA CELULAR (Mobile Only)
   Nada acima deste bloco afeta o PC se estiver dentro da query
   ============================================================ */
@media (max-width: 767px) {
  .page-shell { padding: 8px; gap: 10px; }

  .hero-grid {
    display: grid;
    grid-template-areas: "overlay";
    gap: 0;
  }

  .hero-image, .hero-copy {
    grid-area: overlay;
  }

  .hero-image {
    z-index: 1;
    min-height: 80vh; /* Faz a foto ocupar boa parte da tela */
    border-radius: 20px;
  }

  .hero-copy {
    z-index: 2;
    align-self: stretch; /* Faz o container ocupar toda a altura da imagem */
    display: flex;
    flex-direction: column;
    padding: 20px 15px 40px 15px; /* 40px de respiro no fundo da foto */
    background: none; /* Removemos o gradiente para máxima transparência */
    border-radius: 20px;
  }

  .eyebrow {
    background: transparent !important; /* Remove o fundo do 'About me' */
    padding-left: 0 !important;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Sombra para garantir leitura sobre a foto */
  }

  .description-card { 
    border-radius: 15px; 
    padding: 20px;
    background: transparent !important; 
    backdrop-filter: none !important; /* Remove o desfoque para transparência total */
    border: none !important; /* Remove a borda completamente */
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Sombra para garantir leitura sobre a imagem */
  }

  .hero-copy h1 { font-size: 1.8rem; }

  /* Estilo para Símbolo em cima e Nome pequeno embaixo */
  .social-card {
    flex-direction: column; /* Removido !important para permitir override no JS */
    gap: 6px;
    padding: 18px 2px;
    min-height: 80px;
    font-size: 10px;
    display: flex !important;
    text-align: center !important;
  }
  .social-card i {
    font-size: 1.4rem; /* Ícone em destaque */
  }
}

@media (min-width: 1024px){
  .page-shell{padding:32px}
  .hero-copy p{font-size:1.05rem}
}