/* ====================================================
       VARIABLES GLOBALES — PERSONALIZA AQUÍ
       Cambia estos valores y todo el sitio se actualiza
    ==================================================== */
    :root {
      /* --- COLORES PRINCIPALES --- */
      --color-morado:      #7C3AED;   /* Morado principal (botones, títulos) */
      --color-morado-suave:#EDE9FE;   /* Fondo morado muy claro */
      --color-verde:       #0D9488;   /* Verde/teal (íconos, acentos) */
      --color-verde-suave: #CCFBF1;   /* Fondo verde muy claro */
      --color-dorado:      #F59E0B;   /* Amarillo/dorado (estrellas, badges) */
      --color-rosa:        #EC4899;   /* Rosa (acentos secundarios) */
      --color-rosa-suave:  #FCE7F3;   /* Fondo rosa muy claro */
      --color-texto:       #1F2937;   /* Color principal del texto */
      --color-texto-suave: #6B7280;   /* Texto secundario/descriptivo */
      --color-fondo:       #FAFAFA;   /* Fondo general de la página */
      --color-blanco:      #FFFFFF;

      /* --- TIPOGRAFÍA --- */
      --fuente-titulo:  'Amatic SC', cursive;   /* Títulos grandes y llamativos */
      --fuente-cuerpo:  'Nunito', sans-serif;      /* Texto general */

      /* --- TAMAÑOS DE FUENTE --- */
      --texto-xs:   0.75rem;
      --texto-sm:   0.875rem;
      --texto-base: 1rem;
      --texto-lg:   1.125rem;
      --texto-xl:   1.25rem;
      --texto-2xl:  1.5rem;
      --texto-3xl:  1.875rem;
      --texto-4xl:  2.25rem;
      --texto-5xl:  3rem;

      /* --- ESPACIADOS --- */
      --espaciado-seccion: 5rem;      /* Espacio vertical entre secciones */
      --contenedor-max:    1200px;    /* Ancho máximo del contenido */
      --radio-tarjeta:     1.5rem;    /* Bordes redondeados de las tarjetas */

      /* --- SOMBRAS --- */
      --sombra-suave: 0 4px 20px rgba(124,58,237,0.08);
      --sombra-hover:  0 8px 30px rgba(124,58,237,0.18);

      /* --- DATOS DE CONTACTO (búscalos con Ctrl+F "DATO:") ---
         Actualiza estos y busca en el HTML dónde aparecen */
      /* WhatsApp: número sin espacios ni guiones, con código de país */
      /* Ejemplo México: 5215512345678 */
    }

    /* =====================================================
       RESET Y BASE
    ====================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--fuente-cuerpo);
      background: var(--color-fondo);
      color: var(--color-texto);
      overflow-x: hidden;
    }

    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    .contenedor {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* =====================================================
       ANIMACIONES DE ENTRADA
       Puedes eliminar o modificar estos keyframes
    ====================================================== */
    @keyframes flotar {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-10px); }
    }
    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulsarEstrella {
      0%, 100% { transform: scale(1) rotate(0deg); }
      50%       { transform: scale(1.2) rotate(15deg); }
    }

    .animar { animation: fadeSlideUp 0.6s ease both; }
    .animar-1 { animation-delay: 0.1s; }
    .animar-2 { animation-delay: 0.2s; }
    .animar-3 { animation-delay: 0.3s; }
    .animar-4 { animation-delay: 0.4s; }
    .animar-5 { animation-delay: 0.5s; }

    /* =====================================================
       BARRA SUPERIOR (Top Bar)
       Personaliza: mensajes, colores, redes sociales
    ====================================================== */
    .topbar {
      /* Cambia el color de fondo de la barra top */
      background: var(--color-morado);
      color: var(--color-blanco);
      font-size: var(--texto-xs);
      font-weight: 600;
      padding: 0.45rem 0;
    }
    .topbar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .topbar__items {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
    }
    .topbar__item {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      opacity: 0.95;
    }
    /* Emoji/ícono antes de cada mensaje en la topbar */
    .topbar__item::before { font-style: normal; }

    .topbar__redes {
      display: flex;
      flex-shrink: 0;
      gap: 0.75rem;
    }
    .topbar__redes a {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-blanco);
      opacity: 0.9;
      font-size: var(--texto-base);
      transition: opacity 0.2s;
    }
    .topbar__redes a:hover { opacity: 1; }
    .topbar__redes img {
      width: 1.1rem;
      height: 1.1rem;
      object-fit: contain;
    }

    /* =====================================================
       NAVBAR
       Personaliza: logo, links, botón CTA
    ====================================================== */
    .navbar {
      background: var(--color-blanco);
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .navbar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 1.5rem;
      max-width: var(--contenedor-max);
      margin: 0 auto;
    }
    .navbar__logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    /* Ícono del logo — puedes reemplazar este SVG con tu logo real */
    .navbar__logo-icono {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
    }
    .navbar__logo-texto { line-height: 1.1; }
    /* Nombre del negocio en el logo */
    .navbar__logo-nombre {
      font-family: var(--fuente-titulo);
      font-size: var(--texto-xl);
      color: var(--color-morado);
      letter-spacing: 0.5px;
    }
    /* Eslogan debajo del nombre en el logo */
    .navbar__logo-eslogan {
      font-size: 0.6rem;
      color: var(--color-texto-suave);
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .navbar__nav {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .navbar__link {
      font-size: var(--texto-sm);
      font-weight: 600;
      color: var(--color-texto);
      padding: 0.4rem 0.75rem;
      border-radius: 0.5rem;
      transition: color 0.2s, background 0.2s;
    }
    .navbar__link:hover,
    .navbar__link--activo {
      color: var(--color-morado);
      background: var(--color-morado-suave);
    }
    .navbar__link--activo {
      border-bottom: 2px solid var(--color-morado);
      border-radius: 0;
      background: transparent;
    }
    /* Botón "Agenda tu cita" en la navbar */
    .btn-cita {
      background: var(--color-morado);
      color: var(--color-blanco);
      font-family: var(--fuente-cuerpo);
      font-size: var(--texto-sm);
      font-weight: 700;
      padding: 0.6rem 1.2rem;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
      white-space: nowrap;
    }
    .btn-cita:hover {
      background: #6D28D9;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(124,58,237,0.4);
    }

    /* =====================================================
       HERO (Sección principal / banner)
       Personaliza: título, subtítulo, imagen, botones
    ====================================================== */
    .hero {
      /* Fondo con gradiente suave — cambia los colores aquí */
      background: linear-gradient(135deg, #F5F3FF 0%, #E0F2FE 50%, #F0FDF4 100%);
      padding: 4rem 1.5rem 0;
      overflow: hidden;
      position: relative;
    }
    /* Elementos decorativos flotantes en el fondo del hero */
    .hero__deco {
      position: absolute;
      border-radius: 50%;
      opacity: 0.25;
      pointer-events: none;
    }
    .hero__deco--1 {
      width: 400px; height: 400px;
      background: var(--color-morado);
      top: -150px; right: -100px;
    }
    .hero__deco--2 {
      width: 200px; height: 200px;
      background: var(--color-verde);
      bottom: 50px; left: -60px;
    }
    .hero__inner {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      /* Ajusta las proporciones del grid texto/imagen */
      grid-template-columns: 1fr 1fr;
      align-items: flex-end;
      gap: 2rem;
      position: relative;
    }
    .hero__contenido { padding-bottom: 4rem; }

    /* Etiqueta pequeña sobre el título principal */
    .hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: var(--color-verde-suave);
      color: var(--color-verde);
      font-size: var(--texto-xs);
      font-weight: 700;
      padding: 0.35rem 0.8rem;
      border-radius: 999px;
      margin-bottom: 1.2rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .hero__titulo {
      font-family: var(--fuente-titulo);
      /* Tamaño del título principal */
      font-size: clamp(2.2rem, 5vw, 3.5rem);
      line-height: 1.15;
      color: var(--color-texto);
      margin-bottom: 1rem;
    }
    /* Palabras de color en el título — clase "acento-morado" y "acento-verde" */
    .acento-morado { color: var(--color-morado); }
    .acento-verde   { color: var(--color-verde); }

    .hero__descripcion {
      font-size: var(--texto-base);
      color: var(--color-texto-suave);
      line-height: 1.7;
      max-width: 420px;
      margin-bottom: 2rem;
    }

    .hero__botones {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    /* Botón principal (WhatsApp / CTA primario) */
    .btn-primario {
      background: var(--color-morado);
      color: var(--color-blanco);
      font-family: var(--fuente-cuerpo);
      font-size: var(--texto-sm);
      font-weight: 700;
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.2s;
    }
    .btn-primario:hover {
      background: #6D28D9;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(124,58,237,0.35);
    }

    /* Botón secundario (outline) */
    .btn-secundario {
      background: transparent;
      color: var(--color-texto);
      font-family: var(--fuente-cuerpo);
      font-size: var(--texto-sm);
      font-weight: 700;
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      border: 2px solid #D1D5DB;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.2s;
    }
    .btn-secundario:hover {
      border-color: var(--color-morado);
      color: var(--color-morado);
    }

    /* Imagen del hero — reemplaza el src con tu foto real */
    .hero__imagen-wrap {
      position: relative;
      display: flex;
      justify-content: center;
    }
    .hero__imagen {
      width: 100%;
      max-width: 520px;
      border-radius: 2rem 2rem 0 0;
      object-fit: cover;
      /* Altura de la imagen del hero */
      height: 480px;
    }
    /* Tarjeta flotante sobre la imagen */
    .hero__flotante {
      position: absolute;
      bottom: 60px;
      right: -10px;
      background: var(--color-morado);
      color: var(--color-blanco);
      font-size: var(--texto-sm);
      font-weight: 700;
      padding: 1rem 1.2rem;
      border-radius: 1.2rem;
      text-align: center;
      max-width: 140px;
      line-height: 1.3;
      animation: flotar 3s ease-in-out infinite;
      box-shadow: 0 8px 24px rgba(124,58,237,0.3);
    }

    /* Estrellas y confeti decorativos en el hero */
    .estrella-deco {
      position: absolute;
      font-size: 1.4rem;
      animation: pulsarEstrella 2s ease-in-out infinite;
      pointer-events: none;
    }

    /* =====================================================
       BENEFICIOS (Barra de características)
       Personaliza: ícono, título de cada beneficio
    ====================================================== */
    .beneficios {
      padding: 2.5rem 1.5rem;
      background: var(--color-blanco);
    }
    .beneficios__grid {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      /* Cambia el número de columnas según cuántos beneficios tengas */
      grid-template-columns: repeat(5, 1fr);
      gap: 1.5rem;
      background: var(--color-blanco);
      border-radius: 1.5rem;
      box-shadow: var(--sombra-suave);
      padding: 2rem;
    }
    .beneficio {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.6rem;
    }
    .beneficio__icono {
      width: 52px; height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
    }
    .beneficio__nombre {
      font-size: var(--texto-sm);
      font-weight: 700;
      line-height: 1.3;
      color: var(--color-texto);
    }

    /* =====================================================
       SERVICIOS
       Personaliza: título de sección, tarjetas de servicios
    ====================================================== */
    .servicios {
      padding: var(--espaciado-seccion) 1.5rem;
      background: var(--color-fondo);
    }
    /* Encabezado reutilizable de sección */
    .seccion-header {
      text-align: center;
      margin-bottom: 3rem;
    }
    .seccion-titulo {
      font-family: var(--fuente-titulo);
      font-size: var(--texto-3xl);
      color: var(--color-texto);
      margin-bottom: 0.5rem;
    }
    /* Palabra de color dentro del título de sección */
    .seccion-titulo span { color: var(--color-morado); }

    /* Línea decorativa bajo el título */
    .seccion-linea {
      width: 60px;
      height: 4px;
      /* Cambia el color de la línea decorativa */
      background: var(--color-morado);
      border-radius: 999px;
      margin: 0.75rem auto 0;
    }

    .servicios__grid {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      align-items: stretch;
      /* 5 columnas para 5 servicios — ajusta según necesites */
      grid-template-columns: repeat(5, 1fr);
      gap: 1.25rem;
    }
    .servicio-card {
      background: var(--color-blanco);
      border-radius: var(--radio-tarjeta);
      overflow: hidden;
      box-shadow: var(--sombra-suave);
      transition: transform 0.25s, box-shadow 0.25s;
      border: 1.5px solid transparent;
      display: flex;   
      flex-direction: column;
    }
    .servicio-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sombra-hover);
    }
    /* Cambia el color del borde superior de cada tarjeta */
    .servicio-card--morado { border-top: 4px solid var(--color-morado); }
    .servicio-card--verde  { border-top: 4px solid var(--color-verde);  }
    .servicio-card--dorado { border-top: 4px solid var(--color-dorado); }
    .servicio-card--rosa   { border-top: 4px solid var(--color-rosa);   }
    .servicio-card--cyan   { border-top: 4px solid #06B6D4; }

    .servicio-card__cuerpo { 
        padding: 1.2rem;
        flex: 1;
        
    }
    .servicio-card__icono-wrap {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.75rem;
      flex: 1
    }
    .servicio-card__icono {
      font-size: 1.5rem;
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .servicio-card__nombre {
      font-size: var(--texto-sm);
      font-weight: 800;
      /* Cambia el color del nombre de cada servicio con las clases de acento */
    }
    .servicio-card__desc {
      font-size: var(--texto-xs);
      color: var(--color-texto-suave);
      line-height: 1.6;
      margin-bottom: 1rem;
    }
    .servicio-card__link {
      font-size: var(--texto-xs);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      transition: gap 0.2s;
    }
    .servicio-card__link:hover { gap: 0.6rem; }
    /* Imagen dentro de la tarjeta de servicio */
    .servicio-card__img {
       width: 100%;
       height: 140px;
       object-fit: cover;
       
    }

    /* =====================================================
       EXPERIENCIA (Sección "Una experiencia mágica")
       Personaliza: título, lista de beneficios, imagen
    ====================================================== */
    .experiencia {
      padding: var(--espaciado-seccion) 1.5rem;
      background: #F5F3FF; /* Fondo morado muy claro — cámbialo si quieres */
    }
    .experiencia__inner {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      /* Proporción texto | video | miniaturas */
      grid-template-columns: 1fr 1.4fr;
      gap: 2.5rem;
      align-items: center;
    }
    .experiencia__titulo {
      font-family: var(--fuente-titulo);
      font-size: clamp(1.6rem, 3vw, 2.5rem);
      line-height: 1.2;
      color: var(--color-texto);
      margin-bottom: 1.5rem;
    }
    .experiencia__lista { margin-bottom: 2rem; }
    .experiencia__item {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      margin-bottom: 0.9rem;
      font-size: var(--texto-sm);
      color: var(--color-texto-suave);
    }
    /* Ícono check de cada ítem */
    .experiencia__check {
      width: 20px; height: 20px;
      background: var(--color-verde);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.65rem;
      flex-shrink: 0;
      margin-top: 2px;
    }
    /* Contenedor del video/imagen principal */
    .experiencia__video {
      border-radius: 1.5rem;
      overflow: hidden;
      position: relative;
      background: var(--color-morado-suave);
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .experiencia__video img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    /* Botón de play sobre el video */
    .experiencia__play {
      position: absolute;
      width: 60px; height: 60px;
      background: var(--color-blanco);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--color-morado);
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      transition: transform 0.2s;
    }
    .experiencia__play:hover { transform: scale(1.1); }

    .experiencia__miniaturas {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .miniatura {
      border-radius: 1rem;
      overflow: hidden;
      background: var(--color-blanco);
      box-shadow: var(--sombra-suave);
      position: relative;
    }
    .miniatura img { width: 100%; height: 90px; object-fit: cover; }
    .miniatura__label {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
      color: white;
      font-size: var(--texto-xs);
      font-weight: 700;
      padding: 0.5rem;
      text-align: center;
    }

    /* =====================================================
       TESTIMONIOS
       Personaliza: cita, nombre, estrellas
    ====================================================== */
    .testimonios {
      padding: var(--espaciado-seccion) 1.5rem;
      background: var(--color-blanco);
    }
    .testimonios__inner {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      /* Ajusta: 1fr para el testimonio, 1fr para el proceso */
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }
    .testimonio-card {
      background: var(--color-morado-suave);
      border-radius: 1.5rem;
      padding: 2rem;
      position: relative;
    }
    .testimonio-card::before {
      content: '"';
      font-family: var(--fuente-titulo);
      font-size: 5rem;
      color: var(--color-morado);
      opacity: 0.2;
      position: absolute;
      top: 0.5rem;
      left: 1.5rem;
      line-height: 1;
    }
    .testimonio-card__texto {
      font-size: var(--texto-base);
      font-style: italic;
      color: var(--color-texto);
      line-height: 1.7;
      margin-bottom: 1rem;
    }
    .testimonio-card__autor {
      font-weight: 800;
      color: var(--color-morado);
      margin-bottom: 0.5rem;
    }
    .estrellas { color: var(--color-dorado); font-size: var(--texto-lg); }

    /* Proceso: pasos numerados */
    .proceso__titulo {
      font-family: var(--fuente-titulo);
      font-size: var(--texto-2xl);
      color: var(--color-texto);
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .proceso__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      text-align: center;
    }
    .paso {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
    }
    .paso__numero {
      width: 48px; height: 48px;
      border-radius: 50%;
      /* Cambia el color del número de paso */
      background: var(--color-verde);
      color: white;
      font-family: var(--fuente-titulo);
      font-size: var(--texto-xl);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Íconos de los pasos */
    .paso__icono-wrap {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: var(--color-morado-suave);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
    }
    .paso__nombre {
      font-weight: 800;
      font-size: var(--texto-base);
      color: var(--color-texto);
    }
    .paso__desc {
      font-size: var(--texto-xs);
      color: var(--color-texto-suave);
      line-height: 1.5;
    }

    /* =====================================================
       NEWSLETTER (Suscripción)
       Personaliza: título, subtítulo, placeholder, botón
    ====================================================== */
    .newsletter {
      /* Color de fondo de la sección — usa var(--color-morado) o cualquier color */
      background: var(--color-morado);
      padding: 3rem 1.5rem;
      color: var(--color-blanco);
    }
    .newsletter__inner {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .newsletter__icono { font-size: 2.5rem; flex-shrink: 0; }
    .newsletter__texto { flex: 1; min-width: 200px; }
    .newsletter__titulo {
      font-family: var(--fuente-titulo);
      font-size: var(--texto-xl);
      margin-bottom: 0.25rem;
    }
    .newsletter__subtitulo {
      font-size: var(--texto-sm);
      opacity: 0.85;
    }
    .newsletter__form {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    /* Campo de email del newsletter */
    .newsletter__input {
      padding: 0.8rem 1.2rem;
      border-radius: 999px;
      border: none;
      font-family: var(--fuente-cuerpo);
      font-size: var(--texto-sm);
      /* Ancho del campo de email */
      width: 260px;
      outline: none;
    }
    /* Botón del newsletter */
    .newsletter__btn {
      background: var(--color-dorado);
      color: var(--color-blanco);
      font-family: var(--fuente-cuerpo);
      font-weight: 700;
      font-size: var(--texto-sm);
      padding: 0.8rem 1.4rem;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      transition: background 0.2s, transform 0.2s;
    }
    .newsletter__btn:hover { background: #D97706; transform: translateY(-1px); }

    /* =====================================================
       FOOTER
       Personaliza: logo, descripción, links, horarios, redes
    ====================================================== */
    .footer {
      background: var(--color-texto); /* Fondo oscuro del footer */
      color: #D1D5DB;
      padding: 3.5rem 1.5rem 1.5rem;
    }
    .footer__grid {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      /* Ajusta las columnas del footer */
      grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
      gap: 3rem;
      margin-bottom: 2.5rem;
    }
    .footer__logo-nombre {
      font-family: var(--fuente-titulo);
      font-size: var(--texto-xl);
      color: var(--color-blanco);
    }
    .footer__logo-eslogan {
      font-size: var(--texto-xs);
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #9CA3AF;
      margin-bottom: 0.75rem;
    }
    .footer__desc {
      font-size: var(--texto-sm);
      line-height: 1.7;
      color: #9CA3AF;
    }
    .footer__titulo-col {
      font-size: var(--texto-sm);
      font-weight: 800;
      color: var(--color-blanco);
      margin-bottom: 1rem;
    }
    .footer__item {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-size: var(--texto-sm);
      color: #9CA3AF;
      margin-bottom: 0.6rem;
    }
    .footer__item-icono { flex-shrink: 0; margin-top: 2px; }
    .footer__horario {
      display: flex;
      justify-content: space-between;
      font-size: var(--texto-xs);
      color: #9CA3AF;
      margin-bottom: 0.5rem;
    }
    .footer__horario span:last-child { font-weight: 600; color: #D1D5DB; }

    .footer__redes {
      display: flex;
      gap: 0.75rem;
      margin-top: 1rem;
    }
    .footer__red {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: #374151;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: var(--color-blanco);
      transition: background 0.2s;
    }
    .footer__red:hover { background: var(--color-morado); }
    .footer__red img {
      width: 1.1rem;
      height: 1.1rem;
      object-fit: contain;
    }

    .footer__bottom {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      border-top: 1px solid #374151;
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: var(--texto-xs);
      color: #6B7280;
    }
    .footer__bottom-links {
      display: flex;
      gap: 1.5rem;
    }
    .footer__bottom-links a:hover { color: var(--color-blanco); }

    /* =====================================================
       BOTÓN FLOTANTE DE WHATSAPP
       Personaliza: número de WhatsApp en el href
    ====================================================== */
    .wa-flotante {
      position: fixed;
      /* Posición del botón flotante */
      bottom: 1.5rem;
      right: 1.5rem;
      width: 56px; height: 56px;
      /* DATO: Cambia el número de WhatsApp (con código de país) */
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      color: var(--color-blanco);
      box-shadow: 0 4px 16px rgba(37,211,102,0.4);
      z-index: 999;
      animation: flotar 3s ease-in-out infinite;
      transition: transform 0.2s;
    }
    .wa-flotante:hover { transform: scale(1.1); }

    /* =====================================================
       RESPONSIVE — Tablets y Móviles
       Ajusta los breakpoints según necesites
    ====================================================== */
    @media (max-width: 1024px) {
      .servicios__grid { grid-template-columns: repeat(3, 1fr); }
      .experiencia__inner { grid-template-columns: 1fr 1fr; }
      .experiencia__miniaturas { display: none; }
      .beneficios__grid { grid-template-columns: repeat(3, 1fr); }
      .footer__grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .navbar__nav { display: none; } /* Menú hamburguesa pendiente */
      .hero__inner { grid-template-columns: 1fr; }
      .hero__imagen-wrap { display: none; }
      .servicios__grid { grid-template-columns: repeat(2, 1fr); }
      .experiencia__inner { grid-template-columns: 1fr; }
      .testimonios__inner { grid-template-columns: 1fr; }
      .proceso__grid { grid-template-columns: 1fr; }
      .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
      .topbar__items { display: none; }
      .beneficios__grid { grid-template-columns: repeat(2, 1fr); }
      .topbar__inner { justify-content: center; }
    }
    @media (max-width: 480px) {
      .servicios__grid { grid-template-columns: 1fr; }
      .newsletter__inner { flex-direction: column; text-align: center; }
      .newsletter__input { width: 100%; }
      .topbar__redes img { width: 1rem; height: 1rem; }
      .topbar__redes { gap: 0.6rem; }
      .footer__red { width: 32px; height: 32px; }
      .footer__red img { width: 1rem; height: 1rem; }
    }

    /* =====================================================
       ═══ ESTILOS AGREGADOS — SEGUNDA FASE DEL SITIO ═══
       Todo lo de aquí en adelante es nuevo: dropdown de
       servicios, página Nosotros, Pacientes (carrusel +
       reseñas), video vertical y Blog.
    ====================================================== */

    /* --- CTA de WhatsApp (reemplaza al newsletter) --- */
    .whatsapp-cta {
      background: var(--color-morado);
      padding: 3rem 1.5rem;
      color: var(--color-blanco);
    }
    .whatsapp-cta__inner {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .whatsapp-cta__icono { font-size: 2.8rem; flex-shrink: 0; }
    .whatsapp-cta__texto { flex: 1; min-width: 200px; }
    .whatsapp-cta__titulo {
      font-family: var(--fuente-titulo);
      font-size: var(--texto-2xl);
      margin-bottom: 0.25rem;
    }
    .whatsapp-cta__subtitulo {
      font-size: var(--texto-sm);
      opacity: 0.9;
    }
    /* Botón grande de WhatsApp — usa el color de WhatsApp para que se reconozca */
    .whatsapp-cta__btn {
      background: #25D366;
      color: var(--color-blanco);
      font-family: var(--fuente-cuerpo);
      font-weight: 800;
      font-size: var(--texto-base);
      padding: 1rem 1.8rem;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      transition: background 0.2s, transform 0.2s;
      white-space: nowrap;
    }
    .whatsapp-cta__btn:hover { background: #1EBE5A; transform: translateY(-2px); }

    /* --- Dropdown "Servicios" en el Navbar --- */
    .navbar__item-dropdown {
      position: relative;
    }
    .navbar__dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--color-blanco);
      border-radius: 0.9rem;
      box-shadow: var(--sombra-hover);
      min-width: 220px;
      padding: 0.5rem;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
      z-index: 200;
    }
    .navbar__item-dropdown:hover .navbar__dropdown-menu,
    .navbar__item-dropdown:focus-within .navbar__dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(4px);
    }
    .navbar__dropdown-link {
      display: block;
      padding: 0.6rem 0.9rem;
      border-radius: 0.6rem;
      font-size: var(--texto-sm);
      font-weight: 600;
      color: var(--color-texto);
      transition: background 0.15s, color 0.15s;
    }
    .navbar__dropdown-link:hover {
      background: var(--color-morado-suave);
      color: var(--color-morado);
    }

    /* --- Banner interior para páginas secundarias (Nosotros, Servicios, etc.) --- */
    .banner-interior {
      background: linear-gradient(135deg, #F5F3FF 0%, #E0F2FE 50%, #F0FDF4 100%);
      padding: 3.5rem 1.5rem;
      text-align: center;
    }
    .banner-interior__titulo {
      font-family: var(--fuente-titulo);
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--color-texto);
    }
    .banner-interior__desc {
      font-size: var(--texto-base);
      color: var(--color-texto-suave);
      max-width: 600px;
      margin: 0.75rem auto 0;
      line-height: 1.7;
    }

    /* --- Página Nosotros: cuadrícula del equipo --- */
    .equipo {
      padding: var(--espaciado-seccion) 1.5rem;
      background: var(--color-fondo);
    }
    .equipo__intro {
      max-width: 750px;
      margin: 0 auto 3rem;
      text-align: center;
      font-size: var(--texto-base);
      color: var(--color-texto-suave);
      line-height: 1.8;
    }
    .equipo__grid {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
    .miembro-card {
      background: var(--color-blanco);
      border-radius: var(--radio-tarjeta);
      overflow: hidden;
      box-shadow: var(--sombra-suave);
      text-align: center;
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .miembro-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }
    /* Foto del doctor(a) — recuerda usar fotos con proporción similar (cuadradas idealmente) */
    .miembro-card__foto {
      width: 100%;
      height: 240px;
      object-fit: cover;
      background: var(--color-morado-suave);
    }
    .miembro-card__cuerpo { padding: 1.2rem; }
    .miembro-card__nombre {
      font-weight: 800;
      font-size: var(--texto-base);
      color: var(--color-texto);
      margin-bottom: 0.2rem;
    }
    .miembro-card__rol {
      font-size: var(--texto-xs);
      font-weight: 700;
      color: var(--color-morado);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* --- Páginas de Servicio individuales --- */
    .servicio-detalle {
      padding: var(--espaciado-seccion) 1.5rem;
      max-width: 900px;
      margin: 0 auto;
    }
    .servicio-detalle__img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      border-radius: var(--radio-tarjeta);
      margin-bottom: 2rem;
    }
    .servicio-detalle__texto {
      font-size: var(--texto-base);
      color: var(--color-texto-suave);
      line-height: 1.8;
      margin-bottom: 2rem;
    }

    /* --- Video vertical (9:16) — usado en "Una experiencia mágica" y en Experiencia Sonrilandia --- */
    .video-vertical-wrap {
      border-radius: 1.5rem;
      overflow: hidden;
      background: #111;
      /* Mantiene la proporción 9:16 sin importar el ancho del contenedor */
      aspect-ratio: 9 / 16;
      max-height: 520px;
      max-width: 300px;
      margin: 0 auto;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .video-vertical-wrap video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* --- Carrusel de Pacientes --- */
    .carrusel-pacientes {
      max-width: 900px;
      margin: 0 auto;
      position: relative;
    }
    .carrusel-pacientes__viewport {
      overflow: hidden;
      border-radius: var(--radio-tarjeta);
      box-shadow: var(--sombra-suave);
    }
    .carrusel-pacientes__track {
      display: flex;
      height: 750px;
      transition: transform 0.4s ease;
    }
    .carrusel-pacientes__track img {
      width: 100%;
      flex-shrink: 0;
      height: 750px;
      object-fit: cover;
    }
    .carrusel-pacientes__flecha {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--color-blanco);
      border: none;
      box-shadow: var(--sombra-suave);
      font-size: 1.2rem;
      color: var(--color-morado);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    .carrusel-pacientes__flecha:hover { background: var(--color-morado-suave); }
    .carrusel-pacientes__flecha--izq { left: -22px; }
    .carrusel-pacientes__flecha--der { right: -22px; }
    .carrusel-pacientes__puntos {
      display: flex;
      justify-content: center;
      gap: 0.4rem;
      margin-top: 1.2rem;
    }
    .carrusel-pacientes__punto {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #D1D5DB;
      border: none;
      cursor: pointer;
      transition: background 0.2s, width 0.2s;
    }
    .carrusel-pacientes__punto--activo {
      background: var(--color-morado);
      width: 22px;
      border-radius: 999px;
    }

    /* --- Reseñas de Google --- */
    .resenas { padding: var(--espaciado-seccion) 1.5rem; background: var(--color-fondo); }
    .resenas__grid {
      max-width: var(--contenedor-max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .resena-card {
      background: var(--color-blanco);
      border-radius: var(--radio-tarjeta);
      padding: 1.5rem;
      box-shadow: var(--sombra-suave);
    }
    .resena-card__estrellas { color: var(--color-dorado); font-size: var(--texto-base); margin-bottom: 0.6rem; }
    .resena-card__texto {
      font-size: var(--texto-sm);
      color: var(--color-texto-suave);
      line-height: 1.7;
      margin-bottom: 0.9rem;
    }
    .resena-card__autor { font-weight: 800; font-size: var(--texto-sm); color: var(--color-texto); }
    .resenas__link-maps {
      display: block;
      text-align: center;
      margin-top: 2rem;
      font-weight: 700;
      color: var(--color-morado);
    }

    /* --- Blog: tarjetas "próximamente" --- */
    .blog-placeholder {
      padding: var(--espaciado-seccion) 1.5rem;
      text-align: center;
    }
    .blog-placeholder__grid {
      max-width: var(--contenedor-max);
      margin: 3rem auto 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .blog-placeholder__card {
      background: var(--color-blanco);
      border-radius: var(--radio-tarjeta);
      box-shadow: var(--sombra-suave);
      padding: 2rem 1.5rem;
      color: var(--color-texto-suave);
    }
    .blog-placeholder__icono { font-size: 2rem; margin-bottom: 0.75rem; }

    /* --- Responsive: segunda fase --- */
    @media (max-width: 1024px) {
      .equipo__grid { grid-template-columns: repeat(2, 1fr); }
      .resenas__grid { grid-template-columns: repeat(2, 1fr); }
      .blog-placeholder__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .whatsapp-cta__inner { flex-direction: column; text-align: center; }
      .equipo__grid { grid-template-columns: 1fr; }
      .resenas__grid { grid-template-columns: 1fr; }
      .blog-placeholder__grid { grid-template-columns: 1fr; }
      .carrusel-pacientes__track img { height: 300px; }
    }
 /* =====================================================
       DOCUMENTOS LEGALES — Aviso de Privacidad / Términos
    ====================================================== */
    .legal-doc {
      max-width: 780px;
      margin: 0 auto;
      padding: var(--espaciado-seccion) 1.5rem 4rem;
    }
    .legal-doc h2 {
      font-family: var(--fuente-titulo);
      font-size: var(--texto-2xl);
      color: var(--color-morado);
      margin-top: 2.2rem;
      margin-bottom: 0.75rem;
    }
    .legal-doc h2:first-of-type { margin-top: 0; }
    .legal-doc p {
      font-size: var(--texto-sm);
      color: var(--color-texto-suave);
      line-height: 1.8;
      margin-bottom: 1rem;
    }
    .legal-doc ul {
      margin: 0 0 1rem 1.2rem;
      list-style: disc;
    }
    .legal-doc li {
      font-size: var(--texto-sm);
      color: var(--color-texto-suave);
      line-height: 1.8;
      margin-bottom: 0.4rem;
    }
    .legal-doc strong { color: var(--color-texto); }
    .legal-doc__actualizado {
      font-size: var(--texto-xs);
      color: #9CA3AF;
      margin-bottom: 2rem;
      font-style: italic;
    }
    /* Aviso para el dueño del sitio, no para visitantes — bórralo si quieres */
    .legal-doc__nota-interna {
      background: #FEF3C7;
      border-left: 4px solid var(--color-dorado);
      padding: 1rem 1.2rem;
      border-radius: 0.5rem;
      font-size: var(--texto-xs);
      color: #92400E;
      margin-bottom: 2.5rem;
      line-height: 1.7;
    }