:root {
  /* Paleta Suave e Elegante */
  --bg: #1e1e1e; /* Fundo escuro suave */
  --card: #282828; /* Cor de card um pouco mais clara */
  --accent: #ff80ab; /* Rosa Suave */
  --secondary: #d1c4e9; /* Roxo Lavanda Suave */
  --text: #f0f0f0;
  --muted: #b0b0b0;
  --shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* BASE: Reset e Tipografia Mobile-First */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
.container { max-width:1100px; margin:0 auto; padding:0 15px; }

/* HEADER & NAVIGATION (Mobile-First) */
.site-header {
  background: var(--card);
  padding:15px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.brand { 
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-heart {
  background:var(--accent);
  color:white;
  font-weight:bold;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.brand-text h1 { 
  font-size:18px;
  color:var(--accent);
}
.brand-text small { 
  color:var(--muted);
  display:block;
  font-size:12px;
}
.nav {
  display:flex;
  gap:15px;
  margin-top:10px;
  width:100%;
  padding-top:10px;
  border-top:1px solid #333;
}
.nav a {
  color:var(--text);
  text-decoration:none;
  padding:5px 0;
  transition:color 0.3s;
  font-size:14px;
}
.nav a:hover, .nav a.active {
  color:var(--accent);
}

/* MAIN CONTENT */
main {
  padding-bottom: 20px;
}
.section-title {
  color:var(--accent);
  margin-bottom:5px;
  font-size: 1.8em;
}
.muted { color:var(--muted); font-size:14px; margin-bottom:15px; }

/* GRID E CARDS */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap: 20px;
}
.card {
  background:var(--card);
  padding:0; 
  border-radius:14px; 
  box-shadow: var(--shadow);
  transition:transform 0.3s;
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  position: relative; 
}

/* Contêiner para correção de corte e centralização */
.image-container { 
    height: 250px; 
    overflow: hidden;
    position: relative; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    border-radius: 14px 14px 0 0;
    margin-bottom: 10px;
    background-color: #333;
}
.card img {
  width: 100%;
  max-height: 100%; 
  height: auto;
  object-fit: contain; 
  border-radius: 0; 
  margin-bottom: 0;
}


/* Área de Detalhes do Card */
.card .details {
  padding: 0 15px 15px; 
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center; 
}

.card h3 { color:var(--text); font-size:1.1em; margin-bottom:5px; }
.card p { font-size:0.9em; margin-bottom:8px; }
.card .price { font-size:1.3em; color:var(--accent); font-weight:bold; margin-top:5px; }
.card .price.dynamic { font-size:1.3em; color:var(--accent); font-weight:bold; }

.card:hover {
  transform: translateY(-5px);
}

/* --- ESTILO DA TAG DE PRIORIDADE (Retângulo Simples) --- */

.tag-prioridade {
    position: absolute; 
    top: 10px; 
    left: 10px; 
    padding: 3px 8px; 
    border-radius: 6px; 
    font-size: 0.7em; 
    font-weight: bold;
    color: white; 
    z-index: 20; 
    opacity: 0.95;
    text-transform: uppercase;
}
.tag-prioridade span {
    color: inherit; 
}

.tag-alta {
    background-color: #e53935; 
}
.tag-media {
    background-color: #ff9800; 
}
.tag-baixa {
    background-color: #4caf50; 
}

/* ----------------------------------------------------------------- */

/* --- ESTILOS DOS CARDS DE SERVIÇOS (COM IMAGENS) --- */

.service-card {
    padding: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 300px; 
    justify-content: space-between;
}

/* ÍCONES: Container para sua imagem */
.service-icon {
    /* Dimensões do container principal do ícone */
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    border-radius: 50%;
    
    /* Configurações de fundo e display */
    background: rgba(255, 128, 171, 0.1); 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Corta a imagem se for maior que o círculo */
}

/* Estilo para a imagem dentro do ícone */
.service-image-icon {
    width: 100%; /* Ocupa 100% da largura do service-icon */
    height: 100%; /* Ocupa 100% da altura do service-icon */
    object-fit: cover; /* Garante que a imagem preencha o círculo sem distorcer */
    border-radius: 50%; /* Garante que a imagem seja redonda */
}

.service-card h3 {
    color: var(--secondary);
    margin: 5px 0 10px;
}
.service-card p {
    flex-grow: 1; 
}

/* Estilo do Card de Chamada de Vídeo */
.call-card {
  border:2px solid var(--accent);
  background:linear-gradient(145deg, var(--card), #383838);
  box-shadow: 0 0 15px rgba(255, 128, 171, 0.4); 
}
/* No card de chamada, a bolha do ícone deve ficar sólida */
.call-card .service-icon {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(255, 128, 171, 0.8);
}
.call-card h3 { 
    color:var(--accent); 
}

/* Estilização do Seletor de Minutos (Moderno) */
.call-controls {
    width: 100%;
    margin: 10px 0;
    text-align: left;
}
.call-controls label {
    display: block;
    font-size: 0.9em;
    color: var(--muted);
    margin-bottom: 5px;
}
.call-controls select {
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #444; 
    background: #333; 
    color: var(--text);
    margin: 0;
    width: 100%;
    cursor: pointer;
    font-size: 1em;
    transition: border-color 0.3s, background 0.3s;
    /* Adiciona a seta customizada como background-image */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23d1c4e9" d="M8 12.5l5-5h-10l5 5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px; 
}
.call-controls select:focus {
    border-color: var(--accent);
    outline: none;
    background: #383838;
}

/* --- FIM DOS ESTILOS DE SERVIÇOS --- */


/* Tags de Prioridade (Novidade/Popular) */
.popular-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent);
    color: white;
    padding: 3px 8px;
    font-size: 0.7em;
    font-weight: bold;
    border-radius: 6px;
    z-index: 10;
}


/* Botões (Mobile) */
.actions { 
    display: flex;
    flex-direction: column; 
    gap: 10px;
    margin-top: 10px;
}
.btn {
  padding:10px 15px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  color:white;
  width:100%;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: opacity 0.3s, transform 0.2s;
  max-width: 100%; 
}
.service-card .btn {
    margin-top: 15px; 
}

.btn.gift { 
  background:var(--accent); 
}
.btn.details { 
  background:var(--secondary); 
}
.btn:hover { 
  opacity:0.9; 
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* FOOTER */
.site-footer { 
  background:var(--card); 
  padding:20px 0; 
  text-align:center; 
  margin-top:40px; 
  color:var(--muted); 
  font-size: 0.8em;
  border-top: 1px solid #333;
}
.site-footer a {
    color: var(--secondary);
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
}

/* SOBRE (ABOUT) - CORRIGIDO PARA LAYOUT LADO A LADO */
.about-section {
    padding-bottom: 40px;
}
.about-grid { 
  display:flex; 
  flex-direction: column; /* Mobile: empilha a foto e o texto */
  gap:20px; 
  align-items:center; 
  padding-top: 20px;
}
.profile-photo {
    width: 100%;
    text-align: center;
}
.profile-photo img { 
  max-width:300px; 
  width: 100%; 
  height: auto;
  border-radius:14px;
  box-shadow: var(--shadow);
}
.profile-card { 
  background:var(--card); 
  padding:25px; 
  border-radius:14px; 
  flex:1;
  width: 100%;
}
.profile-card h3 { 
    color: var(--accent); 
    margin: 10px 0;
}
.profile-card h4 { 
    color: var(--secondary);
    margin-top: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}
.profile-card ul { 
    list-style-type: none;
    padding-left: 0;
    margin-top: 5px;
}
.profile-card li { 
    margin-bottom: 5px;
    font-size: 0.9em;
}
.profile-card li::before {
    content: "🐾";
    color: var(--accent);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}
.stats-row { 
    display:flex; 
    gap:20px; 
    margin:12px 0; 
    padding: 10px 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    justify-content: center; 
}
.stat strong { 
    display:block; 
    font-size:20px; 
    color:var(--accent); 
}
.stat span { 
    font-size:12px; 
    color:var(--muted); 
    text-transform: uppercase;
}

/* FEEDBACKS */
.card.feedback {
    background: var(--card);
    padding: 20px;
    border-left: 5px solid var(--secondary);
    border-radius: 14px;
    font-style: italic;
    box-shadow: var(--shadow);
}
.card.feedback .stars {
    color: gold;
    font-size: 1.2em;
    margin-top: 10px;
    font-style: normal;
}

/* MODAL (Balão) */
.modal-root {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  transition:opacity 0.3s;
}
.modal-root.hidden {
  opacity:0;
  pointer-events: none;
}
.modal-content {
  background:var(--card);
  padding:30px;
  border-radius:14px;
  max-width:500px; 
  width:90%;
  text-align:center;
  position:relative;
  box-shadow: var(--shadow);
}
#modalClose {
  position:absolute;
  top:10px;
  right:10px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:1.5em;
  cursor:pointer;
}
.modal-content h3 {
    color: var(--secondary);
    margin-bottom: 15px;
}


/* AJUSTES PARA TELAS MAIORES */
@media(min-width:768px){
  .grid {
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap: 30px;
  }
  .nav {
    width: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .nav a {
    font-size:16px;
  }

  /* CORREÇÃO DO LAYOUT SOBRE MIM */
  .about-grid { 
    flex-direction: row; 
    align-items: flex-start; 
    justify-content: space-between;
  }
  .profile-photo {
    width: 48%; /* A foto ocupa quase metade da largura */
    flex-shrink: 0; 
    text-align: left;
  }
  .profile-card {
    width: 48%; /* O texto também ocupa quase metade da largura */
    padding: 30px;
  }
  .profile-photo img { 
    max-width:100%; /* Permite que a imagem preencha a largura de 48% */
  }
  /* FIM DA CORREÇÃO SOBRE MIM */
}

/* Media Query para botões lado a lado (Centraliza o grupo de botões) */
@media(min-width:500px){
    .actions {
        flex-direction: row; 
        justify-content: center; 
    }
    .btn {
        width: auto;
        flex-grow: 1; 
        max-width: 180px; 
    }
    .service-card .btn {
        max-width: 250px; 
    }
}