@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#f8f9fa;
  --surface:#ffffff;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0e1b2a;
  --ink:#0b0f19;
  --primary:#262262;
  --primary-2:#1a1f71;
  --accent:#e64a4a;
  --ring:rgba(38, 34, 98, 0.2);
  --border: #e5e7eb;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 40px -10px rgba(0,0,0,0.08);
  --shadow-pricing: 0 20px 40px -10px rgba(38, 34, 98, 0.15);
  --shadow-input: 0 2px 10px rgba(0,0,0,0.03);
  --shadow-glow: 0 0 20px rgba(38, 34, 98, 0.1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Plus Jakarta Sans', 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,.8); backdrop-filter: blur(8px); border-bottom:1px solid var(--border);box-shadow:var(--shadow-soft);}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px; height: 72px;}
.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-wrapper { height: 100%; display: flex; align-items: center; gap: 4px; }
.nav-links{display:flex;gap:4px;align-items:center;flex-wrap:nowrap; white-space: nowrap;}
.nav-links a{color:var(--muted);font-weight:700;padding:8px 12px;border-radius:99px;transition:all .2s ease; font-size: 14px;}
.nav-links a:not(.btn):hover{color:var(--primary);background:rgba(38, 34, 98, 0.05)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:12px;border:2px solid transparent;font-weight:700;cursor:pointer;transition:all .2s ease-in-out; white-space: nowrap;}
.btn:hover{transform:translateY(-1px); }
.btn.primary {
  box-shadow: 0 10px 20px -5px rgba(38, 34, 98, 0.3);
}
.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.accent:hover { background: #d63a3a; border-color: #d63a3a; }

/* 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-2);
  color: var(--primary);
  font-weight: 600;
}
.btn.light:hover {
  background: #f8f9fa;
  color: var(--primary-2);
}
.btn.light svg {
  color: var(--primary);
}
.btn.light:hover svg {
  color: var(--primary-2);
}

/* Estilo para botones que solo tienen un ícono */
.btn.icon-btn {
  padding: 10px; /* Hacemos el padding igual en todos los lados */
  width: 40px; /* Ancho y alto fijos para que sea cuadrado */
  height: 40px;
  justify-content: center; /* Centramos el ícono */
}

.nav-links a.active-link {
  color: var(--primary); /* Color principal para el enlace activo */
  background: rgba(38, 34, 98, 0.08); /* Un fondo sutil con el color primario */
  font-weight: 700; /* Hacerlo más negrita para destacar */
}

/* Estilos para el botón de menú móvil (hamburguesa) */
.mobile-nav-toggle { display: none; }
/* Solo para accesibilidad, oculta el texto "Menu" visualmente */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Botón de cotizar para móvil, oculto por defecto */
.nav-quote-btn-mobile {
  display: none;
}

/* Contenedor para los botones de la derecha en móvil */
.mobile-nav-buttons {
  display: none; /* Oculto por defecto en escritorio */
}

.hero{background:linear-gradient(180deg, var(--surface), rgba(238, 242, 246, 0));padding:80px 0}
.hero .inner{display:grid;grid-template-columns:1fr minmax(0, 50%);gap:64px;align-items:center}
.hero h1{font-size:52px;line-height:1.1;margin:0 0 24px;font-weight:800;color:var(--primary); letter-spacing: -0.025em;}
.hero-title-gradient { background: linear-gradient(to right, var(--primary), #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p{color:var(--muted);font-size:18px;max-width:550px; line-height: 1.7;}
.hero .cta{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.badges{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.badge{padding:6px 16px;border-radius:999px;color:var(--primary);background:rgba(38, 34, 98, 0.08);font-size:12px; font-weight: 800; text-transform: uppercase;}
.hero-art{
  aspect-ratio: 16 / 9;
  max-width: 100%; /* Asegura que el contenedor no se desborde de su columna */
  display:flex;align-items:center;justify-content:center;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s 0.15s;
}
.hero-art:hover {
  transform: scale(1.15);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 20;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s 0s;
}
.hero-art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px; /* Asegura que el video respete el borde redondeado */
  cursor: pointer; /* Indica que el video es clickeable */
}
.trust{padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
.hero-art{position:relative;}

.hero-art video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px; /* Asegura que el video respete el borde redondeado */
  cursor: pointer; /* Indica que el video es clickeable */
}

.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:96px 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-card{background: var(--surface); padding: 16px; border-radius: 12px; box-shadow: var(--shadow-soft); border: 1px solid var(--border);}
.kpi-card .kpi-value { font-size: 24px; font-weight: 800; color: var(--ink); }
.kpi-card .kpi-value i { color: var(--accent); font-size: 14px; vertical-align: middle; }
.kpi-card .kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.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)}
.table-wrapper {
  overflow-x: auto; /* Permite el scroll horizontal en la tabla si es necesario */
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 20px 0;
}
.footer{padding:48px 0;border-top:1px solid var(--border);color:var(--muted);background:#fff}

/* --- NUEVOS ESTILOS PARA SECCIONES DE HOME --- */
.section-header { text-align: center; max-width: 600px; margin: 0 auto 48px; }
.section-tag { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.section-title { font-size: 36px; font-weight: 800; color: var(--ink); margin: 8px 0 12px; }
.section-subtitle { font-size: 18px; color: var(--muted); }

.section-tag-inline { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 24px; }
.section-tag-inline.color-indigo { background: #e0e7ff; color: #4f46e5; }


.feature-card {
  background: var(--surface);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 5px 30px -5px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -5px rgba(0,0,0,0.1);
}
.feature-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.feature-card:hover .feature-icon-wrapper { color: #fff; }
.feature-icon-wrapper.color-blue { background: #eef2ff; color: #4f46e5; }
.feature-card:hover .feature-icon-wrapper.color-blue { background: #4f46e5; }
.feature-icon-wrapper.color-emerald { background: #ecfdf5; color: #10b981; }
.feature-card:hover .feature-icon-wrapper.color-emerald { background: #10b981; }
.feature-icon-wrapper.color-indigo { background: #e0e7ff; color: #6366f1; }
.feature-card:hover .feature-icon-wrapper.color-indigo { background: #6366f1; }

.feature-card-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.feature-card-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.feature-card-link { font-weight: 700; font-size: 14px; text-decoration: none; }
.feature-card-link i { margin-left: 8px; font-size: 12px; }
.feature-card-link.color-blue { color: var(--primary); }
.feature-card-link.color-emerald { color: #10b981; }
.feature-card-link.color-indigo { color: #6366f1; }

.bg-light { background: #f8f9fa; }
.grid-2-features { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.section-title-left { font-size: 36px; font-weight: 800; color: var(--ink); margin: 0 0 24px; line-height: 1.2; }
.section-title-left .text-primary { color: var(--primary); }
.section-title-left .text-indigo { color: #4f46e5; }
.section-title-left .text-accent { color: var(--accent); }
.section-text { color: var(--muted); line-height: 1.7; margin-bottom: 32px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 32px; space-y: 16px; }
.feature-list li { display: flex; align-items: center; gap: 12px; color: var(--text); }
.feature-list i { color: #28a745; }
.feature-list.icon-list i { width: 32px; text-align: center; margin-right: 8px; font-size: 20px; }
.feature-list.icon-list .fa-aws { color: #ff9900; }
.feature-list.icon-list .fa-sync { color: #3b82f6; }
.feature-list.icon-list .fa-code-branch { color: #a855f7; }
.feature-icon-wrapper.small-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: 24px; }

.feature-visual { position: relative; }
.code-mockup {
  background: var(--surface);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  max-width: 450px;
  margin: auto;
}
.code-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.dots { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.green { background: #22c55e; }
.code-filename { font-family: monospace; font-size: 12px; color: var(--muted); }
.code-body { font-family: monospace; font-size: 13px; line-height: 1.6; }
.code-keyword { color: #a855f7; }
.code-variable { color: #3b82f6; }
.code-property { color: var(--muted); }
.code-string { color: #16a34a; }
.code-boolean { color: #a855f7; }

.feature-visual.code-visual {
  position: relative;
}
.code-preview {
  background: #1e1e2e;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Fira Code', monospace;
  padding: 24px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.2);
  position: relative;
  z-index: 10;
}
.code-preview-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.code-preview-filename { margin-left: auto; color: #6b7280; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; }
.code-preview pre { margin: 0; font-size: 14px; }
.code-preview .code-keyword { color: #c792ea; }
.code-preview .code-variable { color: #ffcb6b; }
.code-preview .code-property { color: #82aaff; }
.code-preview .code-string { color: #c3e88d; }
.code-preview .code-boolean { color: #c792ea; }
.code-preview .code-comment { color: #6b7280; }
.code-preview .code-success { color: #c3e88d; }

.feature-visual.code-visual::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 256px; height: 256px; background: #e0e7ff;
  border-radius: 50%; filter: blur(80px); opacity: 0.5;
}

.floating-badge {
  position: absolute;
  background: var(--surface);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.floating-badge.aws { top: 40px; right: -24px; }
.floating-badge.aws i { color: #FF9900; font-size: 20px; }
.floating-badge.jira { bottom: 40px; left: -24px; }
.floating-badge.jira i { color: #0052CC; font-size: 20px; }

.analytics-mockup {
  background: var(--surface);
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  max-width: 450px;
  margin: auto;
}
.analytics-header {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4px;
}
.analytics-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.analytics-value { font-size: 36px; font-weight: 800; color: var(--ink); }
.analytics-pill { font-size: 14px; font-weight: 700; color: #16a34a; background: #dcfce7; padding: 4px 8px; border-radius: 6px; }
.analytics-bars { display: flex; align-items: flex-end; gap: 8px; height: 128px; padding: 16px; }
.analytics-bars > div { flex: 1; background: #e2e8f0; border-radius: 4px 4px 0 0; }
.analytics-bars > div.bar-primary { background: var(--primary); }

.floating-badge.insight { right: -16px; bottom: -16px; padding: 16px; }
.insight-icon { width: 40px; height: 40px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; }
.insight-label { font-size: 12px; color: var(--muted); }
.insight-value { font-size: 14px; font-weight: 700; color: var(--ink); }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.kpi-value { font-size: 36px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.kpi-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Estilos para la sección de Análisis IA --- */
.section-dark-accent { background: var(--primary); color: #fff; position: relative; overflow: hidden; }
.dark-section-bg { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: rgba(255,255,255,0.05); transform: skewX(12deg); transform-origin: top right; }
.section-dark-accent .container { position: relative; z-index: 10; }
.section-dark-accent .section-title-left, .section-dark-accent .kpi-value { color: #fff; }
.section-dark-accent .section-text, .section-dark-accent .kpi-label { color: #c7d2fe; }

.ai-visual { position: relative; min-height: 300px; }
.floating-card-1 {
  position: absolute; top: 0; right: 40px;
  background: var(--surface); color: var(--ink);
  padding: 16px; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  width: 192px; animation: bounce 4s infinite ease-in-out;
}
.card-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.card-value-main { font-size: 28px; font-weight: 800; }
.card-subtitle { font-size: 12px; font-weight: 600; display: flex; align-items: center; margin-top: 4px; }
.card-subtitle i { margin-right: 4px; }
.color-green { color: #16a34a; }

.main-ai-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 32px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  margin-top: 48px; margin-right: 32px;
}
.ai-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ai-card-icon { width: 48px; height: 48px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ai-card-title { font-weight: 700; font-size: 18px; }
.ai-card-subtitle { color: #c7d2fe; font-size: 14px; }
.ai-card-bars { height: 96px; display: flex; align-items: flex-end; gap: 8px; }
.ai-card-bars > div { width: 100%; background: rgba(255,255,255,0.2); border-radius: 4px 4px 0 0; }
.ai-card-bars .bar-accent { background: var(--accent); position: relative; }
.ai-card-bars .bar-accent span { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}





.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pricing-grid.new-pricing { align-items: start; gap: 32px; }

.pricing-card {
  background: var(--surface);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--border);
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.pricing-card:hover { border-color: rgba(17, 2, 153, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }

.pricing-card.recommended {
  background: var(--primary);
  color: #fff;
  position: relative;
  z-index: 10;
  border-color: var(--primary);
  box-shadow: 0 20px 40px -10px rgba(38, 34, 98, 0.15);
}
@media (min-width: 1024px) {
  .pricing-card.recommended {
    margin-top: -16px;
    padding-bottom: 48px;
  }
}

.recommend-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: #fff;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pricing-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.pricing-card.recommended .pricing-title { color: #fff; }
.pricing-price { margin-bottom: 24px; display: flex; align-items: baseline; gap: 4px; justify-content: flex-start; }
.price-value { font-size: 40px; font-weight: 500; color: var(--ink); }
.price-value.custom-price { font-size: 32px; }
.price-period { color: var(--muted); }
.pricing-card.recommended .price-value { color: #fff; }
.pricing-card.recommended .price-period { color: #e0e7ff; }
.pricing-desc { font-size: 14px; color: var(--muted); margin: 0 0 24px; font-weight: 500; text-align: left; }
.pricing-card.recommended .pricing-desc { color: #c7d2fe; }
.pricing-card .btn { margin-bottom: 32px; }

.pricing-features { list-style: none; padding: 0; margin: 0; text-align: left; space-y: 16px; display: flex; flex-direction: column; gap: 16px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-weight: 500; font-size: 14px; }
.pricing-features li i.fa-check { color: var(--primary); margin-top: 2px; }
.pricing-card.recommended .pricing-features li { color: #e0e7ff; }

.feature-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(99, 102, 241, 0.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; flex-shrink: 0;
}
.pricing-card.recommended .feature-check { background: rgba(255, 255, 255, 0.2); }

.pricing-card.recommended .btn.light { background: #fff; color: var(--primary); }
.pricing-card.enterprise { background: #f8f9fa; }
.pricing-card.enterprise .btn.dark { background: var(--ink); color: #fff; }
.pricing-card.enterprise .pricing-features li i.fa-check { color: var(--ink); }

.btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.dark:hover { background: #212529; border-color: #212529; }

/* --- Estilos para la sección de contacto --- */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 64px; text-align: center; }
.contact-info-item { padding: 24px; }
.contact-info-icon {
  width: 48px; height: 48px; margin: 0 auto 16px;
  background: var(--surface); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.contact-info-title { font-weight: 700; color: var(--ink); margin: 0 0 8px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; }
.contact-info-desc { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.contact-info-link { font-weight: 700; color: var(--accent); }

.contact-form-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
  padding: 48px;
  border: 1px solid var(--border);
}
.contact-form-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; }
.contact-form-inputs { display: flex; flex-direction: column; gap: 24px; }
.contact-form-textarea { display: flex; flex-direction: column; height: 100%; }
.contact-form-textarea textarea {
  flex-grow: 1;
  resize: none;
  width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; background: #f8f9fa;
}
.contact-form-submit { grid-column: 1 / -1; }

@media (max-width: 980px) {
  .contact-info-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-card { padding: 32px; }
}

.btn.full-width {
  width: 100%;
  justify-content: center;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 16px;
}

/* --- FIN Estilos para la sección de contacto --- */



.expanded-footer {
  background: #0f172a; /* bg-slate-900 */
  color: #cbd5e1; /* text-slate-300 */
  padding: 64px 0;
  border-top: 1px solid #1e293b; /* border-slate-800 */
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 48px;
  margin-bottom: 48px;
}
.footer-column .footer-brand { color: #fff; }
.footer-desc { color: #94a3b8; font-size: 14px; line-height: 1.6; margin-bottom: 24px; font-weight: 500; }
.social-links { display: flex; gap: 16px; }
.social-link {
  width: 40px; height: 40px; border-radius: 8px;
  background: #1e293b; /* bg-slate-800 */
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border: 1px solid #334155; /* border-slate-700 */
  transition: background-color 0.2s ease;
}
.social-link:hover { background: var(--accent); }
.footer-title { color: #fff; font-weight: 700; font-size: 18px; margin: 0 0 24px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.footer-links a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 500; color: #94a3b8; }
.footer-contact i {
  width: 32px; height: 32px; border-radius: 6px;
  background: #1e293b;
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.footer-bottom-bar {
  padding-top: 32px;
  border-top: 1px solid #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: #64748b; /* text-slate-500 */
}
.footer-bottom-bar span { color: #cbd5e1; }
.bottom-bar-links { display: flex; gap: 24px; }
.bottom-bar-links a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.bottom-bar-links a:hover { color: #fff; }

@media (max-width: 768px) {
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

.simple-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 48px 0;
  text-align: center;
}
.footer-brand {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}
.brand-accent {
  font-weight: 300;
  color: var(--accent);
}
.footer-copy {
  font-size: 14px;
  color: var(--muted);
}

/* --- Media Queries para nuevas secciones --- */
@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}

  /* --- INICIO ESTILOS RESPONSIVOS DEL HEADER --- */
  .grid-2-features { grid-template-columns: 1fr; }
  .feature-visual { order: -1; margin-bottom: 48px; } /* Pone la imagen arriba */
  .pricing-grid { grid-template-columns: 1fr; gap: 24px; }
  .pricing-card.recommended { transform: scale(1); }
  
  /* Ajustes para el video en móvil para evitar desbordamiento */
  .hero-art {
    aspect-ratio: auto; /* Elimina la proporción fija */
    height: auto; /* Permite que la altura se ajuste al contenido */
  }
  .hero-art video { position: static; } /* El video se comporta como un elemento normal */

  /* --- INICIO ESTILOS RESPONSIVOS DEL HEADER --- */
  .navbar .inner {
    justify-content: space-between;
    flex-wrap: nowrap; /* Evita que los elementos se envuelvan en el header */
  }

  /* Ocultar elementos de escritorio en móvil */
  .nav-quote-btn-desktop,
  .nav-icon-btn {
    display: none;
  }

  /* Mostrar el contenedor de botones móviles y alinearlos */
  .mobile-nav-buttons {
    display: flex;
    align-items: center;
  }

  /* Mostrar botón de cotizar móvil */
  .nav-quote-btn-mobile {
    display: inline-flex;
    padding: 8px 12px; /* Más pequeño */
    margin-right: 8px; /* Espacio entre cotizar y hamburguesa */
  }

  /* Mostrar y estilizar el botón de hamburguesa */
  .mobile-nav-toggle {
    display: block;
    position: relative;
    z-index: 9999;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(14, 27, 42, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    border: none;
    cursor: pointer; 
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(14, 27, 42, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M24 6L6 24'/%3e%3c/svg%3e");
  }

  /* Contenedor del menú desplegable */
  .nav-wrapper {
    position: fixed;
    top: 72px; /* Debajo de la barra de navegación */
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 350ms ease, opacity 350ms ease; /* Transición unificada y limpia */
    align-items: flex-start;
    z-index: 999;
    /* Mejoras para evitar clics fantasma */
    opacity: 0;
    pointer-events: none;
    padding: 2rem;
  }

  /* Por defecto, el menú está completamente oculto y no ocupa espacio */
  .nav-wrapper { display: none; }

  .nav-wrapper[data-visible="true"] {
    display: flex; /* Se muestra como flexbox solo cuando está visible */
    flex-direction: column;
    background: var(--surface); /* Aseguramos el fondo sólido al mostrarse */
    transform: translateX(0%);
    /* Hacemos visible y clickeable el menú */
    opacity: 1;
    pointer-events: auto;
    height: 90vh;
  }

  /* Cuando el menú está visible, evitamos el scroll en el body para prevenir el "zoom" y el espacio vacío */
  body.menu-open {
    overflow: hidden;
  }


  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    flex-grow: 1; /* Permite que el contenedor de links ocupe el espacio disponible */
  }

  .nav-links a {
    font-size: 1.2rem;
    width: 100%;
    padding: 1rem;
  }

  .lang-switcher {
    margin-left: 0;
    align-self: flex-start;
    margin-top: 1rem;
  }

  /* --- FIN ESTILOS RESPONSIVOS DEL HEADER --- */
}

/* --- 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;
  /* --- INICIO: Cambios para responsividad de modales --- */
  max-height: 90vh; /* El modal nunca superará el 90% de la altura de la pantalla */
  overflow-y: auto; /* Si el contenido es más alto, se podrá hacer scroll */
  /* --- FIN: Cambios para responsividad de modales --- */
}
.modal-content.wide {
  grid-template-columns: 1fr;
  max-width: 600px;
}

/* 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 formulario de agendar reunión --- */
#meeting-form-container .field { margin-bottom: 1rem; }
#meeting-form-container label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 0.35rem; }
#meeting-form-container input, #meeting-form-container select { 
  width: 100%; 
  padding: 0.75rem; 
  border-radius: 8px; 
  border: 1px solid var(--border); 
  font-size: 1rem; 
  box-sizing: border-box; 
  background-color: var(--surface);
  color: var(--text);
}
#meeting-form-container input:focus, #meeting-form-container select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(30, 95, 174, 0.1); }
#meeting-form-container select:disabled { background-color: #f8f9fa; color: #6c757d; cursor: not-allowed; }

/* Estilos para el feedback del formulario */
.feedback { text-align: center; margin-top: 1rem; font-size: 0.9rem; padding: 10px; border-radius: 6px; display: none; }
.feedback.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; display: block; }
.feedback.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; display: block; }

/* Ajustes para Flatpickr en tema oscuro (si lo implementas) */
.flatpickr-calendar.dark { background: #2d3748; }
.flatpickr-calendar.dark .flatpickr-day:not(.disabled):hover { background: #4a5568; }

/* 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; }
  .pricing-grid:not(.new-pricing) { grid-template-columns: 1fr 1fr; }
}

/* Media Query para pantallas extra pequeñas (menos de 320px) */
@media (max-width: 320px) {
  .kpis {
    grid-template-columns: 1fr; /* KPIs en una sola columna */
  }
  .subscription-details-grid p {
    flex-direction: column; /* Apila el label y el valor */
    align-items: flex-start; /* Alinea a la izquierda */
  }
  .pricing-grid:not(.new-pricing) { 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(min(100%, 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;
}