@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#eef2f6;
  --surface:#ffffff;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0e1b2a;
  --ink:#0b0f19;
  --primary:#110299;
  --primary-2:#0c016d;
  --accent:#e64a4a;
  --ring:rgba(17, 2, 153, 0.25);
  --border:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:var(--primary);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.04);border-top: 25px solid var(--primary);}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;color:var(--primary)}
.brand .logo{
  /* Regresamos a un tamaño proporcionado para la barra de navegación */
  width: 200px;
  height: 50px;
  background-image: url('icono.png');
  /* Hacemos que la altura del logo ocupe el 100% y el ancho se ajuste solo */
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left center; /* Aseguramos que se alinee a la izquierda */
}
.nav-links{display:flex;gap:4px;align-items:center;flex-wrap:wrap; white-space: nowrap;}
.nav-links a{color:var(--muted);font-weight:600;padding:8px 12px;border-radius:99px;transition:all .2s ease}
.nav-links a:not(.btn):hover{color:var(--primary);background:rgba(30,95,174,.08)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* Estilos específicos para el botón "Pagar" en el portal */
#pay-now-btn.btn.primary {
  background: #28a745; /* Un verde de éxito que contrasta bien */
  border-color: #28a745;
  font-size: 18px; /* Texto más grande */
  font-weight: 700; /* Texto más grueso (bold) */
}
#pay-now-btn.btn.primary:hover {
  background: #228b22; /* Un verde ligeramente más oscuro al pasar el ratón */
  border-color: #228b22;
}
.btn:disabled {
  cursor: not-allowed;
}
.btn.light {
  background: #fff;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.btn.light:hover {
  background: rgba(17, 2, 153, 0.05); /* Un fondo muy sutil al pasar el ratón */
  color: var(--primary-2);
}
.nav-links a.active-link {
  color: var(--primary); /* Color principal para el enlace activo */
  background: rgba(17, 2, 153, 0.1); /* Un fondo sutil con el color primario */
  font-weight: 700; /* Hacerlo más negrita para destacar */
}
.hero{background:linear-gradient(180deg,#fff,#eef2f6);padding:80px 0}
.hero .inner{display:grid;grid-template-columns:1fr 2.2fr;gap:48px;align-items:center}
.hero h1{font-size:44px;line-height:1.05;margin:0 0 14px;font-weight:800;color:var(--primary-2)}
.hero p{color:var(--muted);font-size:18px;max-width:640px}
.hero .cta{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.badges{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.badge{padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--primary);background:rgba(30,95,174,.08);font-size:12px}
.hero-art{
  height: 100%;
  /* Eliminamos la altura fija y definimos la proporción.
     Ajustamos a 16/9 para que coincida con el video y eliminar los gaps. */
  aspect-ratio: 16 / 9;
  display:flex;align-items:center;justify-content:center;
  border-radius: 12px; /* Movemos el borde redondeado al contenedor */
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.2); /* Y la sombra también */
  transition: transform 0.4s ease-out;
  transform: perspective(1200px) rotateX(15deg) scale(0.9);
}
.trust{padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
.hero-art{position:relative;}

/* --- INICIO DE CAMBIOS: Estilos para el video --- */
.hero .inner:hover .hero-art {
  transform: perspective(1200px) rotateX(0deg) scale(1);
}
.hero-art video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Muestra el video completo sin recortar */
  cursor: pointer; /* Indica que el video es clickeable */
}
/* --- FIN DE CAMBIOS --- */

.trust .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;opacity:.9}
.logo-box{border-radius:12px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:600;background:#fff}
.section{padding:64px 0;background:var(--surface)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border-radius:16px;background:var(--surface);padding:18px;box-shadow:0 2px 6px rgba(0,0,0,.04);min-width:0}
.card h3{margin:8px 0 6px;color:var(--primary)}
.kpi{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:14px;padding:14px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:12px;text-align:left;color:var(--text)}
.table th{color:var(--primary);font-weight:600;background:rgba(30,95,174,.05)}
.notice{padding:12px;border:1px solid var(--border);border-radius:14px;background:rgba(30,95,174,.06);color:var(--primary)}
.footer{padding:48px 0;border-top:1px solid var(--border);color:var(--muted);background:#fff}
@media (max-width:980px){
  .hero .inner{grid-template-columns:1fr}
  .trust .logos{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
}

/* --- ESTILOS DEL MODAL --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 27, 42, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Increased z-index to ensure it's on top of everything */
  transition: opacity 0.3s ease;
}
.modal-overlay.hidden {
  display: none;
}
.hidden {
  display: none !important;
}

.modal-content {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 950px;
  margin: auto; /* Added margin: auto for explicit centering within flex container */
  display: grid;
  grid-template-columns: 1.2fr 1.5fr;
  overflow: hidden;
  position: relative;
}
.modal-content.wide {
  grid-template-columns: 1fr;
  max-width: 600px;
}
#payment-modal .modal-form {
  padding: 0; /* Eliminamos el padding para que el header pegajoso funcione bien */
  max-height: 90vh; /* Limita la altura al 80% de la ventana */
  overflow-y: auto; /* Permite el scroll vertical si el contenido excede la altura */
}

/* Styles for PayPal result messages */
.paypal-message {
  padding: 1rem;
  border-radius: 8px;
  margin-top: 20px;
  font-weight: 600;
  text-align: center;
}

.paypal-message.success {
  background-color: #e9f7eb;
  color: #28a745; /* Success green */
  border: 1px solid #28a745;
}

.paypal-message.error {
  background-color: #fdecea;
  color: #dc3545; /* Error red */
  border: 1px solid #dc3545;
}

.paypal-message.info {
  background-color: #e0f7fa;
  color: #0070ba; /* PayPal blue */
  border: 1px solid #0070ba;
}

.paypal-message .payment-details {
  font-size: 13px;
  font-weight: 400;
  margin-top: 8px;
  opacity: 0.8;
}
#paypal-button-container {
  margin-top: 20px;
  max-width: 300px; /* Ajustar según sea necesario */
  margin-left: auto;
  margin-right: auto;
}
.modal-visual {
  /* Un fondo sutil que complementa la imagen del dashboard */
  background-color: #f4f7fa;
  min-height: 250px; /* Evita que la imagen se colapse en vistas pequeñas */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Este padding crea el margen alrededor de la imagen */
}
.modal-visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.modal-form {
  position: relative; /* Necesario para el posicionamiento del overlay */
  padding: 40px;
}

/* --- Estilos para el header pegajoso del modal de pago --- */
#payment-header-container {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2; /* Asegura que esté por encima del contenido que se desplaza */
  padding: 25px 30px 15px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Añadimos padding al resto de los elementos para compensar el padding eliminado de .modal-form */
#modal-paypal-loader, #payment-modal-details, #paypal-button-container-modal {
  padding-left: 30px;
  padding-right: 30px;
  position: relative; /* Necesario para que z-index funcione */
  z-index: 1; /* Asegura que esté por debajo del header (z-index: 2) */
}

