/* =========================
       Variables & Reset
       ========================= */
    :root{
      --accent: #b16dd3;        /* rosa principal */
      --accent-2: #e8a6de;      /* rosa claro */
      --bg: #fcfbfe;
      --muted: #55606a;
      --card: #ffffff;
      --glass: rgba(255,255,255,0.65);
      --radius: 16px;
      --shadow-lg: 0 16px 40px rgba(16,30,49,0.08);
      --shadow-sm: 0 6px 18px rgba(17,24,39,0.06);
      --maxw: 1550px;
      --gap: 20px;
      --lavanda: #c27ba0;
      --lavanda-oscuro: #a45b85;
      --lavanda-claro: #f3e6f0;
      --texto: #3a2a36;
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
      background: linear-gradient(180deg, var(--bg) 0%, #fbfbfd 100%);
      color:#112126;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto}

    /* =========================
       Layout container
       ========================= */
    .wrap{max-width:var(--maxw);margin:0 auto;padding:28px 20px;}

/* =========================
   Header / Nav
   ========================= */
    .hero-head{position: relative;width: 100%;height: auto;min-height: 150px;overflow: visible;background-image: url('images/header.png');background-size: cover;background-position: center;background-repeat: no-repeat;
      color: white;display: flex;flex-direction: column;justify-content: space-between;text-align: center;
    }
    /* filtro lavanda translúcido sobre el fondo */
    .hero-head::before {content: "";position: absolute;inset: 0;background-color: rgba(60, 0, 80, 0.256);z-index: 0;}
    header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 18px 0;position: relative;}
    .brand{display:flex;gap:12px;align-items:center}
    .brand .logo{width:100%;height:100%;border-radius:10px;overflow:hidden;flex:0 0 64px;box-shadow:var(--shadow-sm);}
    .brand h1{font-family: "Playfair Display", serif;font-weight:600;margin:0;font-size:18px;line-height:1;}
    .brand p{margin:0;font-size:13px;color:var(--muted)}
    nav{display:flex;gap:12px;align-items:center}
    nav a{padding:8px 14px;border-radius:12px;font-weight:600;color:var(--muted);transition: all 0.25s ease;}
    nav a.btn-doctoralia{display: inline-flex;align-items: center;gap: 8px;background-color: #00BFA5;color: #FFFFFF;padding: 12px 18px;border-radius: 6px;font-family: system-ui, -apple-system, "Segoe UI", sans-serif;font-size: 14px;font-weight: 600;line-height: 1;transition: background-color .2s ease;white-space: nowrap;}
    nav a.btn-doctoralia:hover{background-color: #00A892;}
    nav a .doctoralia-icon{width: 18px;height: 18px;flex-shrink: 0;display: block;}
    nav a:hover {color: var(--accent);transform: scale(1.08);}

    /* mobile nav button */
    .hamburger{display:none;border:0;background:transparent;padding:8px;border-radius:8px}
    .hamburger svg{width:24px;height:24px}

    /* =========================
       Hero
       ========================= */
    .hero{display:grid;gap:var(--gap);align-items:center;width:100%;overflow:hidden}
    .hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-lg);position:relative;overflow:visible}
    .kicker{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(232,79,138,0.08);color:var(--accent);font-weight:700;font-size:13px;margin-bottom:14px}
    .hero-card h2{font-size:30px;margin:4px 0 10px 0;letter-spacing:-0.2px}
    .hero-card p.lead{color:var(--muted);margin:30px 0 26px 0;font-size:18px}
    .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
    .service{background:linear-gradient(180deg,#fff,#fff);padding:14px;border-radius:12px;border:1px solid rgba(16,24,32,0.04);box-shadow:var(--shadow-sm);}
    .hero-figure{position: relative;width: 100%;aspect-ratio: 16 / 9;border-radius: 18px;overflow: hidden;box-shadow: var(--shadow-lg);
     margin: 0 auto;background: white;margin-top: 12px;
    }
    /* Botones */
    .hero-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(255, 255, 255, 0.304);border: none;color: #333;font-size: 24px;font-weight: bold;cursor: pointer;padding: 4px 8px;border-radius: 20%;transition: background-color 0.3s;}
    .hero-button:hover {background-color: rgba(255,255,255,0.9);
    }
    /* Posición de los botones */
    .hero-button.prev {left: 15px;}
    .hero-button.next {right: 15px;}
    .hero-figure img{position:absolute;width:100%;height:100%;object-fit:cover;opacity: 0;inset: 0;margin: auto;}
    .hero-figure img.active{ opacity: 1;}
    .hero-ctas{display:flex;gap:12px;margin-top:16px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-weight:700;border:0;cursor:pointer}
    .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;box-shadow:0 10px 30px rgba(232,79,138,0.12)}
    .btn.ghost{background:transparent;border:1px solid rgba(16,24,32,0.06);color:var(--muted)}
    .card .foto-doctora{display: block;margin: 12px auto;width: 200px;height: 200px;border-radius: 8px;object-fit: cover}

    /* =========================
       Secciones: Sobre, Productos
       ========================= */
    .section{margin-top:28px;display:grid;grid-template-columns:1fr 420px;gap:5px;align-items:start;}
    .card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow-sm)}
    .features{display:grid;gap:12px;margin-top:12px}
    .feature{display:flex;gap:12px;align-items:flex-start}
    .feature .dot{width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;flex:0 0 44px}
    .feature h4{margin:0 0 6px 0;font-size:16px}
    .feature p{margin:0;color:var(--muted);font-size:14px}

    .products .prod-list{display:grid;gap:12px}
    .prod{
      display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;border:1px solid rgba(16,24,32,0.03);background:linear-gradient(180deg,#fff,#fff)
    }
    .prod img{width:84px;height:84px;border-radius:8px;object-fit:cover}
    .prod .meta h5{margin:0 0 6px 0}
    .prod .meta p{margin:0;color:var(--muted);font-size:13px}

    /* =========================
       Testimonios / Equipo
       ========================= */
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}

