/* ============================================================================
   IMP SYSTEMS — portada (index.html), estilo sobrio de ERP
   Inspirada en la estructura de SAP Business One y Dynamics 365 Business
   Central: bloque sólido de la marca en la portada con la aplicación entrando
   desde el borde, navegación interna fija, pestañas con acordeón, mucho blanco
   y títulos grandes de peso liviano. La personalidad la ponen la marca (verde
   pino, isotipo de barras) y las capturas reales, no los adornos.
   ============================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --acento:       #0E6B4F;
  --acento-hover: #0B5A42;
  --acento-vivo:  #4FB58E;
  --acento-suave: #E6F0EB;
  --tinta:        #14201C;
  --fondo:        #FFFFFF;
  --superficie:   #F4F6F5;
  --neutro:       #55625C;
  --linea:        #D9DFDC;
  --sobre-acento: #FFFFFF;
  --plancha:      #0E6B4F;

  --ancho: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --sans: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', monospace;
}

html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 16.5px; line-height: 1.6; color: var(--tinta); background: var(--fondo); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); }
a:hover { color: var(--acento-hover); }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.antetitulo { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); margin-bottom: 10px; }
.bajada { color: var(--neutro); font-size: 1.08rem; max-width: 62ch; margin-top: 12px; }
.suave { color: var(--neutro); }
.enlace { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.enlace::after { content: '›'; font-size: 1.3em; line-height: 1; }
.enlace:hover { text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 0.95rem/1 var(--sans); text-decoration: none;
  padding: 0.85rem 1.25rem; border-radius: 4px; border: 1.5px solid var(--tinta);
  background: var(--tinta); color: #fff; cursor: pointer;
}
.btn:hover { background: #2A3833; border-color: #2A3833; color: #fff; }
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.btn-borde { background: transparent; color: var(--tinta); }
.btn-borde:hover { background: var(--superficie); color: var(--tinta); }
.btn-claro { background: #fff; color: var(--acento); border-color: #fff; }
.btn-claro:hover { background: #E6F0EB; border-color: #E6F0EB; color: var(--acento-hover); }
.btn-linea-clara { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-linea-clara:hover { background: rgba(255,255,255,0.1); color: #fff; }

.seccion { padding: clamp(64px, 8vw, 104px) 0; }
.seccion.gris { background: var(--superficie); }
.separador { border: none; border-top: 1px solid var(--linea); max-width: calc(var(--ancho) - 2 * var(--gutter)); margin: 0 auto; }

/* ─── NAV ─────────────────────────────────────────────────────────────────── */
.nav { background: var(--nav-fondo, var(--fondo)); border-bottom: 1px solid var(--linea); }
.nav .envoltura { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.nav-izq { display: flex; align-items: center; gap: 2.2rem; }
.marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--tinta); }
.marca:hover { color: var(--tinta); }
.marca img { width: 30px; height: 30px; }
.marca b { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.marca span { font-weight: 400; font-size: 1.15rem; color: var(--neutro); letter-spacing: -0.02em; }
.nav ul { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.nav ul a { color: var(--tinta); text-decoration: none; font-size: 0.93rem; }
.nav ul a:hover { color: var(--acento); }
.nav-der { display: flex; gap: 10px; }
.nav-der .btn { padding: 0.6rem 0.95rem; font-size: 0.88rem; }
@media (max-width: 980px) { .nav ul { display: none; } }
@media (max-width: 560px) { .nav-der .btn-borde { display: none; } }

/* ─── 1. PORTADA: bloque verde + la aplicación entrando desde el borde ────── */
.portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 520px; }
.portada-texto {
  background: var(--acento); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 72px) clamp(48px, 6vw, 88px) max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
}
.portada-texto .antetitulo { color: #BFE3D3; }
.portada-texto p { font-size: 1.12rem; color: #D7ECE2; margin: 18px 0 28px; max-width: 46ch; }
.portada-texto .acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada-imagen { background: #0b0b0b; overflow: hidden; position: relative; }
.portada-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada-imagen { aspect-ratio: 16 / 10; }
}

/* ─── NAVEGACIÓN INTERNA FIJA ─────────────────────────────────────────────── */
.subnav { position: sticky; top: 0; z-index: 90; background: var(--nav-fondo, var(--fondo)); border-bottom: 1px solid var(--linea); }
.subnav .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 56px; }
.subnav ul { display: flex; gap: 1.8rem; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav ul a { color: var(--neutro); text-decoration: none; font-size: 0.92rem; white-space: nowrap; padding: 17px 0; border-bottom: 2px solid transparent; }
.subnav ul a:hover { color: var(--tinta); border-bottom-color: var(--acento); }
.subnav .btn { padding: 0.55rem 0.9rem; font-size: 0.86rem; white-space: nowrap; }
@media (max-width: 640px) { .subnav .btn { display: none; } }

/* ─── 2. QUÉ ES: texto + media con viñetas ────────────────────────────────── */
.quees-media { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 44px; }
.captura { border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; background: #0b0b0b; }
.quees-media ul { list-style: none; margin: 14px 0 20px; }
.quees-media li { padding: 6px 0 6px 22px; position: relative; }
.quees-media li::before { content: ''; position: absolute; left: 2px; top: 0.95em; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.quees-media p { color: var(--neutro); }
@media (max-width: 900px) { .quees-media { grid-template-columns: 1fr; } }

/* ─── 3. FUNCIONES: pestañas + acordeón + captura ─────────────────────────── */
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 34px; }
.pestana {
  font: 500 0.92rem/1 var(--sans); padding: 0.75rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); cursor: pointer;
}
.pestana:hover { border-color: var(--tinta); }
.pestana[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.panel { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.panel[hidden] { display: none; }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary { list-style: none; cursor: pointer; padding: 18px 28px 18px 18px; position: relative; font-weight: 600; font-size: 1.05rem; border-left: 3px solid transparent; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '⌄'; position: absolute; right: 4px; top: 12px; font-size: 1.3rem; color: var(--neutro); }
.acordeon details[open] summary { border-left-color: var(--acento); }
.acordeon details[open] summary::after { content: '⌃'; top: 20px; }
.acordeon details p { padding: 0 18px 20px 21px; color: var(--neutro); border-left: 3px solid var(--acento); }
.acordeon .enlace { margin: 18px 0 0 18px; }
.panel .captura { aspect-ratio: 1400 / 820; }
.panel .captura img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.panel figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--neutro); }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } }

