/* ============================================================
   edusoftnet — Mockups de producto en HTML/CSS

   Son representaciones estilizadas, no capturas. Existen para que
   cada bento termine en una pieza de producto, como en fidu, sin
   inventar pantallas que se hagan pasar por la interfaz real.
   Cuando haya capturas reales, sustituyen a estos bloques.
   ============================================================ */

/* ---------- Escena: contenedor que sangra por el borde ----------
   En fidu la imagen del bento se corta contra el borde inferior de
   la celda. Aquí se reproduce con margen negativo y overflow oculto
   en la celda. */

.scene {
  position: relative;
  width: 100%;
  margin-top: 24px;
  margin-bottom: -60px;
  padding-inline: 8px;
  perspective: 1200px;

  /* El recorte contra el borde de la celda es intencionado: es como
     fidu deja entender que la interfaz sigue. Pero un corte a cuchillo
     en mitad de una fila de texto se lee como error, no como recorte.
     El degradado hace que la pieza se disuelva y el corte se lea
     deliberado, caiga donde caiga. */
  -webkit-mask-image: linear-gradient(to bottom,
      #000 calc(100% - 140px), rgba(0, 0, 0, .35) calc(100% - 50px), transparent 100%);
          mask-image: linear-gradient(to bottom,
      #000 calc(100% - 140px), rgba(0, 0, 0, .35) calc(100% - 50px), transparent 100%);
}

.scene--tight {
  margin-bottom: -36px;
  -webkit-mask-image: linear-gradient(to bottom,
      #000 calc(100% - 90px), rgba(0, 0, 0, .4) calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to bottom,
      #000 calc(100% - 90px), rgba(0, 0, 0, .4) calc(100% - 30px), transparent 100%);
}
.scene--flush { margin-bottom: -1px; }

/* ---------- Marco base ---------- */

.mock {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28),
              0 2px 6px rgba(0, 0, 0, .04);
  overflow: hidden;
  text-align: left;
}

/* ---------- Ventana de aplicación ---------- */

.mock--window { width: 100%; }

.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d6d6db;
}

.mock__bar-label {
  margin-left: 8px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.mock__body { padding: 16px; }

/* ---------- Teléfono ---------- */

.mock--phone {
  width: 232px;
  margin-inline: auto;
  padding: 8px;
  background: #1b1b1f;
  border: 0;
  border-radius: 34px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45),
              0 0 0 1px rgba(0, 0, 0, .06);
}

.mock__screen {
  position: relative;
  background: #fff;
  border-radius: 27px;
  overflow: hidden;
  padding: 22px 14px 16px;
}

.mock__notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 5px;
  border-radius: 3px;
  background: #1b1b1f;
  opacity: .22;
}

/* ---------- Piezas internas ---------- */

.mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.mock__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.mock__sub {
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mock__list { display: grid; gap: 7px; }

.mock__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: var(--surface);
  border-radius: 10px;
}

.mock__item--plain { background: transparent; padding-inline: 0; }

.mock__avatar {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.mock__avatar--soft { background: var(--aqua); color: var(--aqua-ink); }

.mock__text { flex: 1 1 auto; min-width: 0; }

.mock__label {
  display: block;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__meta {
  display: block;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 14px;
}

/* Etiqueta de estado */
.mock__tag {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
}

.mock__tag--ok    { background: var(--mint); color: var(--mint-ink); }
.mock__tag--warn  { background: var(--sand); color: #6b4708; }
.mock__tag--info  { background: var(--aqua); color: var(--aqua-ink); }
.mock__tag--muted { background: var(--surface-sunk); color: var(--ink-faint); }

/* Barra de progreso */
.mock__meter {
  height: 5px;
  border-radius: 3px;
  background: var(--surface-sunk);
  overflow: hidden;
}

.mock__meter i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
}

.mock__meter--soft i { background: var(--accent); }

/* Cifra grande */
.mock__figure {
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -.03em;
}

.mock__figure small {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
}

/* Rejilla de métricas */
.mock__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mock__stat {
  padding: 11px 12px;
  background: var(--surface);
  border-radius: 10px;
}

.mock__stat span {
  display: block;
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mock__stat b {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -.02em;
}

/* Burbujas de mensaje */
.mock__msg {
  max-width: 86%;
  padding: 8px 11px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 15px;
}

.mock__msg--in {
  background: var(--surface);
  color: var(--ink-soft);
  border-bottom-left-radius: 4px;
}

.mock__msg--out {
  margin-left: auto;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mock__msg b { font-weight: 700; }

/* Barra de gráfico */
.mock__chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 62px;
  padding-top: 6px;
}

.mock__chart i {
  flex: 1 1 0;
  border-radius: 3px 3px 0 0;
  background: var(--surface-sunk);
}

.mock__chart i.is-on { background: var(--ink); }

/* Calendario reducido */
.mock__cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mock__cal span {
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 600;
}

.mock__cal span.is-on   { background: var(--ink); color: #fff; }
.mock__cal span.is-soft { background: var(--accent-soft); color: var(--accent); }

/* Apilado de dos piezas, la de atrás girada */
.scene--stack { display: grid; }

.scene--stack > * { grid-area: 1 / 1; }

.scene--stack .mock--back {
  transform: translate(14%, -8%) scale(.86) rotate(3deg);
  opacity: .55;
  filter: saturate(.6);
}

@media (max-width: 479px) {
  .mock--phone { width: 206px; }
  .scene { margin-bottom: -44px; }
}

/* ============================================================
   ESCENA DEL HERO
   Panel institucional + teléfono flotante, como la composición
   bento que fidu usa bajo el titular.
   ============================================================ */

.hero-scene {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 0 20px;
}

.hero-scene__main { border-radius: var(--radius); }

.hero-scene__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 18px;
}

.hero-scene__col { min-width: 0; }

.hero-scene__phone {
  position: absolute;
  right: -8px;
  bottom: -26px;
  width: 190px;
  z-index: 2;
}

.hero-scene__phone .mock__screen { padding-top: 20px; }

@media (max-width: 991px) {
  .hero-scene__phone { right: -4px; bottom: -18px; width: 150px; }
}

@media (max-width: 767px) {
  .hero-scene__body { grid-template-columns: 1fr; }
  .hero-scene__phone { display: none; }
}

/* El hero no recorta: la escena vive dentro del flujo */
.hero__media { overflow: visible; }

/* Escena en página de herramienta: no sangra, vive centrada */
.tool-scene {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

.tool-scene .scene {
  margin-top: 0;
  margin-bottom: 0;
  padding-inline: 0;
  -webkit-mask-image: none;
          mask-image: none;
}

/* ============================================================
   COMPOSICIÓN DE PORTADA
   Piezas flotantes a distinta profundidad alrededor de un panel
   central, al modo de las portadas de producto SaaS.
   ============================================================ */

.cover {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: center;
  gap: 16px;
  max-width: 980px;
  margin-inline: auto;
  padding: 10px var(--pad-page) 30px;
}

.cover__col {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cover__col--left  { transform: translateY(14px); }
.cover__col--right { transform: translateY(-10px); }

/* El panel central manda: más alto, más cerca, sombra más marcada */
.cover__center {
  position: relative;
  z-index: 3;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .38),
              0 2px 8px rgba(0, 0, 0, .05);
}

.cover__center .mock__body { padding: 18px; }

.cover .mock { font-size: 11px; }

/* Halo de color detrás del panel central, como el degradado de fidu */
.cover::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto;
  width: min(560px, 70%);
  aspect-ratio: 1;
  margin-inline: auto;
  left: 0;
  right: 0;
  background: var(--grad-text);
  filter: blur(90px);
  opacity: .16;
  pointer-events: none;
}

.cover-wrap { position: relative; }

/* Fila de capacidades, abajo a la izquierda */
.cover__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cover__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}

.cover__chip::after {
  content: "›";
  color: var(--ink-faint);
  font-size: 13px;
}

/* Tarjeta pequeña suelta */
.cover__mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .3);
}

.cover__mini b { display: block; font-size: 11px; line-height: 15px; }

.cover__mini span {
  display: block;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 14px;
}