.modal-form h2 { margin-top: 0; color: var(--primary-2); }
.modal-form p { color: var(--muted); font-size: 16px; }
.modal-close { 
  position: absolute; 
  top: 15px; 
  right: 15px; 
  background: none; 
  border: none; 
  font-size: 24px; 
  color: var(--muted); 
  cursor: pointer; 
  z-index: 3; /* Asegura que esté por encima del header (z-index: 2) */
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.phone-input { display: flex; }
.phone-input select { width: auto; border-right: none; border-radius: 8px 0 0 8px; background-color: #f4f7fa; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.phone-input input { border-radius: 0 8px 8px 0; }
.required { color: var(--accent); }
.btn.full-width { width: 100%; justify-content: center; }
.legal-notice { margin-top: 20px; font-size: 12px; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; }
.legal-notice input[type="checkbox"] { margin-top: 2px; }
.legal-notice.small p { font-size: 11px; text-align: center; width: 100%; }
.legal-notice.centered {
  justify-content: center;
}
#quote-form-status { margin-top: 15px; text-align: center; font-weight: 600; }

/* Estilos para el Loader y Mensaje de Éxito */
.modal-feedback {
  text-align: center;
  padding: 60px 20px;
}
.modal-feedback h2 {
  color: var(--primary-2);
}
.success-icon {
  color: #28a745; /* Verde éxito */
  margin-bottom: 16px;
}
.loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid var(--primary); /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

/* Estilos para el overlay de procesamiento dentro del modal */
.modal-processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Asegura que esté por encima del contenido del modal */
  border-radius: 16px; /* Para que coincida con el borde del modal */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media (max-width: 768px) {
  .modal-content { grid-template-columns: 1fr; }
  .modal-visual { display: none; }
  .form-grid { grid-template-columns: 1fr; }
}

/* --- ESTILOS DEL SELECTOR DE IDIOMA --- */
.lang-switcher {
  position: relative;
  margin-left: 16px;
}
.lang-selected {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
}
.lang-selected svg {
  transition: transform 0.2s ease;
}
.lang-switcher.active .lang-selected svg {
  transform: rotate(180deg); /* Gira la flecha cuando está activo */
}
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  list-style: none;
  padding: 6px;
  margin: 0;
  min-width: 120px;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lang-switcher.active .lang-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
}
.lang-dropdown a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- ESTILOS ESPECÍFICOS PARA EL PORTAL DE PAGOS --- */
.portal-section {
  min-height: calc(100vh - 100px); /* Ajusta la altura para que ocupe casi toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg), #dbe3eb);
  padding: 20px; /* Reducido */
}

.portal-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 20px; /* Reducido */
  max-width: 950px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px; /* Reducido */
}

/* Cuando los resultados se muestren, cambiamos a 2 columnas */
.portal-card.results-visible {
  align-items: start; /* Alineamos los items al inicio */
  text-align: left;
}

.portal-header h1 {
  font-size: 28px; /* Reducido */
}

.portal-header p {
  font-size: 15px; /* Reducido */
}

.portal-card h1 {
  color: var(--primary-2);
  margin-bottom: 10px; /* Reducimos margen inferior del título */
}