/* ─── 4. RUBROS: grilla con divisiones finas ──────────────────────────────── */
.rubros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
.rubro { padding: 4px 28px 8px 0; }
.rubro + .rubro { border-left: 1px solid var(--linea); padding-left: 28px; }
.rubro .marca-rubro { display: block; width: 28px; height: 3px; background: var(--acento); margin-bottom: 18px; }
.rubro h3 { margin-bottom: 10px; }
.rubro p { color: var(--neutro); font-size: 0.95rem; margin-bottom: 14px; }
@media (max-width: 980px) {
  .rubros { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .rubro:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .rubros { grid-template-columns: 1fr; }
  .rubro + .rubro { border-left: none; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 24px; }
}

/* ─── 5. CLIENTES ─────────────────────────────────────────────────────────── */
.clientes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: 40px; }
.cliente-logo { height: 56px; display: flex; align-items: center; margin-bottom: 18px; }
.cliente-logo img { height: 52px; width: auto; border-radius: 3px; }
.cliente-logo .sin-logo { font-weight: 600; font-size: 1.1rem; border: 1px solid var(--linea); padding: 10px 14px; border-radius: 4px; color: var(--acento); }
.cliente h3 { font-size: 1.3rem; font-weight: 500; margin-bottom: 8px; }
.cliente p { color: var(--neutro); margin-bottom: 14px; max-width: 52ch; }
.cliente .dato { font: 0.8rem var(--mono); color: var(--neutro); display: block; margin-bottom: 10px; }
@media (max-width: 760px) { .clientes { grid-template-columns: 1fr; } }

/* ─── 6. POR DENTRO ───────────────────────────────────────────────────────── */
.por-dentro-cabeza { text-align: center; margin-bottom: 34px; }
.por-dentro-cabeza p { max-width: 58ch; margin: 12px auto 0; color: var(--neutro); }
.carrusel-pista {
  --orilla: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px var(--orilla) 12px; scroll-padding-inline: var(--orilla); scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-slide { flex: 0 0 min(900px, 86vw); scroll-snap-align: start; margin: 0; }
.carrusel-slide img { width: 100%; border: 1px solid var(--linea); border-radius: 6px; background: #0b0b0b; }
.carrusel-slide figcaption { margin-top: 12px; max-width: 66ch; color: var(--neutro); font-size: 0.95rem; }
.carrusel-slide figcaption strong { display: block; color: var(--tinta); font-weight: 600; }
.carrusel-controles { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; }
.carrusel-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); font-size: 1.05rem; cursor: pointer; }
.carrusel-nav:hover:not(:disabled) { border-color: var(--tinta); }
.carrusel-nav:disabled { opacity: 0.35; cursor: default; }
.carrusel-puntos { display: flex; gap: 8px; }
.carrusel-punto { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--linea); cursor: pointer; }
.carrusel-punto.activo { background: var(--acento); }

