:root {
    --brand: #71B2C8;
    --brand-dark: #652681;
    --text: #652681;
    --bg: #ffffff;
    --border: #e5e7eb;
  }

  * { box-sizing: border-box; }

  /* Smooth scrolling for in-page anchors */
  html {
    scroll-behavior: smooth;
    /* Reserve space equal to sticky header height so anchors aren't hidden */
    scroll-padding-top: 80px;
    overflow-x: hidden;
  }

  body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    transition: transform 0.3s ease;
  }

  .site-header.hidden {
    transform: translateY(-100%);
  }

  .nav-bar {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 16px;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
  }

  .brand img {
    height: 40px;
    width: auto;
    display: block;
  }

  .brand-name {
    font-weight: 700;
    letter-spacing: 0.2px;
    font-size: 1.1rem;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nav-link {
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--text);
    font-weight: 600;
  }

  .nav-link:hover {
    background: #f8fafc;
    border-color: var(--border);
  }

  .nav-link.active {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
  }

  .nav-link.active:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
  }


  /* Slide/fade in for key elements on first paint */
  .nav-bar,
  .banner-content > *,
  .banner2-content > *,
  .banner3-content > *,
  .banner4-content > *,
  .services-title,
  .services-subtitle {
    opacity: 0;
    transform: translateY(12px);
  }

  html.page-loaded .nav-bar,
  html.page-loaded .banner-content > *,
  html.page-loaded .banner2-content > *,
  html.page-loaded .banner3-content > *,
  html.page-loaded .banner4-content > *,
  html.page-loaded .services-title,
  html.page-loaded .services-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1100ms ease, transform 1100ms ease; /* Increased by 500ms */
  }

  /* Stagger for banner content */
  .banner-content > *:nth-child(1),
  .banner2-content > *:nth-child(1),
  .banner3-content > *:nth-child(1),
  .banner4-content > *:nth-child(1) {
    transition-delay: 80ms;
  }
  .banner-content > *:nth-child(2),
  .banner2-content > *:nth-child(2),
  .banner3-content > *:nth-child(2),
  .banner4-content > *:nth-child(2) {
    transition-delay: 180ms;
  }
  .banner-content > *:nth-child(3),
  .banner2-content > *:nth-child(3),
  .banner3-content > *:nth-child(3),
  .banner4-content > *:nth-child(3) {
    transition-delay: 260ms;
  }
  .services-title { transition-delay: 120ms; }
  .services-subtitle { transition-delay: 220ms; }

  /* Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .nav-bar,
    .banner-content > *,
    .banner2-content > *,
    .banner3-content > *,
    .banner4-content > *,
    .services-title,
    .services-subtitle {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Scroll-reveal utilities */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms ease, transform 700ms ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal.revealed {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Ensure the services section aligns nicely below the sticky header when navigated via #services */
  #services {
    scroll-margin-top: 80px;
  }

  /* Generic rule so any in-page anchor target aligns below the sticky header */
  :target {
    scroll-margin-top: 80px;
  }

  /* Menú Hamburguesa */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  .hamburger-line {
    width: 100%;
    height: 3px;
    background: var(--brand);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
  }

  .hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  .btn-primary {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
  }

  .btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
  }

  /* --- Interactive & Hover Effects --- */
  .service-card,
  .review-card,
  .specialist-card,
  .contact-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .service-card:hover,
  .review-card:hover,
  .specialist-card:hover,
  .contact-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(101, 38, 129, 0.1);
  }

    /* Banner4 */
    .banner4 {
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
      background-image: url('imágenes/bannersn3.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
      padding: 80px 0 0 0; /* Padding superior para el header */
      text-align: left;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 75vh;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  
    .banner4::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(113, 178, 200, 0.7) 0%, rgba(101, 38, 129, 0.7) 100%);
      z-index: 1;
    }
  
    .banner4-content {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin-left: 0;
      padding-left: 60px;
    }
  
  .banner4 h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .banner4 p {
    font-size: 1.3rem;
    margin: 0;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 600px;
  }
  
  /* Responsive para banner4 */
  @media (max-width: 768px) {
    .banner4 {
      height: 80vh;
      min-height: 400px;
      justify-content: center;
      text-align: center;
    }

    .banner4-content {
      padding-left: 20px;
      padding-right: 20px;
      max-width: calc(100% - 40px);
      margin-left: auto;
      margin-right: auto;
    }

    .banner4 h1 {
      font-size: 3rem;
    }

    .banner4 p {
      margin: 0 auto;
    }
  }

  /* Banner3 */
  .banner3 {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    background-image: url('imágenes/bannersn2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 80px 0 0 0; /* Padding superior para el header */
    text-align: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 75vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .banner3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(113, 178, 200, 0.7) 0%, rgba(101, 38, 129, 0.7) 100%);
    z-index: 1;
  }

  .banner3-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin-left: 0;
    padding-left: 60px;
  }

  .banner3 h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* Responsive para banner3 */
  @media (max-width: 768px) {
    .banner3 {
      height: 80vh;
      min-height: 400px;
      justify-content: center;
      text-align: center;
    }

    .banner3-content {
      padding-left: 20px;
      padding-right: 20px;
      max-width: calc(100% - 40px);
      margin-left: auto;
      margin-right: auto;
    }

    .banner3 h1 {
      font-size: 3rem;
    }
  }

  /* Banner2 */
  .banner2 {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    background-image: url('imágenes/bannersn.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 80px 0 0 0; /* Padding superior para el header */
    text-align: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 75vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .banner2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(113, 178, 200, 0.7) 0%, rgba(101, 38, 129, 0.7) 100%);
    z-index: 1;
  }

  .banner2-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin-left: 0;
    padding-left: 60px;
  }

  .banner2 h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* Responsive para banner2 */
  @media (max-width: 768px) {
    .banner2 {
      height: 80vh;
      min-height: 400px;
      justify-content: center;
      text-align: center;
    }

    .banner2-content {
      padding-left: 20px;
      padding-right: 20px;
      max-width: calc(100% - 40px);
      margin-left: auto;
      margin-right: auto;
    }

    .banner2 h1 {
      font-size: 3rem;
    }
  }

  .banner {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    background-image: url('imágenes/banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 140px 20px 60px 20px; /* Padding superior aumentado para el header */
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100vh; /* Altura completa de la pantalla */
    min-height: 500px; /* Altura mínima */
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
  }

  /* Utility classes for different banner styles */
  .banner.no-overlay::before {
    display: none;
  }

  .banner.light-overlay::before {
    background: linear-gradient(135deg, rgba(113, 178, 200, 0.4) 0%, rgba(101, 38, 129, 0.4) 100%);
  }

  .banner.dark-overlay::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
  }

  /* Clases para diferentes alturas del banner */
  .banner.height-small {
    height: 50vh;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .banner.height-medium {
    height: 70vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .banner.height-large {
    height: 100vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .banner.height-custom {
    height: 600px; /* Puedes cambiar este valor */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .banner.height-auto {
    height: auto;
    min-height: 400px;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
  }

  .banner-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .banner h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .banner p {
    font-size: 1.2rem;
    margin: 0 0 24px 0;
    opacity: 0.95;
    line-height: 1.6;
  }

  .banner-cta {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .btn-banner {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .btn-banner:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .btn-banner.primary {
    background: white;
    color: var(--brand-dark);
    border-color: white;
  }

  .btn-banner.primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
  }

@media (max-width: 768px) {
    /* Prevenir scroll horizontal en móviles */
    html, body {
      overflow-x: hidden !important;
      width: 100%;
      position: relative;
    }

    .hamburger {
      display: flex;
    }

    .nav-actions {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100vh;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 30px;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 1000;
    }

    .nav-actions.active {
      transform: translateX(0);
    }

    .nav-link {
      font-size: 1.5rem;
      padding: 15px 30px;
      border-radius: 10px;
      width: 220px;
      text-align: center;
    }

    .brand-name { display: none; }
  }

  @media (max-width: 640px) {
    .nav-link { 
      font-size: 1.3rem;
      padding: 12px 25px;
      width: 200px;
    }
    
    .banner {
      padding: 40px 20px;
      height: 80vh; /* Altura reducida en móviles */
      min-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .banner.height-small {
      height: 60vh;
      min-height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .banner.height-medium {
      height: 70vh;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .banner.height-large {
      height: 80vh;
      min-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .banner.height-custom {
      height: 500px; /* Altura reducida en móviles */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .banner h1 {
      font-size: 2rem;
    }
    
    .banner p {
      font-size: 1.1rem;
    }
    
    .banner-cta {
      flex-direction: column;
      align-items: center;
    }
    
    /* Centrado perfecto para banners en dispositivos pequeños */
    .banner2-content,
    .banner3-content,
    .banner4-content {
      padding-left: 15px !important;
      padding-right: 15px !important;
      max-width: calc(100% - 30px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
    }
    
    .banner2 h1,
    .banner3 h1,
    .banner4 h1 {
      font-size: 2.5rem !important;
      text-align: center !important;
    }
  }

  /* Sección de Servicios */
  .services-section {
    background: white;
    padding: 80px 20px;
    color: var(--brand);
  }

  .services-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .services-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--brand);
    letter-spacing: 1px;
  }

  .services-subtitle {
    font-size: 1.2rem;
    color: var(--brand);
    margin: 0 0 60px 0;
    opacity: 0.8;
  }

  /* Carrusel */
  .carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin: 0 40px;
    padding: 20px 0;
  }

  .carousel-wrapper {
    overflow: hidden; /* ¡ESTA ES LA REGLA CLAVE QUE FALTABA! */
    border-radius: 20px;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* El ancho se calculará dinámicamente con JS para alojar todos los slides */
    will-change: transform;
  }

  .service-card {
    flex-shrink: 0;
    box-sizing: border-box;
    /* El padding se ha movido a los elementos internos .service-image y .service-info */
  }

  .service-image {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    height: 250px;
    margin: 0 25px 20px 25px; /* Se añade margen para simular el padding horizontal */
  }

  .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .service-card:hover .service-image img {
    transform: scale(1.05);
  }

  .service-info {
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin: 0 25px 30px 25px; /* Se añade margen para simular el padding */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

  .service-info h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 12px 0;
    line-height: 1.3;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .service-info p {
    font-size: 0.9rem;
    color: var(--brand);
    opacity: 0.8;
    line-height: 1.4;
    margin: 0 0 20px 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .service-btn {
    background: var(--brand);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
  }

  .service-btn:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(113, 178, 200, 0.3);
  }

  /* Controles del carrusel */
  .carousel-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
  }

  .carousel-btn {
    background: var(--brand);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-btn:hover:not(:disabled) {
    background: var(--brand-dark);
    transform: scale(1.1);
  }

  .carousel-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
  }

  /* Responsive para servicios */
  @media (max-width: 1024px) {
    .carousel-container {
      margin: 0 30px;
    }
  }

  @media (max-width: 992px) {
    /* Asegura 1 tarjeta por vista en anchos como 446px */
    .service-card {
      flex: 0 0 100% !important;
      max-width: 100%;
    }
  }

  @media (max-width: 768px) {
    .services-section {
      padding: 60px 20px;
    }

    .services-title {
      font-size: 2rem;
    }

    .services-subtitle {
      font-size: 1.1rem;
      margin-bottom: 40px;
    }

    .carousel-container {
      margin: 0 20px;
      padding: 15px 0;
    }

    .service-card {
      /* En móvil, cada tarjeta debe ocupar el 100% del ancho disponible */
      flex: 0 0 100%;
      width: 100%;
      padding: 20px 15px;
    }

    .service-image {
      height: 200px;
    }

    .service-info {
      height: 240px;
      padding: 20px;
    }

    .service-info h3 {
      font-size: 1.1rem;
      min-height: 3.5rem;
    }

    .service-info p {
      font-size: 0.85rem;
      margin-bottom: 15px;
      -webkit-line-clamp: 4;
      line-clamp: 4;
    }

    .carousel-controls {
      margin-top: 30px;
    }

    .carousel-btn {
      width: 45px;
      height: 45px;
      font-size: 1.3rem;
    }
  }

  /* Sección de Reseñas */
  .reviews-section {
    background: var(--brand);
    padding: 80px 20px;
    color: white;
  }

  .reviews-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .reviews-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: white;
    letter-spacing: 1px;
  }

  .reviews-subtitle {
    font-size: 1.2rem;
    color: white;
    margin: 0 0 60px 0;
    opacity: 0.9;
  }

  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
  }

  .review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 280px; /* Altura fija para todas las tarjetas */
  }

  .review-image {
    position: relative;
    z-index: 2;
    margin-bottom: -30px;
  }

  .review-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
  }

  .review-image img:hover {
    transform: scale(1.05);
  }

  .review-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .review-content p {
    color: var(--brand);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
    font-style: italic;
    flex-grow: 1;
    display: flex;
    align-items: center;
  }

  .review-author h4 {
    color: var(--brand);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 5px 0;
  }

  .review-author span {
    color: var(--brand);
    font-size: 0.9rem;
    opacity: 0.7;
  }

  /* Responsive para reseñas */
  @media (max-width: 768px) {
    .reviews-section {
      padding: 60px 20px;
    }

    .reviews-title {
      font-size: 2rem;
    }

    .reviews-subtitle {
      font-size: 1.1rem;
      margin-bottom: 40px;
    }

    .reviews-grid {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .review-card {
      height: 250px; /* Altura ajustada para móviles */
    }

    .review-content {
      padding: 25px;
      max-width: 100%;
    }

    .review-image img {
      width: 100px;
      height: 100px;
    }

    .review-content p {
      font-size: 0.95rem;
    }
  }

  /* Footer */
  .footer {
    background: #EDEFEF;
    padding: 60px 20px 40px 20px;
    color: var(--brand);
  }

  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
  }

  .footer-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 20px 0;
    text-align: center;
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .footer-links li {
    margin-bottom: 12px;
  }

  .footer-links a {
    color: var(--brand);
    text-decoration: none;
    font-size: 1rem;
    transition: opacity 0.3s ease;
    display: block;
    padding: 5px 0;
  }

  .footer-links a:hover {
    color: #652681;
  }

  .footer-logo {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(113, 178, 200, 0.2);
  }

  .footer-logo img {
    max-width: 200px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }

  .footer-logo img:hover {
    opacity: 1;
  }

  /* Responsive para footer */
  @media (max-width: 768px) {
    .footer {
      padding: 40px 20px 30px 20px;
    }

    .footer-content {
      grid-template-columns: 1fr;
      gap: 30px;
      margin-bottom: 30px;
    }

    .footer-section h3 {
      font-size: 1.2rem;
      margin-bottom: 15px;
    }

    .footer-links a {
      font-size: 0.95rem;
    }

    .footer-logo {
      padding-top: 15px;
    }

      .footer-logo img {
      max-width: 150px;
    }
  }

  /* Botón flotante */
  .floating-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999 !important;
    transition: all 0.3s ease;
    pointer-events: auto;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .floating-btn-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .floating-btn-link img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }

  .floating-btn-link:hover {
    transform: scale(1.1);
  }

  .floating-btn-link:hover img {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }

  .floating-btn-link:active {
    transform: scale(0.95);
  }

  /* Animación de pulso opcional */
  .floating-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(113, 178, 200, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
    z-index: -1;
  }

  @keyframes pulse {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.4);
      opacity: 0;
    }
  }

  /* Responsive para botón flotante */
  @media (max-width: 768px) {
    .floating-button {
      bottom: 20px;
      right: 20px;
      z-index: 9999 !important;
      position: fixed !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .floating-btn-link img {
      width: 50px;
      height: 50px;
    }
  }

  /* Sección ¿Quiénes somos? */
  .about-section {
    background: #f8f9fa;
    padding: 80px 0;
  }

  .about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .about-image {
    order: 1;
  }

  .about-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .about-text {
    order: 2;
    padding: 40px;
    background: #71B2C8;;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  }

  .about-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 30px 0;
    text-align: center;
    color: white;
  }

  .about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-align: justify;
  }

  .about-text p:last-child {
    margin-bottom: 0;
  }

  /* Sección Nuestra Experiencia */
  .experience-section {
    background: #f8f9fa;
    padding: 80px 0;
  }

  .experience-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .experience-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .experience-text {
    order: 1;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  }

  .experience-image {
    order: 2;
  }

  .experience-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .experience-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 30px 0;
    text-align: center;
  }

  .experience-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin: 0 0 20px 0;
    text-align: justify;
  }

  .experience-text p:last-child {
    margin-bottom: 0;
  }

  /* Responsive para las secciones */
  @media (max-width: 768px) {
    .about-section,
    .experience-section {
      padding: 60px 0;
    }

    .about-container,
    .experience-container {
      padding: 0 15px;
    }

    .about-content,
    .experience-content {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .about-image,
    .experience-image {
      order: 1;
    }

    .about-text,
    .experience-text {
      order: 2;
      padding: 30px 20px;
    }

    .about-text h2,
    .experience-text h2 {
      font-size: 2rem;
      margin-bottom: 20px;
    }

    .about-text p,
    .experience-text p {
      font-size: 1rem;
      text-align: left;
    }

    .about-image img,
    .experience-image img {
      height: 300px;
    }
  }

  /* Sección Fundador */
  .founder-section {
    background: #71B2C8;
    padding: 80px 0;
    position: relative;
  }

  .founder-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .founder-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin: 0 0 60px 0;
    letter-spacing: 2px;
  }

  .founder-content {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .founder-image {
    position: relative;
    z-index: 2;
    margin-right: 40px;
  }

  .founder-image img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #71B2C8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .founder-image img:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  }

  .founder-info {
    flex: 1;
    padding-left: 20px;
  }

  .founder-info h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 25px 0;
    line-height: 1.2;
  }

  .founder-info p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin: 0 0 20px 0;
    text-align: justify;
  }

  .founder-info p:last-child {
    margin-bottom: 0;
  }

  /* Responsive para fundador */
  @media (max-width: 768px) {
    .founder-section {
      padding: 60px 0;
    }

    .founder-container {
      padding: 0 15px;
    }

    .founder-title {
      font-size: 2.5rem;
      margin-bottom: 40px;
    }

    .founder-content {
      flex-direction: column;
      text-align: center;
      padding: 30px 20px;
    }

    .founder-image {
      margin-right: 0;
      margin-bottom: 30px;
    }

    .founder-image img {
      width: 225px;
      height: 225px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .founder-image img:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    }

    .founder-info {
      padding-left: 0;
    }

    .founder-info h3 {
      font-size: 1.8rem;
      margin-bottom: 20px;
    }

    .founder-info p {
      font-size: 1rem;
      text-align: left;
    }
  }

  /* Sección Especialistas */
  .specialists-section {
    background: #f8f9fa;
    padding: 80px 0;
  }

  .specialists-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
  }

  .specialists-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 16px 0;
    letter-spacing: 1px;
  }

  .specialists-subtitle {
    font-size: 1.2rem;
    color: var(--brand);
    margin: 0 0 60px 0;
    opacity: 0.8;
  }

  /* Carrusel de especialistas */
  .specialists-carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin: 0 40px;
    padding: 20px 0;
  }

  .specialists-carousel-wrapper {
    overflow: hidden;
    border-radius: 20px;
  }

  .specialists-carousel-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    will-change: transform;
  }

  .specialist-card {
    flex: 0 0 25%; /* Valor por defecto, se sobrescribirá por JS */
    min-width: 0; /* Asegura que el contenido no desborde */
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: flex 0.3s ease-in-out;
  }

  .specialist-image {
    position: relative;
    margin-bottom: 20px;
  }

  .specialist-image img {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
  }

  .specialist-card:hover .specialist-image img {
    transform: scale(1.05);
  }

  .specialist-info {
    background: #71B2C8;
    color: white;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    width: 100%;
    box-shadow: 0 5px 15px rgba(113, 178, 200, 0.3);
    transition: transform 0.3s ease;
    max-width: 250px;
    margin: 0 auto;
    min-height: 80px; /* Altura mínima para uniformidad */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .specialist-card:hover .specialist-info {
    transform: translateY(-5px);
  }

  /* Controles del carrusel de especialistas */
  .specialists-carousel-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
  }

  .specialists-carousel-btn {
    background: var(--brand);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .specialists-carousel-btn:hover:not(:disabled) {
    background: var(--brand-dark);
    transform: scale(1.1);
  }

  .specialists-carousel-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
  }

  /* Responsive para especialistas */
  @media (max-width: 1200px) {
    .specialist-card {
      flex: 0 0 33.333%; /* 3 tarjetas en laptops pequeñas */
    }
  }

  @media (max-width: 992px) {
    .specialist-card {
      flex: 0 0 100%; /* 1 tarjeta en tablets y móviles */
    }
    
    .specialist-info {
      padding: 12px;
      min-height: 70px; /* Altura mínima ajustada para móviles */
    }
    
    .specialist-info h3 {
      font-size: 1.1rem;
    }
  }

  @media (max-width: 768px) {
    .specialists-section {
      padding: 50px 0;
    }

    .specialists-title {
      font-size: 1.8rem;
      margin-bottom: 15px;
    }

    .specialists-subtitle {
      font-size: 1rem;
      margin-bottom: 30px;
    }

    .specialists-carousel-container {
      margin: 0 10px;
      padding: 10px 0;
      overflow: hidden;
    }

    .specialist-card {
      flex: 0 0 100%;
      padding: 10px;
    }

    .specialist-image img {
      max-width: 160px;
    }

    .specialist-info {
      max-width: 220px;
      padding: 12px;
      min-height: 70px;
    }

    .specialist-info h3 {
      font-size: 1.1rem;
      margin-bottom: 5px;
    }

    .specialist-info p {
      font-size: 0.9rem;
    }

    .specialists-carousel-controls {
      margin-top: 25px;
    }

    .specialists-carousel-btn {
      width: 40px;
      height: 40px;
      font-size: 1.2rem;
    }
  }

  /* Sección de Servicios Detallados - Página de Servicios */
  .services-detailed {
    background: #f8f9fa;
    padding: 80px 0;
  }

  .services-detailed-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .service-detail-section {
    margin-bottom: 80px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .service-detail-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .service-detail-section:last-child {
    margin-bottom: 0;
  }

  .service-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 400px;
  }

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

  .service-detail-reverse .service-detail-text {
    order: 1;
  }

  .service-detail-reverse .service-detail-image {
    order: 2;
  }

  .service-detail-image {
    position: relative;
    height: 400px;
    overflow: hidden;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .service-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .service-detail-section:hover .service-detail-image img {
    transform: scale(1.05);
  }

  .service-detail-text {
    padding: 50px 40px;
    background: white;
  }

  .service-detail-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 25px 0;
    line-height: 1.2;
  }

  .service-detail-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin: 0 0 25px 0;
    text-align: justify;
  }

  .service-detail-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .service-detail-text li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
  }

  .service-detail-text li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand);
    font-weight: bold;
    font-size: 1.1rem;
  }

  /* Responsive para servicios detallados */
  @media (max-width: 1024px) {
    .services-detailed {
      padding: 60px 0;
    }

    .service-detail-section {
      margin-bottom: 60px;
    }

    .service-detail-content {
      min-height: 350px;
    }

    .service-detail-image {
      height: 350px;
      padding: 20px;
    }

    .service-detail-text {
      padding: 40px 30px;
    }

    .service-detail-text h2 {
      font-size: 2rem;
      margin-bottom: 20px;
    }

    .service-detail-text p {
      font-size: 1rem;
      margin-bottom: 20px;
    }
  }

  @media (max-width: 768px) {
    .services-detailed-container {
      padding: 0 15px;
    }

    .service-detail-section {
      margin-bottom: 50px;
      border-radius: 15px;
    }

    .service-detail-content {
      display: flex !important;
      flex-direction: column !important;
      min-height: auto;
    }

    /* Forzar que todas las imágenes estén arriba en móvil */
    .service-detail-image {
      order: 1 !important;
      height: 320px;
      padding: 20px;
      width: 100% !important;
    }

    .service-detail-text {
      order: 2 !important;
      padding: 30px 25px;
      width: 100% !important;
    }

    /* Anular el orden de las secciones reverse en móvil */
    .service-detail-reverse .service-detail-content {
      display: flex !important;
      flex-direction: column !important;
    }

    .service-detail-reverse .service-detail-image {
      order: 1 !important;
    }

    .service-detail-reverse .service-detail-text {
      order: 2 !important;
    }

    .service-detail-text h2 {
      font-size: 1.8rem;
      margin-bottom: 20px;
      text-align: center;
    }

    .service-detail-text p {
      font-size: 0.95rem;
      margin-bottom: 20px;
      text-align: left;
    }

    .service-detail-text li {
      font-size: 0.9rem;
      margin-bottom: 10px;
    }
  }

  @media (max-width: 480px) {
    .services-detailed {
      padding: 40px 0;
    }

    .service-detail-section {
      margin-bottom: 40px;
    }

    .service-detail-content {
      display: flex !important;
      flex-direction: column !important;
    }

    /* Mantener el orden imagen arriba, texto abajo en móviles pequeños */
    .service-detail-image {
      order: 1 !important;
      height: 280px;
      padding: 15px;
      width: 100% !important;
    }

    .service-detail-text {
      order: 2 !important;
      padding: 25px 20px;
      width: 100% !important;
    }

    /* Anular el orden de las secciones reverse en móviles pequeños */
    .service-detail-reverse .service-detail-content {
      display: flex !important;
      flex-direction: column !important;
    }

    .service-detail-reverse .service-detail-image {
      order: 1 !important;
    }

    .service-detail-reverse .service-detail-text {
      order: 2 !important;
    }

    .service-detail-text h2 {
      font-size: 1.6rem;
    }

    .service-detail-text p {
      font-size: 0.9rem;
    }

    .service-detail-text li {
      font-size: 0.85rem;
    }
  }

  /* Sección de Contacto - Ubicación */
  .contact-location {
    background: #f8f9fa;
    padding: 80px 0;
  }

  .contact-location-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .contact-location-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .map-container {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .map-container iframe {
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .location-info {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .location-info h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 30px 0;
    text-align: center;
  }

  .location-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .location-item {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 15px;
    border-left: 4px solid var(--brand);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .location-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(113, 178, 200, 0.2);
  }

  .location-item h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 10px 0;
  }

  .location-item p {
    font-size: 1rem;
    color: #555;
    margin: 0;
    line-height: 1.6;
  }

  /* Sección de Contacto (anteriormente Horarios) */
  .contact-schedule {
    background: #71B2C8;
    padding: 120px 0;
    text-align: center;
  }

  .contact-schedule-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .contact-schedule h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 20px 0;
    text-align: center;
  }

  .contact-subtitle {
    font-size: 1.3rem;
    color: white;
    margin: 0 0 40px 0;
    text-align: center;
    opacity: 0.95;
  }

  .contact-schedule .contact-buttons-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    max-width: 100%;
  }

  .schedule-info h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 30px 0;
    text-align: center;
  }

  .schedule-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
  }

  .schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .schedule-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(113, 178, 200, 0.2);
  }

  .schedule-item.closed {
    background: #f5f5f5;
    color: #999;
  }

  .schedule-item .day {
    font-weight: 600;
    color: var(--brand);
    font-size: 1.1rem;
  }

  .schedule-item.closed .day {
    color: #999;
  }

  .schedule-item .hours {
    font-weight: 500;
    color: #555;
  }

  .schedule-item.closed .hours {
    color: #999;
  }

  .establishment-image {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .establishment-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
  }

  .establishment-image:hover img {
    transform: scale(1.02);
  }

  /* Responsive para secciones de contacto */
  @media (max-width: 1024px) {
    .contact-location,
    .contact-schedule {
      padding: 60px 0;
    }

    .contact-location-content,
    .contact-schedule-content {
      gap: 40px;
    }

    .location-info,
    .schedule-info {
      padding: 30px;
    }

    .establishment-image img {
      height: 350px;
    }
  }

  @media (max-width: 768px) {
    .contact-location-container,
    .contact-schedule-container {
      padding: 0 15px;
    }

    .contact-location-content,
    .contact-schedule-content {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .location-info,
    .schedule-info {
      padding: 25px;
    }

    .location-info h2,
    .schedule-info h2 {
      font-size: 1.8rem;
      margin-bottom: 25px;
    }

    .map-container {
      padding: 15px;
    }

    .map-container iframe {
      height: 300px;
    }

    .establishment-image {
      padding: 15px;
    }

    .establishment-image img {
      height: 250px;
    }

    .location-details {
      gap: 20px;
    }

    .location-item {
      padding: 15px;
    }

    .schedule-details {
      gap: 12px;
    }

    .schedule-item {
      padding: 12px 15px;
    }
  }

  @media (max-width: 480px) {
    .contact-location,
    .contact-schedule {
      padding: 40px 0;
    }

    .location-info,
    .schedule-info {
      padding: 20px;
    }

    .location-info h2,
    .schedule-info h2 {
      font-size: 1.6rem;
    }

    .map-container iframe {
      height: 250px;
    }

    .establishment-image img {
      height: 200px;
    }

    .location-item h3 {
      font-size: 1.1rem;
    }

    .location-item p {
      font-size: 0.9rem;
    }

    .schedule-item .day {
      font-size: 1rem;
    }

    .schedule-item .hours {
      font-size: 0.9rem;
    }
  }

  /* Sección de Botones de Contacto */
  .contact-buttons {
    background: #f8f9fa;
    padding: 80px 0;
  }

  .contact-buttons-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
  }

  .contact-buttons h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 50px 0;
    letter-spacing: 2px;
  }

  .contact-buttons-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 100%;
  }

  .contact-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #71B2C8;
    color: white;
    text-decoration: none;
    padding: 20px 40px;
    border-radius: 500px;
    box-shadow: 0 5px 15px rgba(113, 178, 200, 0.3);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 250px;
    justify-content: flex-start;
  }

  /* Estilos especiales para botones dentro de contact-schedule */
  .contact-schedule .contact-btn {
    background: #71B2C8;
    border: 2px solid white;
    color: white;
    box-shadow: 0 5px 15px rgba(113, 178, 200, 0.3);
    padding: 10px 55px;
    max-width: 300px;
    flex: 0 1 auto;
  }

  .contact-schedule .contact-btn:hover {
    background: var(--brand-dark);
    border-color: white;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(113, 178, 200, 0.4);
  }

  .contact-schedule .contact-btn-text {
    color: white;
  }

  /* Asegurar que los botones se mantengan en línea en pantallas grandes */
  @media (min-width: 1200px) {
    .contact-schedule .contact-buttons-grid {
      max-width: 1300px;
    }
    
    .contact-schedule .contact-btn {
      max-width: 280px;
      padding: 10px 50px;
    }
  }

  .contact-btn:hover {
    background: var(--brand-dark);
    transform: translateY(-3px);
  }

  .contact-btn-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
  }

  .contact-btn-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
  }

  .contact-btn:hover .contact-btn-icon img {
    transform: scale(1.1);
  }

  .contact-btn-content {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .contact-btn-text {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 5px 0;
  }

  .contact-btn-subtext {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.9;
    margin: 0;
  }

  /* Responsive para botones de contacto */
  @media (max-width: 1024px) {
    .contact-buttons-grid {
      gap: 15px;
    }
    
    .contact-btn {
      padding: 15px 20px;
      max-width: 200px;
    }
    
    .contact-btn-text {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 768px) {
    .contact-buttons {
      padding: 60px 0;
    }

    .contact-buttons-container {
      padding: 0 15px;
    }
    
    .contact-buttons-grid {
      flex-direction: column;
      align-items: center;
    }
    
    .contact-btn {
      max-width: 300px;
      width: 100%;
    }

    .contact-buttons h2 {
      font-size: 2rem;
      margin-bottom: 40px;
    }

    .contact-btn {
      padding: 18px 30px;
      gap: 15px;
    }

    .contact-btn-icon {
      width: 45px;
      height: 45px;
    }

    .contact-btn-icon img {
      width: 28px;
      height: 28px;
    }

    .contact-btn-text {
      font-size: 1.1rem;
    }

    .contact-btn-subtext {
      font-size: 0.85rem;
    }
  }

  @media (max-width: 480px) {
    .contact-buttons {
      padding: 40px 0;
    }

    .contact-buttons h2 {
      font-size: 1.8rem;
      margin-bottom: 30px;
    }

    .contact-btn {
      padding: 15px 25px;
      gap: 12px;
    }

    .contact-btn-icon {
      width: 40px;
      height: 40px;
    }

    .contact-btn-icon img {
      width: 25px;
      height: 25px;
    }

    .contact-btn-text {
      font-size: 1rem;
    }

    .contact-btn-subtext {
      font-size: 0.8rem;
    }
  }

  /* Responsive para la nueva sección de contacto */
  @media (max-width: 768px) {
    .contact-schedule {
      padding: 100px 0;
    }

    .contact-schedule h2 {
      font-size: 2rem;
      margin-bottom: 15px;
    }

    .contact-subtitle {
      font-size: 1.1rem;
      margin-bottom: 30px;
    }

    .contact-schedule .contact-buttons-grid {
      flex-direction: column;
      align-items: center;
    }

    .contact-schedule .contact-btn {
      max-width: 320px;
      width: 100%;
      padding: 15px 40px;
      gap: 15px;
    }
  }

  @media (max-width: 480px) {
    .contact-schedule {
      padding: 80px 0;
    }

    .contact-schedule h2 {
      font-size: 1.8rem;
    }

    .contact-subtitle {
      font-size: 1rem;
      margin-bottom: 25px;
    }

    .contact-schedule .contact-btn {
      padding: 12px 35px;
      gap: 12px;
      max-width: 300px;
    }
  }

  /* Clase para bloquear scroll cuando el menú hamburguesa está abierto */
  .no-scroll {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }