/* Estilos de la portada. Estaban embebidos en index.php; se sacaron aca
   para que los compartan la version en castellano y la de /en/ sin
   duplicarlos, y para que el navegador pueda cachearlos. */


/* ── HERO SECTION ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 8rem) 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  overflow: hidden;
}

.hero-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3.5rem;
  z-index: 1;
}

/* Encabezado e información */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
}

.hero-title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.hero-description {
  font-size: clamp(1rem, 2vw, 1rem);
  line-height: 1.6;
  color: var(--color-text-soft);
  max-width: 680px;
  margin-bottom: 2.25rem;
}

/* Botones de acción */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 250px;
  text-decoration: none;
  border: 0;
  transition: background var(--tran), color var(--tran);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

/* El color ya viene con alfa 0.55; el opacity 0.7 que habia aca lo multiplicaba
   y dejaba el texto en gris 107 sobre fondo 15: contraste 3.6:1, por debajo del
   4.5:1 que exige WCAG AA. Sin el opacity queda en gris 146 y sube a 6.2:1. */
.hero-microcopy {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}



/* Mockup de la app con resplandor suave */
.hero-media {
  position: relative;
  width: 100%;
  max-width: 1040px;
}

.hero-media-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280%;
  height: 280%;
background-image: radial-gradient(
    circle at 50% 100%, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(15, 15, 15, 0) 70%
  );
  pointer-events: none;
  z-index: 0;

}

.hero-media-frame {
  background: var(--bg);
  position: relative;
  z-index: 1;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 25px 25px -15px rgba(0, 0, 0, 0.2),
              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  margin-bottom: -60px;
}

.hero-media-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Adaptación Mobile */
@media (max-width: 768px) {
  .hero {
    padding-top: calc(var(--nav-h) + 2rem);
  }

  .hero-inner {
    gap: 2.5rem;
  }

  /* A este ancho "Gestiona tu estudio de" ya no entra en una linea, asi que
     el corte forzado dejaria el "de" colgado solo. Se anula y se deja que el
     navegador reparta: `balance` equilibra el largo de las lineas y evita que
     quede una sola palabra al final. Si no lo soporta, envuelve normal. */
  .hero-title br {
    display: none;
  }

  .hero-title {
    text-wrap: balance;
  }

  /* `align-items: center` evita que el boton se estire a lo ancho de la
     columna: se queda del tamano de su contenido. */
  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  /* En mobile el hero se queda con una sola llamada a la accion. */
  .btn-hero-secondary {
    display: none;
  }

  /* El mockup se sale de los 24px de relleno del hero para ganar ancho, sin
     mover el texto, que si los necesita. El ancho explicito es necesario: con
     `width: 100%` los margenes negativos lo corren de lugar en vez de
     ensancharlo. */
  .hero-media {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }

  .hero-media-frame {
    border-radius: 10px;
    padding: 4px;

    /* Mas negativo que los -60 de escritorio: funciones sube mas y le corta
       otro tanto de imagen por abajo. */
    margin-bottom: -110px;
  }

  .hero-media-frame img {
    /* Adentro de un marco de 10 con 4 de relleno, el radio interior que
       acompana es 6: si lleva el mismo que el marco, la curva se ve doblada. */
    border-radius: 6px;
  }
}
  


/* ── HERO ZOOM: mosaico de capturas (estilo monday.com) ────────────────────── */

/* `overflow-x: hidden` en el body convierte al body en contenedor de scroll y
   rompe `position: sticky`. `clip` recorta igual pero sin crear scroller; los
   navegadores que no lo soportan ignoran la linea y conservan `hidden`. */
body { overflow-x: clip; }

/* Base (tambien es el estado en mobile): el mosaico se comporta como el
   mockup unico de siempre y las tarjetas hermanas no existen. */
.hero-stage { width: 100%; }

