/* ==========================================================
   CORE.CSS — Estilos de la página de inicio
   Se carga en: core/inicio.html (bloque extra_css)
   Los bloques siguen el mismo orden que las secciones:
   1. Hero · 2. Destacados · 3. Caminos · 4. Beneficios
   5. Nosotros · 6. FAQ · 7. Llamado · 8. Responsive
   9. Movimiento reducido
   Usa las variables y clases globales de static/css/base.css
   (la pastilla .estado, .enlace-flecha y el acordeón .faq viven en base.css)
   ========================================================== */


/* ========== 1. HERO ========== */
.hero {
  position: relative;
  overflow: hidden; /* evita que el brillo y la etiqueta causen scroll horizontal */
  padding: 72px 0 96px;
  border-bottom: 1px solid var(--border);
}

/* Brillo celeste difuso en la esquina superior derecha */
.hero::before {
  content: "";
  position: absolute;
  top: -240px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sky-glow), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative; /* queda por encima del brillo */
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 56px;
}

.hero__badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--sky-light);
  color: var(--sky);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* text-wrap: balance reparte el título en 2 líneas parecidas en escritorio */
.hero__title {
  margin: 20px 0;
  font-size: clamp(2.25rem, 3.9vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* "sistema ideal" en celeste y sin partirse en dos líneas */
.hero__title-accent {
  color: var(--sky);
  white-space: nowrap;
}

.hero__text {
  max-width: 520px;
  font-size: 1.05rem;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Checks: Demo en vivo gratis · Pago mensual · Soporte incluido */
.hero__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 28px;
}

.hero__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.hero__check svg {
  width: 16px;
  height: 16px;
  color: var(--sky);
}

.hero__dev-link {
  margin-top: 20px;
}

/* Columna derecha: contenedor de la ventana y la etiqueta flotante */
.hero__visual {
  position: relative;
  padding-bottom: 24px;
}

/* Ventana azul marino con el catálogo */
.vitrina {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

/* Barra superior: puntitos, título y total */
.vitrina__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.vitrina__dots {
  display: flex;
  gap: 6px;
}

.vitrina__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glass-border);
}

.vitrina__title {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--on-navy-muted);
}

.vitrina__count {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--sky);
  white-space: nowrap;
}

/* Área visible del carrusel vertical: altura fija para ~4 sistemas.
   core.js calcula --alto-visible; 296px es el valor de respaldo.
   La máscara crea el degradado suave arriba y abajo. */
.vitrina__viewport {
  height: var(--alto-visible, 296px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

/* La pista lleva la lista original + la copia y sube la mitad de su alto:
   al terminar, la copia queda justo donde empezó la original (sin saltos).
   core.js calcula --duracion (3 s por sistema). */
.vitrina__pista {
  animation: vitrina-subir var(--duracion, 12s) linear infinite;
}

@keyframes vitrina-subir {
  to {
    transform: translateY(-50%);
  }
}

/* Pausa con el mouse encima (solo en pantallas con mouse) o al enfocar con teclado */
@media (hover: hover) {
  .vitrina__viewport:hover .vitrina__pista {
    animation-play-state: paused;
  }
}

.vitrina__viewport:has(:focus-visible) .vitrina__pista {
  animation-play-state: paused;
}

/* El espacio de abajo (en vez de gap entre listas) hace que ambas mitades midan igual */
.vitrina__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}

/* Cada fila: ícono | nombre y descripción | estado y precio | botón demo */
.vitrina__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "icono info meta demo";
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.vitrina__icon {
  grid-area: icono;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--glass);
  color: var(--sky);
}

.vitrina__icon svg {
  width: 20px;
  height: 20px;
}

.vitrina__info {
  grid-area: info;
  min-width: 0; /* permite que la descripción se corte con "..." */
}

.vitrina__name {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Descripción corta: una sola línea terminada en "..." */
.vitrina__desc {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--on-navy-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vitrina__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.vitrina__price {
  font-size: 0.7rem;
  color: var(--on-navy-muted);
  white-space: nowrap;
}

.vitrina__demo {
  grid-area: demo;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--sky);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transition);
}

.vitrina__demo svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.vitrina__demo:hover {
  transform: translateY(-1px);
}

