/* Ajuste solicitado: aumentar el título principal del panel INFO */
.info-panel .side-panel__content h2{font-size:60px;line-height:1.05}

/* Subir el bloque de INFO ~60px y quitar scroll */
.info-panel .side-panel__content{padding-top:calc(var(--panel-h) * var(--grid-step) - 180px)!important;overflow:visible!important;max-height:none!important}
/* En móvil: ajustar posiciones del contenido y H2 */
@media (max-width: 768px) {
  .info-panel .side-panel__content {
    /* Bajar el contenido otros 20px más (50px + 20px = 70px) */
    padding-top: calc(var(--panel-h) * var(--grid-step) - 250px) !important;
    transform: translateY(70px) !important; /* 50px + 20px = 70px */
    will-change: transform !important;
    overflow-y: auto !important; /* Permitir scroll vertical para ver todo el contenido */
    overflow-x: hidden !important; /* Evitar scroll horizontal */
    -webkit-overflow-scrolling: touch !important; /* Scroll suave en iOS */
  }
  
  /* Subir el H2 20px (30px - 20px = 10px) */
  .info-panel .side-panel__content h2 {
    transform: translateY(10px) !important; /* 30px - 20px = 10px */
    margin-top: 0px !important; /* Eliminar margin negativo que lo sube */
  }
}
/* En ACCESO: colocar el texto exactamente en h4 */
.info-panel.is-access .side-panel__content{padding-top:calc(var(--panel-h) * var(--grid-step))!important}

/* Posicionar el modal de acceso debajo del logotipo y alineado con él */
/* IMPORTANTE: Estos estilos sobrescriben responsive.css y home.css para colocar el modal debajo del logo */
/* El script modal-align-logo.js calculará dinámicamente la posición basándose en el logo cuando se ejecute */

/* Estilos base para todas las resoluciones */
body.home-page .login-inline--anchored,
body.home-page .login-inline.login-inline--anchored,
body .login-inline--anchored,
body .login-inline.login-inline--anchored,
.login-inline--anchored,
.login-inline.login-inline--anchored{
  /* Centrado horizontal (el script JS ajustará para alinearlo con el logo) */
  left:50%!important;
  transform:translateX(-50%)!important;
  /* Ancho similar al logo (480px) para mantener la alineación visual */
  width:auto!important;
  max-width:480px!important;
  /* Posición vertical: debajo del logo (mínimo 820px para asegurar que esté debajo del logo que termina en ~780px) */
  /* CRÍTICO: Sobrescribir el top de responsive.css y home.css que lo coloca en ~216px o calc(...) */
  top:820px!important;
}