.portal-card .portal-header, .portal-card .portal-form-container {
  grid-column: 1 / -1; /* Hacemos que el header y el form inicial ocupen todo el ancho */
  text-align: center;
}

.portal-card .form-group {
  text-align: left; /* Alinea el label a la izquierda */
}

.portal-card p {
  color: var(--muted);
  margin-bottom: 15px; /* Reducido */
}

.portal-card .message {
  margin-top: 15px; /* Reducimos margen superior */
  font-style: italic;
  color: var(--muted);
}

#portal-loader {
  margin-top: 20px; /* Reducimos margen superior */
  text-align: center;
}

#portal-loader p {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  color: var(--muted);
}

#portal-results {
  margin-top: 0; /* Eliminamos margen superior, el gap del grid ya lo maneja */
  padding: 15px; /* Reducido */
  background: #f9fbfd;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left; /* Alinea el texto de los resultados a la izquierda */
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#portal-results h3 {
  text-align: center;
  margin-bottom: 10px; /* Reducido */
  color: var(--primary);
}

/* Styles for individual detail paragraphs within the grid */
.subscription-details-grid p {
  margin-bottom: 0; /* Reinicia el margin-bottom ya que el gap de la cuadrícula maneja el espaciado */
  font-size: 13px; /* Reducido aún más */
  line-height: 1.2; /* Reducido aún más */
  color: var(--text);
  display: flex;
  flex-direction: row; /* Alinea label y valor en una fila */
  justify-content: space-between; /* Empuja el label a la izquierda y el valor a la derecha */
  align-items: center; /* Centra verticalmente el contenido */
  border-bottom: none; /* Reducido */
  padding-bottom: 0;
  background: var(--surface); /* Da a cada elemento de detalle un fondo */
  padding: 6px 10px; /* Reducido aún más */
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04); /* Sombra un poco más pronunciada */
}

.subscription-details-grid p strong {
  margin-bottom: 0; /* Ya no se necesita margen inferior */
  display: inline; /* Se ajusta al contenido */
  color: var(--primary-2);
  font-weight: 600;
}

.subscription-details-grid p span {
  font-size: 1em; /* Tamaño de fuente normalizado */
  font-weight: 500;
  color: var(--text);
}

/* Asegura que el mensaje y los botones sigan ocupando todo el ancho debajo de la cuadrícula */
#portal-results > p.message,
#portal-results > #paypal-button-container,
#portal-results > #paypal-result-message,
#portal-results > #pay-now-btn { /* Asegura que estos elementos tengan un margen superior para separarse de la cuadrícula */
  margin-top: 15px;
}

#portal-results strong {
  color: var(--primary-2);
  font-weight: 600;
}

/* --- Estilos dinámicos para el estado de la suscripción --- */
#sub-status {
  font-weight: 700;
  padding: 3px 10px; /* Reducido */
  border-radius: 99px;
  font-size: 12px; /* Reducido */
  color: #fff;
}

.status-active { background-color: #28a745; } /* Verde */
.status-overdue { background-color: #dc3545; } /* Rojo */
.status-pending_cancellation { background-color: #ffc107; color: var(--ink) !important; } /* Amarillo */
.status-inactive { background-color: #6c757d; } /* Gris */

/* --- ESTILOS PARA PÁGINAS INTERNAS (NOSOTROS, SERVICIOS) --- */

.page-hero {
  background: linear-gradient(180deg, #fff, var(--bg));
  padding: 40px 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-size: 38px;
  color: var(--primary-2);
  margin-bottom: 10px;
}

.page-hero p {
  font-size: 18px;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
}

/* Estilos para página "Nosotros" */
.grid-2-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.about-visual img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.team-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 4px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}

.team-card h3 { margin: 0 0 5px; }
.team-card p { font-size: 14px; color: var(--muted); margin: 0; }

/* Estilos para página "Servicios" */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
}

.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.service-icon {
  color: var(--primary);
  margin-bottom: 15px;
}

.service-card h3 { margin-top: 0; }

.service-features {
  list-style: none;
  padding: 0;
  margin-top: auto; /* Empuja la lista hacia abajo */
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.service-features li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}

.service-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: 700;
}

@media (max-width: 980px) {
  .grid-2-about { grid-template-columns: 1fr; }
  .about-visual { order: -1; } /* Mueve la imagen arriba en móvil */
}

/* --- ESTILOS PARA PÁGINA DE LOGIN --- */

.login-section {
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg), #dbe3eb);
  padding: 40px 20px;
}

.login-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 40px;
  max-width: 450px;
  width: 100%;
  text-align: center;
}

.login-header {
  margin-bottom: 30px;
}

.logo-login {
  width: 220px;
  height: 55px;
  background-image: url('icono.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto 20px;
}

.login-header h2 {
  color: var(--primary-2);
  margin: 0 0 10px;
}

.login-header p {
  color: var(--muted);
  margin: 0;
}

#login-form .form-group {
  text-align: left;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 25px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
}

.forgot-password {
  font-weight: 600;
}

.login-footer {
  margin-top: 25px;
  font-size: 14px;
  color: var(--muted);
}

.login-footer a {
  font-weight: 600;
}