/* =========================
   Contact banner & footer
   ========================= */
    .contact-banner{
      margin-top:26px;border-radius:12px;padding:18px;display:flex;align-items:center;justify-content:space-between;
      background:linear-gradient(90deg, rgba(232,79,138,0.06), rgba(247,166,196,0.03));border:1px solid rgba(232,79,138,0.06)
    }
    .map-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    }
    .contact-banner .phone{font-weight:800;color:var(--accent);font-size:18px}
    footer{margin-top:28px;padding:24px 0;text-align:center;color:var(--muted);font-size:14px}
    
    .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.2)
  );
}
#equipo h2 {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  color: #5e4b8b;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

#equipo h2:hover {
  color: #a77cf0;
  text-shadow: 0 0 15px rgba(167, 124, 240, 0.4);
}
.hero-content {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  color: white;
  max-width: 520px;
  z-index: 2;
}
.hero-content h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
}
.hero-content p {
  font-size: clamp(15px, 1.5vw, 18px);
  margin-bottom: 24px;
  opacity: 0.9;
}
.consulta-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 40px rgba(16, 24, 32, 0.08);
  border: 1px solid rgba(177, 109, 211, 0.15);
  max-width: 420px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.consulta-card:hover {
  transform: scale(1.04); /* crece 4% */
  box-shadow: 0 30px 60px rgba(16, 24, 32, 0.12); /* sombra más fuerte */
}

.consulta-card h3 {
  text-align: center;
  color: var(--accent);
  margin-bottom: 20px;
  font-size: 22px;
}

.consulta-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.consulta-card ul li {
  margin-bottom: 10px;
  color: #55606a;
  font-size: 15px;
}

.precio-box {
  background: #f9f4fc;
  padding: 16px;
  border-radius: 14px;
  text-align: center;
  margin-bottom: 18px;
}

.precio-box span {
  display: block;
  font-size: 14px;
  color: #55606a;
}

.precio-box strong {
  display: block;
  font-size: 18px;
  color: var(--accent);
  margin-top: 6px;
}

.consulta-card .descripcion {
  font-size: 14px;
  color: #55606a;
  margin-bottom: 20px;
  line-height: 1.5;
}

