body {
 margin: 0;
 font-family: 'Segoe UI', sans-serif;
 background: linear-gradient(to right, #f8f3ff, #fff0f6);
}

/* HEADER */
header {
 text-align: center;
 padding: 50px 20px;
}

header h1 {
 color: #6a2c91;
}

/* SECCIONES */
.section {
 padding: 40px 20px;
}

.page_body{
    text-align: center;
    padding: 10px 20px;
}
.page_body h1 {
 color: #6a2c91;
}
.page_body p {
 text-align: left;
}

/* TERAPIA DESTACADA */
.highlight {
 background: linear-gradient(135deg, #6a2c91, #c9a7eb);
 color: white;
 padding: 30px;
 border-radius: 20px;
 margin-bottom: 40px;
 position: relative;
}

/* ETIQUETA */
.badge {
 position: absolute;
 top: 10px;
 right: 10px;
 background: gold;
 padding: 5px 10px;
 border-radius: 15px;
 font-size: 12px;
}

/* SERVICIOS */
.services {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 20px;
}

.card {
 background: white;
 padding: 20px;
 border-radius: 15px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* CERTIFICADO */
.certificado {
 text-align: center;
 margin: 40px 0;
}

.certificado img {
 width: 260px;
 margin: 0;
 display: block;
 margin-left: auto;
 margin-right: auto;
 transition: transform 0.3 ease;
}

.certificado img:hover{
    transform: scale(1.03);
}

/* CONTACTO */
.contact {
 background: #6a2c91;
 color: white;
 padding: 40px 20px;
}

input, select, textarea {
 width: 100%;
 margin: 8px 0;
 padding: 10px;
 border-radius: 10px;
 border: none;
}

button {
 width: 100%;
 padding: 12px;
 border-radius: 20px;
 border: none;
 background: #25D366;
 color: white;
 font-size: 16px;
}

/* Botón */
.dropdown-btn {
  background: #6a2c91;
  color: white;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.btn-home {
background: #6a2c91;
  color: white;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}


/* Contenedor */
.dropdown {
  position: relative;
  display: inline-block;
  color:  white;
  background: white;
}

/* Menú oculto */
.dropdown-content {
  display: none;
  position: absolute;
  background: white;
  min-width: 180px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
  animation: fadeIn 0.2s ease;
  z-index: 9999;
}

/* Opciones */
.dropdown-content a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: #333;
  transition: background 0.2s;
}

.dropdown-content a:hover {
     background: #6a2c91;

}

/* Animación */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-10px);}
  to {opacity: 1; transform: translateY(0);}
}

/* Mostrar menú */
.show {
  display: block;
}

/* FOOTER */
footer {
 text-align: center;
 padding: 15px;
 background: #333;
 color: white;
}

.faq details {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Flechita */
.faq summary::after {
  content: "＋";
  float: right;
}

.faq details[open] summary::after {
  content: "−";
}

.faq p {
  margin-top: 10px;
  color: #555;
}