.hero-copy {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero-mosaic {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

/* En mobile las columnas no existen como cajas: sus hijos suben al mosaico,
   y como las tarjetas estan ocultas solo queda el mockup, igual que siempre. */
.hero-col { display: contents; }

.hero-tile { display: none; }

/* ── Escritorio: la animacion completa ─────────────────────────────────────── */
@media (min-width: 1025px) {

  /* `.is-zoom` la agrega el JS. Sin JS, el hero queda como estaba. */
  .hero.is-zoom {
    display: block;
    height: 350vh;          /* pista de scroll que alimenta la animacion */
    min-height: 0;
    padding: 0;
    overflow: visible;      /* imprescindible para que el sticky funcione */
  }

  .hero.is-zoom .hero-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  .hero.is-zoom .hero-inner {
    position: absolute;
    inset: 0;
    display: block;
    max-width: none;
    gap: 0;
  }

  /* Texto: sube y se desvanece al empezar el scroll */
  .hero.is-zoom .hero-copy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: calc(var(--nav-h) + 6rem) 1.5rem 0;
    transform: translate3d(0, var(--copy-y, 0px), 0);
    will-change: transform;
  }

  .hero.is-zoom .hero-copy[data-hidden="true"] { pointer-events: none; }

  /* Mosaico: 5 columnas de 5 celdas, SIEMPRE a su tamano final. Ya no escala:
     las hermanas nacen chicas y no cambian de tamano nunca. Solo se desplaza
     en vertical para acompanar la subida del mockup. */
  .hero.is-zoom .hero-mosaic {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 2300px;          /* 5 celdas de 420px + 4 huecos de 50px */
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 50px;
    /* El corrimiento es CONSTANTE: sube el mosaico un poco para que el mockup
       tenga mas recorrido acompanando al texto. El mosaico no se mueve. */
    transform: translate3d(-50%, -50%, 0)
               translate3d(0, var(--mos-y, 0px), 0);
  }

  /* Pantallas anchas: el mosaico crece para que las tarjetas no queden chicas.
     Solo cambia el ancho: el alto de fila, la escala final del mockup y el
     recorrido de las columnas se derivan de el y se recalculan solos. */
  @media (min-width: 1700px) {
    .hero.is-zoom .hero-mosaic {
      width: 2600px;        /* 5 celdas de 480px + 4 huecos de 50px */
    }
  }

  /* Cada columna se desplaza por su cuenta. `--dir` (inline, desde PHP) le da
     el sentido: las impares bajan, las pares suben. */
  .hero.is-zoom .hero-col {
    display: grid;
    grid-auto-rows: max-content;
    gap: 50px;
    transform: translate3d(0, calc(var(--dir, 1) * var(--col-y, 0px)), 0);
    will-change: transform;
  }

  /* La columna del mockup va por encima de las demas. Cuando esta grande
     desborda su celda e invade las columnas vecinas, y las que vienen
     despues en el DOM lo taparian: cada columna es su propio contexto de
     apilamiento por el transform, asi que el orden lo decide el z-index. */
  .hero.is-zoom .hero-col:nth-child(3) {
    z-index: 2;
  }

  /* Tarjetas hermanas: solo cambia su opacidad, nunca su tamano.
     `--d` da profundidad (las de los bordes quedan mas apagadas).
     El marco y la sombra replican los del mockup TAL COMO SE VEN al final:
     el suyo mide 8px de padding y 20px de radio, pero se escala con el, asi
     que aterriza en ~3.7px y ~9px. El padding de 4px con radio 9 deja el
     recorte interno en 5px, que es donde cae el del mockup. */
  .hero.is-zoom .hero-tile {
    display: block;
    padding: var(--marco, 4px);
    border-radius: calc(var(--marco, 4px) * 2.5);
    overflow: hidden;
    background: var(--color-bg);
    opacity: calc(var(--tile-o, 0) * var(--d, 1));
    box-shadow: 0 var(--marco, 4px)
                  calc(var(--marco, 4px) * 2.5)
                  calc(var(--marco, 4px) * -1.25) rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  }

  .hero.is-zoom .hero-tile img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Hueco central: reserva el espacio de una celda. El mockup va encima,
     centrado, sin ocupar lugar en la grilla.
     El z-index es necesario: las tarjetas llevan `opacity` calculada, y eso
     les crea contexto de apilamiento propio. Sin esto, las de las filas de
     abajo (posteriores en el DOM) taparian al mockup cuando esta grande. */
  .hero.is-zoom .hero-slot {
    position: relative;
    z-index: 2;
    aspect-ratio: 1920 / 1079;
  }

  /* El mockup arranca a su tamano real (1040px, el del hero original) y solo
     se reduce hasta encajar en el hueco. Nunca se amplia: escalar hacia
     arriba una capa compuesta la rasteriza borrosa.
     En pantallas bajas se achica lo justo para quedar siempre debajo de la
     barra fija. Los 80px extra son el doble del corrimiento del mosaico: el
     mockup no descansa centrado sino 40px mas arriba. 1.7568 es su aspecto. */
  .hero.is-zoom .hero-media {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(
      1040px,
      calc((100vh - (var(--nav-h) + 28px) * 2 - 80px) * 1.7568)
    );
    max-width: none;
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -50%, 0)
               translate3d(0, var(--mo-y, 0px), 0)
               scale(var(--mo-s, 1));
    will-change: transform;
  }

  .hero.is-zoom .hero-media-glow { display: none; }

  /* El mockup vive dentro de un scale(), asi que TODO lo que declara aca se
     encoge con el. La sombra proyectada tiene que encogerse (acompana al
     tamano), pero el filete interior no: es un detalle de 1px que debe
     renderizar 1px siempre, igual que en las hermanas, que no estan
     escaladas. Por eso se divide por la escala viva. */
  .hero.is-zoom .hero-media-frame {
    margin-bottom: 0;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6),
                0 0 0 calc(1px / var(--mo-s, 1)) rgba(255, 255, 255, 0.08) inset;
  }

  /* Pantallas de poca altura (notebooks 1366x768, 1280x720): el texto ocupa
     casi toda la ventana y no queda aire para la captura. Se recorta el
     respiro superior para recuperarlo. */
  @media (max-height: 800px) {
    .hero.is-zoom .hero-copy {
      padding-top: calc(var(--nav-h) + 2.5rem);
    }

    /* El titulo y los margenes se achican para que el bloque de texto ocupe
       menos y quede a la vista mas del mockup, que arranca justo debajo. */
    .hero.is-zoom .hero-title {
      font-size: clamp(2rem, 3.4vw, 2.9rem);
      margin-bottom: 1rem;
    }

    .hero.is-zoom .hero-description {
      margin-bottom: 1.5rem;
    }
  }

}

/* ── Estilos de tarjeta de oportunidad (idénticos a ventas.php) ── */
.venta-card {
    background: var(--body-color);
    border-radius: 16px;
    padding: 14px 14px 18px;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition: var(--tran-03);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    margin: 80px auto;
}
.venta-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.venta-drag-handle {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 250px;
    background: transparent;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: grab;
    flex-shrink: 0;
}
.venta-drag-handle:hover {
    opacity: 1;
    color: var(--primary-color);
}
.venta-drag-handle:active {
    cursor: grabbing;
}
.venta-drag-handle svg {
    width: 24px;
    height: 24px;
}
.venta-card-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.venta-menu-trigger {
    border: 0;
    border-radius: 250px;
    background: transparent;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.venta-menu-trigger:hover {
    opacity: 1;
    background: var(--bg-color-btn);
}

.venta-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.venta-card-title-block {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
    flex: 1;
    margin-left: 2px;
}
.venta-card-title {
    font-weight: 500;
    font-size: 0.95em;
    color: var(--text-color);
    line-height: 1.3;
    min-width: 0;
}
.venta-card-location {
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    opacity: 0.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.venta-card-cliente {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 500;
}
.venta-client-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}
.venta-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
}
.venta-card-monto {
    font-weight: 500;
    font-size: 1em;
    color: var(--text-color);
}
.venta-card-fecha {
    font-size: 12px;
    opacity: 0.5;
}
.propuesta-progress {
    margin-top: 14px;
    margin-bottom: 10px;
}
.propuesta-progress-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: 0.03em;
}
.propuesta-progress-bar {
    position: relative;
    display: flex;
    gap: 4px;
    height: 6px;
    margin-bottom: 8px;
    overflow: visible;
    border-radius: 999px;
}
.propuesta-progress-fill {
    height: 100%;
    min-width: 0;
    border-radius: 999px;
    background: var(--primary-color);
    transition: width .25s ease;
}
.propuesta-progress-rest {
    height: 100%;
    min-width: 10px;
    flex: 1;
    border-radius: 999px;
    background: #313131;
}
.propuesta-progress-meta {
    margin-top: 7px;
    font-size: 12px;
    opacity: .5;
    letter-spacing: 0.04em;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}
.propuesta-progress-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}