/* Sitio MisterSofts — estilos propios sobre Bootstrap 5 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fuentes/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fuentes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: block; src: url(../fuentes/material-icons.woff2) format('woff2'); }

:root {
  --verde: #005b41;
  --verde-medio: #01953f;
  --verde-claro: #21ba45;
  --fondo: #f4f7f5;
  --tinta: #1d1d1d;
  --acento: var(--verde);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: #212529;
  --bs-link-color: var(--verde);
  --bs-link-color-rgb: 0, 91, 65;
  --bs-link-hover-color: #003d2b;
}
body { background: var(--fondo); font-family: var(--bs-body-font-family); }
[x-cloak] { display: none !important; }
body.sin-scroll { overflow: hidden; }
.mi { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.25em; line-height: 1; display: inline-block;
  vertical-align: -0.22em; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; }
.verde { color: var(--verde); }
.verde-claro { color: var(--verde-claro); }
.saltar { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }

/* Botones */
.btn { border-radius: .5rem; font-weight: 600; }
.btn-verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-verde:hover, .btn-verde:focus-visible { background: #00452f; border-color: #00452f; color: #fff; }
.btn-outline-verde { border: 1px solid var(--verde); color: var(--verde); background: transparent; }
.btn-outline-verde:hover { background: var(--verde); color: #fff; }
.btn-acento { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-acento:hover, .btn-acento:focus-visible { color: #fff; filter: brightness(.9); }
.btn-outline-acento { border: 1px solid var(--acento); color: var(--acento); }
.btn-outline-acento:hover { background: var(--acento); color: #fff; }
.btn-claro { background: #fff; color: var(--verde); }
.btn-claro:hover { background: #e8f3ee; color: var(--verde); }

/* Barra superior y cabecera */
.barra-superior { background: var(--tinta); color: #fff; font-size: .75rem; padding: .35rem 0; }
.barra-superior a, .btn-barra { color: #fff; text-decoration: none; }
.barra-superior a:hover { color: var(--verde-claro); }
.btn-barra { background: none; border: 0; padding: .1rem .25rem; font-size: .8rem; }
.red { width: 18px; height: 18px; fill: currentColor; vertical-align: -4px; }
.cabecera { background: var(--verde); color: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cabecera nav { min-height: 64px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; text-decoration: none; padding: .35rem 0; }
.marca img { height: 36px; width: auto; display: block; }
.btn-menu { background: none; border: 0; color: #fff; font-size: 1.5rem; padding: .25rem .5rem; }
.menu-principal { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; align-items: center; }
.menu-principal > li > a, .menu-principal > li > button { display: flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none;
  background: none; border: 0; padding: .6rem .9rem; border-radius: .5rem; font-size: .92rem; }
.menu-principal > li > a:hover, .menu-principal > li > button:hover, .menu-principal a[aria-current="page"] { background: rgba(255,255,255,.12); }
@media (max-width: 991.98px) {
  .menu-principal { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: .75rem; }
  .menu-principal.abierto { display: flex; }
}

/* Menús desplegables */
.desplegable { position: relative; }
.menu-desplegable { position: absolute; top: calc(100% + .35rem); z-index: 1100; background: #fff; color: var(--tinta); list-style: none; margin: 0;
  padding: .4rem; border-radius: .75rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 160px; }
.menu-derecha { right: 0; }
.menu-desplegable a { display: block; padding: .45rem .75rem; color: var(--tinta); text-decoration: none; border-radius: .5rem; font-size: .85rem; }
.menu-desplegable a:hover, .menu-desplegable a.activo { background: #e8f3ee; color: var(--verde); }
.menu-apps { width: 340px; padding: 1rem; }
.titulo-apps { font-weight: 700; margin-bottom: .5rem; }
.rejilla-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.rejilla-apps a { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: .75rem .25rem; }
.rejilla-apps .mi { color: var(--acento); font-size: 1.9rem; }
@media (max-width: 991.98px) {
  .menu-apps { position: static; width: auto; box-shadow: none; margin-top: .25rem; }
}

/* Encabezados de página */
.hero-inicio { padding: 4.5rem 0; background: linear-gradient(180deg, #fff 0%, var(--fondo) 100%); }
.hero-oscuro { padding: 4.5rem 0; background: radial-gradient(circle at 80% 30%, #0b3b2c 0%, #0b1712 60%, #050a08 100%); }
.hero-modulo { padding: 4rem 0; background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 9%, #fff) 0%, #fff 100%); }
.sobretitulo { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.etiqueta { border: 1px solid var(--acento); border-radius: .35rem; padding: 0 .35rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.titulo-hero { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; color: var(--tinta); letter-spacing: -.02em; }
.titulo-hero .acento { color: var(--acento); }
.texto-hero { color: #555; font-size: 1.06rem; line-height: 1.7; max-width: 640px; }
.nota-hero { font-size: .78rem; font-style: italic; color: #6c757d; margin-top: .75rem; }
.foto-hero { width: 100%; height: auto; border-radius: 1.25rem; box-shadow: 0 25px 50px rgba(0,0,0,.18); }
.icono-hero .mi { font-size: clamp(9rem, 18vw, 16rem); color: var(--acento); }

/* Secciones */
.seccion { padding: 4rem 0; }
.titulo-seccion { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--tinta); margin-bottom: 1rem; letter-spacing: -.01em; }
.tarjeta { background: #fff; border: 1px solid #e3e8e5; border-radius: 1rem; padding: 1.75rem; transition: box-shadow .2s, transform .2s; }
.tarjeta:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.tarjeta-borde { border-top: 4px solid var(--verde); }
.tarjeta-verde { background: var(--verde); color: #fff; border-color: var(--verde); }
.tarjeta-verde .icono-tarjeta { background: rgba(255,255,255,.15); color: #fff; }
.icono-tarjeta { font-size: 1.8rem; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, #fff); width: 3.2rem; height: 3.2rem;
  border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.tarjeta-modulo { display: block; background: #fff; border: 1px solid #e3e8e5; border-radius: 1rem; padding: 1.5rem; color: var(--tinta); text-decoration: none;
  transition: box-shadow .2s, transform .2s, border-color .2s; }
.tarjeta-modulo:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateY(-2px); border-color: var(--acento); color: var(--tinta); }
.icono-modulo { font-size: 2.2rem; color: var(--acento); }
.saber-mas { color: var(--acento); font-weight: 600; font-size: .9rem; }
.lista-check { list-style: none; padding: 0; margin: 1rem 0 0; }
.lista-check li { display: flex; gap: .75rem; align-items: flex-start; padding: .45rem 0; }
.lista-check .mi { color: var(--acento); }
.lista-recursos { list-style: none; padding: 0; margin: 0; }
.lista-recursos li { display: flex; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #e3e8e5; }
.lista-recursos li > .mi { font-size: 1.8rem; color: var(--acento); }
.cifra { background: color-mix(in srgb, var(--acento) 11%, #fff); border-radius: 1rem; padding: 2rem 1rem; text-align: center; }
.cifra b { display: block; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; color: var(--acento); line-height: 1; }
.cifra span { color: #555; }
.banda-verde { background: var(--verde); color: #fff; border-radius: 2rem; padding: 3rem clamp(1.5rem, 5vw, 4rem); }
.chip-modulo { display: flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; border-radius: .75rem; padding: .8rem; font-weight: 600; }
.chip-modulo:hover { background: rgba(255,255,255,.22); color: #fff; }
.chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--acento); color: var(--acento); border-radius: 2rem; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; }
.icono-grande .mi { font-size: clamp(8rem, 16vw, 14rem); color: var(--acento); }
.panel-grafico { background: #fff; border: 1px solid #e3e8e5; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.panel-grafico figcaption { font-size: .85rem; color: #6c757d; margin-top: 1rem; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 180px; }
.barras span { flex: 1; background: var(--acento); border-radius: 4px 4px 0 0; opacity: .85; }
.progreso { height: 10px; background: #edf1ef; border-radius: 5px; overflow: hidden; }
.progreso span { display: block; height: 100%; background: var(--acento); border-radius: 5px; }
.organigrama .nodo { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--acento); color: var(--acento); border-radius: .75rem; padding: .5rem .8rem; font-weight: 600; background: #fff; font-size: .9rem; }
.organigrama .jefe { background: var(--acento); color: #fff; }
.organigrama .ramas { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px dashed color-mix(in srgb, var(--acento) 40%, #fff); }
.boton-ticket { display: inline-flex; align-items: center; gap: 1rem; text-align: left; background: var(--verde); color: #fff; border: 0; border-radius: 1.5rem;
  padding: 1.5rem 2rem; font-size: 1.05rem; box-shadow: 0 15px 35px rgba(0,91,65,.25); transition: transform .2s; }
.boton-ticket:hover { transform: translateY(-2px); }
.boton-ticket .mi { font-size: 2.4rem; }

/* Pie */
.pie { background: var(--verde); color: rgba(255,255,255,.85); padding-top: 3rem; font-size: .9rem; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.marca-pie { height: 36px; width: auto; display: block; }
.titulo-pie { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.lista-pie { list-style: none; padding: 0; margin: 0; line-height: 2; }
.red-pie { display: inline-flex; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; align-items: center; justify-content: center; }
.red-pie:hover { background: rgba(255,255,255,.15); text-decoration: none !important; }
.derechos { background: var(--tinta); color: #fff; text-align: center; padding: .9rem; margin-top: 3rem; font-size: .8rem; }

/* WhatsApp flotante */
.whatsapp-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; width: 56px; height: 56px; border-radius: 50%; background: #25d366;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .2s; }
.whatsapp-flotante:hover { transform: scale(1.07); }
.whatsapp-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* Formulario de contacto */
.modal-fondo { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; }
.modal-caja { background: #fff; border-radius: 1rem; padding: 1.5rem; width: 100%; max-width: 560px; box-shadow: 0 25px 60px rgba(0,0,0,.3); margin: auto; }
.btn-cerrar { background: none; border: 0; font-size: 1.3rem; padding: 0; color: var(--tinta); }
.ok-grande { font-size: 4rem !important; color: var(--verde-medio); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-control:focus, .form-select:focus { border-color: var(--verde); box-shadow: 0 0 0 .2rem rgba(0,91,65,.18); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }