/* ============================================================
   VARIABLES DE COLOR (paleta fucsia + blanco).
   ============================================================ */
:root {
  --fuchsia: #AD00E6;              /* color principal (botones activos, íconos, acentos) */
  --fuchsia-dark: #7c00a3;         /* fucsia oscuro (texto de títulos, fondo del footer) */
  --fuchsia-light: #AD00E6;        /* fucsia claro (degradado de la banda CTA) */
  --plum: #2a0f45;                 /* morado oscuro (menú superior y footer) */
  --bg-soft: #ede6f0;              /* fondo lavanda claro (fondo general del body) */
  --white: #ffffff;
  --text: #2c1033;                 /* color de texto principal */
  --text-light: #6b5876;           /* color de texto secundario (párrafos, descripciones) */
  --radius: 18px;                  /* radio de esquinas redondeadas reutilizado en tarjetas/CTA */
  --shadow: 0 10px 30px rgba(164, 0, 214, 0.15);     /* sombra fuerte (hover) */
  --shadow-sm: 0 4px 14px rgba(164, 0, 214, 0.12);   /* sombra suave (reposo) */
}

/* Reset básico: quita márgenes/paddings por defecto del navegador
   y hace que "width/height" incluyan el padding y el borde
   (así no se rompen los cálculos de tamaño). */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Hace que los enlaces tipo "#servicios" (ancla) se desplacen
   suavemente en vez de saltar de golpe. */
html { scroll-behavior: smooth; }

body {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-soft);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }      /* las imágenes nunca se desbordan de su contenedor */

a { text-decoration: none; color: inherit; }  /* enlaces sin subrayado y con el color del texto normal */

ul { list-style: none; }                      /* quita los puntos de las listas (las usamos como menús/tarjetas) */

/* Contenedor centrado que limita el ancho máximo del contenido
   en pantallas grandes (evita que el texto se estire de borde
   a borde en monitores anchos). */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky;   /* se queda pegado arriba al hacer scroll */
  top: 0;
  z-index: 100;        /* queda por encima del resto del contenido */
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo a la izquierda, menú a la derecha */
  background: var(--plum);
  padding: 12px 24px;
  box-shadow: var(--shadow-sm);
}
/* Logo y nombre de la IPS (el botón que vuelve al inicio) */
.logo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;   /* no se encoge aunque falte espacio en pantallas chicas */
}
/* Logo redondo con efecto hover */
.logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;   /* 50% = círculo perfecto */
  object-fit: cover;    /* recorta la imagen para llenar el círculo sin deformarse */
  transition: transform 0.2s ease;
}

.logo-btn:hover .logo-img { transform: scale(1.06); }  /* se agranda un poco al pasar el mouse */

.logo-text {
  font-weight: 600;
  color: var(--white);
  font-size: 1rem;
}
/* Links de navegación (Inicio, Psicología, etc.) */
.nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-links a {
  padding: 10px 18px;
  border-radius: 999px;  /* número muy alto = "píldora" totalmente redondeada */
  font-weight: 500;
  color: var(--white);
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-links a:hover { background: rgba(255, 255, 255, 0.14); }

/* Página actual resaltada en fucsia (se le pone class="active" en el HTML) */
.nav-links a.active {
  background: var(--fuchsia);
  color: var(--white);
}

/* ============================================================
   BOTONES
   Estilo base ".btn" + variantes (primary, outline, whatsapp, survey)
   que solo cambian el color de fondo/borde.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;   /* botones en forma de píldora */
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }  /* se levanta un poco al pasar el mouse */

/* Botón blanco sólido (usado sobre fondos fucsia, ej. hero) */
.btn-primary {
  background: var(--white);
  color: var(--fuchsia-dark);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { background: var(--bg-soft); }

/* Botón transparente con borde blanco (para no competir con btn-primary) */
.btn-outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }

/* Botón de WhatsApp en el footer (mismo estilo que btn-primary) */
.btn-whatsapp {
  background: var(--white);
  color: var(--fuchsia-dark);
  box-shadow: var(--shadow-sm);
}

.btn-whatsapp:hover { background: var(--bg-soft); }

/* Botón de encuesta en el footer (mismo estilo que btn-outline) */
.btn-survey {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-survey:hover { background: rgba(255, 255, 255, 0.15); }

/* ============================================================
   HERO (la franja grande de bienvenida al inicio de cada página)
   ============================================================ */
/* La imagen (.hero-img) va de fondo y el texto encima. Los colores se
   cambian por página con variables, directo en el <section class="hero">:
   style="--hero-overlay: rgba(0,0,0,0.55); --hero-text: #ffffff;"
   --hero-overlay = capa de color sobre la foto (para que el texto se lea)
   --hero-text    = color del título y párrafo */
.hero {
  position: relative;       /* para poder poner la imagen y la capa "dentro" de la sección */
  overflow: hidden;
  padding: 120px 24px;
  text-align: center;
  color: var(--hero-text, #ffffff);
}

/* Imagen de fondo: ocupa toda la sección, recortada para llenarla */
.hero-img {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  z-index: 0;
}

/* Capa de color encima de la foto, debajo del texto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay, rgba(0, 0, 0, 0.55));
  z-index: 1;
}

/* Todo lo demás (título, párrafo, botones) queda por encima */
.hero > *:not(.hero-img) {
  position: relative;
  z-index: 2;
}

.hero h1 {
  /* clamp(mínimo, preferido, máximo): el tamaño de letra fluye
     con el ancho de pantalla (4vw) pero nunca baja de 2rem
     ni sube de 3rem. Así el título se ve bien en cualquier tamaño. */
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 16px;
}

.hero p {
  max-width: 620px;   /* evita que el párrafo se estire demasiado en pantallas anchas */
  margin: 0 auto 32px;
  font-size: 1.1rem;
  opacity: 0.95;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;   /* si no caben los botones en una línea, pasan a la siguiente */
}

/* ============================================================
   SECCIONES / TARJETAS GENERALES
   Esta parte define la "tarjeta" base (.card) que se reutiliza
   tanto para los servicios (Psicología/Psiquiatría/Medicina)
   como para las tarjetas de profesionales (.profile-card
   siempre se usa junto con .card en el HTML: class="card profile-card").
   ============================================================ */
section { padding: 64px 0; }

.section-title {
  text-align: center;
  font-size: clamp(1.6rem, 7vw, 2rem);   /* se achica en celulares muy angostos */
  overflow-wrap: anywhere;               /* si una palabra no cabe, se parte en vez de salirse */
  color: var(--fuchsia-dark);
  margin-bottom: 12px;
}

.section-subtitle {
  text-align: center;
  color: var(--text-light);
  max-width: 560px;
  margin: 0 auto 40px;
}

/* ---- ANCHO de las tarjetas (servicios Y profesionales) ----
   "grid-template-columns: repeat(3, 1fr)" reparte el espacio
   disponible del contenedor en 3 columnas de ANCHO IGUAL (1fr).
   Si cambias el "3" por otro número, cambia cuántas tarjetas
   caben por fila (y por lo tanto qué tan anchas se ven). */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;   /* espacio entre tarjetas */
}

/* ---- FORMA de la tarjeta (esquinas, sombra, relleno) ----
   Esto aplica tanto a las tarjetas de servicio como a las de
   profesionales, porque ambas usan la clase .card en el HTML. */
.card {
  background: var(--white);
  border-radius: var(--radius);   /* esquinas redondeadas (18px, ver variable arriba) */
  padding: 32px 26px;             /* espacio interno = "qué tan grande se ve" la tarjeta */
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Tarjeta que es un link (<a class="card maps-card">): los <a> son "en línea"
   por defecto, display:block hace que se comporte como una tarjeta normal. */
.maps-card { display: block; }

/* Ya hereda fondo/forma/hover de .card (arriba). Acá solo va lo que
   la hace distinta: su posición dentro del grid.
   grid-row: 2       -> la manda a una segunda fila, debajo de las otras 3.
   grid-column: 1/3  -> le reserva el ESPACIO de las columnas 1 y 2
                        (Psicología + Psiquiatría), pero por defecto la
                        tarjeta se estira para llenar todo ese espacio.
   justify-self + width -> en vez de estirarse, la achica al ancho de
                        una tarjeta normal y la centra dentro de ese
                        espacio reservado — por eso queda flotando
                        justo en el punto medio entre Psicología y
                        Psiquiatría, con el mismo tamaño que las demás. */
.card-servicios {
  grid-row: 2;
  grid-column: 1 / 4;
  justify-self: center;
  width: calc((100% - 24px) / 2);  /* resta el gap de 24px entre columnas y divide entre 2 */
}

.card:hover {
  transform: translateY(-6px);   /* se levanta al pasar el mouse */
  box-shadow: var(--shadow);     /* sombra más marcada al hacer hover */
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
}

.card h3 { color: var(--fuchsia-dark); margin-bottom: 10px; }

.card p { color: var(--text-light); margin-bottom: 16px; }

.card-link {
  color: var(--fuchsia);
  font-weight: 600;
}

.card-link:hover { text-decoration: underline; }

/* Lista de "servicios incluidos" con checks (✓) */
.check-list li {
  position: relative;
  padding: 8px 0 8px 32px;   /* espacio a la izquierda para el círculo del check */
}

.check-list li::before {
  content: "✓";              /* genera el símbolo de check con CSS puro (no hace falta un ícono) */
  position: absolute;
  left: 0;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fuchsia);
  color: var(--white);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Título + descripción apilados dentro de un ítem ----
   Envuelve el título y la descripción de un <li> en un
   <div class="check-content"> para que queden apilados: el título
   arriba y la descripción justo debajo (en vez de en la misma línea). */
.check-content {
  display: flex;
  flex-direction: column;   /* título arriba, descripción abajo */
  gap: 4px;
  flex: 1;   /* toma todo el espacio disponible, dejando fija solo la imagen */
}

.check-title {
  color: var(--fuchsia-dark);
  font-size: 1.05rem;
  font-weight: 600;
}

.check-desc {
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ---- Tarjetas de PROFESIONALES ----
   .profile-card se agrega ADEMÁS de .card en el HTML, así que
   hereda el ancho de .card-grid y la forma (bordes/sombra/padding)
   de .card explicados arriba. Aquí solo se agrega lo que cambia
   respecto a una tarjeta de servicio normal: el texto centrado
   y el círculo del avatar. */
.profile-card {
  text-align: center;
}

/* Círculo del avatar del profesional (el emoji 🧑‍⚕️ va adentro) */
.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;   /* 50% = círculo perfecto (esto es lo que le da la FORMA redonda al avatar) */
  background: var(--bg-soft);
  color: var(--fuchsia);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 16px;
}

.bg-white { background: var(--white); }
.bg-soft { background: var(--bg-soft); }

/* Layout de 2 columnas (usado en "¿Quiénes somos?" y en secciones
   con imagen grande al lado del texto). "1fr 1fr" reparte el ancho
   disponible en dos mitades IGUALES — por eso el texto queda
   limitado a la mitad de la pantalla, y lo que pongas en la otra
   columna (como una imagen) ocupa exactamente la otra mitad. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Imagen grande que ocupa toda su mitad dentro de .two-col
   (como la foto al lado del texto en "¿En qué consiste el servicio?"). */
.section-img {
  width: 100%;           /* nunca más ancha que su columna (así no se sale en celular) */
  max-width: 500px;      /* en pantallas grandes no crece más de esto */
  aspect-ratio: 1 / 1;   /* cuadrada: el alto se calcula solo según el ancho */
  height: auto;
  margin: 0;
  object-fit: cover;     /* recorta la imagen para llenar ese bloque sin deformarse */
  border-radius: 25px;
  box-shadow: var(--shadow-sm);
}

.section-consiste{
  width: 100%;
  max-width: 340px;
  aspect-ratio: 340 / 300;   /* misma proporción de antes, pero flexible */
  height: auto;
  margin: 0;
  object-fit: cover;
  border-radius: 25px;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   CTA banda (franja morada con llamado a la acción antes del footer)
   Degradado de morados apagados (menos brillante que el fucsia).
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, #7a3fb0 0%, #5b2d8f 100%);
  color: var(--white);
  text-align: center;
  padding: 56px 24px;
  border-radius: var(--radius);
  margin: 0 24px;
}

.cta-band h2 { margin-bottom: 12px; }
.cta-band p { margin-bottom: 26px; opacity: 0.95; }

/* ============================================================
   FOOTER (contacto + botones de WhatsApp/encuesta)
   ============================================================ */
.site-footer {
  background: var(--plum);
  color: var(--white);
  margin-top: 64px;
  padding: 56px 24px 24px;
}

/* Dos columnas: info de contacto (más ancha) y botones de acción */
.footer-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-info h3,
.footer-actions h3 {
  margin-bottom: 18px;
  font-size: 1.1rem;
}

.footer-info p { margin-bottom: 10px; opacity: 0.9; overflow-wrap: anywhere; }   /* el correo largo no se sale */

.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ============================================================
   RESPONSIVE (ajustes para pantallas más angostas)
   ============================================================ */

/* Tablets y móviles grandes (< 860px):
   las tarjetas (servicios y profesionales) pasan de 3 columnas
   a 1 sola columna de ancho completo, para que no queden
   demasiado angostas/apretadas. */
@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; }
  .section-img, .section-consiste { margin: 0 auto; }   /* centradas cuando van solas en una columna */

  /* La tarjeta "Servicios" vuelve al flujo normal (una columna, ancho completo) */
  .card-servicios {
    grid-row: auto;
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

/* Móviles (< 720px):
   el menú superior ya no cabe en una sola línea, así que se
   centra y se permite que los enlaces salten a una segunda
   línea (flex-wrap) en vez de desbordarse o usar un botón
   de hamburguesa. */
@media (max-width: 900px) {
  .navbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .nav-links a {
    padding: 8px 14px;
    font-size: 0.9rem;
  }
}