.vitrina__demo:focus-visible,
.vitrina__footer:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* Demo deshabilitada (sistemas "Próximamente") */
.vitrina__demo:disabled {
  background: var(--glass-border);
  color: var(--on-navy-muted);
  cursor: not-allowed;
  transform: none;
}

.vitrina__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sky);
}

.vitrina__footer svg {
  width: 16px;
  height: 16px;
}

/* Etiqueta blanca que "flota" sobre la esquina inferior de la ventana */
.hero__tag {
  position: absolute;
  bottom: 0;
  left: -12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.hero__tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}


/* ========== 2. DESTACADOS ========== */
/* Área visible del carrusel horizontal.
   - El relleno de arriba y abajo deja espacio para que la tarjeta se levante
     y muestre su sombra sin cortarse.
   - La máscara difumina los bordes izquierdo y derecho hacia el fondo de la sección. */
.sistemas__viewport {
  overflow: hidden;
  padding: 8px 0 28px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Pista del carrusel: una fila con las tarjetas originales + su copia.
   --visibles: tarjetas que se ven a la vez (4 / 2 / 1 según la pantalla).
   core.js calcula --cantidad (tarjetas originales) y --duracion (4 s por tarjeta). */
.sistemas {
  --visibles: 4;
  --gap: 24px;
  display: flex;
  gap: var(--gap);
  animation: sistemas-desplazar var(--duracion, 16s) linear infinite;
}

/* Recorre exactamente el ancho de las tarjetas originales (tarjeta + espacio);
   al terminar, la copia ocupa su lugar y el bucle no se nota. */
@keyframes sistemas-desplazar {
  to {
    transform: translateX(calc(-1 * var(--cantidad, 4) * (100% + var(--gap)) / var(--visibles)));
  }
}

/* Pausa con el mouse encima, con foco de teclado o cuando core.js lo pide (flechas y dedo) */
@media (hover: hover) {
  .sistemas__viewport:hover .sistemas {
    animation-play-state: paused;
  }
}

.sistemas__viewport:has(:focus-visible) .sistemas,
.sistemas__viewport[data-pausado] .sistemas {
  animation-play-state: paused;
}

/* La tarjeta no lleva relleno: la imagen llega hasta los bordes.
   Su ancho reparte el área visible entre --visibles tarjetas. */
.sistema {
  display: flex;
  flex: 0 0 calc((100% - (var(--visibles) - 1) * var(--gap)) / var(--visibles));
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.sistema__media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.sistema__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ilustración cuando no hay imagen: degradado celeste con el ícono grande */
.sistema__ilustracion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--sky-light), var(--sky-glow));
  color: var(--sky);
}

.sistema__ilustracion svg {
  width: 56px;
  height: 56px;
}

.sistema__estado {
  position: absolute;
  top: 12px;
  left: 12px;
}

.sistema__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.sistema__categoria {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}

.sistema__nombre {
  margin: 6px 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* El precio se empuja hacia abajo para que todas las tarjetas queden alineadas */
.sistema__precio {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
}

.sistema__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.sistema__btn {
  padding: 10px 12px;
  font-size: 0.8rem;
}

/* Botón de demo deshabilitado (sistemas "Próximamente") */
.sistema__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sistema__btn:disabled:hover {
  border-color: var(--border);
  color: var(--navy);
}

/* Flechas anterior / siguiente debajo del carrusel */
.destacados__controles {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.destacados__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.destacados__flecha svg {
  width: 20px;
  height: 20px;
}

.destacados__flecha:hover {
  border-color: var(--sky);
  color: var(--sky);
}

.destacados__flecha:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}

.destacados__mas {
  margin-top: 32px;
  text-align: center;
}


/* ========== 3. CAMINOS ========== */
.caminos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}


/* ========== 4. BENEFICIOS ========== */
/* Grid 2x2 de tarjetas horizontales (ícono a la izquierda) */
/* Usa el mismo ancho de contenedor que las demás secciones */
.beneficios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.beneficio {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* El título arranca alineado con el ícono (sin el margen superior de .card__title) */
.beneficio__title {
  margin: 0 0 8px;
  padding-top: 2px;
  line-height: 1.35;
}


/* ========== 5. NOSOTROS ========== */
.nosotros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

.nosotros__text {
  margin-top: 16px;
  color: var(--muted);
}

.nosotros__checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.nosotros__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}

