/* ==========================================================================
   MOBILE TYPOGRAPHY FIXES - OFTALMOLOGÍA ESPECIALIZADA DR. SANTANDER
   ========================================================================== */

/* Overlay negro sobre la imagen de fondo principal para mejorar legibilidad */
.fusion-builder-row-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.6) 0%, 
    rgba(0, 0, 0, 0.4) 50%, 
    rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Asegurar que el contenido esté encima del overlay */
.fusion-builder-row-1 .fusion-builder-row,
.fusion-builder-row-1 .fusion-layout-column {
  position: relative;
  z-index: 2;
}

/* Asegurar que el contenedor principal tenga position relative */
.fusion-builder-row-1 {
  position: relative;
}

/* VERSIÓN DESKTOP - Ajustes para pantallas grandes */
@media only screen and (min-width: 1051px) {
  
  /* Limitar el ancho del contenido del hero para no cubrir la cara del doctor */
  .fusion-builder-row-1 .fusion-layout-column {
    max-width: 65% !important;
    width: 65% !important;
    flex: 0 0 65% !important;
  }
  
  /* Ajustar tamaño del nombre del doctor */
  .fusion-title-1 h1.title-heading-left {
    font-size: 48px !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
  }
  
  /* Ajustar tamaño de la especialidad */
  .fusion-text-1 p span {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  
  /* Ajustar tamaño de las cédulas profesionales */
  .fusion-text-2 p span {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  
  /* Asegurar que el contenido se mantenga a la izquierda */
  .fusion-builder-row-1 .fusion-column-wrapper {
    text-align: left !important;
    padding-left: 60px !important;
    padding-right: 30px !important;
  }
  
  /* Ajustar padding del contenedor principal */
  .fusion-builder-row-1 {
    padding-top: 180px !important;
    padding-bottom: 80px !important;
  }
  
}

/* Media Query para dispositivos móviles */
@media only screen and (max-width: 768px) {
  
  /* OVERLAY MÓVIL - Reforzar el degradado negro en móvil */
  .fusion-builder-row-1::before {
    background: linear-gradient(135deg, 
      rgba(0, 0, 0, 0.7) 0%, 
      rgba(0, 0, 0, 0.5) 50%, 
      rgba(0, 0, 0, 0.8) 100%) !important;
    z-index: 1 !important;
  }
  
  /* Asegurar que el contenido esté encima del overlay en móvil */
  .fusion-builder-row-1 .fusion-builder-row,
  .fusion-builder-row-1 .fusion-layout-column,
  .fusion-builder-row-1 .fusion-column-wrapper {
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* HERO SECTION - Nombre del Doctor */
  .fusion-title-1 h1.title-heading-left {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
    text-align: left !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* HERO SECTION - Especialidad */
  .fusion-text-1 p span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    display: block !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* HERO SECTION - Cédulas profesionales */
  .fusion-text-2 p span {
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    display: block !important;
  }
  
  /* Container principal del hero - bajado más */
  .fusion-builder-row-1 {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
    min-height: 300px !important;
    max-height: 400px !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Columna del hero section - alineado a la izquierda */
  .fusion-builder-row-1 .fusion-column-wrapper {
    padding: 10px 20px !important;
    text-align: left !important;
    max-width: 70% !important;
    width: 70% !important;
  }
  
  /* Botón Contáctanos */
  .fusion-builder-row-1 .fusion-button-wrapper {
    text-align: left !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  
  /* Estrellas y opiniones */
  .fusion-builder-row-1 .views {
    text-align: left !important;
    margin-top: 3px !important;
  }
  
  .fusion-builder-row-1 .views p {
    font-size: 9px !important;
    text-align: left !important;
    margin-bottom: 3px !important;
  }
  
  /* Iconos sociales */
  .fusion-builder-row-1 .views ul {
    justify-content: flex-start !important;
    margin-top: 3px !important;
    margin-bottom: 0px !important;
  }
  
  /* Estrellas FontAwesome más pequeñas en móvil */
  .fusion-builder-row-1 .fa-star {
    font-size: 10px !important;
    margin-right: 8px !important;
  }
  
  /* Mantener logos de redes sociales en tamaño apropiado */
  .fusion-builder-row-1 .views ul li img {
    max-width: 32px !important;
    height: auto !important;
  }
}

/* Media Query para pantallas muy pequeñas */
@media only screen and (max-width: 480px) {
  
  /* OVERLAY MÓVIL PEQUEÑO - Reforzar el degradado negro en pantallas pequeñas */
  .fusion-builder-row-1::before {
    background: linear-gradient(135deg, 
      rgba(0, 0, 0, 0.75) 0%, 
      rgba(0, 0, 0, 0.55) 50%, 
      rgba(0, 0, 0, 0.85) 100%) !important;
    z-index: 1 !important;
  }
  
  /* Asegurar que el contenido esté encima del overlay en móvil pequeño */
  .fusion-builder-row-1 .fusion-builder-row,
  .fusion-builder-row-1 .fusion-layout-column,
  .fusion-builder-row-1 .fusion-column-wrapper {
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* HERO SECTION - Ajustes para pantallas muy pequeñas */
  .fusion-title-1 h1.title-heading-left {
    font-size: 16px !important;
    line-height: 1.0 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    margin-bottom: 2px !important;
  }
  
  .fusion-text-1 p span {
    font-size: 9px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  .fusion-text-2 p span {
    font-size: 7px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  
  /* Container principal - más compacto y bajado */
  .fusion-builder-row-1 {
    padding-top: 30px !important;
    padding-bottom: 15px !important;
    min-height: 250px !important;
    max-height: 350px !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .fusion-builder-row-1 .fusion-column-wrapper {
    padding: 5px 15px !important;
    text-align: left !important;
    max-width: 70% !important;
    width: 70% !important;
  }
  
  /* Estrellas FontAwesome más pequeñas en pantallas pequeñas */
  .fusion-builder-row-1 .fa-star {
    font-size: 8px !important;
    margin-right: 6px !important;
  }
  
  /* SELECTORES GENERALES PARA PANTALLAS MUY PEQUEÑAS */
  
  /* Títulos principales aún más pequeños */
  h1 {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
  
  h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  
  h3 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  h4 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  
  /* Párrafos y texto general aún más pequeños */
  p, .fusion-text p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  
  /* Texto en spans más pequeño */
  span {
    font-size: 10px !important;
  }
  
  /* Lista de elementos más pequeños */
  li {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  
  /* Enlaces más pequeños */
  a {
    font-size: 10px !important;
  }
  
  /* Texto en divs de contenido */
  .fusion-column-wrapper p,
  .fusion-text-content p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* Media Query para tablets en modo portrait */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  
  /* OVERLAY TABLET - Reforzar el degradado negro en tablets */
  .fusion-builder-row-1::before {
    background: linear-gradient(135deg, 
      rgba(0, 0, 0, 0.65) 0%, 
      rgba(0, 0, 0, 0.45) 50%, 
      rgba(0, 0, 0, 0.75) 100%) !important;
    z-index: 1 !important;
  }
  
  /* Asegurar que el contenido esté encima del overlay en tablets */
  .fusion-builder-row-1 .fusion-builder-row,
  .fusion-builder-row-1 .fusion-layout-column,
  .fusion-builder-row-1 .fusion-column-wrapper {
    position: relative !important;
    z-index: 2 !important;
  }
  
  .fusion-title-1 h1.title-heading-left {
    font-size: 40px !important;
    line-height: 1.2 !important;
  }
  
  .fusion-text-1 p span {
    font-size: 22px !important;
  }
  
  .fusion-text-2 p span {
    font-size: 20px !important;
  }
}

/* ==========================================================================
   MEJORAS ADICIONALES PARA MÓVILES
   ========================================================================== */

@media only screen and (max-width: 768px) {
  
  /* Header móvil más compacto y centrado */
  .fusion-header {
    padding: 10px 0 !important;
    text-align: center !important;
  }
  
  /* Container del header para alineación centrada */
  .fusion-header .fusion-header-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }
  
  /* Logo centrado en móvil */
  .fusion-logo {
    margin: 0 auto !important;
  }
  
  .fusion-logo img {
    max-height: 45px !important;
  }
  
  /* Centrar el botón hamburguesa en móvil */
  #mobile-menu-toggle.hamburger {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  /* Ajustar el wrapper del header para posicionar elementos */
  .fusion-header .fusion-row {
    position: relative !important;
  }
  
  /* Menú móvil */
  .fusion-mobile-menu-text-align-left {
    background: rgba(0, 0, 0, 0.95) !important;
  }
  
  /* Sección de servicios - títulos más pequeños */
  .fusion-title-4 h2,
  .fusion-title-5 h3,
  .fusion-title-6 h2,
  .fusion-title-7 h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  
  /* Texto de servicios */
  .fusion-text-5 p,
  .fusion-text-6 p,
  .fusion-text-7 p,
  .fusion-text-8 p,
  .fusion-text-9 p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  
  /* Sección "Nosotros" - más compacta */
  .fusion-text-10 p,
  .fusion-text-11 p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Información de contacto en sección azul */
  .fusion-title-5 h3 {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  
  .fusion-checklist-1 .fusion-li-item-content {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  
  /* Botones más compactos */
  .fusion-button {
    font-size: 12px !important;
    padding: 10px 20px !important;
  }
  
  /* Separadores más pequeños */
  .fusion-separator {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  
  /* SELECTORES GENERALES PARA TODOS LOS TEXTOS EN MÓVIL */
  
  /* Títulos principales más pequeños */
  h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  
  /* Párrafos y texto general más pequeños */
  p, .fusion-text p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  
  /* Texto en spans más pequeño */
  span {
    font-size: 12px !important;
  }
  
  /* Lista de elementos más pequeños */
  li {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  
  /* Enlaces más pequeños */
  a {
    font-size: 12px !important;
  }
  
  /* Texto en divs de contenido */
  .fusion-column-wrapper p,
  .fusion-text-content p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   OPTIMIZACIÓN PARA LANDSCAPE EN MÓVILES
   ========================================================================== */

@media only screen and (max-width: 768px) and (orientation: landscape) {
  
  /* OVERLAY MÓVIL LANDSCAPE - Reforzar el degradado negro en orientación horizontal */
  .fusion-builder-row-1::before {
    background: linear-gradient(135deg, 
      rgba(0, 0, 0, 0.7) 0%, 
      rgba(0, 0, 0, 0.5) 50%, 
      rgba(0, 0, 0, 0.8) 100%) !important;
    z-index: 1 !important;
  }
  
  /* Asegurar que el contenido esté encima del overlay en landscape */
  .fusion-builder-row-1 .fusion-builder-row,
  .fusion-builder-row-1 .fusion-layout-column,
  .fusion-builder-row-1 .fusion-column-wrapper {
    position: relative !important;
    z-index: 2 !important;
  }
  
  .fusion-builder-row-1 {
    padding-top: 20px !important;
    padding-bottom: 15px !important;
    min-height: 200px !important;
    max-height: 280px !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .fusion-title-1 h1.title-heading-left {
    font-size: 16px !important;
    line-height: 1.0 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  .fusion-text-1 p span {
    font-size: 10px !important;
    text-align: left !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  .fusion-text-2 p span {
    font-size: 8px !important;
    text-align: left !important;
  }
  
  .fusion-builder-row-1 .fusion-column-wrapper {
    text-align: left !important;
    padding: 5px 20px !important;
    max-width: 65% !important;
    width: 65% !important;
  }
  
  /* Estrellas FontAwesome más pequeñas en landscape */
  .fusion-builder-row-1 .fa-star {
    font-size: 9px !important;
    margin-right: 7px !important;
  }
  
  /* SELECTORES GENERALES PARA LANDSCAPE MÓVIL */
  
  /* Títulos principales para landscape */
  h1 {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
  
  h2 {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  
  h3 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  h4 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  
  /* Párrafos y texto general para landscape */
  p, .fusion-text p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  
  /* Texto en spans */
  span {
    font-size: 10px !important;
  }
  
  /* Lista de elementos */
  li {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  
  /* Enlaces */
  a {
    font-size: 10px !important;
  }
  
  /* Texto en divs de contenido */
  .fusion-column-wrapper p,
  .fusion-text-content p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
} 

/* ==========================================================================
   MENÚ HAMBURGUESA Y NAVEGACIÓN MÓVIL
   ========================================================================== */

@media only screen and (max-width: 1050px) {
  
  /* Mostrar el botón hamburguesa */
  #mobile-menu-toggle.hamburger {
    display: inline-block !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 18px 12px !important;
    box-sizing: content-box !important;
    z-index: 1001 !important;
  }
  
  #mobile-menu-toggle.hamburger span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    margin: 4px 0 !important;
    background: #ffffff !important;
    transition: .25s !important;
  }
  
  /* Ocultar menú principal en móvil */
  .fusion-main-menu {
    display: none !important;
  }
  
  /* Mostrar menú cuando está abierto */
  .fusion-main-menu.open {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 1000 !important;
    padding: 20px 0 !important;
  }
  
  /* Estilos del menú desplegable móvil */
  .fusion-main-menu.open ul {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .fusion-main-menu.open li {
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .fusion-main-menu.open li a {
    color: #ffffff !important;
    display: block !important;
    padding: 15px 20px !important;
    text-decoration: none !important;
    font-size: 16px !important;
  }
  
  .fusion-main-menu.open li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Submenús en móvil */
  .fusion-main-menu.open .sub-menu {
    position: static !important;
    background: rgba(0, 0, 0, 0.8) !important;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
  }
  
  .fusion-main-menu.open .sub-menu li a {
    padding-left: 40px !important;
    font-size: 14px !important;
    color: #cccccc !important;
  }
  
  /* Botones del menú */
  .fusion-main-menu.open .fusion-menu-item-button a {
    background: #008ce0 !important;
    border-radius: 4px !important;
    margin: 10px 20px !important;
  }
  
  .fusion-main-menu.open .fusion-menu-item-button a:hover {
    background: #00b4a4 !important;
  }
}

/* ==========================================================================
   MEJORAS PARA LA AGENDA EN MÓVILES
   ========================================================================== */

@media only screen and (max-width: 768px) {
  
  /* Sección completa de la agenda - layout en columnas */
  .fusion-builder-row-2 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Columna izquierda con información del doctor */
  .fusion-builder-row-2 .fusion-builder-column-1 {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
  }
  
  /* Columna contenedora de la agenda - sin restricciones */
  .fusion-builder-row-2 .fusion-builder-column-2 {
    width: 100% !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding: 5px !important;
    max-width: none !important;
  }
  
  /* ELIMINAR el cuadro contenedor - solo limpiar estilos básicos */
  .agenda-conversion-wrapper {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    border: none !important;
  }
  
  /* Título de la agenda - mínimo estilo */
  .fusion-title-3 h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    padding: 0 !important;
  }
  
  /* Widget de Doctoralia - completamente libre */
  .agenda-conversion-wrapper iframe,
  .agenda-conversion-wrapper * {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
  }
  
  /* Reorganización de columnas en móvil */
  .fusion-builder-row-2 .fusion-row {
    flex-direction: column !important;
  }
  
  .fusion-builder-row-2 .fusion-layout-column {
    width: 100% !important;
    margin-right: 0 !important;
  }
}