/* SetFileCloud — setfilecloud.css
   Ajustes propios de este sitio. tokens/base/layout/components/responsive
   vienen tal cual del sistema de diseño ya validado (setfile.net/setconta)
   — este fichero es lo único que no es una copia 1:1.

   Iconos: SVG de Font Awesome Free 6.7.2 (licencia CC BY 4.0), auto-
   alojados — ver assets/vendor/fontawesome/. Inline en el HTML (path
   real copiado del paquete oficial, sin CDN ni webfont), coloreados por
   CSS via currentColor para que seguir el tema claro/oscuro no cueste
   nada extra. */

/* ---- Utilidad de icono ---- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* ---- Precio destacado en el Hero ---- */
.hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  background-color: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  margin-block: var(--space-5);
}

.hero-price__amount {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-accent);
}

.hero-price__unit {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

/* ---- Lista de razones con icono (sustituye a .integration-columns
   cuando el contenido son frases cortas con un icono delante, en vez de
   párrafos largos en columnas) ---- */
.icon-feature-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.icon-feature {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.icon-feature__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.icon-feature__icon .icon {
  width: 22px;
  height: 22px;
}

.icon-feature h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-1);
}

.icon-feature p {
  color: var(--color-text-secondary);
  margin-bottom: 0;
  font-size: var(--fs-small);
}

/* ---- Modalidades: rejilla de 2 tarjetas de precio ---- */
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.pricing-grid .pricing-card {
  max-width: none;
  display: flex;
  flex-direction: column;
}

.pricing-card__terms {
  text-align: left;
}

.pricing-card__terms li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.pricing-card__terms .icon {
  color: var(--color-accent);
  margin-top: 0.2em;
}

.pricing-card--personalizado {
  border-color: var(--color-border-strong);
}

.pricing-card__cta {
  margin-top: auto;
  padding-top: var(--space-5);
}

/* ---- Listas de configuración/servicios con icono pequeño delante ---- */
.check-list {
  display: grid;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-text-secondary);
}

.check-list .icon {
  color: var(--color-accent);
  margin-top: 0.25em;
  flex-shrink: 0;
}

/* ---- Captura de la consola de administración (Infraestructura) ---- */
.console-shot {
  margin-block: var(--space-6);
  text-align: center;
}

.console-shot img {
  width: 100%;
  /* 775px = ancho nativo real de fms-console.png (imagen sustituida
     2026-09-07 por la vista completa del Dashboard de FileMaker Server
     26, recortada y con las zonas de identificación difuminadas). No
     subir de 775px: haría upscale y se vería borrosa. */
  max-width: 775px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.console-shot figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ---- FileMaker + IA: aviso experimental, discreto a propósito (Nico:
   "no presentar como producto terminado") ---- */
.experimental-panel {
  background-color: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}

.experimental-badge {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
  margin-bottom: var(--space-3);
}

/* ---- Formulario: los selects necesitan el mismo tratamiento que
   input/textarea (components.css solo cubre esos dos) ---- */
.form-row select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.form-row select:focus-visible {
  border-color: var(--color-accent);
}

.form-row.has-error select {
  border-color: #d92d20;
}

.form-help {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-4) * -1 + var(--space-2));
  margin-bottom: var(--space-5);
}

/* ---- Desktop: 2 columnas para modalidades y feature grid ---- */
@media (min-width: 760px) {
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .icon-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}