/* ppc.css — Estilos específicos para la página PPC (basado en adolecente.css) */

/* Scoped layout */
.consulta .container{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  align-items: stretch;
}

/* Imagen lateral (si existe) */
.consulta .imagen{
  flex: 1 1 35%;
  min-width: 280px;
  max-width: 420px;
  display: block;
  background-color: #eee;
}
.consulta .imagen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto principal — mantiene la paleta ya usada */
.consulta .texto{
  flex: 2 1 65%;
  padding: 30px 32px;
  background-color: #fdf6f6; /* tu color */
  color: #222;
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  box-sizing: border-box;
}

/* Titulares y párrafos */
.consulta .texto h1{
  color: #ea5898;
  margin: 0 0 14px 0;
  font-size: 28px;
  font-weight: 700;
}
.consulta .texto h2{
  color: #5bb9eb;
  font-size: 20px;
  margin: 22px 0 10px;
  font-weight: 600;
}
.consulta .texto p{
  margin: 0 0 12px;
  font-size: 15.5px;
  color: #333;
}

/* Listas */
.consulta .texto ul{
  margin: 8px 0 12px 1.1rem;
  padding: 0;
  list-style: disc;
  color: #333;
}
.consulta .texto ul li{
  margin-bottom: 8px;
  line-height: 1.55;
  font-size: 15.2px;
}

/* Enlaces y botones simples */
.consulta .texto a{
  color: #5bb9eb;
  text-decoration: none;
  font-weight: 600;
}
.consulta .texto a:hover{
  text-decoration: underline;
}

/* Notas pequeñas / énfasis */
.consulta .texto em,
.consulta .texto .nota{
  color: #666;
  font-size: 14px;
}

/* Footer (se mantiene igual que tu css original pero con ajuste leve) */
.footer{
  background-color: #5bb9eb;
  padding: 2rem 1rem;
  text-align: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  border-top: 4px solid #ea5898;
  margin-top: 3rem;
}
.footer-content{
  max-width: 1000px;
  margin: 0 auto;
}
.footer p{ margin-bottom: 1rem; font-size: 1rem; }
.social-icons{ display:flex; justify-content:center; gap:1.2rem; }
.social-icons a{ color:white; font-size:1.6rem; transition: transform .25s, color .25s; }
.social-icons a:hover{ transform: scale(1.12); }
.whatsapp:hover{ color:#25d366; } .instagram:hover{ color:#e1306c; }
.facebook:hover{ color:#1877f2; } .youtube:hover{ color:#ff0000; }

/* -------- Responsive -------- */
@media (max-width: 900px){
  .consulta .container{ gap: 8px; }
  .consulta .imagen{ flex-basis: 100%; max-width: 100%; min-width: 0; order: 0; }
  .consulta .texto{ flex-basis: 100%; padding: 22px; }
  .consulta .texto h1{ font-size: 24px; }
  .consulta .texto p, .consulta .texto ul li{ font-size: 15px; }
}

@media (max-width: 480px){
  .consulta .texto{ padding: 18px; }
  .consulta .texto h1{ font-size: 20px; }
  .social-icons a{ font-size: 1.3rem; }
  .footer p{ font-size: .95rem; }
}
/* =========================
   MENU / NAVBAR FIX PPC
========================= */

header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #fff;
}

.navbar {
  position: relative;
  z-index: 9999;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Links */
.nav-links a {
  text-decoration: none;
  color: #333;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 220px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  border-radius: 10px;
  z-index: 10000;
}

.dropdown-content a {
  display: block;
  padding: 10px 15px;
  color: #333;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* ---------- MOBILE ---------- */

.menu-toggle {
  display: none;
  cursor: pointer;
}

.menu-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

/* Responsive */
@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    background-color: #fff;
    display: none;
    padding: 20px 0;
  }

  .nav-links.active {
    display: flex;
  }

  .dropdown-content {
    position: static;
    box-shadow: none;
    border-radius: 0;
  }

  .dropdown.open .dropdown-content {
    display: block;
  }
}
/* =========================
   MENU PSICOEDUCAR – ESTILO
========================= */

/* Header */
header {
  background-color: #5bb9eb;
}

/* Navbar */
.navbar {
  background-color: #5bb9eb;
}

/* Links principales */
.nav-links > li > a {
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 12px;
  transition: background-color .3s, transform .2s;
  font-weight: 500;
}

/* Hover links */
.nav-links > li > a:hover {
  background-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

/* Dropdown container */
.dropdown-content {
  background-color: #ea5898;
  border-radius: 14px;
  padding: 6px 0;
}

/* Dropdown links */
.dropdown-content a {
  color: #ffffff;
  font-weight: 500;
  padding: 12px 18px;
  transition: background-color .3s, color .3s;
}

/* Hover dropdown */
.dropdown-content a:hover {
  background-color: #efed3f;
  color: #333;
}

/* Item activo (ej Dana Perez en tu captura) */
.dropdown-content a:focus,
.dropdown-content a:active {
  background-color: #efed3f;
  color: #333;
}

/* Mobile menu */
@media (max-width: 768px) {

  .nav-links {
    background-color: #5bb9eb;
  }

  .nav-links > li {
    text-align: center;
  }

  .dropdown-content {
    background-color: #ea5898;
    margin-top: 8px;
  }

   .menu-toggle .bar {
    background-color: #ffffff;
  }
}