.consulta-card .btn {
  width: 100%;
  text-align: center;
  display: block;
}

    /* =========================
       Responsive
       ========================= */
    @media (max-width:1024px){
  .hero, 
  .section{grid-template-columns:1fr;}
  .hero-figure{max-width: 100%;width: 100%;aspect-ratio: 4/3;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  nav{display:none}
  .hamburger{display:inline-flex}
}

@media (max-width: 1024px) {

  nav[aria-label="Menú principal"] {
    position: absolute;
    top: 64%;
    right: 8px;

    width: 160px;
    display: none;
    flex-direction: column;
    gap: 12px;

    background: #fff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.2);

    height: auto;
    max-height: calc(100vh - 90px);
    overflow-y: auto;

    z-index: 9999;
  }

  nav.menu-open {
    display: flex;
  }
}

   @media (max-width:560px){
  .hero-card h2{
    font-size: 22px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .wrap {
    padding: 16px 10px;
  }

  .hero{
    grid-template-columns: 1fr; /* fuerza una columna */
  }
  .hero-card {
    padding: 10px;
    width: 100%;
    max-width: 100%;
  }

  .hero-figure{
    max-width: 100%;
    width: 100%;
    aspect-ratio: 4/3;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .brand h1{font-size:16px}
  .section{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  header{align-items:flex-start}
}

    /* small helper */
    .muted{color:var(--muted)}
    .mt-8{margin-top:8px;font-size:14px}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    
    .footer {
    background: linear-gradient(180deg, var(--lavanda) 0%, var(--lavanda-oscuro) 100%);
    color: white;
    text-align: center;
    padding: 24px 16px;
    font-size: 0.95rem;
    margin-top: 40px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    }

    .footer-container {
    max-width: 1024px;
    margin: 0 auto;
    line-height: 1.6;
    }

    .footer p {
    margin: 6px 0;
    }

    .footer strong {
    color: var(--lavanda-claro);
    font-weight: 600;
    }
    .whatsapp-float {
    position: fixed;
    right: 20px;            /* distancia desde la derecha */
    bottom: 20px;           /* distancia desde abajo */
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 8px 20px rgba(18, 140, 126, 0.25);
    transition: transform 180ms ease, box-shadow 180ms ease;
    -webkit-tap-highlight-color: transparent; /* quita highlight en iOS */
    }

    /* SVG dentro */
    .whatsapp-float svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    display: block;
    }

    /* Hover / focus */
    .whatsapp-float:hover,
    .whatsapp-float:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(18,140,126,0.28);
    outline: none;
    }

.social-links {
  display: flex;
  justify-content: center;
  gap: 62px;
  margin-top: 62px;
}

.social-links a {
  font-size: 24px;
  color: var(--accent); /* por ejemplo lavanda o morado */
  text-decoration: none;
  transition: transform 0.2s, color 0.2s;
}

.social-links a:hover {
  transform: scale(1.8);
  color: #7b4dd8; /* tono más fuerte al pasar el cursor */
}

/* Efecto de pulso sutil (solo visual) */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102, 0); }
}
.whatsapp-float::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  animation: pulse 2.2s infinite;
}

/* Opcional: mostrar u ocultar en móviles muy pequeños */
@media (max-width: 360px) {
  .whatsapp-float { right: 12px; bottom: 12px; width: 48px; height: 48px; }
  .whatsapp-float svg { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
  .dos-col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .hero-head {
    height: 140px;
    background-position: left; /* evita cortar caras/texto */
  }
}

.map-container {
  position: relative;
  width: 100%;
  max-width: 1200px; /* opcional, limita el ancho */
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin-bottom: 20px; /* 👈 este margen crea espacio debajo del mapa */
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
#hero-title {
  font-family: "Playfair Display", "Georgia", serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #6b2c6f; /* tono vino/morado elegante */
  text-align: center;
  margin-bottom: 1rem;
}
#hero-subtitle {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.2px;
  color: #6b2c6f;
  text-align: center;
  margin-top: 0.6rem;
}