/* ─── 7. SIGUIENTE PASO: precio + pasos ───────────────────────────────────── */
.paso-siguiente { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 40px; }
.tarifa { border: 1px solid var(--linea); border-top: 4px solid var(--acento); border-radius: 4px; background: var(--fondo); }
.tarifa-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.tarifa-fila:last-of-type { border-bottom: none; }
.tarifa-fila b { font-weight: 600; display: block; }
.tarifa-fila span.suave { font-size: 0.88rem; }
.tarifa-fila .valor { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; text-align: right; }
.tarifa-fila .valor small { display: block; font-size: 0.75rem; color: var(--neutro); letter-spacing: 0; }
.tarifa-pie { padding: 14px 22px; background: var(--superficie); font-size: 0.88rem; color: var(--neutro); }
.pasos { list-style: none; counter-reset: p; margin: 4px 0 26px; }
.pasos li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.pasos li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--acento); color: var(--acento); display: grid; place-items: center; font-weight: 600; font-size: 0.85rem; }
.pasos b { display: block; font-weight: 600; }
.pasos span { color: var(--neutro); font-size: 0.95rem; }
@media (max-width: 900px) { .paso-siguiente { grid-template-columns: 1fr; } }

/* ─── 8. QUIÉNES SOMOS ────────────────────────────────────────────────────── */
.nosotros { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.nosotros p { color: var(--neutro); margin-top: 14px; max-width: 60ch; }
.nosotros p.destacado { color: var(--tinta); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; }
.foto-pendiente { display: grid; place-items: center; text-align: center; border: 1px dashed #9AA8A1; border-radius: 6px; color: var(--neutro); font: 0.8rem var(--mono); padding: 1.5rem; aspect-ratio: 4 / 5; background: var(--fondo); }
.cliente .foto-pendiente { aspect-ratio: 16 / 7; margin-bottom: 18px; }
@media (max-width: 860px) { .nosotros { grid-template-columns: 1fr; } .nosotros .foto-pendiente { aspect-ratio: 16 / 10; } }

/* ─── 9. PREGUNTAS ────────────────────────────────────────────────────────── */
.preguntas { margin-top: 34px; border-top: 1px solid var(--linea); max-width: 900px; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; padding: 18px 0 18px 34px; position: relative; font-weight: 600; font-size: 1.02rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::before { content: '›'; position: absolute; left: 8px; top: 13px; font-size: 1.5rem; color: var(--acento); transition: transform 0.15s; }
.preguntas details[open] summary::before { transform: rotate(90deg); }
.preguntas details p { padding: 0 0 20px 34px; color: var(--neutro); max-width: 72ch; }

/* ─── 10. CONTACTO ────────────────────────────────────────────────────────── */
.contacto { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); }
.canales { list-style: none; margin-top: 26px; }
.canales li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.canales li span { width: 90px; flex-shrink: 0; font-size: 0.85rem; color: var(--neutro); }
.canales a { font-weight: 600; text-decoration: none; }
.contacto form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 6px; padding: clamp(20px, 3vw, 32px); }
.contacto label { font-size: 0.85rem; font-weight: 600; display: flex; flex-direction: column; gap: 6px; }
.contacto label.ancho { grid-column: 1 / -1; }
.contacto input, .contacto select, .contacto textarea { font: 400 1rem var(--sans); color: var(--tinta); background: var(--fondo); border: 1px solid #B9C3BE; border-radius: 4px; padding: 0.65rem 0.75rem; }
.contacto textarea { min-height: 110px; resize: vertical; }
.contacto input:focus, .contacto select:focus, .contacto textarea:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
.contacto form .btn { grid-column: 1 / -1; justify-self: start; }
.form-ok { grid-column: 1 / -1; color: var(--acento); font-weight: 600; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } .contacto form { grid-template-columns: 1fr; } }

/* ─── PIE ─────────────────────────────────────────────────────────────────── */
.pie { background: var(--superficie); border-top: 1px solid var(--linea); padding: 48px 0 64px; font-size: 0.9rem; }
.pie-columnas { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pie h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.pie ul { list-style: none; }
.pie li { margin-bottom: 8px; }
.pie a { color: var(--neutro); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie .telefono { font-size: 1.25rem; font-weight: 600; color: var(--tinta); display: block; margin: 12px 0 4px; }
.pie-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--neutro); font-size: 0.82rem; }
@media (max-width: 860px) { .pie-columnas { grid-template-columns: 1fr 1fr; } }

/* ─── WHATSAPP FIJO ───────────────────────────────────────────────────────── */
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.95rem; border-radius: 999px; background: #1FA855; color: #fff; font: 600 0.88rem/1 var(--sans); text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.wa-fab:hover { background: #198F48; color: #fff; }
.wa-fab svg { width: 17px; height: 17px; fill: currentColor; }
.wa-fab-txt-corto { display: none; }
@media (max-width: 640px) { .wa-fab-txt { display: none; } .wa-fab-txt-corto { display: inline; } }