/* Media query específica para sobrescribir responsive.css en todas las resoluciones */
@media (min-width: 1024px) {
  body.home-page .login-inline--anchored,
  body.home-page .login-inline.login-inline--anchored,
  body .login-inline--anchored,
  body .login-inline.login-inline--anchored,
  .login-inline--anchored,
  .login-inline.login-inline--anchored{
    top:820px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
}

@media (min-width: 1200px) {
  body.home-page .login-inline--anchored,
  body.home-page .login-inline.login-inline--anchored,
  body .login-inline--anchored,
  body .login-inline.login-inline--anchored,
  .login-inline--anchored,
  .login-inline.login-inline--anchored{
    top:820px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
}
/* Revertir desplazamientos individuales del primer campo */
.login-inline .login-row:first-of-type label{margin-left:0!important}
.login-inline .login-row:first-of-type input{margin-left:0!important;width:100%!important}

/* Exclusión visual basada en clases de modo (evitar conflictos con React state) */
body.mode-contact .info-panel{display:none!important}
body.mode-contact .login-inline{display:none!important}
body.mode-contact .contact-panel{display:flex!important}
/* Ocultar el logo cuando se muestra el formulario de contacto */
body.mode-contact .logo-stack,
body.mode-contact .hero-logo,
body.mode-contact .hero-visual .logo-stack,
body.mode-contact .hero-columns .logo-stack,
body.mode-contact .hero-content .logo-stack{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
body.mode-access .contact-panel{display:none!important}
body.mode-access .info-panel{display:flex!important}

/* Estilos del nuevo botón INICIO (mismo look que contacto), para efecto inmediato */
.home-btn{position:fixed;left:calc(var(--grid-step) * 26);top:calc(var(--grid-step) * 1);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;line-height:0;padding:0;color:#fff;background:linear-gradient(145deg,#2b4756 0%,#1f3340 100%);border:1px solid #ffffff1a;box-shadow:8px 8px 14px #0000004d,-6px -6px 12px #ffffff0f;z-index:1600}
.home-btn svg{width:24px;height:24px;display:block}
.home-btn:hover{transform:translate(-50%,-50%) translateY(-1px) scale(1.03);box-shadow:12px 12px 24px #0006,-10px -10px 22px #ffffff1a}
.home-btn:active{transform:translate(-50%,-50%) translateY(0) scale(.98)}
@media (max-width:640px){.home-btn{width:32px;height:32px}.home-btn svg{width:21px;height:21px}}

/* Estilos del icono de inicio inline (junto al botón de contacto) */
.home-inline-icon{
  position:fixed;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(145deg,#2b4756 0%,#1f3340 100%);
  border:1px solid #ffffff1a;
  box-shadow:8px 8px 14px #0000004d,-6px -6px 12px #ffffff0f;
  z-index:1600;
  text-decoration:none;
  transition:transform .15s,box-shadow .2s;
  line-height:0;
  padding:0;
}
.home-inline-icon svg{
  width:24px;
  height:24px;
  display:block;
}
.home-inline-icon:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:12px 12px 24px #0006,-10px -10px 22px #ffffff1a;
}
.home-inline-icon:active{
  transform:translateY(0) scale(.98);
}
/* Asegurar que el icono sea visible en todas las páginas (contacto y usuario) */
body.mode-contact .home-inline-icon,
body.mode-access .home-inline-icon,
.home-inline-icon{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Estilos del botón de WhatsApp (debajo del botón de contacto) */
.whatsapp-btn{
  position:fixed;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  color:#fff!important;
  background:linear-gradient(145deg,#25D366 0%,#128C7E 100%)!important; /* Verde WhatsApp forzado */
  border:1px solid #ffffff1a;
  box-shadow:8px 8px 14px #0000004d,-6px -6px 12px #ffffff0f;
  z-index:1600;
  text-decoration:none;
  transition:transform .15s,box-shadow .2s;
  line-height:0;
  padding:0;
}
.whatsapp-btn svg{
  width:24px;
  height:24px;
  display:block;
}
.whatsapp-btn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:12px 12px 24px #0006,-10px -10px 22px #ffffff1a;
  background:linear-gradient(145deg,#2FE576 0%,#1DAF9E 100%)!important;
}
.whatsapp-btn:active{
  transform:translateY(0) scale(.98);
}
/* Asegurar que el botón de WhatsApp sea visible en todas las páginas */
body.mode-contact .whatsapp-btn,
body.mode-access .whatsapp-btn,
.whatsapp-btn{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
}

@media (max-width:768px){
  /* Logo en móvil - visible debajo de los botones */
  body.home-page .logo-stack,
  body.home-page .hero-content .logo-stack,
  body.home-page .hero-visual .logo-stack,
  body.home-page .hero-columns .logo-stack,
  .logo-stack {
    margin-top: 0 !important; /* Pegado a la parte superior */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important; /* Sin padding para que esté totalmente pegado arriba */
    padding-bottom: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Botones en móvil - perfectamente alineados en horizontal */
  .contact-btn,
  .home-inline-icon,
  .home-btn{
    position:fixed!important;
    top:20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:1700!important;
    margin:0!important;
    padding:0!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    box-sizing:border-box!important;
    transform:none!important; /* CRÍTICO: Eliminar transform que desplaza el botón */
  }
  .contact-btn{
    right:20px!important;
    left:auto!important;
  }
  .home-inline-icon,
  .home-btn{
    right:66px!important;
    left:auto!important;
  }
  /* Botón de WhatsApp en móvil - debajo del botón de contacto */
  .whatsapp-btn{
    position:fixed!important;
    top:66px!important;
    right:20px!important;
    left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:1700!important;
    margin:0!important;
    padding:0!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    box-sizing:border-box!important;
    background:linear-gradient(145deg,#25D366 0%,#128C7E 100%)!important; /* Verde WhatsApp forzado */
    background-color:#25D366!important; /* Color de respaldo */
    color:#fff!important;
    border:1px solid rgba(255,255,255,0.1)!important;
    box-shadow:8px 8px 14px rgba(0,0,0,0.3),-6px -6px 12px rgba(255,255,255,0.06)!important;
    transform:none!important;
    background:linear-gradient(145deg,#25D366 0%,#128C7E 100%)!important; /* Verde en móvil */
  }
  .contact-btn svg,
  .home-inline-icon svg,
  .home-btn svg,
  .whatsapp-btn svg{
    width:22px!important;
    height:22px!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    flex-shrink:0!important;
  }
}
@media (max-width:640px){
  .home-inline-icon{
    width:32px!important;
    height:32px!important;
    top:20px!important;
  }
  .home-inline-icon svg{
    width:21px!important;
    height:21px!important;
  }
  .contact-btn{
    top:20px!important;
  }
  .whatsapp-btn{
    width:32px!important;
    height:32px!important;
    top:60px!important;
    background:linear-gradient(145deg,#25D366 0%,#128C7E 100%)!important;
  }
  .whatsapp-btn svg{
    width:21px!important;
    height:21px!important;
  }
}

/* Enlace de Política de Privacidad en la parte inferior derecha */
.privacy-link{
  position:fixed!important;
  bottom:20px!important;
  right:20px!important;
  color:#ffffff!important;
  font-size:13px!important;
  font-weight:600!important;
  text-decoration:none!important;
  opacity:1!important;
  transition:all .2s ease!important;
  z-index:9999!important;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif!important;
  padding:10px 16px!important;
  min-width:120px!important; /* Asegurar ancho mínimo */
  min-height:40px!important; /* Asegurar alto mínimo */
  width:auto!important; /* Ancho automático basado en contenido */
  height:auto!important; /* Alto automático basado en contenido */
  background:linear-gradient(145deg,#2b4756 0%,#1f3340 100%)!important;
  border-radius:8px!important;
  border:2px solid rgba(255,255,255,.3)!important;
  display:block!important;
  visibility:visible!important;
  pointer-events:auto!important;
  box-shadow:0 4px 12px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.2)!important;
  backdrop-filter:blur(8px)!important;
  white-space:nowrap!important; /* Evitar que el texto se divida en líneas */
  box-sizing:border-box!important; /* Incluir padding en el tamaño */
}
.privacy-link:hover{
  opacity:1!important;
  color:#ffffff!important;
  background:linear-gradient(145deg,#3a5a6d 0%,#2a4455 100%)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.5),0 3px 6px rgba(0,0,0,.3)!important;
  transform:translateY(-2px)!important;
  border-color:rgba(255,255,255,.5)!important;
}
/* Ocultar botón de política de privacidad en móviles */
@media (max-width: 768px) {
  .privacy-link,
  a.privacy-link,
  body .privacy-link,
  body.home-page .privacy-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width:640px){
  .privacy-link,
  a.privacy-link,
  body .privacy-link,
  body.home-page .privacy-link {
    display: none !important; /* Oculto en móviles */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding:8px 12px!important;
  }
}

/* Ocultar botón de grid */
button.grid-toggle,
.grid-toggle,
button[class*="grid-toggle"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

/* Asegurar que el logo esté centrado en todas las resoluciones */
body.home-page .logo-stack,
body.home-page .hero-visual .logo-stack,
body.home-page .hero-columns .logo-stack,
body.home-page .hero-content .logo-stack{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
body.home-page .hero-logo,
body.home-page .logo-svg{
  margin-left:auto!important;
  margin-right:auto!important;
  display:block!important;
}

/* Ocultar el hexágono en móvil para evitar duplicación visual */
@media (max-width: 768px) {
  body.home-page .hero-logo--hex {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Ajustes para monitores 1920x1080 y superiores: logo centrado, texto más ancho y iconos alineados */
/* IMPORTANTE: Este CSS debe cargarse DESPUÉS de responsive.css para sobrescribir estilos */
@media (min-width:1920px) and (min-height:900px){
  /* Forzar layout de grid con logo centrado y texto a la derecha */
  /* Se adapta automáticamente según el ancho del viewport */
  body.home-page .hero-content{
    display:grid!important;
    grid-template-columns:minmax(420px,clamp(420px,25vw,600px)) minmax(620px,clamp(620px,45vw,1000px))!important;
    justify-content:center!important;
    align-items:center!important;
    gap:clamp(28px,3vw,120px)!important;
    padding:clamp(32px,4vw,80px)!important;
    max-width:min(1800px,95vw)!important;
    margin:0 auto!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
  }
  /* Logo centrado (primera columna) - FORZAR CENTRADO */
  body.home-page .hero-content .logo-stack,
  body.home-page .logo-stack,
  body.home-page .hero-visual .logo-stack,
  body.home-page .hero-columns .logo-stack{
    grid-column:1!important;
    justify-self:center!important;
    align-self:center!important;
    order:1!important;
    margin:0 auto!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .hero-logo,.logo-svg{
    max-width:clamp(420px,25vw,600px)!important;
    width:100%!important;
    margin:0 auto!important;
    display:block!important;
  }
  /* Panel de texto a la derecha (segunda columna, más ancho) - Asegurar visibilidad */
  body.home-page .hero-content .side-panel,
  body.home-page .hero-content .info-panel,
  body.home-page .side-panel,
  body.home-page .info-panel{
    grid-column:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:clamp(620px,45vw,1000px)!important;
    order:2!important;
  }
  /* Asegurar que info-panel sea visible por defecto (cuando no está en modo contacto) */
  body.home-page:not(.mode-contact) .info-panel{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .info-panel .side-panel__content{
    max-width:100%!important;
    line-height:1.55!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  /* Iconos de inicio y contacto juntos en la esquina superior derecha - horizontal */
  body.home-page .contact-btn{
    position:fixed!important;
    top:20px!important;
    right:20px!important;
    left:auto!important;
    width:44px!important;
    height:44px!important;
    transform:none!important;
    z-index:1700!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.home-page .home-inline-icon{
    position:fixed!important;
    top:20px!important;
    right:72px!important;
    left:auto!important;
    width:44px!important;
    height:44px!important;
    transform:none!important;
    z-index:1700!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.home-page .contact-btn svg,
  body.home-page .home-inline-icon svg,
  body.home-page .whatsapp-btn svg{
    width:24px!important;
    height:24px!important;
  }
  /* Botón de WhatsApp en desktop - debajo del botón de contacto */
  body.home-page .whatsapp-btn{
    position:fixed!important;
    top:72px!important; /* contacto 20px + alto 44px + 8px de espacio */
    right:20px!important;
    left:auto!important;
    width:44px!important;
    height:44px!important;
    transform:none!important;
    z-index:1700!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    background:linear-gradient(145deg,#25D366 0%,#128C7E 100%)!important; /* Verde en desktop */
    border:1px solid #ffffff1a!important;
    color:#fff!important;
  }
}