/* Solution Global POS — estilos base. El resto del diseño va en línea en index.html. */
:root { --acento: #F2A93B; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F1F5F5; }
a { color: #0B4F5C; } a:hover { color: #083A44; }
img { max-width: 100%; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.flota { animation: flota 6s ease-in-out infinite; }
.entra { animation: entra .45s ease-out both; }
.pulso { animation: pulso 1.8s ease-in-out infinite; }
/* Vitrina "Mira el sistema por dentro" */
.sistema { background: #13262B; color: #F1F5F5; }
.sistema-in { max-width: 1200px; margin: 0 auto; padding: 88px 24px; }
.sistema-titulo { margin: 0 0 12px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.02em; color: #FFFFFF; }
.sistema-intro { margin: 0 0 32px; font-size: 18px; color: #C3D3D5; }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.cat { font: inherit; text-align: left; display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-height: 76px; border-radius: 16px; border: 1px solid #3C5A60; background: #1A3238; color: #F1F5F5; cursor: pointer; transition: background .2s, border-color .2s; }
.cat svg { flex: none; color: #12B5A6; }
.cat:hover { border-color: #12B5A6; }
.cat[aria-selected="true"] { background: #0B4F5C; border-color: #F2A93B; box-shadow: inset 0 -3px 0 #F2A93B; }
.cat[aria-selected="true"] svg { color: #F2A93B; }
.cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-nombre { font-weight: 700; font-size: 17px; }
.cat-sub { font-size: 13px; color: #C3D3D5; }
.vista { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.pantallas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pantalla { font: inherit; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 0; background: transparent; color: #F1F5F5; cursor: pointer; }
.pantalla:hover { background: #1A3238; }
.pantalla[aria-current="true"] { background: #F1F5F5; color: #13262B; }
.pantalla-nombre { font-weight: 600; font-size: 15px; }
.pantalla-desc { font-size: 13px; line-height: 1.4; color: #A9BDC0; display: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pantalla[aria-current="true"] .pantalla-desc { color: #4F6469; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.marco-col { max-width: 860px; }
.marco { border-radius: 16px; overflow: hidden; border: 1px solid #3C5A60; background: #1A3238; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.marco-barra { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #0E1C20; font-size: 13px; color: #A9BDC0; }
.marco-barra > span:not(.marco-url) { width: 10px; height: 10px; border-radius: 50%; background: #3C5A60; }
.marco-url { margin-left: 8px; background: #1A3238; border-radius: 6px; padding: 4px 12px; flex: 1; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marco figure { margin: 0; background: #1B2230; }
.marco img { display: block; width: 100%; height: auto; }
.marco-ampliar { display: block; cursor: zoom-in; }
.marco-ampliar:focus-visible { outline: 3px solid #F2A93B; outline-offset: -3px; }
.marco-nota { margin: 12px 0 0; font-size: 13px; color: #A9BDC0; }
.cat:focus-visible, .pantalla:focus-visible { outline: 3px solid #F2A93B; outline-offset: 2px; }
@media (max-width: 900px) {
  .vista { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pantallas { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .pantalla { width: auto; flex: none; padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 1px solid #3C5A60; scroll-snap-align: start; white-space: nowrap; }
  .pantalla[aria-current="true"] .pantalla-desc { display: none; }
  .pantalla-desc { display: none; }
  .marco-col { max-width: none; }
}
@media (max-width: 640px) {
  .sistema-in { padding: 64px 16px; }
  .cats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cat { min-height: 60px; padding: 12px 16px; }
}

/* Visor de pantalla en grande */
.visor { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.visor::backdrop { background: rgba(14, 28, 32, .88); }
.visor img { display: block; max-width: 96vw; max-height: 88vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.visor-cerrar { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #F1F5F5; color: #13262B; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.visor-cerrar:focus-visible { outline: 3px solid #F2A93B; outline-offset: 2px; }

/* Carrusel de la portada */
.carrusel { position: relative; aspect-ratio: 1600 / 700; border-radius: 14px; overflow: hidden; border: 1px solid #3C5A60; background: #1B2230; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .7s ease; }
.carrusel img.activa { opacity: 1; }
.carrusel-flecha { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3C5A60; background: transparent; color: #F1F5F5; cursor: pointer; }
.carrusel-flecha:hover { background: rgba(255,255,255,.08); }
.carrusel-punto { width: 28px; height: 44px; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.carrusel-punto::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3C5A60; transition: background .2s, transform .2s; }
.carrusel-punto[aria-current="true"]::before { background: var(--acento); transform: scale(1.3); }
.carrusel-flecha:focus-visible, .carrusel-punto:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .flota, .entra, .pulso { animation: none; } .carrusel img { transition: none; } }
/* Enlace de cada tarjeta de sector en la portada */
.sector-link { margin-top: auto; font-weight: 600; color: #0B4F5C; text-decoration: none; }
.sector-link:hover { text-decoration: underline; }
/* Páginas por sector (pos-para-opticas/, etc.) */
.pg { font-family: 'Sora', system-ui, sans-serif; color: #13262B; line-height: 1.55; }
.pg-top { background: #13262B; color: #F1F5F5; }
.pg-nav { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pg-marca { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 21px; letter-spacing: -0.03em; white-space: nowrap; }
.pg-marca span { font-weight: 300; color: #12B5A6; }
.pg-links { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; font-size: 15px; }
.pg-links a { color: #CFDDDF; text-decoration: none; }
.pg-btn { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; background: var(--acento); color: #13262B !important; font-weight: 600; padding: 12px 22px; border-radius: 8px; text-decoration: none; }
.pg-btn2 { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; color: #F1F5F5; padding: 12px 22px; border-radius: 8px; border: 1px solid #3C5A60; text-decoration: none; }
.pg-hero { max-width: 1200px; margin: 0 auto; padding: 48px 24px 80px; display: flex; flex-direction: column; gap: 20px; }
.pg-migas { margin: 0; font-size: 14px; color: #A9BDC0; }
.pg-migas a { color: #A9BDC0; }
.pg-hero h1 { margin: 0; font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.035em; max-width: 900px; }
.pg-hero p.pg-lead { margin: 0; font-size: 19px; color: #C3D3D5; max-width: 720px; }
.pg-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-sec { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }
.pg-sec h2 { margin: 0 0 12px; font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.01em; }
.pg-sec > p { margin: 0 0 32px; font-size: 18px; color: #4F6469; max-width: 720px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pg-card { background: #FFFFFF; border: 1px solid #D5E0E0; border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.pg-card h3 { margin: 0; font-size: 20px; }
.pg-card p { margin: 0; color: #4F6469; }
.pg-oscuro { background: #13262B; color: #F1F5F5; }
.pg-oscuro .pg-sec > p { color: #C3D3D5; }
.pg-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 28px; }
.pg-galeria figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pg-galeria a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #3C5A60; background: #1B2230; }
.pg-galeria img { display: block; width: 100%; height: auto; }
.pg-galeria figcaption { font-size: 15px; color: #C3D3D5; }
.pg-galeria figcaption b { color: #FFFFFF; display: block; }
.pg-faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.pg-faq details { background: #FFFFFF; border: 1px solid #D5E0E0; border-radius: 12px; padding: 18px 22px; }
.pg-faq summary { font-weight: 600; font-size: 18px; cursor: pointer; }
.pg-faq details p { margin: 12px 0 0; color: #4F6469; }
.pg-pie { max-width: 1200px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #4F6469; }
.pg-pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Botón flotante de WhatsApp */
.wa-flota { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: 999px; background: #0B4F5C; color: #FFFFFF; font-family: 'Sora', system-ui, sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.wa-flota:hover { background: #083A44; color: #FFFFFF; }
.wa-flota svg { color: #F2A93B; }
/* Texto largo (política de datos) */
.pg-texto { max-width: 820px; }
.pg-texto h2 { font-size: 24px; margin: 32px 0 8px; }
.pg-texto p, .pg-texto li { color: #3A5055; font-size: 17px; }
.pg-texto ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
body { padding-bottom: 72px; } /* que el botón flotante no tape el final de la página */