.nosotros__check svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--sky);
}

/* Tarjetas de los fundadores */
.equipo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.miembro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Círculo con las iniciales */
.miembro__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 700;
}

.miembro__avatar--sky {
  background: var(--sky);
}

/* Foto subida en el admin: mismo círculo, recortada sin deformarse */
.miembro__avatar--foto {
  object-fit: cover;
}

.miembro__nombre {
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 700;
}

.miembro__rol {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sky);
}

.miembro__bio {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.miembro__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
}

.miembro__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  transition: color var(--transition);
}

.miembro__link svg {
  width: 16px;
  height: 16px;
}

.miembro__link:hover {
  color: var(--sky);
}


/* ========== 6. FAQ ========== */
/* Los estilos del acordeón (.faq__*) están en base.css: también los usa el detalle de cada sistema */


/* ========== 7. LLAMADO ========== */
.llamado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.llamado__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 40px;
  border-radius: var(--radius-lg);
}

/* Tarjeta para negocios: azul marino */
.llamado__card--navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

/* Tarjeta para desarrolladores y socios: celeste claro */
.llamado__card--sky {
  background: var(--sky-light);
  border: 1px solid var(--sky-glow);
}

.llamado__tag {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}

.llamado__card--navy .llamado__tag {
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.llamado__card--sky .llamado__tag {
  background: var(--white);
}

.llamado__title {
  margin-top: 16px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.llamado__text {
  margin: 12px 0 28px;
  color: var(--muted);
}

.llamado__card--navy .llamado__text {
  color: var(--on-navy-muted);
}

/* El botón queda al fondo para alinear ambas tarjetas */
.llamado__btn {
  margin-top: auto;
}

/* Tarjeta de negocios: catálogo y "Pedir un sistema a la medida", también al fondo */
.llamado__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}


/* ========== 8. RESPONSIVE ========== */

/* Tablet grande: grids de 4 columnas pasan a 2 y el carrusel muestra 2 tarjetas */
@media (max-width: 960px) {
  .caminos {
    grid-template-columns: repeat(2, 1fr);
  }

  .sistemas {
    --visibles: 2;
    --gap: 20px;
  }
}

/* Tablet: las secciones de 2 columnas pasan a una */
@media (max-width: 860px) {
  .hero {
    padding: 56px 0 72px;
  }

  .hero__inner,
  .nosotros,
  .llamado,
  .beneficios {
    grid-template-columns: 1fr;
  }

  .hero__inner,
  .nosotros {
    gap: 40px;
  }

  .hero__visual {
    width: 100%;
    max-width: 560px;
  }

  .hero__tag {
    left: 12px;
  }
}

/* Móvil: todo a una columna y el carrusel muestra 1 tarjeta */
@media (max-width: 600px) {
  .caminos,
  .equipo {
    grid-template-columns: 1fr;
  }

  .sistemas {
    --visibles: 1;
    --gap: 16px;
  }

  /* Con una sola tarjeta el degradado de los bordes es más angosto */
  .sistemas__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  }

  .vitrina {
    padding: 16px;
  }

  /* La fila del catálogo pasa a: ícono | textos + estado | botón */
  .vitrina__item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icono info demo"
      "icono meta demo";
    gap: 6px 12px;
    padding: 12px;
  }

  .vitrina__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .llamado__card {
    padding: 32px 24px;
  }
}


/* ========== 9. MOVIMIENTO REDUCIDO ========== */
/* Si la persona pidió menos animaciones en su sistema:
   - el hero queda como lista fija con scroll interno;
   - los destacados quedan como fila con scroll horizontal manual (scroll-snap) y flechas;
   - las copias del bucle se ocultan porque ya no hacen falta. */
@media (prefers-reduced-motion: reduce) {
  .vitrina__pista,
  .sistemas {
    animation: none;
  }

  [data-carrusel-copia] {
    display: none;
  }

  .vitrina__viewport {
    overflow-y: auto;
  }

  .sistemas__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .sistema {
    scroll-snap-align: start;
  }
}