@media (max-width: 991px) {
  .cover {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .cover__center { grid-column: span 2; order: -1; max-width: 460px; margin-inline: auto; }
  .cover__col--left, .cover__col--right { transform: none; }
}

@media (max-width: 767px) {
  .cover { grid-template-columns: 1fr; padding-bottom: 16px; }
  .cover__center { grid-column: span 1; }
  .cover__col--right { display: none; }
}

/* Portada por imagen (alternativa a la composición en HTML) */
/* El ancho real de la imagen es 940px (980 menos el padding lateral).
   El atributo sizes de index.html debe coincidir con esto. */
.hero__media--img {
  max-width: 980px;
  margin: 30px auto 0;
  padding-inline: var(--pad-page);
}

.hero__media--img img {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .hero__media--img { margin-top: 22px; }
}

/* ============================================================
   DUO  —  fotografia con un mockup flotando encima
   La escena da contexto y el panel ensena el producto. El panel
   sobresale por la izquierda: el overflow-x: clip del body evita
   que aparezca barra horizontal.
   ============================================================ */

.duo {
  position: relative;
  padding-bottom: 56px;
}

.duo__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -28px rgba(20, 46, 96, .5);
}

.duo__mock {
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 78%;
  transform: scale(.72);
  transform-origin: left bottom;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45),
              0 2px 8px rgba(0, 0, 0, .06);
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .split__media:hover .duo__mock {
    transform: scale(.72) translateY(-8px);
  }
}

/* Apilados en pantallas estrechas: superpuestos no caben y el panel
   se volveria ilegible. */
@media (max-width: 767px) {
  .duo { padding-bottom: 0; }

  .duo__mock {
    position: static;
    width: 100%;
    transform: none;
    margin-top: 18px;
  }
}

/* Variante de .duo cuando la pieza de base lleva alfa: el recuadro y la
   sombra rectangular no valen, porque el contenido no llena el marco. */
.duo__foto--alfa {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 18px 30px rgba(20, 46, 96, .18));
}

/* Pieza superpuesta cuando en vez de un mockup en HTML es una imagen
   recortada. Misma posicion que .duo__mock, sin caja ni esquina: la
   sombra sigue el contorno real. */
.duo__pieza {
  position: absolute;
  right: -16px;
  bottom: 0;
  width: 62%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 22px 34px rgba(20, 46, 96, .26));
}

.duo--pieza-izq .duo__pieza {
  right: auto;
  left: -16px;
}

@media (max-width: 767px) {
  .duo--con-pieza { padding-bottom: 0; }

  .duo__pieza {
    position: static;
    width: 100%;
    margin-top: 12px;
  }
}

/* ============================================================
   PANEL DE SINCRONIZACION
   Dos origenes en la misma fila: lo que llega de fuera y el
   nivel de logro que registra edusoftnet.
   ============================================================ */

.sync__cabeza {
  display: grid;
  grid-template-columns: 1fr 76px 22px 46px;
  align-items: center;
  gap: 10px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--hairline);
}

.sync__col {
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sync__col--der { text-align: right; }

.sync__fila {
  display: grid;
  grid-template-columns: 1fr 76px 22px 46px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #f0f0f3;
}

.sync__fila:last-of-type { border-bottom: 0; }

.sync__act {
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync__flecha {
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

.sync__nivel {
  justify-self: end;
  min-width: 34px;
  padding: 3px 0;
  border-radius: 7px;
  background: var(--nivel-fondo, var(--mint));
  color: var(--nivel-tinta, var(--mint-ink));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
}

.sync__nivel--ad { --nivel-fondo: var(--mint); --nivel-tinta: var(--mint-ink); }
.sync__nivel--a  { --nivel-fondo: var(--aqua); --nivel-tinta: var(--aqua-ink); }
.sync__nivel--b  { --nivel-fondo: var(--sand); --nivel-tinta: #6b4708; }

.sync__pie {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0 10px;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 14px;
}

.sync__punto {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f9d55;
}

@media (max-width: 479px) {
  .sync__cabeza,
  .sync__fila { grid-template-columns: 1fr 62px 18px 40px; gap: 7px; }
  .sync__act { font-size: 10px; }
}